:root{
  --primary:#41c365;          /* main green (logo) */
  --primary-dark:#0a3c17;     /* darker green */

  --secondary:#f0fff5;        /* light green bg */

  --bg:#f7fffa;               /* soft green background */

  --text:#0f172a;
  --muted:#5b6475;

  --white:#ffffff;

  --border:#c8f2d5;           /* light green border */

  --success:#16a34a;

  --dark:#04120a;             /* deep green dark */

  --navy:#0a1f14;             /* dark green (replace blue) */
  --navy-soft:#123524;        /* soft dark green */

  --shadow:0 14px 40px rgba(10, 23, 20, 0.08);

  --radius:24px;
  --radius-sm:16px;

  --container:1200px;
}

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

    html{
      scroll-behavior:smooth;
    }

    body{
      background:linear-gradient(180deg,#f9ffff 0%, #f4fbfb 100%);
      color:var(--text);
      line-height:1.6;
    }
body {
  font-family: 'Open Sans', sans-serif;
}

h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
}

    a{
      text-decoration:none;
      color:inherit;
    }

    img{
      max-width:100%;
      display:block;
    }

    .container{
      width:min(var(--container), 92%);
      margin:0 auto;
    }

    .section{
      padding: 52px 0;
    }

    .section-title{
      font-size:clamp(30px,4vw,46px);
      line-height:1.15;
      text-align:center;
      margin-bottom:14px;
    }

    .section-subtitle{
      max-width:760px;
      margin:0 auto 33px;
      text-align:center;
      color:var(--muted);
      font-size:15px;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:14px 24px;
      border-radius:15px;
      font-size:15px;
      font-weight:700;
      border:none;
      cursor:pointer;
      transition:.25s ease;
    }

    .btn-primary{
      background:linear-gradient(135deg,var(--primary),var(--primary-dark));
      color:#fff;
      box-shadow:0 12px 28px rgba(15,118,110,.22);
    }

    .btn-primary:hover{
      transform:translateY(-2px);
    }

    .btn-outline{
      background:#fff;
      border:1px solid var(--border);
      color:var(--text);
    }

    .btn-outline:hover{
      border-color:var(--primary);
      color:var(--primary);
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 16px;
      border-radius:999px;
         background: #41c36529;
      color:var(--primary);
      border:1px solid var(--border);
      font-size:13px;
      font-weight:700;
    }

    .dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--success);
      box-shadow:0 0 0 5px rgba(22,163,74,.12);
    }

    /* HEADER */
    header{
      position:sticky;
      top:0;
      z-index:1000;
      background:rgba(255,255,255,.92);
      backdrop-filter:blur(16px);
      border-bottom:1px solid rgba(199,240,238,.85);
    }

    .navbar{
      height:78px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
    }

    .logo{
      display:flex;
      align-items:center;
      gap:12px;
      font-size:24px;
      font-weight:800;
      color:var(--dark);
    }

    .logo-icon{
      width:44px;
      height:44px;
      border-radius:14px;
      background:linear-gradient(135deg,var(--primary),#169b91);
      display:grid;
      place-items:center;
      color:#fff;
      font-size:18px;
      box-shadow:0 12px 24px rgba(15,118,110,.22);
    }

    .desktop-nav{
      display:flex;
      align-items:center;
      gap:28px;
    }

    .desktop-nav a{
      font-size:15px;
      font-weight:600;
      color:var(--muted);
      transition:.2s ease;
    }

    .desktop-nav a:hover{
      color:var(--primary);
    }

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

    .menu-btn{
      display:none;
      width:44px;
      height:44px;
      border-radius:12px;
      border:1px solid var(--border);
      background:#fff;
      font-size:18px;
      cursor:pointer;
    }

    .mobile-menu{
      display:none;
      position:absolute;
      top:79px;
      left:0;
      width:100%;
      background:#fff;
      border-bottom:1px solid var(--border);
      padding:16px 4%;
      box-shadow:0 12px 28px rgba(15,23,42,.06);
    }

    .mobile-menu.active{
      display:block;
    }

    .mobile-menu a{
      display:block;
      padding:12px 0;
      font-weight:600;
      color:var(--muted);
      border-bottom:1px solid #eef7f6;
    }

    /* HERO */
    .hero{
      padding:58px 0 60px;
      overflow:hidden;
    }

    .hero-wrap{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:40px;
      align-items:center;
    }

    .hero-content h1{
      font-size:clamp(38px,5vw,48px);
      line-height:1.05;
      margin:18px 0;
    }

    .hero-content p{
      font-size:16px;
      color:var(--muted);
      max-width:620px;
      margin-bottom:26px;
    }

    .hero-points{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px;
      margin:26px 0 30px;
    }

    .hero-point{
      background:#fff;
      border:1px solid var(--border);
      border-radius:18px;
      padding:10px 16px;
      font-size:14px;
      font-weight:700;
      box-shadow:var(--shadow);
    }

    .hero-actions{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
    }

    .hero-visual{
      display:flex;
      justify-content:center;
      position:relative;
    }

    .shape{
      position:absolute;
      border-radius:50%;
      z-index:1;
    }

    .shape.one{
      width:180px;
      height:180px;
      background:rgba(15,118,110,.12);
      top:10px;
      right:30px;
      filter:blur(2px);
    }

    .shape.two{
      width:130px;
      height:130px;
      background:rgba(17,34,64,.08);
      left:10px;
      bottom:20px;
      filter:blur(2px);
    }

    .phone-shell{
      width:360px;
      max-width:100%;
      background:linear-gradient(180deg,#1a2f55 0%, #0b1324 100%);
      border-radius:34px;
      padding:14px;
      box-shadow:0 30px 80px rgba(11,19,36,.24);
      position:relative;
      z-index:2;
    }

    .phone-screen{
      background:linear-gradient(180deg,#f6fffe 0%,#ffffff 100%);
      border-radius:26px;
      min-height:640px;
      padding:18px;
      overflow:hidden;
    }

    .phone-top{
      display:flex;
      justify-content:space-between;
      align-items:center;
      font-size:12px;
      font-weight:700;
      margin-bottom:16px;
    }

    .phone-card-main{
      background:linear-gradient(135deg,var(--primary),#169b91);
      color:#fff;
      border-radius:24px;
      padding:22px;
      box-shadow:0 18px 36px rgba(15,118,110,.24);
      margin-bottom:16px;
    }

    .phone-card-main small{
      display:block;
      opacity:.85;
      margin-bottom:8px;
      font-weight:600;
    }

    .phone-card-main h3{
      font-size:30px;
      margin-bottom:6px;
    }

    .phone-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
      margin-bottom:14px;
    }

    .mini-card{
      background:#fff;
      border:1px solid var(--border);
      border-radius:18px;
      padding:16px;
      box-shadow:0 8px 24px rgba(15,23,42,.05);
    }

    .mini-card span{
      display:block;
      color:var(--muted);
      font-size:12px;
      margin-bottom:6px;
      font-weight:600;
    }

    .mini-card strong{
      font-size:18px;
    }

    .status-card{
      background:#fff;
      border:1px solid var(--border);
      border-radius:18px;
      padding:15px;
      box-shadow:0 8px 24px rgba(15,23,42,.05);
      margin-bottom:12px;
    }

    .status-card span{
      display:block;
      color:var(--muted);
      font-size:12px;
      margin-bottom:6px;
    }

    .status-card strong{
      display:block;
      margin-bottom:10px;
      font-size:15px;
    }

    .status-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      background:#ecfff5;
      color:#0e9f5c;
      border-radius:999px;
      padding:7px 12px;
      font-size:12px;
      font-weight:700;
    }

    /* COMMON CARDS */
    .grid{
      display:grid;
      gap:24px;
    }

    .card{
      background:#fff;
      border:1px solid var(--border);
      border-radius:24px;
      padding:26px;
      box-shadow:var(--shadow);
      transition:.25s ease;
    }

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

    .icon-box{
      width:60px;
      height:60px;
      border-radius:18px;
      background:linear-gradient(135deg,#e8fbfa,#ffffff);
      border:1px solid var(--border);
      display:grid;
      place-items:center;
      font-size:26px;
      color:var(--primary);
      margin-bottom:18px;
      margin: 0 auto 18px;
    }

    .card h3{
      font-size:20px;
      margin-bottom:10px;
    }

    .card p{
      font-size:14px;
      color:var(--muted);
    }

    /* SERVICES */
    .services-grid{
      text-align:center;
      grid-template-columns:repeat(4,1fr);
    }

    /* PROCESS */
    .process-grid{
      grid-template-columns:repeat(4,1fr);
    }

    

   
    /* BENEFITS */
    .benefits-wrap{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:30px;
      align-items:center;
    }

    .benefits-left .section-title,
    .benefits-left .section-subtitle{
      text-align:left;
      margin-left:0;
      margin-right:0;
    }

    .benefit-list{
      display:grid;
      gap:16px;
    }

    .benefit-item{
      background:#fff;
      border:1px solid var(--border);
      border-radius:18px;
      padding:16px;
      display:flex;
      gap:14px;
      align-items:flex-start;
      box-shadow:var(--shadow);
    }

    .benefit-check{
      width:38px;
      height:38px;
      min-width:38px;
      border-radius:12px;
      background:#e4fbeb;
      color:var(--primary);
      display:grid;
      place-items:center;
      font-weight:800;
    }

    .benefit-item h4{
      font-size:16px;
      margin-bottom:4px;
    }

    .benefit-item p{
      color:var(--muted);
      font-size:14px;
    }

    .benefits-stat{
          background: linear-gradient(135deg, #244c2f, #0e451c);
      color:#fff;
      border-radius:28px;
      padding:34px;
      box-shadow:0 20px 60px rgba(11,19,36,.16);
    }

    .benefits-stat h3{
      font-size:34px;
      line-height:1.15;
      margin-bottom:12px;
    }

    .benefits-stat p{
      color:rgba(255,255,255,.82);
      font-size:15px;
      margin-bottom:24px;
    }

    .stat-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:16px;
    }

    .stat-box{
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      border-radius:18px;
      padding:18px;
    }

    .stat-box strong{
      display:block;
      font-size:24px;
      margin-bottom:4px;
    }

    .stat-box span{
      font-size:13px;
      color:rgba(255,255,255,.78);
    }

    /* CTA BANNER */
    .cta-banner{
        background: linear-gradient(135deg, #41c365, #0e461d);
      color:#fff;
      border-radius:30px;
      padding:34px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      box-shadow:0 18px 50px rgba(11,19,36,.12);
    }

    .cta-banner h3{
      font-size:32px;
      line-height:1.2;
      margin-bottom:8px;
    }

    .cta-banner p{
      color:rgba(255,255,255,.86);
      font-size:15px;
      max-width:700px;
    }

    .cta-banner .btn-outline{
      background:#fff;
      color:var(--dark);
      border:none;
    }

    /* CALCULATOR */
    .calc-wrap{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:28px;
    }

    .calc-card,
    .result-card{
      background:#fff;
      border:1px solid var(--border);
      border-radius:26px;
      padding:30px;
      box-shadow:var(--shadow);
    }

    .calc-card h3,
    .result-card h3{
      font-size:28px;
      margin-bottom:8px;
    }

    .calc-card p,
    .result-card p{
      font-size:14px;
      color:var(--muted);
      margin-bottom:20px;
    }

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

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

    .form-control{
      width:100%;
      height:54px;
      border-radius:15px;
      border:1px solid var(--border);
      background:#fff;
      padding:0 16px;
      font-family:inherit;
      font-size:15px;
      outline:none;
    }

    .form-control:focus{
      border-color:var(--primary);
      box-shadow:0 0 0 4px rgba(15,118,110,.08);
    }

    input[type="range"].form-control{
      padding:0;
    }

    .range-value{
      margin-top:10px;
      font-size:14px;
      color:var(--primary);
      font-weight:700;
    }

    .result-highlight{
      background: linear-gradient(135deg, #e2f8e8, #ffffff);
      border:1px solid var(--border);
      border-radius:22px;
      padding:24px;
      margin-bottom:18px;
    }

    .result-highlight span{
      display:block;
      color:var(--muted);
      font-size:13px;
      margin-bottom:8px;
      font-weight:600;
    }

    .big-amount{
      font-size:42px;
      line-height:1.1;
      color:var(--primary);
      font-weight:800;
      margin-bottom:10px;
    }

    .result-list{
      display:grid;
      gap:12px;
    }

    .result-row{
      display:flex;
      justify-content:space-between;
      gap:12px;
      padding:12px 0;
      border-bottom:1px dashed #d8f2f1;
      font-size:14px;
    }

    /* TESTIMONIALS */
    .testimonial-grid{
      grid-template-columns:repeat(3,1fr);
    }

    .stars{
      font-size:18px;
      color:#ffb400;
      margin-bottom:12px;
    }

    .testimonial p{
      font-size:14px;
      color:var(--muted);
      margin-bottom:18px;
    }

    .user{
      display:flex;
      align-items:center;
      gap:12px;
    }

    .avatar{
      width:48px;
      height:48px;
      border-radius:50%;
      display:grid;
      place-items:center;
      font-weight:800;
      color:#fff;
      background:linear-gradient(135deg,var(--primary),#169b91);
    }

    .user small{
      display:block;
      color:var(--muted);
      font-size:12px;
    }

    /* FAQ */
    .faq-wrap{
      max-width:900px;
      margin:0 auto;
      display:grid;
      gap:16px;
    }

    .faq-item{
      background:#fff;
      border:1px solid var(--border);
      border-radius:20px;
      box-shadow:var(--shadow);
      overflow:hidden;
    }

    .faq-question{
      width:100%;
      text-align:left;
      background:#fff;
      border:none;
      padding:20px 39px;
      font-size:16px;
      font-weight:700;
      color:var(--text);
      cursor:pointer;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:20px;
    }

    .faq-answer{
      display:none;
      padding:0 39px 20px;
      color:var(--muted);
      font-size:14px;
    }

    .faq-item.active .faq-answer{
      display:block;
    }

    /* CONTACT */
    .contact-wrap{
      display:grid;
      grid-template-columns:.95fr 1.05fr;
      gap:28px;
    }

    .contact-info{
        background: linear-gradient(135deg, #244c2f, #0e451c);
      color:#fff;
      border-radius:28px;
      padding:32px;
      box-shadow:0 20px 60px rgba(11,19,36,.14);
    }

    .contact-info h3{
      font-size:32px;
      margin-bottom:10px;
    }

    .contact-info p{
      color:rgba(255,255,255,.82);
      font-size:14px;
      margin-bottom:22px;
    }

    .info-list{
      display:grid;
      gap:14px;
    }

    .info-item{
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      border-radius:18px;
      padding:16px;
    }

    .info-item strong{
      display:block;
      margin-bottom:5px;
      font-size:15px;
    }

    .info-item span{
      color:rgba(255,255,255,.78);
      font-size:14px;
    }

    .contact-form{
      background:#fff;
      border:1px solid var(--border);
      border-radius:28px;
      padding:32px;
      box-shadow:var(--shadow);
    }

    .contact-form h3{
      font-size:32px;
      margin-bottom:8px;
    }

    .contact-form p{
      color:var(--muted);
      font-size:14px;
      margin-bottom:22px;
    }

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

    textarea.form-control{
      min-height:120px;
      padding:14px 16px;
      resize:vertical;
    }

    /* FOOTER */
    footer{
      background:#0e451c;
      color:#fff;
      margin-top:40px;
          padding: 51px 0px;
    }

    .footer-wrap{
      display:grid;
      grid-template-columns:1.1fr .9fr .9fr 1fr;
      gap:30px;
      padding:65px 0 28px;
    }

    .footer-brand p{
      color:rgba(255,255,255,.72);
      font-size:14px;
      margin-top:14px;
      max-width:340px;
    }

    .footer-col h4{
      font-size:18px;
      margin-bottom:16px;
    }

    .footer-col ul{
      list-style:none;
      display:grid;
      gap:10px;
    }

    .footer-col a,
    .footer-col li{
      font-size:14px;
      color:rgba(255,255,255,.72);
    }

    .footer-col a:hover{
      color:#fff;
    }
    
    .footer-col{
            padding-bottom: 20px;
    }

    .footer-bottom{
      border-top:1px solid rgba(255,255,255,.08);
      padding:18px 0 18px;
      display:flex;
      justify-content:space-between;
      gap:20px;
      flex-wrap:wrap;
      color:rgba(255,255,255,.64);
      font-size:13px;
    }

    /* MOBILE APP NAV */
    .mobile-app-nav{
      display:none;
      position:fixed;
      left:50%;
      bottom:12px;
      transform:translateX(-50%);
      width:min(460px, calc(100% - 14px));
      z-index:1000;
      background:rgba(255,255,255,.96);
      border:1px solid rgba(199,240,238,.95);
      backdrop-filter:blur(16px);
      border-radius:26px;
      padding:10px 12px;
      box-shadow:0 16px 40px rgba(11,19,36,.14);
    }

    .mobile-app-nav ul{
      list-style:none;
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:6px;
    }

    .mobile-app-nav a{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:6px;
      min-height:58px;
      border-radius:16px;
      color:#7d8498;
      font-size:11px;
      font-weight:700;
      transition:.2s ease;
    }

    .mobile-app-nav .nav-icon{
      width:34px;
      height:34px;
      border-radius:12px;
      display:grid;
      place-items:center;
      font-size:18px;
    }

    .mobile-app-nav a.active,
    .mobile-app-nav a:hover{
      color:var(--primary);
      background:#f0fffe;
    }

    .mobile-app-nav a.active .nav-icon,
    .mobile-app-nav a:hover .nav-icon{
      background:#e6fbfa;
    }

    /* RESPONSIVE */
    @media (max-width:1100px){
      .services-grid{
        grid-template-columns:repeat(2,1fr);
      }

      .process-grid{
        grid-template-columns:repeat(2,1fr);
      }

      .testimonial-grid{
        grid-template-columns:repeat(2,1fr);
      }

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

    @media (max-width:900px){
      .desktop-nav,
      .header-actions .btn-outline,
      .header-actions .btn-primary{
        display:none;
      }

      .menu-btn{
        display:inline-grid;
        place-items:center;
      }

      .hero-wrap,
      .benefits-wrap,
      .calc-wrap,
      .contact-wrap{
        grid-template-columns:1fr;
      }

      .hero{
        padding-top:42px;
      }

      .hero-content{
        text-align:center;
      }

      .hero-content p{
        margin-left:auto;
        margin-right:auto;
      }

      .hero-actions{
        justify-content:center;
      }

      .benefits-left .section-title,
      .benefits-left .section-subtitle{
        text-align:center;
      }

      .cta-banner{
        flex-direction:column;
        text-align:center;
        align-items:flex-start;
      }
    }

    @media (max-width:640px){
      body{
        padding-bottom:92px;
      }

      .section{
        padding:58px 0;
      }

      .hero-points,
      .services-grid,
      .process-grid,
      .testimonial-grid,
      .form-grid,
      .stat-grid,
      .footer-wrap{
        grid-template-columns:1fr;
      }

      .hero-content h1{
        font-size:38px;
      }

      .card,
      .calc-card,
      .result-card,
      .contact-form,
      .contact-info,
      .benefits-stat,
      .cta-banner{
        padding:24px;
      }

      .phone-shell{
        width:100%;
        max-width:355px;
      }

      .mobile-app-nav{
        display:block;
      }

      .footer-bottom{
        padding-bottom:95px;
      }
    }

.how-work-section{
  background: linear-gradient(180deg, var(--navy) 0%, #0e451c 100%);
  position: relative;
  overflow: hidden;
   margin: 0 auto 48px;
}

.how-work-heading{
  max-width: 900px;
  margin: 0 auto 48px;
}

.how-work-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 16px;
}

.how-work-section .section-title{
  color: #fff;
  margin-bottom: 14px;
}

.how-work-subtitle{
  color: rgba(255,255,255,.72);
  margin-bottom: 0;
}

.how-work-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: stretch;
}

.how-work-card{
  position: relative;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  padding: 28px 22px;
  min-height: 270px;
  backdrop-filter: blur(8px);
  transition: .3s ease;
}

.how-work-card:hover{
  transform: translateY(-7px);
  background: rgba(255,255,255,.11);
}

.how-work-icon{
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
 background: linear-gradient(135deg, #308e4a, var(--primary));
  color: #fff;
  font-size: 22px;
  margin-bottom: 18px;
  box-shadow: 0 12px 28px rgba(32,216,195,.18);
}

.how-work-card h4{
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 12px;
  line-height: 1.35;
}

.how-work-card p{
  color: rgba(255,255,255,.75);
  margin: 0;
  line-height: 1.75;
  font-size: .92rem;
  max-width: 240px;
}

.process-arrow{
  position: absolute;
  top: 50%;
  right: -16px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #349a51, var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 10px 22px rgba(32,216,195,.18);
  z-index: 2;
}

.how-work-card:last-child .process-arrow{
  display: none;
}

@media (max-width: 1100px){
  .how-work-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  .how-work-card:nth-child(2) .process-arrow{
    display: none;
  }
}

@media (max-width: 640px){
  .how-work-grid{
    grid-template-columns: 1fr;
  }

  .how-work-card{
    min-height: auto;
  }

  .process-arrow{
    display: none;
  }
}

.hero-visual{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 46px;
  min-height: 620px;
  width: 100%;
  overflow: visible;
}

.hero-visual-bg{
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  z-index: 0;
  pointer-events: none;
}

.glow-one{
  width: 220px;
  height: 220px;
  background: rgba(15,118,110,.10);
  top: 40px;
  right: 60px;
  animation: floatGlowOne 6s ease-in-out infinite;
}

.glow-two{
  width: 150px;
  height: 150px;
  background: rgba(17,34,64,.08);
  bottom: 80px;
  left: 40px;
  animation: floatGlowTwo 7s ease-in-out infinite;
}

.hero-image-wrap{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: imageFloat 5s ease-in-out infinite;
}

.hero-main-image{
  width: 580px;
  max-width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 28px 40px rgba(17,34,64,.14));
  animation: imageEntry 1s ease;
}

/* Transfer Strip */
.transfer-strip{
  position: relative;
  z-index: 3;
  width: min(92%, 620px);
  display: grid;
  grid-template-columns: 64px 1fr auto 1fr 64px;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-radius: 28px;
  background: linear-gradient(135deg, #244c2f 0%, #0e451c 100%);
  border: 1px solid rgba(32,216,195,.16);
  box-shadow: 0 20px 44px rgba(11,19,36,.22);
  overflow: hidden;
  animation: stripFloat 5.5s ease-in-out infinite;
}

.transfer-strip::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.05) 45%, transparent 75%);
  transform: translateX(-120%);
  animation: stripShine 4.2s linear infinite;
}

.transfer-icon{
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  position: relative;
  z-index: 2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.transfer-icon-left{
      background: linear-gradient(135deg, rgb(49 91 60), rgba(15, 118, 110, .35));
}

.transfer-icon-right{
  background: linear-gradient(135deg, rgba(22,163,74,.20), rgba(15,118,110,.35));
}

.transfer-line{
  position: relative;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(65 195 101 / 44%), #41c365, rgb(68 196 103 / 52%));
  z-index: 2;
}

.transfer-line::after{
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 10px solid #41c365;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.line-dot{
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #41c365;
  box-shadow: 0 0 0 8px rgba(32,216,195,.12);
  transform: translate(-50%, -50%);
}

.dot-left{
  animation: moveDot 2.2s linear infinite;
}

.dot-right{
  animation: moveDot 2.2s linear infinite .5s;
}

.transfer-center{
  position: relative;
  z-index: 2;
  text-align: center;
  min-width: 180px;
}

.transfer-center h4{
  margin: 0 0 4px;
  color: #41c365;
  font-size: clamp(28px, 3vw, 30px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.5px;
  animation: amountPulse 2.2s ease-in-out infinite;
}

.transfer-center p{
  margin: 0;
  color: rgba(255,255,255,.74);
  font-size: 15px;
  font-weight: 500;
}

/* Animations */
@keyframes imageEntry{
  0%{
    opacity: 0;
    transform: translateY(24px) scale(.96);
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes imageFloat{
  0%,100%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-12px);
  }
}

@keyframes stripFloat{
  0%,100%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-6px);
  }
}

@keyframes stripShine{
  0%{
    transform: translateX(-120%);
  }
  100%{
    transform: translateX(130%);
  }
}

@keyframes moveDot{
  0%{
    left: 8%;
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  50%{
    left: 50%;
    opacity: 1;
  }
  100%{
    left: 95%;
    opacity: 0;
  }
}

@keyframes amountPulse{
  0%,100%{
    transform: scale(1);
    text-shadow: 0 0 0 rgba(25,226,158,0);
  }
  50%{
    transform: scale(1.03);
    text-shadow: 0 0 18px rgba(25,226,158,.18);
  }
}

@keyframes floatGlowOne{
  0%,100%{
    transform: translateY(0) translateX(0);
  }
  50%{
    transform: translateY(-14px) translateX(8px);
  }
}

@keyframes floatGlowTwo{
  0%,100%{
    transform: translateY(0) translateX(0);
  }
  50%{
    transform: translateY(10px) translateX(-8px);
  }
}

/* Responsive */
@media (max-width: 900px){
  .hero-visual{
    min-height: auto;
    gap: 26px;
    margin-top: 20px;
  }

  .hero-main-image{
    width: 500px;
  }

  .transfer-strip{
    width: 100%;
    grid-template-columns: 52px 1fr auto 1fr 52px;
    padding: 18px 16px;
    gap: 12px;
    border-radius: 24px;
  }

  .transfer-icon{
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 22px;
  }

  .transfer-center{
    min-width: 140px;
  }

  .transfer-center h4{
    font-size: 30px;
  }

  .transfer-center p{
    font-size: 13px;
  }
}

@media (max-width: 640px){
  .hero-visual{
    gap: 18px;
  }

  .hero-main-image{
    width: 100%;
    max-width: 420px;
  }

  .transfer-strip{
    grid-template-columns: 44px 1fr auto 1fr 44px;
    gap: 8px;
    padding: 14px 10px;
    border-radius: 20px;
  }

  .transfer-icon{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 18px;
  }

  .transfer-center{
    min-width: auto;
  }

  .transfer-center h4{
    font-size: 22px;
  }

  .transfer-center p{
    font-size: 11px;
  }

  .transfer-line::after{
    border-left: 8px solid #20d8c3;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
  }

  .glow-one{
    width: 120px;
    height: 120px;
    top: 20px;
    right: 10px;
  }

  .glow-two{
    width: 90px;
    height: 90px;
    left: 0;
    bottom: 30px;
  }
}
.hero-point {
  font-size: 16px;
  margin: 10px 0;
  display: flex;
  align-items: center;
}

.hero-point i {
  color: #41c365;
  margin-right: 10px;
  font-size: 18px;
}
.how-work-heading {
  text-align: center;
}
.user img {
    max-width: 100%;
    display: block;
    border-radius: 75px;
    height: 50px;
}
.special-btn {
  background: linear-gradient(45deg, #0d802d, #126028);
  color: #fff;
  padding: 14px 35px;
  border-radius: 40px;
  font-size: 18px;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  display: inline-block;
  transition: 0.3s ease;
}



/* Shine Ray */
.special-btn::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: rgba(255, 255, 255, 0.4);
  transform: rotate(25deg);
  animation: shineMove 3s infinite;
}

/* Hover */
.special-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px #19e29e, 0 0 40px #19e29e;
}

/* Animations */
@keyframes glowPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes shineMove {
  0% { left: -75%; }
  100% { left: 125%; }
}

.logo img {
    height: 45px;        /* logo ki height control */
    width: auto;         /* aspect ratio maintain */
    display: block;
    object-fit: contain;
}
.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 50px;
    width: auto;
}

@media (max-width: 768px) {
    .logo img {
        height: 35px;
    }
}


.about-page{
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  position: relative;
}

.about-page *{
  box-sizing: border-box;
}

.about-page .container{
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
}

.about-page img{
  max-width: 100%;
  display: block;
}

.about-page a{
  text-decoration: none;
}

.about-page h1,
.about-page h2,
.about-page h3{
  margin: 0 0 14px;
  line-height: 1.15;
  color: var(--text);
      font-size: 46px;
}

.about-page p{
  margin: 0;
  color: var(--muted);li
  font-size: 16px;
}

.about-page .section-tag{
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-dark);
  background: linear-gradient(180deg, #f9fff9 0%, #f0fff5 100%);
  border: 1px solid var(--border);
  padding: 9px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
  box-shadow: 0 8px 20px rgba(65,195,101,0.08);
}

.about-page .section-tag.light-tag{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.25);
  color: var(--white);
}

.about-page .section-head{
  max-width: 860px;
  margin-bottom: 43px;
}

.about-page .section-head.center{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.about-page .section-head h2{
  font-size: clamp(30px, 4vw, 48px);
  margin-bottom: 16px;
}

.about-page .about-section{
  padding: 60px 0;
  position: relative;
}

.about-page .alt-bg{
}

/* reveal */
.about-page .reveal{
  animation: fadeUp 1s ease both;
}

@keyframes fadeUp{
  from{
    opacity: 0;
    transform: translateY(35px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* buttons */
.about-page .theme-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 26px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
}

.about-page .theme-btn::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.22), transparent 80%);
  transform: translateX(-120%);
  transition: transform .7s ease;
}

.about-page .theme-btn:hover::before{
  transform: translateX(120%);
}

.about-page .primary-btn{
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  box-shadow: 0 18px 35px rgba(65,195,101,0.24);
}

.about-page .primary-btn:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 24px 45px rgba(65,195,101,0.28);
}

.about-page .outline-btn{
  border: 1px solid var(--border);
  color: var(--primary-dark);
  background: var(--white);
  box-shadow: 0 10px 28px rgba(10,23,20,0.05);
}

.about-page .outline-btn:hover{
  background: var(--secondary);
  transform: translateY(-4px);
  border-color: var(--primary);
}

.about-page .white-btn{
  background: var(--white);
  color: var(--primary-dark);
  box-shadow: 0 14px 34px rgba(0,0,0,0.12);
}

.about-page .white-btn:hover{
  transform: translateY(-4px) scale(1.02);
}

/* hero */
.about-page .about-hero{
  position: relative;
  padding: 40px 0 49px;
 
}

.about-page .about-hero-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 52px;
  align-items: center;
}

.about-page .about-tag{
  display: inline-block;
  background: linear-gradient(180deg, #f9fff9 0%, #f0fff5 100%);
  border: 1px solid var(--border);
  color: var(--primary-dark);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
  animation: pulseTag 2.6s infinite;
}

@keyframes pulseTag{
  0%,100%{ box-shadow: 0 0 0 0 rgba(65,195,101,0.12);}
  50%{ box-shadow: 0 0 0 14px rgba(65,195,101,0);}
}

.about-page .about-hero-content h1{
  font-size: clamp(38px, 5vw, 44px);
  margin-bottom: 18px;
  max-width: 720px;
}

.about-page .about-hero-content p{
  font-size: 17px;
  max-width: 660px;
}

.about-page .about-hero-content p + p{
  margin-top: 14px;
}

.about-page .about-hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.about-page .hero-mini-points{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 34px;
}

.about-page .mini-point{
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px;
  box-shadow: var(--shadow);
  transition: all .35s ease;
}

.about-page .mini-point:hover{
  transform: translateY(-6px);
  border-color: var(--primary);
}

.about-page .mini-point strong{
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  color: var(--text);
}

.about-page .mini-point span{
  display: block;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

.about-page .about-hero-image-wrap{
  position: relative;
  min-height: 590px;
}

.about-page .hero-glow{
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
        background: radial-gradient(circle, rgb(69 131 123 / 20%) 0%, rgba(65, 195, 101, 0) 70%);
  top: -20px;
  right: 40px;
  animation: floatGlow 5s ease-in-out infinite;
}

@keyframes floatGlow{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(18px); }
}

.about-page .about-hero-image-card{
  position: relative;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  z-index: 2;
  transform: perspective(1000px) rotateY(-4deg);
  transition: transform .5s ease;
}

.about-page .about-hero-image-card:hover{
  transform: perspective(1000px) rotateY(0deg) translateY(-6px);
}

.about-page .about-hero-image-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 590px;
}

.about-page .floating-badge,
.about-page .floating-card{
  position: absolute;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 3;
}

.about-page .floating-badge{
  border-radius: 999px;
  padding: 12px 18px;
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 14px;
  animation: floatBadge 4s ease-in-out infinite;
}

.about-page .badge-one{
  left: -16px;
  top: 40px;
}

.about-page .badge-two{
      right: -11px;
    bottom: 62px;
  animation-delay: .7s;
}

.about-page .floating-card{
  left: -10px;
  bottom: 130px;
  padding: 18px 20px;
  border-radius: 18px;
  min-width: 200px;
  animation: floatBadge 4.5s ease-in-out infinite;
}

.about-page .floating-card span{
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 4px;
}

.about-page .floating-card strong{
  color: var(--text);
  font-size: 16px;
}

@keyframes floatBadge{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* story */
.about-page .about-story-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.about-page .story-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, #fbfffc 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 21px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: all .35s ease;
      text-align: center;
}

.about-page .story-card:hover{
  transform: translateY(-8px);
  border-color: var(--primary);
  box-shadow: 0 22px 50px rgba(10,23,20,0.12);
}

.about-page .story-icon{
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-weight: 800;
      margin: 12px auto;
  margin-bottom: 18px;
}

.about-page .story-card h3{
  font-size: 22px;
  margin-bottom: 12px;
}

/* features */
.about-page .feature-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.about-page .feature-card{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 24px;
  box-shadow: var(--shadow);
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
  text-align:center;
}

.about-page .feature-card::after{
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}

.about-page .feature-card:hover{
  transform: translateY(-8px);
  border-color: var(--primary);
}

.about-page .feature-card:hover::after{
  transform: scaleX(1);
}

.about-page .feature-icon{
  width: 62px;
  height: 62px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 20px;
  box-shadow: 0 14px 28px rgba(65,195,101,0.22);
  margin: 14px auto;
}

.about-page .feature-card h3{
  font-size: 21px;
  margin-bottom: 10px;
}

/* how */
.about-page .how-grid{
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 46px;
  align-items: center;
}

.about-page .how-image{
  border-radius: 32px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px rgba(10,23,20,0.10);
  transition: transform .4s ease;
}

.about-page .how-image:hover{
  transform: translateY(-8px);
}

.about-page .how-image img{
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
}

.about-page .how-content h2{
  font-size: clamp(30px, 4vw, 48px);
  margin-bottom: 26px;
}

.about-page .step-item{
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
  box-shadow: var(--shadow);
  transition: all .3s ease;
}

.about-page .step-item:hover{
  transform: translateX(8px);
  border-color: var(--primary);
}

.about-page .step-item + .step-item{
  margin-top: 16px;
}

.about-page .step-number{
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 12px 26px rgba(65,195,101,0.22);
}

.about-page .step-item h3{
  font-size: 20px;
  margin-bottom: 8px;
}

/* promise */
.about-page .promise-section{
 
}

.about-page .promise-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

.about-page .promise-content h2{
  font-size: clamp(30px, 4vw, 48px);
  margin-bottom: 16px;
}

.about-page .promise-content p{
  margin-bottom: 22px;
}

.about-page .promise-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-page .promise-list li{
  position: relative;
  padding-left: 28px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 10px;
}

.about-page .promise-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 6px rgba(65,195,101,0.12);
}

