/* ── Animations ── */
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── Page progress bar ── */
#page-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #5709a5, #9b4dff);
  box-shadow: 0 0 8px rgba(155,77,255,0.8);
  z-index: 999999;
  transition: width 0.1s linear;
}

/* ── Back to top button ── */
#gotop { overflow: hidden; background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; }
#gotop::after { display: none !important; }
#gotop span { color: #d4d4d4 !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #090a0c; }
::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #ffffff; }

/* ── Border animation - silver ── */
.border_animation:after { background: conic-gradient(#d4d4d4 var(--fill), transparent var(--fill)) !important; }
.border_animation:hover { color: #d4d4d4 !important; --fill: 100%; }
.border_animation_s:after { background: conic-gradient(#d4d4d4 var(--fill), transparent var(--fill)) !important; }
.border_animation_s:hover { color: #d4d4d4 !important; --fill: 100%; }

/* ── Glassmorphism cards ── */
.detour_card, .transparent_box, .home_cta_box, .d-box_border, .small_box {
  background: transparent !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(212,212,212,0.15) !important;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease !important;
}
.detour_card:hover, .transparent_box:hover, .home_cta_box:hover, .d-box_border:hover, .small_box:hover {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(212,212,212,0.35) !important;
  transform: translateY(-3px) !important;
}

/* ── Exclude circular inspection card ── */
.d-box-radious, .d-box-radious .d-box_border {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  transform: none !important;
}

/* ── Fix inner page sticky nav ── */
.inner_page_nav .transparent_box,
.inner_page_nav .transparent_box:hover,
.page_sidebar .transparent_box,
.page_sidebar .transparent_box:hover {
  transform: none !important;
  position: relative !important;
}

/* ── Blog card hover lift ── */
.magazine_blog_item {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.magazine_blog_item:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4) !important;
}

/* ── Mobile fixes ── */
@media (max-width: 768px) {
  body { padding-bottom: 70px !important; }
  .cookie_banner { bottom: 70px !important; }
  .whatsapp_bubble { bottom: 80px !important; }
}

/* Fix tel input dropdown */
.iti__country-name, .iti__dial-code, .iti--separate-dial-code .iti__selected-dial-code {
  color: #333 !important;
}

/* Hero heading animation fix */

/* Inner page cards */
.card_box, .value_box {
  background: transparent !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(212,212,212,0.15) !important;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease !important;
}
.card_box:hover, .value_box:hover {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(212,212,212,0.35) !important;
  transform: translateY(-3px) !important;
}

/* Value cards - centered text + rounded corners */
.value_box {
  text-align: center !important;
  border-radius: 20px !important;
  padding: 32px 24px !important;
}
.value_box img, .value_box svg, .value_box i {
  margin: 0 auto 16px !important;
  display: block !important;
}

/* ── Responsive header & hero bento fix ────────────────────────── */

/* Never hard-lock header height — let it grow with content */
header {
  height: auto !important;
}

header.active {
  height: auto !important;
  min-height: 80px !important;
}

/* ── Desktop nav: tighten at mid-widths so items stay one row ── */
@media (max-width: 1400px) and (min-width: 992px) {
  #menu ul li a {
    padding: 10px 4px !important;
    font-size: 13px !important;
  }
  header .glow_btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  .banner_caption {
    padding-top: 160px !important;
  }
}

@media (max-width: 1200px) and (min-width: 992px) {
  #menu ul li a {
    padding: 10px 3px !important;
    font-size: 12px !important;
  }
  header .glow_btn {
    padding: 5px 8px !important;
    font-size: 11px !important;
  }
  .banner_caption {
    padding-top: 180px !important;
  }
}

@media (max-width: 1060px) and (min-width: 992px) {
  #menu ul li a {
    padding: 10px 2px !important;
    font-size: 11.5px !important;
  }
  header .glow_btn {
    padding: 4px 7px !important;
    font-size: 10.5px !important;
  }
  .banner_caption {
    padding-top: 200px !important;
  }
}

/* ── Mobile / tablet (< 992px uses mobile_header_bar) ── */
@media (max-width: 991px) {
  header.active {
    min-height: 85px !important;
  }
  .banner_caption {
    padding-top: 110px !important;
  }
}

@media (max-width: 767px) {
  .banner_caption {
    padding-top: 95px !important;
  }
}

@media (max-width: 480px) {
  .banner_caption {
    padding-top: 85px !important;
  }
}

/* ── Banner box icon sizing fix ── */
.banner_box .normal_img img,
.banner_box .onhover_img img {
  width: auto !important;
  height: 75px !important;
  max-width: none !important;
}

/* ── CLS fix — reserve space for banner_box_wrapper ── */
.banner_box_wrapper {
  min-height: 130px;
  contain: layout;
}


/* ── Inner page hero — JS sets padding-top dynamically via inline style ── */
/* Fallback values only — no !important so JS inline style wins */
.inner_page_hero { padding-top: 160px; padding-bottom: 40px; }