:root {
  --primary-color: #0d47a1; /* Deep Blue */
  --secondary-color: #ff6f00; /* Vibrant Orange */
  --primary-gradient: linear-gradient(135deg, #0d47a1, #6a1b9a);
  --secondary-gradient: linear-gradient(135deg, #ff6f00, #ffc107);
  --text-dark: #212121; /* Material very dark grey */
  --text-light: #ffffff;
  --bg-light: #fafafa; /* Material light grey background */
  --bg-dark: #121212;
  --card-bg: #ffffff;
  --border-radius: 4px; /* Material standard border radius */
  --radius-md: 12px;    /* Modern card/section radius */
  --radius-lg: 20px;
  --radius-pill: 50px;
  --transition-speed: 0.3s;

  /* Modern dark banner background (used by .hero and .page-banner) */
  --banner-navy: #04122b;
  --banner-gradient: linear-gradient(115deg, rgba(4, 10, 26, 0.88) 15%, rgba(9, 30, 74, 0.72) 55%, rgba(74, 20, 100, 0.55) 100%);
  --banner-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1'%3E%3Cpath d='M0 70H140M70 0V140'/%3E%3Cpath d='M0 25H45V0'/%3E%3Cpath d='M140 115H95V140'/%3E%3Cpath d='M25 140V105H0'/%3E%3Cpath d='M115 0V35H140'/%3E%3C/g%3E%3Cg fill='rgba(255,255,255,0.16)'%3E%3Ccircle cx='70' cy='70' r='3'/%3E%3Ccircle cx='45' cy='0' r='2'/%3E%3Ccircle cx='95' cy='140' r='2'/%3E%3Ccircle cx='0' cy='25' r='2'/%3E%3Ccircle cx='140' cy='115' r='2'/%3E%3C/g%3E%3C/svg%3E");

  /* Material Elevations */
  --elevation-1: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
  --elevation-2: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
  --elevation-3: 0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12);
  --elevation-8: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
  --elevation-soft: 0px 10px 30px rgba(13, 71, 161, 0.12);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', 'Roboto', sans-serif;
  line-height: 1.6;
  color: var(--text-dark);
  background-color: var(--bg-light);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.2;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* Utilities */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  color: var(--primary-color);
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: var(--secondary-color);
  border-radius: 2px;
}

.section-title-left {
  text-align: left;
}

.section-title-left::after {
  left: 0;
  transform: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 30px;
  background: var(--secondary-gradient);
  color: var(--text-light);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
  border: none;
  cursor: pointer;
  box-shadow: var(--elevation-2);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--elevation-8);
}

.btn-primary {
  background: var(--primary-gradient);
}

.btn-primary:hover {
  background-color: #002171;
}

.btn-outline {
  background-color: transparent;
  color: var(--primary-color);
  border: 1px solid rgba(13, 71, 161, 0.5);
  box-shadow: none;
}

.btn-outline:hover {
  background-color: rgba(13, 71, 161, 0.04);
  box-shadow: none;
}

/* Material Ripple Effect */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 0.6s linear;
  background-color: rgba(255, 255, 255, 0.7);
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Header: single-row grid navbar (taglines | logo | contact info + menu) */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: all var(--transition-speed) ease;
}

.header-taglines-wrap {
  /* Pinned to column 1 explicitly (rather than relying on DOM-order
     auto-placement) so that hiding it via display:none at narrower widths
     doesn't cause the logo/header-right to slide into its column -- the
     logo must stay put in column 2 for true centering. */
  grid-column: 1;
  position: relative;
  z-index: -1;
  display: flex;
  align-items: center;
  margin: -15px -30px;
  height: 150px;
  max-height: 150px;
  overflow: hidden;
  transition: max-height var(--transition-speed) ease, height var(--transition-speed) ease, opacity var(--transition-speed) ease;
}

.header-taglines-img {
  display: block;
  /* margin: 0; */
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.header-right {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.header-top-contact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--primary-gradient);
  color: var(--text-light);
  padding: 6px 16px;
  border-radius: var(--radius-md);
  max-height: 60px;
  overflow: hidden;
  transition: max-height var(--transition-speed) ease, padding var(--transition-speed) ease, opacity var(--transition-speed) ease;
}

.top-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.top-bar-row a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-light);
  font-weight: 500;
  font-size: 0.78rem;
  transition: opacity var(--transition-speed) ease;
  white-space: nowrap;
}

.top-bar-row a svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.85;
}

.top-bar-row a:hover {
  opacity: 0.8;
}