.about-page .promise-stats{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
      margin: auto;
}

.about-page .stat-box{
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, #fcfffd 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  transition: all .35s ease;
}

.about-page .stat-box:hover{
  transform: translateY(-8px);
  border-color: var(--primary);
}

.about-page .stat-box h3{
  font-size: 28px;
  color: var(--primary-dark);
  margin-bottom: 10px;
}

/* cta */
.about-page .about-cta{
  padding: 0 0 100px;
  background: var(--bg);
}

.about-page .cta-box{
      background: linear-gradient(135deg, #244c2f, #0e451c);
  border-radius: 34px;
  padding: 46px;
  box-shadow: 0 30px 60px rgba(4,18,10,0.18);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.about-page .cta-box::before{
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(65,195,101,0.20) 0%, rgba(65,195,101,0) 72%);
  right: -60px;
  top: -60px;
}

.about-page .cta-text h2{
  color: var(--white);
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}

.about-page .cta-text p{
  color: rgba(255,255,255,0.82);
  max-width: 700px;
  position: relative;
  z-index: 2;
}

.about-page .cta-action{
  position: relative;
  z-index: 2;
}

/* responsive */
@media (max-width: 1100px){
  .about-page .about-hero-grid,
  .about-page .how-grid,
  .about-page .promise-grid{
    grid-template-columns: 1fr;
  }

  .about-page .feature-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  .about-page .about-story-grid{
    grid-template-columns: 1fr;
  }

  .about-page .hero-mini-points{
    grid-template-columns: repeat(2, 1fr);
  }

  .about-page .about-hero-image-wrap{
    min-height: auto;
  }

  .about-page .about-hero-image-card img,
  .about-page .how-image img{
    min-height: 430px;
  }

  .about-page .cta-box{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px){
  .about-page .about-section,
  .about-page .about-hero{
    padding: 70px 0;
  }

  .about-page .feature-grid,
  .about-page .promise-stats,
  .about-page .hero-mini-points{
    grid-template-columns: 1fr;
  }

  .about-page .about-hero-content h1{
    font-size: 38px;
  }

  .about-page .section-head h2,
  .about-page .how-content h2,
  .about-page .promise-content h2,
  .about-page .cta-text h2{
    font-size: 30px;
  }

  .about-page .floating-badge,
  .about-page .floating-card{
    position: static;
    display: inline-block;
    margin-top: 14px;
  }

  .about-page .about-hero-image-wrap{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .about-page .cta-box{
    padding: 30px 22px;
  }
}

.contact-page{
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

.contact-page *{
  box-sizing: border-box;
}

.contact-page .container{
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
}

.contact-page img{
  max-width: 100%;
  display: block;
}

.contact-page a{
  text-decoration: none;
}

.contact-page h1,
.contact-page h2,
.contact-page h3{
  margin: 0 0 14px;
  line-height: 1.15;
  color: var(--text);
}

.contact-page p{
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
  font-size: 16px;
}

.contact-page .section-tag,
.contact-page .contact-tag{
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-dark);
  background: linear-gradient(180deg, #f9fff9 0%, #f0fff5 100%);
  border: 1px solid var(--border);
  padding: 9px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  box-shadow: 0 8px 20px rgba(65,195,101,0.08);
}

.contact-page .light-tag{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.25);
  color: var(--white);
}

.contact-page .section-head{
  max-width: 860px;
  margin: 0 auto 46px;
}

.contact-page .section-head.center{
  text-align: center;
}

.contact-page .section-head h2{
  font-size: clamp(30px, 4vw, 48px);
  margin-bottom: 16px;
}

.contact-page .theme-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 14px 26px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all .3s ease;
}

.contact-page .primary-btn{
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  box-shadow: 0 18px 35px rgba(65,195,101,0.24);
}

.contact-page .primary-btn:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 45px rgba(65,195,101,0.28);
}

.contact-page .outline-btn{
  border: 1px solid var(--border);
  color: var(--primary-dark);
  background: var(--white);
  box-shadow: 0 10px 28px rgba(10,23,20,0.05);
}

.contact-page .outline-btn:hover{
  background: var(--secondary);
  transform: translateY(-4px);
  border-color: var(--primary);
}

.contact-page .white-btn{
  background: var(--white);
  color: var(--primary-dark);
}

.contact-page .white-btn:hover{
  transform: translateY(-4px);
}

.contact-page .contact-hero{
  padding: 23px 0 0px;

}

.contact-page .contact-hero-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 50px;
  align-items: center;
}

