/* ============================================
   CUSTOM NAV — Bi Innovate
   Main Menu | Dropdowns | Mobile Menu | Sidebar Toggle
   ============================================ */

/* === Desktop dropdown positioning & animation === */
@media only screen and (min-width: 1200px) {
  .main-menu .navbar-collapse li ul {
    display: unset;
    left: 0;
    top: calc(100% + 15px);
    visibility: hidden;
    opacity: 0;
    transform: translateY(12px) scale(0.97);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.3s;
  }

  .main-menu .navbar-collapse li:hover > ul {
    visibility: visible;
    opacity: 1;
    top: 100%;
    transform: translateY(0) scale(1);
  }
}

/* === Mobile dropdown === */
@media only screen and (max-width: 1199px) {
  .main-menu .navbar-collapse li.dropdown:hover > ul {
    display: block;
  }
}

.main-menu .navbar-collapse .mobile-menu li ul {
  opacity: 1 !important;
  visibility: unset !important;
}

.main-menu .navbar-collapse li ul li ul {
  top: -2% !important;
}

/* === Remove diagonal arrow from dropdowns (using + instead) === */
.main-menu .navbar-collapse>ul>li.dropdown>a:before,
.main-menu .navigation > li.dropdown > a:before {
  display: none !important;
}

/* ============================================
   DESKTOP DROPDOWN — Premium 2-Column Grid
   ============================================ */
