/* ====================================
GLOBAL SETTINGS
================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Inter',sans-serif;
background:#f8fafc;
color:#0f172a;
}

.container{
width:100%;
max-width:1280px;
margin:auto;
padding:0 20px;
}

.container p{
font-size:16px;
}

.container h2{
font-size:24px;
padding-bottom:10px;
}

.btn-primary{
background:#10682b;
color:#fff;
padding:12px 24px;
border-radius:10px;
text-decoration:none;
font-weight:600;
}


/* ----- */

@media(max-width:991px){

.container p{
font-size:16px;
}

.container h2{
font-size:24px;
padding-bottom:10px;
}

}


/* ====================================
HEADER
==================================== */

.site-header{
position:sticky;
top:0;
z-index:9999;
background:#ffffff;
border-bottom:1px solid #e5e7eb;
}

.header-container{
height:85px;
display:flex;
align-items:center;
justify-content:space-between;
}

.logo{
font-size:42px;
font-weight:800;
text-decoration:none;
color:#2563eb;
line-height:1;
}

.desktop-nav > ul {
display:flex;
align-items:center;
gap:35px;
list-style:none;
}

.desktop-nav a{
text-decoration:none;
font-weight:600;
color:#0f172a;
transition:.3s;
}

.desktop-nav a:hover{
color:#2563eb;
}

.apply-btn{
background:#10682b;
color:#fff;
padding:14px 24px;
border-radius:12px;
font-weight:700;
text-decoration:none;
display:inline-flex;
align-items:center;
justify-content:center;
}

.desktop-cta{
margin-left:25px;
}

.has-dropdown{
position:relative;
}

.dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 260px;
background: #fff;
border-radius: 14px;
box-shadow: 0 15px 40px rgba(0,0,0,.08);
padding: 10px 0;
display: none;
list-style: none;
margin: 0;
}

.dropdown li{
width:100%;
}

.dropdown a{
display:block;
padding:12px 20px;
}

.dropdown a:hover{
background:#f8fafc;
}

.has-dropdown:hover .dropdown{
display:block;
}

/* ====================================
MOBILE MENU
==================================== */

.mobile-toggle{
display:none;
background:none;
border:none;
font-size:42px;
cursor:pointer;
color:#10682b;
}

.mobile-menu-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:#ffffff;
z-index:99999;
padding:30px;
overflow-y:auto;
opacity:0;
visibility:hidden;
transform:translateY(-20px);
transition:.3s;
}

.mobile-menu-overlay.active{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.mobile-menu-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:50px;
}

.mobile-logo{
font-size:22px;
font-weight:800;
color:#10682b;
}

.mobile-close{
background:none;
border:none;
font-size:42px;
cursor:pointer;
color:#10682b;
}

.mobile-menu-links{
display:flex;
flex-direction:column;
gap:25px;
}

.mobile-menu-links a{
font-size:18px;
font-weight:600;
color:#0f172a;
text-decoration:none;
}

.mobile-apply-btn{
margin-top:20px;
background:#10682b;
color:#fff !important;
padding:12px;
border-radius:14px;
text-align:center;
}

/* --- RESPONSIVE --- */

@media(max-width:991px){

.desktop-nav{
display:none;
}

.desktop-cta{
display:none;
}

.mobile-toggle{
display:block;
}

.logo{
font-size:28px;
}

}


.mobile-group{
width:100%;
}


.mobile-group-toggle{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
background:none;
border:none;
padding:0;
font-size:20px;
font-weight:600;
color:#0f172a;
cursor:pointer;
}

.mobile-submenu{
display:none;
padding-left:20px;
margin-top:15px;
}

.mobile-submenu a{
font-size:17px;
display:block;
padding:10px 0;
color:#475569;
}

.mobile-group.active .mobile-submenu{
display:block;
}



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