.contact-page .contact-hero-content h1{
  font-size: clamp(38px, 5vw, 48px);
  margin-bottom: 18px;
}

.contact-page .contact-hero-content p + p{
  margin-top: 14px;
}

.contact-page .contact-hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.contact-page .contact-hero-image{
  border-radius: 32px;
  overflow: hidden;
}

.contact-page .contact-hero-image img{
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
}

.contact-page .contact-section{
  padding: 50px 0;
}

.contact-page .alt-bg{
  background: linear-gradient(180deg, #fbfffc 0%, var(--secondary) 100%);
}

.contact-page .contact-card-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.contact-page .contact-card{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 24px;
  box-shadow: var(--shadow);
  transition: all .35s ease;
}

.contact-page .contact-card:hover{
  transform: translateY(-8px);
  border-color: var(--primary);
}

.contact-page .contact-icon{
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 24px;
  margin-bottom: 18px;
}

.contact-page .contact-card h3{
  font-size: 22px;
  margin-bottom: 10px;
}

.contact-page .contact-card a{
  display: inline-block;
  margin-top: 14px;
  color: var(--primary-dark);
  font-weight: 700;
}

.contact-page .contact-form-wrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
}

.contact-page .contact-form-content h2{
  font-size: clamp(30px, 4vw, 48px);
  margin-bottom: 16px;
}