.header.scrolled .header-top-contact {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

/* Brand Partner Strip (static section, sits right below the page banner/hero) */
.brand-strip {
  background: linear-gradient(180deg, var(--bg-light), #ffffff);
  padding: 48px 0;
}

.brand-strip-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-dark);
  opacity: 0.5;
  margin-bottom: 16px;
}

.brand-strip-eyebrow::before,
.brand-strip-eyebrow::after {
  content: '';
  width: 32px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

.brand-strip-content {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 28px;
  flex-wrap: wrap;
}

.brand-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background-color: #ffffff;
  border: 1px solid rgba(13, 71, 161, 0.08);
  border-radius: var(--radius-md);
  padding: 16px 34px;
  box-shadow: var(--elevation-soft);
  transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

.brand-badge:hover {
  transform: translateY(-4px);
  box-shadow: var(--elevation-8);
  border-color: rgba(13, 71, 161, 0.2);
}

.brand-badge-logo {
  height: 24px;
  width: auto;
  display: block;
}

.brand-badge-caption {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 240px;
}

.brand-badge-check {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--primary-color);
}

.brand-badge span {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-dark);
  text-align: center;
  white-space: normal;
  line-height: 1.3;
}

/* Navigation */
.navbar {
  position: relative;
  background-color: var(--card-bg);
  box-shadow: var(--elevation-2);
  border-bottom: 1px solid rgba(13, 71, 161, 0.08);
  padding: 10px 0;
  transition: background-color var(--transition-speed) ease, padding var(--transition-speed) ease;
  backdrop-filter: blur(10px);
}

.navbar .container {
  /* Grid (not flex) so the logo column is genuinely centered: with two
     equal 1fr side tracks, the auto-sized logo column always lands in the
     true center regardless of how much content either side holds -- flex's
     space-between only centers it when both side items happen to be the
     same width, which taglines/header-right rarely are. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  max-width: none;
  padding: 5px 30px;
  width: 100%;
}

.logo {
  grid-column: 2;
  display: flex;
  align-items: center;
}

.logo img {
  height: 90px;
  /* The logo file itself is bounding-box-centered (measured ~10px/11px top/bottom
     padding), but its visual weight (bold wordmark up top, thin caption below)
     reads as sitting high within a truly centered row. Nudge it down a few px
     to compensate optically -- relative positioning so it doesn't affect the
     flex centering math for the taglines/logo/contact-and-nav row. */
  position: relative;
  top: 6px;
  transition: transform var(--transition-speed) ease, height var(--transition-speed) ease;
}

.logo img:hover {
  transform: scale(1.05);
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px 30px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--text-dark);
}

.text-gradient {
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.glass {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05) !important;
}

.glass-dark {
  background: rgba(13, 71, 161, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Animations */
@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes pulse-blob {
  0% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(1); opacity: 0.6; }
}

.typing-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  line-height: 1;
  vertical-align: middle;
  background-color: var(--secondary-color);
  margin-left: 4px;
  animation: blink 0.8s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.nav-links a {
  font-weight: 600;
  color: var(--text-dark);
  position: relative;
  transition: color var(--transition-speed) ease;
}

.nav-links a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -5px;
  left: 0;
  background-color: var(--secondary-color);
  transition: width var(--transition-speed) ease;
}

.nav-links a:hover,
.nav-links a.is-active {
  color: var(--primary-color);
}

.nav-links a:hover::after,
.nav-links a.is-active::after {
  width: 100%;
}

/* Dropdown Menu */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown > a {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dropdown > a span {
  font-size: 0.7rem;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--card-bg);
  min-width: 220px;
  box-shadow: var(--elevation-8);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  z-index: 1001;
  padding: 10px 0;
}

.dropdown-content a {
  color: var(--text-dark);
  padding: 10px 20px;
  display: block;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-content a::after {
  display: none;
}

.dropdown-content a:hover {
  background-color: var(--bg-light);
  color: var(--primary-color);
}

.dropdown:hover .dropdown-content {
  display: block;
  animation: fadeUp 0.3s ease forwards;
}

/* Submenu */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu-content {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background-color: #ffffff;
  min-width: 200px;
  box-shadow: var(--box-shadow-hover);
  border-radius: var(--border-radius);
  z-index: 1002;
  padding: 10px 0;
  border-top: 3px solid var(--secondary-color);
}

.dropdown-submenu:hover .dropdown-submenu-content {
  display: block;
}

.mobile-menu-btn {
  display: none;
  align-items: center;
  cursor: pointer;
  color: var(--primary-color);
}

.mobile-menu-btn svg {
  width: 26px;
  height: 26px;
}

/* Hero Section & Page Banner (shared dark, image-backed treatment) */
.hero,
.page-banner {
  position: relative;
  background-color: var(--banner-navy);
  color: var(--text-light);
  overflow: hidden;
}

.page-banner {
  background-image: var(--banner-gradient), var(--banner-pattern), var(--banner-photo, none);
  background-size: cover, 140px 140px, cover;
  background-position: center, center, center;
  background-repeat: no-repeat, repeat, no-repeat;
  min-height: 340px;
  display: flex;
  align-items: center;
  padding: 155px 0 60px;
}

.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 140px; /* Offset for the single-row grid header */
}