@media only screen and (min-width: 1200px) {
  .main-menu .navigation > li > ul,
  .main-menu .navigation > li > ul > li > ul {
    background: rgba(14, 16, 22, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
    backdrop-filter: blur(20px) saturate(1.5) !important;
    border-radius: var(--radius-card) !important;
    padding: 8px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                0 0 1px rgba(255, 255, 255, 0.1) !important;
    min-width: 280px !important;
  }

  /* Solutions mega-dropdown → 2-column grid */
  .main-menu .navigation > li > ul.bi-dropdown-menu {
    min-width: 520px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 12px !important;
    gap: 0 !important;
  }

  /* Header spans full width */
  .main-menu .navigation > li > ul.bi-dropdown-menu > li.bi-dd-header {
    width: 100% !important;
    flex-basis: 100% !important;
  }

  /* Each service item = half width */
  .main-menu .navigation > li > ul.bi-dropdown-menu > li:not(.bi-dd-header) {
    width: 50% !important;
    flex-basis: 50% !important;
    padding: 2px !important;
  }

  /* === Dropdown items === */
  .main-menu .navigation > li > ul > li > a,
  .main-menu .navigation > li > ul > li > ul > li > a {
    border-bottom: none !important;
    padding: 9px 12px !important;
    border-radius: var(--radius-btn) !important;
    font-size: 13px !important;
    font-weight: var(--fw-emph) !important;
    color: rgba(255, 255, 255, 0.65) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  /* Icon styling */
  .main-menu .navigation > li > ul > li > a > i,
  .main-menu .navigation > li > ul > li > ul > li > a > i {
    width: 28px;
    height: 28px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.25s ease;
    flex-shrink: 0;
  }

  /* Hover state */
  .main-menu .navigation > li > ul > li:hover > a,
  .main-menu .navigation > li > ul > li > ul > li:hover > a {
    background: rgba(255, 0, 217, 0.08) !important;
    color: #fff !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .main-menu .navigation > li > ul > li:hover > a > i,
  .main-menu .navigation > li > ul > li > ul > li:hover > a > i {
    background: rgba(255, 0, 217, 0.15);
    border-color: rgba(255, 0, 217, 0.3);
    color: var(--c-accent);
  }

  /* RTL hover */
  html[dir="rtl"] .main-menu .navigation > li > ul > li:hover > a,
  html[dir="rtl"] .main-menu .navigation > li > ul > li > ul > li:hover > a {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  /* === Header item (All Services) — full width === */
  .main-menu .navigation > li > ul > li.bi-dd-header > a {
    color: var(--c-accent) !important;
    font-weight: var(--fw-heading) !important;
    font-size: 11.5px !important;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 8px 12px 10px !important;
    margin-bottom: 4px !important;
    border-bottom: 1px solid rgba(255, 0, 217, 0.1) !important;
    border-radius: var(--radius-btn) var(--radius-btn) 0 0 !important;
  }

  .main-menu .navigation > li > ul > li.bi-dd-header > a > i {
    background: rgba(255, 0, 217, 0.12);
    border-color: rgba(255, 0, 217, 0.25);
    color: var(--c-accent);
  }

  .main-menu .navigation > li > ul > li.bi-dd-header:hover > a {
    background: rgba(255, 0, 217, 0.04) !important;
  }

  /* Active link indicator */
  .main-menu .navigation > li > ul > li > a.router-link-active,
  .main-menu .navigation > li > ul > li > a.router-link-exact-active {
    background: rgba(255, 0, 217, 0.06) !important;
    color: var(--c-accent) !important;
  }

  .main-menu .navigation > li > ul > li > a.router-link-active > i,
  .main-menu .navigation > li > ul > li > a.router-link-exact-active > i {
    background: rgba(255, 0, 217, 0.15);
    border-color: rgba(255, 0, 217, 0.3);
    color: var(--c-accent);
  }
}

/* ============================================
   MOBILE NAVBAR — theme-aware panel
   Every colour resolves from tokens, so light mode
   is derived automatically — no [data-theme] fork.
   ============================================ */
@media only screen and (max-width: 1199px) {
  .main-menu .navbar-collapse {
    background: var(--c-surface) !important;
    border: var(--border-width) solid var(--c-border) !important;
    border-radius: 0 0 var(--radius-card) var(--radius-card) !important;
    box-shadow: var(--shadow-card-hover) !important;
    padding: var(--space-2) !important;
    overflow-y: auto !important;
    /* The global accent scrollbar paints a full-height magenta bar down the
       panel edge once the menu overflows; keep it neutral here. */
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
  }

  .main-menu .navbar-collapse::-webkit-scrollbar {
    width: 4px;
  }

  .main-menu .navbar-collapse::-webkit-scrollbar-track {
    background: transparent;
  }

  .main-menu .navbar-collapse::-webkit-scrollbar-thumb {
    background: var(--c-border);
    border-radius: var(--radius-pill);
  }

  /* The base theme paints an opaque #222 slab on the <ul>. The panel above
     owns the surface now — leaving the slab in place makes light mode render
     dark text on a dark block. */
  .main-menu .navbar-collapse > ul {
    background: transparent !important;
    padding: 0 !important;
  }

  /* Hairline separators out, rounded hover targets in. */
  .main-menu .navbar-collapse li,
  .main-menu .navbar-collapse li li {
    border-top: none !important;
  }

  .main-menu .navbar-collapse > ul > li:last-child {
    border-bottom: none !important;
  }

  /* Row = [label | toggle] on line one, submenu wrapping to line two.
     Laying the row out with flex keeps the toggle beside its own label;
     the base theme positions it absolutely from the top of the <li>, which
     drops it into the middle of the submenu once the item is expanded. */
  .main-menu .navbar-collapse > ul > li {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 !important;
  }

  /* Nav link styling */
  .main-menu .navbar-collapse > ul > li > a {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--c-text) !important;
    font-size: 15px !important;
    font-weight: var(--fw-emph) !important;
    padding: var(--space-3) var(--space-4) !important;
    border-radius: var(--radius-btn);
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
  }

  /* v-html wrapper around .dropdown-btn — sits between label and submenu. */
  .main-menu .navbar-collapse > ul > li.dropdown > div {
    order: 2;
    flex: 0 0 auto;
    padding-inline-end: var(--space-2);
  }

  .main-menu .navbar-collapse > ul > li.dropdown > ul {
    order: 3;
    flex: 0 0 100%;
  }

  .main-menu .navbar-collapse > ul > li > a:hover,
  .main-menu .navbar-collapse > ul > li.open > a {
    background: var(--glass-bg);
    color: var(--c-accent) !important;
  }

  .main-menu .navbar-collapse > ul > li > a.router-link-exact-active {
    background: var(--c-accent-soft);
    color: var(--c-accent) !important;
  }

  /* Dropdown button (+/−) — compact square beside its label.
     The base theme makes it a 50x43 absolutely-placed column with a side
     border, which reads as a detached divider; this reshapes it. */
  .main-menu .navbar-collapse li.dropdown .dropdown-btn {
    position: static !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    border: var(--border-width) solid var(--c-border) !important;
    border-radius: var(--radius-input);
    background: var(--glass-bg);
    color: var(--c-text-subtle) !important;
    transition: color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
  }

  .main-menu .navbar-collapse li.dropdown.open .dropdown-btn {
    color: var(--c-accent) !important;
    background: var(--c-accent-soft);
    border-color: var(--c-accent-soft) !important;
  }

  /* Submenu — hidden by default, animated open */
  .main-menu .navbar-collapse li.dropdown > ul {
    display: none;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease !important;
  }
}

/* ============================================
   MOBILE DROPDOWN — Clean Stacked Style
   ============================================ */
@media only screen and (max-width: 1199px) {
  .main-menu .navigation > li > ul,
  .main-menu .navigation > li > ul > li > ul {
    background: var(--glass-bg) !important;
    border: var(--border-width) solid var(--c-border) !important;
    border-radius: var(--radius-btn) !important;
    /* No side margins: the submenu is a 100%-basis flex item, so horizontal
       margins overflow the row and shift it out of alignment. The panel's own
       padding already provides the inset. */
    margin: 0 0 var(--space-2) !important;
    padding: var(--space-1) !important;
  }

  .main-menu .navigation > li > ul > li > a,
  .main-menu .navigation > li > ul > li > ul > li > a {
    padding: 9px 12px !important;
    font-size: 13px !important;
    border-radius: var(--radius-input) !important;
    border-bottom: none !important;
    color: var(--c-text-muted) !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out) !important;
  }

  .main-menu .navigation > li > ul > li > a > i {
    width: 24px;
    height: 24px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--glass-bg);
    font-size: 10px !important;
    color: var(--c-text-subtle);
    flex-shrink: 0;
  }

  .main-menu .navigation > li > ul > li:hover > a,
  .main-menu .navigation > li > ul > li > ul > li:hover > a {
    background: var(--c-accent-soft) !important;
    color: var(--c-text) !important;
  }

  .main-menu .navigation > li > ul > li:hover > a > i {
    color: var(--c-accent);
    background: var(--c-accent-soft);
  }

  /* Header item mobile */
  .main-menu .navigation > li > ul > li.bi-dd-header > a {
    color: var(--c-accent) !important;
    font-weight: var(--fw-heading) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: var(--border-width) solid var(--c-accent-soft) !important;
    margin-bottom: 2px !important;
    padding: 8px 12px 8px !important;
  }

  .main-menu .navigation > li > ul > li.bi-dd-header > a > i {
    color: var(--c-accent);
    background: var(--c-accent-soft);
  }
}

/* ============================================
   RTL — Dropdown icon flip fix
   ============================================ */
html[dir="rtl"] .main-menu .navigation > li > ul > li > a > i,
html[dir="rtl"] .main-menu .navigation > li > ul > li > ul > li > a > i {
  transform: none !important;
}

/* ============================================
   NAVBAR — Premium Glassmorphic Enhancements
   ============================================ */

/* === Top Bar — Subtle gradient with bottom glow === */
.header-top.bgc-primary {
  background: linear-gradient(90deg, #1a0a1f 0%, #2d0a2e 50%, #1a0a1f 100%) !important;
  border-bottom: 1px solid rgba(255, 0, 217, 0.2);
  position: relative;
}

.header-top.bgc-primary::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 217, 0.4), transparent);
}

