/* ============ TOKENS ============ */
:root{
  --navy:#11153b;
  --navy-2:#125486;
  --crest:#1D4F8C;
  --crest-2:#2C68AC;
  --sky:#6FB7E0;
  --sky-2:#9FD4EE;
  --mist:#EAF3F8;
  --foam:#F6FAFC;
  --platinum:#C9D6E0;
  --ink:#0F2036;
  --ink-soft:#4A5C74;
  --white:#FFFFFF;
  --line:#DCE6EE;
  --success:#2E9E6B;

  --display:'Fraunces', serif;
  --body:'Manrope', sans-serif;
  --mono:'Space Grotesk', sans-serif;

  --r-sm:10px;
  --r-md:18px;
  --r-lg:28px;
  --shadow-sm:0 2px 10px rgba(11,30,61,.06);
  --shadow-md:0 12px 32px rgba(11,30,61,.10);
  --shadow-lg:0 24px 60px rgba(11,30,61,.18);
  --ease:cubic-bezier(.22,.9,.28,1);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  color:var(--ink);
  background:#ffffff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
ul{list-style:none;}
.container{max-width:1220px;margin:0 auto;padding:0 32px;}
section{position:relative;}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;color:var(--navy);letter-spacing:-.01em;}
::selection{background:var(--sky);color:var(--navy);}
:focus-visible{outline:2px solid var(--crest-2);outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ============ EYEBROW / LABEL ============ */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--crest-2);
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:18px;height:1.5px;background:var(--crest-2);display:block;}

.section-head{max-width:640px;margin-bottom:52px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:clamp(28px,3.6vw,42px);line-height:1.15;margin-bottom:16px;}
.section-head p{color:var(--ink-soft);font-size:16.5px;}

.pill{
  display:inline-block;padding:7px 16px;border-radius:99px;
  font-size:12.5px;font-weight:700;letter-spacing:.03em;
  background:var(--mist);color:var(--crest);
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 30px;border-radius:99px;font-weight:700;font-size:14.5px;
  letter-spacing:.01em;transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  white-space:nowrap;
}
.btn-primary{background:var(--white);color:var(--navy);box-shadow:var(--shadow-sm);}
.btn-primary:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.btn-solid{background:var(--crest);color:var(--white);}
.btn-solid:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(29,79,140,.35);background:var(--navy);}
.btn-outline{border:1.5px solid rgba(255,255,255,.55);color:var(--white);}
.btn-outline:hover{background: #1d4f8c;
    transform: translateY(-3px);
    color: white;
    border: 1px solid white;}
.btn-outline-dark{border:1.5px solid var(--line);color:var(--navy);}
.btn-outline-dark:hover{border-color:var(--crest);background:#125486;transform:translateY(-3px);}
.btn-sm{padding:10px 20px;font-size:13px; display:none;}
.btn-block{width:100%;}

/* ============ LOGO MARK ============ */
.logo{display:flex;align-items:center;gap:10px;}
.logo-mark{width:34px;height:34px;flex:0 0 auto;}
.logo-word{font-family:var(--display);font-size:19px;font-weight:500;line-height:1.05;color:var(--navy);}
.logo-word small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.32em;font-weight:600;color:var(--crest-2);margin-top:1px;}
.logo.on-dark .logo-word{color:var(--white);}
.logo.on-dark .logo-word small{color:var(--sky-2);}
.logo{
    display: flex;
    align-items: center;
}

