/*====================================================
ROOT VARIABLES
====================================================*/

:root{

--primary:#0B1F46;
--secondary:#D61C2A;
--accent:#C9A227;

--light:#F8F9FC;
--white:#ffffff;

--text:#4B5563;
--heading:#091C38;

--radius:18px;

--transition:.35s ease;

--shadow:
0 15px 40px rgba(0,0,0,.08);

}


/*====================================================
GENERAL
====================================================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;

background:var(--light);

color:var(--text);

overflow-x:hidden;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

transition:var(--transition);

}

section{

padding:90px 0;

}

h1,h2,h3,h4,h5{

font-family:'Playfair Display',serif;

color:var(--heading);

font-weight:700;

}


/*====================================================
NAVBAR
====================================================*/

.custom-navbar{

padding:18px 0;

transition:.4s;

background:transparent;

}

.custom-navbar.scrolled{

background:#081A38;

padding:10px 0;

box-shadow:0 10px 30px rgba(0,0,0,.15);

}

.navbar-brand img{

height:62px;

}

.nav-link{

color:#fff !important;

font-weight:500;

margin-left:18px;

position:relative;

}

.nav-link:after{

content:"";

position:absolute;

bottom:-6px;

left:0;

width:0;

height:2px;

background:var(--secondary);

transition:.3s;

}

.nav-link:hover:after{

width:100%;

}


/*====================================================
BUTTONS
====================================================*/

.btn-danger{

background:var(--secondary);

border:none;

padding:15px 34px;

border-radius:40px;

font-weight:600;

transition:.3s;

}

.btn-danger:hover{

background:#b81623;

transform:translateY(-3px);

}

.btn-outline-light{

border-radius:40px;

padding:15px 34px;

}


/*====================================================
HERO
====================================================*/

.hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

background:url("../img/hero.jpg") center center/cover;

}

.hero-overlay{

position:absolute;

inset:0;

background:
linear-gradient(90deg,
rgba(7,22,49,.90) 0%,
rgba(7,22,49,.70) 50%,
rgba(7,22,49,.35) 100%);

}

.hero .container{

position:relative;

z-index:2;

}

.hero-title{

font-size:64px;

line-height:1.1;

margin-bottom:25px;

color:#fff;

}

.hero p{

font-size:20px;

max-width:560px;

}

.hero img{

border-radius:25px;

box-shadow:0 25px 70px rgba(0,0,0,.25);

}


/*====================================================
SERVICE CARDS
====================================================*/

.service-card{

background:#fff;

padding:45px;

border-radius:20px;

box-shadow:var(--shadow);

transition:.35s;

height:100%;

}

.service-card:hover{

transform:translateY(-12px);

}

.service-icon{

width:80px;

height:80px;

border-radius:18px;

background:#EEF3FB;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

color:var(--secondary);

margin-bottom:25px;

}

.service-card h3{

margin-bottom:18px;

}

.service-link{

font-weight:600;

color:var(--secondary);

}

.service-link:hover{

letter-spacing:.5px;

}


/*====================================================
ABOUT
====================================================*/

.about-image img{

border-radius:25px;

box-shadow:var(--shadow);

}

.about-list{

list-style:none;

padding-left:0;

}

.about-list li{

margin-bottom:18px;

font-size:18px;

}


/*====================================================
STATISTICS
====================================================*/

.stats-section{

background:var(--primary);

color:#fff;

}

.stats-section h2{

font-size:56px;

color:#fff;

margin-bottom:10px;

}

.stats-section p{

color:rgba(255,255,255,.85);

}


/*====================================================
CTA
====================================================*/