/* === Fixed Header — Better glassmorphism === */
.main-header.fixed-header .header-upper {
  background: rgba(10, 12, 18, 0.85) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
  backdrop-filter: blur(20px) saturate(1.8) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important;
}

/* === Nav links — Better hover & active states === */
/* ============================================
   DESKTOP NAV FIT
   The header row is logo (150) + nav + .menu-btns, inside a container that
   caps at 1620px. At the template's 25px item padding the nav needs ~1600px
   in EN and ~1510px in AR, so BOTH locales wrapped their two-word items
   ("About Us" / "Contact Us", "من نحن" / "تواصل معنا") onto a second line at
   every width below ~1630px — i.e. on every laptop.

   Two rules fix it together:
     1. nowrap, so a squeezed item can never break mid-label;
     2. item padding steps down as the viewport narrows, so the row keeps
        fitting until the 1199px collapse breakpoint takes over.
   ============================================ */
@media only screen and (min-width: 1200px) {
  .main-menu .navigation > li > a {
    white-space: nowrap;
  }
}

/* Item padding steps. Overrides `.main-menu .navbar-collapse li { padding:
   35px 25px }` in style.css — equal specificity (0,2,1), and custom.nav.css
   loads after style.css (see app.vue), so these win. Scoped to
   `.navigation > li` so only TOP-LEVEL items shrink, never dropdown rows. */

