/* =========================================================
   PROBOW — COMMON HEADER + FOOTER STYLES
   Extracted from the supplied page without redesigning it.
   Header/footer HTML remains the original markup.
   ========================================================= */

:root{
  --ink:#16231A;
  --ink-soft:#24361F;
  --paper:#F6F1E2;
  --paper-dim:#EFE8D4;
  --card:#FFFDF7;
  --leaf:#3D6B35;
  --leaf-deep:#24451F;
  --leaf-tint:#E4EBDD;
  --mango:#E8A33D;
  --chili:#C1432A;
  --whatsapp:#25D366;
  --zomato:#CB202D;
  --swiggy:#FC8019;
  --ink-70:rgba(22,35,26,.7);
  --ink-45:rgba(22,35,26,.45);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
a{color:inherit;}

.bowl-o{display:inline-block;width:0.72em;height:0.72em;border-radius:50%;border:2.5px dashed var(--mango);position:relative;vertical-align:-0.06em;}
.bowl-o::after{content:"";position:absolute;inset:26%;border-radius:50%;background:var(--leaf);}
.logo-mark{text-decoration:none;display:flex;flex-direction:column;line-height:1;}
.logo-mark .word{font-family:"Fraunces",serif;font-weight:900;font-size:1.9rem;color:var(--ink);letter-spacing:-0.02em;display:flex;align-items:baseline;}
.logo-mark .word .bowl-o{margin:0 0.02em;}
.logo-mark .tag{font-family:"Caveat",cursive;font-weight:700;font-size:1rem;color:var(--leaf);margin-top:1px;}
footer .logo-mark .word{color:var(--paper);}
footer .logo-mark .word .bowl-o{border-color:var(--mango);}
footer .logo-mark .word .bowl-o::after{background:var(--mango);}
footer .logo-mark .tag{color:#9FB694;}
header{
  display:flex;justify-content:space-between;align-items:center;
  padding:1rem 6%;background:rgba(246,241,226,0.9);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:1000;border-bottom:1px solid rgba(22,35,26,0.08);
}
.nav-links{display:flex;gap:1.9rem;list-style:none;align-items:center;}
.nav-links a{text-decoration:none;font-weight:600;font-size:0.9rem;color:var(--ink);transition:color 0.25s;position:relative;}
.nav-links a:hover{color:var(--leaf);}
.btn-header-wa{background:var(--whatsapp);color:white;padding:0.6rem 1.3rem;border-radius:30px;font-weight:700;text-decoration:none;display:flex;align-items:center;gap:0.5rem;white-space:nowrap;font-size:0.88rem;box-shadow:0 6px 16px rgba(37,211,102,0.25);transition:transform 0.2s;}
.btn-header-wa:hover{transform:translateY(-2px);}
.hamburger{display:none;background:none;border:none;font-size:1.4rem;color:var(--ink);cursor:pointer;z-index:1002;}
.mobile-menu-cta{display:none;}
@media (max-width:768px){
.mobile-menu-cta{
    display:flex !important;
    position:fixed !important;
    right:14px !important;
    left:auto !important;
    bottom:calc(12px + env(safe-area-inset-bottom)) !important;
    z-index:2147483646 !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    width:auto !important;
    max-width:calc(100vw - 28px) !important;
    min-width:0 !important;
    height:48px !important;
    padding:0 16px !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    border-radius:999px !important;
    background:#FFD43B !important;
    color:var(--ink) !important;
    border:2px solid var(--ink) !important;
    box-shadow:0 8px 24px rgba(22,35,26,.28) !important;
    transform:none !important;
    box-sizing:border-box !important;
  }
}
@media (max-width:380px){
.mobile-menu-cta{
    right:10px !important;
    bottom:calc(10px + env(safe-area-inset-bottom)) !important;
    height:46px !important;
    padding:0 14px !important;
  }
}
footer{background:var(--ink);color:#9FB694;padding:4rem 6% 1.5rem;}
.footer-main-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem;margin-bottom:3rem;max-width:1280px;margin-left:auto;margin-right:auto;}
.footer-col h4{color:#fff;font-size:0.95rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:1.2rem;font-family:"Work Sans",sans-serif;}
.footer-brand p{font-size:0.86rem;line-height:1.55;margin:0.8rem 0 1.1rem;}
.footer-contact-list{list-style:none;}
.footer-contact-list li{display:flex;gap:0.7rem;margin-bottom:0.85rem;font-size:0.86rem;align-items:flex-start;}
.footer-contact-list i{color:var(--mango);margin-top:3px;flex-shrink:0;}
.footer-contact-list a{color:#D1DCD0;text-decoration:none;font-weight:600;}
.footer-contact-list a:hover{color:var(--whatsapp);}
.footer-links{list-style:none;}
.footer-links li{margin-bottom:0.6rem;}
.footer-links a{color:#9FB694;text-decoration:none;font-size:0.86rem;font-weight:600;}
.footer-links a:hover{color:#fff;}
.partner-buttons{display:flex;flex-direction:column;gap:0.7rem;}
.btn-partner{display:flex;align-items:center;justify-content:space-between;padding:0.65rem 1rem;border-radius:12px;font-weight:700;font-size:0.82rem;text-decoration:none;color:#fff;}
.btn-partner-wa{background:var(--whatsapp);}
.btn-partner-zomato{background:var(--zomato);}
.btn-partner-swiggy{background:var(--swiggy);}
.social-links{display:flex;gap:0.6rem;margin-top:1.4rem;}
.social-btn{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.08);color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid rgba(255,255,255,0.12);}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding-top:1.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:0.78rem;color:#7B8A79;max-width:1280px;margin:0 auto;}
.footer-bottom-links{display:flex;gap:1.2rem;}
.footer-bottom-links a{color:#7B8A79;text-decoration:none;}
@media (max-width:768px){
header{padding:0.72rem 5%;min-height:62px;}
.hamburger{display:block;}
.nav-links{position:fixed;top:0;right:-100%;width:78%;max-width:320px;height:100vh;background:var(--paper);flex-direction:column;justify-content:center;align-items:center;gap:2rem;box-shadow:-5px 0 25px rgba(0,0,0,0.15);transition:right 0.4s ease-in-out;z-index:1001;}
.nav-links.active{right:0;}
.nav-links a{font-size:1.15rem;}
.btn-header-wa{display:none;}
.mobile-menu-cta{display:flex !important;visibility:visible !important;opacity:1 !important;}
.footer-main-grid{grid-template-columns:1fr;}
}
@media (max-width:380px){
.mobile-menu-cta{right:12px;bottom:calc(12px + env(safe-area-inset-bottom));}
}
@media (max-width:768px){
header{
    position:sticky !important;
    top:0 !important;
    z-index:2000 !important;
    background:rgba(246,241,226,.96) !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
  }
.mobile-menu-cta{
    display:flex !important;
    position:fixed !important;
    right:14px !important;
    left:auto !important;
    bottom:calc(14px + env(safe-area-inset-bottom)) !important;
    z-index:2147483646 !important;
    width:auto !important;
    max-width:calc(100vw - 28px) !important;
    height:46px !important;
    padding:0 16px !important;
    margin:0 !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    border:0 !important;
    border-radius:24px !important;
    background:var(--leaf) !important;
    color:#fff !important;
    font-size:.82rem !important;
    font-weight:900 !important;
    line-height:1 !important;
    text-decoration:none !important;
    box-shadow:0 8px 22px rgba(22,35,26,.24) !important;
    box-sizing:border-box !important;
  }
.mobile-menu-cta,
.mobile-menu-cta:hover,
.mobile-menu-cta:focus,
.mobile-menu-cta:active,
.mobile-menu-cta:visited{
    color:#fff !important;
    text-decoration:none !important;
  }
.mobile-menu-cta i{
    display:inline-block !important;
    font-size:.8rem !important;
  }
.header-mobile-actions{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
  }
.mobile-header-wa{
    display:flex !important;
    width:40px !important;
    height:40px !important;
    flex:0 0 40px !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:50% !important;
    background:var(--whatsapp) !important;
    color:#fff !important;
    text-decoration:none !important;
    font-size:1.1rem !important;
  }
.mobile-header-wa:hover,
.mobile-header-wa:focus,
.mobile-header-wa:visited{
    color:#fff !important;
    text-decoration:none !important;
  }
}
@media (min-width:769px){
.header-mobile-actions,
.mobile-header-wa{
    display:none !important;
  }
}
header{
  position:sticky !important;
  top:0 !important;
  z-index:2147482000 !important;
}
body > header{
  position:sticky !important;
  top:0 !important;
  z-index:2147482000 !important;
}
@media (max-width:768px){
body > header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    min-height:62px !important;
    height:62px !important;
    padding:.72rem 5% !important;
    margin:0 !important;
    z-index:2147482000 !important;
  }
.nav-links{
    top:62px !important;
    height:calc(100vh - 62px) !important;
    height:calc(100dvh - 62px) !important;
  }
}
@media (max-width:768px){
.nav-links{
    top:62px !important;
    right:-100% !important;
    width:min(360px,88vw) !important;
    max-width:none !important;
    height:calc(100dvh - 62px) !important;
    padding:0 22px 28px !important;
    margin:0 !important;
    background:var(--paper) !important;
    border-left:1px solid rgba(22,35,26,.09) !important;
    border-radius:24px 0 0 0 !important;
    box-shadow:-18px 0 45px rgba(22,35,26,.18) !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
    gap:0 !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    transition:right .32s cubic-bezier(.22,.9,.28,1) !important;
  }
.nav-links.active{
    right:0 !important;
  }
.nav-drawer-brand{
    list-style:none !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    padding:24px 4px 18px !important;
    margin:0 0 8px !important;
    border-bottom:1px solid rgba(22,35,26,.10) !important;
  }
.nav-drawer-logo{
    text-decoration:none !important;
    display:flex !important;
    flex-direction:column !important;
    line-height:1 !important;
  }
.nav-drawer-logo .word{
    font-family:"Fraunces",serif !important;
    font-weight:900 !important;
    font-size:2rem !important;
    letter-spacing:-.03em !important;
    color:var(--ink) !important;
    display:flex !important;
    align-items:baseline !important;
  }
.nav-drawer-logo .bowl-o{
    display:inline-block !important;
    width:.72em !important;
    height:.72em !important;
    border:2.5px dashed var(--mango) !important;
    border-radius:50% !important;
    position:relative !important;
    margin:0 .02em !important;
    vertical-align:-.06em !important;
  }
.nav-drawer-logo .bowl-o::after{
    content:"" !important;
    position:absolute !important;
    inset:26% !important;
    border-radius:50% !important;
    background:var(--leaf) !important;
  }
.nav-drawer-logo .tag{
    font-family:"Caveat",cursive !important;
    font-weight:700 !important;
    font-size:.98rem !important;
    color:var(--leaf) !important;
    margin-top:3px !important;
  }
.nav-drawer-label{
    margin-top:15px !important;
    font-family:"Space Mono",monospace !important;
    font-size:.61rem !important;
    text-transform:uppercase !important;
    letter-spacing:.10em !important;
    color:var(--ink-45) !important;
  }
.nav-links > li:not(.nav-drawer-brand){
    list-style:none !important;
    margin:0 !important;
  }
.nav-links > li:not(.nav-drawer-brand) a{
    min-height:58px !important;
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    gap:15px !important;
    padding:0 12px !important;
    border-radius:14px !important;
    color:var(--ink) !important;
    text-decoration:none !important;
    font-size:1rem !important;
    font-weight:750 !important;
    border-bottom:1px solid rgba(22,35,26,.07) !important;
    transition:background .18s, color .18s, transform .18s !important;
  }
.nav-links > li:not(.nav-drawer-brand) a i{
    width:24px !important;
    text-align:center !important;
    color:var(--leaf) !important;
    font-size:.98rem !important;
  }
.nav-links > li:not(.nav-drawer-brand) a:hover,
.nav-links > li:not(.nav-drawer-brand) a:active{
    background:var(--leaf-tint) !important;
    color:var(--leaf-deep) !important;
  }
.nav-links.active::after{
    content:"" !important;
    position:fixed !important;
    top:62px !important;
    right:100% !important;
    width:100vw !important;
    height:calc(100dvh - 62px) !important;
    background:rgba(22,35,26,.22) !important;
    pointer-events:none !important;
  }
.hamburger{
    width:42px !important;
    height:42px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:50% !important;
    background:rgba(22,35,26,.06) !important;
    border:1px solid rgba(22,35,26,.12) !important;
    font-size:1.15rem !important;
    color:var(--ink) !important;
  }
.hamburger:active{
    transform:scale(.94) !important;
  }
}
@media (max-width:380px){
.nav-links{
    width:91vw !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }
.nav-drawer-brand{
    padding-top:20px !important;
  }
.nav-drawer-logo .word{
    font-size:1.82rem !important;
  }
}
.nav-drawer-brand{
  display:none !important;
}
@media (max-width:768px){
.nav-drawer-brand{
    display:flex !important;
  }
}

/* Header/mobile layout needs these page-level spacing rules too. */
html,body{overflow-x:hidden;}
@media (max-width:768px){
  body{
    padding-top:62px !important;
    padding-bottom:78px !important;
  }
  body > header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    min-height:62px !important;
    height:62px !important;
    padding:.72rem 5% !important;
    margin:0 !important;
    z-index:2147482000 !important;
  }
  .nav-links{
    top:62px !important;
    height:calc(100vh - 62px) !important;
    height:calc(100dvh - 62px) !important;
  }
}
/* Animated Style */
/* =========================================================
   PROBOW LOGO INTRO + PERMANENT GLOW + RECURRING SHINE
   P → R → BOWL → BOW → SHINE → REST
   ========================================================= */

.probow-animated-logo{
  display:flex;
  align-items:baseline;
  overflow:visible;
  position:relative;
}


/* =========================================================
   INDIVIDUAL PIECES
   ========================================================= */

.probow-animated-logo .logo-p,
.probow-animated-logo .logo-r,
.probow-animated-logo .logo-bow{
  display:inline-block;
  opacity:0;
  transform:translateY(8px);
}


/* =========================================================
   P
   ========================================================= */

.probow-animated-logo .logo-p{
  animation:
    probowLetterIn .45s cubic-bezier(.22,.9,.28,1) .10s forwards;
}


/* =========================================================
   R
   ========================================================= */

.probow-animated-logo .logo-r{
  animation:
    probowLetterIn .45s cubic-bezier(.22,.9,.28,1) .28s forwards;
}


/* =========================================================
   BOWL
   ========================================================= */

.probow-animated-logo .logo-bowl{
  position:relative;
  overflow:visible;

  opacity:0;
  transform:scale(.35) rotate(-25deg);

  animation:
    probowBowlIn .65s cubic-bezier(.17,.89,.32,1.35) .46s forwards,
    probowBowlGlow 2.8s ease-in-out 1.35s infinite;
}


/* =========================================================
   BOW
   ========================================================= */

.probow-animated-logo .logo-bow{
  animation:
    probowLetterIn .55s cubic-bezier(.22,.9,.28,1) .68s forwards;
}


/* =========================================================
   LETTER ENTRANCE
   ========================================================= */

@keyframes probowLetterIn{

  0%{
    opacity:0;
    transform:translateY(9px);
  }

  70%{
    opacity:1;
    transform:translateY(-2px);
  }

  100%{
    opacity:1;
    transform:translateY(0);
  }

}


/* =========================================================
   BOWL POP-IN
   ========================================================= */

@keyframes probowBowlIn{

  0%{
    opacity:0;
    transform:scale(.35) rotate(-25deg);
  }

  55%{
    opacity:1;
    transform:scale(1.12) rotate(5deg);
  }

  75%{
    transform:scale(.94) rotate(-2deg);
  }

  100%{
    opacity:1;
    transform:scale(1) rotate(0);
  }

}


/* =========================================================
   PERMANENT BOWL GLOW
   ========================================================= */

/*
   The bowl continues glowing after the entrance animation.
   It gently breathes instead of flashing.
*/

@keyframes probowBowlGlow{

  0%,
  100%{
    filter:
      drop-shadow(0 0 1px rgba(232,163,61,.40))
      drop-shadow(0 0 4px rgba(232,163,61,.22));
  }

  50%{
    filter:
      drop-shadow(0 0 3px rgba(232,163,61,.78))
      drop-shadow(0 0 9px rgba(232,163,61,.42));
  }

}


/* =========================================================
   BOWL CORE
   ========================================================= */

/*
   Keeps the orange ring visually alive even when
   the glow animation is between pulses.
*/

.probow-animated-logo .logo-bowl{
  border-color:var(--mango);

  box-shadow:
    0 0 3px rgba(232,163,61,.35),
    0 0 7px rgba(232,163,61,.18);
}


/* Green center of bowl */
.probow-animated-logo .logo-bowl::after{

  box-shadow:
    0 0 2px rgba(61,107,53,.45),
    0 0 5px rgba(61,107,53,.20);

}


/* =========================================================
   SMALL LIGHT SPARK INSIDE BOWL
   ========================================================= */

.probow-animated-logo .logo-bowl::before{

  content:"";

  position:absolute;

  width:6px;
  height:6px;

  border-radius:50%;

  background:rgba(255,255,255,.9);

  opacity:0;

  transform:
    translate(-7px,7px)
    scale(.2);

  pointer-events:none;

  animation:
    probowBowlSpark 5s ease-in-out 2.4s infinite;

}


@keyframes probowBowlSpark{

  0%{
    opacity:0;
    transform:
      translate(-7px,7px)
      scale(.2);
  }

  8%{
    opacity:.85;
    transform:
      translate(-3px,3px)
      scale(.8);
  }

  16%{
    opacity:0;
    transform:
      translate(2px,-2px)
      scale(1.15);
  }

  20%,
  100%{
    opacity:0;
  }

}


/* =========================================================
   COMPLETE LOGO SHINE
   ========================================================= */

/*
   A soft light sweep moves across:

   P → R → BOWL → BOW

   It happens occasionally rather than continuously.
*/

.probow-animated-logo::after{

  content:"";

  position:absolute;

  top:-12%;
  left:-35%;

  width:18%;
  height:125%;

  background:
    linear-gradient(
      105deg,
      transparent 0%,
      rgba(255,255,255,0) 25%,
      rgba(255,255,255,.70) 50%,
      rgba(255,255,255,0) 75%,
      transparent 100%
    );

  transform:skewX(-18deg);

  opacity:0;

  pointer-events:none;

  animation:
    probowLogoShine 5s ease-in-out 2.2s infinite;

}


/* =========================================================
   LOGO SHINE TIMING
   ========================================================= */

@keyframes probowLogoShine{

  /*
     Waiting period
  */

  0%{
    left:-35%;
    opacity:0;
  }

  /*
     Shine enters
  */

  7%{
    opacity:.55;
  }

  /*
     Shine travels across logo
  */

  20%{
    left:115%;
    opacity:.60;
  }

  /*
     Shine disappears
  */

  27%{
    left:125%;
    opacity:0;
  }

  /*
     Rest before next shine
  */

  100%{
    left:125%;
    opacity:0;
  }

}


/* =========================================================
   TAG APPEARS LAST
   ========================================================= */

.logo-mark .tag{

  opacity:0;

  transform:translateY(-3px);

  animation:
    probowTagIn .55s ease-out 1s forwards;

}


@keyframes probowTagIn{

  from{
    opacity:0;
    transform:translateY(-3px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

/*
   Keep the same animation on mobile, but slightly reduce
   the glow intensity so it doesn't look oversized on a
   small header.
*/

@media(max-width:768px){

  .probow-animated-logo .logo-bowl{
    animation:
      probowBowlIn .65s cubic-bezier(.17,.89,.32,1.35) .46s forwards,
      probowBowlGlowMobile 3s ease-in-out 1.35s infinite;
  }

}


@keyframes probowBowlGlowMobile{

  0%,
  100%{
    filter:
      drop-shadow(0 0 1px rgba(232,163,61,.35))
      drop-shadow(0 0 3px rgba(232,163,61,.18));
  }

  50%{
    filter:
      drop-shadow(0 0 2px rgba(232,163,61,.65))
      drop-shadow(0 0 7px rgba(232,163,61,.32));
  }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion:reduce){

  .probow-animated-logo .logo-p,
  .probow-animated-logo .logo-r,
  .probow-animated-logo .logo-bow,
  .probow-animated-logo .logo-bowl,
  .logo-mark .tag,
  .probow-animated-logo::after,
  .probow-animated-logo .logo-bowl::before{

    animation:none !important;

    opacity:1 !important;

    transform:none !important;

    filter:none !important;

  }


  /* Keep a static subtle bowl glow */
  .probow-animated-logo .logo-bowl{

    filter:
      drop-shadow(0 0 2px rgba(232,163,61,.5))
      drop-shadow(0 0 6px rgba(232,163,61,.25)) !important;

  }

}