.logo-img{
    width: 100px;      /* Apne hisaab se size change kar sakte ho */
    height: auto;
    display: block;
}
/* ============ HEADER ============ */
header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:20px 0;transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
header .container{display:flex;align-items:center;justify-content:space-between;}
header.scrolled{background:#11153b;backdrop-filter:blur(14px);padding:13px 0;box-shadow:var(--shadow-sm);}
header.scrolled .logo-word{color:var(--navy);}
header.scrolled .logo-word small{color:var(--crest-2);}
header:not(.scrolled) .logo-word{color:var(--white);}
header:not(.scrolled) .logo-word small{color:var(--sky-2);}

nav.main-nav{display:flex;align-items:center;gap:40px;}
nav.main-nav ul{display:flex;gap:36px;}
nav.main-nav a.nav-link{
  font-size:14.5px;font-weight:600;padding:6px 0;position:relative;
  color:var(--white);transition:color .3s;
}
header.scrolled nav.main-nav a.nav-link{color:white;}
nav.main-nav a.nav-link::after{
  content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;background:currentColor;
  transition:width .3s var(--ease);
}
nav.main-nav a.nav-link:hover::after,
nav.main-nav a.nav-link.active::after{width:100%;}
.header-cta{display:flex;align-items:center;gap:22px;}
.menu-toggle{display:none;width:40px;height:40px;align-items:center;justify-content:center;border-radius:50%;}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{
  content:"";display:block;width:20px;height:2px;background:var(--white);position:relative;transition:.3s;
}
header.scrolled .menu-toggle span,header.scrolled .menu-toggle span::before,header.scrolled .menu-toggle span::after{background:white;}
.menu-toggle span::before{position:absolute;top:-6px;}
.menu-toggle span::after{position:absolute;top:6px;}

/* ============ PAGES ============ */
.page{display:none;}
.page.active{display:block;}

/* ============ HERO SLIDER ============ */


.bottle-mock{
    display: flex;
    justify-content: center;
    align-items: center;
}

.bottle-img{
    width: 600px;      /* apne hisaab se change kar sakte ho */
    max-width: 100%;
    height: auto;
    display: block;
}
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  overflow:hidden;background:var(--navy);
}
.hero-slide{
  position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease);
}
.hero-slide.active{opacity:1;}
.hero-slide.s1{background:
  radial-gradient(ellipse 900px 600px at 82% 18%, rgba(111,183,224,.35), transparent 60%),
  linear-gradient(160deg,#11153b 0%, #11153b 45%, #11153b 100%);}
.hero-slide.s2{background:
  radial-gradient(ellipse 800px 500px at 15% 85%, rgba(159,212,238,.28), transparent 60%),
  linear-gradient(200deg,#0B1E3D 0%, #123159 55%, #1D4F8C 100%);}
.hero-slide.s3{background:
  radial-gradient(ellipse 700px 700px at 50% 0%, rgba(111,183,224,.30), transparent 65%),
  linear-gradient(180deg,#081426 0%, #0F2A52 100%);}

.hero-waves{position:absolute;left:0;right:0;bottom:-2px;line-height:0;z-index:2;}
.hero-content{position:relative;z-index:3;width:100%;padding-top:80px;}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
.hero-copy .pill{background:rgba(255,255,255,.1);color:var(--sky-2);}
.hero-copy h1{
  color:var(--white);font-size:clamp(38px,5.4vw,64px);line-height:1.06;
  margin:20px 0 22px;max-width:620px;
}
.hero-copy h1 em{font-style:italic;color:var(--sky-2);}
.hero-copy p{color:rgba(255,255,255,.72);font-size:17.5px;max-width:480px;margin-bottom:34px;}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:52px;}
.hero-dots{display:flex;gap:10px;}
.hero-dots button{width:34px;height:4px;border-radius:4px;background:rgba(255,255,255,.28);transition:.4s;}
.hero-dots button.active{background:var(--sky-2);width:52px;}

.hero-visual{position:relative;display:flex;justify-content:center;align-items:flex-end;}
.bottle-mock{position:relative;width:600px;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35));animation:float 6s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}}
.bottle-cap{width:46px;height:26px;background:linear-gradient(180deg,var(--sky-2),var(--crest));border-radius:6px 6px 3px 3px;margin:0 auto;}
.bottle-neck{width:26px;height:22px;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.15));margin:0 auto;}
.bottle-body{
  width:150px;height:340px;border-radius:20px 20px 34px 34px;
  background:linear-gradient(120deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.08) 30%, rgba(255,255,255,.25) 55%, rgba(255,255,255,.06) 100%);
  border:1px solid rgba(255,255,255,.35);position:relative;overflow:hidden;
  box-shadow:inset -14px 0 26px rgba(255,255,255,.12), inset 10px 0 20px rgba(0,0,0,.06);
}
.bottle-ribs{position:absolute;bottom:26px;left:0;right:0;height:36px;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0px, rgba(255,255,255,.18) 2px, transparent 2px, transparent 7px);}
.bottle-label{
  position:absolute;left:0;right:0;top:118px;height:118px;
  background:linear-gradient(160deg,var(--navy),var(--crest));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  box-shadow:0 2px 12px rgba(0,0,0,.25);
}
.bottle-label .drop-ico{width:20px;height:20px;}
.bottle-label span{font-family:var(--display);color:var(--white);font-size:15px;letter-spacing:.02em;}
.bottle-label small{font-family:var(--mono);color:var(--sky-2);font-size:8px;letter-spacing:.28em;}
.hero-visual::before{
  content:"";position:absolute;bottom:0;width:220px;height:26px;border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,0,0,.35), transparent 70%);
}
.float-badge{
  position:absolute;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-radius:16px;padding:14px 18px;box-shadow:var(--shadow-md);
  display:flex;align-items:center;gap:10px;
}
.float-badge.b1{top:8%;left:0;animation:float 7s ease-in-out infinite;}
.float-badge.b2{bottom:14%;right:0;animation:float 8s ease-in-out infinite 1s;}
.float-badge b{display:block;font-family:var(--mono);font-size:16px;color:var(--navy);}
.float-badge small{color:var(--ink-soft);font-size:11.5px;}