.cta-section{

background:
linear-gradient(135deg,
#091C38,
#0B2E69);

}

.cta-section h2{

color:#fff;

}

.cta-section p{

color:rgba(255,255,255,.85);

}


/*====================================================
FOOTER
====================================================*/

.footer{

background:#081A38;

color:#d4d8df;

padding:80px 0 30px;

}

.footer h5{

color:#fff;

margin-bottom:20px;

}

.footer-links{

padding:0;

list-style:none;

}

.footer-links li{

margin-bottom:12px;

}

.footer-links a{

color:#cdd4de;

}

.footer-links a:hover{

color:#fff;

padding-left:6px;

}

.footer hr{

margin:45px 0;

border-color:rgba(255,255,255,.1);

}


/*====================================================
SECTION TITLES
====================================================*/

.text-danger{

color:var(--secondary)!important;

}

.display-5{

margin-bottom:20px;

}


/*====================================================
ANIMATION
====================================================*/

.service-card,
.btn,
img{

transition:all .35s ease;

}

img:hover{

transform:scale(1.02);

}


/*====================================================
SCROLLBAR
====================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:var(--secondary);

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#ececec;

}/* CSS Document */
/*====================================================
ABOUT PAGE HERO
====================================================*/

.page-hero{

position:relative;

padding:180px 0 120px;

background:url("../img/about/about-banner.jpg") center center/cover no-repeat;

}

.page-overlay{

position:absolute;

inset:0;

background:linear-gradient(
90deg,
rgba(8,26,56,.88),
rgba(8,26,56,.65)
);

}

.page-hero .container{

position:relative;

z-index:2;

}

.page-hero h1{

color:#fff;

}

.page-hero p{

font-size:22px;

max-width:750px;

margin:auto;

}

.breadcrumb{

background:none;

margin-bottom:25px;

}

.breadcrumb a{

color:#ffffff;

text-decoration:none;

}

.breadcrumb-item.active{

color:rgba(255,255,255,.75);

}

/*====================================================
MISSION / VISION
====================================================*/

.mission-section img,
.vision-section img{

border-radius:24px;

box-shadow:0 25px 60px rgba(0,0,0,.12);

transition:.4s;

}

.mission-section img:hover,
.vision-section img:hover{

transform:scale(1.02);

}


/*====================================================
VALUE CARDS
====================================================*/

.value-card{

background:#fff;

padding:45px 30px;

border-radius:20px;

text-align:center;

height:100%;

transition:.35s;

box-shadow:0 20px 40px rgba(0,0,0,.06);

}

.value-card:hover{

transform:translateY(-10px);

box-shadow:0 30px 60px rgba(0,0,0,.12);

}

.value-icon{

width:90px;

height:90px;

margin:auto;

border-radius:22px;

background:#eef4ff;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

color:var(--secondary);

margin-bottom:25px;

}

.value-card h4{

margin-bottom:18px;

font-size:26px;

}

.value-card p{

color:#6b7280;

line-height:1.8;

}

/*====================================================
FEATURES
====================================================*/

.feature-item{

background:#fff;

padding:25px;

margin-bottom:25px;

border-radius:18px;

box-shadow:0 15px 35px rgba(0,0,0,.06);

transition:.35s;

}

.feature-item:hover{

transform:translateY(-8px);

}

.feature-item i{

font-size:34px;

color:var(--secondary);

margin-bottom:18px;

}

/*====================================================
TIMELINE
====================================================*/

.timeline{

position:relative;

padding-left:40px;

border-left:4px solid var(--secondary);

}

.timeline-item{

position:relative;

margin-bottom:45px;

}

.timeline-year{

position:absolute;

left:-88px;

top:0;

width:70px;

height:70px;

border-radius:50%;

background:var(--secondary);

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-weight:700;

}

.timeline-content{

background:#fff;

padding:30px;

border-radius:18px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

/*====================================================
TEAM
====================================================*/

.team-card{

background:#fff;

padding:35px;

text-align:center;

border-radius:22px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.35s;

}

.team-card:hover{

transform:translateY(-10px);

}

.team-card img{

width:160px;

height:160px;

object-fit:cover;

border-radius:50%;

margin:auto auto 25px;

border:6px solid #eef3fb;

}

.team-card span{

display:block;

margin-bottom:18px;

color:var(--secondary);

font-weight:600;

}

.stats-box{

padding:25px;

}

/*====================================================
TESTIMONIALS
====================================================*/

.testimonial-card{

background:#fff;

padding:40px;

border-radius:22px;

text-align:center;

box-shadow:0 15px 35px rgba(0,0,0,.08);

height:100%;

transition:.35s;

}

.testimonial-card:hover{

transform:translateY(-8px);

}

.stars{

font-size:22px;

color:#FFC107;

margin-bottom:20px;

}

.testimonial-card p{

font-style:italic;

line-height:1.8;

margin-bottom:25px;

}

.testimonial-card h5{

margin-bottom:6px;

}


/*====================================================
TRUST BOXES
====================================================*/

.trust-box{

background:#fff;

padding:40px 20px;

text-align:center;

border-radius:20px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.35s;

height:100%;

}

.trust-box:hover{

transform:translateY(-8px);

}

.trust-box i{

font-size:42px;

color:var(--secondary);

margin-bottom:25px;

}
/*====================================================
SERVICES HERO
====================================================*/

.services-hero{

background:url("../img/services/services-banner.jpg")
center center/cover no-repeat;

}

.services-hero .lead{

max-width:850px;

margin:auto;

}

/*====================================================
SERVICES INTRO
====================================================*/

.services-intro img{

border-radius:24px;

box-shadow:0 20px 50px rgba(0,0,0,.12);

}

/*====================================================
SERVICE DETAILS
====================================================*/

.service-features{

margin-top:30px;

}

.service-features div{

padding:12px 0;

font-size:17px;

}

.service-features i{

color:var(--secondary);

margin-right:10px;

}

.service-features div:not(:last-child){

border-bottom:1px solid #ececec;

}


/*====================================================
PROCESS
====================================================*/

.process-card{

background:#fff;

padding:40px 30px;

text-align:center;

border-radius:22px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

position:relative;

transition:.35s;

height:100%;

}

.process-card:hover{

transform:translateY(-10px);

}

.process-number{

position:absolute;

top:-18px;

right:20px;

width:42px;

height:42px;

background:var(--secondary);

color:#fff;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-weight:700;

}

.process-card i{

font-size:44px;

color:var(--secondary);

margin:25px 0;

}

/*====================================================
ADVANTAGES
====================================================*/

.advantage-card{

background:#fff;

padding:40px;

border-radius:22px;

text-align:center;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.35s;

height:100%;

}

.advantage-card:hover{

transform:translateY(-8px);

}

.advantage-card i{

font-size:42px;

color:var(--secondary);

margin-bottom:20px;

}

/*====================================================
CONTACT PAGE
====================================================*/

.contact-hero{

background:url("../img/contact/contact-banner.jpg")
center center/cover no-repeat;

}

.contact-card{

background:#fff;

padding:40px 25px;

text-align:center;

border-radius:20px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.35s;

height:100%;

}

.contact-card:hover{

transform:translateY(-10px);

}

.contact-card i{

font-size:42px;

color:var(--secondary);

margin-bottom:20px;

}

.contact-form-box{

background:#fff;

padding:45px;

border-radius:25px;

box-shadow:0 20px 40px rgba(0,0,0,.08);

}

.contact-sidebar{

background:var(--primary);

color:#fff;

padding:45px;

border-radius:25px;

height:100%;

}

.contact-sidebar h3,
.contact-sidebar h5{

color:#fff;

}

.sidebar-item{

margin:18px 0;

font-size:17px;

}

.sidebar-item i{

color:var(--accent);

margin-right:12px;

}

.form-control{

padding:14px;

border-radius:12px;

}

.form-control:focus{

box-shadow:none;

border-color:var(--secondary);

}

/*====================================================
FAQ HERO
====================================================*/

.faq-hero{

background:url("../img/faq/faq-banner.jpg")
center center/cover no-repeat;

}

.faq-search{

position:relative;

}

.faq-search input{

height:65px;

padding-left:60px;

border-radius:50px;

font-size:18px;

}

.faq-search i{

position:absolute;

left:22px;

top:23px;

font-size:20px;

color:#777;

}

.faq-category{

background:#fff;

padding:35px;

border-radius:20px;

text-align:center;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.35s;

cursor:pointer;

}

.faq-category:hover{

transform:translateY(-8px);

}

.faq-category i{

font-size:42px;

color:var(--secondary);

margin-bottom:20px;

}
/*====================================================
FAQ ACCORDION
====================================================*/

.faq-item{

margin-bottom:18px;

border:none;

border-radius:18px !important;

overflow:hidden;

box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.accordion-button{

font-weight:600;

padding:22px;

}

.accordion-button:not(.collapsed){

background:#f8f9fa;

color:var(--secondary);

}

.accordion-body{

line-height:1.8;

padding:25px;

}

/*====================================================
FAQ SIDEBAR
====================================================*/

.faq-sidebar{

background:#fff;

padding:40px;

border-radius:20px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

position:sticky;

top:120px;

}

.sidebar-contact{

margin:20px 0;

font-size:17px;

}

.sidebar-contact i{

width:28px;

color:var(--secondary);

}

/*====================================================
LOAN APPLICATION
====================================================*/

.loan-hero{

background:url("../img/loan/loan-banner.jpg")
center center/cover no-repeat;

}

.loan-progress{

margin-bottom:50px;

}

.progress{

height:10px;

border-radius:30px;

}

.progress-steps{

display:flex;

justify-content:space-between;

margin-top:20px;

}

.step{

text-align:center;

font-weight:600;

color:#999;

}

.step.active{

color:var(--secondary);

}

.step span{

display:block;

font-size:14px;

margin-top:8px;

}

.loan-step{

background:#fff;

padding:45px;

border-radius:24px;

box-shadow:0 20px 40px rgba(0,0,0,.08);

}

.loan-step label{

font-weight:600;

margin-bottom:8px;

}

.loan-step{
    display:none;
}

.loan-step.active-step{
    display:block;
    animation:fadeStep .35s ease;
}

@keyframes fadeStep{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/*====================================================
LOAN SUMMARY
====================================================*/

.loan-summary{

background:#fff;

padding:35px;

border-radius:22px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

position:sticky;

top:120px;

}

.summary-row{

display:flex;

justify-content:space-between;

padding:14px 0;

border-bottom:1px solid #ececec;

}

.summary-row:last-child{

border-bottom:none;

}

.loan-summary h4{

margin-bottom:20px;

}

/*====================================================
STEP 4 - ADDRESS & IDENTITY
====================================================*/

.form-check{

padding:20px;

background:#f8f9fa;

border-radius:15px;

}

.form-check-label{

line-height:1.7;

font-size:15px;

}

.form-check-input{

margin-top:6px;

}

/*====================================================
MULTI STEP
====================================================*/

.progress{

height:12px;

border-radius:30px;

overflow:hidden;

}

.progress-bar{

transition:width .45s ease;

}

.progress-steps{

display:flex;

justify-content:space-between;

margin-top:25px;

}

.progress-steps .step{

width:50px;

height:50px;

border-radius:50%;

background:#ececec;

display:flex;

align-items:center;

justify-content:center;

font-weight:700;

position:relative;

transition:.3s;

}

.progress-steps .step span{

position:absolute;

top:60px;

left:50%;

transform:translateX(-50%);

font-size:14px;

white-space:nowrap;

font-weight:600;

}

.progress-steps .step.active{

background:var(--secondary);

color:#fff;

}

/*====================================================
REVIEW STEP
====================================================*/

.review-card{

background:#fff;

padding:40px;

border-radius:20px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.review-card th{

width:260px;

font-weight:600;

color:#555;

}

.review-card td{

font-weight:500;

}
/*====================================================
SUCCESS PAGE
====================================================*/

.success-card{

background:#fff;

padding:50px;

border-radius:25px;

box-shadow:0 20px 40px rgba(0,0,0,.08);

text-align:center;

}

.reference-box{

background:#f8f9fa;

padding:25px;

margin-top:30px;

border-radius:15px;

}

.reference-box h3{

color:var(--secondary);

margin-top:10px;

letter-spacing:2px;

}

.contact-box{

background:#fff;

padding:45px;

border-radius:25px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

}