:root {
  --bg: #ffffff;
  --text: #1f2937;
  --muted: #606B77;
  --line: #e5e7eb;
  --blue: #0b5ed7;
  --blue2: #14a3ff;
  --purple: #6d28d9;
  --card: #ffffff;
  --shadow: 0 18px 45px rgba(17, 24, 39, .10);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Figtree", "Noto Sans Bengali", sans-serif;
  color: var(--text);
  background: var(--bg);
}

html.lang-bn {
  font-family: "Hind Siliguri", sans-serif;
}

/* Navbar Start */
    header.nav{
      position: relative;
      top: 0;
      z-index: 9999;
      background:#fff;
      border-bottom: 1px solid rgba(229,231,235,.85);
    }

    .nav-inner{
      display:flex;
      align-items:center;
      justify-content:flex-start; /* ✅ no space-between */
      gap: 30px;
      height: 70px;
    }

    .site-logo{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
    .site-logo img{ height:45px; width:auto; object-fit:contain; display:block; }

    /* Desktop alignment */
    #mainNav{
      display: flex;
      align-items: center;
      justify-content: flex-start; /* ✅ left align */
      gap: 22px;
      margin-left: 30px; /* ✅ space from logo */
      flex: 0 0 auto; /* prevents stretching */
    }
    
    .desktop-lang{ flex:0 0 auto; margin-left:auto; }

    /* Interaction base */
    .nav-link{
      text-decoration:none;
      color:#374151;
      font-size:14px;
      font-weight:500;
      padding:8px 10px;
      border-radius:12px;
      display:inline-flex;
      align-items:center;
      line-height: 1;
      gap:6px;
      transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
      user-select:none;
      -webkit-tap-highlight-color: transparent;
    }

    .nav-link.active{
      color:#2563eb;
      position:relative;
      font-weight:600;
      background:transparent;
    }
    .nav-link.active::after{
      content:"";
      position:absolute;
      left:0px;
      right:0px;
      bottom:0px;
      height:1px;
      background:#2563eb;
      border-radius:999px;
    }

    @media (hover: hover){
      .nav-link:hover,
      .lang:hover,
      .dd-btn:hover{
        background: rgba(37,99,235,.08);
        color: #1d4ed8;
      }
    }

    .nav-link:active,
    .lang:active,
    .dd-btn:active{
      background: rgba(37,99,235,.12);
      color: #1d4ed8;
      transform: scale(.98);
    }

    .nav-link.is-pressed,
    .lang.is-pressed,
    .dd-btn.is-pressed{
      background: rgba(37,99,235,.12);
      color: #1d4ed8;
      box-shadow: 0 6px 18px rgba(37,99,235,.12);
    }

    .nav-link:focus-visible,
    .lang:focus-visible,
    .dd-btn:focus-visible{
      outline: 2px solid rgba(37,99,235,.35);
      outline-offset: 2px;
      background: rgba(37,99,235,.08);
      color: #1d4ed8;
    }

    /* Dropdown */
    .nav-dd{ position:relative; padding-bottom:0; }