.contact-page .contact-points{
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.contact-page .contact-points li{
  position: relative;
  padding-left: 28px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 10px;
}

.contact-page .contact-points li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 6px rgba(65,195,101,0.12);
}

.contact-page .contact-form-card{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 30px;
  box-shadow: var(--shadow);
}

.contact-page .form-group{
  margin-bottom: 18px;
}

.contact-page .form-group label{
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.contact-page .form-group input,
.contact-page .form-group textarea{
  width: 100%;
  border: 1px solid var(--border);
  background: #fbfffc;
  border-radius: 14px;
  padding: 14px 16px;
  outline: none;
  font-size: 15px;
  color: var(--text);
  transition: all .3s ease;
}

.contact-page .form-group input:focus,
.contact-page .form-group textarea:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(65,195,101,0.10);
}

.contact-page .form-btn{
  width: 100%;
}

.contact-page .contact-cta{
  padding: 0 0 100px;
}

.contact-page .cta-box{
      background: linear-gradient(135deg, #244c2f, #0e451c);
  border-radius: 34px;
  padding: 46px;
  box-shadow: 0 30px 60px rgba(4,18,10,0.18);
  text-align: center;
}

.contact-page .cta-box h2{
  color: var(--white);
  font-size: clamp(28px, 4vw, 46px);
  margin-bottom: 12px;
}

.contact-page .cta-box p{
  color: rgba(255,255,255,0.82);
  max-width: 720px;
  margin: 0 auto 24px;
}

@media (max-width: 1100px){
  .contact-page .contact-hero-grid,
  .contact-page .contact-form-wrap{
    grid-template-columns: 1fr;
  }

  .contact-page .contact-card-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-page .contact-hero-image img{
    min-height: 420px;
  }
}

@media (max-width: 768px){
  .contact-page .contact-hero,
  .contact-page .contact-section{
    padding: 70px 0;
  }

  .contact-page .contact-card-grid{
    grid-template-columns: 1fr;
  }

  .contact-page .contact-hero-content h1,
  .contact-page .section-head h2,
  .contact-page .contact-form-content h2,
  .contact-page .cta-box h2{
    font-size: 30px;
  }

  .contact-page .cta-box{
    padding: 30px 22px;
  }
}


.feature-icon{
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  font-size: 22px;
}

.section-head.center{
  text-align: center;
  max-width: 700px;
  margin: 0 auto 40px;
}
.section-head.center{
  text-align: center;
  margin-bottom: 30px;
}

.split-section{
  display: flex;
  align-items: center;
  gap: 50px;
}

.split-image{
  flex: 1;
}

.split-image img{
  width: 100%;
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.split-content{
  flex: 1;
}

.split-content h3{
  margin-top: 15px;
  margin-bottom: 5px;
      font-size: 19px;
}

.split-content p{
  color: var(--muted);
  margin-bottom: 16px;
}

/* Mobile */
@media(max-width:768px){
  .split-section{
    flex-direction: column;
    text-align: center;
  }
}


.step-box{
  position: relative;
  padding-left: 20px;
  margin-bottom: 25px;
  border-left: 2px solid var(--border);
}

/* dot (circle) */
.step-box::before{
  content: "";
  position: absolute;
  left: -7px;
  top: 5px;
  width: 12px;
  height: 12px;
  background: var(--primary);
  border-radius: 50%;
}

/* heading */
.step-box h3{
  margin-bottom: 5px;
}

/* text */
.step-box p{
  color: var(--muted);
}

.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #000; /* optional background */
  border-radius: 50%;
}

.contact-icon i {
  color: #fff;
  font-size: 18px;
}

.contact-page .primary-btn:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 24px 45px rgba(65,195,101,0.28);
}