.scroll-cue{position:absolute;bottom:66px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.55);
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;}
.scroll-cue .line{width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.7),transparent);
  animation:scrollcue 2s ease-in-out infinite;}
@keyframes scrollcue{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}
  50.01%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in-view{opacity:1;transform:translateY(0);}
.stagger .reveal:nth-child(1){transition-delay:.05s;}
.stagger .reveal:nth-child(2){transition-delay:.14s;}
.stagger .reveal:nth-child(3){transition-delay:.23s;}
.stagger .reveal:nth-child(4){transition-delay:.32s;}
.stagger .reveal:nth-child(5){transition-delay:.41s;}
.stagger .reveal:nth-child(6){transition-delay:.5s;}
.stagger .reveal:nth-child(7){transition-delay:.59s;}
.stagger .reveal:nth-child(8){transition-delay:.68s;}

/* ============ ABOUT SECTION (home) ============ */

.about-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px; /* zarurat ke hisab se roundness adjust karein */
  z-index: 2; /* taaki image ripples ke upar ya center me sahi dikhe */
}
.about-sec{padding:120px 0 100px;background:var(--foam);}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center;}
.about-art{position:relative;aspect-ratio:1/1.05;border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--mist),#fff 60%);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.about-art .ripple{position:absolute;border:1px solid rgba(29,79,140,.18);border-radius:50%;}
.about-art .r1{width:70%;height:70%;animation:ripple 6s ease-in-out infinite;}
.about-art .r2{width:50%;height:50%;animation:ripple 6s ease-in-out infinite 1s;}
.about-art .r3{width:30%;height:30%;animation:ripple 6s ease-in-out infinite 2s;}
@keyframes ripple{0%,100%{transform:scale(1);opacity:.7;}50%{transform:scale(1.08);opacity:1;}}
.about-art .core-drop{width:74px;height:74px;position:relative;z-index:2;}
.about-copy p{color:var(--ink-soft);font-size:16.5px;margin-bottom:28px;max-width:520px;}
.check-list{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin-bottom:32px;}
.check-list li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14.5px;color:var(--navy);}
.check-list svg{flex:0 0 auto;width:18px;height:18px;color:var(--crest-2);}

/* ============ SERVICE / FEATURE CARDS ============ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:34px 28px;transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:transparent;}
.card-ico{
  width:52px;height:52px;border-radius:14px;background:var(--mist);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;color:var(--crest);
  transition:background .4s,color .4s;
}
.card:hover .card-ico{background:var(--crest);color:var(--white);}
.card-ico svg{width:24px;height:24px;}
.card h3{font-size:19px;margin-bottom:10px;}
.card p{color:var(--ink-soft);font-size:14.5px;margin-bottom:18px;}
.card-link{font-size:13.5px;font-weight:700;color:var(--crest);display:inline-flex;align-items:center;gap:6px;}
.card-link svg{width:14px;height:14px;transition:transform .3s;}
.card-link:hover svg{transform:translateX(4px);}

.services-sec{padding:100px 0;background:var(--white);}
.why-sec{padding:100px 0;background:var(--navy);position:relative;overflow:hidden;}
.why-sec::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 700px 400px at 90% 10%, rgba(111,183,224,.14), transparent 60%);}
.why-sec .section-head h2, .why-sec .eyebrow{color:var(--white);}
.why-sec .eyebrow{color:var(--sky-2);}
.why-sec .eyebrow::before{background:var(--sky-2);}
.why-sec .section-head p{color:rgba(255,255,255,.65);}
.why-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);
  padding:28px 24px;backdrop-filter:blur(6px);}
.why-card:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.25);}
.why-card .card-ico{background:rgba(255,255,255,.08);color:var(--sky-2);}
.why-card:hover .card-ico{background:var(--sky-2);color:var(--navy);}
.why-card h3{color:var(--white);font-size:17px;}
.why-card p{color:rgba(255,255,255,.6);font-size:13.5px;margin-bottom:0;}

/* ============ BOTTLE SIZES ============ */
.sizes-sec{padding:100px 0;background:var(--foam);}
.size-card{background:var(--white);border-radius:var(--r-md);border:1px solid var(--line);
  padding:30px 26px 26px;text-align:center;position:relative;transition:transform .4s var(--ease),box-shadow .4s var(--ease);}