/* 1400-1600: reclaim 14px per item (7 items ≈ 98px) */
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .main-menu .navigation > li {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* Below 1600 the nav's mx-lg-auto has no spare space left to distribute, so
     the first item ends up flush against the wordmark (18px at 1401). Reserve
     the gap explicitly across the whole squeezed range, not just the tight
     band, or 1401 ends up looking more cramped than 1400. */
  .main-header.header-two .nav-outer {
    padding-inline-start: var(--space-5);
  }

  /* Control gaps. The template ships 15/25/25/24px of margin between the four
     controls — 89px of pure air in a row that has none to spare. Halving it
     across the whole squeezed range is what pays for the nav-outer gap above;
     without this the quick-menu button overhangs the container by 25px at
     1401 and gets clipped at the viewport edge. */
  .main-header.header-two .menu-btns .theme-toggle-glass {
    margin-right: 8px;
    margin-left: 0;
  }

  html[dir="rtl"] .main-header.header-two .menu-btns .theme-toggle-glass {
    margin-left: 8px;
    margin-right: 0;
  }

  .main-header.header-two .menu-btns .lang-switcher-glass {
    margin-left: 12px;
    margin-right: 12px;
  }

  .main-header.header-two .call-icon-btn {
    margin-inline-end: var(--space-3);
  }
}

/* 1200-1400: the tight band. The collapse breakpoint is pinned to Bootstrap's
   xl (1200) because navbar-expand-* only understands Bootstrap's breakpoints —
   picking an in-between value makes Bootstrap force the panel open (below its
   breakpoint) or keep it display:none (above ours). So the header has to
   actually fit 1200px, and English is the binding case: logo 150 + nav + the
   four controls. Everything below is what buys those pixels back. */
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .main-menu .navigation > li {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* At 25px padding the row was ~135px over budget at 1200px, which left the
     wordmark butted straight against the first nav item. Shrinking the logo
     ~20% and spending part of the saving on a real gap keeps them separated. */
  .main-header.header-two .logo-outer img {
    width: 120px;
    height: auto;
  }

  /* Compact language switcher: drop the flag emoji and narrow the pills.
     EN / AR still read unambiguously, and this alone returns ~52px. */
  .main-header.header-two .lang-switcher-glass .lang-pill {
    width: 48px;
    padding: 0 6px;
  }

  .main-header.header-two .lang-switcher-glass .lang-pill .flag {
    display: none;
  }

  .main-header.header-two .lang-switcher-glass .lang-slider {
    width: 48px;
  }

  .main-header.header-two .lang-switcher-glass.ar .lang-slider {
    transform: translateX(48px);
  }
}

