/* =========================================================
   THEME  (only navy + gold shades - no orange)
========================================================= */
:root{
  --orange:#D4B06A;              /* gold accent */
  --gold-rgb:212,176,106;        /* same gold, for rgba() glows */
  --blue:#244082;                /* main brand blue */
  --blue-glow-rgb:110,150,230;   /* soft light-blue glow */
  --navy:#031a3c;
  --navy-2:#082650;
  --navy-3:#0d3569;
  --ink:#07172f;
  --muted:#65748b;
  --line:rgba(3,26,60,.13);
  --white:#fff;
  --green:#16a34a;
  --green-dark:#087f3d;
  --green-light:#22c55e;
}

/* =========================================================
   RESET
========================================================= */
*,
*::before,
*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

button,
a{font:inherit}

button{cursor:pointer}

/* =========================================================
   HERO
========================================================= */
.bond-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background-color: #ffffff !important;
  background-image:
    radial-gradient(520px 300px at 80% 4%, rgba(var(--gold-rgb), .10), transparent 68%),
    radial-gradient(600px 340px at 0% 100%, rgba(3,26,60,.07), transparent 70%),
    linear-gradient(110deg, #eaf7fc 0%, #ffffff 55%, #ffffff 100%) !important;
}


.bond-hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:620px;
  height:620px;
  right:-330px;
  top:-385px;
  border:1px solid rgba(3,26,60,.06);
  border-radius:50%;
  box-shadow:
    0 0 0 42px rgba(3,26,60,.018),
    0 0 0 86px rgba(3,26,60,.014);
}

.bond-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:.28;
  background-image:
    linear-gradient(rgba(3,26,60,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(3,26,60,.028) 1px,transparent 1px);
  background-size:68px 68px;
  pointer-events:none;
}

.hero-container{
  width:min(1282px,calc(100% - 84px));
  margin:0 auto;
  padding:18px 0 0;
}

/* =========================================================
   MAIN CONTENT
========================================================= */
.hero-main{
  min-height:335px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 540px;
  align-items:center;
  gap:40px;
}

/* =========================================================
   LEFT CONTENT
========================================================= */
.hero-copy{
  min-width:0;
  padding:8px 0 22px;
}

/* ---------- Trust badge ---------- */
.trust{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:34px;
  padding:0 17px 0 8px;
  margin-bottom:13px;
  color:#fff;
  background:linear-gradient(135deg,var(--green-dark),var(--green),var(--green-light));
  border:1px solid rgba(255,255,255,.18);
  border-radius:7px 14px 14px 7px;
  font-family:Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:.15px;
  box-shadow:
    0 5px 15px rgba(22,163,74,.22),
    inset 0 1px 0 rgba(255,255,255,.2);
  overflow:hidden;
  animation:trust-entry .65s cubic-bezier(.22,1,.36,1) both;
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
}

.trust::before{
  content:"";
  position:absolute;
  top:0;
  left:-80px;
  width:45px;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-20deg);
  animation:trust-shine 3.5s ease-in-out infinite;
}

.trust::after{
  content:"";
  position:absolute;
  right:7px;
  top:50%;
  width:6px;
  height:6px;
  border-top:1.5px solid rgba(255,255,255,.8);
  border-right:1.5px solid rgba(255,255,255,.8);
  transform:translateY(-50%) rotate(45deg);
  opacity:.8;
}

.trust:hover{
  transform:translateY(-2px) scale(1.015);
  filter:brightness(1.06);
  box-shadow:
    0 8px 22px rgba(22,163,74,.3),
    0 0 0 3px rgba(34,197,94,.08),
    inset 0 1px 0 rgba(255,255,255,.25);
}

.trust-icon{
  position:relative;
      display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 2px solid #ffffff;
    border-radius: 8px;
    background: transparent;
    color: #ffffff;
    font-size: 18px;
}

.trust:hover .trust-icon{transform:rotate(-5deg) scale(1.05)}

.trust span:not(.trust-icon){
  position:relative;
  z-index:2;
  white-space:nowrap;
}

@keyframes trust-entry{
  from{opacity:0;transform:translateY(8px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes icon-pulse{
  0%,100%{
    box-shadow:
      0 0 0 2px rgba(255,255,255,.05),
      inset 0 0 6px rgba(255,255,255,.1);
  }
  50%{
    box-shadow:
      0 0 0 4px rgba(255,255,255,.08),
      0 0 12px rgba(255,255,255,.15),
      inset 0 0 8px rgba(255,255,255,.15);
  }
}

@keyframes trust-shine{
  0%{left:-80px}
  30%,100%{left:120%}
}

/* ---------- Title ---------- */
.hero-title{
  max-width:690px;
  margin:0;
  color:var(--navy);
  font-size:45px;
  line-height:1.03;
  letter-spacing:-2.15px;
  font-weight:850;
}

.hero-subtitle{
  display:flex;
  align-items:center;
  gap:7px;
  margin:16px 0 22px;
  color:var(--navy);
  font-size:21px;
  line-height:1.1;
  font-weight:750;
}

.hero-subtitle .accent{color:var(--orange)}


/* =========================================================
   STATS
========================================================= */
.stats{
  width:min(100%,635px);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-bottom:22px;
}

.stat{
  min-width:0;
  min-height:76px;
  padding:11px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
}

.stat:first-child{padding-left:0}

.stat:not(:last-child)::after{
  content:"";
  position:absolute;
  top:18px;
  right:0;
  width:1px;
  height:40px;
  background:var(--line);
}

.stat strong{
  color:var(--navy);
  font-size:18px;
  line-height:1.05;
  letter-spacing:-.4px;
  font-weight:800;
}

.stat span{
  margin-top:6px;
  color:#69778b;
  font-size:11px;
  line-height:1.2;
}

/* =========================================================
   ACTIONS
========================================================= */
.actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:11px;
}

.btn{
  min-height:46px;
  border-radius:25px;
  padding:0 21px;
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  text-decoration:none;
  font-size:14px;
  font-weight:750;
  transition:transform .35s ease,background .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease;
}

.btn-orange{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:var(--blue);
  box-shadow:0 8px 20px rgba(36,64,130,.22);
}

.btn-orange::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:70%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  transform:skewX(-20deg);
  transition:left .6s ease;
}

.btn-orange:hover{
  color:#fff;
  background:var(--navy);
  transform:translateY(-3px);
  box-shadow:
    0 10px 24px rgba(3,26,60,.18),
    0 0 0 4px rgba(3,26,60,.06);
}

.btn-orange:hover::before{left:140%}

.btn-orange:active{transform:translateY(-1px) scale(.98)}

.btn-orange b{
  font-size:20px;
  line-height:1;
  font-weight:400;
}

/* =========================================================
   RIGHT FEATURED PANEL
========================================================= */
.feature-wrap{
  position:relative;
  min-width:0;
  height:272px;
  padding-top:10px;
}

.feature-card{
  position:relative;
  height:262px;
  overflow:hidden;
  border-radius:18px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.04),transparent 35%),
    linear-gradient(135deg,#0b356c 0%,var(--blue) 72%);
  box-shadow:
    0 18px 42px rgba(3,26,60,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.feature-card::before{
  content:"";
  position:absolute;
  width:410px;
  height:410px;
  right:-205px;
  top:-240px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:50%;
  box-shadow:
    0 0 0 34px rgba(255,255,255,.018),
    0 0 0 70px rgba(255,255,255,.012);
}

/* soft blue glow (was orange) */
.feature-card::after{
  content:"";
  position:absolute;
  left:-75px;
  bottom:-80px;
  width:280px;
  height:150px;
  border-radius:50%;
  background:rgba(var(--blue-glow-rgb),.16);
  filter:blur(28px);
}

.slide{
  position:absolute;
  inset:0;
  padding:28px 17px 23px 27px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 205px;
  align-items:center;
  gap:18px;
  opacity:0;
  transform:translateX(20px);
  transition:opacity .4s ease,transform .4s ease;
  z-index:2;
}

.slide.active{
  opacity:1;
  transform:translateX(0);
}

.slide-copy{
  min-width:0;
  align-self:start;
  padding-top:5px;
}

.feature-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:13px;
  color:#22c55e;
  font-size:20px;
  line-height:1;
  font-style:italic;
  font-weight:850;
}

.feature-label::before{
  content:"";
  width:20px;
  height:2px;
  border-radius:3px;
  background:#70ef37;
}

.bond-title{
  max-width:300px;
  margin:0;
  color:#fff;
  font-size:25px;
  line-height:1.08;
  letter-spacing:-.65px;
  font-weight:780;
}

.bond-description{
  max-width:300px;
  margin:10px 0 0;
  color:rgba(255,255,255,.64);
  font-size:10px;
  line-height:1.45;
}

.invest{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:800;
}

.invest-arrow{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.36);
  border-radius:50%;
  transition:.22s ease;
}

.invest:hover .invest-arrow{
  color:#fff;
  background:var(--orange);
  border-color:var(--orange);
  transform:translateX(3px);
}