.contact-page .theme-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 26px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
}

.contact-page .theme-btn::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.22), transparent 80%);
  transform: translateX(-120%);
  transition: transform .7s ease;
}

.contact-page .theme-btn:hover::before{
  transform: translateX(120%);
}

.contact-page .outline-btn{
  border: 1px solid var(--border);
  color: var(--primary-dark);
  background: var(--white);
  box-shadow: 0 10px 28px rgba(10,23,20,0.05);
}

.contact .outline-btn:hover{
  background: var(--secondary);
  transform: translateY(-4px);
  border-color: var(--primary);
}

.contact .white-btn{
  background: var(--white);
  color: var(--primary-dark);
  box-shadow: 0 14px 34px rgba(0,0,0,0.12);
}

.contact-page .white-btn:hover{
  transform: translateY(-4px) scale(1.02);
}

.disclaimer-page {
  background: linear-gradient(180deg, var(--bg) 0%, var(--secondary) 100%);
  padding: 80px 0;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 15px 20px;
}

.disclaimer-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 50px 40px;
}

.disclaimer-tag {
  display: inline-block;
  background: rgba(65, 195, 101, 0.12);
  color: var(--primary-dark);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 13px;
  margin-bottom: 15px;
}

.disclaimer-card h1 {
  font-size: 38px;
  color: var(--dark);
  margin-bottom: 15px;
}