.size-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);}
.size-badge{position:absolute;top:18px;right:18px;background:var(--mist);color:var(--crest);
  font-size:10.5px;font-weight:700;padding:5px 10px;border-radius:99px;letter-spacing:.02em;}
.size-card .mini-bottle{width:64px;margin:0 auto 20px;}
.mini-bottle .bottle-body{width:64px;height:150px;border-radius:9px 9px 15px 15px;}
.mini-bottle .bottle-cap{width:20px;height:12px;border-radius:3px;}
.mini-bottle .bottle-neck{width:12px;height:10px;}
.mini-bottle .bottle-label{top:52px;height:52px;}
.mini-bottle .bottle-label span{font-size:8px;}
.mini-bottle .bottle-label small{font-size:5px;}
.mini-bottle .drop-ico{width:10px;height:10px;}
.size-card h3{font-size:18px;margin-bottom:6px;}
.size-card p{color:var(--ink-soft);font-size:13.5px;margin-bottom:20px;}

/* ============ LABEL SHOWCASE ============ */
.labels-sec{padding:100px 0;background:var(--navy);position:relative;overflow:hidden;}
.labels-sec::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 800px 500px at 10% 100%, rgba(111,183,224,.16), transparent 60%);}
.label-row{display:flex;gap:22px;overflow-x:auto;padding-bottom:14px;scrollbar-width:thin;}
.label-chip{
  flex:0 0 190px;height:250px;border-radius:20px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;padding:20px;
  box-shadow:var(--shadow-md);transition:transform .4s var(--ease);
}
.label-chip:hover{transform:translateY(-10px) scale(1.02);}
.label-chip span.tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:6px;}
.label-chip h4{color:var(--white);font-size:19px;font-family:var(--display);font-weight:500;}
/*.lc1{background:linear-gradient(160deg,#0B1E3D,#1D4F8C);}*/
/*.lc2{background:linear-gradient(160deg,#7C6A46,#B79A6B);}*/
/*.lc3{background:linear-gradient(160deg,#4A2C4E,#8A5A8F);}*/
/*.lc4{background:linear-gradient(160deg,#1D4F8C,#3B7CB8);}*/
/*.lc5{background:linear-gradient(160deg,#264D3B,#4A8064);}*/
/*.lc6{background:linear-gradient(160deg,#5C3A2E,#A9694F);}*/
/* Purani linear-gradient wali lines ki jagah ye likhein: */

.lc1 { 
  background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=500') center/cover no-repeat; 
}
.lc2 { 
  background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1519741497674-611481863552?w=500') center/cover no-repeat; 
}
.lc3 { 
  background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=500') center/cover no-repeat; 
}
.lc4 { 
  background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1557804506-669a67965ba0?w=500') center/cover no-repeat; 
}
.lc5 { 
  background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1566073771259-6a8506099945?w=500') center/cover no-repeat; 
}
.lc6 { 
  background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=500') center/cover no-repeat; 
}

/* ============ COUNTERS ============ */
.counters-sec{padding:70px 0;background:var(--navy);position:relative;}
.counters-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;}
.counter-item b{display:block;font-family:var(--mono);font-size:clamp(32px,4vw,48px);color:var(--white);}
.counter-item span{color:rgba(255,255,255,.75);font-size:13.5px;font-weight:600;letter-spacing:.02em;}

/* ============ TESTIMONIALS ============ */
.testi-sec{padding:100px 0;background:var(--white);}
.testi-card{background:var(--foam);border:1px solid var(--line);border-radius:var(--r-md);padding:30px 28px;}
.stars{display:flex;gap:3px;color:#E3A73B;margin-bottom:16px;}
.stars svg{width:15px;height:15px;}
.testi-card p{color:var(--ink);font-size:15px;margin-bottom:22px;font-style:italic;}
.testi-who{display:flex;align-items:center;gap:12px;}
.avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--crest),var(--sky));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;flex:0 0 auto;}
.testi-who b{display:block;font-size:14px;color:var(--navy);}
.testi-who span{font-size:12.5px;color:var(--ink-soft);}

