/* =====================================================
   LYTB0X – CHANGE HEADER ON SCROLL
   Single header • SEO safe • Elementor
===================================================== */


/* =====================================================
   VARIABLES – EASY TO EDIT
===================================================== */

:root {

  /* Core animation */
  --lytbox-anim-ms: 180ms;
  --lytbox-admin-offset: 0px; /* set by JS */

  /* =====================================================
     SHRINK MODE (DEFAULT)
     Full-width compact sticky header
  ===================================================== */
  --shrink-pad-y: .6rem; /* adjust the inner top/bottom padding */
  --shrink-bg: rgba(249, 251, 253, 0.5); /* adjust the shrink menu background color */
  --shrink-blur: 12px; /* adjust the background blur */
  --shrink-shadow: 0 10px 30px rgba(18, 22, 30, 0.15); /* adjust the shrink menu box shadow */

  /* =====================================================
     PILL MODE (OPTIONAL)
     Floating pill-style header
  ===================================================== */
  --pill-top-space: 1.5rem; /* adjust top spacing*/
  --pill-max-w: 50rem; /* adjust the full width */
  --pill-inner-pad-y: .75rem; /* adjust the inner top/bottom padding */
  --pill-inner-pad-x: .75rem; /* adjust the inner left/right padding */
  --pill-radius: 999px; /* adjust the border radius */

  --pill-bg: rgba(249, 251, 253, 0.5); /* adjust the pill menu background color */
  --pill-blur: 12px; /* adjust the background blur */
  --pill-shadow: 0 10px 30px rgba(18, 22, 30, 0.15); /* adjust the pill menu box shadow */
  --pill-border: none; /* adjust the pill menu border */

  /* =====================================================
     MENU (add class to Nav Menu widget)
     .lytbox-nav
  ===================================================== */
  --menu-color: #000000; /* adjust the menu text color */
  /* --menu-color-hover: #3A00E7; /* adjust the menu text hover color */
  --menu-font-size: 1rem; /* adjust the menu font size */
  --menu-font-weight: 700; /* adjust the menu font weight */
  --menu-letter-spacing: 0em; /* adjust the menu text letter spacing */
  --menu-gap: .5rem; /* adjust the space between menu items */

  /* =====================================================
     CTA BUTTON (add class to Button wrapper)
     .lytbox-btn
  ===================================================== */
  --btn-font-size: .85rem; /* adjust the button font size */
  --btn-font-weight: 700; /* adjust the button font weight */
  --btn-pad-y: .75rem; /* adjust the button top/bottom padding */
  --btn-pad-x: 1.15rem; /* adjust the button right/left padding */
  --btn-radius: 999px; /* adjust the button border radius */

  --btn-bg: #010712; /* adjust the button background color */
  --btn-color: #fff; /* adjust the button font color */
  --btn-border: none; /* adjust the button border */

  --btn-color-hover: #030319; /* adjust the button font hover color */
  --btn-bg-hover: #57FBF5; /* adjust the button background hover color */
}


/* =====================================================
   CORE STICKY REVEAL (DO NOT EDIT)
===================================================== */

.lytbox-no-trans {
  transition: none !important;
}

.lytbox-header.lytbox-is-sticky {
  position: fixed;
  top: var(--lytbox-admin-offset);
  left: 0;
  right: 0;
  z-index: 9999;

  transform: translateY(-110%);
  transition: transform var(--lytbox-anim-ms) ease;
  will-change: transform;
}

.lytbox-header.lytbox-is-sticky.lytbox-show {
  transform: translateY(0);
}


/* =====================================================
   LOGO SWAP (OPTIONAL)
   logo-1 = default
   logo-2 = scrolled
===================================================== */

.logo-2 { display: none; }
.header-scrolled .logo-1 { display: none; }
.header-scrolled .logo-2 { display: inline-block; }


/* =====================================================
   BASE STRUCTURE
===================================================== */

.lytbox-header__inner {
  width: 100%;
  margin: 0 auto;
}

.header-scrolled.lytbox-header .e-con-inner {
  position: relative;
}


/* =====================================================
   SHRINK MODE (DEFAULT)
   Applies when:
   - no data-header-mode attribute
   - OR data-header-mode="shrink"
===================================================== */

.header-scrolled.lytbox-header:not([data-header-mode]),
.header-scrolled.lytbox-header[data-header-mode="shrink"] {
  background: var(--shrink-bg);
  backdrop-filter: blur(var(--shrink-blur));
  box-shadow: var(--shrink-shadow);
}

.header-scrolled.lytbox-header:not([data-header-mode]) .e-con-inner,
.header-scrolled.lytbox-header[data-header-mode="shrink"] .e-con-inner {
  padding-top: var(--shrink-pad-y);
  padding-bottom: var(--shrink-pad-y);
}

.header-scrolled.lytbox-header:not([data-header-mode]) .lytbox-header__inner,
.header-scrolled.lytbox-header[data-header-mode="shrink"] .lytbox-header__inner {
  max-width: none;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}


/* =====================================================
   PILL MODE (OPTIONAL)
   Activate with:
   data-header-mode="pill"
===================================================== */

.header-scrolled.lytbox-header[data-header-mode="pill"] {
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.header-scrolled.lytbox-header[data-header-mode="pill"] .e-con-inner {
  padding-top: var(--pill-top-space);
}

.header-scrolled.lytbox-header[data-header-mode="pill"] .lytbox-header__inner {
  max-width: var(--pill-max-w);
  padding: var(--pill-inner-pad-y) var(--pill-inner-pad-x);
  border-radius: var(--pill-radius);

  background: var(--pill-bg);
  backdrop-filter: blur(var(--pill-blur));
  box-shadow: var(--pill-shadow);
  border: var(--pill-border);
}


/* =====================================================
   MENU STYLING
===================================================== */

.header-scrolled .lytbox-nav a {
  color: var(--menu-color)!important;
  font-size: var(--menu-font-size)!important;
  font-weight: var(--menu-font-weight)!important;
  letter-spacing: var(--menu-letter-spacing)!important;
}

.header-scrolled .lytbox-nav a:hover {
  color: var(--menu-color-hover)!important;
}

.header-scrolled .lytbox-nav nav ul {
  gap: var(--menu-gap)!important;
}

.header-scrolled .lytbox-nav .elementor-nav-menu>li:not(:first-child)>a
 {
    margin-inline-start: 0!important;
}

.header-scrolled .lytbox-nav .elementor-nav-menu>li:not(:last-child)>a 
 {
    margin-inline-end: 0!important;
}


/* =====================================================
   CTA BUTTON
===================================================== */

.header-scrolled .lytbox-btn .elementor-button {
  font-size: var(--btn-font-size)!important;
  font-weight: var(--btn-font-weight)!important;
  padding: var(--btn-pad-y) var(--btn-pad-x)!important;
  border-radius: var(--btn-radius)!important;
  background: var(--btn-bg)!important;
  color: var(--btn-color)!important;
  border: var(--btn-border)!important;
}

.header-scrolled .lytbox-btn .elementor-button:hover {
  background: var(--btn-bg-hover)!important;
  color: var(--btn-color-hover)!important;
}


/* =====================================================
   SMOOTH VISUAL POLISH
===================================================== */

.header-scrolled .lytbox-header__inner,
.header-scrolled .lytbox-nav a,
.header-scrolled .lytbox-btn .elementor-button {
  transition:
    padding 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    font-size 180ms ease;
}