/*
  ═══════════════════════════════════════════════════════════
  LIQUID GLASS UI — XYZ Media Design System
  Inspired by: Apple iOS 26 / macOS Tahoe liquid glass surfaces
  Features: blur backdrop · specular highlights · liquid distortion
             floating header · expanding footer · glass modals
  ═══════════════════════════════════════════════════════════
*/

/* ─────────────────────────────────────────────────────
   LIQUID GLASS DESIGN TOKENS
───────────────────────────────────────────────────── */
:root {
  /* Light glass surface */
  --lg-light-bg:           rgba(255, 255, 255, 0.62);
  --lg-light-bg-strong:    rgba(255, 255, 255, 0.78);
  --lg-light-border:       rgba(255, 255, 255, 0.32);
  --lg-light-border-top:   rgba(255, 255, 255, 0.68);
  --lg-light-spec:         rgba(255, 255, 255, 0.60);
  --lg-light-shadow:
    0 20px 60px rgba(0, 0, 0, 0.10),
    0 4px  16px rgba(0, 0, 0, 0.06),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px  0 rgba(255, 255, 255, 0.10);

  /* Dark glass surface */
  --lg-dark-bg:            rgba(3, 13, 30, 0.86);
  --lg-dark-border:        rgba(255, 255, 255, 0.08);
  --lg-dark-border-top:    rgba(255, 255, 255, 0.18);
  --lg-dark-spec:          rgba(255, 255, 255, 0.18);
  --lg-dark-shadow:
    0 -16px 60px rgba(0, 0, 0, 0.16),
    0   8px 32px rgba(0, 0, 0, 0.18),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.18),
    inset 0  -1px 0 rgba(0,   0,  0, 0.20);

  /* Blur levels */
  --lg-blur-sm:   14px;
  --lg-blur-md:   28px;
  --lg-blur-lg:   44px;

  /* Float & expand transition */
  --lg-ease:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --lg-dur:   440ms;
}


/* ─────────────────────────────────────────────────────
   GLASS UTILITY CLASSES
───────────────────────────────────────────────────── */

/* Light glass panel */
.lg-glass {
  background:  var(--lg-light-bg);
  backdrop-filter:          blur(var(--lg-blur-md)) saturate(180%) brightness(1.02);
  -webkit-backdrop-filter:  blur(var(--lg-blur-md)) saturate(180%) brightness(1.02);
  border:      1px solid var(--lg-light-border);
  border-top-color: var(--lg-light-border-top);
  box-shadow:  var(--lg-light-shadow);
  position:    relative;
  overflow:    hidden;
}

/* Dark glass panel */
.lg-glass-dark {
  background:  var(--lg-dark-bg);
  backdrop-filter:          blur(var(--lg-blur-md)) saturate(160%) brightness(0.95);
  -webkit-backdrop-filter:  blur(var(--lg-blur-md)) saturate(160%) brightness(0.95);
  border:      1px solid var(--lg-dark-border);
  border-top-color: var(--lg-dark-border-top);
  box-shadow:  var(--lg-dark-shadow);
  position:    relative;
  overflow:    hidden;
}

/* Specular sheen — top gradient highlight */
.lg-glass::before,
.lg-glass-dark::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 48%;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.28) 0%,
    rgba(255,255,255,0.07) 45%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Liquid refraction accent layer */
.lg-glass::after,
.lg-glass-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 80% 55% at 18%  0%, rgba(180,215,255,0.20) 0%, transparent 60%),
    radial-gradient(ellipse 65% 45% at 82% 100%, rgba(100,175,255,0.12) 0%, transparent 55%);
  filter: url(#lg-distort);
  pointer-events: none;
  z-index: 0;
}

/* Ensure content sits above specular layers */
.lg-glass > *,
.lg-glass-dark > * {
  position: relative;
  z-index: 1;
}


/* ─────────────────────────────────────────────────────
   1. LIQUID GLASS HEADER — FLOATING → STICKY
───────────────────────────────────────────────────── */