/* Hero Background Slideshow (real industrial photos, cross-fade) */
.hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.hero-bg-slide.active {
  opacity: 1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, rgba(4, 10, 26, 0.88) 15%, rgba(9, 30, 74, 0.72) 55%, rgba(74, 20, 100, 0.55) 100%);
}

/* Background Blobs / Glow Accents */
.hero-blob-1, .hero-blob-2 {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  z-index: 2;
  animation: pulse-blob 8s infinite alternate ease-in-out;
}

.hero-blob-1 {
  width: 500px;
  height: 500px;
  background: rgba(0, 188, 212, 0.35);
  top: -100px;
  right: -100px;
}

.hero-blob-2 {
  width: 400px;
  height: 400px;
  background: rgba(255, 111, 0, 0.3);
  bottom: -50px;
  left: -100px;
  animation-delay: 2s;
}

.page-banner .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero .container {
  position: relative;
  z-index: 3;
  width: 100%;
}

.hero-content,
.page-banner-content {
  position: relative;
  z-index: 1;
  text-align: left;
  max-width: 650px;
  animation: fadeUp 1s ease-out;
}

/* Hero background slide indicator dots */
.hero-slider-dots {
  position: absolute;
  left: 50%;
  bottom: 30px;
  z-index: 3;
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
}

.hero-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all var(--transition-speed) ease;
}

.hero-dot.active {
  width: 26px;
  border-radius: 6px;
  background: var(--secondary-color);
}

.hero h1,
.page-banner h1 {
  color: var(--text-light);
  font-size: 3.5rem;
  margin-bottom: 20px;
  line-height: 1.2;
}

.page-banner h1 {
  font-size: 2.75rem;
  margin-bottom: 12px;
}

.hero h1 span,
.page-banner h1 span {
  color: var(--secondary-color);
}

.hero .text-gradient,
.page-banner .text-gradient {
  background: var(--secondary-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero p,
.page-banner p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  opacity: 0.9;
}

.page-banner-subtitle {
  font-size: 1.05rem;
  max-width: 600px;
  margin-bottom: 0;
}

.breadcrumb {
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.75;
  margin-bottom: 14px;
  letter-spacing: 0.3px;
}

.breadcrumb a {
  opacity: 0.9;
  transition: opacity var(--transition-speed) ease;
}

.breadcrumb a:hover {
  opacity: 1;
  text-decoration: underline;
}

.breadcrumb span {
  margin: 0 8px;
  opacity: 0.6;
}

.hero-buttons {
  display: flex;
  gap: 20px;
}

/* About Section */
.about {
  padding: 100px 0;
  background-color: #ffffff;
}

.about-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.about-media img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-soft);
}

@media (max-width: 768px) {
  .about-media img {
    height: 300px;
  }
}

.highlight-card {
  background-color: var(--card-bg);
  padding: 30px;
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-soft);
  transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.highlight-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--elevation-3);
}

.highlight-card h3 {
  margin-bottom: 15px;
  font-size: 1.3rem;
}

/* Products Section */
.products {
  padding: 100px 0;
  background-color: var(--bg-light);
}

.product-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 40px;
}

.tab-btn {
  padding: 10px 20px;
  background-color: #e0e0e0;
  border: none;
  border-radius: 30px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-speed) ease;
}

.tab-btn.active, .tab-btn:hover {
  background-color: var(--primary-color);
  color: var(--text-light);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  animation: slideIn 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-bottom: 50px;
}

.product-card {
  background-color: var(--card-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--elevation-soft);
  transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.product-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 2px var(--primary-color);
  opacity: 0;
  transition: opacity var(--transition-speed) ease;
  z-index: -1;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--elevation-8);
}

.product-card:hover::after {
  opacity: 1;
}

