/* =========================================================
   base.css — SHARED styles (sabhi sections isko use karte hain)
   - Common colour tokens
   - Reset
   - Body / typography
   - Shared .sec / .inner layout
   - Shared .eyebrow
   ========================================================= */

:root {
  /* Brand tokens — sab sections mein same */
  --orange: #f4744a;
  --orange-deep: #ef6337;
  --green: #1fc774;
  --gold: #e8c34a;

  --bg: #0c0b0d;
  --text-primary: #fdf9f6;
  --text-muted: rgba(220, 216, 228, 0.68);

  --font-body: "Quicksand", system-ui, sans-serif;
  --font-display: "Zilla Slab", Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--text-primary);
  overflow-x: hidden;
}

/* ---------- Section shell ----------
   .sec       -> full-width band (background + padding yahan lagti hai)
   .inner     -> content container (max-width 1320px, centred)
------------------------------------- */
.sec {
  padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 6vw, 6rem);
}

.inner {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
}

/* ---------- Shared eyebrow ----------
   Default: orange. (.sec-paths ise white override karta hai) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.9;
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .carousel { scroll-behavior: auto !important; }
}
.site-menu .haas-children{
  position: relative;
}
ul.suub-menu {
  padding: 0px 20px;
  z-index: 1000;
  min-width: 300px;
  max-width: 90vw;
  transition: all .25s ease-in-out;
  position: absolute;
  top: 5rem;
  transform: translateY(10px);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-image:
    linear-gradient(#0b0b0bee, #0b0b0bee),
    linear-gradient(160deg, #f3714b, #3a98eb66 55%, #ffffff26);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 1px solid #0000;
  border-radius: 20px;
  opacity: 0;
  visibility: hidden;
}

ul.suub-menu li {
  list-style: none;
  white-space: nowrap;
  padding: 8px 20px;
  font-family: Quicksand, sans-serif;
  font-size: 15px;
  font-weight: 400;
  transition: color .2s ease-in-out;
  display: block;
}

.haas-children .suub-menu li a {
  color: #fff;
}
.haas-children .suub-menu li:hover .gocolor{
  color: #f4693c!important;
}
.faangle {
  transition: transform .25s ease-in-out;
}

/* DESKTOP HOVER */
.haas-children:hover .faangle {
  transform: rotate(180deg);
}

.haas-children:hover ul.suub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width: 1199px) {
    .haas-children .suub-menu {
        display: none;
        opacity: 0;
        visibility: hidden;
    }

    .haas-children.open .suub-menu {
        display: block;
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 1199px) {
  .site-mobile-menu .haas-children > a { display: flex; align-items: center; }
  .site-mobile-menu .haas-children.open > a .faangle { transform: rotate(180deg); }
  .site-mobile-menu ul.suub-menu {
    display: block;
    position: static;
    transform: none;
    top: auto;
    width: 100%;
    min-width: 0;
    padding: 0 0 0 14px;
    margin: 6px 0 0;
    border: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height .25s ease, opacity .2s ease;
  }

  .site-mobile-menu .haas-children.open > ul.suub-menu {
    max-height: 320px;
    opacity: 1;
    visibility: visible;
  }

  .site-mobile-menu ul.suub-menu li { padding: 8px 0; }
}
@media (min-width: 1200px) {
  .haas-children:hover .faangle { transform: rotate(180deg); }
  .haas-children:hover ul.suub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
}
@media (max-width: 767px) {
  .haas-children:hover .faangle {
    transform: inherit;
  }

}

.site-mobile-menu.no-anim ul.suub-menu { transition: none !important; }