/* =========================================================
   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;

  }

}

/* new header */

/* =========================================================
   PROBOW HEADER
   STATIC BRAND LOGO
   ========================================================= */


/* =========================================================
   HEADER
   ========================================================= */

.site-header {

  width: 100%;

  min-height: 76px;

  padding:
    .65rem
    6%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 2rem;

  position: sticky;

  top: 0;

  z-index: 2000;

  background:
    rgba(246,241,226,.96);

  border-bottom:
    1px solid
    rgba(22,35,26,.08);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}


/* =========================================================
   BRAND
   ========================================================= */

.site-logo {

  display: flex;

  align-items: center;

  justify-content: flex-start;

  flex-shrink: 0;

  text-decoration: none;

  line-height: 0;

  outline: none;
}


/* Actual brand image */

.site-logo-image {

  display: block;

  width: 195px;

  height: auto;

  max-height: 62px;

  object-fit: contain;

  object-position: left center;

  flex-shrink: 0;

  transition:
    transform .2s ease;
}


/* Prevent old logo animation styles
   from affecting this logo */

.site-logo-image,
.site-logo-image * {

  animation: none;

}


/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

.nav-links {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 1.65rem;

  margin: 0;

  padding: 0;

  list-style: none;

  flex: 1;

}


.nav-links > li {

  list-style: none;

  margin: 0;

  padding: 0;

}