.disclaimer-intro {
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 30px;
}

.disclaimer-block {
  border-top: 1px solid var(--border);
  padding: 20px 0;
}

.disclaimer-block h2 {
  font-size: 20px;
  color: var(--navy);
  margin-bottom: 8px;
}

.disclaimer-block p {
  color: var(--muted);
  line-height: 1.7;
}

.terms-page {
  background: linear-gradient(180deg, var(--bg) 0%, var(--secondary) 100%);
  padding: 80px 0;
}

.terms-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 50px 40px;
}

.terms-tag {
  display: inline-block;
  background: rgba(65, 195, 101, 0.12);
  color: var(--primary-dark);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 13px;
  margin-bottom: 15px;
}

.terms-card h1 {
  font-size: 38px;
  color: var(--dark);
  margin-bottom: 15px;
}

.terms-intro {
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 30px;
}

.terms-block {
  border-top: 1px solid var(--border);
  padding: 20px 0;
}

.terms-block h2 {
  font-size: 20px;
  color: var(--navy);
  margin-bottom: 8px;
}

.terms-block p {
  color: var(--muted);
  line-height: 1.7;
}

.refund-page {
  background: linear-gradient(180deg, var(--bg) 0%, var(--secondary) 100%);
  padding: 80px 0;
}

.refund-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 50px 40px;
}