/* ---------- Yield card ---------- */
.yield-card{
  position:relative;
  align-self:center;
  height:214px;
  overflow:hidden;
  padding:25px 17px 14px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:21px 21px 30px 21px;
  background:
    radial-gradient(circle at 76% 87%,rgba(var(--blue-glow-rgb),.32),transparent 32%),
    linear-gradient(145deg,#0a2d60,var(--blue) 82%);
  box-shadow:0 15px 30px rgba(0,0,0,.24);
}

.yield-card::before{
  content:"";
  position:absolute;
  right:-18px;
  bottom:-33px;
  width:108px;
  height:108px;
  border:2px solid rgba(255,255,255,.18);
  border-radius:50%;
  box-shadow:
    0 0 0 9px rgba(255,255,255,.04),
    0 0 0 19px rgba(255,255,255,.025);
}

/* gold dot (glow now gold, not orange) */
.yield-card::after{
  content:"";
  position:absolute;
  right:34px;
  bottom:41px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 14px rgba(var(--gold-rgb),.75);
}

.yield-label{
  position:relative;
  z-index:3;
  display:block;
  color:#9eacc0;
  font-size:9px;
  font-weight:650;
}

.yield-number{
  position:relative;
  z-index:3;
  margin-top:4px;
  color:#fff;
  font-size:47px;
  line-height:.93;
  letter-spacing:-2.5px;
  font-weight:900;
  white-space:nowrap;
}

.yield-number span{color:var(--orange)}

.yield-note{
  position:relative;
  z-index:3;
  margin-top:7px;
  color:#8190a6;
  font-size:8px;
}

.maturity{
  position:relative;
  z-index:3;
  margin-top:15px;
  padding-top:9px;
  border-top:1px solid rgba(255,255,255,.10);
  color:#8492a8;
  font-size:8px;
}

.maturity strong{
  display:block;
  margin-top:3px;
  color:#fff;
  font-size:12px;
}

.maturity strong span{color:var(--orange)}

/* ---------- Floating chip ---------- */
.rate-chip{
  position:absolute;
  z-index:10;
  top:0;
  right:0;
  min-width:106px;
  padding:8px 11px 9px;
  border-radius:10px 10px 0 10px;
  background:#fff;
  box-shadow:0 10px 23px rgba(3,26,60,.14);
}

.rate-chip small{
  display:block;
  color:#7c899b;
  font-size:6px;
  font-weight:850;
  letter-spacing:.5px;
}

.rate-chip strong{
  display:block;
  margin-top:2px;
  color:var(--orange);
  font-size:16px;
  line-height:1;
}

/* ---------- Slider dots ---------- */
.slider-dots{
  position:absolute;
  z-index:8;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  display:flex;
  gap:7px;
}

.slider-dot{
  width:17px;
  height:3px;
  padding:0;
  border:0;
  border-radius:5px;
  background:rgba(255,255,255,.27);
}

.slider-dot.active{
  width:25px;
  background:#fff;
}

/* =========================================================
   BOTTOM FEATURE STRIP
   Desktop = single bar  |  Mobile = 2x2 grid
========================================================= */
.bond-feature-strip{
  --f-navy:var(--navy,#031a3c);
  --f-gold:var(--orange,#D4B06A);
  --f-line:rgba(3,26,60,.12);

  position:relative;
  z-index:5;
  width:100%;
  background:rgba(255,255,255,.94);
  border-top:1px solid rgba(3,26,60,.10);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.bond-feature-inner{
  width:min(1282px,calc(100% - 84px));
  min-height:72px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr 1fr auto;
  align-items:center;
}

.bond-feature-title{
  min-width:0;
  padding-right:20px;
}

.bond-feature-title small,
.bond-feature-title strong{display:block}

.bond-feature-title small{
  color:var(--f-gold);
  font-size:9px;
  line-height:1;
  font-weight:800;
  letter-spacing:1.4px;
  text-transform:uppercase;
}

.bond-feature-title strong{
  margin-top:6px;
  color:var(--f-navy);
  font-size:14px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:.2px;
}

.bond-feature-stat{
  min-width:0;
  height:40px;
  padding:0 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-left:1px solid var(--f-line);
  text-align:center;
}

.bond-feature-stat small{
  color:#7c8798;
  font-size:9px;
  line-height:1;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
}

.bond-feature-stat strong{
  margin-top:6px;
  color:var(--f-navy);
  font-size:14px;
  line-height:1;
  font-weight:800;
  white-space:nowrap;
}

.bond-feature-action{
  justify-self:end;
  height:42px;
  margin-left:18px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:24px;
  color:#fff;
  background:var(--blue);
  text-decoration:none;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  box-shadow:0 8px 18px rgba(3,26,60,.18);
  transition:transform .22s ease,background .22s ease,box-shadow .22s ease,color .22s ease;
}

/* FIXED: was "color:var#244082" (invalid) */
.bond-feature-action:hover{
  color:var(--navy);
  background:var(--f-gold);
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(var(--gold-rgb),.35);
}

/* =========================================================
   LAPTOP (up to 1120px)
========================================================= */
@media(max-width:1120px){
  .hero-container{width:calc(100% - 48px)}

  .hero-main{
    grid-template-columns:minmax(0,1fr) 460px;
    gap:25px;
  }

  .hero-title{font-size:39px}

  .stat{
    padding-left:12px;
    padding-right:12px;
  }

  .stat strong{font-size:16px}

  .slide{
    grid-template-columns:minmax(0,1fr) 170px;
    padding-left:20px;
  }

  .yield-card{height:202px}
  .yield-number{font-size:39px}

  .bond-feature-inner{
    width:calc(100% - 48px);
    grid-template-columns:1.3fr 1fr 1fr 1fr 1fr auto;
  }
  .bond-feature-stat{padding:0 8px}
  .bond-feature-stat strong{font-size:13px}
  .bond-feature-action{padding:0 16px;margin-left:10px}
}

/* =========================================================
   TABLET + MOBILE (up to 900px) - LEFT ALIGNED
========================================================= */
@media(max-width:900px){
  .hero-container{
    padding-top:25px;
    padding-bottom:30px;
  }

  .hero-main{
    min-height:0;
    grid-template-columns:1fr;
    gap:30px;
  }

  .hero-copy{
    width:100%;
    padding-bottom:0;
    text-align:left;
  }

  .trust{margin-left:0;margin-right:0}

  .hero-title{
    max-width:720px;
    margin-left:0;
    margin-right:0;
    text-align:left;
  }

  .hero-subtitle{
    justify-content:flex-start;
    text-align:left;
  }

  .stats{
    margin-left:0;
    margin-right:0;
    text-align:left;
  }

  .actions{
    justify-content:flex-start;
    align-items:flex-start;
  }

  .feature-wrap{
    width:100%;
    max-width:650px;
    margin-left:0;
    margin-right:auto;
  }
}

/* =========================================================
   MOBILE (up to 600px)
========================================================= */
@media(max-width:600px){
  .hero-container{
    width:calc(100% - 24px);
    padding-top:22px;
    padding-bottom:25px;
  }

  .hero-main{gap:27px}

  .trust{
    height:32px;
    padding-right:14px;
    gap:7px;
    font-size:10px;
  }

  .trust-icon{
           width: 19px;
        height: 19px;
        min-width: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #ffffff;
        border-radius: 7px;
        border-radius: 5px;
        color: #ffffff;
        font-size: 12px;
  }

  .hero-title{
    width:100%;
    max-width:100%;
    margin:0;
    font-size:33px;
    line-height:1.04;
    letter-spacing:-1.4px;
  }

  .hero-subtitle{
    width:100%;
    flex-wrap:wrap;
    margin-top:14px;
    margin-bottom:19px;
    font-size:18px;
  }

  .hero-subtitle .dash{display:none}

  .stats{
    width:100%;
    grid-template-columns:1fr 1fr;
  }

  .stat{
    min-height:69px;
    padding:10px 11px;
  }

  .stat:first-child{padding-left:0}

  .stat strong{font-size:14px}
  .stat span{font-size:9px}

  .stat:nth-child(2)::after{display:none}

  .stat:nth-child(3){grid-column:1/-1}

  .actions{
    width:100%;
    gap:8px;
  }

  .btn{
    min-height:44px;
    padding:0 16px;
    font-size:12px;
  }

  .btn-orange:first-child{min-width:165px}

  .feature-wrap{
    max-width:none;
    height:242px;
    padding-top:9px;
  }

  .feature-card{
    width:100%;
    height:233px;
    border-radius:15px;
  }

  .slide{
    grid-template-columns:minmax(0,1fr) 126px;
    gap:8px;
    padding:24px 8px 19px 14px;
  }

  .feature-label{
    font-size:17px;
    margin-bottom:11px;
  }

  .feature-label::before{width:16px}

  .bond-title{
    max-width:190px;
    font-size:18px;
  }

  .bond-description{
    max-width:190px;
    font-size:8px;
    line-height:1.45;
  }

  .invest{
    margin-top:13px;
    font-size:11px;
  }

  .invest-arrow{
    width:25px;
    height:25px;
  }

  .yield-card{
    height:181px;
    padding:24px 9px 10px;
    border-radius:16px 16px 22px 16px;
  }

  .yield-label{font-size:7px}

  .yield-number{
    font-size:29px;
    letter-spacing:-1.5px;
  }

  .yield-note{font-size:7px}

  .maturity{
    margin-top:11px;
    font-size:7px;
  }

  .maturity strong{font-size:10px}

  .rate-chip{
    right:4px;
    min-width:92px;
    padding:7px 9px 8px;
  }

  .rate-chip strong{font-size:14px}
}

/* =========================================================
   SMALL MOBILE (up to 390px)
========================================================= */
@media(max-width:390px){
  .hero-title{font-size:29px}

  .hero-subtitle{font-size:17px}

  .stat strong{font-size:13px}
  .stat span{font-size:8px}

  .btn{
    padding:0 13px;
    font-size:11px;
  }

  .btn-orange:first-child{min-width:150px}

  .feature-wrap{height:228px}
  .feature-card{height:219px}

  .slide{
    grid-template-columns:minmax(0,1fr) 112px;
    padding-left:12px;
  }

  .bond-title{font-size:16px}

  .yield-card{
    height:169px;
    padding-top:22px;
  }

  .yield-number{font-size:25px}
}

/* =========================================================
   VERY SMALL MOBILE (up to 340px)
========================================================= */
@media(max-width:340px){
  .hero-container{width:calc(100% - 18px)}

  .trust{max-width:100%}
  .trust span:not(.trust-icon){font-size:9px}

  .hero-title{font-size:27px}
  .hero-subtitle{font-size:16px}

  .stats{grid-template-columns:1fr}

  .stat{
    min-height:60px;
    border-bottom:1px solid var(--line);
  }

  .stat:last-child{border-bottom:0}

  .stat:nth-child(1)::after,
  .stat:nth-child(2)::after{display:none}

  .stat:nth-child(3){grid-column:auto}

  .actions{
    flex-direction:column;
    align-items:flex-start;
  }

  .btn-orange:first-child{min-width:160px}
}

/* =========================================================
   REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  *,
  *::before,
  *::after{
    transition:none!important;
    animation:none!important;
  }
}


/* =========================================================
   GLOBAL FIX: no horizontal (left/right) scroll + mobile width
========================================================= */
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
@supports (overflow:clip){
  html,body{overflow-x:clip}
}
img,svg,video,iframe{max-width:100%}

/* header: mobile width */
@media (max-width:991.98px){
  .header-area{max-width:100%}
  .header-area .navbar{flex-wrap:wrap}
  .header-area .navbar-brand img{max-width:100%}
  .header-area .navbar-collapse{width:100%}
  .header-area .header-right{
    flex-wrap:wrap;
    width:100%;
    max-width:100%;
  }
  .header-area .search-box{max-width:100%}
  .header-area .search-box input{min-width:0;max-width:100%}
}

/* =========================================================
   MOBILE ONLY - ALIGNMENT + SPACING FIX (desktop untouched)
========================================================= */

/* ---------- Tablet + Mobile (900px aur neeche) ---------- */
@media (max-width:900px){

  /* page side spacing: sab kuch ek hi left line par */
  .bond-hero .hero-container{
    width:calc(100% - 32px);
    padding:45px 0 26px;
  }

  .bond-hero .hero-main{gap:24px}

  .bond-hero .hero-copy{
    padding:0;
    text-align:left;
  }

  /* trust badge: chhoti screen par wrap ho, bahar na nikle */
  .bond-hero .trust{
    max-width:100%;
    height:auto;
    min-height:32px;
    margin:0 0 14px;
    padding:8px 26px 8px 8px;
    line-height:1.25;
  }

  .bond-hero .trust > span:not(.trust-icon){white-space:normal}

  /* heading + subtitle */
  .bond-hero .hero-title{
    margin:0;
    font-size:32px;
    line-height:1.08;
    letter-spacing:-1.2px;
    text-align:left;
  }

  .bond-hero .hero-subtitle{
    flex-wrap:wrap;
    gap:6px;
    margin:12px 0 20px;
    font-size:18px;
    text-align:left;
  }

  .bond-hero .hero-subtitle .dash{display:none}

  /* stats: 3 barabar columns, left aligned text */
  .bond-hero .stats{
    width:100%;
    grid-template-columns:repeat(3,1fr);
    margin:0 0 20px;
    text-align:left;
  }

  .bond-hero .stat{
    min-height:72px;
    padding:12px 8px 12px 10px;
    text-align:left;
  }

  .bond-hero .stat:first-child{padding-left:0}

  .bond-hero .stat:nth-child(2)::after{display:block}
  .bond-hero .stat:nth-child(3){grid-column:auto}

  .bond-hero .stat strong{font-size:14px}

  .bond-hero .stat span{
    margin-top:5px;
    font-size:10px;
    line-height:1.25;
  }

  /* button: full width, center text */
  .bond-hero .actions{
    width:100%;
    justify-content:flex-start;
  }

  .bond-hero .actions .btn-orange{
    width:100%;
    min-height:48px;
    justify-content:center;
  }

  /* feature card: left align, full width */
  .bond-hero .feature-wrap{
    width:100%;
    max-width:none;
    margin:0;
  }

  /* ---------- Bottom strip: purane design jaisa, bas mobile mein sahi aligned ---------- */
  .bond-hero .bond-feature-strip{padding:0}

  .bond-hero .bond-feature-inner{
    width:calc(100% - 32px);
    max-width:none;
    min-height:0;
    margin:0 auto;
    padding:16px 0 18px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    align-items:stretch;
  }

  .bond-hero .bond-feature-title{
    grid-column:1/-1;
    padding:0 0 12px;
    text-align:left;
  }

  .bond-hero .bond-feature-stat{
    height:auto;
    min-height:60px;
    padding:12px 8px 12px 0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    text-align:left;
    border:0;
    border-top:1px solid rgba(3,26,60,.12);
  }

  /* right column: left line + thoda andar */
  .bond-hero .bond-feature-stat:nth-of-type(3),
  .bond-hero .bond-feature-stat:nth-of-type(5){
    padding-left:16px;
    border-left:1px solid rgba(3,26,60,.12);
  }

  .bond-hero .bond-feature-stat strong{
    margin-top:5px;
    font-size:14px;
  }

  .bond-hero .bond-feature-action{
    grid-column:1/-1;
    justify-self:stretch;
    width:100%;
    height:46px;
    margin:14px 0 0;
    justify-content:center;
  }
}

/* ---------- Mobile (600px aur neeche): feature card spacing ---------- */
@media (max-width:600px){

  .bond-hero .feature-wrap{
    height:252px;
    padding-top:10px;
  }

  .bond-hero .feature-card{height:242px}

  .bond-hero .slide{
    grid-template-columns:minmax(0,1fr) 128px;
    gap:10px;
    padding:26px 10px 28px 16px;
  }

  .bond-hero .bond-title{
    max-width:100%;
    font-size:18px;
  }

  .bond-hero .bond-description{
    max-width:100%;
    font-size:9px;
  }

  .bond-hero .rate-chip{right:6px}

  .bond-hero .slider-dots{bottom:10px}
}

/* ---------- Chhoti mobile (380px aur neeche) ---------- */
@media (max-width:380px){

  .bond-hero .hero-title{font-size:28px}
  .bond-hero .hero-subtitle{font-size:16px}

  .bond-hero .stat{padding:10px 6px 10px 8px}
  .bond-hero .stat strong{font-size:13px}
  .bond-hero .stat span{font-size:9px}

  .bond-hero .slide{grid-template-columns:minmax(0,1fr) 112px}
  .bond-hero .bond-title{font-size:16px}

  .bond-hero .bond-feature-stat:nth-of-type(3),
  .bond-hero .bond-feature-stat:nth-of-type(5){padding-left:12px}
}

 :root {
    --bond-navy: #13244E;
    --bond-gold: #d7b56d;
    --bond-gold-dark: #96763d;
    --bond-text: #25334a;
    --bond-muted: #737f91;
    --bond-border: #e5e9ef;
    --bond-background: #f7f8fa;
    --bond-cream: #fcf9f1;
  }

  .bond-opportunities,
  .bond-opportunities * { box-sizing: border-box; }

  .bond-opportunities {
    padding: 48px 20px;
    overflow: hidden;
    background:
      radial-gradient(900px 300px at 10% -10%, rgba(215,181,109,.12), transparent 60%),
      var(--bond-background);
    color: var(--bond-text);
    font-family: "Lato", Arial, sans-serif;
  }

  .bond-section-inner { width: min(100%, 1300px); margin: 0 auto; }

  /* ---------- Section heading ---------- */
  .bond-heading-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; margin-bottom: 28px;
  }
  .bond-eyebrow { margin: 0 0 9px; color: var(--bond-gold-dark); font-size: 11px; font-weight: 900; letter-spacing: 1.4px; }
  .bond-heading-row h2 { margin: 0; color: var(--bond-navy); font-size: clamp(28px, 3vw, 37px); font-weight: 900; line-height: 1.2; }
  .bond-heading-description { margin: 10px 0 0; color: var(--bond-muted); font-size: 15px; line-height: 1.6; }
  .bond-view-all {
    display: inline-flex; flex-shrink: 0; align-items: center; gap: 12px;
    padding: 12px 16px; border: 1px solid var(--bond-border); border-radius: 6px;
    color: var(--bond-navy); background: #fff;
    font-size: 13px; font-weight: 900; text-decoration: none; transition: .25s ease;
  }
  .bond-view-all span { transition: transform .25s ease; }
  .bond-view-all:hover { border-color: var(--bond-gold); background: #fffaf0; transform: translateY(-2px); }
  .bond-view-all:hover span { transform: translateX(4px); }

  /* ---------- Slider ---------- */
  .bondSwiper { padding: 14px 6px 26px; overflow: hidden; }
  .bondSwiper .swiper-wrapper { align-items: stretch; }
  .bondSwiper .swiper-slide { display: flex; height: auto; min-width: 0; }
  .bondSwiper .swiper-slide > .bond-card { height: 100%; }

  /* ---------- Card ---------- */
  .bond-card {
    position: relative; display: flex; flex-direction: column; width: 100%;
    padding: 0; margin: 0; container-type: inline-size;
    border: 1px solid var(--bond-border); border-radius: 16px; overflow: hidden;
    background: #fff; box-shadow: 0 6px 20px rgba(19,36,78,.06);
    opacity: 0; transform: translateY(24px);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, opacity .6s ease;
  }
  .bond-opportunities.is-visible .bond-card { opacity: 1; transform: translateY(0); }
  .bond-opportunities.is-visible .swiper-slide:nth-child(2) .bond-card { transition-delay: .08s; }
  .bond-opportunities.is-visible .swiper-slide:nth-child(3) .bond-card { transition-delay: .16s; }
  .bond-opportunities.is-visible .swiper-slide:nth-child(4) .bond-card { transition-delay: .24s; }
  .bond-opportunities.is-visible .bond-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(19,36,78,.14);
    transition-delay: 0s;
  }

  /* ---------- Compact header (bond / investment theme) ---------- */
  .bond-card-header {
    position: relative; width: 100%; margin: 0;
    padding: 40px 0 0;
    background-color: #0e1c40;
    background-image:
      /* soft navy fade behind the logo so it stays clean */
      radial-gradient(ellipse 45% 130% at 50% 100%, rgba(14,28,64,.9), transparent 75%),
      /* candlestick chart + gold trend line */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 70' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M0 15H400M0 30H400M0 45H400M0 60H400' stroke='white' stroke-opacity='.06'/%3E%3Cpath d='M20 48V66M48 44V62M76 42V58M104 36V54M132 38V56M160 30V48M188 32V46M216 24V42M244 26V40M272 18V36M300 14V32M328 16V30M356 8V26M384 4V22' stroke='white' stroke-opacity='.35' stroke-width='1.2'/%3E%3Cg fill='%23d7b56d' fill-opacity='.8'%3E%3Crect x='16' y='53' width='8' height='9'/%3E%3Crect x='72' y='46' width='8' height='9'/%3E%3Crect x='100' y='44' width='8' height='6'/%3E%3Crect x='156' y='34' width='8' height='10'/%3E%3Crect x='212' y='28' width='8' height='10'/%3E%3Crect x='268' y='22' width='8' height='10'/%3E%3Crect x='296' y='18' width='8' height='10'/%3E%3Crect x='352' y='12' width='8' height='10'/%3E%3Crect x='380' y='8' width='8' height='10'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='.3'%3E%3Crect x='44' y='50' width='8' height='8'/%3E%3Crect x='128' y='42' width='8' height='10'/%3E%3Crect x='184' y='36' width='8' height='6'/%3E%3Crect x='240' y='30' width='8' height='6'/%3E%3Crect x='324' y='19' width='8' height='7'/%3E%3C/g%3E%3Cpath d='M20 57L48 54L76 50L104 47L132 47L160 39L188 39L216 33L244 33L272 27L300 23L328 22L356 17L384 13' fill='none' stroke='%23f3dfae' stroke-opacity='.9' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='384' cy='13' r='3' fill='%23f3dfae'/%3E%3C/svg%3E"),
      /* gold glow top-right */
      radial-gradient(260px 140px at 100% 0%, rgba(215,181,109,.30), transparent 70%),
      linear-gradient(135deg, #1d3566, #0e1c40);
    background-size: 100% 100%, cover, 100% 100%, 100% 100%;
    background-position: center, center bottom, center, center;
    background-repeat: no-repeat;
  }
  .bond-card-header::before {             /* gold shimmer line */
    content: ""; position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--bond-gold), #f3dfae, var(--bond-gold));
    background-size: 200% 100%; animation: bondShimmer 3s linear infinite;
  }

  .bond-company-logo {
    position: absolute; z-index: 3; top: 10px; left: 50%;
    width: 52px; height: 52px; transform: translateX(-50%);
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #e6e1d6; border-radius: 15px; background: #fff;
    box-shadow: 0 6px 14px rgba(0,0,0,.28);
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
  }
  .bond-company-logo img { display: block; width: 100%; height: 100%; padding: 8px; object-fit: contain; }
  .bond-card:hover .bond-company-logo { transform: translateX(-50%) translateY(-3px) scale(1.07); }

  /* UPDATED: rupee coin + bars are now fixed-size background layers, so alignment stays the same on every screen */
  .bond-company-panel {
    position: relative; z-index: 2; overflow: hidden;
    padding: 58px 12px 20px;
    text-align: center;
    border-radius: 22px 22px 0 0;
    border-top: 1px solid rgba(215,181,109,.6);
    border-bottom: 1px solid #efe6cf;
    background-color: #fffdf8;
    background-image:
      /* layer 1: rupee coin (fixed 60x60, top-right) */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='27' fill='none' stroke='%23d7b56d' stroke-opacity='.45' stroke-width='1.2'/%3E%3Ccircle cx='30' cy='30' r='20' fill='none' stroke='%23d7b56d' stroke-opacity='.3' stroke-dasharray='2 3'/%3E%3Ctext x='30' y='40' font-size='27' text-anchor='middle' fill='%23d7b56d' fill-opacity='.4' font-family='Georgia,serif' font-weight='700'%3E%E2%82%B9%3C/text%3E%3C/svg%3E"),
      /* layer 2: rising bars (fixed 64x56, bottom-left) */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56'%3E%3Cg fill='%23d7b56d' fill-opacity='.13'%3E%3Crect x='0' y='44' width='10' height='12'/%3E%3Crect x='14' y='34' width='10' height='22'/%3E%3Crect x='28' y='22' width='10' height='34'/%3E%3Crect x='42' y='8' width='10' height='48'/%3E%3C/g%3E%3Cpath d='M5 40L19 29L33 16L47 2' fill='none' stroke='%23d7b56d' stroke-opacity='.4' stroke-width='1.2'/%3E%3C/svg%3E"),
      linear-gradient(180deg, #ffffff 0%, #fbf6e9 100%);
    background-size: 38px 38px, 64px 56px, 100% 100%;
    background-position: right 24px top 10px, left 14px bottom 0, 0 0;
    background-repeat: no-repeat;
  }
  .bond-company-panel::before {           /* thin gold divider at the bottom */
    content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--bond-gold), transparent);
  }
  .bond-company-panel::after {            /* hover shine */
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.7) 50%, transparent 65%);
    transform: translateX(-120%);
  }
  .bond-card:hover .bond-company-panel::after { transform: translateX(120%); transition: transform .9s ease; }

  .bond-header-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.7em; margin: 0; color: var(--bond-navy);
    font-family: "Lato", Arial, sans-serif; font-size: 14px; font-weight: 900;
    line-height: 1.35; letter-spacing: .3px; text-transform: uppercase; overflow-wrap: anywhere;
  }

  /* ---------- Card body ---------- */
  .bond-card-body { display: flex; flex: 1; flex-direction: column; padding: 16px 18px 18px; }

  .bond-type-pill {
    align-self: flex-start; padding: 5px 10px; margin-bottom: 10px;
    border: 1px solid #eee5d2; border-radius: 999px;
    color: #806735; background: #fcfaf5; font-size: 10px; font-weight: 900; letter-spacing: .4px;
  }
  .bond-card-title {
    height: 45px; margin: 0 0 12px; color: var(--bond-navy);
    font-size: 15px; font-weight: 900; line-height: 1.5; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .bond-field-label { display: block; margin-bottom: 4px; color: var(--bond-muted); font-size: 11px; font-weight: 700; }

  /* ISIN */
  .bond-isin-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px; margin-bottom: 6px;
    border: 1px dashed #dcc999; border-radius: 10px;
    background: linear-gradient(135deg, #fffdf8, #fbf5e6);
  }
  .bond-isin-row .bond-field-label { margin-bottom: 2px; }
  .bond-isin-value { color: var(--bond-navy); font-size: 14px; font-weight: 900; letter-spacing: .8px; overflow-wrap: anywhere; }
  .bond-copy-btn {
    flex: 0 0 32px; width: 32px; height: 32px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #eadfc4; border-radius: 8px;
    color: var(--bond-gold-dark); background: #fff; cursor: pointer; transition: .2s ease;
  }
  .bond-copy-btn svg { width: 15px; height: 15px; }
  .bond-copy-btn:hover { color: var(--bond-navy); background: var(--bond-gold); border-color: var(--bond-gold); transform: scale(1.06); }
  .bond-copy-btn.copied { color: #fff; background: #2e8b57; border-color: #2e8b57; }

  /* Metrics */
  .bond-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 22px; }
  .bond-metric {
    display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 54px;
    padding: 8px 8px 8px 0; border-bottom: 1px solid var(--bond-border); overflow-wrap: anywhere;
  }
  .bond-metric:nth-child(odd) { border-right: 1px solid var(--bond-border); }
  .bond-metric:nth-child(even) { padding-left: 12px; padding-right: 0; }
  .bond-metric strong { color: var(--bond-text); font-size: 13px; font-weight: 900; line-height: 1.45; }
  .bond-rating { color: #1f7a4d !important; }
  .bond-rating-by { color: var(--bond-muted); font-size: 11px; font-weight: 700; letter-spacing: .2px; }

  /* ---------- Actions: two equal buttons in one aligned row ---------- */
  .bond-actions {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
    margin-top: auto; padding-top: 4px;
  }
  .bond-price-btn,
  .bond-details-btn {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 44px; padding: 0 8px; border-radius: 8px;
    font-size: 12px; font-weight: 900; line-height: 1; white-space: nowrap;
    text-decoration: none; transition: .25s ease;
  }

  /* Login for Price: gold */
  .bond-price-btn {
    border: 1.5px solid var(--bond-gold); color: var(--bond-navy);
    background: linear-gradient(135deg, #e9cf92, var(--bond-gold));
    box-shadow: 0 5px 12px rgba(215,181,109,.38);
  }
  .bond-price-btn svg { width: 13px; height: 13px; flex: 0 0 auto; }
  .bond-price-btn::before {
    content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-20deg); transition: left .6s ease;
  }
  .bond-price-btn:hover { transform: translateY(-2px); box-shadow: 0 9px 18px rgba(215,181,109,.55); }
  .bond-price-btn:hover::before { left: 130%; }

  /* View Details: navy outline */
  .bond-details-btn {
    border: 1.5px solid var(--bond-navy); color: var(--bond-navy); background: #fff;
  }
  .bond-btn-arrow { color: var(--bond-gold-dark); font-size: 15px; transition: transform .25s ease; }
  .bond-details-btn:hover { color: #fff; background: var(--bond-navy); transform: translateY(-2px); }
  .bond-details-btn:hover .bond-btn-arrow { color: var(--bond-gold); transform: translateX(4px); }

  /* ---------- Footer / controls ---------- */
  .bond-slider-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 10px; }
  .bond-pagination { position: static; width: auto !important; }
  .bond-pagination .swiper-pagination-bullet {
    width: 7px; height: 7px; margin: 0 3px !important; background: #cbd2dd; opacity: 1;
    transition: width .3s ease, background .3s ease;
  }
  .bond-pagination .swiper-pagination-bullet-active { width: 24px; border-radius: 5px; background: var(--bond-gold); }

  .bond-slider-arrows { display: flex; gap: 8px; }
  .bond-prev, .bond-next {
    width: 40px; height: 40px; border: 1px solid var(--bond-border); border-radius: 8px;
    color: var(--bond-navy); background: #fff; font-size: 17px; cursor: pointer; transition: .2s ease;
  }
  .bond-prev:hover, .bond-next:hover { border-color: var(--bond-gold); background: var(--bond-navy); color: var(--bond-gold); transform: translateY(-2px); }

  .bond-disclaimer { margin: 14px 0 0; color: var(--bond-muted); font-size: 11px; line-height: 1.6; }


  /* ---------- Desktop / laptop alignment fixes ---------- */
  .bond-opportunities .bondSwiper .bond-card { padding: 0 !important; margin: 0 !important; }
  .bond-opportunities .bond-card > .bond-card-header { width: 100% !important; margin: 0 !important; padding: 40px 0 0 !important; }
  .bond-opportunities .bond-card > .bond-card-body { width: 100%; padding: 16px 18px 24px !important; }
  .bond-opportunities .bond-card-header,
  .bond-opportunities .bond-card-body { float: none; max-width: none; }

  /* pagination dots centred with the arrow buttons */
  .bond-opportunities .bond-slider-footer { align-items: center; min-height: 40px; }
  .bond-opportunities .bond-pagination {
    position: static !important; transform: none !important; width: auto !important;
    display: flex; align-items: center; height: 40px; margin: 0; padding: 0;
  }
  .bond-opportunities .bond-pagination .swiper-pagination-bullet { display: block; flex: 0 0 auto; }

  /* buttons stack only when the card itself is narrow */
  @container (max-width: 270px) {
    .bond-actions { grid-template-columns: 1fr; }
  }

  /* laptop */
  @media (min-width: 900px) and (max-width: 1199px) {
    .bond-opportunities { padding: 44px 24px; }
  }
  /* large desktop */
  @media (min-width: 1200px) {
    .bond-opportunities { padding: 56px 32px; }
    .bond-heading-row { margin-bottom: 36px; }
    .bond-card-body { padding: 18px 20px 26px !important; }
    .bond-header-title { font-size: 14.5px; }
  }

  /* =========================================================
     DESKTOP / LAPTOP ONLY (1024px and up) – mobile is untouched
     ========================================================= */
  @media (min-width: 1024px) {
    /* remove the outer box around the slider */
    .bond-section,
    .bond-section .container { background: transparent !important; }
    .bond-opportunities {
      background: transparent !important; box-shadow: none !important;
      border: 0 !important; border-radius: 0 !important;
      padding: 56px 0 40px !important;
    }
    .bond-opportunities .bond-section-inner { width: min(100%, 1280px); padding: 0 24px; }

    /* heading */
    .bond-opportunities .bond-heading-row { margin-bottom: 34px; align-items: flex-end; }
    .bond-opportunities .bond-heading-row h2 { font-size: 40px; letter-spacing: -.3px; }
    .bond-opportunities .bond-heading-description { font-size: 16px; }
    .bond-opportunities .bond-view-all { padding: 13px 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(19,36,78,.05); }

    /* slider area: room for shadow + hover lift, no clipping */
    .bond-opportunities .bondSwiper { padding: 16px 10px 34px; margin: 0 -10px; }

    /* cards */
    .bond-opportunities .bondSwiper .bond-card {
      border-radius: 18px; border: 1px solid #e8ecf2;
      box-shadow: 0 8px 26px rgba(19,36,78,.07);
    }
    .bond-opportunities.is-visible .bond-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(19,36,78,.15); }

    /* header: a little taller + bigger logo */
    .bond-opportunities .bond-card > .bond-card-header { padding: 46px 0 0 !important; border-radius: 18px 18px 0 0; }
    .bond-opportunities .bond-company-logo { width: 60px; height: 60px; top: 12px; border-radius: 17px; }
    .bond-opportunities .bond-company-logo img { padding: 9px; }
    .bond-opportunities .bond-company-panel {
      padding: 64px 14px 22px; border-radius: 24px 24px 0 0;
      background-size: 42px 42px, 64px 56px, 100% 100%;
      background-position: right 28px top 12px, left 14px bottom 0, 0 0;
    }
    .bond-opportunities .bond-header-title { font-size: 14.5px; }

    /* body */
    .bond-opportunities .bond-card > .bond-card-body { padding: 20px 22px 28px !important; }
    .bond-opportunities .bond-type-pill { margin-bottom: 12px; }
    .bond-opportunities .bond-card-title { height: 46px; font-size: 15px; margin-bottom: 14px; }
    .bond-opportunities .bond-isin-row { padding: 12px 14px; margin-bottom: 8px; }
    .bond-opportunities .bond-metric { min-height: 58px; }
    .bond-opportunities .bond-metric strong { font-size: 14px; }
    .bond-opportunities .bond-metrics { margin-bottom: 26px; }

    /* buttons */
    .bond-opportunities .bond-actions { gap: 14px; }
    .bond-opportunities .bond-price-btn,
    .bond-opportunities .bond-details-btn { height: 46px; font-size: 12.5px; padding: 0 6px; border-radius: 9px; }

    /* controls */
    .bond-opportunities .bond-slider-footer { margin-top: 8px; }
    .bond-opportunities .bond-prev,
    .bond-opportunities .bond-next { width: 44px; height: 44px; border-radius: 10px; }
    .bond-opportunities .bond-pagination { height: 44px; }
    .bond-opportunities .bond-disclaimer { margin-top: 18px; font-size: 12px; }
  }

  /* ---------- Keyframes ---------- */
  @keyframes bondShimmer { to { background-position: -200% 0; } }

  /* ---------- Responsive ---------- */
  @media (max-width: 767px) {
    .bond-opportunities { padding: 32px 15px; }
    .bond-heading-row { align-items: flex-start; flex-direction: column; gap: 16px; }
    .bond-heading-row h2 { font-size: 29px; }
    .bond-card-body { padding: 16px; }
  }
  @media (max-width: 380px) {
    .bond-header-title { font-size: 13px; letter-spacing: .2px; }
    .bond-isin-value { font-size: 13px; letter-spacing: .5px; }
    .bond-metric strong { font-size: 12px; }
    .bond-actions { grid-template-columns: 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    .bond-card { opacity: 1; transform: none; }
    .bond-opportunities *, .bond-opportunities *::before, .bond-opportunities *::after {
      animation: none !important; transition-duration: .01ms !important;
    }
  }
  /* =========================================================
   DESKTOP ALIGNMENT FIX  (992px and up)
   Add this file LAST, after all your other CSS:
   <link href="css/desktop-align.css" rel="stylesheet">

   One shared side gap (--side-space) is used by every section,
   so header, hero, bonds, steps, testimonials, FAQ and footer
   all start and end on the same left / right line.
   Make the gap smaller or bigger by changing --side-space only.
========================================================= */

:root{
  --side-space: clamp(24px, 3.5vw, 64px);
}

@media (min-width: 992px){

  /* ---------- Bootstrap .container: full width, same gap ---------- */
  .container{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--side-space) !important;
    padding-right: var(--side-space) !important;
  }

  /* ---------- Header ---------- */
  .header-area .container-fluid{
    padding-left: var(--side-space) !important;
    padding-right: var(--side-space) !important;
  }

  /* ---------- Hero ---------- */
  .hero-container{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: var(--side-space) !important;
    padding-right: var(--side-space) !important;
  }
  .hero-main{
    grid-template-columns: minmax(0, 1fr) minmax(460px, 42%);
    gap: clamp(24px, 3vw, 56px);
  }
  .stats{ width: min(100%, 680px); }

  /* ---------- Featured strip under hero ---------- */
  .bond-feature-inner{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: var(--side-space) !important;
    padding-right: var(--side-space) !important;
  }

  /* ---------- Top Bond Opportunities ---------- */
  .bond-section .container{
    padding-left: var(--side-space) !important;
    padding-right: var(--side-space) !important;
  }
  .bond-opportunities{ padding-left: 0 !important; padding-right: 0 !important; }
  .bond-opportunities .bond-section-inner{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .bond-opportunities .bondSwiper{ margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }

  /* ---------- 3 feature cards strip ---------- */
  .invest-feature-wrapper{ width: 100%; margin: 0; }

  /* ---------- How easy to invest ---------- */
  .fi-investment-section .container{
    padding-left: var(--side-space) !important;
    padding-right: var(--side-space) !important;
  }
  .fi-process-wrapper,
  .finpro-bottom-area{ width: 100%; max-width: 100%; }

  /* ---------- Testimonials ---------- */
  .testimonial-section .container{
    padding-left: var(--side-space) !important;
    padding-right: var(--side-space) !important;
  }
  .testimonial-slider .owl-nav button.owl-prev{ left: -22px; }
  .testimonial-slider .owl-nav button.owl-next{ right: -22px; }

  /* ---------- FAQ ---------- */
  .faq-section .container{
    padding-left: var(--side-space) !important;
    padding-right: var(--side-space) !important;
  }

  /* ---------- Footer ---------- */
  .ft-container{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: var(--side-space) !important;
    padding-right: var(--side-space) !important;
  }
}

/* Very wide monitors: keep everything centred and readable */
@media (min-width: 1920px){
  :root{ --side-space: clamp(64px, calc((100vw - 1760px) / 2), 400px); }
}
html, body { margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; }
.container, .container-fluid, section { margin-left: 0 !important; }
/* =========================================================
   HOW EASY TO INVEST - EQUAL HEIGHT + WIDTH (all screens)
========================================================= */

/* ---------- stop the floating animation that misaligns cards ---------- */
.fi-bond-card,
.fi-payment-card { animation: none !important; }

/* ---------- row: all 3 columns same height ---------- */
.fi-process-wrapper .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}
.fi-process-wrapper .row > [class*="col-"] { display: flex !important; }

/* ---------- step card fills its column ---------- */
.fi-process-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  animation: none;
}