.product-img {
  width: 100%;
  height: 220px;
  object-fit: contain;
  padding: 20px;
  background-color: var(--bg-light);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: transform 0.5s ease;
}

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

.product-info {
  padding: 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: white;
}

.product-info h3 {
  margin-bottom: 15px;
  color: var(--primary-color);
  font-size: 1.25rem;
}

.product-info p {
  font-size: 0.95rem;
  color: var(--text-dark);
  line-height: 1.6;
  flex-grow: 1;
}

/* Product Category Sidebar (within each product tab) */
.product-layout {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.category-sidebar {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 110px;
}

.category-btn {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  background-color: var(--card-bg);
  border: none;
  border-left: 4px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-dark);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--elevation-soft);
  transition: all var(--transition-speed) ease;
}

.category-btn:hover {
  color: var(--primary-color);
  border-left-color: var(--secondary-color);
}

.category-btn.active {
  background-color: var(--primary-color);
  color: var(--text-light);
  border-left-color: var(--secondary-color);
}

.category-sidebar-wrapper {
  display: contents;
}

.category-scroll-btn {
  display: none;
}

.category-scroll-btn.is-scroll-hidden {
  display: none !important;
}

.category-content {
  flex: 1;
  min-width: 0;
}

.category-panel {
  display: none;
}

.category-panel.active {
  display: block;
  animation: slideIn 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.category-panel-title {
  color: var(--primary-color);
  margin-bottom: 25px;
}

.category-panel-divider {
  border: none;
  height: 4px;
  width: 70px;
  background: var(--primary-gradient);
  border-radius: 2px;
  margin: -15px 0 30px;
}

/* Services Section */
.services {
  padding: 100px 0;
  background-color: #ffffff;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
}

.service-card {
  background-color: var(--card-bg);
  border-radius: var(--radius-md);
  padding: 40px 30px;
  text-align: center;
  box-shadow: var(--elevation-soft);
  transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--elevation-8);
}

.service-icon {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-bottom: 20px;
  border-radius: var(--radius-md);
}

.service-card h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: var(--primary-color);
  transition: color var(--transition-speed) ease;
}

.service-card p {
  color: #555;
  transition: color var(--transition-speed) ease;
}

/* Clients Section */
.clients {
  padding: 80px 0;
  background-color: var(--bg-light);
  overflow: hidden;
}

.clients-marquee-container {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.clients-marquee {
  display: flex;
  gap: 40px;
  align-items: center;
  animation: scroll 30s linear infinite;
  white-space: nowrap;
  width: max-content;
}

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

.client-logo {
  height: 80px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all var(--transition-speed) ease;
}

.client-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.1);
}

/* Clients Grid (Clients page) */
.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.client-card {
  background-color: var(--card-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--elevation-soft);
  transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.client-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--elevation-8);
}

.client-logo-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  padding: 24px;
  background-color: var(--bg-light);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.client-card .client-logo {
  height: auto;
  width: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: none;
  opacity: 1;
  transition: transform var(--transition-speed) ease;
}

.client-card:hover .client-logo {
  transform: scale(1.06);
}

.client-name {
  margin: 0;
  padding: 18px 16px;
  font-weight: 600;
  color: var(--primary-color);
  font-size: 1.02rem;
  text-align: center;
  background-color: white;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Enquiry CTA */
.cta-section {
  padding: 70px 0;
  background: var(--primary-gradient);
  text-align: center;
}

.cta-content h2 {
  color: var(--text-light);
  font-size: 2.2rem;
  margin-bottom: 15px;
}

.cta-content p {
  color: var(--text-light);
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto 30px auto;
  font-size: 1.1rem;
}

/* Footer */
.footer {
  background-color: var(--primary-color);
  color: var(--text-light);
  padding: 60px 0 20px;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.footer-col h3 {
  margin-bottom: 20px;
  font-size: 1.3rem;
  position: relative;
  padding-bottom: 10px;
  color: var(--text-light);
}

.footer-col h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background-color: var(--secondary-color);
}

.footer-col p {
  margin-bottom: 10px;
  opacity: 0.9;
}

.social-links {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: var(--text-light);
  transition: all var(--transition-speed) ease;
}

.social-links a svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.social-links a:hover {
  background-color: var(--secondary-color);
  transform: translateY(-3px);
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Animations */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Floating WhatsApp Button */
.whatsapp-float {
  position: fixed;
  right: 25px;
  bottom: 25px;
  z-index: 999;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #25d366;
  border-radius: 50%;
  box-shadow: var(--elevation-8);
  transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
  animation: pulse-whatsapp 2.5s infinite;
}

.whatsapp-float svg {
  width: 32px;
  height: 32px;
  fill: var(--text-light);
}

.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.5);
}

