:root{
      --page-bg:#f4f4f2;
      --white:#ffffff;
      --text-dark:#222222;
      --muted:#5b513e;
      --gold:#c2910b;
      --gold-dark:#b7840d;
      --gold-soft:#e8d184;
      --gold-panel:#efe5b7;
      --panel-bg:#f1e7c2;
      --input-bg:#fbf7e9;
      --border-soft:rgba(164,131,41,0.22);
      --shadow-soft:0 14px 34px rgba(95,72,23,0.14);
    }

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

    body{
      background:var(--page-bg);
      font-family:"Montserrat", sans-serif;
      color:var(--text-dark);
    }
    html, body {
  overflow-x: hidden;
  max-width: 100%;
}

    .page{
      width:100%;
      display:flex;
      flex-direction:column;
    }

    /* ================= HEADER ================= */
    .site-header{
      background:#fbfaf7;
      height:112px;
      display:flex;
      align-items:center;
      border-bottom:1px solid rgba(194,145,11,0.06);
      position:relative;
      z-index:1030;
    }

    .header-inner{
      width:100%;
      max-width:1600px;
      margin:0 auto;
      padding:0 34px 0 38px;
      display:flex;
      align-items:center;
      justify-content:space-between;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      text-decoration:none;
      color:var(--text-dark);
      min-width:190px;
    }

    .brand-mark{font-size:48px;}

    .brand-text-wrap{display:flex; flex-direction:column; gap:2px;}

    .brand-text{
      font-size:22px;
      font-weight:700;
      color:#8e6f13;
      letter-spacing:-0.02em;
    }

    .brand-line{
      width:126px;
      height:4px;
      background:#ab8220;
      border-radius:999px;
    }

    .main-nav{
      display:flex;
      align-items:center;
      gap:34px;
      margin-left:10px;
      flex:1;
      justify-content:center;
    }

    .main-nav a{
      text-decoration:none;
      color:#9a7b16;
      font-size:18px;
      font-weight:600;
    }

    .nav-dropdown::after{
      content:" ▼";
      font-size:12px;
      vertical-align:middle;
    }

    .header-actions{
      display:flex;
      align-items:center;
      gap:14px;
    }

    .icon-btn{
      width:28px;
      height:28px;
      border:0;
      background:transparent;
      font-size:18px;
      color:#9f7f18;
      cursor:pointer;
      display:grid;
      place-items:center;
    }

    .small-arrow{
      font-size:16px;
      margin-left:-10px;
    }

    .cta-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      height:62px;
      padding:0 34px;
      min-width:216px;
      background:linear-gradient(180deg,#c99a12 0%,#bd8a09 100%);
      color:#fff;
      text-decoration:none;
      border-radius:999px;
      font-size:18px;
      font-weight:700;
      box-shadow:0 8px 18px rgba(194,145,11,0.18);
    }

    /* Burger menu - hidden on desktop */
    .burger-menu{
      display:none;
      flex-direction:column;
      justify-content:space-between;
      width:30px;
      height:22px;
      background:transparent;
      border:none;
      cursor:pointer;
      padding:0;
      z-index:1040;
    }
    .burger-menu span{
      width:100%;
      height:3px;
      background:#8e6f13;
      border-radius:3px;
      transition:all 0.3s;
    }

    /* Offcanvas menu */
    .offcanvas-menu{
      position:fixed;
      top:0;
      left:-300px;
      width:280px;
      height:100vh;
      background:#fff;
      z-index:1050;
      box-shadow:2px 0 20px rgba(0,0,0,0.1);
      transition:left 0.3s ease;
      padding:30px 20px;
      display:flex;
      flex-direction:column;
    }
    .offcanvas-menu.open{
      left:0;
    }
    .offcanvas-overlay{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:rgba(0,0,0,0.5);
      z-index:1045;
      display:none;
    }
    .offcanvas-overlay.show{
      display:block;
    }
    .offcanvas-menu .brand-mobile{
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom:30px;
      text-decoration:none;
      color:var(--text-dark);
    }
    .offcanvas-menu .brand-mobile .brand-mark{
      font-size:36px;
    }
    .offcanvas-menu .brand-mobile .brand-text{
      font-size:20px;
    }
    .offcanvas-nav{
      display:flex;
      flex-direction:column;
      gap:20px;
    }
    .offcanvas-nav a{
      text-decoration:none;
      color:#9a7b16;
      font-size:18px;
      font-weight:600;
      padding:8px 0;
      border-bottom:1px solid #eee;
    }

    /* ================= HERO ================= */
    .hero{
      display:flex;
      align-items:flex-start;
      position:relative;
      width:100%;
      height:915px;
      min-height:580px;
      background:url("/../img/backgound.png") center/cover no-repeat;
      border-bottom-left-radius:20px;
      border-bottom-right-radius:20px;
      /* margin-bottom:-70px; */
      z-index:2;
    }

    .hero-overlay{
      position:absolute;
      inset:0;
background: linear-gradient(
180deg,
#b8831f 0%,
#d3a33a 35%,
#e8c56a 65%,
rgba(232,197,106,0.2) 100%
);
    /* border-radius:20px; */
opacity: 0.5;
    }



    .hero h1{
      margin-top:120px;
      text-align:left;
      max-width:800px;
      color:#fff;
      font-size:74px;
      font-weight:800;
      letter-spacing:-0.04em;
      text-shadow:0 3px 8px rgba(0,0,0,0.12);
      margin-bottom:20px;
    }

    .hero-sub{
      text-align:left;
      color:#ffffff;
      font-size:22px;
      font-weight:500;
      max-width:640px;
      margin-bottom:26px;
      line-height:1.5;
      text-shadow:0 2px 6px rgba(0,0,0,0.2);
    }

    .trust-rating{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:14px;
      background:#ffffff;
      padding:14px 24px;
      border-radius:14px;
      width:fit-content;
      margin-bottom:40px;
      box-shadow:0 10px 30px rgba(0,0,0,0.12);
      font-size:18px;
    }

    .trust-rating .stars{
      color:#f5b301;
      font-size:20px;
      display:flex;
      gap:4px;
    }

    .trust-rating .rating-text{
      font-weight:600;
      color:#222;
    }

    .trust-rating strong{
      font-size:22px;
      margin-right:4px;
    }

    /* ================= CALCULATOR CARD ================= */
    .calculator-card{
      max-width:calc(100% - 80px);
      margin-top:auto;
      margin-bottom:-160px;
      align-self:center;
background: linear-gradient(
135deg,
#AC8D41 0%,
#B7954C 20%,
#C5A55B 40%,
#D2B56F 60%,
#D9C07E 100%
);   border-radius: 16px;
      border-radius:22px;
      box-shadow:0 18px 44px rgba(91,71,24,0.18);
      display:grid;
      grid-template-columns:1fr 388px;
      gap:28px;
      padding:34px 34px 28px 38px;
      border:1px solid rgba(186,145,39,0.18);
      z-index:10;
      position:relative;
    }

    .calculator-left h2{
      font-size:25px;
      font-weight:700;
      margin-bottom:24px;
    }

    .form-row{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:34px;
    }

    .field label,
    .residency label,
    .loan label{
      display:block;
      margin-bottom:10px;
      font-size:16px;
      font-weight:700;
    }

    .input,
    .loan-input{
      height:48px;
      border-radius:6px;
      border:1px solid rgba(160,133,62,0.28);
      background:rgba(255,252,242,0.88);
      display:flex;
      align-items:center;
      padding:0 18px;
      font-size:16px;
    }

    input{
      border:none;
      background:transparent;
      width:100%;
    }
    input:focus{outline:none;}

    .range{
      position:relative;
      /* height:18px; */
    }

    .track{
      width:100% !important;
      height:6px;
      border-radius:999px;
      background:#d6bf5c;
    }

    .track.short{width:23%;}

    .dot{
      position:absolute;
      left:0;
      top:-7px;
      width:20px;
      height:20px;
      background:#c6950e;
      border-radius:50%;
      box-shadow:0 0 0 3px rgba(198,149,14,0.15);
      transition:left .05s linear;
      pointer-events:none;
    }

    .range-label,
    .range-dual{
      display:flex;
      justify-content:space-between;
      font-size:14px;
      margin-top:4px;
    }

    .range-label.end{justify-content:flex-end;}

    .bottom-row{
      margin-top:5px;
      display:grid;
      grid-template-columns:1.05fr 1fr;
      gap:34px;
      align-items:start;
    }

    .toggle-group{
      display:flex;
      gap:6px;
    }

    .toggle{
      min-width:110px;
      height:48px;
      padding:0 16px;
      border-radius:6px;
      border:1px solid rgba(170,141,61,0.26);
      background:#efe2a9;
      color:#7f6925;
      font-size:15px;
      font-weight:600;
      cursor:pointer;
    }

    .toggle.active{
      background:#d8b243;
      color:#3a2c11;
    }

    .toggle.dark{
      /* background:#b48c32; */
      /* color:#1f180b; */
    }

    .loan-input-wrap{
      position:relative;
    }

    .suffix{
      position:absolute;
      right:16px;
      top:13px;
      font-size:18px;
      font-weight:600;
      color:#7e6a31;
    }

    .calculator-summary{
      background:#fff;
      border-radius:18px;
      padding:26px 28px 22px;
      box-shadow:0 10px 28px rgba(85,64,20,0.08);
      margin: auto;
    }

    .calculator-summary h3{
      font-size:22px;
      margin-bottom:18px;
    }

    .summary-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
      margin-bottom:26px;
    }

    .summary-label{
      font-size:14px;
      display:block;
      margin-bottom:6px;
      color:#575757;
    }

    .summary-grid strong{
      font-size:22px;
      color:#c08e0f;
      font-weight:800;
      display:block;
    }

    .summary-btn{
      display:flex;
      justify-content:center;
      align-items:center;
      width:100%;
      height:52px;
      border-radius:8px;
      text-decoration:none;
      background:linear-gradient(180deg,#c79a17 0%,#b9870b 100%);
      color:#fff;
      font-size:18px;
      font-weight:700;
      margin-top:14px;
      box-shadow:0 8px 16px rgba(191,143,17,0.18);
    }

    .summary-btn.small{
      width:184px;
      height:44px;
      margin:0 auto 12px;
      font-size:16px;
    }

    input[type="range"]{
      -webkit-appearance:none;
      appearance:none;
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:20px;
      background:transparent;
      cursor:pointer;
      opacity:0;
      z-index:3;
    }

    /* ========== NEW SECTIONS ========== */

    .how-it-works{
      padding:100px 40px 60px;
      text-align:center;
      background:#f4f4f2;
    }
    .how-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:30px;
      margin-top:40px;
      max-width:1200px;
      margin-left:auto;
      margin-right:auto;
    }
    .how-card{
      background:#fff;
      padding:30px;
      border-radius:10px;
      box-shadow:0 10px 20px rgba(0,0,0,0.08);
    }
    .how-icon{
      width:50px;
      height:50px;
      background:#c69500;
      color:#fff;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      margin:0 auto 12px;
      font-weight:700;
    }

    .cashback-section{
      padding:80px 40px;
      display:flex;
      justify-content:center;
      background:#f4f4f2;
    }
    .cashback-box{
      display:grid;
      grid-template-columns:1fr 320px;
      gap:40px;
      background:white;
      padding:40px;
      border-radius:16px;
      max-width:1350px;
      width:100%;
    }
    .cashback-left h3{
      font-size:24px;
      margin-bottom:10px;
    }
    .cashback-left ul {
    margin: auto;
    /* width: 441px; */
    list-style: none;
    padding: 0;
    margin: 20px;
    /* text-align: center; */
}
    .cashback-left li{
      margin-bottom:8px;
      font-size:15px;
    }
    .cashback-form input{
      width:100%;
      margin-bottom:10px;
      padding:10px;
      border-radius:6px;
      border:1px solid #ddd;
    }
    .cashback-form button{
      width:100%;
      background:#c69500;
      color:#fff;
      border:none;
      padding:12px;
      border-radius:6px;
      font-weight:600;
    }

    .stats-section{
      background:#C2910D;
      color:#fff;
      padding:80px 40px;
    }
    .stats-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      text-align:center;
      gap:20px;
      max-width:1200px;
      margin:auto;
    }
    .stat h3{
      font-size:37px !important;
      font-weight:800;
      margin-bottom:5px;
    }

    .banks-section{
      padding:80px 40px;
      text-align:center;
      background:#f4f4f2;
    }
    .banks-logos{
      display:flex;
      justify-content:center;
      gap:40px;
      flex-wrap:wrap;
      margin-top:30px;
    }
    .banks-logos img{
      width:100px;
      height:60px;
      background:#ddd;
      border-radius:8px;
      object-fit:cover;
    }

    .finder-advantage{
      padding:80px 40px;
      text-align:center;
      background:#f4f4f2;
    }
    .adv-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:30px;
      margin-top:40px;
      max-width:1200px;
      margin-left:auto;
      margin-right:auto;
    }
    .adv-box{
      background:#f4f4f4;
      padding:30px;
      border-radius:12px;
    }

    .insights-section{
        margin-top: -40px;
      padding:80px 40px;
      text-align:center;
      background:white;
    }
    .insight-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:30px;
      margin-top:40px;
      max-width:1200px;
      margin-left:auto;
      margin-right:auto;
    }
    .insight-card{
      background:#fff;
      border-radius:10px;
      overflow:hidden;
      box-shadow:0 10px 20px rgba(0,0,0,0.08);
    }
    .insight-card img{
      width:100%;
      height:200px;
      object-fit:cover;
    }
    .insight-card h4{
      padding:15px 10px;
      font-size:16px;
    }

    /* existing sections */
    .next-section{
      background:#f4f4f2;
      padding:80px 40px 80px;
      display:flex;
      justify-content:center;
    }
    .advantage-container{
      max-width:1200px;
      width:100%;
      text-align:center;
    }
    .advantage-title{
      font-size:34px;
      font-weight:800;
      margin-bottom:10px;
    }
    .advantage-subtitle{
      color:#666;
      font-size:16px;
      margin-bottom:50px;
    }
    .advantage-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:24px;
    }
    .adv-card{
      background:#e9e9e9;
      padding:30px 24px;
      border-radius:14px;
      text-align:center;
    }
    .adv-card.highlight{
      background:#c99600;
      color:#fff;
    }
    .adv-number{
      width:48px;
      height:48px;
      border-radius:50%;
      background:#fff;
      color:#c99600;
      display:flex;
      align-items:center;
      justify-content:center;
      margin:0 auto 16px;
      font-weight:700;
    }

    .finance-section{
      background:#c69500;
      padding:100px 40px 120px;
      border-top-right-radius:120px;
      border-bottom-left-radius:120px;
    }
    .finance-container{
      max-width:1200px;
      margin:auto;
      text-align:center;
      color:#fff;
    }
    .finance-title{
      font-size:36px;
      font-weight:800;
      margin-bottom:20px;
    }
    .finance-subtitle{
      max-width:850px;
      margin:auto;
      font-size:15px;
      line-height:1.6;
      margin-bottom:50px;
    }
    .finance-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:24px;
      margin-bottom:60px;
    }
    .finance-card{
      /* height:411px; */
      background:#fff;
      border-radius:10px;
      overflow:hidden;
      color:#222;
      text-align:left;
    }
    .finance-card img{
      width:100%;
      height:241px;
      object-fit:cover;
    }
    .finance-card-content{
      padding:16px;
    }
    .finance-card h3{
      font-size:16px;
      margin-bottom:8px;
    }
    .finance-card p{
      font-size:13px;
      line-height:1.6;
      margin-bottom:14px;
    }
    .finance-btn{
      display:inline-block;
      background:#c69500;
      color:#fff;
      padding:8px 14px;
      border-radius:6px;
      font-size:12px;
      font-weight:600;
    }
    .why-box{
      background:#f2f2f2;
      border-radius:18px;
      padding:35px;
      max-width:720px;
      margin:auto;
      color:#222;
    }
    .why-box h3{
      font-size:20px;
      margin-bottom:8px;
    }
    .why-box p{
      font-size:14px;
      margin-bottom:18px;
    }
    .why-btn{
      background:#111;
      color:#fff;
      padding:10px 20px;
      border-radius:6px;
      display:inline-block;
      font-size:14px;
    }

    .testimonial-section{
      background:#f3f3f3;
      padding:80px 0 100px;
    }
    .testimonial-wrapper{
      padding:10px;
      max-width:1342px;
      margin:auto;
      position:relative;
      overflow: hidden;
    }
    .testimonial-banner{
      position:relative;
      height:749px;
      border-radius:10px;
      overflow:hidden;
    }
    .testimonial-banner img{
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .testimonial-banner::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.65));
    }
    .banner-text{
      position:absolute;
      right:60px;
      top:50%;
      transform:translateY(-50%);
      max-width:420px;
      color:#fff;
      z-index:2;
    }
    .banner-text h3{
      font-size:28px;
      font-weight:700;
      line-height:1.3;
      margin-bottom:12px;
    }
    .banner-text p{
      font-size:13px;
      line-height:1.6;
      opacity:.95;
    }
    .testimonial-cards{
      display:flex;
      flex-wrap:wrap;
      gap:28px;
      justify-content:center;
      margin-top:-80px;
      position:relative;
      z-index:5;
    }
    .testimonial-card{
      flex:1 1 calc(33.333% - 28px);
      max-width:423px;
      background:#fff;
      padding:22px;
      box-shadow:0 10px 22px rgba(0,0,0,0.08);
      border-radius:6px;
    }
    .testimonial-head{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:14px;
      position:relative;
    }
    .testimonial-head img{
      width:84px;
      height:84px;
      border-radius:50%;
      object-fit:cover;
    }
    .user-info h4{
      font-size:18px;
      margin:0;
      font-weight:600;
    }
    .stars{
      font-size:12px;
      color:#c69500;
    }
    .quote{
      position:absolute;
      right:0;
      font-size:75px;
      color:#111;
    }
    .testimonial-card p{
      font-size:12.8px;
      line-height:1.6;
      color:#555;
      margin-top:28px;
    }
    .testimonial-dots{
      margin-top:50px;
      display:flex;
      justify-content:center;
      gap:8px;
    }
    .testimonial-dots button{
      width:8px;
      height:8px;
      border-radius:50%;
      border:none;
      background:#d5d5d5;
    }
    .testimonial-dots .active{
      background:#111;
      width:17px;
      height:0px;
    }

    .faq-section{
      background:#efefef;
      padding:80px 40px 80px;
      display:flex;
      justify-content:center;
    }
    .faq-container{
      max-width:1300px;
      width:100%;
    }
    .faq-title{
      text-align:center;
      font-size:28px;
      font-weight:800;
      margin-bottom:60px;
      color:#222;
    }
    .accordion-item{
      background:#f7f7f7;
      border:none;
      margin-bottom:18px;
      border-radius:6px;
      overflow:hidden;
    }
    .accordion-button{
      background:#f7f7f7;
      font-weight:600;
      font-size:16px;
      color:#c69500;
      padding:24px 30px;
      box-shadow:none;
    }
    .accordion-button:not(.collapsed){
      background:#f7f7f7;
      color:#c69500;
    }
    .accordion-body{
      font-size:13px;
      color:#777;
      line-height:1.7;
      padding:0 30px 24px 30px;
    }
    .accordion-button::after{
      content:"+";
      background-image: none !important;
      font-size:26px;
      font-weight:700;
      background:none;
      transform:none;
    }
    .accordion-button:not(.collapsed)::after{
      content:"−";
    }
    .accordion-button:focus{
      box-shadow: none;
    }

    .newsletter-section{
      padding:80px 0;
      display:flex;
      justify-content:center;
      background:#f4f4f2;
    }
    .newsletter-container{
      max-width:1342px;
      width:82%;
      background:#c69500;
      border-radius:24px;
      padding:70px 40px;
      text-align:center;
      position:relative;
      overflow:hidden;
    }
    .newsletter-container::before{
      content:"";
      position:absolute;
      left:-120px;
      top:40px;
      width:400px;
      height:400px;
      border:3px solid rgba(255,255,255,0.12);
      border-radius:50%;
      transform:rotate(20deg);
    }
    .newsletter-container::after{
      content:"";
      position:absolute;
      right:-120px;
      bottom:-60px;
      max-width:420px;
      height:420px;
      border:3px solid rgba(255,255,255,0.12);
      border-radius:50%;
      transform:rotate(-20deg);
    }
    .newsletter-container h2{
      color:#fff;
      font-size:34px;
      font-weight:700;
      line-height:1.4;
      margin-bottom:36px;
    }
    .newsletter-input{
      display:flex;
      align-items:center;
      justify-content:center;
      max-width:520px;
      margin:auto;
      background:#fff;
      border-radius:999px;
      padding:6px;
      box-shadow:0 8px 18px rgba(0,0,0,0.1);
    }
    .newsletter-input input{
      flex:1;
      border:none;
      padding:14px 18px;
      border-radius:999px;
      font-size:14px;
      outline:none;
      color:#555;
    }
    .newsletter-btn{
      display:flex;
      align-items:center;
      gap:10px;
      background:#eee;
      border:none;
      padding:10px 18px;
      border-radius:999px;
      font-size:14px;
      font-weight:500;
      cursor:pointer;
    }
    .newsletter-btn .arrow{
      width:28px;
      height:28px;
      background:#111;
      color:#fff;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:14px;
    }

    .contact-footer-section{
      background:#070707;
      padding:80px 40px 60px;
      /* border-top-left-radius:120px; */
      color:#fff;
    }

     .contact-container{
      max-width:1200px;
      margin:auto;
    }
    .contact-grid{
      display:grid;
      grid-template-columns:420px 1fr;
      gap:80px;
      align-items:center;
      margin-bottom:80px;
    }
    .contact-image img{
      width:100%;
      border-radius:6px;
    }
    .contact-form h2{
      font-size:26px;
      font-weight:700;
      margin-bottom:10px;
    }
    .contact-form p{
      font-size:13px;
      color:#aaa;
      margin-bottom:30px;
      max-width:420px;
    }
    .form-field{
      margin-bottom:22px;
    }
    .form-field label{
      display:block;
      font-size:12px;
      margin-bottom:6px;
      color:#aaa;
    }
    .form-field input,
    .form-field textarea{
      width:100%;
      background:transparent;
      border:none;
      border-bottom:1px solid #444;
      color:#fff;
      padding:6px 0;
      font-size:14px;
    }
    .form-field textarea{
      height:50px;
      resize:none;
    }
    .send-btn{
      margin-top:20px;
      background:#fff;
      color:#000;
      border:none;
      padding:10px 16px;
      font-size:12px;
      font-weight:600;
      cursor:pointer;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr 1fr 1.5fr 1fr 1fr;
      gap:40px;
      margin-top:40px;
    }
    .footer-brand h3{
      font-size:20px;
      font-weight:700;
    }
    .footer-col h4{
      font-size:14px;
      margin-bottom:14px;
    }
    .footer-col a,
    .footer-col p{
      display:block;
      font-size:12px;
      color:#bbb;
      margin-bottom:8px;
      text-decoration:none;
    }
    .footer-bottom{
      margin-top:40px;
      padding-top:20px;
      border-top:1px solid #222;
      font-size:12px;
      text-align:center;
      color:#aaa;
    }
    .how-section{
      margin-top:300px;
      background:#f5f5f5;
    }

    .icon-circle{
      width:70px;
      height:70px;
      background:#C2910D;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:28px;
      color:white;
    }

    .process-btn{
      background:#f1f2ff;
      color:#5b5fc7;
      border-radius:8px;
      font-weight:500;
    }

    .process-line{
      position:absolute;
      top:40px;
      left:0;
      width:100%;
      height:120px;
      z-index:0;
      pointer-events:none;
    }
    .icon-circle{
      position:relative;
      z-index:2;
    }
    .bank-partners-section{
      background:#f4f4f2;
      padding:100px 0;
    }

    .bank-logos img{
      height:45px;
      object-fit:contain;
      opacity:.9;
      transition:.3s;
    }

    .bank-logos img:hover{
      opacity:1;
      transform:scale(1.05);
    }

    .logo-slider{
      overflow:hidden;
      width:100%;
      position:relative;
    }

    .logo-track{
      display:flex;
      gap:80px;
      width:max-content;
      animation:scroll 25s linear infinite;
      align-items:center;
    }

    .logo-track img{
      height:50px;
      object-fit:contain;
      opacity:.9;
      transition:.3s;
    }

    .logo-track img:hover{
      opacity:1;
      transform:scale(1.05);
    }

    @keyframes scroll{
      0%{ transform:translateX(0); }
      100%{ transform:translateX(-50%); }
    }


    @media (max-width:1024px){

.main-nav{
display:none;
}

.burger-menu{
display:flex;
}

.cta-btn{
height:46px;
font-size:14px;
padding:0 18px;
}

}

    /* ========== RESPONSIVE: ONLY MOBILE ========== */
    @media (max-width: 768px){
      /* Show burger, hide desktop nav */
      .burger-menu{
        display:flex;
      }
      .main-nav{
        display:none;
      }
      .header-actions .icon-btn:not(:last-child){
        display:none; /* hide globe and user on mobile, keep arrow? optional */
      }
      .header-actions .small-arrow{
        display:none;
      }
      .header-actions .cta-btn {
        height: 40px;
        padding: 0 14px;
        font-size: 10px;
        min-width: auto;
        align-items: center;
        justify-content: center;
        display: flex;
    }
      .site-header{
        /* height:70px; */
      }
      .header-inner{
        padding:0 16px;
      }
      .brand-mark{
        font-size:36px;
      }
      .brand-text{
        font-size:18px;
      }
      .brand-line{
        width:90px;
      }

      /* Hero */
      .hero{
        height:auto;
        min-height:auto;
        padding-bottom:40px;
        margin-bottom:-50px;
      }
      .hero-content{
        padding:20px 16px 0;
      }
      .hero h1{
        margin-top:0px;
        font-size:32px;
        line-height:1.2;
      }
      .hero-sub{
        font-size:16px;
      }
      .trust-rating{
        position: relative;
        bottom: -44px;
        flex-direction:column;
        gap:8px;
        margin-top: 50px;
        padding:10px 16px;
        font-size:14px;
                margin-bottom: 54px;
      }

      /* Calculator card */
      .calculator-card{
        width:100% !important;
        max-width:100% !important;
        margin-bottom:-242px;
        padding:20px;
        display:flex;
        flex-direction:column;
        gap:20px;
      }
      .form-row{
        grid-template-columns:1fr;
        gap:5px;
      }
      .bottom-row{
        grid-template-columns:1fr;
        gap:8px;
      }
      .toggle-group{
        /* flex-wrap:wrap; */
      }
      .toggle{
        min-width:90px;
        height:40px;
        font-size:13px;
      }
      .calculator-summary{
        padding:18px;
      }
      .calculator-summary h3{
        font-size:18px;
        text-align:center;
      }
      .summary-grid{
        grid-template-columns:1fr;
        text-align:center;
            display: flex;
    justify-content: center;
      }
      .summary-grid strong{
        font-size:18px;
      }
      .summary-btn.small{
        width:100%;
        height:40px;
        font-size:14px;
      }
      .summary-btn{
        height:44px;
        font-size:16px;
      }

      /* How it works grid */
      .how-grid{
        grid-template-columns:1fr;
      }

      /* Cashback */
      .cashback-box{
        grid-template-columns:1fr;
        padding:30px 20px;
      }

      /* Stats */
      .stats-grid{
        grid-template-columns:1fr;
      }

      /* Banks slider */
      .logo-track{
        gap:40px;
      }
      .logo-track img{
        height:40px;
      }

      /* Advantage grid */
      .adv-grid{
        grid-template-columns:1fr;
      }

      /* Insights */
      .insight-grid{
        grid-template-columns:1fr;
      }

      /* The Home Ownership Advantage */
      .advantage-grid{
        grid-template-columns:1fr;
      }

      /* Finance grid */
      .finance-grid{
        grid-template-columns:1fr;
      }
      .finance-card{
        height:auto;
      }
      .finance-card img{
        height:180px;
      }

      /* Testimonial */
      .testimonial-banner{
        height:400px;
      }
      .banner-text{
        right:20px;
        left:20px;
        top:auto;
        bottom:30px;
        transform:none;
        max-width:100%;
      }
      .testimonial-cards{
        margin-top:20px;
      }
      .testimonial-card{
        flex:1 1 100%;
        max-width:100%;
      }

      /* FAQ */
      .faq-section{
        padding:60px 20px;
      }
      .accordion-button{
        padding:18px 20px;
        font-size:15px;
      }
      .accordion-body{
        padding:0 20px 18px 20px;
      }

      /* Newsletter */
      .newsletter-container{
        width:92%;
        padding:40px 20px;
      }
      .newsletter-container h2{
        font-size:24px;
      }
      .newsletter-input{
        flex-direction:column;
        background:transparent;
        box-shadow:none;
        gap:10px;
      }
      .newsletter-input input{
        width:100%;
        background:#fff;
        border-radius:999px;
        padding:12px 16px;
      }
      .newsletter-btn{
        width:100%;
        justify-content:center;
      }

      /* Contact + footer */
      .contact-footer-section{
        padding:80px 20px 40px;
        border-top-left-radius:60px;
      }
      .contact-grid{
        grid-template-columns:1fr;
        gap:40px;
      }
      .contact-image img{
        max-width:100%;
        height: 403px;
      }
      .footer-grid{
        grid-template-columns:1fr;
        /* text-align:center; */
        gap:30px;
      }
    }

    /* Extra small devices */
    @media (max-width:480px){
      .hero h1{
        font-size:28px;
      }
      .hero-sub{
        font-size:15px;
      }
      .trust-rating{
        font-size:13px;
      }
      .calculator-card{
        padding:16px;
      }
      .input, .loan-input{
        height:42px;
        font-size:14px;
      }
      .toggle{
        min-width:80px;
        font-size:12px;
      }
    }
    .adv-card{
  background:#e9e9e9;
  padding:30px 24px;
  border-radius:14px;
  text-align:center;
  transition:all .3s ease;
  cursor:pointer;
}

