/* ===== BULLET POINTS ===== */
.why-vivant .wv-points{
    list-style:none;
    margin-bottom: 54px; /* space after the list, before the photo/banner */
    padding:0;
    display:flex;
    flex-direction:column;
    gap:18px;
    max-width:620px;
}

.why-vivant .wv-points li{
    position:relative;
    padding-left:42px;
    font-size:14.5px;
    line-height:1.7;
    color:#000;
    font-weight:400;
}

.why-vivant .wv-points li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:2px;
    width:24px;
    height:24px;
    border-radius:50%;
    background:#3F9258;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:700;
}

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

@media (max-width:1024px){

    .why-vivant{
        padding:60px 24px 70px;
    }

    .why-vivant .wv-top{
        grid-template-columns:1fr;
        gap:32px;
    }

    .why-vivant .wv-content-col{
        order:1;
        align-items:center;
        text-align:center;
    }

    .why-vivant .wv-photo-col{
        order:2;
        justify-content:center;
    }

    .why-vivant .wv-photo-col img{
        max-width:340px;
        margin-bottom:-40px;
    }

    .why-vivant .wv-eyebrow{
        align-self:center;
    }

    .why-vivant .wv-title{
        font-size:32px;
        margin-bottom:20px;
    }

    .why-vivant .wv-points{
        max-width:100%;
        width:100%;
        text-align:left;
        margin-bottom: 20px;
    }

    .why-vivant .wv-banner{
        padding:28px 24px;
    }

    .why-vivant .wv-banner span{
        font-size:20px;
    }

    .why-vivant .wv-arrow{
        display:none;
    }
}

@media (max-width:767px){

    .why-vivant{
        padding:50px 20px;
    }

    .why-vivant .wv-top{
        gap:28px;
    }

    .why-vivant .wv-title{
        font-size:28px;
        line-height:1.2;
    }

    .why-vivant .wv-points{
        gap:16px;
        margin-bottom: 1px;
    }

    .why-vivant .wv-points li{
        font-size:15px;
        line-height:1.6;
        padding-left:36px;
    }

    .why-vivant .wv-points li::before{
        width:22px;
        height:22px;
        font-size:12px;
    }

    .why-vivant .wv-photo-col img{
        max-width:320px;
    }

    .why-vivant .wv-banner{
        padding:22px 18px;
        border-radius:16px;
    }

    .why-vivant .wv-banner span{
        font-size:16px;
        line-height:1.4;
    }

    .why-vivant .wv-banner svg{
        width:18px;
        height:18px;
    }
}


.why-vivant .wv-arrow{
    position: absolute;
    top: -50px;
    left: -145px;
    width: 150px;
    height: auto;
    pointer-events: none;
    z-index: 2;
}
.why-vivant{
  --navy:#2050C8;
  --navy-deep:#18377A;
  --orange:#D6394A;
  --blue-soft:#E9EFFA;
  --bg:#FFFFFF;
  --ink:#1A2030;
  --gray:#5C6679;

  position:relative;
  background:var(--bg);
  overflow:visible;
  padding:40px 32px 0px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  margin:0;
  box-sizing:border-box;
}
.why-vivant *, .why-vivant *::before, .why-vivant *::after{ box-sizing:border-box; margin:0; padding:0; }

.why-vivant .wv-top{
    max-width:1240px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:end;
    gap:56px;
    position:relative;
    z-index:1;
}
.why-vivant .wv-content-col{
  order:1;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.why-vivant .wv-photo-col{
  order:2;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  align-self:end;
  
}
.why-vivant .wv-photo-col img{
    width:100%;
   
    height:auto;
    object-fit:contain;
    display:block;
    position:relative;
    z-index:2;
}

.why-vivant .wv-eyebrow{
  display:inline-flex; align-items:center;
  align-self:flex-start;
  width:fit-content;
  font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy); background:var(--blue-soft);
  padding:7px 16px; border-radius:999px;
  margin-bottom:20px;
}
.why-vivant .wv-title{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:clamp(28px, 3.6vw, 38px); line-height:1.15; letter-spacing:-0.015em;
  color:var(--ink); margin-bottom:20px;
}
.why-vivant .wv-body{
  font-size:16.5px; line-height:1.7; color:#000; max-width:540px;
  margin-bottom:0;
}
.why-vivant .wv-banner-wrap{
  position:relative; z-index:2;
 margin:-30px auto 0;
}