/* ✅ Hover bridge so dropdown stays clickable without changing alignment */
@media (min-width: 769px){
  .nav-dd::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:100%;
    height:10px; /* bridge gap to menu */
  }
}
    .dd-btn{
      border:0;
      background:transparent;
      cursor:pointer;
      font:inherit;
      padding:0;
    }
    .dd-btn.nav-link{ padding:8px 10px; }

    /* ✅ Force identical typography & alignment for all top menu items */
    #mainNav > .nav-link,
    #mainNav > .nav-dd > .dd-btn.nav-link{
      font-size: 16px !important;
      font-weight: 500 !important;
      line-height: 1 !important;
      padding: 8px 8px !important;
      height: 36px;                 /* same height */
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 6px;
      box-sizing: border-box;
    }

    /* keep arrow aligned */
    #mainNav .dd-arrow{
      display:inline-flex;
      align-items:center;
      line-height:1;
      transform: translateY(1px);
    }
    .dd-arrow{ font-size:12px; opacity:.75; margin-left:2px; }

    .dd-menu{
      position:absolute;
      top:100%;
      margin-top:6px;
      left:0;

      min-width: 190px;
      background:#fff;
      border:1px solid #e6e6e6;
      border-radius: 12px;
      box-shadow: 0 14px 30px rgba(0,0,0,.08);
      padding: 6px;
      z-index: 1000;

      opacity:0;
      visibility:hidden;
      transform: translateY(-6px) scale(.98);
      pointer-events:none;
      transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    }

    .dd-menu a{
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px 12px;
      border-radius:10px;
      text-decoration:none;
      color:#111827;
      font-size:14px;
      font-weight:500;
      transition: background .15s ease, color .15s ease, transform .15s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .dd-menu a:hover{ background:rgba(59,130,246,.10); color:#1d4ed8; }
    .dd-menu a:active{ background:rgba(59,130,246,.14); color:#1d4ed8; transform: scale(.99); }
    .dd-menu a.is-pressed{ background:rgba(59,130,246,.14); color:#1d4ed8; }

    @media (min-width: 769px){
      .nav-dd:hover .dd-menu{
        opacity:1;
        visibility:visible;
        transform: translateY(0) scale(1);
        pointer-events:auto;
      }
    }
    .dd-menu.show{
      opacity:1;
      visibility:visible;
      transform: translateY(0) scale(1);
      pointer-events:auto;
    }

    .dd-menu-right{ right:0; left:auto; }

    .lang{
      border:none;
      background:transparent;
      cursor:pointer;
      font-weight:500;
      color:#111827;
      padding:8px 10px;
      border-radius:12px;
      display:inline-flex;
      align-items:center;
      line-height:1;
      gap:6px;
      transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .menu-toggle{
      display:none;
      font-size:26px;
      background:none;
      border:none;
      cursor:pointer;
      line-height:1;
      padding:8px 10px;
      border-radius:12px;
      transition: background .15s ease, transform .15s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .nav-backdrop{ display:none; }

    /* Demo content */
    .demo{ padding:18px 0 60px; }
    .cardish{
      background:#fff;
      border:1px solid #e5e7eb;
      border-radius:16px;
      box-shadow:0 14px 35px rgba(17,24,39,.06);
      padding:18px;
    }

/* Navbar End */

/* Hide mobile language dropdown on desktop */
.mobile-lang {
  display: none;
}

/* HERO */
.hero {
  padding: 46px 0 80px;
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 42px;
  align-items: center;
}

/* Left side */
.hero-left {
  position: relative;
}

.hero-graphic {
  position: relative;
  height: 220px;
  margin-bottom: 10px;
}

.hero-circle {
  position: absolute;
  left: 38px;
  top: 18px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at 35% 30%, #ffd54a, #f4b400);
  border-radius: 999px;
  z-index: 0;
}

.hero-person {
  position: absolute;
  left: 0;
  top: 0;
  height: 256px;
  width: auto;
  z-index: 1;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .12));
}

.hero-title {
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.05;
  margin: 12px 60px 6px;
  letter-spacing: -0.6px;
  font-weight: 550;
}

.money {
  color: #1d4ed8;
  font-weight: 550;
}

.taka {
  font-size: 56px;
  /* Slightly smaller than the numbers */
  /* vertical-align: middle; */
  font-weight: 550;
}

.hero-subtitle {
  margin: 0 60px 18px;
  color: var(--muted);
  font-size: 25px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 60px;
}

.link-btn {
  font-size: 13px;
  color: #2563eb;
  text-decoration: none;
  border: 1px solid #cfe0ff;
  padding: 8px 12px;
  border-radius: 999px;
}

.ghost-btn {
  font-size: 13px;
  color: #374151;
  text-decoration: none;
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: 999px;
}

.link-btn:hover {
  background: #eff6ff;
}

.ghost-btn:hover {
  background: #f9fafb;
}

/* Right card */
.card {
  background: var(--card);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid rgba(229, 231, 235, .7);
}

.card-top {
  padding: 40px 24px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #fff;
  background: linear-gradient(90deg, var(--blue2), var(--purple));
}

.card-top-title {
  font-weight: 550;
  font-size: 30px;
  margin-bottom: 2px;
}

.card-top-sub {
  font-size: 18px;
  opacity: .92;
}

.track {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  opacity: .95;
  margin-top: -25px;
}

.track-arrow {
  font-size: 18px;
  line-height: 0;
}

.card-body {
  padding: 20px 24px 40px;
}

.discount-highlight{
  color: #1d6ee0;           /* blue text */
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

/* steps */
/* steps */
.steps{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.step{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #111827;
}

.step-dot{
  width: 20px;
  height: 20px;
  margin-top: 3px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  border: 1px solid #D3DBDF;
  background: #fff;
  color: #606B77;
}

.step.active .step-dot{
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
}

/* line */
.steps > .step-line{
  flex: 1;
  max-width: 115px;
  height: 4px;
  border-radius: 999px;
  position: relative;
  top: -8px;
}

.steps > .step-line::before,
.steps > .step-line::after{
  background: none !important;
  background-image: none !important;
}

/* default (gray line) */
.step-line {
  width: 80px;
  height: 2px;
  background: #e5e7eb;
  border-radius: 2px;
  transition: 0.3s ease;
}

/* when first step is completed */
.steps.step-2-active > .step-line {
  background: linear-gradient(180deg, #2390FE 0%, #2390FE 80%, #9A21EA 100%) !important;
  background-color: transparent !important;
}


/* form */
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.label {
  font-size: 14px;
  font-weight: 500;
  color: #212b36;
  margin-top: 2px;
}

.input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  outline: none;
  font-size: 14px;
  font-weight: 400;
  background: #fff;
  transition: 0.3s ease;
}

.input:focus {
  border: 2px solid transparent;
  background-image: linear-gradient(#fff, #fff),
                    linear-gradient(180deg, #2390FE 0%, #2390FE 80%, #9A21EA 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: none;
}

.btn {
  margin-top: 6px;
  height: 40px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 550;
  font-size: 13px;
  background: #D3DBDF;
  color: #606B77;
}
.btn-p {
  height: 40px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 550;
  font-size: 18px;
  background: #D3DBDF;
  color: #606B77;
}

.btn-p:not(:disabled) {
  background: #005cdc;
  color: #fff;
}

.btn-wide {
  width: 100%;
  margin-top: 14px;
}
.form-separator{
  width:100%;
  border-top: 2px dashed #e5e7eb;
  margin: 16px 0;
}

/* MODAL */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 50;
}

.hidden {
  display: none;
}

.modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
  z-index: 9999;
}

 .otp-modal { 
  text-align: center;
}

.referral_modal{
  width: min(518px, 96%);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .20);
  border: 1px solid rgba(229, 231, 235, .9);
  padding: 40px 32px;
  position: relative;
  text-align: left;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  font-size: 22px;
  line-height: 0;
  color: #111827;
}

.modal-close:hover {
  background: #f9fafb;
}
.otp-modal .modal-icon{
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.otp-modal .modal-links{
  text-align: center;
}
.otp-modal .resend,
.otp-modal .return{
  justify-content: center;
}
/* OTP TOP ICON (sms-code.svg) */
.otp-icon-wrap{
  width: 70px;
  height: 60px;
  border-radius: 14px;
  background: #EFF4FF; /* light blue bg like screenshot */
  display: flex;
  align-items: center;
  justify-content: center;
}

.otp-icon-img{
  width: 80px;
  height: 80px;
  display: block;
}
.modal-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 10px;
  border-radius: 14px;
  background: #eff6ff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
}

.otp {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

#otpOverlay .otp-box:focus,
#otpOverlay .otp-box:focus-visible {
  border: 1px solid transparent;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(180deg, #2390FE 0%, #2390FE 80%, #9A21EA 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: none; 
  outline: none;
}

.modal-links {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  color: #606B77;
}

.resend a {
  color: #0071FF;
  font-weight: 500;
  text-decoration: none;
}

.resend a:hover {
  text-decoration: underline;
}

.return {
  color: #374151;
  text-decoration: none;
  font-weight: 500;
}

.return:hover {
  text-decoration: underline;
}

.phone-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  border: 1px solid #e2e6ef;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition: 0.3s ease;
}

.phone-wrap:focus-within {
  border: 2px solid transparent;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(180deg, #2390FE 0%, #2390FE 80%, #9A21EA 100%); 
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: none;
}

.phone-code{
  width:90px;
  border:0;
  outline:none;
  background:transparent;
  padding:0 14px;
  font-weight:600;
  color:#111827;
}

.phone-divider{
  width:1px;
  height:60%;
  background:#e5e7eb;
}

.phone-number{
  flex:1;
  border:0;
  outline:none;
  background:transparent;
  padding:0 14px;
  height:100%;
}


/* =========================
   HOW IT WORKS SECTION
========================= */
.how-section {
  background: #f0f6fe;
  padding: 100px 0;
}

.how-title {
  text-align: center;
  font-size: 40px;
  padding: 0 0 10px;
  letter-spacing: -0.3px;
  font-weight: 700;
}

.how-subtitle {
  text-align: center;
  margin: 0 0 70px;
  color: #606B77;
  font-size: 20px;
}

.how-steps{
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr; /* 4 steps + 3 dividers */
  gap: 0;
  align-items: start;
}

.how-step{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 0 20px; /* space like your reference */
  min-width: 0;
}

/* IMPORTANT: make SVG images consistent */
.how-icon__img{
  width: 60px;        /* icon size */
  height: 60px;
  display: block;
  object-fit: contain;
  transform: scale(1.6);
  transform-origin: center;
  margin-top: 8px;
}

.how-text {
  min-width: 0;
}

.how-step-title {
  font-size: 16px;
  font-weight: 500;
  color: #111827;
  margin-bottom: 6px;
}

.how-step-desc {
  font-size: 12px;
  line-height: 1.55;
  color: #606B77;
}


.how-divider{
  width: 1px;
  background: #e7eefb;
  height: 110px;
  align-self: center;
  justify-self: center;
}

/* ===== HOW IT WORKS (fix alignment like your 2nd image) ===== */

.how-steps{
  display: flex;
  align-items: flex-start;      /* important: keep all steps aligned at top */
  justify-content: space-between;
  gap: 28px;
  flex-wrap: nowrap;
}

/* each step: icon + text aligned nicely */
.how-step{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;                /* prevent overflow pushing items down */
}


/* text block */
.how-step-title{
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

.how-step-desc{
  font-size: 14px;
  line-height: 1.55;
  color: #64748b;
  max-width: 220px;            /* keeps each column similar like your expected design */
}

/* vertical divider between steps */
.how-divider{
  width: 1px;
  align-self: stretch;         /* important: divider becomes full height of row */
  background: #dbe7f6;
  margin-top: 2px;
}






    /* BENEFIT SECTION */
    .benefit{
      padding: 80px 0;
      background-color: #fff;
    }

    .benefit-section{
      position: relative;
      padding: 100px 0 70px 0;
      background: url("../images/Yellow Stroke.svg") no-repeat center;
      background-size: contain;
	  
    }

    .benefit-mobile{
      display: none;
    }

    .benefit-desktop{
      display: block;
    }

    /* VIDEO CARD */
    .video-card{
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 18px 45px rgba(0,0,0,.15);
      background: #fff;
      max-width: 660px;
      max-height: 370px;
    }
    .video-card img{
      width:110%;
      height:105%;
      object-fit:cover;
      object-position: 55% 80%;
      transform: scale(1.1);
       
    }

    /* PLAY BUTTON */
    .play-btn{
      position:absolute;
      inset:0;
      margin:auto;
      width:64px;
      height:64px;
      border-radius:50%;
      background:#fff;
      display:grid;
      place-items:center;
      border:none;
      box-shadow:0 10px 25px rgba(0,0,0,.2);
      cursor:pointer;
    }
	    /* PLAY BUTTON */
    .play-btn-animated{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%, -50%);
      width:60px;
      height:60px;
      border:none;
      background:none;
      padding:0;
      cursor:pointer;
      z-index:3;
    }

    .play-btn-animated .ring{
      position:absolute;
      inset:0;
      border-radius:50%;
      background:rgba(255,255,255,.55);
      opacity:0;
      transform:scale(.85);
    }

    .play-core{
      position:absolute;
      inset:0;
      border-radius:50%;
      background:#fff;
      display:grid;
      place-items:center;
      box-shadow:0 14px 30px rgba(0,0,0,.18);
      transition:transform .25s ease, box-shadow .25s ease;
    }

    .play-core svg path{
      fill:#2563eb;
    }

    @keyframes ripple{
      0%{opacity:0; transform:scale(.85);}
      20%{opacity:.6;}
      100%{opacity:0; transform:scale(1.55);}
    }

    .ring1{animation:ripple 2.4s ease-out infinite;}
    .ring2{animation:ripple 2.4s ease-out infinite .6s;}
    .ring3{animation:ripple 2.4s ease-out infinite 1.2s;}

    .play-btn-animated:hover .play-core{
      transform:scale(1.05);
      box-shadow:0 18px 38px rgba(0,0,0,.22);
    }

    .play-btn-animated:active .play-core{
      transform:scale(.97);
    }

    /* stop animation after click */
    .play-btn-animated.paused .ring{
      animation-play-state: paused;
      opacity:0;
    }

    /* TEXT */
    .benefit-text h2{
      font-size:40px;
      font-weight:700;
      line-height:1.1;
      margin-bottom:16px;
    }
    .benefit-text p{
      color:#637381;
      max-width:400px;
      font-size:19px;
    }

    .cta-mobile{
      display:none;
    }

/* =========================
   CTA SECTION (Ready to Join)
========================= */

  .container {
    margin: 0 auto;
    padding: 0px;
  }

  .cta-card{
    position: relative;
    overflow: hidden;
    text-align: center;
    background-image: url("../images/Ready to Join Them.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 18px 55px rgba(17,24,39,.10);
    color: #fff;
    padding: 70px 25px; 
    border-radius: 22px;
  }

  /* ✅ overlay to match screenshot + keep text readable */
  .cta-card::before{
    content:"";
    position:absolute;
    inset:0;
    background: rgba(47, 79, 227, 0.5); /* lower = clearer image */
    z-index:0;
  }

  /* ✅ keep text & button above overlay */
  .cta-card > *{
    position: relative;
    z-index: 1;
  }

  .cta-title {
  color: var(--white, #FFF);
  text-align: center;
  /* Heading/H1 */
  font-family: Figtree;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 44px; /* 110% */
  }

  .cta-subtitle {
    font-size: 20px;       /* ↓ smaller text */
    line-height: 1.4;      /* tighter spacing */
    /* max-width: 420px; */
    padding-bottom: 32px;   /* less spacing */
    opacity: 0.9;
  }

  .cta-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    background: #fff;
    color: #111;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s ease;
  }

  .cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  }

  .cta-desktop{
    background-color: #fff;
  }

  .cta-container{
    padding-bottom: 80px;
  }


  /* =========================
    FAQ SECTION
  ========================= */
  .faq-section {
    padding: 100px 0;
    background: #f3f3f3;
  }

  .faq-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .faq-title {
    text-align: center;
    margin: 0 0 40px;
    font-size: 40px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.3px;
  }

  .faq-card {
    width: min(710px, 100%);
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 18px 55px rgba(17, 24, 39, .08);
    border: 1px solid rgba(229, 231, 235, .9);
    overflow: hidden;
  }

  .faq-item {
    border-bottom: 1px solid #e9faff;
  }

  .faq-item:last-child {
    border-bottom: none;
  }

  .faq-p{
    color: #2083ff;
  }

  .faq-q {
    width: 100%;
    text-align: left;
    padding: 18px 30px;
    border: none;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 600;
    font-size: 18px;
    color: #141414;
    line-height: 1.4;
  }

  .faq-q:hover {
    background: #f9fafb;
  }

  .faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0;
    transition: transform 0.3s ease;
  }
  .faq-icon img {
    width: 20px;
    height: 20px;
    display: block;
  }

  .faq-a {
    padding: 0 30px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }

  .faq-a p {
    margin: 0;
    padding: 10px 0 16px;
    font-size: 16px;
    line-height: 1.6;
    color: #232323;
  }

  /* OPEN STATE */
  .faq-item.open .faq-a {
    max-height: 220px;
    /* enough for 2-3 lines */
  }

  .faq-item.open .faq-icon {
    transform: rotate(180deg);
  }


  /* =========================
    FOOTER (Image Style)
  ========================= */
  .site-footer {
    background: #062c57;
    /* deep navy */
    padding: 40px 100px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
  }

  .footer-wrap {
    color: rgba(255, 255, 255, .92);
    margin-top: 30xp; 
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 34px;
    align-items: start;
    padding: 10px 0 18px;
  }

  .footer-logo-box {
    border-color: rgba(255, 255, 255, .75);
    color: #fff;
  }

  .footer-desc {
    margin: 24px 0 18px;
    font-size: 16px;
    line-height: 26px;
    color: #99a1af;
    max-width: 400px;
  }

  .footer-small-title {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 400;
  }

  .newsletter-form {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  .newsletter-input {
    flex: 1;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .18);
    outline: none;
    padding: 0 12px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 13px;
  }

  .newsletter-input::placeholder {
    color: rgba(255, 255, 255, .55);
  }

  .newsletter-input:focus {
    border-color: rgba(255, 255, 255, .35);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .08);
  }

  .newsletter-btn {
    height: 42px;
    padding: 0 20px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    background: #0b5ed7;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
  }

  .newsletter-btn:hover {
    filter: brightness(1.06);
  }

  .footer-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 12px;
    color: #fff;
  }

  .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .footer-links a {
    text-decoration: none;
    color: #99a1af;
    font-size: 16px;
    font-weight: 400;
  }

  .footer-links a:hover {
    color: rgba(255, 255, 255, .95);
    text-decoration: underline;
  }

  /* bottom row */
  .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }

  .footer-copy {
    font-size: 11px;
    color: rgba(255, 255, 255, .62);
  }

  .footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .footer-social .social-btn img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

  .social-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: rgba(255, 255, 255, .9);
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
  }

  .social-btn:hover {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .20);
  }

  .social-btn i {
    font-size: 14px;
    line-height: 1;
  }



  /* legal links */
  .footer-legal {
    display: flex;
    gap: 18px;
    justify-content: flex-end;
    padding-top: 12px;
    flex-wrap: wrap;
  }

  .footer-legal a {
    font-size: 14px;
    font-weight: 400;
    color: #99a1af;
    text-decoration: none;
  }

  .footer-legal a:hover {
    color: rgba(255, 255, 255, .9);
    text-decoration: underline;
  }


  /* --- NEW MIDDLE ROW like Image 9 --- */
  .footer-mid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 0 18px;
    /* --- border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12); --- */
    margin-top: 10px;
  }

  .footer-mid-left {
    flex: 1;
    max-width: 520px;
  }

  .footer-mid-right {
    display: flex;
    justify-content: flex-end;
    min-width: 220px;
  }

  /* bottom row now = copyright left + legal right */
  .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 35px;
    border-top: none;
    /* remove top border because mid row already has border */
  }

  /* legal links row now inside footer-bottom */
  .footer-legal {
    display: flex;
    gap: 18px;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding-top: 0;
  }

  .footer-copy {
    font-size: 14px;
    font-weight: 400;
    color: #99a1af;
  }

  /* =========================
    FOOTER NEWSLETTER & SOCIAL FIX
  ========================= */

  /* Newsletter layout fix */
  .newsletter-form {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 425px;
  }

  .newsletter-input {
    flex: 1;
    width: 100%;
  }

  /* =========================
    SOCIAL ICONS CENTER FIX
  ========================= */

  .footer-social {
    display: flex;
    justify-content: center;
    /* ✅ center icons */
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 32px;
  }

  /* Ensure buttons stay circular */
  .social-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .footer-social{
    display: flex;
    gap: 14px;
    justify-content: flex-end; /* keep them on right like screenshot */
    align-items: center;
  }

  /* Button style */
  .footer-social .social-btn{
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;

    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: #fff;
    color: #fff;
    font-size: 18px;
    text-decoration: none;

    position: relative;
    overflow: hidden;

    transition: transform 0.25s ease, box-shadow 0.25s ease,
                background 0.25s ease, border-color 0.25s ease;
  }

  /* Shine animation layer */
  .footer-social .social-btn::before{
    content: "";
    position: absolute;
    top: -120%;
    left: -120%;
    width: 220%;
    height: 220%;

    background: linear-gradient(
      120deg,
      transparent 0%,
      rgba(255,255,255,0.15) 40%,
      rgba(255,255,255,0.35) 50%,
      rgba(255,255,255,0.15) 60%,
      transparent 100%
    );

    transform: rotate(25deg);
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  /* Hover animation */
  .footer-social .social-btn:hover{
    transform: translateY(-7px) scale(1.06);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
  }

  /* Shine on hover */
  .footer-social .social-btn:hover::before{
    opacity: 1;
    animation: shineMove 0.8s ease forwards;
  }

  @keyframes shineMove{
    0%   { transform: translate(-40%, -40%) rotate(25deg); }
    100% { transform: translate(40%, 40%) rotate(25deg); }
  }

  /* Icon wiggle */
  .footer-social .social-btn:hover i{
    animation: iconPop 0.35s ease;
  }

  @keyframes iconPop{
    0%   { transform: scale(1) rotate(0deg); }
    40%  { transform: scale(1.25) rotate(-10deg); }
    70%  { transform: scale(1.15) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); }
  }

  /* Tap/click effect */
  .footer-social .social-btn:active{
    transform: scale(0.92);
  }
  .footer-social .social-btn[aria-label="Facebook"]:hover{
    box-shadow: 0 14px 30px rgba(24, 119, 242, 0.35);
  }

  .footer-social .social-btn[aria-label="X"]:hover{
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  }

  .footer-social .social-btn[aria-label="Instagram"]:hover{
    box-shadow: 0 14px 30px rgba(225, 48, 108, 0.35);
  }

  .footer-social .social-btn[aria-label="LinkedIn"]:hover{
    box-shadow: 0 14px 30px rgba(10, 102, 194, 0.35);
  }

  .footer-social .social-btn[aria-label="YouTube"]:hover{
    box-shadow: 0 14px 30px rgba(255, 0, 0, 0.35);
  }



  /* =========================
    FOOTER NEWSLETTER INPUT PADDING FIX
  ========================= */

  .newsletter-input {
    height: 44px;
    padding: 0 16px;
    font-size: 14px;
    border-radius: 12px;
    line-height: 1.4;
    font-weight: 400;
    color: #99a1af;
  }

  /* Placeholder alignment */
  .newsletter-input::placeholder {
    font-size: 13px;
    opacity: 0.7;
  }

  /* =========================
    BENEFIT SECTION - MOBILE RESPONSIVE FIX
    paste at END of CSS
  ========================= */

  .benefit-video-card {
    width: 100%;
    max-width: 520px;
    /* keep desktop size limit */
    height: auto;
    /* remove fixed height */
    aspect-ratio: 16 / 9;
    /* keeps nice video shape */
  }

  /* ensure image fills the card when height is auto */
  .benefit-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }


  /* Dashboard CSS */

  /* Topbar */
  .topbar{ background:#fff; border-bottom:1px solid #eef2ff; top:0; z-index:10; }
  .topbar__inner{
    max-width:1200px; margin:0 auto; padding:10px 18px;
    display:flex; align-items:center; gap:14px;
  }
  .brand__logo{
    width:58px; height:32px; border:2px solid #8aa2d6; border-radius:4px;
    display:flex; align-items:center; justify-content:center;
    font-weight:600; color:#1f3b79;
  }
  .brand__logo span{ color:#dc2626; }

  .nav{ display:flex; align-items:center; gap:18px; flex:1 1 auto; }
  .nav__link{
    color:#334155; text-decoration:none; font-weight:600; font-size:13px;
    padding:8px 8px; border-radius:10px;
  }
  .nav__link:hover{ background:#f3f6ff; }
  .nav__link--btn{ border:0; background:transparent; cursor:pointer; }
  .nav__link i{ font-size:11px; margin-left:6px; color:#94a3b8; }

  .topbar__right{ display:flex; gap:10px; align-items:center; }
  .lang{
    border:0; background:transparent; font-weight:700; font-size: 18px;
    color:#111827; cursor:pointer; padding:8px 0; border-radius:10px;
  }
  .lang:hover{ background:#f3f6ff; }
  .lang i{ font-size:11px; margin-left:6px; color:#64748b; }
  .logout{
    border:0; background:var(--blue); color:#fff; font-weight:600; font-size:12px;
    padding:8px 14px; border-radius:10px; cursor:pointer;
    box-shadow:0 10px 25px rgba(37,99,235,.22);
  }

  .hamburger{ display:none; border:0; background:transparent; font-size:18px; color:#334155; cursor:pointer; }
  .mobileNav{ display:none; max-width:1200px; margin:0 auto; padding:10px 18px 14px; border-top:1px solid #eef2ff; }
  .mobileNav a{
    display:block; padding:10px 10px; border-radius:10px;
    text-decoration:none; color:#334155; font-weight:450;
  }
  .mobileNav a:hover{ background:#f3f6ff; }

  /* Page */
  .page-p{ margin:18px auto 34px; padding:0 18px; }

  .board{
    background:rgba(255,255,255,.86);
    border:1px solid #edf2ff;
    border-radius:24px;
    box-shadow:var(--shadow);
    padding:18px;
    min-height: 100vh;
  }

  .hero{ padding:5px 0 15px; }
  .hero__small{ color:var(--muted); font-weight:400; font-size:16px; margin:0 30px;}
  .hero__name{ font-weight:700; font-size:24px; margin-top:4px; margin:0 30px; }

  .grid{
    display:grid;
    grid-template-columns: 1.15fr 1fr;
    gap:16px;
    align-items:stretch;
  }
  .rightCol{ display:grid; gap:16px; }

  .card{
    background:var(--card);
    overflow:hidden;
  }
  .card__head{ padding:14px 14px 10px; border-bottom:1px solid #eff4ff; }
  .card__body{ padding:14px; }

  .headRow{ display:flex; gap:10px; align-items:flex-start; }
  .headText{ flex:1; }

  .icon{
    width:34px; height:34px; border-radius:10px;
    display:inline-flex; align-items:center; justify-content:center;
    background:#eef2ff; color:var(--blue);
    flex:0 0 auto;
  }
  .title{ font-weight:600; font-size:20px; }
  .sub{
    margin-top:4px;
    font-size:16px;
    color:var(--muted);
    font-weight:400;
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
  }

  .trackingValue{ font-weight:600; color:#111827; }

  .copyIcon{
    border:0; background:transparent; cursor:pointer;
    width:26px; height:26px; border-radius:8px;
    display:inline-flex; align-items:center; justify-content:center;
    color:#64748b;
  }
  .copyIcon:hover{ background:#f3f6ff; }

  .copied{
    color:var(--blue);
    font-weight:600;
    font-size:12px;
    opacity:0;
    transform:translateY(-2px);
    transition:.18s ease;
  }
  .copied.show{ opacity:1; transform:translateY(0); }

  #timeline .step {
    transition: 0.2s ease;
  }

  #timeline .step:hover {
    transform: translateX(2px);
  }

  /* ============================================================
    ✅ TIMELINE (FIXED): ONE CONTINUOUS LINE + DONE/ACTIVE/PENDING
    ============================================================ */

  .timeline{
    position: relative;
    padding: 16px 14px 18px;
  }

  /* ✅ Rail area (stabilizes alignment) */
  .timeline::before{
    content:"";
    position:absolute;
    top: 28px;
    bottom: 28px;
    left: 14px;              /* same as timeline left padding */
    width: var(--railW);     /* rail width */
    pointer-events:none;
    z-index:1;
  }

  /* ✅ Real continuous line centered behind dots */
  .timeline::after{
    content:"";
    position:absolute;
    top: 28px;
    bottom: 28px;
    left: calc(14px + (var(--railW) / 2));
    width: var(--line);
    transform: translateX(-50%);
    background:#e6eefc;
    pointer-events:none;
    z-index:1;
  }

  /* Each step */
  .step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    position: relative;
  }

  /* Left rail */
  .step__rail {
    position: relative;
    width: 40px;
    flex-shrink: 0;
  }

  /* Vertical line */
  .step__rail::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 45px;
    bottom: -65px;     /* allow line to stretch */
    width: 3px;
    background: #d9e1ec;
  }

  /* Remove line from last step */
  .step:last-child .step__rail::after {
    display: none;
  }

  /* Step circle */
  .step__dot {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #3b82f6;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    z-index: 2;
    position: relative;
  }

  /* ✅ DONE (step 1) */
  .step.done .step__dot{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff;
  }
  .step.done .step__dot i{
    font-size:12px;
    line-height:1;
  }

  /* ✅ ACTIVE STEP (highlighted blue with number) */
  .step.active .step__dot{
    background:var(--blue);
    border:1.5px solid var(--blue);
    color:#ffffff;
    font-weight:600;
  }

  /* ✅ PENDING (step 3 etc.) */
  .step:not(.done):not(.active) .step__dot{
    background:#f1f5f9;
    border:1px solid #e2e8f0;
    color:#94a3b8;
  }

  .step__h{ font-weight:600; font-size:18px; }
  .step__p{
    margin-top:4px;
    font-size:15px;
    color:var(--muted);
    font-weight:400;
    line-height:1.35;
  }

  /* ============================================================
    ✅ PACKAGE
    ============================================================ */

  .pkgHero{
    display:flex;
    align-items:flex-end;
    gap:10px;
    padding:2px 0 8px;
  }
  .pkgHero__num{
    font-size:50px;
    font-weight:700;
    line-height:1;
    letter-spacing:-1px;
  }
  .pkgHero__meta{
    display:flex;
    flex-direction:column;
    gap:2px;
    margin-left:2px;
  }
  .pkgHero__unit{
    font-weight:300;
    font-size:16px;
  }
  .pkgHero__price{
    font-weight:600;
    font-size:20px;
    color:#0f172a;
  }

  /* 3 columns with divider */
  .pkgCols{
    display:grid;
    grid-template-columns: 1.3fr .8fr 1fr;
    gap:0;
    padding:6px 0 4px;
    align-items:start;
  }
  .pkgCol{
    padding:0 10px;
    position:relative;
  }
  .pkgCol:not(:last-child)::after{
    content:"";
    position:absolute;
    top:2px;
    right:0;
    width:1px;
    height:100%;
    background:#e5e7eb;
  }
  /* layout for left + right */
  .pkgHero--row{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* group left content */
  .pkgHero__left{
    display: flex;
    align-items: flex-end;
    gap: 10px;
  }

  /* Change button position */
  .pkgHero .change{
    font-size: 16px;
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
  }

  .pkgHero .change:hover{
    text-decoration: none;
  }

  .kv__k{
    font-size:14px;
    color:#64748b;
    font-weight:400;
  }
  .kv__v{
    margin-top:4px;
    font-weight:500;
    font-size:15px;
    display:flex;
    align-items:baseline;
    gap:4px;
  }
  .taka-p {font-size: 15px;}

  /* Duration inline fix */
  .kv__v--inline{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:nowrap;
    white-space:nowrap;
  }
  .freeMini{
    font-size:13px;
    font-weight:600;
    color:#6d28d9;
    line-height:1;
  }

  /* Pills */
  .badges{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
  }
  .pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 12px;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
    border:1px solid #e5e7eb;
    background:#fff;
    line-height:1;
  }
  .pill--green{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
  .pill--orange{ background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
  .pill--red{ background:#fff1f2; border-color:#fecaca; color:#be123c; }
  .pill--gray{ background:#ffffff; border-color:#e5e7eb; color:#0f172a; }
  .pill--violet{ background:#f5f3ff; border-color:#ddd6fe; color:#6d28d9; }

  /* ===== Brand group like screenshot (corki + bongo + red gear) ===== */
  .brandGroup{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:6px 12px;
    border-radius:999px;
    background:#ffffff;
    border:1px solid #e5e7eb;
  }
  .brandGroup__logo{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .brandGroup__logo img{
    height:14px;
    width:auto;
    display:block;
  }
  .brandGroup__gear{
    width:22px;
    height:22px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#ffe4e6;
    border:1px solid #fecaca;
    color:#e11d48;
    font-size:12px;
  }

  /* Profile */
  .profile__name{ font-weight:700; font-size:20px; margin-bottom:10px; }
  .pRow{
    display:flex; gap:10px;
    color: #212b36;
    font-weight:500; font-size:16px;
    padding:6px 0;
  }
  .pRow i{ width:16px; color:#94a3b8; margin-top:2px; }
  .profile__actions{ display:flex; justify-content:flex-end; padding-top:6px; }
  .pRow--between{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .pRow-left{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  #profileAddress{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* optional: better spacing for Change */
  .change{
    font-size: 16px;
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
  }
  .change:hover{ text-decoration:none; }

  .loc-overlay{
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, .55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    z-index: 9999;
  }

  .loc-overlay.open{
    display: flex;
  }

  .loc-modal{
    width: min(420px, 96%);
    background: #fff;
    border-radius: 18px;
    padding: 28px 22px 18px;
    position: relative;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .20);
  }

  .loc-x{
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
  }

  .loc-h3{
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 700;
    color: #111827;
  }

  .loc-p{
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.5;
    color: #637381;
  }

  .loc-allow{
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 12px;
    background: #2563eb;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
  }

  .no-scroll{
    overflow: hidden;
  }

  .change-location-overlay{
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, .55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    z-index: 10000;
  }

  .change-location-overlay.open{
    display: flex;
  }


  .change-location-close{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    color: #606B77;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
  }

    .change-location-modal {
      width: min(600px, 96vw);
      height: min(600px, 96vw);
      background: #fff;
      border-radius: 16px;
      padding: 32px 40px;
      position: relative;
      box-shadow: 0 30px 80px rgba(0,0,0,.20);
      display: flex;
      flex-direction: column;
    }

    .change-location-title{
      margin-bottom: 25px;
      font-size: 36px;
      font-weight: 700;
      color: #1f2937;
    }

    .change-location-map{
      width: 100%;
      flex: 1;
      min-height: 0;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid #e5e7eb;
      background: #f8fafc;
    }

    .map-wrap,
    .change-location-map {
      flex: 1;
      min-height: 0;
    }

    .change-location-map iframe,
    #changeLocationMap{
      width: 100%;
      height: 100%;
      min-height: 100%;
      border: 0;
      display: block;
    }

    .change-location-btn{
      width: 100%;
      margin-top: 10px;
      height: 32px;
      border: 0;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }

  .change-location-btn{
    width: 100%;
    margin-top: 32px;
    height: 40px;
    border: 0;
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }


  /* ✅ Red warning message like screenshot */
  .reviewNotice{
    margin-top:6px;
    max-width: 420px;        /* ✅ stop full width */
    color:#e11d48;
    font-size:12px;
    font-weight:600;
    line-height:1.35;
  }

  /* ✅ button spacing */
  .outlineBtn{
    margin-top:10px;
    border:1px solid #c7d2fe;
    background:#fff;
    color:#2563eb;
    font-weight:700;
    font-size:12px;
    padding:7px 12px;
    border-radius:10px;
    cursor:pointer;
  }
  .outlineBtn:hover{
    background:#f3f6ff;
  }
  /* Review message (black + red text) */
  .reviewNotice{
    margin-top:6px;
    max-width:420px;
    font-size:12px;
    font-weight:450;
    line-height:1.35;
    color:#0f172a; /* black text */
  }

  /* Red highlighted part */
  .reviewNotice--danger{
    color:#e11d48; /* red */
    font-weight:450;
  }

  /* Button (already matches design) */
  .outlineBtn{
    margin-top:10px;
    border:1px solid #c7d2fe;
    background:#fff;
    color:#2563eb;
    font-weight:700;
    font-size:12px;
    padding:7px 12px;
    border-radius:10px;
    cursor:pointer;
  }
  .outlineBtn:hover{
    background:#f3f6ff;
  }


  .warnDot{
        width:16px;height:16px;
        border-radius:999px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        background:#fee2e2;
        border:1px solid #fecaca;
        color:#dc2626;
        font-size:10px;
      }

  .outlineBtn{
        border:1px solid #c7d2fe;
        background:#fff;
        color:#2563eb;
        font-weight:550;
        font-size:12px;
        padding:7px 12px;
        border-radius:10px;
        cursor:pointer;
      }
  .outlineBtn:hover{
        background:#f3f6ff;
      }
  .payBox{
        margin-top:12px;
        border-radius:12px;
        padding:10px 12px;
        background:#fff;
        max-width: 340px;
      }
  .payBox__title{
        font-weight:700;
        font-size:12px;
        margin-bottom:8px;
        color:#0f172a;
      }
  .payRow{
        display:flex;
        gap:6px;
        font-size:11px;
        line-height:1.45;
        margin:3px 0;
        color:#334155;
        font-weight:600;
      }
  .payKey{ min-width:49px; color:#64748b; font-weight:500; }
  .payVal{ color:#111827; font-weight:500; }
  .taka-bn {font-size: 30px;}
  /* =========================
    TRACK REFERRAL PAGE
  ========================= */
  .referral-card{
    width: 500px;
    margin: -60px 0 0 -65px;
  }

  .track-page{
    background: #f3f8ff;
  }

  /* optional wave background (put Wave.svg in assets/images/) */
  .track-title{
    color: var(--Text-Text---Primary, #212B36);
    leading-trim: both;
    text-edge: cap;
    font-family: Figtree;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 112.074%; /* 40.347px */
    letter-spacing: -1.08px;
    margin: 15px;
  }

    /* optional wave background (put Wave.svg in assets/images/) */
  .track-title-r{
    color: var(--Text-Text---Primary, #212B36);
    leading-trim: both;
    text-edge: cap;
    font-family: Figtree;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 112.074%; /* 40.347px */
    letter-spacing: -1.08px;
    margin: 15px;
  }

  .track-board{
    border-radius: 18px;
  }

  /* SUMMARY CARD BACKGROUND (RESTORED) */
  .track-summary{
    display: grid;
    grid-template-columns: 320px 1px 1fr 1px 1fr;
    align-items: center;
    gap: 22px;
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0,0,0,.06);
    padding: 20px 36px;
    margin-bottom: 10px;
  }



  .ts-user{
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .ts-user-text{
    margin-left: 10px;
    min-width: 0;
  }
  .ts-avatar{
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #eaf2ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    box-shadow: 0 14px 28px rgba(37,99,235,.12);
  }
  .ts-name{
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ts-id{
    font-size: 12px;
    color: #606B77;
    white-space: nowrap;
  }
  .ts-metric{
    text-align: center;          /* like your target image */
  }
  .ts-label{
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    line-height: 1.2;
    margin-bottom: 6px;
  }
  .ts-value{
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
  }
  .ts-metric .ts-label{
    font-size: 11px;
    color: #1e1f22;
    font-weight: 600;
    margin-bottom: 4px;
  }
  .ts-metric .ts-value{
    font-size: 18px;
    font-weight: 700;
    color: #111827;
  }
  .ts-divider{
    width: 1px;
    height: 60px;
    background: #dbe7f3;
    border-radius: 999px;
  }

  /* history card */
  .track-history{
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(229,231,235,.7);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 24px 36px 32px;
  }

  .th-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }
  .th-title{
    color: var(--blackAlpha-900, #141414);
    font-family: Figtree;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 116.667% */
  }
  .th-filter{
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }

  /* table look */
  .th-table{
    border-radius: 12px;
    overflow: hidden;
  }
  .th-table thead th{
    color: var(--Text-Text---Primary, #212B36);
    font-family: Figtree;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
  }
  .th-table tbody td{
    font-size: 14px;
    font-weight: 400;
    color: #15181d;
    border-top: 1px solid #f1f5ff !important;
    padding: 12px 12px;
  }

.reward-cell{
  width: auto;
  display: table-cell;
}

.reward-cell > span{
  display: block;
  width: 100%;
}

  /* status pills */
  .status-pill{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    border: 1px solid transparent;
    line-height: 1;
  }
  .status-pending{
    background: #fff7ed;
    border-color: #fed7aa;
    color: #9a3412;
  }
  .status-denied{
    background: #fff1f2;
    border-color: #fecaca;
    color: #be123c;
  }
  .status-success{
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
  }

  .mail-ic{
    color: #2563eb;
    font-size: 14px;
  }


  /* mailbox button in table */
  .mail-btn{
    border:0;
    background:transparent;
    color:#2563eb;
    font-size:16px;
    cursor:pointer;
    padding:6px 8px;
    border-radius:10px;
  }
  .mail-btn:hover{
    background:#eef5ff;
  }

  /* modal design like screenshot */
  .thanks-modal{
    border:0;
    border-radius:16px;
    padding:10px;
  }

  .thanks-close{
    position:absolute;
    right:14px;
    top:10px;
    width:34px;
    height:34px;
    border-radius:10px;
    border:0;
    background:#fff;
    font-size:32px;
    line-height:1;
    color:#111827;
    cursor:pointer;
  }

  .thanks-body{
    padding:45px;
  }

  .thanks-title{
    color: var(--Light-Primary, #212B36);
    font-family: Figtree;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 44px; /* 122.222% */
    letter-spacing: -1.44px;
  }

  .thanks-text{
    font-size:18px;
    color:#64748b;
    line-height:1.5;
    margin:0 auto 12px;
    max-width:500px;
  }

  .thanks-name{
    font-size:18px;
    font-weight:400;
    color:#64748b;
    margin-bottom:16px;
  }

  .thanks-send{
    width:100%;
    border:0;
    border-radius:10px;
    padding:12px 14px;
    background:#2563eb;
    color:#fff;
    font-weight:700;
    cursor:pointer;
  }
  .thanks-send:hover{
    filter:brightness(.95);
  }
  /* ===== FIX Bootstrap modal conflict with your .modal rule ===== */
  #thanksModal.modal{
    opacity: 1 !important;
    pointer-events: auto !important;

    display: none; /* Bootstrap toggles .show */
    inset: 0 !important;
    align-items: initial !important;
    justify-content: initial !important;
    z-index: 1055 !important;
  }

  #thanksModal.modal.show{
    display: block !important;
  }

  .modal-backdrop{
    z-index: 1050 !important;
  }

  /* =========================================================
    ✅ DROPDOWN FIX (keep ONE dropdown system)
    ========================================================= */

  /* Desktop dropdown: use opacity/visibility (not display:none) */
  .nav-dd .dd-menu{
    display: block !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.98);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }

  /* Show on hover (desktop) */
  .nav-dd:hover .dd-menu{
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  /* Show when JS adds .show (mobile click support) */
  .nav-dd .dd-menu.show{
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }


  /* ✅ Track Referral hover fix (ONLY) */
  .track{
    cursor: pointer;
  }

  .track:hover{
    opacity: 1;                 /* makes it feel active */
    text-decoration: underline; /* visible hover feedback */
  }

  .track:focus-visible{
    outline: 2px solid rgba(255,255,255,.85);
    outline-offset: 3px;
    border-radius: 8px;
  }
  /* ==========================================
    ✅ OTP MODAL LAYOUT FIX (override)
    Put at END of style.css
    ========================================== */

  /* Make the OTP overlay the fullscreen backdrop */
  #otpOverlay{
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    z-index: 9999;
  }

  /* Your .hidden already hides it */
  #otpOverlay.hidden{
    display: none;
  }

  /* Make the modal box a centered card (NOT fullscreen) */
  #otpOverlay .otp-modal{
    width: min(610px, 96%);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .20);
    border: 1px solid rgba(229, 231, 235, .9);
    padding: 40px 80px;
    position: relative;
    text-align: left;
    display: block;       /* ✅ important */
    opacity: 1;           /* ✅ visible */
    pointer-events: auto; /* ✅ clickable */
  }

  #otpOverlay .modal-close{
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    top: 18px;
    right: 18px;
    font-size: 30px;
    color: #606B77;
    line-height: 1;
  }

  #otpOverlay .modal-close:hover{
    background: transparent !important;
    color: #111827;
  }

  /* Title + subtitle spacing */
  #otpOverlay .modal-title{
    padding: 25px 0 8px;
    color: var(--Light-Primary, #212B36);
    text-align: center;
    font-family: Figtree;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 44px; /* 122.222% */
    letter-spacing: -1.44px;
  }

  #otpOverlay .modal-sub{
    color: var(--Light-Secondary, #637381);
    text-align: center;
    font-family: Figtree;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 110% */
  }

  /* OTP boxes row */
  #otpOverlay .otp{
    gap: 12px;
    margin-top: 6px;
    margin-bottom: 14px;
  }

  /* OTP box style + show dash placeholder */
  #otpOverlay .otp-box{
    width: 61px;
    height: 50px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: 16px;
    font-weight: 400;
    color: #111827;
    text-align: center;
  }

  /* Track Referral OTP row - isolated from shared OTP modal styles */
  #trackOtpOverlay .track-otp-row{
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 14px 0 14px;
    padding: 4px;          /* gives glow space */
    overflow: visible;     /* important */
  }

  #trackOtpOverlay .track-otp-box{
    width: 60px;
    min-width: 60px;
    height: 54px;
    padding: 0;
    border: 1px solid #d9dde3;
    border-radius: 10px;
    background: #fff;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: #212B36;
    outline: none;
    box-shadow: none;
    position: relative;
    z-index: 1;
  }

  .track-otp-box:focus,
  .track-otp-box:focus-visible {
    border: 1px solid transparent !important;
    background-image:
      linear-gradient(#fff, #fff),
      linear-gradient(180deg, #2390FE, #9A21EA) !important;

    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    box-shadow: none !important;
    outline: none !important;
  }

  #otpOverlay .otp-box::placeholder{
    color: #9ca3af;          /* light grey dash */
    font-weight: 600;
  }

  /* Remove number spinners (optional safety) */
  #otpOverlay .otp-box::-webkit-outer-spin-button,
  #otpOverlay .otp-box::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
  }

  /* Verify button like design 2 */
  #otpOverlay .btn-wide{
    margin-top: 8px;
  }
  #otpOverlay #verifyBtn{
    height: 42px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 700;
  }

  .otp-timer{
  margin-top: 12px;
  text-align: right;
  font-size: 14px;
  color: #606B77;
  font-weight: 500;
}

  .otp-terms{
        margin: 10px 0 0;
    font-size: 14px;
    font-weight: 400;
    color: #606B77;
    text-align: center;
    line-height: 1.35;
  }
  /* Terms line under button */
  #otpOverlay .otp-terms{
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 400;
    color: #606B77;
    text-align: center;
    line-height: 1.35;
  }
  #otpOverlay .otp-terms a{
    color: #0071FF;
    text-decoration: underline;
    font-weight: 400;
  }
  #otpOverlay .otp-terms a:hover{
    text-decoration: underline;
  }

  /* Links area spacing (Resend / Return) */
  #otpOverlay .modal-links{
    margin-top: 14px;
    gap: 10px;
  }
  #otpOverlay .resend,
  #otpOverlay .return{
    font-size: 14px;
    font-weight: 400;
  }

  /* If you are using .referral_modal inside otpOverlay, keep it the same */
  #otpOverlay .referral_modal{
    width: min(450px, 96%);
  }

  /* Keep OTP boxes centered and button full width */
  #otpOverlay .otp{
    display: flex;
    justify-content: center;
    gap: 16px;
  }

  #otpOverlay .btn-wide{
    width: 100%;
  }


  /* Remove underline on Track Referral hover */
  .track,
  .track:hover,
  .track:focus,
  .track:active {
    text-decoration: none !important;
  }
  /* =========================
    FIX: Track summary avatar + metric font sizes
    Paste at END of CSS
  ========================= */

  /* Avatar box size (left) */
  .ts-avatar{
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  /* If avatar is an <img> or inline <svg> */
  .ts-avatar img,
  .ts-avatar svg{
    width: 18px !important;
    height: 18px !important;
    display: block !important;
  }

  /* Name + ID sizing (left text) */
  .ts-name{
    color: var(--blackAlpha-800, #333);
    font-family: Figtree;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px; /* 120% */
  }
  .ts-id{
    color: var(--Text-Text---Secondary, #637381);
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }

  /* Metric label + value sizing (center/right) */
  .ts-metric .ts-label{
    color: var(--Text-Text---Primary, #212B36);
    font-family: Figtree;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 155.556% */
  }

  .ts-metric .ts-value{
    color: var(--blackAlpha-900, #141414); /* text-3xl/lineHeight-9/font-bold */
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px; /* 120% */
  }

  /* If your currency sign is wrapped in a span like <span class="taka-bn">৳</span> */
  .ts-metric .ts-value .taka-bn,
  .ts-metric .ts-value .taka{
    font-size: 1em !important;           /* same size as number */
    line-height: 1 !important;
  }

  .mail-btn{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    padding: 0;
    color: #2563eb;
    text-align: left;
  }

  .mail-btn__icon{
    width: 20px;
    height: 20px;
    display: block;
    flex: 0 0 14px;
  }

  .mail-btn__text{
    line-height: 1.2;
    white-space: nowrap;
  }

  /* =========================
    HERO (match sample)
    Paste at END of style.css
  ========================= */

  /* White background */
  .hero{
    position: relative;
    overflow: hidden;
  }

  /* Image area */
  .hero-graphic--custom{
    position: relative;
    height: 320px;          /* 🔧 adjust overall hero image height */
    margin-bottom: 12px;
  }

  /* Yellow circle */
  .hero-circle--custom{
    position: absolute;
    left: 80px;             /* 🔧 move circle left/right */
    top: 10px;              /* 🔧 move circle up/down */
    width: 240px;           /* 🔧 circle size */
    height: 240px;          /* 🔧 circle size */
    border-radius: 999px;
    background: radial-gradient(circle at 35% 30%, #ffd54a, #f4b400);
    z-index: 0;
  }

  /* Person image */
  .hero-person--custom{
    position: absolute;
    left: 10px;             /* 🔧 move person left/right */
    top: -70px;             /* 🔧 move person up/down */
    height: 600px;          /* 🔧 person size */
    width: auto;
    object-fit: contain;
    z-index: 1;
    filter: drop-shadow(0 12px 18px rgba(0,0,0,.12));
  }

  .hero-left{
    position: relative;
  }

  .hero-title,
  .hero-subtitle,
  .hero-actions{
    position: relative;
    z-index: 50;          /* text above everything */
  }

  /* ✅ Keep image behind + stop it covering text area */
  .hero-graphic{
    position: relative;
    z-index: 1;           /* image layer */
    margin-bottom: 28px;  /* space between image and text */
    overflow: hidden;     /* prevents image fog spilling down */
  }

  /* keep image elements behind text */
  .hero-circle,
  .hero-person,
  .hero-wave{
    z-index: 1 !important;
  }
  /* =========================
    HERO - WHITE BG + WAVE LIKE SAMPLE
  ========================= */

  .hero.hero--custom{
    position: relative;
    background: #fff;         /* ✅ white like your sample */
    overflow: hidden;
  }

  /* wave is a full-width background layer */
  .hero-wave.hero-wave--custom{
    position: absolute;
    inset: 0;
    background-image: url("../images/Wave.svg");
    background-repeat: no-repeat;
    background-position: center 70%; /* ✅ adjust wave position */
    background-size: 1200px auto;    /* ✅ adjust wave size */
    opacity: 1;
    z-index: 0;
    pointer-events: none;
  }

  /* keep content above wave */
  .hero.hero--custom .container,
  .hero.hero--custom .hero-grid{
    position: relative;
    z-index: 2;
  }

  /* ✅ make the left hero image sit like the sample */
  .hero-graphic.hero-graphic--custom{
    position: relative;
    height: 280px;           /* controls top image area */
    margin-bottom: 10px;
  }

  .hero-person.hero-person--custom{
    position: absolute;
    left: -60px;             /* move left/right */
    top: -95px;              /* move up/down */
    height: 550px;           /* ✅ bigger like sample */
    width: auto;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
  }

  /* ✅ ensure text is always visible (not washed by wave) */
  .hero-left{
    position: relative;
    z-index: 3;
  }

  .hero-title,
  .hero-subtitle{
    position: relative;
    z-index: 3;
  }

  /* If your text still looks faded, force solid color */
  .hero-title{ color: #111827; }
  .hero-subtitle{ color: #606B77; }

  /* Make main a positioning context */
  .hero.hero--custom{
    position: relative;
    overflow: hidden;
    padding: 30px 0;
  }

  /* background layer */
  .page{
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;  
  }
  .grid-p{
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 16px;
    align-items: stretch;
    padding: 0 25px;
  }



  /* ✅ stretch wave wider than screen to remove right gap */
  .wave{
    position: absolute;
    left: 50%;
    bottom: -30px; 
    transform: translateX(-50%);
              /* ✅ key: bigger than 100vw */
    max-width: none;        /* ✅ allow > viewport */
    height: auto;
    opacity: .35;           /* match your design */
  }

  .container.hero-grid{
    position: relative;
    z-index: 1;
  }

  /* Header row layout (left title + right filter) */
  header.nav {
    display: block !important;
    background: #fff;
    border-bottom: 1px solid rgba(229,231,235,.8);
    /* position: relative; */
    z-index: 100;
  }
  .th-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }

  /* Match screenshot filter button */
  .th-filter-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    height: 36px;
    padding: 0 12px;
    background:#fff;
    border: 1px solid #e9eef5;
    border-radius: 10px;
    font-family: "Figtree", "Noto Sans Bengali", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color:#374151;

    box-shadow: 0 6px 18px rgba(31,41,55,.06);
    cursor:pointer;
  }

  /* remove default focus glow */
  .th-filter-btn:focus{
    outline:none;
    box-shadow: 0 6px 18px rgba(31,41,55,.06);
  }

  .th-filter-ico{
    display:grid;
    place-items:center;
    color:#606B77;
  }

  /* If any bootstrap caret appears, hide it globally for safety */
  .th-filter-btn::after{
    display:none !important;
  }

  /* Dropdown menu style a bit closer (optional) */
  .th-head .dropdown-menu{
    border:1px solid #e9eef5;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(31,41,55,.12);
    padding: 8px;
  }

  .th-head .dropdown-item{
    border-radius: 10px;
    padding: 10px 10px;
    font-weight: 600;
  }

  .th-head .dropdown-item:active{
    background:#eef6ff;
    color:#111827;
  }

  /* =========================================
    FIX: Partner logos row (Chorki | Bongo + spark)
    ========================================= */

  .nc-rowhead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }

  .nc-partners{
    display:inline-flex;
    align-items:center;
    gap:10px;
  }

  .sep{
    color:#cbd5e1;
    font-weight:700;
    line-height:1;
  }

  .brand{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:relative;      /* needed for spark absolute positioning */
  }

  .brand img{
    display:block;
    height:auto;
    max-height:18px;        /* keeps logos consistent */
    width:auto;
  }

  .brand.bongo img{
    max-height:18px;
  }

  /* Spark badge pinned to top-right of logo */
  .badge-spark{
    position:absolute;
    top:-8px;
    right:-10px;
    width:18px;
    height:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
  }

  .badge-spark img{
    width:18px !important;
    height:18px !important;
    display:block;
  }

  /* ===============================
    TIMELINE RAIL FIX (match target)
    Paste at END of style.css
  =============================== */

  /* spacing between steps (gap between circles) */
  .timeline .step{
    padding: 8px 0 !important;
  }

  /* keep the line a little shorter */
  .timeline::after{
    top: 40px !important;
    bottom: 40px !important;
  }

  /* ✅ create a white "cut" around each circle so line doesn't touch */
  .step__dot{
    box-shadow: 0 0 0 6px #fff !important;  /* 👈 creates the gap */
  }

  /* optional: keep pending dots border consistent */
  .step:not(.done):not(.active) .step__dot{
    border-color: #e2e8f0 !important;
  }
  /* =========================================
    Remove tail line after LAST step (WORKING)
  ========================================= */
  .timeline .step:last-child{
    position: relative;
  }

  /* paint a white strip over the vertical line under the last dot */
  .timeline .step:last-child::after{
    content:"";
    position:absolute;
    /* center of the rail column */
    left: calc(var(--railW) / 2);
    transform: translateX(-50%);
    /* start just below the dot */
    top: calc(16px + var(--dot) + 6px);
    width: var(--line);
    height: 100vh;          /* big enough to cover the rest */
    background: #fff;       /* same as card background */
    z-index: 5;             /* above the line */
  }

  /* =========================================
    FIX: partner logo should sit near Saved
    (no huge empty space)
  ========================================= */

  .badges--pkg{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;  /* ✅ important */
  }

  /* partner logo should NOT take extra space */
  .partner-pill{
    flex: 0 0 auto !important;     /* ✅ no stretching */
    margin-left: 0 !important;     /* ✅ remove auto push */
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
  }

  /* size like sample */
  .partner-pill img{
    height: 62px !important;
    width: auto !important;
    padding-bottom: 16px;
  }

  .step-dot.done { 
    font-weight: 700; 
    background-color: #99bef1;
    color: #1d6ee0;
  }

  /* SUCCESS MODAL */
  .success-modal{
    max-width: 610px;
    width: calc(100% - 32px);
    background: #fff;
    border-radius: 16px;
    padding: 40px 80px;
    position: relative;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0,0,0,.18);
  }

  .success-icon{ display:flex; justify-content:center; margin-top: 4px; margin-bottom: 14px; }



  .success-title{
    font-size: 22px;
    font-weight: 700;
    margin: 8px 0 10px;
    color: #101828;
  }

  .success-sub{
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #667085;
    margin: 0 0 18px;
  }

  .success-btn{
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .success-icon-img{
    width: 50px;
    height: 50px;
    display: block;
  }


      /* SECTION */
  /* =========================
    REFERRAL HERO (SCOPED FIX)
    ========================= */

  .referral-section{
    min-height: 100vh;
    /* height: 650px; */
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden; /* keep if you want clean edges */
    background: #fff;
  }

  /* IMPORTANT: style.css is inside assets/css, so use ../images */
  .referral-section::before{
    content:"";
    position:absolute;
    inset:0;
    background-image: url("../images/Wave.svg");
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events:none;
    z-index: 0;
    margin-top: 60px;
    opacity: 70%;
  }

  .referral-section::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index: 0;
  }

  .referral-inner{
    position: relative;
    z-index: 2; /* content above backgrounds */
  }

  .left-wrap{ position: relative; overflow: visible !important; }

  /* ✅ HERO IMAGE position (top-left like reference) */
.ref-hero-img {
    position: absolute;
    top: -20px;
    left: -40px;
    display: block;
    max-width: 120%;
    width: min(550px, 100%);
    height: auto;
    z-index: 3;
    transform: translateY(-40px);
}

  /* ✅ Text block in the highlighted area */
  .ref-left-text{
    position: absolute;
    left: 25px;
    top: 260px;
    z-index: 4;
    max-width: 520px;
  }

  .ref-headline{
    color: var(--Text-Text---Primary, #212B36);
    leading-trim: both;
    text-edge: cap;
    font-size: 55px;
    font-style: normal;
    font-weight: 500;
    line-height: 112.074%; /* 71.727px */
    /* letter-spacing: 1.44px; */
    margin-top: 100px;
  }

  .ref-subline{
    font-size: 25px;
    font-weight: 500;
    color: rgba(11, 18, 32, 0.75);
    margin-bottom: 12px;
  }
  /* =========================
    HERO BUTTONS (match screenshot)
  ========================= */
  .ref-left-text{
    text-align: left;
  }

  .ref-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 15px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
    margin-right: 10px;
  }

  /* Left button (outline blue) */
  .ref-btn--primary{
    background: #fff;
    background: linear-gradient(#fff, #fff) padding-box,
                linear-gradient(#005CDC);
    border: 1px solid transparent;
    color: #0071ff;
  }

  .ref-btn--primary:hover {
    border: 1px solid #2563eb; 
    background: #eff6ff;      
  }
  
  .ref-btn--primary:active{
    transform: scale(.98);
  }

  /* Right button (light gray) */
  .ref-btn--ghost{
    background: #f8fafa;
    border: 1px solid #d3dbdf;
    color: #50596a;
  }

  .ref-btn--ghost:hover{
    background: #e9eef5;
  }

  .ref-btn--ghost:active{
    transform: scale(.98);
  }

  /* Optional: keep nice focus */
  .ref-btn:focus-visible{
    outline: 2px solid rgba(37,99,235,.35);
    outline-offset: 2px;
  }

    /* LEFT WRAP (controls image + text positioning) */
  .left-wrap{
    position: relative;
    height: 750px;
    /* margin-top: -80px; */
  }

  /* Hero image should float on top-left */
  .hero-img{
    position: absolute;
    top: -40px;      /* move up */
    left: 0;
    max-width: 520px;
    width: 100%;
    height: auto;
    z-index: 2;
  }

  /* Text should sit in highlighted area */
  .left-text{
    position: absolute;
    left: 0;
    top: 250px;     /* adjust this value */
    z-index: 3;
  }

  /* hide close button on desktop */
  .menu-close{
    display: none;
  }

  .mail-btn__text{
    display: none;
  }

  /* =========================
   TRACK OTP MODAL ONLY
   ========================= */

.track-otp-modal {
  position: relative;
  width: 100%;
  max-width: 650px;
  background: #ffffff;
  border-radius: 24px;
  padding: 34px 34px 28px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.16);
}

.track-otp-modal .modal-close {
  position: absolute;
  top: 18px;
  right: 20px;
  border: 0;
  background: transparent;
  font-size: 22px;
  color: #606B77;
  line-height: 1;
  cursor: pointer;
}

.track-otp-title {
  margin: 0 0 10px;
  font-size: 36px;
  line-height: 1.15;
  font-weight: 700;
  color: #111827;
  text-align: left;
}

.track-otp-sub {
  margin: 0 0 28px;
  max-width: 400px;
  font-size: 20px;
  line-height: 1.45;
  color: #606B77;
  text-align: left;
}

.track-otp {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.track-otp-box {
  width: 76px;
  height: 66px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  font-size: 28px;
  font-weight: 500;
  text-align: center;
  color: #111827;
  outline: none;
  box-shadow: none;
}

.track-otp-box::placeholder {
  color: #c7cdd6;
}

.track-otp-box:focus {
  border-color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.08);
}

.track-otp-timer {
  margin: 0 0 24px;
  font-size: 13px;
  line-height: 1.2;
  color: #3f3f46;
  text-align: right;
  font-weight: 600;
}

.track-verify-btn {
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 14px;
  background: #0b5ed7;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 18px;
}

.track-verify-btn:disabled {
  background: #0b5ed7;
  color: #ffffff;
  opacity: 1;
  cursor: not-allowed;
}

.track-otp-terms {
  margin: 0 auto 18px;
  max-width: 430px;
  font-size: 12px;
  line-height: 1.5;
  color: #7c8594;
  text-align: center;
}

.track-otp-terms a {
  color: #2563eb;
  text-decoration: underline;
}

.track-otp-links {
  text-align: center;
}

.track-otp-links .resend {
  font-size: 14px;
  color: #4b5563;
}

.track-otp-links .resend a {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 767px) {
  .track-otp-modal {
    max-width: 94%;
    padding: 24px 18px 22px;
    border-radius: 18px;
  }

  .track-otp-title {
    font-size: 24px;
  }

  .track-otp-sub {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .track-otp {
    gap: 8px;
    justify-content: center;
  }

  .track-otp-box {
    width: 46px;
    height: 46px;
    font-size: 20px;
    border-radius: 10px;
  }

  .track-otp-timer {
    text-align: center;
    margin-bottom: 18px;
  }

  .track-verify-btn {
    height: 48px;
    font-size: 16px;
    border-radius: 12px;
  }
}