/* Brand Color Palette & Custom Styles */
:root {
  --brand-blue: #003399;
  --brand-dark: #0F172A;
  --brand-cyan: #00A3E0;
  --brand-hover: #002776;
  --brand-light: #F8FAFC;
}

/* Global Mobile Responsiveness & Overflow Prevention */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
  width: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

*, *::before, *::after {
  box-sizing: border-box;
}

img, svg, video, canvas, audio, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

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

::-webkit-scrollbar-thumb:hover {
  background: #003399;
}

/* Hide scrollbar for clean horizontal tab sliders on mobile */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Professional Corporate Hero Background */
.hero-pro-bg {
  background-color: #070D1D;
  background-image: 
    radial-gradient(circle at 80% 20%, rgba(0, 163, 224, 0.15) 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(0, 51, 153, 0.25) 0%, transparent 50%),
    linear-gradient(180deg, #070D1D 0%, #0F172A 100%);
}

/* Premium Footer Background */
.footer-premium-bg {
  background-color: #070A12;
}

/* Cards Hover */
.brand-card-glow {
  transition: all 0.25s ease-in-out;
}

.brand-card-glow:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.08);
}

/* Product Image Container Sizing */
.product-img-container img {
  transition: transform 0.3s ease-in-out;
}

.product-img-container:hover img {
  transform: scale(1.05);
}

/* Line Clamp helper */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Mega Menu Dropdown Hover logic (Desktop) */
@media (min-width: 1024px) {
  .nav-dropdown-group:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease-in-out;
  }
}

/* Remove default browser focus outlines and tap highlights from navbar & dropdown items */
nav button,
nav a,
.nav-dropdown-group button,
.nav-dropdown-group a,
.nav-dropdown-menu button,
.nav-dropdown-menu a,
button,
a {
  -webkit-tap-highlight-color: transparent;
}

/* Reviews Smooth Left-to-Right Moving Marquee */
@keyframes marqueeLeftToRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}

.reviews-marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeLeftToRight 35s linear infinite;
  will-change: transform;
}

.reviews-marquee-track:hover {
  animation-play-state: paused;
}

/* Mobile Drawer Overlay Transitions */
.mobile-nav-backdrop {
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.mobile-nav-panel {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Touch targets optimization */
@media (max-width: 640px) {
  button, a.btn, input[type="button"], input[type="submit"] {
    min-height: 42px;
  }
}