/* ===== BANNER (original animations: shine + hover + star spin) ===== */
.why-vivant .wv-banner{
  position:relative;
  overflow:hidden;
  background:linear-gradient(100deg, var(--navy-deep) 0%, #5A57B0 52%, var(--orange) 100%);
  border-radius:22px;
  padding:32px 40px;
  margin:30px 0 0;
  display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap;
  box-shadow:0 22px 44px -18px rgba(32,80,200,.4);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.why-vivant .wv-banner::after{
  content:"";
  position:absolute; top:0; left:0;
  height:100%; width:60%;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.28) 45%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.28) 55%, transparent 100%);
  transform:skewX(-18deg);
  pointer-events:none;
  animation:wv-shine 4.5s ease-in-out infinite;
}
@keyframes wv-shine{
  0%   { left:-70%; }
  60%  { left:130%; }
  100% { left:130%; }
}
.why-vivant .wv-banner:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 32px 60px -18px rgba(32,80,200,.55);
}
.why-vivant .wv-banner svg{
  position:relative; z-index:1;
  width:24px; height:24px; color:var(--bg); flex-shrink:0;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.why-vivant .wv-banner:hover svg{
  transform:rotate(180deg) scale(1.2);
}
.why-vivant .wv-banner span{
  position:relative; z-index:1;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:clamp(16px, 2vw, 26px); letter-spacing:.02em;
  color:var(--bg);
  text-align:center; text-transform:uppercase;
}
.why-vivant .wv-bottom-space{ height:0px; }

/* ===== SCROLL FADE-UP ENTRANCE (optional — nahi chahiye to
   ye block + neeche <script> delete kar do) ===== */
.why-vivant .wv-anim{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.why-vivant .wv-anim.wv-in{
  opacity:1;
  transform:translateY(0);
}
.why-vivant .wv-photo-col.wv-anim{ transition-delay:0s; }
.why-vivant .wv-content-col.wv-anim{ transition-delay:.15s; }
.why-vivant .wv-banner-wrap.wv-anim{ transition-delay:.3s; }
/* ===== END SCROLL FADE-UP ===== */

@media (prefers-reduced-motion: reduce){
  .why-vivant .wv-anim{ opacity:1; transform:none; transition:none; }
  .why-vivant .wv-banner::after{ animation:none; }
  .why-vivant .wv-banner, .why-vivant .wv-banner svg{ transition:none; }
}

/* ===== RESPONSIVE ===== */
@media (max-width:1024px){
  .why-vivant .wv-top{ grid-template-columns:1fr; gap:28px; }
  .why-vivant .wv-photo-col{ order:2; padding-top:20px; }
  .why-vivant .wv-content-col{ text-align:center; align-items:center; }
  .why-vivant .wv-eyebrow{ align-self:center; }
  .why-vivant .wv-body{ margin-left:auto; margin-right:auto; }
  .why-vivant .wv-arrow{ display:none; }
  .why-vivant .wv-title{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size: 20px; 

}
.why-vivant .wv-body{
  font-size:14px; 
  line-height:1.4; color:#000; max-width:540px;
  margin-bottom:30px;
}
}
@media (max-width:640px){
  .why-vivant{ padding:56px 20px 48px; }
  .why-vivant .wv-banner{ padding:26px 22px; border-radius:14px; }
    .why-vivant .wv-arrow{
        display:none;
}
.why-vivant .wv-title{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size: 20px; 

}
.why-vivant .wv-body{
  font-size:14px; 
  line-height:1.4; color:#000; max-width:540px;
  margin-bottom:30px;
}
}