.hero-section{
padding:100px 0;
background:linear-gradient(180deg,
#f8fafc 0%,#ffffff 100%);
}

.hero-grid{
display:grid;
grid-template-columns:1.2fr .8fr;
gap:70px;
align-items:center;
}

.hero-tag{
display:inline-block;
background:#f2fff2;
color:#10682b;
padding:10px 18px;
border-radius:999px;
font-weight:700;
margin-bottom:20px;
}

.hero-content h1{
font-size:38px;
line-height:1.1;
color:#0f172a;
margin-bottom:25px;
max-width:700px;
}

.hero-content p{
font-size:18px;
line-height:1.8;
color:#475569;
max-width:650px;
margin-bottom:30px;
}

.hero-trust{
display:flex;
flex-wrap:wrap;
gap:20px;
margin-bottom:35px;
font-weight:600;
color:#334155;
}

.hero-buttons{
display:flex;
gap:15px;
}

.hero-primary-btn{
background:#10682b;
color:#fff;
padding:18px 28px;
border-radius:12px;
text-decoration:none;
font-weight:700;
}

.hero-secondary-btn{
border:1px solid #cbd5e1;
padding:18px 28px;
border-radius:12px;
text-decoration:none;
font-weight:700;
color:#0f172a;
}

.quote-card{
background:#fff;
border-radius:24px;
padding:35px;
box-shadow:
0 20px 50px rgba(15,23,42,.08);
border:1px solid #e2e8f0;
}

.quote-header{
font-size:24px;
font-weight:700;
margin-bottom:25px;
color:#0f172a;
}

.quote-row{
display:flex;
justify-content:space-between;
padding:18px 0;
border-bottom:1px solid #e2e8f0;
}

.quote-row span{
color:#64748b;
}

.quote-row strong{
color:#0f172a;
}

.quote-btn{
display:block;
margin-top:25px;
background:#10682b;
color:#fff;
text-align:center;
padding:16px;
border-radius:12px;
font-weight:700;
text-decoration:none;
}



/* ====================================
TRUST BAR
==================================== */

.trust-bar{
background:#ffffff;
border-top:1px solid #e5e7eb;
border-bottom:1px solid #e5e7eb;
}

.trust-bar .container{
display:flex;
justify-content:center;
align-items:center;
gap:50px;
padding:18px 20px;
flex-wrap:wrap;
}

.trust-item{
display:flex;
align-items:center;
gap:10px;
font-weight:600;
color:#0f172a;
}

.trust-item span{
color:#10682b;
font-size:18px;
font-weight:700;
}



/* ====================================
FINANCING SOLUTIONS
==================================== */

.solutions-section{
padding:90px 0;
background:#f8fafc;
}

.solution-list{
max-width:700px;
margin-top: 40px;
display:flex;
flex-direction:column;
gap:18px;
}

.solution-item{
background:#fff;
border:1px solid #e2e8f0;
border-radius:18px;
padding:22px 26px;
display:flex;
justify-content:space-between;
align-items:center;
text-decoration:none;
transition:.3s;
}

.solution-item:hover{
transform:translateY(-3px);
box-shadow:0 12px 24px rgba(15,23,42,.08);
}

.solution-item h3{
font-size:22px;
margin-bottom:5px;
color:#0f172a;
}

.solution-item p{
font-size:15px;
color:#64748b;
}

.solution-item span{
font-size:28px;
color:#2563eb;
}



/* ====================================
LOAN PROGRAMS
==================================== */

.rates-section{
background:#f8fafc;
}

.rates-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:25px;
margin-top: 30px;
}

.rate-card{
background:#fff;
border: 1px solid #e2e8f0;
border-radius:20px;
padding:24px;
text-decoration:none;
transition:.3s;
text-align: center;
box-shadow:
  0 1px 3px rgba(15,23,42,.06),
  0 12px 24px rgba(15,23,42,.04);
}

.rate-card:hover{
transform:translateY(-4px);
}

.rate-label{
display:inline-block;
padding:8px 16px;
border-radius:999px;
font-size:13px;
font-weight:700;
margin-bottom:20px;
color:#0f172a;
}

.personal{
background:#dbeafe;
}

.business{
background:#dcfce7;
}

.auto{
background:#fef3c7;
}

.mortgage{
background:#ede9fe;
}

.rate-subtitle{
font-size:16px;
color:#64748b;
margin-bottom:12px;
}

.rate-value{
font-size:32px;
font-weight:700;
line-height:1;
color:#0f172a;
margin-bottom:12px;
}

.rate-details{
font-size:18px;
font-weight:600;
color:#475569;
}

.rates-disclaimer{
text-align:center;
margin-top:35px;
font-size:14px;
color:#64748b;
}


@media(max-width:991px){

.rates-grid{
grid-template-columns:1fr;
gap:15px;
margin-top: 30px;
}

.rate-card{
padding:20px;
margin-top:20px;
text-align: center;
}

.rate-value{
font-size:25px;
}

.rate-details{
font-size:14px;
}
}


/* ====================================
HOW IT WORKS PRO
==================================== */

.how-works-pro{
padding:120px 0;
background:#f8fafc;
}

.how-works-header{
text-align:center;
max-width:800px;
margin:0 auto 100px;
}

.how-works-header h2{
font-weight:800;
color:#0f172a;
}

.how-step{
display:flex;
align-items:center;
justify-content:space-between;
gap:80px;
margin-bottom:120px;
}