.refund-tag {
  display: inline-block;
  background: rgba(65, 195, 101, 0.12);
  color: var(--primary-dark);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 13px;
  margin-bottom: 15px;
}

.refund-card h1 {
  font-size: 38px;
  color: var(--dark);
  margin-bottom: 15px;
}

.refund-intro {
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 30px;
}

.refund-block {
  border-top: 1px solid var(--border);
  padding: 20px 0;
}

.refund-block h2 {
  font-size: 20px;
  color: var(--navy);
  margin-bottom: 8px;
}

.refund-block p {
  color: var(--muted);
  line-height: 1.7;
}


.privacy-page {
  background: linear-gradient(180deg, var(--bg) 0%, var(--secondary) 100%);
  padding: 80px 0;
}

.privacy-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 50px 40px;
}

.privacy-tag {
  display: inline-block;
  background: rgba(65, 195, 101, 0.12);
  color: var(--primary-dark);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 13px;
  margin-bottom: 15px;
}

.privacy-card h1 {
  font-size: 38px;
  color: var(--dark);
  margin-bottom: 15px;
}

.privacy-intro {
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 30px;
}

.privacy-block {
  border-top: 1px solid var(--border);
  padding: 20px 0;
}

.privacy-block h2 {
  font-size: 20px;
  color: var(--navy);
  margin-bottom: 8px;
}