@media only screen and (min-width: 1200px) {
  .main-menu .navigation > li > a {
    position: relative;
    transition: color 0.3s ease !important;
  }

  /* Active page underline */
  .main-menu .navigation > li > a.router-link-active::after,
  .main-menu .navigation > li > a.router-link-exact-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--c-accent);
    border-radius: 1px;
  }

  /* Hover underline animation.
     style.css (0,2,4) uses ::before for a FA \f061 arrow on hover.
     We must override content/font/position/opacity with !important. */
  .main-menu .navigation > li > a::before {
    content: '' !important;          /* kill style.css FA arrow \f061 */
    font-family: inherit !important; /* prevent FA 5 Pro from rendering */
    font-size: 0 !important;         /* zero-size safety net */
    position: absolute;
    bottom: 0 !important;            /* beat style.css top: 65% */
    top: auto !important;
    left: 50%;
    transform: translateX(-50%) scaleX(0) !important; /* beat rotate(-45deg) */
    width: 30px;
    height: 2px;
    background: rgba(255, 0, 217, 0.5);
    border-radius: 1px;
    opacity: 1 !important;           /* beat style.css opacity: 0 */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .main-menu .navigation > li:hover > a::before {
    transform: translateX(-50%) scaleX(1) !important; /* beat style.css hover */
  }

  /* Don't show hover line if active line is already there */
  .main-menu .navigation > li > a.router-link-active::before,
  .main-menu .navigation > li > a.router-link-exact-active::before {
    display: none;
  }
}

/* === Phone — icon button ===
   Deliberately mirrors ThemeToggle's 42px glass circle so the two sit as a
   matched pair. Replaces the old .call-anytime text block, which spelled the
   number out over two lines and ate ~183px of the header row. */
.main-header.header-two .call-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  border: var(--border-width) solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 15px;
  margin-inline-end: var(--space-5);
  transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-header.header-two .call-icon-btn:hover {
  background: rgba(214, 0, 184, 0.15);
  border-color: rgba(214, 0, 184, 0.4);
  color: var(--c-accent);
}

.main-header.header-two .call-icon-btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* Below the collapse breakpoint the header is just logo + hamburger +
   quick-menu; phone lives in the sidebar and footer instead. */
@media only screen and (max-width: 1199px) {
  .main-header.header-two .call-icon-btn {
    display: none;
  }
}

/* === Sidebar Toggle Button — unified rounded === */
.menu-sidebar button {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 50% !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  transition: all 0.3s ease;
}

.menu-sidebar button:hover {
  background: rgba(255, 0, 217, 0.15) !important;
  border-color: rgba(255, 0, 217, 0.4) !important;
  box-shadow: 0 0 15px rgba(255, 0, 217, 0.2) !important;
}

/* === Footer social icons — always horizontal on mobile === */
@media only screen and (max-width: 767px) {
  .social-style-four {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
  }
  .social-style-four a {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
}

/* === Header-top social icons — horizontal row on mobile === */
@media only screen and (max-width: 991px) {
  .header-top .social-style-two {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px;
  }
}

/* === Mobile Header Logo — brighter & larger === */
@media only screen and (max-width: 1199px) {
  .navbar-header .mobile-logo img {
    filter: brightness(1.2) !important;
    width: 130px !important;
    height: auto !important;
  }
}

/* ============================================
   MOBILE MENU CONTROLS — Theme + Language
   Rendered inside .navbar-collapse, visible
   only below lg. (Item 8)
   ============================================ */
.mobile-menu-controls {
  display: none;
}

@media only screen and (max-width: 1199px) {
  .mobile-menu-controls {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3) var(--space-2);
    border-top: var(--border-width) solid var(--c-border);
    margin-top: var(--space-2);
  }

  /* The desktop toggle lives in .menu-btns and stays rendered
     on mobile — hide it to avoid a duplicate toggle. */
  .menu-btns .theme-toggle-glass,
  .menu-btns .lang-switcher-glass,
  .menu-btns .call-anytime {
    display: none !important;
  }

  /* Once the nav collapses, .menu-btns is reduced to the quick-menu button
     and lands flush against the nav hamburger — both had margin 0, so the
     two icons touched at exactly one pixel and read as a single control.
     Logical margin so LTR and RTL both get the gap on the correct side
     (.menu-btns is last in flow order, so the space goes on its start edge). */
  .main-header.header-two .menu-btns {
    margin-inline-start: var(--space-5);
  }
}

