/* ==========================================================================
   GUSANA PAINT - INDUSTRIAL COATING & ARCHITECTURAL PAINTS
   Custom Stylesheet & Micro-Interactions
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

:root {
  --color-primary: #0f172a;       /* Slate 900 */
  --color-primary-light: #1e293b; /* Slate 800 */
  --color-brand: #d02327;         /* Gusana Logo Red */
  --color-brand-dark: #b91c1c;    /* Red 700 */
  --color-brand-accent: #ee8522;  /* Gusana Logo Orange */
  --color-brand-yellow: #fad536;  /* Gusana Logo Yellow */
  --color-whatsapp: #25d366;      /* Official WhatsApp Green */
  --color-whatsapp-dark: #1ea952;
  --color-surface: #f8fafc;       /* Slate 50 */
  --color-border: #e2e8f0;        /* Slate 200 */
}

/* Base Typography */
html {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  scroll-behavior: smooth;
}

/* Accessible focus visible ring */
:focus-visible {
  outline: 2px solid #d02327;
  outline-offset: 2px;
}

/* Custom Industrial Grid Pattern Background */
.bg-grid-industrial {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(226, 232, 240, 0.6) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(226, 232, 240, 0.6) 1px, transparent 1px);
}

.bg-grid-dark {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

/* Micro-animations */
@keyframes pulseSubtle {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.animate-pulse-subtle {
  animation: pulseSubtle 3s infinite ease-in-out;
}

/* Card hover elevation */
.card-hover-industrial {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.card-hover-industrial:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  border-color: #cbd5e1;
}

/* Custom Scrollbar for Spec Tables and Menus */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Lightbox Modal */
.lightbox-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-in-out;
}

.lightbox-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Tab active styles */
.tab-btn.active {
  color: #d02327;
  border-bottom-color: #d02327;
  font-weight: 700;
}

/* Toast Notification */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.toast-item {
  pointer-events: auto;
  transform: translateY(100%);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-item.show {
  transform: translateY(0);
  opacity: 1;
}

/* Print Stylesheet for Technical Data Sheets */
@media print {
  header, footer, #floating-whatsapp, .no-print {
    display: none !important;
  }
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  .print-break-inside-avoid {
    break-inside: avoid;
  }
}

/* ==========================================================================
   Image Lazy Loading & High-Performance Rendering
   ========================================================================== */
img[loading="lazy"] {
  content-visibility: auto;
}

/* ==========================================================================
   Hero Slider — Full Viewport (1 Layar Penuh) & Centered Layout
   ========================================================================== */
.banner-classic-active,
.banner-classic-active .swiper-wrapper,
.banner-classic-active .swiper-slide {
  height: calc(100vh - 75px) !important;
  height: calc(100dvh - 75px) !important;
  min-height: 580px !important;
  width: 100% !important;
}

@media (max-width: 991.98px) {
  .banner-classic-active,
  .banner-classic-active .swiper-wrapper,
  .banner-classic-active .swiper-slide {
    height: calc(100vh - 75px) !important;
    height: calc(100dvh - 75px) !important;
    min-height: 520px !important;
  }
}

@media (max-width: 575.98px) {
  .banner-classic-active,
  .banner-classic-active .swiper-wrapper,
  .banner-classic-active .swiper-slide {
    height: calc(100vh - 75px) !important;
    height: calc(100dvh - 75px) !important;
    min-height: 480px !important;
  }
}

.banner-section-classic {
  height: 100% !important;
  min-height: 100% !important;
  margin-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  position: relative !important;
  width: 100% !important;
}

.banner-section-classic .auto-container {
  width: 100% !important;
  max-width: 1200px !important;
}

.banner-section-classic .banner-content-wrap {
  margin: 0 !important;
  text-align: left !important;
  max-width: 920px !important;
  padding: 0 15px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 2 !important;
}

.banner-section-classic .banner-content-wrap .banner-title {
  width: 100% !important;
  text-align: left !important;
}

.banner-section-classic .banner-content-wrap .banner-title h1 {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: clamp(32px, 4.8vw, 62px) !important;
  line-height: 1.18 !important;
  text-align: left !important;
  margin: 0 !important;
  letter-spacing: -0.5px !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45) !important;
}

.banner-section-classic .banner-content-wrap .banner-desc {
  width: 100% !important;
  text-align: left !important;
}

.banner-section-classic .banner-content-wrap .banner-desc p {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: clamp(15px, 1.5vw, 19px) !important;
  line-height: 1.65 !important;
  text-align: left !important;
  margin: 0 !important;
  max-width: 780px !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35) !important;
}