/* ── Default "floating" state (top 10px, pill shape) ── */
body.company-site #header {
  position:   fixed   !important;
  top:        10px    !important;
  left:       50%     !important;
  right:      auto    !important;
  transform:  translateX(-50%) !important;
  width:      calc(100% - 150px) !important;
  max-width:  1560px  !important;
  border-radius: 18px !important;
  height:     68px    !important;
  padding:     0      !important;
  z-index:   9999     !important;
  overflow:   hidden  !important;

  /* Liquid glass surface */
  background: var(--lg-light-bg) !important;
  backdrop-filter:         blur(var(--lg-blur-lg)) saturate(200%) brightness(1.03) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(200%) brightness(1.03) !important;

  /* Layered border — top catches the light */
  border:          1px solid var(--lg-light-border)     !important;
  border-top-color: var(--lg-light-border-top)          !important;

  /* Float shadow + inner specular inset */
  box-shadow:
    0 20px 60px rgba(0,  0,  0, 0.10),
    0  4px 16px rgba(0,  0,  0, 0.06),
    inset 0 1.5px 0 rgba(255,255,255,0.65),
    inset 0  -1px 0 rgba(255,255,255,0.10) !important;

  /* Smooth transition for all float→sticky properties */
  transition:
    top           var(--lg-dur) var(--lg-ease),
    left          var(--lg-dur) var(--lg-ease),
    right         var(--lg-dur) var(--lg-ease),
    width         var(--lg-dur) var(--lg-ease),
    max-width     var(--lg-dur) var(--lg-ease),
    border-radius var(--lg-dur) var(--lg-ease),
    transform     var(--lg-dur) var(--lg-ease),
    background    var(--lg-dur) var(--lg-ease),
    box-shadow    var(--lg-dur) var(--lg-ease),
    border-color  var(--lg-dur) var(--lg-ease) !important;
}

/* Specular sheen over header */
body.company-site #header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.30) 0%,
    rgba(255,255,255,0.06) 100%
  );
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--lg-dur) var(--lg-ease);
}

/* Liquid distortion accent */
body.company-site #header::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 70% 60% at 12%   0%, rgba(6,71,113,0.08)  0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 88% 100%, rgba(6,120,190,0.06) 0%, transparent 55%);
  filter: url(#lg-distort);
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--lg-dur) var(--lg-ease);
}

/* Nav shell + container above pseudo-elements */
body.company-site .company-nav-shell,
body.company-site #header .container {
  position: relative !important;
  z-index: 2         !important;
}

/* ── Scrolled / Sticky state — full width, flat top ── */
body.company-site #header.header-scrolled {
  top:          0     !important;
  left:         0     !important;
  right:        0     !important;
  transform:    none  !important;
  width:        100%  !important;
  max-width:    none  !important;
  border-radius: 0 0 16px 16px !important;

  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter:         blur(var(--lg-blur-lg)) saturate(210%) brightness(1.03) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(210%) brightness(1.03) !important;

  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid rgba(6, 71, 113, 0.09) !important;

  box-shadow:
    0  8px 32px rgba(0,0,0,0.08),
    0  2px  8px rgba(0,0,0,0.04),
    inset 0 -1px 0 rgba(255,255,255,0.12) !important;
}

/* ── Home hero: nearly invisible glass ── */
body.company-site #header.header-transparent:not(.header-scrolled) {
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter:         blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  border-color:     rgba(255,255,255,0.16) !important;
  border-top-color: rgba(255,255,255,0.32) !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.32) !important;
}

/* ── Mobile nav drawer — position below floating header ── */
@media (max-width: 991.98px) {
  body.company-site #navbar {
    top: 78px !important; /* 10px offset + 68px header height */
    background: rgba(255,255,255,0.88) !important;
    backdrop-filter:         blur(var(--lg-blur-lg)) saturate(200%) !important;
    -webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(200%) !important;
    border-left:  1px solid rgba(255,255,255,0.40) !important;
    border-right: none !important;
    border-radius: 0 0 0 18px !important;
    box-shadow: -8px 0 40px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.50) !important;
  }
  body.company-site #header.header-scrolled #navbar {
    top: 68px !important; /* 0px offset + 68px when sticky */
  }
}


/* ─────────────────────────────────────────────────────
   2. LIQUID GLASS FOOTER — FLOATING → FULL WIDTH
───────────────────────────────────────────────────── */