/* titles take the same space so the cards below start on the same line */
.fi-step-title {
  min-height: 30px;
  margin: 22px 0 28px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- the 3 content boxes: same height, fill the card ---------- */
.fi-kyc-wrapper,
.fi-bond-card,
.fi-payment-card {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
}

/* step 1: 4 items share the height equally */
.fi-kyc-wrapper { display: flex !important; flex-direction: column !important; gap: 16px !important; }
.fi-kyc-item    { flex: 1 1 0 !important; }

/* step 2 and 3: content starts at the same position in both cards */
.fi-bond-card,
.fi-payment-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 36px 28px !important;
}
.fi-bond-card h4,
.fi-payment-card h4 { margin: 0 0 16px !important; text-align: center; }
.fi-bond-card p,
.fi-payment-card p  { max-width: 100% !important; text-align: center; }

/* ---------- bottom row: Ready to Invest + Need Assistance ---------- */
.finpro-bottom-area .row { display: flex !important; align-items: stretch !important; }
.finpro-bottom-area .row > [class*="col-"] { display: flex !important; }
.finpro-invest-card,
.finpro-help-card {
  width: 100% !important;
  height: 140px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* =========================================================
   LAPTOP (992px - 1199px)
========================================================= */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .fi-step-title { font-size: 20px; }
  .fi-kyc-item   { padding: 14px; gap: 14px; }
  .fi-kyc-icon   { width: 52px; height: 52px; min-width: 52px; font-size: 20px; }
  .fi-kyc-content h5 { font-size: 15px; }
  .fi-kyc-content p  { font-size: 13px; line-height: 21px; }

  .fi-bond-card,
  .fi-payment-card   { padding: 30px 20px !important; }
  .fi-card-icon      { width: 100px; height: 100px; font-size: 40px; }
  .fi-bond-card h4,
  .fi-payment-card h4 { font-size: 21px; }
  .fi-bond-card p,
  .fi-payment-card p  { font-size: 14px; line-height: 26px; }

  .finpro-invest-card h4 { font-size: 23px; }
  .finpro-help-left h5   { font-size: 19px; }
}