.adv-card:hover{
  background:#c99600;
  color:#fff;
  transform:translateY(-6px);
  box-shadow:0 12px 24px rgba(0,0,0,0.15);
}

.adv-card:hover .adv-number{
  background:#fff;
  color:#c99600;
}
h1{
    font-size: 55px !important;
    font-weight: 800 !important;
}

h2{
    font-size: 31px !important;
    font-weight: 750 !important;

}

h3{
    font-size: 26px !important;
    font-weight: 700 !important;

}
h4{
    font-size: 21px !important;
    font-weight: 800 !important;

}
h5{
    font-size: 26px !important;
    font-weight: 800 !important;

}
h6{
    font-size: 12px !important;
    font-weight: 800 !important;

}
.footer-col a{
    font-size: 16px;
}
.footer-col p{
    font-size: 16px;

}

a{
    cursor: pointer;
    text-decoration: none;
}

@media (max-width:768px){
  h1{
    font-size: 45px !important;
    font-weight: 800 !important;
}

h2{
    font-size: 20px !important;
    font-weight: 800 !important;

}

h3{
    font-size: 15px !important;
    font-weight: 800 !important;

}
h4{
    font-size: 13px !important;
    font-weight: 800 !important;

}
h5{
    font-size: 11 !important;
    font-weight: 800 !important;

}
h6{
    font-size: 9px !important;
    font-weight: 800 !important;

}
}

.carousel-inner{
  overflow: visible !important;
}


@media (max-width: 768px) {
  /* … existing mobile styles … */

  /* Bank logo slider fixes */
  .logo-track {
    gap: 30px;               /* reduce gap on mobile */
    animation: scroll-mobile 20s linear infinite; /* separate animation if needed */
  }

  /* Optional: more duplicates for smoother loop */
  /* If you only have 6 logos, consider adding more copies in HTML */
  /* For now, we adjust the keyframes to use pixel-based translation */

  @keyframes scroll-mobile {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-100% / 2)); } /* fallback */
  }

  /* Ensure the track is wide enough – if the total width of 12 logos + gaps is still small,
     you can force a minimum width or add more logo copies in your HTML */
  .logo-track {
    min-width: 200%;          /* guarantee twice the container */
  }

  /* Make sure the container hides overflow */
  .logo-slider {
    overflow: hidden !important;
    width: 100%;
  }
}