/* === Desktop Logo brightness === */
.logo-outer .logo img {
  filter: brightness(1.1);
  transition: filter 0.3s ease;
  /* height:auto keeps the new 4.05:1 wordmark from being squished by the
     legacy width/height attrs (which assumed a slightly different ratio). */
  height: auto;
}

.logo-outer .logo:hover img {
  filter: brightness(1.25);
}

/* === Misc fixes === */
.testimonial-three-dots.slick-dots.swiper-pagination-bullets.swiper-pagination-horizontal {
  width: unset;
}

.author-speech {
  padding-top: 20px;
}

.main-slider-arrows button {
  z-index: 99;
}

.circle-progress {
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-item.style-five {
  position: relative;
}

/* ============================================
   SIDEBAR — Smooth Slide Animation Override
   ============================================ */
.hidden-bar {
  max-width: 100%;
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.4s !important;
}

html[dir="rtl"] .hidden-bar {
  transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.4s !important;
}

/* Backdrop — deeper blur + darker overlay */
.side-content-visible .form-back-drop {
  background: rgba(0, 0, 0, 0.5) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.5) !important;
  backdrop-filter: blur(12px) saturate(1.5) !important;
}

/* Scrollbar inside sidebar */
.hidden-bar::-webkit-scrollbar {
  width: 4px;
}

.hidden-bar::-webkit-scrollbar-track {
  background: transparent;
}

.hidden-bar::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 217, 0.2);
  border-radius: 4px;
}

.hidden-bar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 0, 217, 0.4);
}

/* ============================================
   LIGHT MODE — Theme overrides
   ============================================ */

/* Desktop dropdown only. These mirror the min-width:992px block above, so they
   must carry the same breakpoint — unscoped they leaked into the mobile menu
   and repainted its submenus opaque white. */