@keyframes pulse-whatsapp {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Responsive Design */

/* Below full-width desktop, the grid's two side columns are locked to an
   equal 1fr each (that's what keeps the logo centered), which caps the nav
   column more tightly than it had room for before. Disallow nav wrapping
   and trim the link spacing/size so all 6 items reliably stay on one line
   within that fixed half-width share. */
@media (max-width: 1600px) {
  .nav-links {
    flex-wrap: nowrap;
    gap: 8px 12px;
  }

  .nav-links a {
    font-size: 0.9rem;
  }
}

/* Nav collapses to the hamburger menu here, ahead of the general tablet
   breakpoint below -- the taglines image + contact block + all 6 links need
   more horizontal room than 992px leaves, and previously wrapped onto a
   cramped second line at that width instead of switching to the mobile menu. */
@media (max-width: 1200px) {
  .header-taglines-wrap,
  .header-top-contact {
    /* No room at this width; logo + hamburger menu take over. Both stay
       pinned to their explicit grid-column (1 and inside column 3) even
       once hidden, so the logo doesn't need any re-centering hack here --
       it's already alone in column 2. */
    display: none;
  }

  .mobile-menu-btn {
    display: block;
    /* Anchors to .navbar (already position: relative at base), not .container,
       so .nav-links' full-viewport-width dropdown below keeps working unchanged. */
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
  }

  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    padding: 20px;
    box-shadow: 0 10px 10px rgba(0,0,0,0.1);
  }

  .nav-links.active {
    display: flex;
  }

  .dropdown-content {
    position: relative;
    box-shadow: none;
    border-top: none;
    padding-left: 20px;
  }

  .dropdown-submenu-content {
    position: relative;
    left: 0;
    box-shadow: none;
    border-top: none;
    padding-left: 20px;
  }

  .dropdown > a span {
    float: right;
  }

  .dropdown-submenu:hover .dropdown-submenu-content {
    display: none; /* Handled via JS on mobile for click instead of hover */
  }
  .dropdown-submenu.active .dropdown-submenu-content {
    display: block;
  }
  .dropdown:hover .dropdown-content {
    display: none;
  }
  .dropdown.active > .dropdown-content {
    display: block;
  }
}

@media (max-width: 992px) {
  .hero h1 {
    font-size: 3rem;
  }

  .page-banner h1 {
    font-size: 2.25rem;
  }
}

@media (max-width: 768px) {
  .brand-strip {
    padding: 32px 0;
  }

  .brand-strip-content {
    gap: 16px;
  }

  .brand-badge {
    padding: 12px 22px;
  }

  .logo img {
    height: 44px;
  }

  .hero {
    padding-top: 84px;
  }

  .page-banner {
    min-height: 220px;
    padding: 114px 0 40px;
  }

  .page-banner-subtitle {
    font-size: 0.95rem;
  }

  .hero h1 {
    font-size: 2.5rem;
  }

  .page-banner h1 {
    font-size: 1.9rem;
  }

  .hero-buttons {
    flex-direction: column;
  }

  .hero-slider-dots {
    bottom: 16px;
  }

  .whatsapp-float {
    width: 52px;
    height: 52px;
    right: 16px;
    bottom: 16px;
  }

  /* Reserve room under the copyright line so the fixed WhatsApp button
     (52px tall + 16px offset) never covers it at the bottom of the page. */
  .footer {
    padding-bottom: 84px;
  }

  .whatsapp-float svg {
    width: 28px;
    height: 28px;
  }

  .section-title {
    font-size: 2rem;
  }

  .product-layout {
    flex-direction: column;
  }

  .category-sidebar-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
  }

  .category-sidebar {
    flex-direction: row;
    flex: 1;
    min-width: 0;
    width: 100%;
    overflow-x: auto;
    position: static;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .category-scroll-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background-color: var(--card-bg);
    color: var(--primary-color);
    box-shadow: var(--elevation-2);
    cursor: pointer;
  }

  .category-scroll-btn svg {
    width: 16px;
    height: 16px;
  }

  .category-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    border-left: none;
    border-bottom: 4px solid transparent;
  }

  .category-btn.active {
    border-left-color: transparent;
    border-bottom-color: var(--secondary-color);
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.9rem;
  }

  .page-banner h1 {
    font-size: 1.6rem;
  }
}