/* ============ CTA ============ */
.cta-sec{padding:50px 0;position:relative;overflow:hidden;background: var(--crest);text-align:center;}
/*.cta-sec::before{content:"";position:absolute;inset:0;*/
/*  background:radial-gradient(ellipse 900px 500px at 50% 120%, rgba(111,183,224,.28), transparent 60%);}*/
.cta-sec h2{color:var(--white);font-size:clamp(28px,4vw,46px);max-width:720px;margin:0 auto 18px;}
.cta-sec p{color:rgba(255,255,255,.68);max-width:520px;margin:0 auto 38px;}
.cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* ============ FOOTER ============ */
footer{background:#11153b;padding:80px 0 26px;color:rgba(255,255,255,.6);}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:50px;margin-bottom:60px;}
.footer-about p{margin:18px 0 22px;font-size:14px;line-height:1.7;max-width:300px;}
.social-row{display:flex;gap:10px;}
.social-row a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;transition:.3s;}
.social-row a:hover{background:var(--crest-2);transform:translateY(-3px);}
.social-row svg{width:16px;height:16px;}
footer h4{color:var(--white);font-family:var(--body);font-size:14px;font-weight:700;letter-spacing:.02em;margin-bottom:20px;}
footer ul li{margin-bottom:12px;}
footer ul a{font-size:14px;transition:.3s;}
footer ul a:hover{color:var(--sky-2);padding-left:4px;}
.footer-contact li{display:flex;gap:10px;font-size:14px;margin-bottom:16px;align-items:flex-start;}
.footer-contact svg{width:17px;height:17px;flex:0 0 auto;margin-top:2px;color:var(--sky-2);}
.newsletter{display:flex;gap:0;margin-top:16px;border:1px solid rgba(255,255,255,.15);border-radius:99px;overflow:hidden;padding:4px;}
.newsletter input{flex:1;background:transparent;border:none;padding:10px 16px;color:#fff;font-size:13.5px;}
.newsletter input::placeholder{color:rgba(255,255,255,.4);}
.newsletter button{background:var(--crest-2);color:#fff;padding:10px 18px;border-radius:99px;font-size:13px;font-weight:700;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:26px;display:flex;justify-content:center;
  font-size:13px;flex-wrap:wrap;gap:12px;}

/* ============ INNER HERO (About/Services/Contact) ============ */
.inner-hero{
  min-height:56vh;display:flex;align-items:center;padding-top:90px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#081426, #0F2A52 60%, #1D4F8C 130%);
}
.inner-hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 700px 400px at 85% 20%, rgba(111,183,224,.24), transparent 60%);}
.inner-hero .container{position:relative;z-index:2;}
.inner-hero .eyebrow{color:var(--sky-2);}
.inner-hero .eyebrow::before{background:var(--sky-2);}
.inner-hero h1{color:var(--white);font-size:clamp(34px,5vw,54px);max-width:700px;margin-bottom:16px;}
.inner-hero p{color:rgba(255,255,255,.68);max-width:560px;font-size:16.5px;}
.breadcrumb{display:flex;gap:8px;align-items:center;margin-top:26px;font-size:13px;color:rgba(255,255,255,.5);}
.breadcrumb b{color:var(--sky-2);font-weight:600;}