.banner-section-classic .banner-content-wrap .banner-info-box {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin: 32px 0 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Primary Banner Button */
.banner-section-classic .banner-content-wrap .banner-info-box .banner-btn a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--title-font, sans-serif) !important;
  color: #ffffff !important;
  background-color: #d02327 !important;
  border: 2px solid #d02327 !important;
  padding: 15px 36px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  border-radius: 45px !important;
  position: relative !important;
  z-index: 1 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 18px rgba(208, 35, 39, 0.4) !important;
  transition: all 300ms ease !important;
}

.banner-section-classic .banner-content-wrap .banner-info-box .banner-btn a::before,
.banner-section-classic .banner-content-wrap .banner-info-box .banner-btn a::after,
.banner-section-classic .banner-content-wrap .banner-info-box .banner-btn a span {
  display: none !important;
}

.banner-section-classic .banner-content-wrap .banner-info-box .banner-btn a:hover,
.banner-section-classic .banner-content-wrap .banner-info-box .banner-btn a:focus,
.banner-section-classic .banner-content-wrap .banner-info-box .banner-btn a:active {
  background-color: #d02327 !important;
  border-color: #d02327 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(208, 35, 39, 0.45) !important;
}

.banner-section-classic .banner-content-wrap .banner-info-box .banner-btn a i {
  margin-left: 10px !important;
  font-size: 15px !important;
  color: #ffffff !important;
  transition: transform 300ms ease !important;
}

.banner-section-classic .banner-content-wrap .banner-info-box .banner-btn a:hover i {
  color: #ffffff !important;
  transform: translateX(4px) !important;
}

/* Secondary Banner Button */
.banner-section-classic .banner-content-wrap .banner-btn-secondary a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--title-font, sans-serif) !important;
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 2px solid rgba(255, 255, 255, 0.75) !important;
  padding: 15px 36px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  border-radius: 45px !important;
  position: relative !important;
  z-index: 1 !important;
  text-decoration: none !important;
  transition: all 300ms ease !important;
}

.banner-section-classic .banner-content-wrap .banner-btn-secondary a:hover {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #ffffff !important;
  transform: translateY(-2px) !important;
}

.banner-section-classic .banner-content-wrap .banner-btn-secondary a i {
  margin-left: 10px !important;
  font-size: 15px !important;
  transition: transform 300ms ease !important;
}

.banner-section-classic .banner-content-wrap .banner-btn-secondary a:hover i {
  transform: translateX(4px) !important;
}

/* Hide logistics airplane shape */
.banner-section-classic .banner-shape1 {
  display: none !important;
}

/* Hide slider navigation arrows to keep layout clean and avoid colliding with text */
.loginet-banner-arrow-box-three,
.loginet-banner-arrow-box,
.banner-classic-active .slider-prev,
.banner-classic-active .slider-next {
  display: none !important;
}



/* ==========================================================================
   Navbar — Unified with sticky header (solid white background & dark text)
   ========================================================================== */
.main-header,
.main-header.inner_page__header,
.main-header.inner_page__header.scrolled,
.main-header .header-lower {
  background: #ffffff !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 999 !important;
}

/* Sticky header keeps its original fixed positioning but gets matching style */
.sticky-header {
  background: #ffffff !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.main-header .header-lower .auto-container,
.sticky-header .auto-container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}


/* ==========================================================================
   About Page V2 & General Description Contrast & Legibility Overrides
   ========================================================================== */
.about-section-classic .section-desc,
.about-section-classic .section-desc p,
.about-section-classic .section-desc div,
.about-section-classic .section-desc span,
.about-section-classic .section-desc li {
  color: #334155 !important; /* Rich slate-700 instead of pale #A8BFC4 */
  font-size: 15.5px !important;
  line-height: 1.8 !important;
  font-weight: 400;
}

.about-section-classic .sec-title .sub-title {
  color: #d02327 !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
}

.work-process-section-home2-classic .working-process-box .process-content p {
  color: #334155 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  font-weight: 400;
  width: 90% !important;
  margin: 0 auto;
}

.work-process-section-home2-classic .working-process-box .process-content h2 {
  font-size: 24px !important;
  font-weight: 700;
  margin: 18px 0 10px;
}



/* ==========================================================================
   Multi-Language Switcher (Google Translate JS)
   ========================================================================== */
.lang-switch-box {
  display: inline-flex;
  align-items: center;
}