body.company-site #footer.company-footer {
  /* Floating state: inset margins + rounded corners */
  margin:        0 20px 24px !important;
  border-radius: 28px        !important;
  overflow:      hidden      !important;
  position:      relative;

  /* Dark liquid glass */
  /* background: var(--lg-dark-bg) !important; */
  backdrop-filter:         blur(var(--lg-blur-lg)) saturate(160%) brightness(0.94) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(160%) brightness(0.94) !important;

  border: 1px solid var(--lg-dark-border) !important;
  border-top-color: var(--lg-dark-border-top) !important;

  box-shadow: var(--lg-dark-shadow) !important;

  /* Smooth expand transition */
  transition:
    margin        var(--lg-dur) var(--lg-ease),
    border-radius var(--lg-dur) var(--lg-ease),
    box-shadow    var(--lg-dur) var(--lg-ease) !important;
}

/* Horizontal specular line across footer top edge */
body.company-site #footer.company-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent   0%,
    rgba(255,255,255,0.30) 20%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0.30) 80%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
  transition:
    opacity var(--lg-dur) var(--lg-ease),
    left    var(--lg-dur) var(--lg-ease),
    right   var(--lg-dur) var(--lg-ease);
}

/* Liquid accent glow inside footer */
body.company-site #footer.company-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 5%   0%, rgba(6,71,113,0.22)  0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 95% 100%, rgba(6,120,190,0.14) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* All footer content above glass layers */
body.company-site #footer.company-footer > * {
  position: relative;
  z-index: 2;
}

/* ── Footer at-end: expand to 100% width ── */
body.company-site #footer.company-footer.footer-at-end {
  margin:        0    !important;
  border-radius: 0    !important;
  border-left:   none !important;
  border-right:  none !important;
  border-bottom: none !important;

  box-shadow:
    0 -4px 24px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

body.company-site #footer.company-footer.footer-at-end::before {
  left: 0;
  right: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.18) 25%,
    rgba(255,255,255,0.30) 50%,
    rgba(255,255,255,0.18) 75%,
    transparent 100%
  );
}


/* ─────────────────────────────────────────────────────
   3. LIQUID GLASS MODALS
───────────────────────────────────────────────────── */

/* Frosted backdrop */
.modal-backdrop {
  backdrop-filter:         blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  background: rgba(6, 15, 40, 0.22) !important;
}
.modal-backdrop.show { opacity: 1 !important; }

/* Modal container depth shadow */
.modal-dialog {
  filter: drop-shadow(0 40px 90px rgba(0,0,0,0.18));
}

/* Modal panel — liquid glass */
.modal-content {
  background: rgba(255, 255, 255, 0.70) !important;
  backdrop-filter:         blur(var(--lg-blur-lg)) saturate(200%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(200%) brightness(1.04) !important;

  border:          1px solid rgba(255,255,255,0.38) !important;
  border-top-color: rgba(255,255,255,0.78)          !important;
  border-radius:   24px !important;

  box-shadow:
    0 40px 100px rgba(0,0,0,0.14),
    0  8px  24px rgba(0,0,0,0.07),
    inset 0 1.5px 0 rgba(255,255,255,0.68),
    inset 0  -1px 0 rgba(255,255,255,0.10) !important;

  overflow: hidden;
  position: relative;
}

/* Modal specular sheen */
.modal-content::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 44%;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.26) 0%,
    rgba(255,255,255,0.06) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
  border-radius: 24px 24px 0 0;
}

/* Modal liquid tint */
.modal-content::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 10%   0%, rgba(6,71,113,0.06)  0%, transparent 60%),
    radial-gradient(ellipse 65% 45% at 90% 100%, rgba(6,120,190,0.04) 0%, transparent 55%);
  filter: url(#lg-distort);
  pointer-events: none;
  z-index: 0;
}

/* Modal sections above glass layers */
.modal-content .modal-header,
.modal-content .modal-body,
.modal-content .modal-footer {
  position: relative;
  z-index: 1;
}

