/* * ════════════════════════════════════════════════════════════ * applypage.css — Right Rupee Apply Page * Organised: base CSS first → ALL media queries at bottom * ════════════════════════════════════════════════════════════ * * TABLE OF CONTENTS * ───────────────── * 1. Variables & Reset * 2. Container * 3. Apply / Hero Section * 4. Form Card & Step Progress * 5. Form Fields & Buttons * 6. Review Step & Success Panel * 7. Cookie Banner * 8. Rates & Charges * 9. Representative Example * 10. Loan Steps * 11. Why Choose Us * 12. APR & Rates Info * 13. Eligibility * 14. Coverage / Cities * 15. MEDIA QUERIES (all consolidated) * ≤ 1024px | ≤ 991px | ≤ 768px | ≤ 767px | ≤ 480px * ════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════ 1. VARIABLES & RESET ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Quicksand:wght@300..700&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

 :root {
     --brand: #4FA5DC;
     --brand-d: #6162DB;
     --brand-lt: #EBF5FD;
     --navy: #1A1C3A;
     --navy2: #141628;
     --blue: #4FA5DC;
     --slate: #2C2E50;
     --muted: #6E7190;
     --border: #DDE0F5;
     --surface: #F4F6FE;
     --white: #FFFFFF;
     --success: #10B981;
     --error: #EF4444;
     --fh: 'Quicksand', system-ui, sans-serif;
     --fb: 'Quicksand', system-ui, sans-serif;
     --sh: 0 2px 12px rgba(15,23,42,.07);
     --shm: 0 8px 32px rgba(15,23,42,.10);
     --shl: 0 20px 60px rgba(15,23,42,.14);
     --r: 12px;
     --rl: 20px;
     --rx: 28px;
     --tr: all .22s cubic-bezier(.4,0,.2,1);
}
 *,*::before,*::after {
     box-sizing:border-box;
     margin:0;
     padding:0;
}
 body {
     font-family:var(--fb);
     color:var(--slate);
     background:#fff;
     font-size:16px;
     -webkit-font-smoothing:antialiased;
     overflow-x:hidden;
}
 img {
     max-width:100%;
     display:block;
}
 a {
     text-decoration:none;
     color:inherit;
}
 button {
     cursor:pointer;
     font-family:var(--fb);
     border:none;
     background:none;
}
 input,select,textarea {
     font-family:var(--fb);
}
/* ════════════════════════════════════════════════════════════ 2. CONTAINER ════════════════════════════════════════════════════════════ */
 .container {
     max-width: 1300px;
     width: 100%;
     margin: auto;
     position: relative;
     z-index: 2;
}
 .ap-wrap {
     max-width: 1300px;
     margin: 0 auto;
     padding: 0;
}
/* ════════════════════════════════════════════════════════════ 3. APPLY / HERO SECTION ════════════════════════════════════════════════════════════ */
 .ap-section {
     background: linear-gradient(145deg, #f4f6fe 0%, #f8fafc 45%, #f4f6fe 100%);
     padding: 30px 0 40px;
     min-height: calc(100vh - 80px);
     display: flex;
     align-items: center;
}
 .ap-grid {
     display: grid;
     grid-template-columns: 1fr 1.15fr;
     gap: 52px;
     align-items: center;
}
/* eyebrow badge */
 .ap-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: #fff;
     border: 1.5px solid rgba(79,165,220,.35);
     border-radius: 50px;
     padding: 7px 16px;
     font-size: 16px;
     font-weight: 600;
     color: #4FA5DC;
     margin-bottom: 10px;
     box-shadow: var(--sh);
}
 .ap-eyebrow-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: linear-gradient(135deg,#4FA5DC,#6162DB);
     display: inline-block;
     animation: apPulse 2s ease-in-out infinite;
}
 @keyframes apPulse {
     0%,100% {
         transform:scale(1);
         opacity:1;
    }
     50% {
         transform:scale(1.4);
         opacity:.7;
    }
}
/* left column */
 .ap-left h1 {
     font-family: var(--fh);
     font-size: clamp(28px,3.2vw,40px);
     font-weight: 800;
     color: var(--navy);
     line-height: 1.15;
     margin-bottom: 5px;
     letter-spacing: -.4px;
}
 .ap-left h1 .hl {
     color: #4FA5DC;
}
 .ap-left .ap-sub {
     font-size: 16px;
     color: var(--muted);
     line-height: 1.7;
     margin-bottom: 10px;
     max-width: 440px;
}
/* hero image */
 .ap-img-wrap {
     border-radius: var(--rl);
     overflow: hidden;
     position: relative;
}
 .ap-img-wrap img {
     width: 100%;
     max-height: 330px;
     object-fit: fill;
}
/* trust strip */
 .ap-trust {
     display: flex;
     align-items: stretch;
     gap: 12px;
     background: #fff;
     border: 1px solid var(--border);
     border-radius: var(--rl);
     padding: 20px;
     box-shadow: var(--sh);
}
 .ap-trust-item {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     gap: 8px;
     padding: 4px 8px;
     border-right: 1px solid var(--border);
}
 .ap-trust-item:last-child {
     border-right: none;
}
 .ap-trust-icon {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     background: #EBF5FD;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .ap-trust-icon svg {
     width: 22px;
     height: 22px;
     stroke: #4FA5DC;
     fill: none;
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;
}
 .ap-trust-label {
     font-size: 16px;
     font-weight: 600;
     color: var(--navy);
     line-height: 1.3;
}
/* ════════════════════════════════════════════════════════════ 4. FORM CARD & STEP PROGRESS ════════════════════════════════════════════════════════════ */
 .form-card {
     background: #fff;
     border-radius: var(--rx);
     box-shadow: var(--shl);
     border: 1px solid var(--border);
     overflow: hidden;
}
 .form-card-head {
     background: linear-gradient(135deg, #0D0F22 0%, #1a1c3a 100%);
     padding: 15px 32px;
     position: relative;
     overflow: hidden;
}
 .form-card-head::after {
     content: '';
     position: absolute;
     top: -40px;
     right: -40px;
     width: 160px;
     height: 160px;
     border-radius: 50%;
     background: rgba(79,165,220,.10);
     pointer-events: none;
}
 .form-card-head h3 {
     font-family: var(--fh);
     font-size: 18px;
     font-weight: 700;
     color: #fff;
/*     margin-bottom: 5px;*/
     position: relative;
     z-index: 1;
     line-height: 30px;
}
 .form-card-head p {
     font-size: 14px;
     color: rgba(255,255,255,.62);
     position: relative;
     z-index: 1;
     margin-bottom: 0;
}
/* step progress bar */
 .step-progress {
     display: flex;
     align-items: flex-start;
     padding: 14px 28px 10px;
     position: relative;
     background: var(--surface);
     border-bottom: 1px solid var(--border);
     gap: 0;
}
 .step-progress::before {
     content: '';
     position: absolute;
     top: 30px;
     left: calc(28px + 22px);
     right: calc(28px + 22px);
     height: 2px;
     background: var(--border);
     z-index: 0;
}
 .sp-item {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 6px;
     position: relative;
     z-index: 1;
}
 .sp-circle {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background: #fff;
     border: 2.5px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: var(--fh);
     font-size: 12px;
     font-weight: 700;
     color: var(--muted);
     transition: var(--tr);
}
 .sp-label {
     font-size: 15px;
     font-weight: 500;
     color: var(--muted);
     white-space: nowrap;
     text-align: center;
}
 .sp-item.active .sp-circle {
     background: linear-gradient(135deg,#4FA5DC,#6162DB);
     border-color: #4FA5DC;
     color: #fff;
     box-shadow: 0 0 0 5px rgba(79,165,220,.18);
}
 .sp-item.active .sp-label {
     color: #4FA5DC;
     font-weight: 600;
}
 .sp-item.done .sp-circle {
     background: var(--success);
     border-color: var(--success);
     color: #fff;
}
 .sp-item.done .sp-label {
     color: var(--success);
}
/* step panels */
 .steps-wrap {
     padding: 10px 32px 15px;
}
 .step-panel {
     display: none;
     animation: apFade .28s ease;
}
 .step-panel.active {
     display: block;
}
 @keyframes apFade {
     from {
         opacity:0;
         transform:translateY(10px);
    }
     to {
         opacity:1;
         transform:translateY(0);
    }
}
 .step-heading {
     font-family: var(--fh);
     font-size: 16px;
     font-weight: 700;
     color: var(--navy);
     margin-bottom: 10px;
}
 .step-sub {
     font-size: 16px;
     color: var(--muted);
     margin-bottom: 10px;
}
/* ════════════════════════════════════════════════════════════ 5. FORM FIELDS & BUTTONS ════════════════════════════════════════════════════════════ */
.fg {
    margin-bottom: 0px;
    margin-top: 5px;
}

 .fg label {
     display: block;
     font-size: 14px;
     font-weight: 600;
     color: var(--slate);
     margin-bottom: 7px;
     letter-spacing: .1px;
}
 .fg-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 14px;
}
 .fg-grid2 {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 14px;
}
 .fg.full {
     grid-column: 1 / -1;
}
 .input-wrap {
     position: relative;
}
 .input-wrap input, .input-wrap select {
     width: 100%;
     height: 48px;
     padding: 0 14px;
     border: 1.5px solid var(--border);
     border-radius: var(--r);
     font-family: var(--fb);
     font-size: 15px;
     color: var(--navy);
     background: var(--surface);
     outline: none;
     transition: var(--tr);
     appearance: none;
     -webkit-appearance: none;
}
 .input-wrap input::placeholder {
     color: #94A3B8;
}
 .input-wrap input:focus, .input-wrap select:focus {
     border-color: #4FA5DC;
     background: #fff;
     box-shadow: 0 0 0 3px rgba(79,165,220,.12);
}
 .input-wrap .ic {
     position: absolute;
     left: 14px;
     top: 50%;
     transform: translateY(-50%);
     color: var(--muted);
     font-size: 16px;
     pointer-events: none;
}
 .input-wrap input.has-icon {
     padding-left: 42px;
}
 .input-wrap::after {
     content: '';
     position: absolute;
     right: 12px;
     top: 50%;
     transform: translateY(-50%);
     width: 0;
     height: 0;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     border-top: 6px solid var(--muted);
     pointer-events: none;
}
 .input-wrap:not(:has(select))::after {
     display: none;
}
 .error-msg {
     font-size: 16px;
     color: var(--error);
     margin-top: 5px;
     display: none;
     font-weight: 500;
}
 .error-msg.show {
     display: block;
}


 .consent-block {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--r);
     padding: 14px 16px;
     margin-top: 10px;
}
 .consent-block label {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     cursor: pointer;
     margin-bottom: 0;
}
 .consent-block input[type="checkbox"] {
     width: 18px;
     height: 18px;
     flex-shrink: 0;
     margin-top: 3px;
     accent-color: #4FA5DC;
     cursor: pointer;
}
 .consent-block span {
     font-size: 14px;
     color: var(--muted);
     line-height: 1.6;
     font-weight: 400;
}
 .consent-block a {
     color: #4FA5DC;
     font-weight: 600;
}
 .btn-next {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     width: 100%;
     padding: 14px 20px;
     background: linear-gradient(135deg,#4FA5DC,#6162DB);
     color: #fff;
     border: none;
     border-radius: var(--r);
     font-family: var(--fh);
     font-size: 16px;
     font-weight: 700;
     cursor: pointer;
     margin-top: 18px;
     transition: var(--tr);
     box-shadow: 0 6px 22px rgba(97,98,219,.30);
     letter-spacing: .2px;
}
 .btn-next:hover {
     background: var(--brand-d);
     transform: translateY(-1px);
     box-shadow: 0 10px 30px rgba(97,98,219,.38);
}
 .btn-next:disabled {
     opacity: .55;
     cursor: not-allowed;
     transform: none;
}
 .btn-back {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     width: 100%;
     padding: 12px 20px;
     background: transparent;
     color: var(--muted);
     border: 1.5px solid var(--border);
     border-radius: var(--r);
     font-family: var(--fb);
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     margin-top: 10px;
     transition: var(--tr);
}
 .btn-back:hover {
     border-color: var(--slate);
     color: var(--navy);
}
/* ════════════════════════════════════════════════════════════ 6. REVIEW STEP & SUCCESS PANEL ════════════════════════════════════════════════════════════ */
 #step4 .fg-grid .fg {
     margin-bottom: 0;
}
 #step4 .fg label {
     font-size: 16px;
     color: var(--muted);
     margin-bottom: 4px;
     text-transform: uppercase;
     letter-spacing: .5px;
     font-weight: 600;
}
 #step4 .fg .input-wrap {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--r);
     padding: 11px 14px;
     font-size: 16px;
     font-weight: 600;
     color: var(--navy);
     min-height: 46px;
     display: flex;
     align-items: center;
}
 #step4 .fg .input-wrap::after {
     display: none;
}
 #step4 .fg .input-wrap span {
     color: var(--navy);
     font-weight: 600;
}
 .success-panel {
     display: none;
     text-align: center;
     padding: 48px 32px;
     animation: apFade .4s ease;
}
 .success-panel.show {
     display: block;
}
 .success-icon {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background: linear-gradient(135deg,#10B981,#059669);
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     font-size: 36px;
     color: #fff;
     box-shadow: 0 8px 28px rgba(16,185,129,.30);
     animation: apPop .4s cubic-bezier(.4,0,.2,1);
}
 @keyframes apPop {
     0% {
         transform:scale(.4);
         opacity:0;
    }
     80% {
         transform:scale(1.08);
    }
     100% {
         transform:scale(1);
         opacity:1;
    }
}
 .success-panel h3 {
     font-family: var(--fh);
     font-size: 24px;
     font-weight: 800;
     color: var(--navy);
     margin-bottom: 10px;
}
 .success-panel p {
     font-size: 16px;
     color: var(--muted);
     line-height: 1.75;
     max-width: 400px;
     margin: 0 auto 28px;
}
 .success-ref {
     display: inline-block;
     background: #EBF5FD;
     border: 1px solid rgba(97,98,219,.25);
     border-radius: var(--r);
     padding: 14px 28px;
     font-family: var(--fh);
     font-size: 20px;
     font-weight: 800;
     color: #4FA5DC;
     letter-spacing: 2px;
}
/* ════════════════════════════════════════════════════════════ 7. COOKIE BANNER ════════════════════════════════════════════════════════════ */
 .cookies-inner {
     border-radius: 20px;
     background-color: #ebf5fd;
     padding: 20px 32px;
}
 .cookies-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 16px;
     flex-wrap: wrap;
}
 .cookie-banner {
     position: fixed;
     bottom: 0;
     width: 100%;
     text-align: center;
     padding: 10px;
     z-index: 1000;
     display: none;
     left: 0;
}
 .cookie-banner p {
     margin: 0;
     padding: 0 20px;
     display: inline-block;
     font-size: 16px;
     color: #000;
}
 .cookie-banner button {
     margin-left: 20px;
     padding: 10px 24px;
     background-color: #4FA5DC;
     color: #000;
     border: none;
     cursor: pointer;
     font-weight: 600;
     font-size: 16px;
     border-radius: 50px;
}
 .cookie-banner button:hover {
     background: #000;
     color: #fff;
}
/* ════════════════════════════════════════════════════════════ 8. RATES & CHARGES SECTION ════════════════════════════════════════════════════════════ */
 .rates-section {
     position: relative;
     padding: 40px 20px;
     background: #f4f6fe;
     overflow: hidden;
/*     font-family: Arial,sans-serif;*/
}
 .rates-section::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: radial-gradient(rgba(79,165,220,0.10) 1px,transparent 1px);
     background-size: 18px 18px;
     opacity: .7;
}
 .rates-container {
     max-width: 1300px;
     margin: auto;
     position: relative;
     z-index: 2;
}
 .rates-title {
     text-align: center;
     font-size: 36px;
     line-height: 1.2;
     font-weight: 800;
     color: #000;
     margin-bottom: 45px;
}
 .rates-title span {
     color: #4FA5DC;
}
 .title-line {
     width: 80px;
     height: 4px;
     background: #4FA5DC;
     margin: 18px auto 0;
     border-radius: 20px;
}
 .rates-grid {
     display: grid;
     grid-template-columns: repeat(2,1fr);
     gap: 26px;
}
 .rate-card {
     position: relative;
     background: #fff;
     border-radius: 100px;
     padding: 26px 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     overflow: hidden;
     border-bottom: 4px solid rgba(79,165,220,0.20);
     box-shadow: 0 12px 30px rgba(0,0,0,0.04),0 4px 10px rgba(79,165,220,0.06);
     transition: .4s ease;
}
 .rate-card::after {
     content: '';
     position: absolute;
     width: 90px;
     height: 90px;
     background: #e8f0fc;
     border-radius: 50%;
     top: -45px;
     right: -45px;
}
 .rate-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 20px 45px rgba(0,0,0,0.08),0 10px 20px rgba(79,165,220,0.12);
}
 .rate-left {
     display: flex;
     align-items: center;
     gap: 18px;
     flex: 1;
}
 .rate-icon {
     width: 54px;
     height: 54px;
     min-width: 54px;
     border-radius: 50%;
     background: #e8f0fc;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     font-weight: 700;
     color: #000;
     box-shadow: 0 8px 18px rgba(79,165,220,0.12);
}
 .rate-content h3 {
     font-size: 20px;
     line-height: 1.4;
     color: #555;
     font-weight: 600;
}
 .rate-value {
     font-size: 18px;
     line-height: 1.5;
     font-weight: 600;
     color: #4FA5DC;
     text-align: right;
     white-space: nowrap;
}
 .green {
     color: #12a150;
}
/* ════════════════════════════════════════════════════════════ 9. REPRESENTATIVE EXAMPLE SECTION ════════════════════════════════════════════════════════════ */
 .rep-example-section {
     position: relative;
     padding: 40px 20px;
     background: linear-gradient(135deg,#f4f6fe 0%,#f4f7fb 100%);
     overflow: hidden;
/*     font-family: Arial,sans-serif;*/
}


.rr-rates-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, rgb(255 255 255 / 4%) 0px, rgb(255 255 255 / 4%) 2px, #ffffff3d 2px, #ffffff00 22px);
}

 .rep-example-section::before {
     content: '';
     position: absolute;
     width: 500px;
     height: 500px;
     border-radius: 50%;
     background: radial-gradient(circle,rgba(79,165,220,0.08),transparent 70%);
     top: -180px;
     left: -180px;
}
.rep-example-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgb(79 165 220 / 39%) 1px, #00000008 1px);
    background-size: 18px 18px;
    opacity: .7;
}
 .rep-container {
     max-width: 1300px;
     margin: auto;
     position: relative;
     z-index: 2;
}
 .rep-title {
     text-align: center;
     font-size: 36px;
     line-height: 1.2;
     font-weight: 900;
     color: #101828;
     margin-bottom: 45px;
     letter-spacing: -1px;
}
 .rep-title span {
     color: #4FA5DC;
     position: relative;
}
 .rep-title span::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: -8px;
     width: 100%;
     height: 5px;
     background: #4FA5DC;
     border-radius: 20px;
     opacity: .25;
}
 .rep-grid {
     display: grid;
     grid-template-columns: repeat(3,1fr);
     gap: 24px;
}
 .rep-box {
     position: relative;
     background: rgba(255,255,255,0.88);
     backdrop-filter: blur(14px);
     border-radius: 28px;
     padding: 20px;
     display: flex;
     align-items: flex-start;
     gap: 15px;
     overflow: hidden;
     border: 1px solid rgba(255,255,255,0.7);
     box-shadow: 0 10px 35px rgba(0,0,0,0.05),0 2px 8px rgba(79,165,220,0.08);
     transition: .4s ease;
}
 .rep-box:hover {
     transform: translateY(-8px);
     box-shadow: 0 18px 45px rgba(0,0,0,0.08),0 10px 20px rgba(79,165,220,0.10);
}
 .rep-box::before {
     content: '';
     position: absolute;
     width: 120px;
     height: 120px;
     background: rgba(79,165,220,0.05);
     border-radius: 50%;
     top: -60px;
     right: -60px;
}
 .rep-icon {
     width: 64px;
     height: 64px;
     min-width: 64px;
     border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 28px;
     font-weight: 700;
     box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}
 .orange {
     background: #EBF5FD;
     color: #4FA5DC;
}
 .blue {
     background: #edf4ff;
     color: #2f80ed;
}
 .purple {
     background: #f3eeff;
     color: #7b61ff;
}
 .peach {
     background: #e8f0fc;
     color: #5b5ce2;
}
 .yellow {
     background: #ebf5fd;
     color: #ffb300;
}
 .rep-content {
     flex: 1;
}
 .rep-content h3 {
     font-size: 18px;
     line-height: 1.5;
     font-weight: 700;
     color: #0f172a;
     margin-bottom: 8px;
}
 .rep-content p {
     font-size: 16px;
     line-height: 1.6;
     color: #64748b;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: .5px;
     margin-bottom: 0;
}
 .rep-disclaimer {
     margin-top: 28px;
     padding: 24px 26px;
     border-radius: 24px;
     background: rgba(255,255,255,0.8);
     border: 1px solid rgba(79,165,220,0.18);
     display: flex;
     align-items: flex-start;
     gap: 18px;
     box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}
 .rep-disclaimer-icon {
     width: 52px;
     height: 52px;
     min-width: 52px;
     border-radius: 16px;
     background: #EBF5FD;
     color: #4FA5DC;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     font-weight: 700;
}
 .rep-disclaimer p {
     font-size: 16px;
     line-height: 1.9;
     color: #475569;
     font-weight: 500;
}
 .rep-disclaimer strong {
     color: #5b5ce2;
}
/* ════════════════════════════════════════════════════════════ 10. LOAN STEPS SECTION ════════════════════════════════════════════════════════════ */
 .loan-steps-section {
     padding: 40px 20px;
     background: radial-gradient(circle at top right,rgba(79,165,220,0.08),transparent 30%), radial-gradient(circle at bottom left,rgba(79,165,220,0.06),transparent 25%), #f7f8fc;
/*     font-family: Arial,sans-serif;*/
     overflow: hidden;
     position: relative;
}
 .loan-steps-section::before {
     content:"";
     position:absolute;
     inset:0;
     background-image:linear-gradient(rgba(79,165,220,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(79,165,220,0.04) 1px,transparent 1px);
     background-size:40px 40px;
     pointer-events:none;
}
 .loan-steps-container {
     max-width:1300px;
     margin:auto;
     position:relative;
     z-index:2;
}
 .loan-steps-top {
     text-align:center;
     margin-bottom:60px;
}
 .loan-steps-top span {
     color:#4FA5DC;
     font-size:16px;
     font-weight:700;
     letter-spacing:3px;
     text-transform:uppercase;
     display:block;
     margin-bottom:14px;
}
 .loan-steps-top h2 {
     font-size:36px;
     line-height:1.2;
     color:#000;
     margin:0 0 18px;
     font-weight:800;
}
 .loan-steps-top p {
     max-width:800px;
     margin:auto;
     font-size:18px;
     line-height:1.7;
     color:#5f6b85;
}
 .loan-steps-wrapper {
     position:relative;
}
 .loan-step-line {
     position:absolute;
     top:38px;
     left:12%;
     width:76%;
     height:4px;
     background:linear-gradient(to right,#4FA5DC,#6162DB);
     z-index:1;
     border-radius:20px;
}
 .loan-steps-grid {
     display:grid;
     grid-template-columns:repeat(4,1fr);
     gap:28px;
     position:relative;
     z-index:2;
}
 .loan-step-box {
     text-align:center;
     position:relative;
}
 .loan-step-number {
     width:78px;
     height:78px;
     border-radius:50%;
     margin:0 auto 26px;
     background:#000;
     border:4px solid #4FA5DC;
     color:#4FA5DC;
     font-size:28px;
     font-weight:800;
     display:flex;
     align-items:center;
     justify-content:center;
     box-shadow:0 12px 25px rgba(0,0,0,0.12);
     transition:0.3s ease;
}
 .loan-step-box.active .loan-step-number {
     background:#4FA5DC;
     color:#000;
     transform:scale(1.08);
}
 .loan-step-content {
     background:#fff;
     padding:30px 15px;
     border-radius:22px;
     border:1px solid rgba(0,0,0,0.05);
     box-shadow:0 12px 30px rgba(0,0,0,0.05);
     transition:0.3s ease;
     position:relative;
     overflow:hidden;
}
 .loan-step-content::before {
     content:"";
     position:absolute;
     top:-40px;
     right:-40px;
     width:120px;
     height:120px;
     background:rgba(79,165,220,0.08);
     border-radius:50%;
}
 .loan-step-box:hover .loan-step-content {
     transform:translateY(-8px);
     box-shadow:0 20px 40px rgba(0,0,0,0.08);
}
 .loan-step-content h3 {
     font-size:18px;
     line-height:1.3;
     margin-bottom:14px;
     color:#000;
     font-weight:700;
     position:relative;
     z-index:2;
}
 .loan-step-content p {
     font-size:16px;
     line-height:1.7;
     color:#657089;
     margin:0;
     position:relative;
     z-index:2;
}
/* ════════════════════════════════════════════════════════════ 11. WHY CHOOSE US SECTION ════════════════════════════════════════════════════════════ */
 .why-choose-section {
     padding: 40px 15px;
     background: radial-gradient(circle at top left,rgba(79,165,220,0.10),transparent 30%), radial-gradient(circle at bottom right,rgba(79,165,220,0.08),transparent 30%), linear-gradient(135deg,#ffffff 0%,#f4f6fe 100%);
     position: relative;
     overflow: hidden;
}
 .why-choose-section::before {
     content:"";
     position:absolute;
     inset:0;
     background-image:linear-gradient(rgba(0,0,0,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.03) 1px,transparent 1px);
     background-size:40px 40px;
     opacity:0.4;
     pointer-events:none;
}
 .section-heading {
     text-align:center;
     max-width:760px;
     margin:0 auto 60px;
}
 .sub-title {
     color:#4FA5DC;
     font-size:16px;
     font-weight:700;
     letter-spacing:2px;
     text-transform:uppercase;
     display:inline-block;
     margin-bottom:18px;
}
 .section-heading h2 {
     color:#111111;
     font-size:36px;
     line-height:1.3;
     font-weight:800;
     margin-bottom:18px;
}
 .section-heading p {
     color:#5e677a;
     font-size:18px;
     line-height:1.7;
}
 .why-choose-wrapper {
     display:grid;
     grid-template-columns:repeat(3,1fr);
     gap:25px;
}
 .why-card {
     background:rgba(255,255,255,0.88);
     backdrop-filter:blur(12px);
     border:1px solid rgba(0,0,0,0.06);
     border-radius:28px;
     padding:35px 30px;
     position:relative;
     transition:0.4s ease;
     overflow:hidden;
     box-shadow:0 12px 35px rgba(0,0,0,0.06);
}
 .why-card::before {
     content:"";
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:5px;
     background:linear-gradient(90deg,#4FA5DC,#6162DB);
}
 .why-card:hover {
     transform:translateY(-8px);
     border-color:rgba(97,98,219,0.35);
     box-shadow:0 20px 45px rgba(79,165,220,0.12);
}
 .card-number {
     position:absolute;
     top:22px;
     right:28px;
     font-size:70px;
     font-weight:800;
     line-height:1;
     color:rgba(0,0,0,0.05);
}
 .icon-box {
     width:58px;
     height:58px;
     border-radius:16px;
     border:1px solid rgba(97,98,219,0.35);
     display:flex;
     align-items:center;
     justify-content:center;
     font-size:24px;
     color:#4FA5DC;
     background:rgba(79,165,220,0.08);
     margin-bottom:15px;
}
 .why-card h3 {
     font-size:20px;
     line-height:1.4;
     color:#111111;
     margin-bottom:5px;
     font-weight:600;
}
 .why-card p {
     font-size:16px;
     line-height:1.9;
     color:#61708b;
     margin-bottom:30px;
}
 .card-tag {
     display:inline-flex;
     align-items:center;
     gap:8px;
     padding:12px 20px;
     border-radius:50px;
     border:1px solid rgba(97,98,219,0.40);
     background:rgba(79,165,220,0.08);
     color:#4FA5DC;
     font-size:16px;
     font-weight:600;
}
/* ════════════════════════════════════════════════════════════ 12. APR & RATES INFO SECTION ════════════════════════════════════════════════════════════ */
 .apr-rate-section {
     padding: 40px 20px;
     background: radial-gradient(circle at top left,rgba(79,165,220,0.08),transparent 30%), linear-gradient(135deg,#ffffff 0%,#f4f6fe 100%);
     position: relative;
     overflow: hidden;
}
 .apr-rate-section::before {
     content:"";
     position:absolute;
     inset:0;
     background-image:linear-gradient(rgba(0,0,0,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.03) 1px,transparent 1px);
     background-size:38px 38px;
     opacity:0.4;
     pointer-events:none;
}
 .apr-heading {
     max-width:760px;
     margin:0 auto 50px;
     text-align:center;
}
 .apr-heading h2 {
     font-size:36px;
     line-height:1.3;
     color:#111111;
     font-weight:800;
     margin-bottom:18px;
}
 .apr-heading p {
     font-size:18px;
     line-height:1.8;
     color:#667085;
}
 .apr-wrapper {
     display:grid;
     grid-template-columns:repeat(2,1fr);
     gap:26px;
}
 .apr-card {
     background:rgba(255,255,255,0.90);
     backdrop-filter:blur(12px);
     border:1px solid rgba(0,0,0,0.06);
     border-radius:26px;
     overflow:hidden;
     box-shadow:0 12px 35px rgba(0,0,0,0.05);
     transition:0.4s ease;
}
 .apr-card:hover {
     transform:translateY(-6px);
     border-color:rgba(97,98,219,0.25);
     box-shadow:0 18px 40px rgba(79,165,220,0.10);
}
 .card-top {
     padding:20px 32px;
     border-bottom:1px solid rgba(0,0,0,0.08);
}
 .card-subtitle {
     color:#4FA5DC;
     font-size:16px;
     font-weight:700;
     letter-spacing:2px;
     text-transform:uppercase;
     display:inline-block;
     margin-bottom:5px;
}
 .card-top h3 {
     font-size:24px;
     line-height:1.4;
     color:#111111;
     font-weight:800;
}
 .card-content {
     padding:20px 32px;
}
 .card-content p {
     font-size:16px;
     line-height:2;
     color:#556070;
     margin-bottom:28px;
}
 .card-content p strong {
     color:#111111;
}
 .highlight-box {
     background:#EBF5FD;
     border:1px solid rgba(97,98,219,0.25);
     border-radius:16px;
     padding:22px 24px;
     font-size:18px;
     line-height:1.6;
     color:#111111;
     font-weight:600;
}
 .highlight-box span {
     color:#4FA5DC;
     font-size:20px;
     font-weight:800;
     margin-right:10px;
}
/* ════════════════════════════════════════════════════════════ 13. ELIGIBILITY SECTION ════════════════════════════════════════════════════════════ */
 .eligibility-section {
     padding: 40px 20px;
     background: radial-gradient(circle at top left,rgba(79,165,220,0.08),transparent 30%), radial-gradient(circle at bottom right,rgba(79,165,220,0.06),transparent 30%), linear-gradient(135deg,#ffffff 0%,#f4f6fe 100%);
     position: relative;
     overflow: hidden;
}
 .eligibility-section::before {
     content:"";
     position:absolute;
     inset:0;
     background-image:linear-gradient(rgba(0,0,0,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.03) 1px,transparent 1px);
     background-size:40px 40px;
     opacity:0.4;
     pointer-events:none;
}
 .eligibility-heading {
     text-align:center;
     max-width:760px;
     margin:0 auto 50px;
}
 .eligibility-heading h2 {
     font-size:36px;
     line-height:1.3;
     color:#111111;
     font-weight:800;
     margin-bottom:18px;
}
 .eligibility-heading p {
     font-size:18px;
     line-height:1.7;
     color:#667085;
}
 .eligibility-wrapper {
     display:grid;
     grid-template-columns:repeat(2,1fr);
     gap:28px;
}
 .eligibility-card {
     background:rgba(255,255,255,0.90);
     backdrop-filter:blur(10px);
     border:1px solid rgba(0,0,0,0.06);
     border-radius:28px;
     padding:38px;
     box-shadow:0 12px 35px rgba(0,0,0,0.05);
     transition:0.4s ease;
}
 .eligibility-card:hover {
     transform:translateY(-6px);
     border-color:rgba(97,98,219,0.25);
     box-shadow:0 20px 40px rgba(79,165,220,0.10);
}
 .eligibility-card h3 {
     font-size:30px;
     line-height:1.4;
     color:#111111;
     font-weight:800;
     margin-bottom:14px;
}
 .card-description {
     font-size:18px;
     line-height:1.7;
     color:#94a3b8;
     margin-bottom:35px;
}
 .eligibility-card ul {
     list-style:none;
}
 .eligibility-card ul li {
     position:relative;
     padding-left:48px;
     margin-bottom:10px;
     font-size:16px;
     line-height:1.8;
     color:#475467;
}
 .eligibility-card ul li::before {
     content:"✓";
     position:absolute;
     left:0;
     top:0;
     width:28px;
     height:28px;
     border-radius:50%;
     background:#dff7ed;
     border:1px solid #8ce3bb;
     color:#12b76a;
     display:flex;
     align-items:center;
     justify-content:center;
     font-size:15px;
     font-weight:700;
}
/* ════════════════════════════════════════════════════════════ 14. COVERAGE / CITIES SECTION ════════════════════════════════════════════════════════════ */
 .coverage-section {
     padding:40px 20px;
     background:#ffffff;
}
 .dot-pattern {
     position:absolute;
     width:240px;
     height:120px;
     background-image:radial-gradient(#4FA5DC 1.5px,transparent 1.5px);
     background-size:32px 32px;
     opacity:0.4;
}
 .top-left {
     top:60px;
     left:40px;
}
 .bottom-right {
     bottom:40px;
     right:40px;
}
 .arc-shape {
     position:absolute;
     bottom:-140px;
     left:-100px;
     width:420px;
     height:420px;
     border-radius:50%;
     border:2px solid rgba(79,165,220,0.10);
}
 .arc-shape::before,.arc-shape::after {
     content:"";
     position:absolute;
     inset:30px;
     border-radius:50%;
     border:2px solid rgba(79,165,220,0.08);
}
 .arc-shape::after {
     inset:60px;
}
 .coverage-heading {
     max-width:900px;
     margin:0 auto 55px;
     text-align:center;
     position:relative;
     z-index:2;
}
 .coverage-heading h2 {
     font-size:36px;
     line-height:1.15;
     color:#091133;
     font-weight:800;
     margin-bottom:28px;
}
 .coverage-heading h2 span {
     display:block;
}
 .coverage-heading p {
     max-width:850px;
     margin:auto;
     font-size:20px;
     line-height:1.9;
     color:#667085;
}
 .city-wrapper {
     display:flex;
     align-items:center;
     justify-content:center;
     flex-wrap:wrap;
     gap:18px;
     position:relative;
     z-index:2;
}
 .city-wrapper a {
     text-decoration:none;
     padding:18px 34px;
     border-radius:60px;
     border:1.5px solid rgba(79,165,220,0.5);
     color:#111827;
     font-size:16px;
     font-weight:700;
     background:#ffffff;
     transition:0.4s ease;
}
 .city-wrapper a:hover {
     background:#4FA5DC;
     color:#ffffff;
     transform:translateY(-4px);
     box-shadow:0 12px 25px rgba(79,165,220,0.18);
}
/* ════════════════════════════════════════════════════════════ 15. MEDIA QUERIES — all consolidated, largest → smallest ════════════════════════════════════════════════════════════ */
/* ── ≤ 1024px ── */
 @media(max-width:1024px){
    /* Form / Hero */
     .ap-grid {
         grid-template-columns:1fr;
         gap:36px;
    }
     .ap-left {
         max-width:100%;
    }
     .ap-section {
         min-height:auto;
         padding:15px 0 40px;
    }
    /* Loan Steps */
     .loan-step-line {
         display:none;
    }
     .loan-steps-grid {
         grid-template-columns:repeat(2,1fr);
         gap:24px;
    }
     .loan-steps-top h2 {
         font-size:34px;
    }
     .loan-step-content h3 {
         font-size:22px;
    }
     .loan-step-content p {
         font-size:16px;
    }
}
/* ── ≤ 991px ── */
 @media(max-width:991px){
    /* Rates */
     .rates-grid {
         grid-template-columns:1fr;
    }
     .rates-title {
         font-size:34px;
    }
    /* Rep Example */
     .rep-grid {
         grid-template-columns:repeat(2,1fr);
    }
     .rep-title {
         font-size:34px;
    }
    /* Why Choose */
     .why-choose-wrapper {
         grid-template-columns:1fr;
    }
     .section-heading h2 {
         font-size:32px;
    }
    /* APR */
     .apr-wrapper {
         grid-template-columns:1fr;
    }
     .apr-heading h2 {
         font-size:32px;
    }
    /* Eligibility */
     .eligibility-wrapper {
         grid-template-columns:1fr;
    }
     .eligibility-heading h2 {
         font-size:32px;
    }
    /* Coverage */
   /*  .container {
         padding:70px 30px;
    }*/
     .coverage-heading h2{
         font-size:44px;
    }
     .coverage-heading p {
         font-size:18px;
    }
}
/* ── ≤ 768px ── */
 @media(max-width:768px){
    /* Form */
     .ap-wrap {
         padding:0 16px;
    }
     .form-card-head {
         padding:20px;
    }
     .form-card-head h3 {
         font-size:18px;
    }
     .steps-wrap {
         padding:20px 16px;
    }
     .step-progress {
         padding:16px 16px 14px;
    }
     .step-progress::before{
         left:calc(16px + 22px);
         right:calc(16px + 22px);
    }
     .sp-circle {
         width:30px;
         height:30px;
    }
     .fg-grid,.fg-grid2 {
         grid-template-columns:1fr;
    }
     .fg.full {
         grid-column:auto;
    }
     .ap-left h1 {
         font-size:26px;
    }
     .ap-trust {
         flex-direction:column;
         gap:14px;
    }
     .ap-trust-item {
         border-right:none;
         border-bottom:1px solid var(--border);
         padding-bottom:14px;
    }
     .ap-trust-item:last-child {
         border-bottom:none;
         padding-bottom:0;
    }
     .step-heading {
         font-size:18px;
    }
     .btn-next {
         font-size:17px;
    }
}
/* ── ≤ 767px ── */
 @media(max-width:767px){
    /* Rates */
     .rates-section {
         padding:60px 15px;
    }
     .rates-title {
         font-size:30px;
         margin-bottom:45px;
    }
     .title-line {
         width:90px;
    }
     .rates-grid {
         gap:18px;
    }
     .rate-card {
         padding:22px 18px;
         border-radius:24px;
         gap:0;
         flex-direction:column;
         align-items:flex-start;
    }
     .rate-left {
         width:100%;
         align-items:flex-start;
         flex-direction:column;
    }
     .rate-content h3 {
         font-size:17px;
         line-height:1.5;
    }
     .rate-value {
         width:100%;
         text-align:left;
         font-size:17px;
         white-space:normal;
    }
     .rate-icon {
         width:48px;
         height:48px;
         min-width:48px;
         font-size:20px;
    }
     .green {
         background:#e8f8ef00 !important;
         color:#11a75c;
    }
    /* Rep Example */
     .rep-example-section{
         padding:40px 15px;
    }
     .rep-title {
         font-size:30px;
         margin-bottom:30px;
    }
     .rep-grid {
         grid-template-columns:1fr;
         gap:18px;
    }
     .rep-box {
         padding:22px 18px;
         border-radius:22px;
    }
     .rep-icon {
         width:54px;
         height:54px;
         min-width:54px;
         font-size:24px;
         border-radius:16px;
    }
     .rep-content h3 {
         font-size:18px;
    }
     .rep-disclaimer {
         flex-direction:column;
         padding:22px 18px;
         border-radius:20px;
    }
     .rep-disclaimer p {
         font-size:16px;
         line-height:1.8;
    }
    /* Loan Steps */
     .loan-steps-section {
         padding:40px 15px;
    }
     .loan-steps-top {
         margin-bottom:40px;
    }
     .loan-steps-top span{
         font-size:13px;
         letter-spacing:2px;
    }
     .loan-steps-top h2 {
         font-size:30px;
    }
     .loan-steps-top p {
         font-size:16px;
         line-height:1.7;
    }
     .loan-steps-grid {
         grid-template-columns:1fr;
         gap:22px;
    }
     .loan-step-content {
         padding:26px 16px;
    }
     .loan-step-number {
         width:70px;
         height:70px;
         font-size:24px;
         margin-bottom:20px;
    }
     .loan-step-content h3 {
         font-size:21px;
         margin-bottom:12px;
    }
     .loan-step-content p {
         font-size:15px;
         line-height:1.7;
    }
    /* Why Choose */
     .why-choose-section {
         padding:70px 15px;
    }
     .section-heading {
         margin-bottom:45px;
    }
     .section-heading h2 {
         font-size:28px;
    }
     .section-heading p {
         font-size:16px;
         line-height:1.7;
    }
     .why-card {
         padding:30px 22px;
         border-radius:24px;
    }
     .card-number {
         font-size:58px;
         top:20px;
         right:22px;
    }
     .icon-box {
         width:54px;
         height:54px;
         font-size:22px;
         margin-top:60px;
         margin-bottom:22px;
    }
     .why-card h3 {
         font-size:20px;
    }
     .why-card p {
         font-size:16px;
         line-height:1.8;
    }
     .card-tag {
         font-size:15px;
         padding:10px 18px;
    }
    /* APR */
     .apr-rate-section {
         padding:40px 15px;
    }
     .apr-heading {
         margin-bottom:40px;
    }
     .apr-heading h2 {
         font-size:28px;
    }
     .apr-heading p {
         font-size:16px;
         line-height:1.7;
    }
     .card-top,.card-content {
         padding:24px;
    }
     .card-top h3 {
         font-size:22px;
    }
     .highlight-box {
         padding:18px;
         font-size:16px;
    }
     .highlight-box span {
         display:block;
         margin-bottom:8px;
         font-size:18px;
    }
    /* Eligibility */
     .eligibility-section {
         padding:40px 15px;
    }
     .eligibility-heading {
         margin-bottom:40px;
    }
     .eligibility-heading h2 {
         font-size:28px;
    }
     .eligibility-heading p {
         font-size:16px;
    }
     .eligibility-card {
         padding:28px 22px;
         border-radius:24px;
    }
     .eligibility-card h3 {
         font-size:24px;
    }
     .card-description {
         font-size:16px;
         margin-bottom:28px;
    }
     .eligibility-card ul li {
         font-size:16px;
         line-height:1.7;
         padding-left:42px;
         margin-bottom:22px;
    }
    /* Coverage */
     .coverage-section {
         padding:20px 15px;
    }
   /*  .container {
         padding:60px 20px;
         border-radius:18px;
    }*/
     .coverage-heading {
         margin-bottom:40px;
    }
     .coverage-heading h2 {
         font-size:32px;
    }
     .coverage-heading p {
         font-size:16px;
         line-height:1.8;
    }
     .city-wrapper {
         gap:14px;
    }
     .city-wrapper a {
         padding:14px 22px;
         font-size:16px;
    }
     .dot-pattern {
         display:none;
    }
     .arc-shape {
         width:260px;
         height:260px;
    }
}
/* ── ≤ 480px ── */
 @media(max-width:480px){
    /* Form */
     .ap-section {
         padding:60px 0 36px;
    }
     .form-card {
         border-radius:16px;
    }
     .sp-label {
         display:none;
    }
     .step-progress {
         padding-bottom:10px;
    }
    /* Why Choose */
     .why-choose-section {
         padding:60px 12px;
    }
     .section-heading h2 {
         font-size:24px;
    }
     .sub-title {
         font-size:15px;
    }
     .why-card {
         padding:26px 18px;
    }
     .why-card h3 {
         font-size:18px;
    }
     .why-card p {
         font-size:16px;
    }
     .card-tag {
         width:100%;
         justify-content:center;
         text-align:center;
    }
    /* APR */
     .apr-heading h2 {
         font-size:24px;
    }
     .sub-title,.card-subtitle {
         font-size:15px;
    }
     .card-top h3 {
         font-size:20px;
    }
     .card-content p {
         font-size:16px;
         line-height:1.8;
    }
     .highlight-box {
         font-size:15px;
    }
    /* Eligibility */
     .eligibility-heading h2 {
         font-size:24px;
    }
     .eligibility-card {
         padding:24px 18px;
    }
     .eligibility-card h3 {
         font-size:22px;
    }
     .eligibility-card ul li {
         font-size:15px;
    }
    /* Coverage */
     .coverage-heading h2 {
         font-size:26px;
    }
     .sub-title {
         font-size:15px;
    }
     .city-wrapper {
         justify-content:flex-start;
    }
     .city-wrapper a {
         width:100%;
         text-align:center;
    }
}

.location .loc a {
    color: #fff;
    display: flex !important;
    align-items: center !important;
    font-size: 15px !important;
}

p.for_wh {
    color: #fff;
}

@media(max-width:767px){
    .location h4 {
    color: #4FA5DC;
    font-size: 26px;
    font-weight: 800;
    font-weight: 600;
    line-height: 35px;
    margin-bottom: 6px;
}
}



    html {
    overflow-x: hidden;
}

    /* ── Dark Hero ── */
    .ap-section--dark {
      background: linear-gradient(135deg, #070b18 0%, #101a3a 55%, #08111f 100%) !important;
      position: relative;
    }

        .ap-right {
    margin-top: 30px;
}

    .ap-section--dark::before {
      content: '';
      position: absolute;
      width: 400px; height: 400px;
      border-radius: 50%;
      background: rgba(79,165,220,.12);
      filter: blur(90px);
      top: -120px; left: -100px;
      pointer-events: none;
    }
    .ap-section--dark::after {
      content: '';
      position: absolute;
      width: 360px; height: 360px;
      border-radius: 50%;
      background: rgba(97,98,219,.14);
      filter: blur(90px);
      bottom: -100px; right: -80px;
      pointer-events: none;
    }
    .ap-section--dark .ap-eyebrow {
      color: #4FA5DC;
      background: rgba(79,165,220,.12);
      border-color: rgba(79,165,220,.35);
    }
    .ap-section--dark .ap-left h1 { color: #ffffff; }
    .ap-section--dark .ap-left h1 .hl {
      background: linear-gradient(135deg, #4FA5DC, #8b8eff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .ap-section--dark .ap-sub { color: rgba(255,255,255,0.72); }

    /* ── OTP Step Styles ── */
    .otp-mobile-display {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #F4F6FE;
      border: 1px solid #DDE0F5;
      border-radius: 10px;
      padding: 12px 16px;
      font-size: 16px;
      color: #2C2E50;
      margin-bottom: 20px;
      font-weight: 400;
    }
    .otp-mobile-display i { color: #4FA5DC; font-size: 18px; }
    .otp-edit-num {
      margin-left: auto;
      background: none;
      border: none;
      font-size: 16px;
      font-weight: 700;
      color: #6162DB;
      cursor: pointer;
      text-decoration: underline;
      padding: 0;
    }

    /* 4-box OTP */
    .otp-boxes-wrap {
      display: flex;
      gap: 14px;
      justify-content: center;
      margin: 10px 0 6px;
    }
    .otp-box {
      width: 62px;
      height: 66px;
      font-size: 24px;
      font-weight: 800;
      text-align: center;
      color: #1A1C3A;
      background: #F4F6FE;
      border: 2px solid #DDE0F5;
      border-radius: 12px;
      outline: none;
      transition: all .22s ease;
      font-family: inherit;
    }
    .otp-box:focus {
      background: #fff;
      border-color: #4FA5DC;
      box-shadow: 0 0 0 4px rgba(97,98,219,.12);
      transform: scale(1.05);
    }
    .otp-box.otp-filled {
      background: #fff;
      border-color: #4FA5DC;
    }
    .otp-box.otp-error {
      border-color: #EF4444;
      background: #fff5f5;
    }

    /* Timer */
    .otp-timer-wrap {
      text-align: center;
      font-size: 16px;
      color: #6E7190;
      margin: 10px 0 4px;
    }

    #step5 .fg-grid .fg {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
}


    .otp-timer-wrap strong { color: #6162DB; font-size: 17px; }

    /* Resend */
    .otp-resend-wrap {
      text-align: center;
      font-size: 16px;
      color: #6E7190;
      margin: 6px 0;
    }
    .otp-resend-btn {
      background: none;
      border: none;
      font-size: 16px;
      font-weight: 700;
      color: #4FA5DC;
      cursor: pointer;
      text-decoration: underline;
      font-family: inherit;
    }

    /* Demo hint */
    .otp-demo-hint {
      text-align: center;
      font-size: 16px;
      color: #6E7190;
      background: rgba(79,165,220,.07);
      border: 1px dashed rgba(79,165,220,.35);
      border-radius: 10px;
      padding: 9px 16px;
      margin: 10px 0 4px;
    }
    .otp-demo-hint i { color: #4FA5DC; margin-right: 4px; }
    .otp-demo-hint strong { color: #6162DB; font-size: 17px; }

    /* step progress — 5 items need slightly smaller labels */
    @media (max-width: 480px) {
      .otp-box { width: 50px; height: 56px; font-size: 20px; }
      .otp-boxes-wrap { gap: 8px; }
    }

    /* ── Dark Sections (rates, loan-steps, why-choose) ── */
    .sec--dark-rr {
      background: linear-gradient(135deg, #070b18 0%, #101a3a 55%, #08111f 100%) !important;
      position: relative;
    }

    /* Rates section dark overrides */
    .sec--dark-rr.rates-section {
      background: linear-gradient(135deg, #070b18 0%, #0d1535 55%, #08111f 100%) !important;
    }
    .sec--dark-rr .rates-title { color: #ffffff; }
    .sec--dark-rr .rates-title span { color: #4FA5DC; }
    .sec--dark-rr .title-line { background: linear-gradient(90deg,#4FA5DC,#6162DB); }
    .sec--dark-rr .rate-card {
      background: rgba(255,255,255,0.06) !important;
      border: 1px solid rgba(79,165,220,0.20) !important;
      border-bottom: 4px solid rgba(79,165,220,0.40) !important;
      box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
    }
    .sec--dark-rr .rate-card::after { background: rgba(79,165,220,0.06); }
    .sec--dark-rr .rate-card:hover {
      background: rgba(255,255,255,0.09) !important;
      box-shadow: 0 18px 40px rgba(79,165,220,0.18) !important;
      border-color: rgba(79,165,220,0.45) !important;
    }
    .sec--dark-rr .rate-icon {
      background: rgba(79,165,220,0.12) !important;
      color: #4FA5DC !important;
    }
    .sec--dark-rr .rate-content h3 { color: rgba(255,255,255,0.85) !important; }
    .sec--dark-rr .rate-value { color: #4FA5DC !important; }
    .sec--dark-rr .rate-value.green { color: #22C55E !important; }

    /* Loan steps dark overrides */
    .sec--dark-rr.loan-steps-section {
      background: linear-gradient(135deg, #0d1535 0%, #101a3a 55%, #070b18 100%) !important;
    }
    .sec--dark-rr .loan-steps-top h2 { color: #ffffff !important; }
    .sec--dark-rr .loan-steps-top p  { color: rgba(255,255,255,0.65) !important; }
    .sec--dark-rr .loan-steps-top span { color: #4FA5DC !important; }
    .sec--dark-rr .loan-step-line {
      background: linear-gradient(to right,#4FA5DC,#6162DB) !important;
    }
    .sec--dark-rr .loan-step-number {
      background: #0D0F22 !important;
      border-color: #4FA5DC !important;
      color: #4FA5DC !important;
    }
    .sec--dark-rr .loan-step-box.active .loan-step-number {
      background: linear-gradient(135deg,#4FA5DC,#6162DB) !important;
      color: #fff !important;
    }
    .sec--dark-rr .loan-step-content {
      background: #ffffff !important;
      border: 1px solid rgba(79,165,220,0.20) !important;
    }
    .sec--dark-rr .loan-step-content::before { background: rgba(79,165,220,0.08); }
    .sec--dark-rr .loan-step-box:hover .loan-step-content {
      box-shadow: 0 20px 40px rgba(0,0,0,0.4) !important;
      border-color: rgba(79,165,220,0.35) !important;
    }
    .sec--dark-rr .loan-step-content h3 { color: #1A1C3A !important; }
    .sec--dark-rr .loan-step-content p  { color: #657089 !important; }

    /* Why choose dark overrides */
    .sec--dark-rr.why-choose-section {
      background: linear-gradient(135deg, #070b18 0%, #101a3a 55%, #08111f 100%) !important;
    }
    .sec--dark-rr .sub-title { color: #4FA5DC !important; }
    .sec--dark-rr .section-heading h2 { color: #ffffff !important; }
    .sec--dark-rr .section-heading p  { color: rgba(255,255,255,0.65) !important; }
    .sec--dark-rr .why-card {
      background: #ffffff !important;
      border: 1px solid rgba(79,165,220,0.20) !important;
    }
    .sec--dark-rr .why-card::before {
      background: linear-gradient(90deg,#4FA5DC,#6162DB) !important;
    }
    .sec--dark-rr .why-card:hover {
      border-color: rgba(79,165,220,0.40) !important;
      box-shadow: 0 20px 45px rgba(79,165,220,0.18) !important;
    }
    .sec--dark-rr .icon-box {
      background: rgba(79,165,220,0.12) !important;
      border-color: rgba(79,165,220,0.30) !important;
      color: #4FA5DC !important;
    }
    .sec--dark-rr .card-number { color: rgba(0,0,0,0.05) !important; }
    .sec--dark-rr .why-card h3 { color: #111111 !important; }
    .sec--dark-rr .why-card p  { color: #61708b !important; }
    .sec--dark-rr .card-tag {
      background: rgba(79,165,220,0.12) !important;
      border-color: rgba(79,165,220,0.35) !important;
      color: #4FA5DC !important;
    }

    /* ── Step Progress — 5 steps responsive fix ── */

    /* Desktop: 5 items, labels wrap allowed */
    .sp-label {
      white-space: normal !important;
      text-align: center;
      font-size: 12px !important;
      line-height: 1.3;
      max-width: 70px;
    }

    /* The connector line spans full width correctly */
    .step-progress::before {
      top: 22px !important;
    }

    /* Tablet (≤ 768px): smaller circles, shorter labels */
    @media (max-width: 768px) {
      .step-progress {
        padding: 12px 10px 10px !important;
        gap: 0 !important;
        overflow: visible;
      }
      .step-progress::before {
        left: 18px !important;
        right: 18px !important;
        top: 22px !important;
      }
      .sp-item {
        flex: 1;
        min-width: 0;
      }
      .sp-circle {
        width: 34px !important;
        height: 34px !important;
        font-size: 13px !important;
        flex-shrink: 0;
      }
      .sp-label {
        font-size: 11px !important;
        white-space: normal !important;
        max-width: 58px;
        text-align: center;
        line-height: 1.3;
        word-break: break-word;
      }
    }

    /* Mobile (≤ 480px): even more compact */
    @media (max-width: 480px) {
      .step-progress {
        padding: 10px 8px 8px !important;
      }
      .step-progress::before {
        left: 12px !important;
        right: 12px !important;
        top: 22px !important;
      }
      .sp-circle {
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
        box-shadow: none !important;
      }
      .sp-item.active .sp-circle {
        box-shadow: 0 0 0 3px rgba(79,165,220,.18) !important;
      }
      .sp-label {
        font-size: 9px !important;
        max-width: 48px;
      }
    }

    /* Very small (≤ 360px): hide labels, show only circles */
    @media (max-width: 360px) {
      .sp-label { display: none !important; }
      .step-progress {
        padding: 14px 8px !important;
      }
    }