@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
:root{
  --navy:#14224d;
  --navy-2: #015afd;
  --ink:#10131c;
  --muted:#616b7a;
  --cyan:#7fd8f2;
  --cyan-2:#5cc9ea;
  --cyan-light:#dff4fb;
  --bg-light:#eef7fc;
  --black-btn:#0c0d10;
  --line:#e6edf3;
  --radius-lg:28px;
  --radius-md:18px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display-font{
  font-family: "Manrope", sans-serif;
  letter-spacing:-0.02em;
  color: #000000;
  font-size: 2.5rem;
  font-weight: 600;
}
p{color:var(--muted);line-height: 1.5;font-size: 16px;}
a{text-decoration:none;}
.section{padding:110px 0;}
@media(max-width:768px){.section{padding:70px 0;}}
.eyebrow{
  font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--navy); opacity:.6;
}

/* Buttons */
.btn-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--black-btn); color:#fff !important;
  border-radius:100px; padding:14px 30px; font-weight:600; font-size:.95rem;
  border:none; transition:transform .25s ease, box-shadow .25s ease;
}
.btn-pill:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.18); color:#fff; }
.btn-outline-navy{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--navy-2) !important; border:1.5px solid var(--navy-2);
  border-radius:100px; padding:13px 28px; font-weight:600; font-size:.95rem;
  transition:all .25s ease;
}
.btn-outline-navy:hover{ background:var(--navy-2); color:#fff !important; }
.btn-white-pill{
  background:#fff; color:var(--navy-2) !important; border-radius:100px; padding:14px 30px;
  font-weight:600; border:none; transition:transform .25s ease;
}
.btn-white-pill:hover{ transform:translateY(-3px); }

/* Marquee */
.announce-bar{
  background:var(--navy-2); color:#eaf3fb; font-size:.82rem; padding:10px 0;
  overflow:hidden; white-space:nowrap; letter-spacing:.02em;
}
.announce-track{ display:inline-flex; animation:scrollLeft 22s linear infinite; }
.announce-track span{ padding:0 28px; opacity:.9; }
.announce-track span i{ color:var(--cyan); margin-right:6px; }
@keyframes scrollLeft{ 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }

/* Navbar */
.navbar-custom{
  padding:20px 0; background:rgba(255,255,255,.85); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:1000; border-bottom:1px solid var(--line);
}
.brand-logo{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.25rem; color:var(--navy-2); font-family:'Plus Jakarta Sans',sans-serif; }
.brand-badge{
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(145deg,var(--navy),var(--navy-2));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:.95rem;
  box-shadow:inset 0 -3px 6px rgba(255,255,255,.15);
}
.nav-links a{ color:var(--ink); font-weight:500; font-size:.93rem; margin:0 16px; opacity:.75; transition:opacity .2s; }
.nav-links a:hover{ opacity:1; color:var(--navy-2); }

/* Hero */
.hero{
  background:radial-gradient(120% 100% at 50% 0%, var(--bg-light) 0%, #ffffff 68%);
  padding:90px 0 40px; position:relative;
}
.hero h1{font-size:clamp(2.4rem,5vw,4rem);font-weight:800;line-height:1.05;color: #000;}
.hero p.lead{font-size:1.15rem;max-width: 77%;margin: 0 auto;}
.blob{
  position:absolute; border-radius:50% 45% 55% 50%/55% 50% 50% 45%;
  background:linear-gradient(140deg,var(--cyan) 0%, var(--cyan-2) 100%);
  filter:blur(.5px); animation:float 7s ease-in-out infinite;
  opacity:.9;
}
@keyframes float{ 0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-22px) rotate(8deg);} }
.hero-visual{position:relative;min-height: 300px;display:flex;align-items:center;justify-content:center;}
.hero-blob-1{ width:170px; height:170px; top:0; left:0; animation-delay:.2s;}
.hero-blob-2{ width:130px; height:130px; bottom:20px; right:0; animation-delay:1s;}
.hero-blob-3{width:90px;height:90px;top: 20%;right: 13%;animation-delay:2s;}
.bottle-wrap{ position:relative; z-index:3; animation:float 6s ease-in-out infinite; }
.bottle{
  width:200px; height:290px; border-radius:36px 36px 60px 60px;
  background:linear-gradient(160deg,var(--navy) 0%, var(--navy-2) 100%);
  box-shadow:0 40px 70px -20px rgba(20,34,77,.45), inset 0 0 0 2px rgba(255,255,255,.06);
  display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; position:relative;
}
.bottle:before{
  content:""; position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  width:110px; height:34px; border-radius:14px; background:var(--navy-2);
}
.bottle .o-logo{
  width:56px; height:56px; border-radius:50%; background:#fff; color:var(--navy-2);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.6rem; margin-bottom:14px;
}
.bottle .tags{ font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; opacity:.75; text-align:center; line-height:1.9; }
.badge-float{
  position:absolute; background:#fff; border-radius:100px; padding:8px 16px; font-size:.75rem; font-weight:600;
  box-shadow:0 12px 24px rgba(20,34,77,.12); display:flex; align-items:center; gap:6px; z-index:4;
  animation:float 5s ease-in-out infinite;
}
.badge-float i{ color:var(--cyan-2); }

/* Benefit cards */
.benefit-card{
  border-radius:var(--radius-md); overflow:hidden; position:relative; height:340px;
  box-shadow:0 20px 40px -20px rgba(20,34,77,.2); transition:transform .35s ease;
}
.benefit-card:hover{ transform:translateY(-8px); }
.benefit-card img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.benefit-card:hover img{ transform:scale(1.08); }
.benefit-overlay{
  position:absolute; inset:auto 0 0 0; padding:20px;
  background:linear-gradient(0deg, rgba(12,13,16,.82) 0%, rgba(12,13,16,0) 90%); color:#fff;
}
.benefit-overlay h5{ color:#fff; margin-bottom:2px; font-weight:700;}
.benefit-overlay small{ opacity:.85; }

/* Timeline */
.timeline-visual{ position:relative; }
.timeline-photo{
  width:100%;
  border-radius:var(--radius-lg);
}
.timeline-logo-badge{
  position:absolute; width:76px; height:76px; border-radius:50%; background:#fff; box-shadow:0 15px 30px rgba(20,34,77,.2);
  display:flex; align-items:center; justify-content:center; top:-20px; right:10%;
}
.week-item{ border-left:2px solid var(--line); padding:6px 0 6px 28px; position:relative; margin-bottom:34px; }
.week-item:last-child{margin-bottom:0;}
.week-item:before{
  content:""; position:absolute; left:-7px; top:8px; width:12px; height:12px; border-radius:50%;
  background:var(--navy-2); box-shadow:0 0 0 4px var(--cyan-light);
}
.week-tag{font-size:.75rem;font-weight:700;color:var(--cyan-2);text-transform:uppercase;letter-spacing:.1em;background: #eef7fc;padding: 10px;border-radius: 40px;}

/* Featured in */
.featured-strip{ background:var(--bg-light); padding:60px 0; }
.logo-item{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.35rem; color:var(--navy-2); opacity:.55; text-align:center; }

/* All-in-one banner */
.allinone{
  background:linear-gradient(180deg,#cfeefb 0%, #eaf7fd 55%, #ffffff 100%);
  position:relative; overflow:hidden;
}
.allinone .gummy-photo{
  width:100%; border-radius:var(--radius-lg); box-shadow:0 40px 70px -25px rgba(20,34,77,.35);
}

/* Ingredients */
.ingredient-row{ padding:18px 0; border-bottom:1px solid var(--line); }
.ingredient-row h6{font-weight: 600;margin-bottom:4px;color: #3b3b3b;}
.gummy-center{
  width:180px; height:180px; margin:0 auto; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--cyan-light), var(--cyan-2) 75%);
  box-shadow:0 30px 50px -15px rgba(20,34,77,.3); position:relative;
  display:flex; align-items:center; justify-content:center;
}
.gummy-center:after{ content:"O";  font-family: "Manrope", sans-serif; font-weight:800; font-size:2.6rem; color:#fff; opacity:.85;}

/* Checklist */
.check-list li{ display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; font-weight:500; color:var(--ink); }
.check-list li i{ color:#fff; background:var(--navy-2); border-radius:50%; padding:5px; font-size:.75rem; }

/* Effectiveness bars */
.bar-wrap{ margin-bottom:26px; }
.bar-track{ background:var(--bg-light); border-radius:100px; height:14px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:100px; width:0; background:linear-gradient(90deg,var(--navy),var(--cyan-2)); transition:width 1.6s cubic-bezier(.22,1,.36,1); }
.bar-fill.filled{ width:var(--target); }
.bar-label{ display:flex; justify-content:space-between; font-weight:700; margin-bottom:8px; color:var(--navy-2); }

/* Stats */
.stat-num{ font-size:3rem; font-weight:800; color:var(--navy-2);  font-family: "Manrope", sans-serif; }

/* Testimonial strip */
.testi-card{
  background:#fff; border-radius:var(--radius-md); padding:24px; box-shadow:0 20px 40px -20px rgba(20,34,77,.18);
  height:100%; border:1px solid var(--line);
}
.testi-avatars img{ width:34px; height:34px; border-radius:50%; object-fit:cover; margin-right:-10px; border:2px solid #fff; }

/* Left out on purpose */
.feature-pill-card{
  background:var(--bg-light); border-radius:var(--radius-md); padding:26px; height:100%;
}
.feature-pill-card i{ font-size:1.5rem; color:var(--navy-2); margin-bottom:10px; display:inline-block; }
.mg-row{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px dashed var(--line); font-weight:600; color:var(--navy-2); }

/* Introducing big type */
.big-intro{ background:var(--navy-2); color:#fff; position:relative; overflow:hidden; text-align:center; }
.big-intro h2{ color:#fff; font-size:clamp(3rem,9vw,7rem); font-weight:800; line-height:.95; margin:0; }
.big-intro .sub{ letter-spacing:.3em; font-size:1rem; opacity:.6; font-weight:600; }
.big-intro .blob{ opacity:.5; }

/* Product section */
.product-section{ background:#fff; }
.product-gallery-main{
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 30px 60px -20px rgba(20,34,77,.3);
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:var(--bg-light);
}
.thumb-row img{ width:64px; height:64px; object-fit:cover; border-radius:14px; cursor:pointer; border:2px solid transparent; transition:.2s; }
.thumb-row img.active, .thumb-row img:hover{ border-color:var(--navy-2); }
.price-box{ border:1.5px solid var(--line); border-radius:var(--radius-md); padding:22px; }
.price-box.selected{ border-color:var(--navy-2); background:var(--bg-light); }
.trust-row div{ font-size:.82rem; font-weight:600; color:var(--navy-2); display:flex; align-items:center; gap:6px;}
.qty-badge{ background:var(--navy-2); color:#fff; font-size:.7rem; padding:2px 8px; border-radius:100px; margin-left:8px; }

/* FAQ accordion */
.accordion-button{     font-weight: 600;
    color: #3f3f3f;
    font-family: "Manrope", sans-serif; }
.accordion-button:not(.collapsed){ background:var(--bg-light); color:var(--navy-2); box-shadow:none; }
.accordion-button:focus{ box-shadow:none; }
.accordion-item{ border:none; border-bottom:1px solid var(--line); background:transparent; }

/* CTA banner */
.cta-banner{
  overflow:hidden;
  position:relative;
  min-height:380px;
  display:flex;
  align-items:center;
}
.cta-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.cta-banner .content{ position:relative; z-index:2; color:#fff; padding:50px; }
.cta-banner h2{ color:#fff; }

/* Gallery strip */
.gallery-strip img{ width:100%; height:220px; object-fit:cover; border-radius:16px; transition:transform .4s ease; }
.gallery-strip img:hover{ transform:scale(1.04); }

/* Footer */
footer{background: #ffffff;color: #c9d3e6;padding:70px 0 30px;}
footer a{ color:#c9d3e6; opacity:.8; }
footer a:hover{ opacity:1; color:#fff; }
footer h6{ color:#fff; font-weight:700; margin-bottom:16px; font-size:.85rem; letter-spacing:.05em; text-transform:uppercase; }
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;/* padding-top:24px; */font-size:.82rem;opacity:.7;}
.social-circle{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; margin-right:8px; }

::selection{ background:var(--cyan-2); color:#fff; }

.week-item h4{
    font-size: 24px;
}
.ingredient-row img{
    width: auto;
}
.scren2{
    background: url(../images/banner3.png)no-repeat top center;
  
}
.allinone{
    background: #d9f6fe;
}
.flo-tx{

margin: 50px 0;

position: relative;
}
.flo-tx h4{
    font-size: 40px;
    color: #fff;
}
.flo-tx p{
    color: #fff;
}
.flo-pro-box{
    background: #fff;
    border-radius: 15px;
    align-items: center;
    justify-content: center;
    display: inline-flex;
    padding: 0px 20px;
}
.flo-pro-box img{
    width: 80px;
}
.flo-pro-info{margin: 0 50px 0 20px;display: flex;flex-direction: column;align-items: flex-start;}
.flo-pro-box a{
    background: #000;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.flo-pro-box a svg{
    /* width: 20px; */
    color: #fff;
}
.flo-text{
    font-size: 15px;
    font-weight: 600;
    color: #464646;
}
.flo-tx-pr{
    color: #908e8e;
    padding-top: 5px;
    font-weight: 600;
}



.bann-section {
    width: 396px;
    height: 160px;
    position: relative;
    overflow: hidden;
    \: absolute;
    margin: 110px 0 110px 500px;
}

/* Horizontal line */
.line {
    position: absolute;
    left: 18px;
    top: 68px;
    width: 95px;
    height: 1px;
    background: rgba(255,255,255,.55);
}

/* White dot */
.dot {
    position: absolute;
    left: 14px;
    top: 64px;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255,255,255,.7);
}

/* Glass bubble */
.bubble {
    position: absolute;
    left: 123px;
    top: 38px;

    padding: 16px 18px;
    border-radius: 16px;

    background: rgba(255,255,255,.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255,255,255,.22);

    color: #fff;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 400;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.18),
        0 8px 18px rgba(0,0,0,.08);
}

.bubble strong {
    font-size: 16px;
    font-weight: 700;
}
.accordion{
    background: #f0f0f0;
    padding: 8px;
    border-radius: 12px;
}
.hero{
    background: url(../images/banner1.jpg)no-repeat center bottom;
    background-size: cover;
    height: 125vh;
}
.cat-sec{
     background: url(../images/banner4.jpg)no-repeat center bottom;
     background-size: cover;
     margin-bottom: 50px;
}
@media(max-width:768px){
.bann-section{
    display: none;
}

}