.modal-header {
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  background:    rgba(255,255,255,0.14)     !important;
  padding:       20px 24px                  !important;
}
.modal-footer {
  border-top:  1px solid rgba(0,0,0,0.06) !important;
  background:  rgba(255,255,255,0.10)     !important;
  padding:     16px 24px                  !important;
}
.modal-body {
  padding: 24px !important;
  color: var(--e-text) !important;
}
.modal-title {
  font-family:    var(--e-font-heading) !important;
  font-weight:    700                   !important;
  letter-spacing: -0.02em              !important;
  color:          var(--e-text)        !important;
}
.btn-close {
  filter: none !important;
  opacity: 0.55 !important;
}
.btn-close:hover { opacity: 1 !important; }


/* ─────────────────────────────────────────────────────
   4. LIQUID GLASS — WEBSITE ELEMENTS
───────────────────────────────────────────────────── */

/* ── Service cards ── */
body.company-site .e-service-card {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter:         blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border:          1px solid rgba(255,255,255,0.55) !important;
  border-top-color: rgba(255,255,255,0.82)          !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.06),
    0 2px  8px rgba(0,0,0,0.03),
    inset 0 1px 0 rgba(255,255,255,0.72) !important;
  transition:
    transform    var(--e-dur-base) var(--e-ease-out),
    box-shadow   var(--e-dur-base) var(--e-ease-out),
    background   var(--e-dur-base) var(--e-ease-out) !important;
}
body.company-site .e-service-card:hover {
  background: rgba(255,255,255,0.88) !important;
  box-shadow:
    0 22px 64px rgba(0,0,0,0.10),
    0  6px 20px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.78) !important;
  transform: translateY(-7px) !important;
}

/* ── Capability cards ── */
body.company-site .e-capability-card {
  background: rgba(255,255,255,0.66) !important;
  backdrop-filter:         blur(10px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
  border:          1px solid rgba(255,255,255,0.50) !important;
  border-top-color: rgba(255,255,255,0.78)          !important;
  box-shadow:
    0 5px 22px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.68) !important;
  transition:
    transform  var(--e-dur-base) var(--e-ease-out),
    box-shadow var(--e-dur-base) var(--e-ease-out) !important;
}
body.company-site .e-capability-card:hover {
  transform: translateY(-5px) !important;
  box-shadow:
    0 14px 44px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.74) !important;
}

/* ── Stats band ── */
body.company-site .e-stats-section {
  background:
    rgba(255,255,255,0.44),
    linear-gradient(90deg, rgba(6,71,113,0.04) 0%, rgba(6,120,190,0.03) 100%) !important;
  backdrop-filter:         blur(12px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(170%) !important;
  border-top:    1px solid rgba(255,255,255,0.56) !important;
  border-bottom: 1px solid rgba(255,255,255,0.56) !important;
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.62),
    inset 0 -1px 0 rgba(255,255,255,0.42) !important;
}

/* ── Dark CTA section ── */
body.company-site .e-cta-dark {
  background: rgba(3,13,30,0.90) !important;
  backdrop-filter:         blur(28px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(150%) !important;
  border-top:    1px solid rgba(255,255,255,0.10) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  position: relative !important;
  overflow: hidden  !important;
}
body.company-site .e-cta-dark::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.28) 25%,
    rgba(255,255,255,0.52) 50%,
    rgba(255,255,255,0.28) 75%,
    transparent 100%
  );
  pointer-events: none;
}

/* ── Feature items ── */
body.company-site .e-feature-item {
  background: rgba(255,255,255,0.58) !important;
  backdrop-filter:         blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border:          1px solid rgba(255,255,255,0.48) !important;
  border-top-color: rgba(255,255,255,0.72)          !important;
  border-radius:   var(--e-r-md) !important;
  box-shadow:
    0 4px 18px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.62) !important;
  transition:
    transform  var(--e-dur-base) var(--e-ease-out),
    box-shadow var(--e-dur-base) var(--e-ease-out) !important;
}
body.company-site .e-feature-item:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 14px 36px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.68) !important;
}

/* ── Blog cards ── */
body.company-site .e-blog-card {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter:         blur(12px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(155%) !important;
  border:          1px solid rgba(255,255,255,0.52) !important;
  border-top-color: rgba(255,255,255,0.80)          !important;
  box-shadow:
    0 6px 26px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.68) !important;
  transition:
    transform  var(--e-dur-base) var(--e-ease-out),
    box-shadow var(--e-dur-base) var(--e-ease-out) !important;
}
body.company-site .e-blog-card:hover {
  transform: translateY(-6px) !important;
  box-shadow:
    0 18px 52px rgba(0,0,0,0.09),
    inset 0 1px 0 rgba(255,255,255,0.74) !important;
}

