@import "https://fonts.googleapis.com/css2?family=Tajawal&display=swap";
html,body{font-size:16px;scroll-behavior:smooth;font-family:"Tajawal"}
a{color:#fff}
a:hover{color:#fff;}
hr{border:0;height:1px;background:#c5c1c1;background-image:linear-gradient(to right,#223d88,#ccc,#223d88)}
h1,h2,h3,h4,h5,h6,p{font-family:"Tajawal"}
::selection { background: #223d88;}

input[type=file]{font-size: 10px;border-radius: 5px;}
input[type=file]:hover{background: #fff;border: thin solid #223d88;cursor:pointer;}
input[type=file]::before {float: right; content: "تحميل أو تغيير الملف : ";}
input[type=file]::file-selector-button{display: none}
input[type=file]::file-selector-button{background:#c5c1c1;color: #c5c1c1;border:thin solid #c5c1c1;border-radius:5px;cursor:pointer;}
input[type=file]::file-selector-button:hover{border:thin solid #fff}

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} /* Chrome, Safari, Edge, Opera */
input[type=number]{-moz-appearance:textfield} /* Firefox */

#header .underline {color: #223d88;padding: 5px 15px;display: inline-block;position: relative;}
#header .underline:after {content: '';position: absolute;width: 100%;transform: scaleX(0);height: 4px;bottom: 0;left: 0;background-color: #223d88;transform-origin: bottom right;transition: transform 0.25s ease-out;}
#header .underline:hover:after {transform: scaleX(1);transform-origin: bottom left;}
#header .dropdown-item{background-color: #fff;color: #223d88;}
#header .dropdown-item:hover{background-color: #223d88;color: #fff;}

.form-control:focus{border-color:#223d88;box-shadow:none}
.title{position:relative;text-align:center;font-size:48px;color:#223d88;font-weight:700;margin-bottom:2rem}
.title span:before{position:absolute;display:block;content:"";background:#4597a4;width:250px;height:10px;left:44%;top:66%}
.sub-title{font-size:16px;color:#000;text-align:center;max-width:580px;margin:-20px auto 40px;color: #223d88;}
section{padding:3rem 0}
.box-title{font-size:20px;position:relative;border-radius:5px;padding:5px;color:#fff;background-color:#223d88}
.box-title:after{content:"";position:absolute;height:1px;width:100%;left:0}
.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#223d88}
.owl-theme .owl-dots .owl-dot span{border:1px solid #223d88;background:transparent}
.btn{border-radius:30px;padding:8px 30px}
.btn-primary{color: #fff;background-color:#223d88;border: none;outline:none;line-height:1;text-align:center;text-transform:uppercase;transition: all .5s ease;}
.btn-primary:hover{background-color:#223d88;color: #fff !important;border: 2px solid #223d88;}
.btn-light {color: #fff;background-color: transparent;border: 2px solid #fff;outline:none;line-height:1;text-align:center;text-transform:uppercase;transition: all .5s ease;}
.btn-light:hover {transform: translate(-0.2rem, -0.2ex);color: #223d88;}
#header{border-top:40px solid #223d88}
.navbar-nav{align-items:center}
.navbar-light .navbar-nav .nav-link{color:#223d88;font-size:16px;padding:0 20px}
.navbar-light .navbar-nav .active > .nav-link,.navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .nav-link.show,.navbar-light .navbar-nav .show > .nav-link{color:#223d88}
.carousel-item img{width:100%}
.carousel-caption{text-align:center;bottom:40%}
.carousel-indicators li{height:6px;width:14px;background-color: #fff;border-radius: 5px;display: inline-block;border:none;margin: 0px 5px;-webkit-transition: all 0.4s ease;transition: all 0.4s ease;}
.carousel-indicators li.active{width: 25px;background-color: #223d88;}
.card{border:3px solid #223d88}
/* .card:hover{border:2px solid #223d88;background-color: #f7efd4bd;} */
/* .card:hover{transform:scale(1.01)} */

#banners{padding:0}
#banners h4{font-size:36px;padding-bottom:1rem}
#banners p{font-size:22px}
section.banner{background:#223d88 url(/images/bg-banner.png) no-repeat center center;background-size:cover;color:#fff;font-size:40px}
#loans{background:url(../images/bg-image.png) no-repeat right top}
.loans__content p{max-width:500px;font-size:22px}
.loans__image{padding:40px; box-shadow:50px rgba(0,0,0,0.15)}
.loans__button{display:inline-flex;border:1px dashed #223d88;border-radius:30px;padding:5px;align-items:center}
.loans__button--text{padding:0 40px;color:#223d88}
#categories{padding: 5rem; background:url(../images/bg-image.png) no-repeat right top}
#categories .owl-carousel .owl-dots{display:none!important}
#categories .owl-carousel .owl-item img {margin:auto; width:40% !important;}
.categories__item{color:#000;padding:1rem;margin:10px;text-align:center;background:#fafafa;border:1px solid rgba(127,30,69,0.15);box-shadow:0 4px 12px rgba(0,0,0,0.08);border-radius:8px}
.categories__item h4{margin-bottom:1rem;color:#223d88}
.categories__item img{border-radius:5px;}
.categories__content{display:inline-flex;border:1px dashed #223d88;border-radius:30px;padding:5px;align-items:center;}
.categories__item:hover{box-shadow:0 0 30px rgba(0,0,0,0.15)}
#statistics{padding: 5rem; background:#fff8e9;color:#4597a4;text-align:center}
#statistics .sub-title{color:#4597a4}
.statistics__icon{margin-bottom:4rem;}
.statistics__title{font-size:66px;line-height:1;font-weight:700}
.statistics__text{font-weight:700}
.statistics__ayat{margin-top:4rem}
.statistics-item:nth-child(n + 2){border-right:2px solid #223d88}
#partners{padding:5rem; background: #fff8e9; color: #4597a4; text-align: center;}
.partners__wrapper{display:flex;align-items:center;justify-content:space-evenly}
.partners__logo{text-align:center}
.partners__logo:hover{opacity:0.7;}
.partners__logo img{max-height:50%;max-width:50%;margin:auto}
#partners .owl-carousel .owl-dots{display:none!important}
#footer{background:#223d88;color:#fff;padding-top:2rem}
#footer h4{font-weight:700;font-size:24px}
#footer .bottom{border-top:1px solid #fff;padding:8px 0}
#footer .copyright{text-align:left;margin:0}
.social a{display:inline-block;color:#223d88;background-color:#fff;border-radius:100%;text-align:center;width:24px;height:24px}
.social .center{line-height:0!important}
#static-page{padding:4rem 0}
#static-page .wrapper{color:#72777a;border-radius:10px;overflow:hidden; margin-bottom: 20px;border:1px solid #223d88; background-color:#fffcf8;}
#static-page .content{margin:2rem; text-align:center;font-size:20px}

/* rating */
.rating{width:300px;margin:0 auto;font-size:45px;overflow:hidden;text-align:center;}
.rating input{float:right;opacity:0;position:absolute}
.rating label{float:center;color:#aaa;text-decoration:none;-webkit-transition:color .4s;-moz-transition:color .4s;-o-transition:color .4s;transition:color .4s}
.rating label:hover ~ label,.rating input:focus ~ label,.rating input:checked~label,.rating label:hover{color:orange;cursor:pointer}

.modal .modal-dialog .modal-content .modal-header{color:#fff;background-color:#223d88}
@media screen and (max-width: 767px) {
#header{border-top-width:10px}
.navbar-light .navbar-toggler{border:none}
.navbar-nav{padding:10px 1rem}
.navbar-nav a{display:block;margin-bottom:10px}
#banners h4{font-size:40px}
.carousel-caption{position:static;color:#000;padding:1rem;text-align:center}
.btn-light {color: #000;border: 2px solid #000;}
.carousel-indicators{display: none;}
.loans__image{margin-top:3rem}
.statistics-item{margin-bottom:3rem}
.partners__wrapper{display:block;text-align:center}
.partners__logo{margin-bottom:1rem}
#footer .bottom{text-align:center}
#footer h4{margin-top:3rem}
.navbar-light .navbar-nav .nav-link{padding:0}
.sub-menu{display:block}
.sub-menu .dropdown-menu{border:none}
}