/* =========================================================
   TABLET (768px - 991px): 2 columns, last card centered
========================================================= */
@media (min-width: 768px) and (max-width: 991.98px) {
  .fi-process-wrapper .row > [class*="col-"]:last-child { margin-left: auto; margin-right: auto; }
  .finpro-invest-card,
  .finpro-help-card { height: auto !important; min-height: 130px; }
}

/* =========================================================
   TABLET + MOBILE (below 992px): auto heights
========================================================= */
@media (max-width: 991.98px) {
  .fi-process-card { margin-bottom: 10px; }
  .finpro-bottom-area { margin-top: 40px; }
  .finpro-invest-card,
  .finpro-help-card {
    height: auto !important;
    flex-direction: column !important;
    text-align: center;
    gap: 18px;
    padding: 24px !important;
  }
}

/* =========================================================
   MOBILE (below 768px): 1 column, full width
========================================================= */
@media (max-width: 767.98px) {
  .fi-investment-section { padding: 50px 0 !important; }
  .fi-section-title { font-size: 28px; }

  .fi-process-wrapper .row > [class*="col-"] { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }
  .fi-process-card { margin-bottom: 0; }

  .fi-kyc-item { flex-direction: row !important; text-align: left !important; padding: 14px !important; }
  .fi-kyc-content h5 { font-size: 15px; text-align: left; }
  .fi-kyc-content p  { font-size: 13px; line-height: 21px; text-align: left; }
  .fi-kyc-icon { width: 48px; height: 48px; min-width: 48px; font-size: 19px; margin: 0 !important; }

  .fi-bond-card,
  .fi-payment-card { padding: 28px 18px !important; }
  .fi-card-icon { width: 88px; height: 88px; font-size: 34px; margin-bottom: 22px; }
  .fi-bond-card h4,
  .fi-payment-card h4 { font-size: 20px; }
  .fi-bond-card p,
  .fi-payment-card p  { font-size: 14px; line-height: 25px; }

  .finpro-invest-btn,
  .finpro-call-btn { width: 100%; justify-content: center; }
  .finpro-help-left { flex-direction: column; text-align: center; }
}
.contact-item a,
.contact-item a:visited,
.contact-item a:active {
    color: #ffffff !important;
    text-decoration: none;
}
<style>
    :root {
        --fi-navy: #1f3a8a;
        --fi-navy-dark: #0f1b4d;
        --fi-navy-light: #3a56b5;
        --fi-gold: #d9b45a;
        --fi-gold-light: #f1dca0;
        --fi-text: #5a6280;
        --fi-border: rgba(31, 58, 138, 0.08);
    }

    .fi-steps,
    .fi-steps * {
        font-family: inherit;
        box-sizing: border-box;
    }

    .fi-steps {
        position: relative;
        padding-top: 10px;
    }

    /* =========================================================
       ANIMATED TIMELINE LINE (desktop)
       ========================================================= */
    .fi-step-line {
        position: absolute;
        top: 36px;
        left: 16.666%;
        right: 16.666%;
        height: 4px;
        border-radius: 4px;
        background: linear-gradient(90deg, #1f3a8a 0%, #5b6590 40%, #d9b45a 100%);
        z-index: 0;
        transform-origin: left center;
    }

    /* flowing light that travels along the line */
    .fi-step-line-track {
        position: absolute;
        inset: 0;
        border-radius: 4px;
        overflow: hidden;
    }
    .fi-step-line-glow {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 22%;
        background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.95), rgba(255,255,255,0));
        animation: fiLineGlow 3.4s linear infinite;
    }

   
    /* =========================================================
       COLUMN: circle + title on top, card fills the rest
       ========================================================= */
    .fi-step-col {
        display: flex;
        flex-direction: column;
        height: 100%;                     /* equal height columns */
        position: relative;
        z-index: 1;
    }

    .fi-step-head {
        text-align: center;
        margin-bottom: 24px;
    }

    .fi-step-num {
        position: relative;
        width: 56px;
        height: 56px;
        margin: 0 auto 14px;
        border-radius: 50%;
        background: linear-gradient(145deg, #2f55ad, #1f3a8a);
        border: 4px solid #fff;
        box-shadow: 0 12px 26px rgba(31, 58, 138, 0.30);
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* pulsing ripple around each circle */
    .fi-step-num::after {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 2px solid rgba(31, 58, 138, 0.35);
        animation: fiRipple 2.6s ease-out infinite;
    }
    .fi-col-2 .fi-step-num::after { animation-delay: .5s; }
    .fi-col-3 .fi-step-num::after { animation-delay: 1s; }

    @keyframes fiRipple {
        0%   { transform: scale(1);   opacity: .8; }
        100% { transform: scale(1.7); opacity: 0;  }
    }

    .fi-step-name {
        margin: 0;
        font-size: 21px;
        font-weight: 700;
        line-height: 1.3;
        color: var(--fi-navy);
    }

    /* =========================================================
       CARD
       ========================================================= */
    .fi-step-card {
        position: relative;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 26px;
        padding: 30px 26px 26px;
        border: 1px solid rgba(31, 58, 138, 0.06);
        box-shadow: 0 14px 40px rgba(15, 27, 77, 0.09);
        z-index: 1;
        transition: transform .35s ease, box-shadow .35s ease;
    }

    .fi-card--gold:hover,
    .fi-card--navy:hover {
        transform: translateY(-8px);
        box-shadow: 0 26px 55px rgba(15, 27, 77, 0.16);
    }

    /* animated top accent bar */
    .fi-topbar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #1f3a8a, #d9b45a, #1f3a8a);
        background-size: 200% 100%;
        animation: fiBar 4s linear infinite;
        z-index: 2;
    }
    @keyframes fiBar {
        0%   { background-position: 0% 0; }
        100% { background-position: 200% 0; }
    }

    /* corner circles (slow float) */
    .fi-card--gold::before,
    .fi-card--navy::before {
        content: "";
        position: absolute;
        top: -70px;
        right: -70px;
        width: 210px;
        height: 210px;
        border-radius: 50%;
        z-index: -1;
        animation: fiFloatA 9s ease-in-out infinite;
    }
    .fi-card--gold::after,
    .fi-card--navy::after {
        content: "";
        position: absolute;
        bottom: -60px;
        left: -60px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        z-index: -1;
        animation: fiFloatA 11s ease-in-out infinite reverse;
    }
    .fi-card--gold::before { background: #fbf5e6; }
    .fi-card--gold::after  { background: rgba(31, 58, 138, 0.04); }
    .fi-card--navy::before { background: #eef1fa; }
    .fi-card--navy::after  { background: rgba(217, 180, 90, 0.08); }

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

    /* =========================================================
       STEP 1: four item cards share the column height equally
       ========================================================= */
    .fi-step-card.fi-card--plain {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
        overflow: visible;
        gap: 14px;
    }

    .fi-kyc-box {
        position: relative;
        flex: 1;
        display: flex;
        align-items: center;
        gap: 16px;
        background: #fff;
        border: 1px solid var(--fi-border);
        border-radius: 18px;
        padding: 16px 18px 16px 20px;
        box-shadow: 0 8px 22px rgba(15, 27, 77, 0.06);
        overflow: hidden;
        transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    }

    /* left accent bar grows on hover */
    .fi-kyc-box::before {
        content: "";
        position: absolute;
        left: 0;
        top: 16%;
        bottom: 16%;
        width: 4px;
        border-radius: 0 4px 4px 0;
        background: linear-gradient(180deg, var(--fi-gold), var(--fi-navy));
        transform: scaleY(0);
        transition: transform .3s ease;
    }

    .fi-kyc-box:hover {
        transform: translateX(6px);
        border-color: rgba(31, 58, 138, 0.18);
        box-shadow: 0 16px 34px rgba(15, 27, 77, 0.12);
    }
    .fi-kyc-box:hover::before { transform: scaleY(1); }

    .fi-kyc-ico {
        flex: 0 0 56px;
        width: 56px;
        height: 56px;
        border-radius: 16px;
        background: linear-gradient(145deg, var(--fi-navy-light), var(--fi-navy));
        color: #fff;
        font-size: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 18px rgba(31, 58, 138, 0.28);
        transition: transform .3s ease;
    }
    .fi-kyc-box:hover .fi-kyc-ico { transform: scale(1.1) rotate(-6deg); }

    .fi-kyc-txt { flex: 1; min-width: 0; }

    .fi-kyc-txt h5 {
        margin: 0 0 4px;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.3;
        color: var(--fi-navy);
        text-align: left;
    }

    .fi-kyc-txt p {
        margin: 0;
        font-size: 13.5px;
        line-height: 1.55;
        color: var(--fi-text);
        text-align: left;
    }

    /* =========================================================
       STEP 2 & 3 CONTENT
       top group has fixed even gaps, checklist sits at the bottom
       ========================================================= */
    .fi-step-card.fi-card--gold,
    .fi-step-card.fi-card--navy {
        gap: 20px;
    }

    /* badge with shine sweep */
    .fi-tag {
        position: relative;
        overflow: hidden;
        display: table;
        margin: 0 auto;
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 1.2px;
        line-height: 1;
        text-transform: uppercase;
        text-align: center;
        color: #fff;
        padding: 12px 26px;
        border-radius: 50px;
    }
    .fi-tag::after {
        content: "";
        position: absolute;
        top: 0;
        left: -60%;
        width: 40%;
        height: 100%;
        background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,0.55), rgba(255,255,255,0));
        transform: skewX(-20deg);
        animation: fiShine 3.6s ease-in-out infinite;
    }
    @keyframes fiShine {
        0%, 55% { left: -60%; }
        100%    { left: 130%; }
    }

    .fi-card--gold .fi-tag {
        background: linear-gradient(135deg, #1f3a8a, #3a56b5);
        box-shadow: 0 8px 18px rgba(31, 58, 138, 0.30);
    }
    .fi-card--navy .fi-tag {
        background: linear-gradient(135deg, #e0bf6a, #c79f45);
        box-shadow: 0 8px 18px rgba(199, 159, 69, 0.35);
    }

    /* icon + heading row */
    .fi-hd {
        display: flex;
        align-items: center;
        gap: 22px;
        margin: 4px 0 0 10px;
    }

    .fi-ic {
        position: relative;
        flex: 0 0 72px;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        font-size: 27px;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: fiFloat 4s ease-in-out infinite;
    }
    .fi-ic::before {
        content: "";
        position: absolute;
        inset: -10px;
        border-radius: 50%;
        border: 1px solid rgba(217, 180, 90, 0.35);
        background: radial-gradient(circle, rgba(217, 180, 90, 0.14) 0%, rgba(217, 180, 90, 0) 70%);
        animation: fiHalo 3s ease-in-out infinite;
    }
    .fi-ic::after {
        content: "";
        position: absolute;
        inset: 8px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.28);
    }
    .fi-ic i { position: relative; z-index: 1; }

    .fi-card--gold .fi-ic {
        background: linear-gradient(145deg, var(--fi-gold-light), var(--fi-gold));
        color: var(--fi-navy);
        box-shadow: 0 10px 22px rgba(217, 180, 90, 0.50);
    }
    .fi-card--navy .fi-ic {
        background: linear-gradient(145deg, var(--fi-navy-light), var(--fi-navy));
        color: #fff;
        box-shadow: 0 10px 22px rgba(31, 58, 138, 0.40);
        animation-delay: .6s;
    }
    .fi-card--navy .fi-ic::before {
        border-color: rgba(31, 58, 138, 0.25);
        background: radial-gradient(circle, rgba(31, 58, 138, 0.12) 0%, rgba(31, 58, 138, 0) 70%);
    }

    @keyframes fiFloat {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-6px); }
    }
    @keyframes fiHalo {
        0%, 100% { transform: scale(1);    opacity: 1;  }
        50%      { transform: scale(1.12); opacity: .6; }
    }

    .fi-hd h4 {
        flex: 1;
        min-width: 0;
        margin: 0;
        font-size: 20px;
        font-weight: 800;
        line-height: 1.3;
        color: var(--fi-navy-dark);
        text-align: left;
    }

    .fi-desc {
        margin: 0;
        font-size: 14.5px;
        line-height: 1.7;
        color: var(--fi-text);
        text-align: left;
    }

    /* checklist (pushed to the bottom: equal rows in both cards) */
    .fi-ticks {
        list-style: none;
        margin: auto 0 0;
        padding: 16px 0 0;
        border-top: 1px solid var(--fi-border);
        text-align: left;
    }
    .fi-ticks li {
        position: relative;
        padding-left: 32px;
        margin: 0 0 10px;
        font-size: 14.5px;
        font-weight: 600;
        line-height: 1.5;
        color: var(--fi-navy-dark);
        transition: transform .25s ease;
    }
    .fi-ticks li:last-child { margin-bottom: 0; }
    .fi-ticks li:hover { transform: translateX(5px); }
    .fi-ticks li::before {
        content: "\f00c";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        left: 0;
        top: 0;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        font-size: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform .25s ease;
    }
    .fi-ticks li:hover::before { transform: scale(1.18); }
    .fi-card--gold .fi-ticks li::before { background: var(--fi-gold); color: var(--fi-navy-dark); }
    .fi-card--navy .fi-ticks li::before { background: var(--fi-navy); color: #fff; }

    /* =========================================================
       SCROLL REVEAL (only active when JS is running)
       ========================================================= */
    .fi-js .fi-reveal {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1);
        transition-delay: var(--fi-delay, 0s);
    }
    .fi-js .fi-steps.is-visible .fi-reveal {
        opacity: 1;
        transform: none;
    }

    .fi-js .fi-step-line {
        transform: scaleX(0);
        transition: transform 1.4s cubic-bezier(.2, .8, .2, 1) .2s;
    }
    .fi-js .fi-steps.is-visible .fi-step-line { transform: scaleX(1); }

    /* =========================================================
       RESPONSIVE
       ========================================================= */
    @media (max-width: 991.98px) {
        .fi-step-line { display: none; }
        .fi-step-name { font-size: 20px; }
    }

    @media (min-width: 768px) and (max-width: 991.98px) {
        .fi-col-last .fi-step-col { max-width: 560px; margin: 0 auto; }
    }

    @media (max-width: 767.98px) {
        .fi-step-col { height: auto; }
        .fi-step-card { flex: 0 0 auto; }
        .fi-kyc-box { flex: 0 0 auto; }
        .fi-ticks { margin-top: 0; }
        /* no sideways hover shift on touch screens */
        .fi-kyc-box:hover { transform: none; }
    }

    @media (max-width: 575.98px) {
        .fi-step-num { width: 48px; height: 48px; font-size: 18px; margin-bottom: 10px; }
        .fi-step-name { font-size: 18px; }
        .fi-step-head { margin-bottom: 18px; }

        .fi-step-card { padding: 24px 14px 18px; border-radius: 22px; gap: 16px; }
        .fi-step-card.fi-card--plain { padding: 0; }

        .fi-kyc-box { gap: 12px; padding: 12px 12px 12px 14px; border-radius: 16px; }
        .fi-kyc-ico { flex-basis: 46px; width: 46px; height: 46px; font-size: 18px; border-radius: 13px; }
        .fi-kyc-txt h5 { font-size: 15px; }
        .fi-kyc-txt p { font-size: 13px; }

        .fi-tag { font-size: 11px; padding: 10px 20px; letter-spacing: 1px; }
        .fi-ic { flex-basis: 58px; width: 58px; height: 58px; font-size: 22px; }
        .fi-hd { gap: 18px; margin-left: 6px; }
        .fi-hd h4 { font-size: 17px; }
        .fi-desc, .fi-ticks li { font-size: 14px; }
    }

    /* Respect users who prefer less motion */
    @media (prefers-reduced-motion: reduce) {
        .fi-steps *,
        .fi-steps *::before,
        .fi-steps *::after {
            animation: none !important;
            transition: none !important;
        }
        .fi-js .fi-reveal { opacity: 1; transform: none; }
        .fi-js .fi-step-line { transform: none; }
    }
    
    @media (min-width:992px){

  /* edges upar ke cards se align */
  .finpro-bottom-area{
    max-width:1400px;
    margin:40px auto 0;
    padding:0 48px;
    box-sizing:border-box;
  }

  /* row ke negative margin se edge bahar na nikle */
  .finpro-bottom-area .row{
    --bs-gutter-x:24px;
    margin-left:0;
    margin-right:0;
  }

  /* dono cards same height aur content center */
  .finpro-invest-card,
  .finpro-help-card{
    width:100%;
    min-height:126px;
    padding:26px 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
  }

  /* left card ka text ek hi line me achha dikhe, button hamesha right me */
  .finpro-invest-card .finpro-card-text{
    flex:1;
    min-width:0;
  }
  .finpro-invest-card p{
    max-width:none;
    margin:0;
  }

  .finpro-invest-btn,
  .finpro-call-btn{
    flex-shrink:0;
    white-space:nowrap;
  }
}
@media (min-width:992px){

  /* upar ke 3-step section ke barabar left-right gap */
  .finpro-bottom-area{
    width:93%;
    max-width:none;
    margin:40px auto 0;
    padding:0;
  }

  /* dono cards same height, text left aur button right */
  .finpro-invest-card,
  .finpro-help-card{
    width:100%;
    min-height:126px;
    padding:26px 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
  }

  .finpro-invest-card .finpro-card-text{
    flex:1;
    min-width:0;
  }

  .finpro-invest-card p{
    max-width:none;
    margin:0;
  }

  .finpro-invest-btn,
  .finpro-call-btn{
    flex-shrink:0;
    white-space:nowrap;
  }
}