/* ============ ABOUT PAGE ============ */
.story-sec{padding:110px 0;background:var(--white);}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;}
.story-copy p{color:var(--ink-soft);font-size:16px;margin-bottom:20px;}
.story-art{position:relative;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(150deg,#0B1E3D,#1D4F8C 70%);display:flex;align-items:center;justify-content:center;}
.story-art .waves-deco{position:absolute;inset:0;opacity:.5;}
.story-art .core-drop{width:110px;height:110px;position:relative;z-index:2;}

.mv-sec{padding:0 0 110px;background:var(--white);}
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.mv-card{padding:44px 38px;border-radius:var(--r-lg);}
.mv-card.mission{background:var(--mist);}
.mv-card.vision{background:var(--navy);}
.mv-card.vision h3, .mv-card.vision p{color:var(--white);}
.mv-card.vision p{color:rgba(255,255,255,.68);}
.mv-card .card-ico{margin-bottom:24px;}
.mv-card h3{font-size:24px;margin-bottom:14px;}
.mv-card p{color:var(--ink-soft);font-size:15.5px;}

.process-sec{padding:110px 0;background:var(--foam);}
.process-row{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;position:relative;}
.process-row::before{content:"";position:absolute;top:26px;left:10%;right:10%;height:1px;
  background:repeating-linear-gradient(90deg,var(--line) 0 8px, transparent 8px 16px);z-index:0;}
.process-step{position:relative;z-index:1;text-align:center;}
.process-num{width:52px;height:52px;border-radius:50%;background:var(--white);border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-family:var(--mono);
  font-weight:700;color:var(--crest);transition:.4s;}
.process-step:hover .process-num{background:var(--crest);color:#fff;border-color:var(--crest);transform:scale(1.08);}
.process-step h4{font-size:15.5px;margin-bottom:8px;color:var(--navy);}
.process-step p{font-size:13px;color:var(--ink-soft);}

.team-sec{padding:110px 0;background:var(--white);}
.team-card{text-align:center;}
.team-photo{aspect-ratio:1/1.05;border-radius:var(--r-md);background:linear-gradient(150deg,var(--mist),#fff);
  border:1px solid var(--line);margin-bottom:18px;display:flex;align-items:center;justify-content:center;
  transition:.4s var(--ease);}
.team-card:hover .team-photo{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.team-photo .init{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--crest),var(--sky));
  color:#fff;font-family:var(--display);font-size:22px;display:flex;align-items:center;justify-content:center;}
.team-card h4{font-size:16.5px;margin-bottom:4px;}
.team-card span{font-size:13px;color:var(--crest-2);font-weight:600;}

.qa-sec{padding:110px 0;background:var(--navy);}
.qa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.qa-card{text-align:center;padding:30px 20px;}
.qa-card .card-ico{margin:0 auto 20px;background:rgba(255,255,255,.08);color:var(--sky-2);}
.qa-card h4{color:var(--white);font-size:15.5px;margin-bottom:8px;}
.qa-card p{color:rgba(255,255,255,.6);font-size:13px;}

.story-art {
    /* aapka baaki CSS waise hi rahega */
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.story-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Image distortion ke bina area fill karegi */
    display: block;
}

/* ============ SERVICES PAGE ============ */
.svc-detail{padding:100px 0;border-bottom:1px solid #dce6ee17; background-color: #11153b;}
.svc-detail:nth-child(even){background:var(--foam);}
.svc-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;}
.svc-detail-grid.rev{direction:rtl;}
.svc-detail-grid.rev > *{direction:ltr;}
.svc-visual{aspect-ratio:1/1;border-radius:var(--r-lg);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;}
.svc-visual.v1{background:linear-gradient(150deg,#0B1E3D,#1D4F8C);}
.svc-visual.v2{background:linear-gradient(150deg,var(--mist),#fff);border:1px solid var(--line);}
.svc-visual .core-drop{width:96px;height:96px;position:relative;z-index:2;}
.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 28px;}
.chip{padding:9px 16px;border-radius:99px;background:var(--mist);color:var(--crest);font-size:13px;font-weight:700;}
.stat-strip{display:flex;gap:40px;margin-top:30px;}
.stat-strip div b{display:block;font-family:var(--mono);font-size:26px;color:var(--navy);}
.stat-strip div span{font-size:12.5px;color:var(--ink-soft);}

.bulk-sec{padding:100px 0;background:var(--navy);}
.bulk-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.bulk-copy h2, .bulk-copy .eyebrow{color:var(--white);}
.bulk-copy .eyebrow{color:var(--sky-2);}
.bulk-copy .eyebrow::before{background:var(--sky-2);}
.bulk-copy p{color:rgba(255,255,255,.68);margin-bottom:24px;font-size:16px;}
.pricing-table{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);overflow:hidden;}
.pricing-row{display:flex;justify-content:space-between;padding:18px 24px;border-bottom:1px solid rgba(255,255,255,.08);}
.pricing-row:last-child{border-bottom:none;}
.pricing-row span:first-child{color:rgba(255,255,255,.75);font-size:14.5px;}
.pricing-row span:last-child{color:var(--sky-2);font-weight:700;font-family:var(--mono);}

.svc-visual.v2 {
    /* Agar pehle ka gradient background nahi chahiye toh background: transparent; kar dein */
    overflow: hidden; /* Image corners se bahar na nikle */
    padding: 0; /* Clear padding if any */
}

.svc-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Image box ko bina distort hue poora fill karegi */
    border-radius: inherit; /* Box ke rounded corners ko follow karegi */
}

.about-copy .check-list{
    padding: 0 !important;
}


.svc-detail-dark-color .check-list{
    padding: 0 !important;
}


.svc-detail .check-list{
    padding: 0 !important;
}


.svc-detail-dark-color li{
    color: #ffffffa6;
}


.labels-sec .eyebrow{
    color:#9fd4ee ;
}

.svc-detail-dark-color .eyebrow::before {
    background: #9fd4ee;
}


.svc-detail-dark-color .eyebrow{
    color:#9fd4ee ;
}


.svc-detail-dark-color{
     padding: 100px 0;
    border-bottom: 1px solid #dce6ee17;
    background-color: #11153b;
}


.logo-mark {
  width: 120px;
  height: auto;
}

/* ============ CONTACT PAGE ============ */
.contact-sec{padding:100px 0;background:var(--white);}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;}
.form-card{background:var(--foam);border:1px solid var(--line);border-radius:var(--r-lg);padding:44px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field.full{grid-column:1/-1;}
.field label{font-size:13px;font-weight:700;color:var(--navy);}
.field input, .field select, .field textarea{
  padding:13px 16px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  font-family:inherit;font-size:14.5px;color:var(--ink);background:var(--white);transition:.3s;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--crest-2);}
.field textarea{resize:vertical;min-height:110px;}
.form-note{font-size:12.5px;color:var(--ink-soft);margin-top:14px;}
.form-success{display:none;align-items:center;gap:10px;background:#EAF7F0;color:var(--success);
  padding:14px 18px;border-radius:var(--r-sm);font-size:13.5px;font-weight:700;margin-bottom:18px;}
.form-success.show{display:flex;}

.info-card{background:var(--navy);border-radius:var(--r-lg);padding:40px;color:#fff;margin-bottom:22px;}
.info-card h3{color:#fff;font-size:19px;margin-bottom:22px;}
.info-list li{display:flex;gap:14px;margin-bottom:20px;align-items:flex-start;}
.info-list li:last-child{margin-bottom:0;}
.info-list svg{width:19px;height:19px;color:var(--sky-2);flex:0 0 auto;margin-top:2px;}
.info-list b{display:block;font-size:14px;margin-bottom:3px;}
.info-list span{font-size:13.5px;color:rgba(255,255,255,.62);}

.map-box{background:linear-gradient(135deg,var(--mist),#fff);border:1px solid var(--line);border-radius:var(--r-lg);
  height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden;}
.map-box svg{width:34px;height:34px;color:var(--crest);}
.map-box span{font-size:13px;color:var(--ink-soft);font-weight:600;}
.map-grid-lines{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:32px 32px;}

.faq-sec{padding:110px 0;background:var(--foam);}
.faq-wrap{max-width:760px;margin:0 auto;}
.faq-item{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:14px;overflow:hidden;}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:22px 26px;font-weight:700;font-size:15.5px;color:var(--navy);}
.faq-q svg{width:18px;height:18px;color:var(--crest-2);transition:transform .35s var(--ease);flex:0 0 auto;}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);}
.faq-a p{padding:0 26px 22px;color:var(--ink-soft);font-size:14.5px;}

/* ============ SLIDER UTIL (testimonials mobile) ============ */
.back-to-top{position:fixed;bottom:28px;right:28px;width:48px;height:48px;border-radius:50%;
  background:var(--crest);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:.4s var(--ease);z-index:900;}
.back-to-top.show{opacity:1;pointer-events:auto;}
.back-to-top:hover{background:var(--navy);transform:translateY(-4px);}
.back-to-top svg{width:18px;height:18px;}


.footer-grid  ul{
    padding-left: 0 !important;
}




.bottle-size-image {
    width: 100%;
    height: 100%;
    max-height: 196px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 10px;
    z-index: 2;
}



.bottle-connect-area{
    background:#24579a;
    padding:90px 0;
}

.bottle-showcase-img{
    width:100%;
    max-width:420px;
    animation:bottleFloat 4s ease-in-out infinite;
    border-radius: 20px;
}

.connect-content-wrap{
    max-width:540px;
    margin-left:auto;
}

.section-tagline{
    display:inline-block;
    color:#82d3ff;
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:18px;
}

.connect-main-title{
    color:#fff;
    font-size:42px;
    line-height:1.2;
    font-weight:700;
    margin-bottom:20px;
}

.connect-description{
    color:#d9e6f7;
    font-size:18px;
    line-height:1.8;
    margin-bottom:35px;
}

.connect-btn-group{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

.connect-btn-primary,
.connect-btn-secondary{
    text-decoration:none;
    padding:15px 38px;
    border-radius:50px;
    font-weight:600;
    transition:.3s;
}

.connect-btn-primary{
    background:#fff;
    color:#24579a;
}

.connect-btn-primary:hover{
    background:#edf3ff;
}

.connect-btn-secondary{
    border:1px solid rgba(255,255,255,.5);
    color:#fff;
}

.connect-btn-secondary:hover{
    background:#fff;
    color:#24579a;
}




/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .qa-grid{grid-template-columns:repeat(2,1fr);}
  .process-row{grid-template-columns:repeat(5,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:920px){
  nav.main-nav ul{display:none;}
  .menu-toggle{display:flex;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{height:400px;order:-1;}
  .about-grid, .story-grid, .mv-grid, .svc-detail-grid, .svc-detail-grid.rev, .bulk-grid, .contact-grid{
    grid-template-columns:1fr;direction:ltr;}
  .grid-3{grid-template-columns:1fr 1fr;}
  .process-row{grid-template-columns:1fr 1fr;}
  .process-row::before{display:none;}
  .counters-grid{grid-template-columns:1fr 1fr;gap:36px 20px;}
  .bottle-img{
    width: 320px;      /* apne hisaab se change kar sakte ho */
    max-width: 100%;
    height: auto;
    display: block;
}
.float-badge.b1 {
    top: 34%;
    left: 0;
    animation: float 7s ease-in-out infinite;
}
.float-badge.b2 {
    bottom: -4%;
    right: 0;
    animation: float 8s ease-in-out infinite 1s;
}
.float-badge.b2 {
    bottom: -4%;
    right: 0;
    animation: float 8s ease-in-out infinite 1s;
}
.hero-copy p {
    margin-bottom: 16px !important;
}
.hero-btns {
    margin-bottom: 147px !important;
}
.about-sec {
    padding: 50px 0 50px !important;
}
.check-list {
    padding: 0 !important;
}
.bottle-mock {
    width: 320px !important;
}
}
@media (max-width: 768px) {
  /*.label-row {*/
  /*  flex-direction: column;*/
  /*  overflow-x: visible; */
  /*}*/
  
  .label-chip {
    width: 100%; /* saare cards full width le lenge */
  }
  .about-sec {
    padding: 50px 0 50px !important;
}
.check-list {
    padding: 0 !important;
}
.story-sec {
    padding-top:60px !important;
    padding-bottom: 30px !important;
}

.story-grid {
    gap: 30px !important;
}

.process-sec {
    padding: 60px 0 !important;
}
.svc-detail {
    padding: 60px 0 !important;
}


.svc-detail-grid {
      gap: 30px !important;
}
.contact-sec {
    padding: 60px 0 !important;
}


.contact-grid {
 gap: 30px !important;
}

.info-card {
    padding: 20px !important;
}
}
@media (max-width:640px){
  .container{padding:0 22px;}
  .grid-3,.grid-4,.qa-grid{grid-template-columns:1fr 1fr;}
  .form-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:36px;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .stat-strip{flex-wrap:wrap;gap:20px;}
  .hero-copy p{max-width:100%;}
  .bottle-img{
    width: 320px;      /* apne hisaab se change kar sakte ho */
    max-width: 100%;
    height: auto;
    display: block;
}
.bottle-mock {
    width: 320px !important;
}
.float-badge.b1 {
    top: 34%;
    left: 0;
    animation: float 7s ease-in-out infinite;
}

.float-badge.b2 {
    bottom: -4%;
    right: 0;
    animation: float 8s ease-in-out infinite 1s;
}
.hero-copy p {
    margin-bottom: 16px !important;
}
.hero-btns {
    margin-bottom: 147px !important;
}
.about-sec {
    padding: 50px 0 50px !important;
}
.check-list {
    padding: 0 !important;
}

.connect-main-title {
    font-size: 28px !important;
}
.story-sec {
    padding-top:60px !important;
    padding-bottom: 30px !important;
}

.story-grid {
    gap: 30px !important;
}

.process-sec {
    padding: 60px 0 !important;
}
.svc-detail {
    padding: 60px 0 !important;
}


.svc-detail-grid {
      gap: 30px !important;
}
.contact-sec {
    padding: 60px 0 !important;
}

.info-card {
    padding: 20px !important;
}
.contact-grid {
 gap: 30px !important;
}
}

@media (max-width:480px){
  .grid-3,.grid-4,.qa-grid{grid-template-columns:1fr;}
}


/* =========================================
   WHATSAPP FLOATING BUTTON
========================================= */

.whatsapp-float {
    position: fixed;
    right: 25px;
    bottom: 100px;

    width: 58px;
    height: 58px;

    background-color: #25D366;
    color: #ffffff;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    font-size: 30px;

    z-index: 99999;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);

    transition: all 0.3s ease;
}


/* Hover Effect */
.whatsapp-float:hover {
    color: #ffffff;
    background-color: #20bd5a;

    transform: translateY(-5px);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.30);
}


/* WhatsApp Icon */
.whatsapp-float i {
    line-height: 1;
}


/* =========================================
   MOBILE RESPONSIVE
========================================= */

@media (max-width: 767px) {

    .whatsapp-float {
        width: 52px;
        height: 52px;

        right: 18px;
        bottom: 100px !important;

        font-size: 27px;
    }

}


.page{display:block;}