.how-step:last-child{
margin-bottom:0;
}

.how-step.reverse{
flex-direction:row-reverse;
}

.how-text{
flex:1;
}

.how-text h3{
font-size:28px;
line-height:1.3;
margin-bottom:20px;
color:#0f172a;
}

.how-text p{
line-height:1.7;
color:#475569;
max-width:650px;
}

.how-image{
flex:1;
display:flex;
justify-content:center;
}

.how-image img{
width:100%;
max-width:240px;
height:auto;
display:block;
margin:auto;
}


@media(max-width:991px){

.how-works-header{
margin-bottom:60px;
}

.how-step{
text-align:center;
}

.how-step,
.how-step.reverse{
flex-direction:column;
gap:30px;
margin-bottom:120px;
}

.how-text{
order:2;
text-align:left;
}

.how-image{
order:1;
margin-bottom:20px;
max-width:200px;
}

.how-text h3{
font-size:20px;
}



}


/* ====================================
TRUST SECTION
==================================== */

.trust-section{
padding:80px 0;
background:#f8fafc;
}

.trust-grid{
max-width:1100px;
margin:0 auto;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.trust-card{
background:#fff;
border:1px solid #e2e8f0;
border-radius:18px;
padding:24px;
display:flex;
gap:18px;
align-items:flex-start;
transition:.3s;
}

.trust-card:hover{
transform:translateY(-3px);
box-shadow:
0 12px 24px rgba(15,23,42,.06);
}

.trust-icon{
width:54px;
height:54px;
border-radius:14px;
background:#eff6ff;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
flex-shrink:0;
}

.trust-card h3{
font-size:20px;
margin-bottom:8px;
color:#0f172a;
}

.trust-card p{
font-size:15px;
line-height:1.7;
color:#64748b;
}


@media(max-width:991px){

.trust-section{
padding:60px 0;
}

.trust-grid{
grid-template-columns:1fr;
}

.trust-card{
padding:18px;
gap:15px;
}

.trust-icon{
width:46px;
height:46px;
font-size:20px;
}

.trust-card h3{
font-size:18px;
}

.trust-card p{
font-size:14px;
}

}


/* ====================================
STATS SECTION
==================================== */

.stats-section{
padding:80px 0;
background:#0f172a;
}

.stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

.stat-card{
text-align:center;
padding:30px;
}

.stat-card h3{
font-size:42px;
font-weight:800;
color:#ffffff;
margin-bottom:10px;
}

.stat-card p{
color:#94a3b8;
font-size:15px;
line-height:1.6;
}

@media(max-width:991px){

.stats-grid{
grid-template-columns:repeat(2,1fr);
gap:30px;
}

.stat-card{
padding:15px;
}

.stat-card h3{
font-size:32px;
}

}


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

.final-cta{
padding:90px 0;
background:#ffffff;
}

.final-cta-box{
background:linear-gradient(135deg,#2563eb, #1d4ed8);
border-radius:30px;
padding:70px 50px;
text-align:center;
color:#ffffff;
}

.final-cta-box span{
display:inline-block;
background:rgba(255,255,255,.15);
padding:10px 18px;
border-radius:999px;
font-weight:700;
margin-bottom:20px;
}

.final-cta-box h2{
font-size:48px;
margin-bottom:20px;
}

.final-cta-box p{
max-width:700px;
margin:0 auto 35px;
font-size:18px;
line-height:1.8;
opacity:.95;
}

.final-cta-buttons{
display:flex;
justify-content:center;
gap:15px;
}

.final-cta-primary{
background:#ffffff;
color:#2563eb;
padding:18px 30px;
border-radius:12px;
text-decoration:none;
font-weight:700;
}

.final-cta-secondary{
border:1px solid rgba(255,255,255,.4);
color:#ffffff;
padding:18px 30px;
border-radius:12px;
text-decoration:none;
font-weight:700;
}

@media(max-width:991px){

.final-cta{
padding:70px 0;
}

.final-cta-box{
padding:40px 25px;
}

.final-cta-box h2{
font-size:34px;
}

.final-cta-buttons{
flex-direction:column;
}

}


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

.application-page{
padding:60px 0;
}

.application-wrapper{
max-width:900px;
margin:auto;
background:#fff;
padding:40px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.application-title{
font-size:36px;
font-weight:800;
margin-bottom:10px;
}

.application-subtitle{
color:#64748b;
margin-bottom:40px;
}

.form-group{
margin-bottom:25px;
}

.form-group label{
display:block;
margin-bottom:8px;
font-weight:600;
}

.form-group input,
.form-group select{
width:100%;
height:55px;
border:1px solid #dbe3ef;
border-radius:12px;
padding:0 15px;
font-size:16px;
}

.upload-card{
border:2px dashed #dbe3ef;
padding:25px;
border-radius:16px;
margin-bottom:20px;
}

.upload-card label{
display:block;
font-weight:600;
margin-bottom:10px;
}

.upload-card input{
margin-top:10px;
}

.upload-card input[type=file]{
width:100%;
padding:12px;
border:1px solid #dbe3ef;
border-radius:10px;
background:#fff;
}

#driversLicenseUploads,
#stateIdUploads{
margin-bottom:20px;
}

.submit-btn{
width:100%;
height:60px;
border:none;
background:#2563eb;
color:#fff;
font-size:18px;
font-weight:700;
border-radius:12px;
cursor:pointer;
}

.hidden{
display:none;
}


.step{
display:none;
}

.active-step{
display:block;
}

.loan-options{
display:grid;
gap:15px;
margin:30px 0;
}

.loan-card{
border:1px solid #dbe3ef;
padding:20px;
border-radius:12px;
cursor:pointer;
font-weight:600;
}

.loan-card input{
margin-right:10px;
}

.amount-display{
font-size:40px;
font-weight:800;
margin:25px 0;
}

#loanAmount{
width:100%;
margin-bottom:30px;
}

.step-buttons{
display:flex;
justify-content:space-between;
gap:15px;
}

.back-btn{
height:60px;
padding:0 40px;
border:none;
background:#e2e8f0;
border-radius:12px;
cursor:pointer;
font-weight:700;
}

.review-box{
background:#f8fafc;
padding:25px;
border-radius:12px;
margin-bottom:25px;
}

.review-box ul{
margin-top:15px;
padding-left:20px;
}

.review-box li{
margin-bottom:10px;
}

.consent-box{
margin-bottom:25px;
}

.checkbox-row{
display:flex;
align-items:flex-start;
gap:10px;
margin-bottom:15px;
}

.checkbox-row input{
margin-top:5px;
}

.progress-wrapper{
margin-bottom:40px;
}

.progress-top{
display:flex;
justify-content:space-between;
margin-bottom:10px;
font-weight:600;
}

.progress-bar{
height:12px;
background:#e2e8f0;
border-radius:100px;
overflow:hidden;
}

.progress-fill{
height:100%;
width:12%;
background:#2563eb;
border-radius:100px;
transition:.3s;
}

.submit-btn:disabled{
opacity:.8;
cursor:not-allowed;
}


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

.site-footer{
background:#0f172a;
color:#cbd5e1;
margin-top:80px;
padding-top:70px;
}

.footer-top{
display:grid;
grid-template-columns:
2fr
1fr
1fr
1fr
1fr;
gap:40px;
padding-bottom:50px;
border-bottom:1px solid rgba(255,255,255,.1);
}

.footer-brand h3{
color:#fff;
font-size:28px;
margin-bottom:20px;
}

.footer-column h4{
color:#fff;
margin-bottom:20px;
font-size:18px;
}

.footer-column ul{
list-style:none;
padding:0;
margin:0;
}

.footer-column li{
margin-bottom:12px;
}

.footer-column a{
color:#cbd5e1;
text-decoration:none;
transition:.3s;
}

.footer-column a:hover{
color:#fff;
}

.footer-middle{
display:flex;
justify-content:space-between;
gap:40px;
padding:40px 0;
border-bottom:1px solid rgba(255,255,255,.1);
}

.footer-middle h4{
color:#fff;
margin-bottom:15px;
}

.footer-disclaimer{
padding:40px 0;
font-size:14px;
line-height:1.8;
color:#94a3b8;
border-bottom:1px solid rgba(255,255,255,.1);
}

.footer-bottom{
padding:25px 0;
text-align:center;
}

@media(max-width:991px){

.footer-top{
grid-template-columns:1fr;
}

.footer-middle{
flex-direction:column;
}

}










/* ====================================
MOBILE VERSION STYLING
==================================== */

@media(max-width:991px){
.hero-section{
padding:50px 0;
}

.hero-grid{
grid-template-columns:1fr;
gap:40px;
}

.hero-content h1{
font-size:34px;
line-height:1.2;
}

.hero-buttons{
flex-direction:column;
}

.hero-trust{
flex-direction:column;
gap:10px;
}


.trust-bar .container{
gap:18px;
justify-content:flex-start;
}

.trust-item{
font-size:14px;
}


.solution-item{
background-hover: red;
padding:15px;
}

.solution-item h3{
font-size:16px;
}

.solution-item p{
font-size:14px;
}







}









/* --- */