/* ===== Mobile: let height be automatic when columns stack ===== */
@media (max-width: 991px) {
    .fi-process-card,
    .fi-bond-card,
    .fi-payment-card,
    .finpro-invest-card,
    .finpro-help-card {
        height: auto !important;
    }
}
/* =========================================================
   REMOVE PINK BACKGROUND
========================================================= */
.bond-hero {
  background-color: #f3f8fd !important;
  background-image:
    radial-gradient(520px 300px at 80% 4%, rgba(212,176,106,.08), transparent 68%) !important,
    linear-gradient(110deg, #eaf7fc 0%, #f3f8fd 55%, #eef5fc 100%) !important;
}

/* =========================================================
   DESKTOP ONLY: REMOVE EXTRA SPACE BETWEEN THE TWO BOXES
========================================================= */
@media (min-width: 901px) {

  .bond-hero .hero-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 40px !important;
    align-items: center !important;
    justify-content: stretch !important;
    min-height: 0 !important;
  }

  /* left side fills its column */
  .bond-hero .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 0 22px !important;
  }

  .bond-hero .hero-title {
    max-width: 100% !important;
  }

  .bond-hero .stats {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* right side fills its column */
  .bond-hero .feature-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    justify-self: stretch !important;
  }

  .bond-hero .feature-card {
    width: 100% !important;
  }

  .bond-hero .slide {
    grid-template-columns: minmax(0, 1fr) 205px !important;
  }

  .bond-hero .bond-title,
  .bond-hero .bond-description {
    max-width: 100% !important;
  }
}