@media only screen and (min-width: 1200px) {
[data-theme="light"] .main-menu .navigation > li > ul,
[data-theme="light"] .main-menu .navigation > li > ul > li > ul {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1),
              0 0 1px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .main-menu .navigation > li > ul > li > a,
[data-theme="light"] .main-menu .navigation > li > ul > li > ul > li > a {
  color: rgba(0, 0, 0, 0.65) !important;
}

[data-theme="light"] .main-menu .navigation > li > ul > li > a > i,
[data-theme="light"] .main-menu .navigation > li > ul > li > ul > li > a > i {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .main-menu .navigation > li > ul > li:hover > a,
[data-theme="light"] .main-menu .navigation > li > ul > li > ul > li:hover > a {
  background: rgba(214, 0, 184, 0.08) !important;
  color: #1a1a2e !important;
}

[data-theme="light"] .main-menu .navigation > li > ul > li:hover > a > i,
[data-theme="light"] .main-menu .navigation > li > ul > li > ul > li:hover > a > i {
  background: rgba(214, 0, 184, 0.15);
  border-color: rgba(214, 0, 184, 0.3);
  color: var(--c-accent);
}

[data-theme="light"] .main-menu .navigation > li > ul > li.bi-dd-header > a {
  color: var(--c-accent) !important;
  border-color: rgba(214, 0, 184, 0.1) !important;
}

[data-theme="light"] .main-menu .navigation > li > ul > li.bi-dd-header > a > i {
  background: rgba(214, 0, 184, 0.12);
  border-color: rgba(214, 0, 184, 0.25);
  color: var(--c-accent);
}

[data-theme="light"] .main-menu .navigation > li > ul > li > a.router-link-active,
[data-theme="light"] .main-menu .navigation > li > ul > li > a.router-link-exact-active {
  background: rgba(214, 0, 184, 0.06) !important;
  color: var(--c-accent) !important;
}

[data-theme="light"] .main-menu .navigation > li > ul > li > a.router-link-active > i,
[data-theme="light"] .main-menu .navigation > li > ul > li > a.router-link-exact-active > i {
  background: rgba(214, 0, 184, 0.15);
  border-color: rgba(214, 0, 184, 0.3);
  color: var(--c-accent);
}
}

/* No [data-theme="light"] fork for the mobile menu: the block above is written
   entirely in tokens, which already flip per theme. Re-stating literals here
   only reintroduced drift (that fork is what left the <ul> slab unhandled). */

[data-theme="light"] .header-top.bgc-primary {
  background: linear-gradient(90deg, #f0f0f5 0%, #e8e8ef 50%, #f0f0f5 100%) !important;
  border-color: rgba(214, 0, 184, 0.2);
}

[data-theme="light"] .header-top.bgc-primary::after {
  background: linear-gradient(90deg, transparent, rgba(214, 0, 184, 0.25), transparent) !important;
}

[data-theme="light"] .header-top .top-left li,
[data-theme="light"] .header-top .top-left li a,
[data-theme="light"] .header-top .top-left li i {
  color: rgba(0, 0, 0, 0.6) !important;
}

[data-theme="light"] .header-top .top-left li a:hover {
  color: var(--c-accent) !important;
}

[data-theme="light"] .main-header.fixed-header .header-upper {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .main-menu .navigation > li > a.router-link-active::after,
[data-theme="light"] .main-menu .navigation > li > a.router-link-exact-active::after {
  background: var(--c-accent);
}

[data-theme="light"] .main-menu .navigation > li > a::before {
  background: rgba(214, 0, 184, 0.5);
}

[data-theme="light"] .call-anytime .content a:hover {
  color: var(--c-accent) !important;
}

[data-theme="light"] .menu-sidebar button {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .menu-sidebar button:hover {
  background: rgba(214, 0, 184, 0.15) !important;
  border-color: rgba(214, 0, 184, 0.4) !important;
  box-shadow: 0 0 15px rgba(214, 0, 184, 0.2) !important;
}

/* Light-mode logo brightness is owned by theme.light.css — see the
   "Bi Innovate logo" block there. The mobile-logo (0.9) and logo-outer
   (0.95) rules that used to live here were washing the white wordmark out
   to invisible on the light header; they won over theme.light.css purely
   by coming later in the cascade. */

[data-theme="light"] .side-content-visible .form-back-drop {
  background: rgba(0, 0, 0, 0.3) !important;
}

[data-theme="light"] .hidden-bar::-webkit-scrollbar-thumb {
  background: rgba(214, 0, 184, 0.2);
}

[data-theme="light"] .hidden-bar::-webkit-scrollbar-thumb:hover {
  background: rgba(214, 0, 184, 0.4);
}

/* ============================================
   NAV UNDERLINE — Magnetic grow from center
   Uses center-based positioning (left: 50% +
   translateX(-50%)) so it works in both LTR
   and RTL without direction-specific overrides.
   ::after = active/current route (always full)
   ::before = hover animation (grows from center)
   ============================================ */

/* Active: accent underline centered under text.
   30px matches the hover ::before so both feel consistent. */
.main-menu .navigation > li > a.router-link-active::after,
.main-menu .navigation > li > a.router-link-exact-active::after {
  width: 30px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Hover: grow from center.
   width: 30px — nav <a> is display:block and fills the <li>, so
   width: 100% would span the full nav-item box, not the text. */
.main-menu .navigation > li > a::before {
  content: '' !important;
  font-family: inherit !important;
  font-size: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  left: 50% !important;
  transform: translateX(-50%) scaleX(0) !important;
  width: 30px !important;
  height: 2px !important;
  opacity: 1 !important;
  transform-origin: center !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.main-menu .navigation > li:hover > a::before {
  transform: translateX(-50%) scaleX(1) !important;
}

/* RTL — ThemeToggle margin: in RTL flex, margin-right goes to the
   outer edge; swap it to margin-left so the gap sits between the
   toggle and the LanguageSwitcher to its left. */
html[dir="rtl"] .menu-btns .theme-toggle-glass {
  margin-right: 0 !important;
  margin-left: 15px !important;
}