/* ── Testimonial cards ── */
body.company-site .e-testimonial-card {
  background: rgba(255,255,255,0.68) !important;
  backdrop-filter:         blur(12px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(155%) !important;
  border:          1px solid rgba(255,255,255,0.52) !important;
  border-top-color: rgba(255,255,255,0.78)          !important;
  box-shadow:
    0 6px 24px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.62) !important;
}

/* ── Hero visual cards ── */
body.company-site .e-hero-card {
  background: rgba(255,255,255,0.60) !important;
  backdrop-filter:         blur(18px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%) !important;
  border:          1px solid rgba(255,255,255,0.48) !important;
  border-top-color: rgba(255,255,255,0.76)          !important;
  box-shadow:
    0 10px 38px rgba(0,0,0,0.08),
    inset 0 1.5px 0 rgba(255,255,255,0.68) !important;
}

/* ── Portfolio / case-study thumbnail cards ── */
body.company-site .e-portfolio-card,
body.company-site .e-case-section {
  background: rgba(255,255,255,0.68) !important;
  backdrop-filter:         blur(10px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
  border:          1px solid rgba(255,255,255,0.50) !important;
  border-top-color: rgba(255,255,255,0.76)          !important;
  box-shadow:
    0 6px 24px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.64) !important;
  transition: transform var(--e-dur-base) var(--e-ease-out) !important;
}
body.company-site .e-portfolio-card:hover {
  transform: translateY(-5px) !important;
}

/* ── Contact info cards ── */
body.company-site .e-contact-info-card {
  background: rgba(255,255,255,0.66) !important;
  backdrop-filter:         blur(10px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
  border:          1px solid rgba(255,255,255,0.52) !important;
  border-top-color: rgba(255,255,255,0.78)          !important;
  box-shadow:
    0 6px 22px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.64) !important;
}
body.company-site .e-contact-info-card:hover {
  box-shadow:
    0 14px 40px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.70) !important;
}

/* ── Marquee band — subtle tint ── */
body.company-site .e-marquee-section {
  background: rgba(255,255,255,0.38) !important;
  backdrop-filter:         blur(8px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(160%) !important;
  border-top:    1px solid rgba(255,255,255,0.48) !important;
  border-bottom: 1px solid rgba(255,255,255,0.48) !important;
}

/* ── WhatsApp float — glass tint ── */
.e-whatsapp-float {
  backdrop-filter:         blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ── Page/section nav tabs if any ── */
body.company-site .nav-pills .nav-link,
body.company-site .nav-tabs  .nav-link {
  backdrop-filter:         blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
body.company-site .nav-pills .nav-link.active,
body.company-site .nav-tabs  .nav-link.active {
  background: rgba(6,71,113,0.90) !important;
  box-shadow: 0 4px 16px rgba(6,71,113,0.30) !important;
}


/* ─────────────────────────────────────────────────────
   5. RESPONSIVE ADJUSTMENTS
───────────────────────────────────────────────────── */

@media (max-width: 1200px) {
  body.company-site #header {
    max-width: 100% !important;
  }
}

@media (max-width: 767.98px) {
  body.company-site #header {
    width:         calc(100% - 24px) !important;
    border-radius: 14px              !important;
    top:           8px               !important;
  }
  body.company-site #header.header-scrolled {
    width:         100%              !important;
    border-radius: 0 0 12px 12px    !important;
    top:           0                 !important;
  }
  body.company-site #footer.company-footer {
    margin:        0 12px 16px !important;
    border-radius: 20px        !important;
  }
  body.company-site #footer.company-footer.footer-at-end {
    margin:        0 !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 480px) {
  body.company-site #header {
    width:         calc(100% - 16px) !important;
    border-radius: 12px              !important;
    top:           6px               !important;
  }
  body.company-site #footer.company-footer {
    margin:        0 8px 12px !important;
    border-radius: 16px       !important;
  }
}