.lang-switcher {
  display: inline-flex;
  align-items: center;
  background: #f1f3f5;
  border: 1px solid #e2e8f0;
  padding: 3px 4px;
  border-radius: 9999px;
  transition: all 0.25s ease;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.lang-switcher .lang-btn {
  background: transparent;
  border: none;
  padding: 4px 13px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 800;
  color: #334155;
  cursor: pointer;
  line-height: 1.2;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.5px;
  outline: none;
  box-shadow: none;
}

.lang-switcher .lang-btn:hover {
  color: #0f172a;
}

.lang-switcher .lang-btn.active {
  background: #d02327 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(208, 35, 39, 0.4) !important;
}

.lang-switcher .lang-divider {
  color: #94a3b8;
  font-size: 11px;
  user-select: none;
  margin: 0 2px;
  line-height: 1;
  display: inline-block;
}



/* Mobile drawer lang switcher styling */
.mobile-lang-switcher {
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-lang-switcher .mobile-lang-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 500;
}

.mobile-lang-switcher .lang-switcher {
  background: #f1f3f5;
  border-color: #e2e8f0;
}

.mobile-lang-switcher .lang-btn {
  color: #334155;
}

.mobile-lang-switcher .lang-btn.active {
  background: #d02327 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(208, 35, 39, 0.4) !important;
}

/* ==========================================================================
   Header Navbar (Standard & Sticky) — Unified Sticky Menu Styling
   ========================================================================== */
.main-header.inner_page__header,
.main-header.inner_page__header.scrolled,
.main-header .header-lower,
.sticky-header {
  background: #ffffff !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  padding: 0 !important;
  transition: all 0.3s ease !important;
}

.main-header .header-lower .logo-box,
.sticky-header .logo {
  padding: 0 !important;
  min-width: auto !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.main-header .logo img,
.main-header .header-lower .logo-box .logo img,
.sticky-header .logo img {
  max-height: 52px !important;
  max-width: 200px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  transition: max-height 0.2s ease, max-width 0.2s ease !important;
}

.main-header .main-box .nav-outer,
.sticky-header .nav-outer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  flex: 1 !important;
  width: auto !important;
}

.main-header .header-lower .outer-box,
.sticky-header .outer-box {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
}

.main-header .header-lower .outer-box .theme-btn.btn-style-one,
.sticky-header .outer-box .theme-btn.btn-style-one {
  padding: 6px 18px !important;
  font-size: 13.5px !important;
  height: 38px !important;
  line-height: 24px !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
  background-color: #d02327 !important;
  color: #ffffff !important;
  border-color: #d02327 !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
}

.main-header .header-lower .outer-box .theme-btn.btn-style-one:hover,
.sticky-header .outer-box .theme-btn.btn-style-one:hover {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   Desktop Navigation (Screens >= 992px)
   ========================================================================== */
@media (min-width: 992px) {
  .main-header .header-lower .main-box,
  .sticky-header .inner-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 75px !important;
    height: 75px !important;
    padding: 0 30px !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
  }

  .main-header .main-box .nav-outer,
  .sticky-header .nav-outer {
    gap: 24px !important;
  }

  .main-header .main-menu,
  .sticky-header .main-menu {
    display: flex !important;
    align-items: center !important;
  }

  .main-header .main-menu .navigation,
  .sticky-header .main-menu .navigation {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .main-header .main-menu .navigation > li,
  .sticky-header .main-menu .navigation > li {
    margin: 0 !important;
    padding: 0 12px !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
  }

  .main-header .main-menu .navigation > li > a,
  .sticky-header .main-menu .navigation > li > a {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    white-space: nowrap !important;
    padding: 0 !important;
    transition: color 0.2s ease !important;
  }

  .main-header .main-menu .navigation > li.current > a,
  .main-header .main-menu .navigation > li:hover > a,
  .sticky-header .main-menu .navigation > li.current > a,
  .sticky-header .main-menu .navigation > li:hover > a {
    color: #d02327 !important;
  }

  .main-header .header-lower .outer-box,
  .sticky-header .outer-box {
    gap: 14px !important;
  }

  .main-header .header-lower .outer-box .menubars-text a,
  .sticky-header .outer-box .menubars-text a {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
  }

  .main-header .header-lower .outer-box .menubars,
  .sticky-header .outer-box .menubars {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 32px !important;
    height: 24px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
  }

  .main-header .header-lower .outer-box .menubars span,
  .sticky-header .outer-box .menubars span {
    display: block !important;
    width: 28px !important;
    height: 2px !important;
    background-color: #1e293b !important;
    transition: all 300ms ease !important;
    border-radius: 2px !important;
  }

  .main-header .header-lower .outer-box .menubars span:nth-child(1),
  .sticky-header .outer-box .menubars span:nth-child(1) { width: 20px !important; }
  .main-header .header-lower .outer-box .menubars span:nth-child(2),
  .sticky-header .outer-box .menubars span:nth-child(2) { width: 28px !important; }
  .main-header .header-lower .outer-box .menubars span:nth-child(3),
  .sticky-header .outer-box .menubars span:nth-child(3) { width: 20px !important; }

  /* Desktop hides mobile nav toggler */
  .mobile-nav-toggler {
    display: none !important;
  }
}

/* ==========================================================================
   Mobile & Tablet Navigation (Screens < 992px)
   ========================================================================== */
@media (max-width: 991.98px) {
  .main-header .header-lower .main-box,
  .sticky-header .inner-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 64px !important;
    height: 64px !important;
    padding: 0 16px !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
  }

  .main-header .logo img,
  .main-header .header-lower .logo-box .logo img,
  .sticky-header .logo img {
    max-height: 40px !important;
    max-width: 160px !important;
  }

  /* Hide desktop menu links on mobile to prevent overflow */
  .main-header .main-menu,
  .sticky-header .main-menu,
  .main-header .main-menu .navigation,
  .sticky-header .main-menu .navigation {
    display: none !important;
  }

  /* Hide desktop menubars and text on mobile */
  .main-header .header-lower .outer-box .menubars,
  .sticky-header .outer-box .menubars,
  .menubars-text {
    display: none !important;
  }

  .main-header .main-box .nav-outer,
  .sticky-header .nav-outer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex: auto !important;
  }

  .main-header .header-lower .outer-box,
  .sticky-header .outer-box {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .lang-switch-box {
    margin-right: 0 !important;
  }

  .lang-switcher {
    padding: 2px 3px !important;
  }

  .lang-switcher .lang-btn {
    padding: 3px 8px !important;
    font-size: 11px !important;
  }

  /* Sleek modern mobile nav toggler (hamburger) */
  .mobile-nav-toggler {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    font-size: 17px !important;
    cursor: pointer !important;
    margin: 0 !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
  }

  .mobile-nav-toggler:hover,
  .mobile-nav-toggler:active {
    background: #fee2e2 !important;
    color: #d02327 !important;
    border-color: #fca5a5 !important;
  }
}

/* ==========================================================================
   Extra Small Mobile Screens (Screens < 480px)
   ========================================================================== */
@media (max-width: 479.98px) {
  .main-header .header-lower .main-box,
  .sticky-header .inner-container {
    min-height: 58px !important;
    height: 58px !important;
    padding: 0 12px !important;
  }

  .main-header .logo img,
  .main-header .header-lower .logo-box .logo img,
  .sticky-header .logo img {
    max-height: 35px !important;
    max-width: 130px !important;
  }

  .mobile-nav-toggler {
    width: 35px !important;
    height: 35px !important;
    font-size: 15px !important;
  }
}

/* ==========================================================================
   Mobile Menu Drawer Overlay & Styling (.mobile-menu)
   ========================================================================== */
.mobile-menu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: 999999 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.mobile-menu-visible .mobile-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.mobile-menu .menu-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease !important;
  z-index: 1 !important;
}