.privacy-block p {
  color: var(--muted);
  line-height: 1.7;
}


/* Section */
.reviews-section {
  background: #eef5f1;
  padding: 60px 0;
}

/* Container */
.container {
  max-width: 1200px;
  margin: auto;
}

/* Swiper */
.testimonialSwiper {
  overflow: hidden;
  padding: 40px 0;
}

/* Slides */
.swiper-wrapper {
  align-items: stretch;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  height: auto;
}

/* Card */
.testimonial-card {
  width: 100%;
  max-width: 350px;
  background: #fff;
  padding: 25px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transition: 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

/* Stars */
.stars {
  color: #f4b400;
  font-size: 18px;
  margin-bottom: 10px;
}

/* Text */
.testimonial-card p {
  font-size: 15px;
  line-height: 1.6;
  color: #444;
}

/* User */
.testimonial-user {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.testimonial-user img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-right: 12px;
}

.testimonial-user strong {
  display: block;
  font-size: 15px;
  color: #222;
}

.testimonial-user small {
  color: #777;
  font-size: 13px;
}

/* Arrows */
.testimonial-prev,
.testimonial-next {
  width: 45px;
  height: 45px;
  background: green;
  border-radius: 50%;
  color: #fff;
  top: 50%;
  transform: translateY(-50%);
}

.testimonial-prev {
  left: 0;
}

.testimonial-next {
  right: 0;
}

.testimonial-prev::after,
.testimonial-next::after {
  font-size: 16px;
}

/* Pagination */
.testimonial-pagination {
  margin-top: 20px;
  text-align: center;
}

.swiper-pagination-bullet {
  background: #bbb;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: #007bff;
}
.big-amount {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 40px;
}

.big-amount span {
    font-size: 32px;
    color: black;
    font-weight: bold;
    margin: 0;
}

.footer-brand .social-icons {
  margin-top: 15px;
}

.footer-brand .social-icons a {
  display: inline-block;
  margin-right: 10px;
  font-size: 18px;
  color: #fff;
  transition: 0.3s ease;
}

/* Hover effect */
.footer-brand .social-icons a:hover {
  color: #fecd04; /* premium gold */
}