/* Laptop size: slightly smaller gap */
@media (min-width: 901px) and (max-width: 1120px) {
  .bond-hero .hero-main {
    column-gap: 24px !important;
  }

  .bond-hero .slide {
    grid-template-columns: minmax(0, 1fr) 170px !important;
  }
}
/*new */
/* ===== FIX: stop outer containers from clipping the banner ===== */
.feature-wrap,
.bs-wrap,
.bs-banner,
.bs-slides {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.feature-wrap {
  overflow: visible !important;
}

/* give the banner enough room for the toran on top and diyas/dots at the bottom */
.bs-banner {
  display: block !important;
  padding: 62px 30px 64px !important;
}

/* tighter card so everything fits comfortably */
.bs-card { padding: 18px 16px 14px; }
.bs-card-title { margin: 8px 0 12px; }
.bs-offer-tag { margin: 12px 0; }
.bs-disclaimer { margin-top: 10px; }
/* ===== CARD BLUE BACKGROUND ONLY ===== */
.bs-card{
  background:
    radial-gradient(circle at 80% 0%, rgba(120,165,255,.35), transparent 55%),
    linear-gradient(145deg, #2a52a8 0%, #1d3d84 60%, #14306a 100%) !important;
  border:1px solid rgba(255,233,154,.65) !important;
  box-shadow:0 14px 34px rgba(5,15,45,.45), inset 0 1px 0 rgba(255,255,255,.18) !important;
  backdrop-filter:none !important;
}

.bs-ytm-box{
  background:rgba(10,28,70,.6) !important;
  border:1px solid rgba(255,255,255,.22) !important;
}

.bs-ytm-box.featured{
  background:linear-gradient(145deg, rgba(217,174,98,.30), rgba(217,174,98,.10)) !important;
  border-color:rgba(255,233,154,.85) !important;
}
/* Option A: box upar se shuru ho (SEBI badge ke saath top aligned) */
.hero-main .feature-wrap{
  align-self:start !important;
  margin:0 !important;
  padding:0 !important;
}
.hero-main .dw-wrap{
  align-self:start !important;
  margin:0 auto !important;
  height:auto !important;
}
.dw-wrap .dw-banner .dw-disclaimer,
.dw-wrap .dw-banner [class*="disclaimer"],
.bond-hero .dw-disclaimer,
.bond-hero [class*="disclaimer"]{
  font-size:9px !important;
  line-height:1.5 !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  color:#bdcce1 !important;
  text-align:left !important;
  margin:10px 0 0 !important;
}
@media (max-width: 768px) {

  /* Even space inside every cell */
  .bond-feature-stat {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  /* Label and value spacing */
  .bond-feature-stat small {
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  .bond-feature-stat strong {
    margin: 0 !important;
    line-height: 1.25 !important;
  }

  /* Left column cells: breathing room on the right of the text */
  .bond-feature-stat:nth-of-type(2),
  .bond-feature-stat:nth-of-type(4) {
    padding-left: 0 !important;
    padding-right: 12px !important;
  }

  /* Right column cells: space after the vertical divider */
  .bond-feature-stat:nth-of-type(3),
  .bond-feature-stat:nth-of-type(5) {
    padding-left: 18px !important;
    padding-right: 0 !important;
  }

  /* Full-width divider under the first row, across both columns */
  .bond-feature-stat:nth-of-type(2),
  .bond-feature-stat:nth-of-type(3) {
    border-bottom: 1px solid #e3e7ef !important;
  }

  /* Space between the title and the first row */
  .bond-feature-title {
    padding-bottom: 14px !important;
    margin-bottom: 0 !important;
  }

  /* Space above the button, and keep it clear of the floating icons */
  .bond-feature-action {
    margin-top: 20px !important;
    margin-bottom: 8px !important;
    width: calc(100% - 64px) !important;
    justify-self: start !important;
  }
}
@media (max-width: 768px) {

  .bond-feature-strip .bond-feature-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: auto !important;
    gap: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    position: static !important;
  }

  .bond-feature-strip {
    padding: 0 16px !important;
    height: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Title */
  .bond-feature-strip .bond-feature-inner > .bond-feature-title {
    grid-column: 1 / -1 !important;
    display: block !important;
    height: auto !important;
    padding: 0 0 14px !important;
    margin: 0 !important;
    text-align: left !important;
    border: 0 !important;
    border-bottom: 1px solid #e3e7ef !important;
  }

  /* All four stat cells */
  .bond-feature-strip .bond-feature-inner > .bond-feature-stat {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 6px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 16px 0 !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* Row 1 divider */
  .bond-feature-strip .bond-feature-inner > .bond-feature-stat:nth-of-type(2),
  .bond-feature-strip .bond-feature-inner > .bond-feature-stat:nth-of-type(3) {
    border-bottom: 1px solid #e3e7ef !important;
  }

  /* Right column: COUPON and PAYMENT */
  .bond-feature-strip .bond-feature-inner > .bond-feature-stat:nth-of-type(3),
  .bond-feature-strip .bond-feature-inner > .bond-feature-stat:nth-of-type(5) {
    padding-left: 18px !important;
    border-left: 1px solid #e3e7ef !important;
  }

  .bond-feature-strip .bond-feature-stat small {
    display: block !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  .bond-feature-strip .bond-feature-stat strong {
    display: block !important;
    margin: 0 !important;
    line-height: 1.25 !important;
  }

  /* Button */
  .bond-feature-strip .bond-feature-inner > .bond-feature-action {
    grid-column: 1 / -1 !important;
    display: block !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    margin: 20px 0 8px !important;
    padding: 15px 16px !important;
    text-align: center !important;
    color: #fff !important;
    background: #243f7f !important;
    border-radius: 999px !important;
  }
}

/* home*/
  .dw-wrap{
    --dw-gold:#f3cb78;
    --dw-gold-light:#ffe5a0;
    --dw-cream:#fff1c4;
    --dw-navy-1:#102750;
    --dw-navy-2:#1b3b70;
    --dw-navy-3:#244783;
    --dw-pad:26px;               /* equal top & bottom spacing – change here */
    --dw-pad-x:22px;
    width:100%; max-width:660px; margin:0 auto; height:100%;
    container-type:inline-size; font-family:inherit;
  }
  .dw-wrap *{box-sizing:border-box}

  /* ---------- banner ---------- */
  .dw-banner{
    position:relative; isolation:isolate; overflow:hidden; width:100%; height:100%;
    display:flex; flex-direction:column; justify-content:center;
    padding:var(--dw-pad) var(--dw-pad-x);      /* same top & bottom */
    color:#fff;
    border:1px solid #eac36c; border-radius:16px;
    background:linear-gradient(125deg,var(--dw-navy-3) 0%,var(--dw-navy-2) 55%,var(--dw-navy-1) 100%);
    box-shadow:0 16px 40px rgba(10,24,64,.3);
  }
  .dw-fx{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}

  /* light string (sits on the top edge, inside the padding) */
  .dw-lights{
    position:absolute; top:0; left:20px; right:20px; z-index:2; height:3px;
    display:flex; justify-content:space-between; border-top:1px solid #f3cb7866; pointer-events:none;
  }
  .dw-lights span{
    width:6px; height:6px; margin-top:-3px; border-radius:50%; background:#fff0b3;
    box-shadow:0 0 10px 2px #ffd166a8; animation:dw-blink 1.5s ease-in-out infinite alternate;
  }
  .dw-lights span:nth-child(3n){animation-delay:.7s}
  .dw-lights span:nth-child(2n){animation-delay:1s}
  @keyframes dw-blink{from{opacity:.4; transform:scale(.8)}to{opacity:1; transform:scale(1.35)}}

  /* layout */
  .dw-layout{
    position:relative; z-index:1;
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,235px);
    gap:18px; align-items:center;
  }
  .dw-info{min-width:0}
  .dw-eyebrow{
    display:inline-flex; align-items:center; gap:6px; padding:5px 10px; margin-bottom:10px;
    border:1px solid #f3cb7880; border-radius:6px; color:var(--dw-cream); background:#eac36c0d;
    font-size:8.5px; font-weight:800; letter-spacing:1.3px; text-transform:uppercase;
  }
  .dw-headline{
    margin:0 0 8px; font-size:clamp(22px,5.4cqw,32px); line-height:1.12; letter-spacing:-.8px; font-weight:800;
  }
  .dw-headline span{
    display:inline-block; color:var(--dw-gold);
    background:linear-gradient(90deg,#f6d995,#fff4c8,#e7b755,#fff0b4); background-size:250% auto;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    animation:dw-shimmer 5s linear infinite;
  }
  @keyframes dw-shimmer{to{background-position:250% center}}
  .dw-bond-name{margin:0 0 8px; font-size:clamp(12px,2.6cqw,15px); line-height:1.4; font-weight:700}
  .dw-details{display:flex; flex-wrap:wrap; gap:3px 12px; font-size:10.5px; color:#dce6f7; line-height:1.5}
  .dw-details strong{color:#fff}
  .dw-festive{margin:9px 0 0; color:#f6d78f; font-size:11px; line-height:1.5; font-weight:600}

  /* offer panel */
  .dw-panel{
    padding:12px; text-align:center;
    border:1px solid #f0c76e9c; border-radius:14px;
    background:linear-gradient(140deg,#142e5bf5,#0b1c3ef5);
    box-shadow:0 8px 24px #06132b30, inset 0 1px 0 #ffffff12;
  }
  .dw-panel-title{margin:0 0 9px; font-size:10px; font-weight:800; letter-spacing:1.2px; color:#fff}
  .dw-ytm-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:9px}
  .dw-ytm-card{
    min-width:0; padding:9px 4px; border:1px solid #a7bbd64d; border-radius:10px; background:#102750;
  }
  .dw-ytm-card.highlight{border-color:var(--dw-gold); background:#eac36c0c}
  .dw-ytm-label{margin:0 0 5px; color:#bdcce3; font-size:8.5px; font-weight:700}
  .dw-ytm-value{margin:0; font-size:19px; line-height:1; font-weight:800; white-space:nowrap; color:#fff}
  .dw-ytm-value.old{text-decoration:line-through; color:#d3deed}
  .highlight .dw-ytm-value{color:var(--dw-gold-light)}
  .dw-tag{
    display:inline-block; margin-bottom:9px; padding:5px 10px; border-radius:5px;
    background:linear-gradient(100deg,#dfb45d,#ffe4a0,#dfb45d); background-size:200% auto;
    color:#172e56; font-size:8.5px; font-weight:800; animation:dw-glow 4s linear infinite;
  }
  @keyframes dw-glow{to{background-position:200% center}}
  .dw-btn{
    display:flex; justify-content:center; align-items:center; gap:8px; width:100%; min-height:34px;
    border:1px solid #ffedbd55; border-radius:8px; text-decoration:none; color:#16315e;
    font-size:12.5px; font-weight:800;
    background:linear-gradient(110deg,#dfb45d,#ffe5a1,#e7bc64); background-size:200% auto;
    box-shadow:0 4px 16px #f2c66b18; transition:transform .25s, box-shadow .25s;
  }
  .dw-btn:hover{transform:translateY(-2px); box-shadow:0 8px 22px #f3cb7845; background-position:right center}
  .dw-btn span{transition:transform .25s}
  .dw-btn:hover span{transform:translateX(4px)}

  .dw-disclaimer{
    position:relative; z-index:1; margin:12px 0 0; text-align:center;
    font-size:8px; line-height:1.5; color:#bdcce1;
  }

  /* ================= RESPONSIVE ================= */

  /* medium container */
  @container (max-width:560px){
    .dw-wrap{--dw-pad:24px; --dw-pad-x:18px}
    .dw-layout{grid-template-columns:minmax(0,1fr) minmax(0,210px); gap:14px}
    .dw-ytm-value{font-size:17px}
  }

  /* small container: stack */
  @container (max-width:470px){
    .dw-wrap{--dw-pad:22px; --dw-pad-x:14px}
    .dw-layout{grid-template-columns:1fr; gap:14px}
    .dw-info{text-align:center}
    .dw-details{justify-content:center}
    .dw-panel{width:100%; max-width:340px; margin:0 auto}
    .dw-disclaimer{margin-top:10px}
  }

  /* very small container */
  @container (max-width:340px){
    .dw-wrap{--dw-pad:20px; --dw-pad-x:10px}
    .dw-headline{font-size:20px}
    .dw-bond-name{font-size:11.5px}
    .dw-details{font-size:10px}
    .dw-festive{font-size:10px}
    .dw-panel{padding:10px 8px}
    .dw-ytm-grid{gap:6px}
    .dw-ytm-value{font-size:15px}
    .dw-btn{font-size:12px}
  }

  @media (prefers-reduced-motion:reduce){
    .dw-wrap *{animation:none !important; transition:none !important}
    .dw-fx{display:none}
  }
  /* ===== Poppins for p, button, ul, li (headings untouched) ===== */
/* ===== Poppins everywhere EXCEPT headings and icons ===== */
html body *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(h1 *):not(h2 *):not(h3 *):not(h4 *):not(h5 *):not(h6 *):not(i):not(svg):not(svg *):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not([class^="bi-"]):not([class*=" bi-"]) {
    font-family: "Poppins", sans-serif !important;
}

/* make sure the tags you named are covered even if something above is stronger */
html body p,
html body button,
html body ul,
html body li,
html body a,
html body input,
html body label,
html body small,
html body span:not(h1 span):not(h2 span):not(h3 span):not(h4 span):not(h5 span):not(h6 span):not([class*="fa-"]):not([class*="bi-"]) {
    font-family: "Poppins", sans-serif !important;
}
/* ===== Timeline list: aligned dots + both cards start at same height ===== */
.fi-ticks {
    --tick-color: #edeff6;
    margin-top: 0 !important;          /* stop pushing the list to the bottom */
    padding-top: 16px !important;
}

/* same paragraph height in both cards so both lists start on the same line */
@media (min-width: 992px) {
    .fi-step-card .fi-desc {
        min-height: calc(14.5px * 1.7 * 5) !important;   /* 5 lines (incl. the <br>) */
    }
}

/* remove the old single long line */
.fi-ticks::before,
.fi-card--gold .fi-ticks::before,
.fi-card--navy .fi-ticks::before {
    display: none !important;
}

.fi-ticks li {
    position: relative !important;
    padding: 10px 0 10px 28px !important;
    margin: 0 !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;       /* 21.75px per line */
    border: 0 !important;
}

/* dot: centre of first text line = 10px padding + 10.9px half line = ~21px */
.fi-ticks li::before,
.fi-card--gold .fi-ticks li::before,
.fi-card--navy .fi-ticks li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 17px !important;              /* 21px centre - 4px (half of dot) */
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--tick-color) !important;
    box-shadow: none !important;
    font-size: 0 !important;
    z-index: 1 !important;
}

/* line segment through the dot centre */
.fi-ticks li::after {
    content: "" !important;
    position: absolute !important;
    left: 3px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2px !important;
    background: var(--tick-color) !important;
}

/* line starts at the first dot and ends at the last dot */
.fi-ticks li:first-child::after {
    top: 21px !important;
}
.fi-ticks li:last-child::after {
    bottom: auto !important;
    height: 21px !important;
}

.fi-ticks li:hover { transform: none !important; }
.fi-ticks li:hover::before { transform: scale(1.3) !important; }

/* mobile */
@media (max-width: 575.98px) {
    .fi-ticks li { font-size: 14px !important; }
    .fi-ticks li::before { top: 16.5px !important; }
    .fi-ticks li:first-child::after { top: 20.5px !important; }
    .fi-ticks li:last-child::after { height: 20.5px !important; }
}
/* ===== Centre the banner disclaimer (all screen sizes) ===== */
html body .dw-wrap .dw-banner .dw-panel p.disclaimer,
html body .dw-panel .disclaimer,
html body p.disclaimer {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    align-self: center !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}
.bond-isin-row {
  border: 1px solid #d4b26a !important;   /* solid gold border */
  border-radius: 12px !important;
  outline: none !important;
  background-image: none !important;      /* removes any dashed pattern, keeps background-color */
}
@property --bond-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes bondBorderSpin {
  to { --bond-angle: 360deg; }
}

.bond-isin-row {
  position: relative !important;
  border: 1.5px solid transparent !important;   /* the animated ring is drawn by ::before */
  border-radius: 12px !important;
  outline: none !important;
  background-image: none !important;            /* removes the old dashed pattern */
}

.bond-isin-row::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  padding: 1.5px;                               /* border thickness */
  border-radius: 12px;
  background: conic-gradient(
    from var(--bond-angle),
    #d4b26a 0%,
    #f5e3a8 15%,
    #ffffff 25%,
    #d4b26a 40%,
    #d4b26a 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;                      /* cuts out the middle so only the ring shows */
  animation: bondBorderSpin 3s linear infinite;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .bond-isin-row::before { animation: none; }
}
/* ===== Header: font-size by screen width ===== */

/* Keep every menu item on one line */
.navbar .nav-link {
  white-space: nowrap !important;
  font-size: 15px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.navbar .form-control,
.navbar input[type="search"],
.navbar input[type="text"] {
  font-size: 14px !important;
  text-overflow: ellipsis;
}

.navbar .btn {
  font-size: 14px !important;
  white-space: nowrap !important;
  padding: 8px 18px !important;
}

/* Large desktop (1400px+) */
@media (min-width: 1400px) {
  .navbar .nav-link { font-size: 15px !important; padding-left: 14px !important; padding-right: 14px !important; }
  .navbar .btn { font-size: 15px !important; }
}

/* Laptop (1200px - 1399px) */
@media (max-width: 1399.98px) {
  .navbar .nav-link { font-size: 14px !important; padding-left: 9px !important; padding-right: 9px !important; }
  .navbar .btn { font-size: 13px !important; padding: 7px 14px !important; }
}

/* Small laptop (992px - 1199px) */
@media (max-width: 1199.98px) {
  .navbar .nav-link { font-size: 13px !important; padding-left: 7px !important; padding-right: 7px !important; }
  .navbar .form-control,
  .navbar input[type="search"],
  .navbar input[type="text"] { font-size: 12px !important; }
  .navbar .btn { font-size: 12px !important; padding: 6px 12px !important; }
  .navbar-brand img { max-height: 40px !important; width: auto !important; }
}

/* Tablet and mobile (below 992px, menu collapses) */
@media (max-width: 991.98px) {
  .navbar .nav-link { font-size: 15px !important; padding: 10px 0 !important; }
  .navbar .btn { font-size: 14px !important; width: 100%; }
}

/* Small mobile (below 576px) */
@media (max-width: 575.98px) {
  .navbar .nav-link { font-size: 14px !important; }
  .navbar-brand img { max-height: 34px !important; }
}
/* Same base style + same bounce for both boxes */
.finpro-invest-card,
.finpro-help-card {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
   margin: 1px 11px;
    border-radius: 20px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease;
    will-change: transform;
}

/* Bounce on hover (same for both) */
.finpro-invest-card:hover,
.finpro-help-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 35px rgba(30, 60, 140, 0.25);
}

/* Optional: small press effect on click */
.finpro-invest-card:active,
.finpro-help-card:active {
    transform: translateY(-2px) scale(0.99);
}
@keyframes finproBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.finpro-invest-card:hover,
.finpro-help-card:hover {
    animation: finproBounce 0.6s ease infinite;
}
.faq-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 24px;
  padding: 16px 20px;
  background: #fff8e6;
  border: 1px solid #f1dfae;
  border-left: 5px solid #d4a017;   /* gold */
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(11, 31, 77, 0.06);
}

.faq-disclaimer__icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d4a017;              /* gold */
  color: #0b1f4d;                   /* navy */
  font-weight: 800;
  font-size: 16px;
  border-radius: 50%;
}

.faq-disclaimer__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #3a4560;
}

.faq-disclaimer__text strong {
  color: #0b1f4d;                   /* navy */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 4px;
}

@media (max-width: 575px) {
  .faq-disclaimer {
    padding: 14px 16px;
    gap: 12px;
  }
  .faq-disclaimer__text {
    font-size: 14px;
  }
}
.faq-viewall-row {
  display: flex;
  align-items: center;             /* same vertical line */
  justify-content: space-between;  /* text left, button right */
  gap: 16px;
}

.faq-disclaimer-text {
  margin: 0;                       /* removes the default p margin that pushes it up */
  font-size: 15px;
  line-height: 1.5;
}

.faq-viewall-btn {
  flex-shrink: 0;                  /* button never squeezes */
}

/* Mobile: stack text above button */
@media (max-width: 575px) {
  .faq-viewall-row {
    flex-direction: column;
    align-items: flex-start;
  }
}
.faq-viewall-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;  /* text left, button right */
  text-align: left !important;
  gap: 16px;
  width: 100%;
}

.faq-disclaimer-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.faq-viewall-btn {
  flex-shrink: 0;
  margin-left: auto;
}

@media (max-width: 575px) {
  .faq-viewall-row {
    flex-direction: column;
    align-items: flex-start !important;
  }
  .faq-viewall-btn {
    margin-left: 0;
  }
}

.diwali-fire {
    color: #FFD36A;
}

 
    i.fa-solid,
    i.fa-regular,
    i.fa-brands,
    i.fas,
    i.far,
    i.fab {
        font-family: "Font Awesome 6 Free" !important;
    }

    i.fa-solid,
    i.fas {
        font-weight: 900 !important;
    }

    i.fa-regular,
    i.far {
        font-weight: 400 !important;
    }

    i.fa-brands,
    i.fab {
        font-family: "Font Awesome 6 Brands" !important;
        font-weight: 400 !important;
    }