.mobile-menu-visible .mobile-menu .menu-backdrop {
  opacity: 1 !important;
  visibility: visible !important;
}

.mobile-menu .menu-box {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 320px !important;
  max-width: 86vw !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  background: #0f172a !important; /* Premium Slate 900 Dark Theme */
  color: #ffffff !important;
  padding: 0 !important;
  z-index: 5 !important;
  transform: translateX(100%) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: -8px 0 25px rgba(0, 0, 0, 0.4) !important;
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.mobile-menu-visible .mobile-menu .menu-box {
  transform: translateX(0%) !important;
}

.mobile-menu .upper-box {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

.mobile-menu .nav-logo {
  display: flex !important;
  align-items: center !important;
}

.mobile-menu .nav-logo img {
  max-height: 42px !important;
  max-width: 160px !important;
  width: auto !important;
  object-fit: contain !important;
}

.mobile-menu .close-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  top: 0 !important;
  transform: none !important;
}

.mobile-menu .close-btn:hover {
  background: #d02327 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.mobile-menu .navigation {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  border: none !important;
  list-style: none !important;
}

.mobile-menu .navigation li {
  display: block !important;
  width: 100% !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mobile-menu .navigation li > a {
  display: flex !important;
  align-items: center !important;
  padding: 13px 22px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #f1f5f9 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.mobile-menu .navigation li:hover > a,
.mobile-menu .navigation li.current > a {
  background: rgba(208, 35, 39, 0.12) !important;
  color: #ef4444 !important;
  padding-left: 26px !important;
}

.mobile-menu .contact-list-one {
  padding: 16px 20px !important;
  margin: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  list-style: none !important;
}

.mobile-menu .contact-list-one li {
  margin-bottom: 14px !important;
}

.mobile-menu .contact-info-box {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.mobile-menu .contact-info-box .title {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #94a3b8 !important;
  font-weight: 700 !important;
}

.mobile-menu .contact-info-box a {
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.mobile-menu .contact-info-box a:hover {
  color: #d02327 !important;
}

.mobile-menu .social-links {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 20px 24px !important;
  margin: 0 !important;
  list-style: none !important;
}

.mobile-menu .social-links a {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.mobile-menu .social-links a:hover {
  background: #d02327 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   Google Translate Widget & Top Banner Total Suppression
   ========================================================================== */
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-ORHb-OEVmcd.skiptranslate,
iframe.VIpgJd-ZVi9od-ORHb-OEVmcd,
iframe.skiptranslate,
iframe[id*="container"],
iframe[id^=":"],
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0px !important;
  width: 0px !important;
  max-height: 0px !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  pointer-events: none !important;
  border: none !important;
  z-index: -9999 !important;
}

html,
body {
  top: 0px !important;
  position: static !important;
  margin-top: 0px !important;
}

body > .skiptranslate {
  display: none !important;
}

.goog-te-gadget {
  display: none !important;
}

.goog-text-highlight {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   Certificate Images Protection (Anti-Download, Anti-Copy, Anti-Screenshot)
   ========================================================================== */
.secure-cert-container {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  position: relative !important;
}

.secure-cert-container img,
img.secure-cert-img {
  -webkit-user-drag: none !important;
  user-drag: none !important;
  pointer-events: none !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  transition: filter 0.2s ease, opacity 0.2s ease !important;
}

.secure-cert-shield {
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  background: transparent !important;
  cursor: default !important;
}

/* Screen capture & snipping tool defense (window blur or visibility change) */
body.cert-screen-protected .secure-cert-img,
body.cert-screen-protected .certifications-section img,
body.cert-screen-protected .footer-certificates-wrap img {
  filter: blur(25px) grayscale(100%) !important;
  opacity: 0.05 !important;
  transition: none !important;
}

/* Print and Save-as-PDF protection */
@media print {
  .secure-cert-img,
  .secure-cert-container,
  .certifications-section .service-thumb,
  .footer-certificates-wrap {
    display: none !important;
    visibility: hidden !important;
  }
}

/* ========================================================
   V2 Classic Header Logo & Drawer Refinements
   ======================================================== */
.main-header.inner_page__header .header-lower .logo-box {
  padding: 0 !important;
  min-width: auto !important;
}

.main-header.inner_page__header .logo img,
.main-header.inner_page__header .header-lower .logo-box .logo img {
  max-height: 52px !important;
  max-width: 200px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.mobile-menu .nav-logo img {
  max-height: 52px !important;
  max-width: 200px !important;
  width: auto !important;
  object-fit: contain !important;
}

.main-footer-home2 .logo img {
  max-height: 68px !important;
  max-width: 240px !important;
  width: auto !important;
  object-fit: contain !important;
}


/* ==========================================================================
   About Classic Stats Cards (4 Columns)
   ========================================================================== */
.about-section-classic .single-about-box {
  padding: 32px 24px 28px !important;
}

.about-section-classic .single-about-box .about-title h1 {
  font-size: 24px !important;
  line-height: 1.3 !important;
}

/* ==========================================================================
   Product V2 Classic Categories & Responsive Styling
   ========================================================================== */
.widget-category ul li a.active {
  background: var(--color-brand, #d02327) !important;
  color: #ffffff !important;
}

.widget-category ul li a.active::before {
  width: 100% !important;
  left: 0 !important;
  background: var(--color-brand, #d02327) !important;
}

.widget-category ul li a.active img {
  filter: brightness(0) invert(1) !important;
}

.widget-category ul li a.active i {
  opacity: 1 !important;
  color: #ffffff !important;
}

@media (max-width: 991.98px) {
  .service-section-home2-classic.blog-list-area .widget-sidber {
    margin-bottom: 24px;
    padding: 24px 20px;
  }
}