.nav-links a {

  color:
    var(--ink, #16231A);

  text-decoration: none;

  font-size: .9rem;

  font-weight: 650;

  white-space: nowrap;

  transition:
    color .2s ease;
}


.nav-links a:hover {

  color:
    var(--leaf-deep, #24451F);

}


/* =========================================================
   MENU LINK
   ========================================================= */

.nav-item {

  display: flex;

  align-items: center;

  gap: .4rem;
}


.nav-item i {

  color:
    var(--leaf, #3D6B35);

  font-size: .9rem;
}


/* =========================================================
   DESKTOP WHATSAPP
   ========================================================= */

.btn-header-wa {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: .5rem;

  flex-shrink: 0;

  min-height: 42px;

  padding:
    .65rem
    1.15rem;

  border-radius: 999px;

  background:
    #25D366;

  color: #fff !important;

  text-decoration: none;

  font-size: .84rem;

  font-weight: 850;

  white-space: nowrap;

  box-shadow:
    0 6px 16px
    rgba(37,211,102,.20);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}


.btn-header-wa:hover {

  color: #fff !important;

  background:
    #20c961;

  transform:
    translateY(-2px);

  box-shadow:
    0 9px 22px
    rgba(37,211,102,.27);
}


.btn-header-wa i {

  font-size: 1rem;
}


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

.header-mobile-actions {

  display: none;

  align-items: center;

  justify-content: center;

  gap: 8px;

  flex-shrink: 0;
}


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

.mobile-header-wa {

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex: 0 0 40px;

  border-radius: 50%;

  background:
    #25D366;

  color: #fff !important;

  text-decoration: none;

  font-size: 1.15rem;

  box-shadow:
    0 4px 12px
    rgba(37,211,102,.18);

  transition:
    transform .15s ease;
}


.mobile-header-wa:active {

  transform:
    scale(.93);
}


.mobile-header-wa:hover {

  color: #fff !important;

}


/* =========================================================
   HAMBURGER
   ========================================================= */

.hamburger {

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex: 0 0 40px;

  border-radius: 50%;

  border:
    1px solid
    rgba(22,35,26,.12);

  background:
    rgba(22,35,26,.055);

  color:
    var(--ink, #16231A);

  cursor: pointer;

  font-size: 1.05rem;

  transition:
    background .18s ease,
    transform .15s ease;
}


.hamburger:hover {

  background:
    rgba(22,35,26,.10);
}


.hamburger:active {

  transform:
    scale(.93);
}


/* =========================================================
   DRAWER BRAND
   Hidden on desktop
   ========================================================= */

.nav-drawer-brand {

  display: none;
}


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

@media (max-width: 768px) {

  .site-header {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    width: 100%;

    height: 62px;

    min-height: 62px;

    padding:
      .45rem
      4.5%;

    gap: 10px;

    z-index: 2147482000;
  }


  /* ---------------------------------------------
     MOBILE LOGO
     --------------------------------------------- */

  .site-logo-image {

    width: 172px;

    max-height: 52px;

  }


  /* ---------------------------------------------
     ACTIONS
     --------------------------------------------- */

  .header-mobile-actions {

    display: flex;

  }


  /* ---------------------------------------------
     HIDE DESKTOP WHATSAPP
     --------------------------------------------- */

  .btn-header-wa {

    display: none;

  }


  /* =================================================
     MOBILE NAV DRAWER
     ================================================= */

  .nav-links {

    position: fixed;

    top: 62px;

    right: -100%;

    width:
      min(360px, 88vw);

    height:
      calc(100dvh - 62px);

    margin: 0;

    padding:
      0
      20px
      28px;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    justify-content: flex-start;

    gap: 0;

    overflow-y: auto;

    overscroll-behavior: contain;

    background:
      var(--paper, #F6F1E2);

    border-left:
      1px solid
      rgba(22,35,26,.09);

    border-radius:
      22px
      0
      0
      0;

    box-shadow:
      -16px
      0
      40px
      rgba(22,35,26,.16);

    transition:
      right
      .32s
      cubic-bezier(.22,.9,.28,1);

    z-index: 2001;
  }


  /* Drawer open */

  .nav-links.active {

    right: 0;

  }


  /* =================================================
     DRAWER BRAND
     ================================================= */

  .nav-drawer-brand {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    padding:
      20px
      4px
      18px;

    margin:
      0
      0
      7px;

    border-bottom:
      1px solid
      rgba(22,35,26,.09);
  }


  .nav-drawer-logo {

    display: block;

    text-decoration: none;

    line-height: 0;
  }


  .nav-drawer-logo-image {

    display: block;

    width: 185px;

    height: auto;

    max-height: 58px;

    object-fit: contain;

    object-position: left center;
  }


  .nav-drawer-label {

    display: block;

    margin-top: 13px;

    font-family:
      "Space Mono",
      monospace;

    font-size: .58rem;

    font-weight: 700;

    letter-spacing: .09em;

    text-transform: uppercase;

    color:
      rgba(22,35,26,.45);
  }


  /* =================================================
     DRAWER LINKS
     ================================================= */

  .nav-links > li:not(.nav-drawer-brand) {

    list-style: none;

    margin: 0;

    padding: 0;
  }


  .nav-links > li:not(.nav-drawer-brand) a {

    width: 100%;

    min-height: 57px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding:
      0
      12px;

    border-bottom:
      1px solid
      rgba(22,35,26,.07);

    border-radius: 13px;

    color:
      var(--ink, #16231A);

    text-decoration: none;

    font-size: .98rem;

    font-weight: 750;

    transition:
      background .18s ease,
      color .18s ease;
  }


  .nav-links > li:not(.nav-drawer-brand) a:hover {

    background:
      var(--leaf-tint, #E4EBDD);

    color:
      var(--leaf-deep, #24451F);
  }


  .nav-links > li:not(.nav-drawer-brand) a i {

    width: 24px;

    flex: 0 0 24px;

    text-align: center;

    color:
      var(--leaf, #3D6B35);
  }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 390px) {

  .site-logo-image {

    width: 158px;

    max-height: 49px;

  }


  .nav-links {

    width: 91vw;

    padding-left: 16px;

    padding-right: 16px;

  }


  .nav-drawer-logo-image {

    width: 170px;

    max-height: 54px;

  }

}


/* =========================================================
   OPTIONAL LOGO ANIMATION
   OFF BY DEFAULT
   =========================================================

   To enable:

   <header class="site-header logo-animation-on">

   To disable:

   <header class="site-header">

   ========================================================= */

.logo-animation-on .site-logo-image {

  animation:
    probow-logo-breathe
    4s
    ease-in-out
    infinite;

}


@keyframes probow-logo-breathe {

  0%,
  100% {

    transform:
      scale(1);

    filter:
      none;
  }

  50% {

    transform:
      scale(1.018);

    filter:
      drop-shadow(
        0 3px 7px
        rgba(61,107,53,.16)
      );
  }

}


/* Disable animation for reduced motion */

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

  .logo-animation-on .site-logo-image {

    animation: none !important;

    transform: none !important;

    filter: none !important;

  }

}