/* ============================================
   MARVELOUS CORPORATION - PREMIUM STYLESHEET
   Inspired by SP Technology & Kayriakou designs
   ============================================ */

/* ---------- CSS Variables ---------- */
:root {
  /* Colors - Deep Blue & Gold Theme */
  --primary: #0a2463;
  --primary-dark: #061539;
  --primary-light: #1e3a8a;
  --accent: #d4af37;
  --accent-light: #f0d77a;
  --accent-dark: #b8972e;
  --white: #ffffff;
  --off-white: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --success: #10b981;
  --error: #ef4444;

  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Outfit', var(--font-primary);
  --font-cursive: 'Dancing Script', cursive;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-accent: 0 10px 40px rgba(var(--accent-rgb), 0.3);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* Container */
  --container-max: 1280px;
  --container-padding: 1.5rem;

  /* Header Heights */
  --top-bar-height: 35px;
  --contact-bar-height: 45px;
  --navbar-height: 70px;
  --total-header-height: 150px;
}

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-primary);
  color: var(--gray-800);
  background-color: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast);
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ---------- Typography ---------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--gray-900);
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

h4 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

p {
  color: var(--gray-600);
  margin-bottom: var(--space-md);
}

.text-accent {
  color: var(--accent);
}

.text-primary {
  color: var(--primary);
}

.text-white {
  color: var(--white);
}

.text-cursive {
  font-family: var(--font-cursive);
  font-weight: 400;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.section {
  padding: var(--space-4xl) 0;
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--primary);
  color: var(--white);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-md);
}

.section-label::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: var(--radius-full);
}

.section-header h2 {
  margin-bottom: var(--space-sm);
}

.section-header p {
  max-width: 600px;
  margin: 0 auto;
}

.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 992px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {

  .grid-4,
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   TRIPLE HEADER SYSTEM
   ============================================ */

/* ---------- Top Bar (Marquee/Announcement) ---------- */
.top-bar {
  background: var(--primary);
  height: var(--top-bar-height);
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.top-bar-marquee {
  display: flex;
  animation: marquee 30s linear infinite;
  white-space: nowrap;
}

.top-bar-marquee span {
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 0 var(--space-3xl);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.top-bar-marquee span::before {
  content: '◆';
  color: var(--accent);
  font-size: 0.5rem;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.top-bar-social {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0 var(--space-xl);
  background: var(--primary-dark);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.top-bar-social a {
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 0.75rem;
  transition: all var(--transition-fast);
}

.top-bar-social a:hover {
  background: var(--accent);
  color: var(--primary-dark);
  transform: translateY(-2px);
}

/* ---------- Contact Bar ---------- */
.contact-bar {
  background: var(--white);
  height: var(--contact-bar-height);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
}

.contact-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contact-bar-left {
  display: flex;
  gap: var(--space-xl);
}

.contact-bar-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.8rem;
  color: var(--gray-600);
}

.contact-bar-item i {
  color: var(--accent);
  font-size: 0.9rem;
}

.contact-bar-item a {
  color: var(--gray-700);
}

.contact-bar-item a:hover {
  color: var(--accent);
}

.contact-bar-right {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.live-clock {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--primary);
  color: var(--accent);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
}

.live-clock i {
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.business-hours {
  font-size: 0.8rem;
  color: var(--success);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.business-hours::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--success);
  border-radius: var(--radius-full);
  animation: blink 1s infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

/* ---------- Main Navigation ---------- */
.navbar {
  background: var(--white);
  height: var(--navbar-height);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: all var(--transition-base);
}

.navbar.scrolled {
  box-shadow: var(--shadow-lg);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.navbar-logo img {
  height: 60px;
  width: auto;
}

.navbar-menu {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.navbar-menu a {
  color: var(--gray-700);
  font-weight: 500;
  position: relative;
  padding: var(--space-sm) 0;
  font-size: 0.9375rem;
}

.navbar-menu a:not(.navbar-cta)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width var(--transition-base);
}

.navbar-menu a:not(.navbar-cta):hover,
.navbar-menu a:not(.navbar-cta).active {
  color: var(--primary);
}

.navbar-menu a:not(.navbar-cta):hover::after,
.navbar-menu a:not(.navbar-cta).active::after {
  width: 100%;
}

.navbar-cta {
  background: var(--accent);
  color: var(--primary-dark) !important;
  padding: 0.65rem 1.5rem;
  border-radius: var(--radius-md);
  border: 2px solid var(--accent);
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all var(--transition-base);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 0.75rem;
  position: relative;
  overflow: visible;
}

.navbar-cta::after {
  display: none !important;
}

.navbar-cta i {
  font-size: 0.8rem;
}

.navbar-cta:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
  color: var(--primary-dark) !important;
}

.navbar-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-sm);
}

/* Hide mobile close button on desktop */
.menu-close-btn {
  display: none;
}

.navbar-toggle span {
  width: 25px;
  height: 2px;
  background: var(--primary);
  transition: all var(--transition-base);
}

/* Navbar Dropdown */
.navbar-dropdown {
  position: relative;
}

.navbar-dropdown .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}

.navbar-dropdown .dropdown-toggle i {
  font-size: 0.65rem;
  transition: transform 0.3s ease;
}

.navbar-dropdown:hover .dropdown-toggle i {
  transform: rotate(180deg);
}

.navbar-dropdown .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--white);
  min-width: 220px;
  padding: 0.75rem 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1001;
  border: 1px solid var(--gray-100);
}

.navbar-dropdown .dropdown-menu::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--white);
}

.navbar-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.navbar-dropdown .dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1.25rem;
  color: var(--gray-700);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.navbar-dropdown .dropdown-menu a i {
  width: 18px;
  color: var(--primary);
  font-size: 0.85rem;
  transition: color 0.2s ease;
}

.navbar-dropdown .dropdown-menu a:hover {
  background: var(--off-white);
  color: var(--primary);
  padding-left: 1.5rem;
}

.navbar-dropdown .dropdown-menu a:hover i {
  color: var(--accent);
}

@media (max-width: 992px) {
  .contact-bar {
    display: none;
  }

  .top-bar-social {
    display: none;
  }
}

@media (max-width: 768px) {
  .navbar-toggle {
    display: flex;
    z-index: 1001;
  }

  /* Hide toggle when menu is open */
  body.menu-open .navbar-toggle {
    opacity: 0;
    pointer-events: none;
  }

  .navbar-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
    background: var(--primary);
  }

  .navbar-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(20px);
  }

  .navbar-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
    background: var(--primary);
  }

  /* Premium Mobile Menu - Enhanced */
  .navbar-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 380px;
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(165deg, #ffffff 0%, #f8fafc 40%, #f1f5f9 100%);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: 0;
    box-shadow: -25px 0 80px rgba(10, 36, 99, 0.25);
    transition: right 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Premium top section with logo area */
  .navbar-menu::before {
    content: 'MENU';
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    min-height: 80px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--accent);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 4px;
    border-bottom: 3px solid var(--accent);
  }

  /* Decorative gold accent line */
  .navbar-menu::after {
    content: '';
    position: absolute;
    top: 200px;
    right: -80px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }

  .navbar-menu.active {
    right: 0;
  }

  /* Close button in mobile menu */
  .menu-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--accent);
    border-radius: 50%;
    color: var(--accent);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
  }

  .menu-close-btn:hover {
    background: var(--accent);
    color: var(--primary-dark);
    transform: rotate(90deg);
  }

  /* Staggered animation for direct menu items only */
  .navbar-menu.active > a:nth-of-type(1) {
    animation: slideIn 0.4s 0.1s both;
  }

  .navbar-menu.active > a:nth-of-type(2) {
    animation: slideIn 0.4s 0.15s both;
  }

  .navbar-menu.active > a:nth-of-type(3) {
    animation: slideIn 0.4s 0.2s both;
  }

  .navbar-menu.active > .navbar-dropdown {
    animation: slideIn 0.4s 0.25s both;
  }

  .navbar-menu.active > a:nth-of-type(4) {
    animation: slideIn 0.4s 0.3s both;
  }

  .navbar-menu.active > a:nth-of-type(5) {
    animation: slideIn 0.4s 0.35s both;
  }

  .navbar-menu.active > a:nth-of-type(6) {
    animation: slideIn 0.4s 0.4s both;
  }

  .navbar-menu.active > a:nth-of-type(7) {
    animation: slideIn 0.4s 0.45s both;
  }

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateX(30px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Direct children menu items only - not dropdown items */
  .navbar-menu > a:not(.navbar-cta) {
    font-size: 1.1rem;
    font-weight: 600;
    font-family: var(--font-heading);
    color: var(--gray-700);
    padding: 1.1rem 2rem;
    width: 100%;
    text-align: left;
    position: relative;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(10, 36, 99, 0.08);
    background: transparent;
  }

  .navbar-menu > a:not(.navbar-cta):last-of-type {
    border-bottom: none;
  }

  /* Animated underline - hidden on mobile */
  .navbar-menu > a:not(.navbar-cta)::after {
    display: none;
  }

  .navbar-menu > a:not(.navbar-cta):hover,
  .navbar-menu > a:not(.navbar-cta).active {
    color: var(--primary);
    background: linear-gradient(90deg, rgba(10, 36, 99, 0.05) 0%, transparent 100%);
    padding-left: 2.5rem;
    border-left: 4px solid var(--accent);
  }

  /* Arrow icon on hover */
  .navbar-menu > a:not(.navbar-cta)::before {
    content: '›';
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.3;
    color: var(--gray-400);
    font-size: 1.5rem;
    font-weight: 300;
    transition: all 0.3s ease;
  }

  .navbar-menu > a:not(.navbar-cta):hover::before,
  .navbar-menu > a:not(.navbar-cta).active::before {
    opacity: 1;
    color: var(--accent);
    right: 1.25rem;
  }

  /* Premium Get Quote Button */
  .navbar-cta {
    margin: 1.5rem 2rem 2rem;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: var(--primary-dark) !important;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(var(--accent-rgb), 0.35);
    position: relative;
    overflow: hidden;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
  }

  .navbar-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
  }

  .navbar-cta:hover::before {
    left: 100%;
  }

  .navbar-cta:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 35px rgba(var(--accent-rgb), 0.45);
  }

  /* Premium overlay */
  body.menu-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(10, 36, 99, 0.7) 0%, rgba(6, 21, 57, 0.85) 100%);
    backdrop-filter: blur(5px);
    z-index: 999;
    animation: fadeIn 0.3s ease;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  /* Mobile Dropdown Styles */
  .navbar-dropdown {
    width: 100%;
    border-bottom: 1px solid rgba(10, 36, 99, 0.08);
  }

  .navbar-dropdown .dropdown-toggle {
    font-size: 1.1rem;
    font-weight: 600;
    font-family: var(--font-heading);
    color: var(--primary);
    /* Force primary color since it's "active" */
    padding: 1.1rem 2rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    letter-spacing: 0.5px;
    background: transparent;
    pointer-events: none;
    /* HEADER ONLY - NO INTERACTION */
    border-left: 4px solid var(--accent);
    /* Keep the accent look */
    background: linear-gradient(90deg, rgba(10, 36, 99, 0.05) 0%, transparent 100%);
  }

  .navbar-dropdown .dropdown-toggle i {
    display: none;
  }

  .navbar-dropdown .dropdown-menu {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none !important;
    opacity: 1;
    visibility: visible;
    max-height: none;
    /* Allow full height */
    overflow: visible;
    transition: none;
    padding: 0;
    box-shadow: none;
    border: none;
    background: rgba(10, 36, 99, 0.02);
    border-radius: 0;
    margin: 0;
    width: 100%;
  }

  /* Override hover state transform on mobile */
  .navbar-dropdown:hover .dropdown-menu {
    transform: none !important;
  }

  .navbar-dropdown .dropdown-menu::before {
    display: none;
  }

  .navbar-dropdown .dropdown-menu a {
    padding: 0.85rem 1.5rem 0.85rem 2.5rem;
    /* Good padding */
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--gray-600);
    border-bottom: 1px solid rgba(10, 36, 99, 0.05);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    white-space: normal;
    /* Allow text to wrap */
    height: auto;
    opacity: 1 !important;
    /* Force visibility */
    animation: none !important;
    /* Prevent slideIn interference */
  }

  .navbar-dropdown .dropdown-menu a:last-child {
    border-bottom: none;
  }

  .navbar-dropdown .dropdown-menu a:hover {
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--primary);
  }

  .navbar-dropdown .dropdown-menu a i {
    width: 20px;
    text-align: center;
    color: var(--primary);
    font-size: 0.85rem;
  }

  .navbar-dropdown .dropdown-menu a:hover i {
    color: var(--accent);
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.875rem 2rem;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn:hover::before {
  left: 100%;
}

.btn-primary {
  background: var(--primary);
  color: var(--white);
  border: 2px solid var(--primary);
}

.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-accent {
  background: var(--accent);
  color: var(--primary-dark);
  border: 2px solid var(--accent);
}

.btn-accent:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--white);
  color: var(--white);
}

.btn-outline:hover {
  background: var(--white);
  color: var(--primary);
}

.btn-outline-dark {
  background: transparent;
  border: 2px solid var(--gray-800);
  color: var(--gray-800);
}

.btn-outline-dark:hover {
  background: var(--gray-800);
  color: var(--white);
}

/* ============================================
   HERO SECTION - Enhanced with overlap stats
   ============================================ */
.hero {
  position: relative;
  min-height: calc(100vh - var(--navbar-height));
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  overflow: hidden;
  padding-bottom: 80px;
  /* Space for floating stats */
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
}

.hero-slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-full);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-base);
  z-index: 10;
}

.hero-slider-nav:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--primary-dark);
}

.hero-slider-nav.prev {
  left: var(--space-xl);
}

.hero-slider-nav.next {
  right: var(--space-xl);
}

/* Hero Slider Dots */
.hero-slider-dots {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-sm);
  z-index: 10;
}

.hero-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all var(--transition-base);
}

.hero-dot:hover {
  background: rgba(255, 255, 255, 0.5);
}

.hero-dot.active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.2);
}

/* Hero Slides */
.hero-slide {
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.hero-slide.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.hero-slide.fade-out {
  display: block;
  opacity: 0;
  transform: translateY(-20px);
}

/* Hero Logo Container */
.hero-logo-container {
  margin-bottom: var(--space-lg);
}

.hero-logo {
  max-width: 150px;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  background: rgba(255, 255, 255, 0.95);
  padding: var(--space-sm);
}

@media (max-width: 768px) {
  .hero-slider-dots {
    bottom: 80px;
  }
  
  .hero-logo {
    max-width: 100px;
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
}

.hero-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  color: var(--white);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: var(--space-lg);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-label i {
  color: var(--accent);
}

.hero-content h1,
.hero-content h2 {
  color: var(--white);
  margin-bottom: var(--space-lg);
  font-size: clamp(2.5rem, 5vw, 4rem);
}

.hero-content h1 .cursive-highlight,
.hero-content h2 .cursive-highlight {
  font-family: var(--font-cursive);
  color: var(--accent);
  font-weight: 400;
  font-size: 1.1em;
}

.hero-content p {
  color: var(--gray-300);
  font-size: 1.125rem;
  margin-bottom: var(--space-xl);
  line-height: 1.8;
}

.hero-btns {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* Floating Stats Bar - Overlaps Hero */
.floating-stats {
  position: relative;
  z-index: 20;
  margin-top: -60px;
  margin-bottom: var(--space-3xl);
}

.floating-stats-inner {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  padding: var(--space-xl) var(--space-2xl);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
}

.stat-item {
  text-align: center;
  position: relative;
}

.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: var(--gray-200);
}

.stat-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.25rem;
  margin: 0 auto var(--space-sm);
}

.stat-item h3,
.stat-item .stat-number {
  color: var(--primary);
  font-size: 2rem;
  margin-bottom: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
}

.stat-item h3 span,
.stat-item .stat-number span {
  color: var(--accent);
}

.stat-item p {
  color: var(--gray-500);
  font-size: 0.875rem;
  margin: 0;
}

@media (max-width: 768px) {
  .floating-stats-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item:nth-child(2)::after {
    display: none;
  }

  .hero-slider-nav {
    display: none;
  }
}

/* ============================================
   FLOATING IMAGES SECTION (About)
   ============================================ */
.floating-images-section {
  background: var(--off-white);
  position: relative;
  overflow: visible;
}

.floating-images-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.floating-images-wrapper {
  position: relative;
  height: 500px;
}

.floating-img-main {
  position: absolute;
  top: 0;
  right: 0;
  width: 85%;
  height: 380px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.floating-img-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.floating-img-secondary {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 150px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 4px solid var(--white);
  animation: float 3s ease-in-out infinite;
}

.floating-img-secondary img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.floating-badge {
  position: absolute;
  bottom: 60px;
  right: -20px;
  background: var(--accent);
  color: var(--primary-dark);
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-accent);
  text-align: center;
  animation: float 3s ease-in-out infinite;
  animation-delay: 0.5s;
}

.floating-badge h3,
.floating-badge .stat-number {
  font-size: 2.5rem;
  color: var(--primary-dark);
  margin-bottom: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
}

.floating-badge p {
  color: var(--primary);
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.floating-content h2 {
  margin-bottom: var(--space-lg);
}

.floating-content .subtitle {
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.875rem;
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.floating-content .subtitle::before {
  content: '';
  width: 40px;
  height: 2px;
  background: var(--accent);
}

.feature-list {
  margin-top: var(--space-xl);
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.feature-icon {
  width: 40px;
  height: 40px;
  background: var(--primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.feature-item h4,
.feature-item h3 {
  margin-bottom: var(--space-xs);
  font-size: 1rem;
}

.feature-item p {
  margin: 0;
  font-size: 0.875rem;
}

@media (max-width: 992px) {
  .floating-images-grid {
    grid-template-columns: 1fr;
  }

  .floating-images-wrapper {
    height: 400px;
    margin-bottom: var(--space-2xl);
  }
}

/* ============================================
   SERVICE CARDS - Enhanced
   ============================================ */
.service-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 4/3;
}

.service-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.service-card:hover img {
  transform: scale(1.1);
}

.service-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-xl);
  background: linear-gradient(to top, rgba(10, 36, 99, 0.95), transparent);
  color: var(--white);
  transform: translateY(20px);
  transition: transform var(--transition-base);
}

.service-card:hover .service-card-content {
  transform: translateY(0);
}

.service-card-icon {
  width: 50px;
  height: 50px;
  background: var(--accent);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-dark);
  font-size: 1.25rem;
  margin-bottom: var(--space-md);
  transform: translateY(20px);
  opacity: 0;
  transition: all var(--transition-base);
}

.service-card:hover .service-card-icon {
  transform: translateY(0);
  opacity: 1;
}

.service-card h4,
.service-card h3 {
  color: var(--white);
  margin-bottom: var(--space-xs);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.service-card p {
  color: var(--gray-300);
  margin: 0;
  font-size: 0.875rem;
}

/* ============================================
   PROJECT GALLERY - Enhanced
   ============================================ */
.projects-showcase {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-lg);
}

.projects-showcase .project-card:first-child {
  grid-row: span 2;
}

.project-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: 250px;
}

.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

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

.project-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 36, 99, 0.9), transparent 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-xl);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.project-card:hover .project-card-overlay {
  opacity: 1;
}

.project-card h4,
.project-card h3 {
  color: var(--white);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.project-card p {
  color: var(--gray-300);
  margin: 0;
}

@media (max-width: 768px) {
  .projects-showcase {
    grid-template-columns: 1fr;
  }

  .projects-showcase .project-card:first-child {
    grid-row: auto;
  }
}

/* ============================================
   TEAM CARDS
   ============================================ */
.team-card {
  text-align: center;
  padding: var(--space-xl);
}

.team-card-img {
  width: 180px;
  height: 180px;
  border-radius: var(--radius-full);
  overflow: hidden;
  margin: 0 auto var(--space-lg);
  border: 4px solid var(--accent);
  position: relative;
}

.team-card-img::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 4px solid transparent;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--accent), var(--primary)) border-box;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.team-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card h4,
.team-card h3 {
  margin-bottom: var(--space-xs);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.team-card .role {
  color: var(--accent);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.team-card .phone {
  color: var(--gray-500);
  font-size: 0.875rem;
}

/* ============================================
   CARDS - General
   ============================================ */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}

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

.card:hover::before {
  transform: scaleX(1);
}

.card-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-lg);
  color: var(--accent);
  font-size: 1.5rem;
}

.card h4,
.card h3 {
  margin-bottom: var(--space-sm);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.card p {
  margin: 0;
  font-size: 0.9375rem;
}

/* ============================================
   STATS SECTION - Dark
   ============================================ */
.stats-section {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  padding: var(--space-3xl) 0;
  position: relative;
}

.stats-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.03)"/></svg>');
  background-size: 30px 30px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
  text-align: center;
  position: relative;
  z-index: 1;
}

.stats-section .stat-item h3,
.stats-section .stat-item .stat-number {
  color: var(--accent);
  font-size: 3rem;
  margin-bottom: var(--space-xs);
}

.stats-section .stat-item p {
  color: var(--gray-300);
  margin: 0;
  font-size: 0.9375rem;
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section {
  background: var(--accent);
  padding: var(--space-3xl) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
}

.cta-section::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -5%;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
}

.cta-section h2 {
  color: var(--primary-dark);
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 1;
}

.cta-section p {
  color: var(--primary);
  max-width: 600px;
  margin: 0 auto var(--space-xl);
  position: relative;
  z-index: 1;
}

.cta-section .btn {
  position: relative;
  z-index: 1;
}

/* ============================================
   CONTACT SECTION
   ============================================ */
.contact-section {
  background: var(--off-white);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-3xl);
}

.contact-info {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  padding: var(--space-2xl);
  border-radius: var(--radius-xl);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.contact-info::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.1) 0%, transparent 70%);
}

.contact-info h3,
.contact-info h2 {
  color: var(--white);
  margin-bottom: var(--space-lg);
  position: relative;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.contact-item {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  position: relative;
}

.contact-item-icon {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}

.contact-item h4,
.contact-item h3 {
  color: var(--accent);
  font-size: 0.875rem;
  margin-bottom: var(--space-xs);
}

.contact-item p {
  color: var(--gray-300);
  margin: 0;
  font-size: 0.9375rem;
}

.contact-form {
  background: var(--white);
  padding: var(--space-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.form-group {
  margin-bottom: var(--space-lg);
}

.form-group label {
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: 500;
  color: var(--gray-700);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: var(--space-md);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 1rem;
  transition: all var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(10, 36, 99, 0.1);
}

.form-group textarea {
  min-height: 150px;
  resize: vertical;
}

@media (max-width: 992px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--gray-900);
  color: var(--gray-400);
  padding: var(--space-4xl) 0 var(--space-lg);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.footer-grid-5 {
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
}

.footer-links a i {
  margin-right: 0.4rem;
  font-size: 0.75rem;
  color: var(--accent);
}

.footer-brand img {
  height: 100px;
  margin-bottom: var(--space-lg);
}

.footer-brand p {
  color: var(--gray-400);
  margin-bottom: var(--space-lg);
}

.footer h4,
.footer h3 {
  color: var(--white);
  font-size: 1rem;
  margin-bottom: var(--space-lg);
  position: relative;
  padding-bottom: var(--space-sm);
}

.footer h4::after,
.footer h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--accent);
}

.footer-links a {
  display: block;
  padding: var(--space-xs) 0;
  color: var(--gray-400);
  transition: all var(--transition-fast);
}

.footer-links a:hover {
  color: var(--accent);
  padding-left: var(--space-sm);
}

.footer-bottom {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--gray-800);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer-social {
  display: flex;
  gap: var(--space-sm);
}

.footer-social a {
  width: 40px;
  height: 40px;
  background: var(--gray-800);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  transition: all var(--transition-fast);
}

.footer-social a:hover {
  background: var(--accent);
  color: var(--primary-dark);
  transform: translateY(-3px);
}

@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 576px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   SECTOR LINK CARDS
   ============================================ */
.sector-link-card {
  display: block;
  padding: 2rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  text-align: center;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.sector-link-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.sector-link-card:hover::before {
  transform: scaleX(1);
}

.sector-link-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: transparent;
}

.sector-link-card i {
  font-size: 2.5rem;
  color: var(--primary);
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.sector-link-card:hover i {
  color: var(--accent);
  transform: scale(1.1);
}

.sector-link-card h4,
.sector-link-card h3 {
  margin-bottom: 0.5rem;
  color: var(--gray-900);
  transition: color 0.3s ease;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.sector-link-card:hover h4,
.sector-link-card:hover h3 {
  color: var(--primary);
}

.sector-link-card p {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin-bottom: 0;
}

/* ============================================
   UTILITIES
   ============================================ */
.bg-primary {
  background-color: var(--primary);
}

.bg-dark {
  background-color: var(--gray-900);
}

.bg-light {
  background-color: var(--off-white);
}

.mt-1 {
  margin-top: var(--space-md);
}

.mt-2 {
  margin-top: var(--space-xl);
}

.mt-3 {
  margin-top: var(--space-2xl);
}

.mb-1 {
  margin-bottom: var(--space-md);
}

.mb-2 {
  margin-bottom: var(--space-xl);
}

.mb-3 {
  margin-bottom: var(--space-2xl);
}

.text-center {
  text-align: center;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease forwards;
}

.fade-in-left {
  animation: fadeInLeft 0.6s ease forwards;
}

.fade-in-right {
  animation: fadeInRight 0.6s ease forwards;
}

.delay-1 {
  animation-delay: 0.1s;
}

.delay-2 {
  animation-delay: 0.2s;
}

.delay-3 {
  animation-delay: 0.3s;
}

.delay-4 {
  animation-delay: 0.4s;
}

/* WhatsApp Button */
.whatsapp-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: #25d366;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.75rem;
  box-shadow: var(--shadow-lg);
  z-index: 999;
  transition: all var(--transition-base);
}

.whatsapp-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.4);
}

/* Back to Top */
.back-to-top {
  position: fixed;
  bottom: 100px;
  right: 30px;
  width: 45px;
  height: 45px;
  background: var(--primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1rem;
  box-shadow: var(--shadow-md);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background: var(--accent);
  color: var(--primary-dark);
  transform: translateY(-3px);
}

/* ============================================
   MOBILE BOTTOM NAVIGATION BAR
   Premium glassmorphism design
   ============================================ */

/* Desktop Only Utility */
.desktop-only {
  display: flex;
}

/* Hide mobile nav on desktop */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 768px) {

  /* Hide desktop WhatsApp on mobile */
  .desktop-only {
    display: none !important;
  }

  /* Adjust back-to-top button position for mobile nav */
  .back-to-top {
    bottom: 100px;
    right: 20px;
  }

  /* Add padding to footer to account for mobile nav */
  .footer {
    padding-bottom: 90px;
  }

  /* Mobile Bottom Navigation */
  .mobile-bottom-nav {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0.5rem 1rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    background: rgba(10, 36, 99, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(var(--accent-rgb), 0.2);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
  }

  .mobile-nav-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    max-width: 500px;
    margin: 0 auto;
  }

  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.65rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
  }

  .mobile-nav-item span {
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .mobile-nav-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 1.1rem;
    transition: all 0.3s ease;
  }

  .mobile-nav-item:hover .mobile-nav-icon,
  .mobile-nav-item.active .mobile-nav-icon {
    background: rgba(var(--accent-rgb), 0.2);
    color: var(--accent);
    transform: translateY(-3px);
  }

  .mobile-nav-item:hover,
  .mobile-nav-item.active {
    color: var(--accent);
  }

  .mobile-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: var(--accent);
    border-radius: 3px 3px 0 0;
  }

  /* WhatsApp Icon Special Style */
  .whatsapp-icon {
    background: rgba(37, 211, 102, 0.15) !important;
    color: #25d366;
  }

  .mobile-nav-item:hover .whatsapp-icon {
    background: rgba(37, 211, 102, 0.3) !important;
    color: #25d366;
  }

  /* Center Button (Call Now) - Elevated Design */
  .mobile-nav-center {
    position: relative;
    margin-top: -25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .mobile-nav-center-btn {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: var(--primary-dark);
    font-size: 1.25rem;
    box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.4);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
  }

  .mobile-nav-center-btn::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.2);
    z-index: -1;
    animation: pulse-ring 2s infinite;
  }

  @keyframes pulse-ring {
    0% {
      transform: scale(1);
      opacity: 0.8;
    }

    50% {
      transform: scale(1.1);
      opacity: 0.4;
    }

    100% {
      transform: scale(1);
      opacity: 0.8;
    }
  }

  .mobile-nav-center:hover .mobile-nav-center-btn {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 8px 30px rgba(var(--accent-rgb), 0.5);
  }

  .mobile-nav-center span {
    color: var(--accent);
    font-weight: 600;
    margin-top: 0.35rem;
  }
}

/* ============================================
   FEATURED VENTURE - Upcoming Project Spotlight
   ============================================ */
.featured-venture {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  align-items: center;
  gap: var(--space-2xl);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-2xl);
  margin-bottom: var(--space-3xl);
  position: relative;
  overflow: hidden;
}

.featured-venture::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.featured-venture-logo {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.featured-venture-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.featured-venture-content .section-label {
  margin-bottom: var(--space-md);
}

.featured-venture-content h3 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--gray-900);
  margin-bottom: var(--space-sm);
}

.featured-venture-content p {
  color: var(--gray-600);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-bottom: var(--space-lg);
  max-width: 640px;
}

.featured-venture-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.featured-venture-meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--gray-100);
  color: var(--gray-700);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid var(--gray-200);
}

.featured-venture-content .btn {
  margin-top: var(--space-xs);
}

@media (max-width: 768px) {
  .featured-venture {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    padding: var(--space-xl);
    text-align: center;
  }

  .featured-venture-logo {
    max-width: 220px;
  }

  .featured-venture-content p {
    margin-left: auto;
    margin-right: auto;
  }

  .featured-venture-meta {
    justify-content: center;
  }
}

/* ShopHub venture pillars + banner showcase */
.venture-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.venture-pillar {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-lg);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.venture-pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.08);
  border-color: var(--accent);
}

.venture-pillar i {
  font-size: 1.5rem;
  color: var(--accent);
  margin-bottom: var(--space-sm);
  display: inline-block;
}

.venture-pillar h4 {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray-900);
  margin-bottom: var(--space-xs);
}

.venture-pillar p {
  font-size: 0.875rem;
  color: var(--gray-600);
  line-height: 1.55;
  margin: 0;
}

.venture-banner {
  margin-top: var(--space-xl);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  box-shadow: 0 16px 40px rgba(17, 24, 39, 0.1);
}

.venture-banner img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .venture-pillars {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}

@media (max-width: 480px) {
  .venture-pillars {
    grid-template-columns: 1fr;
  }
}
/* ============================================
   DEWDROP THEME
   Deep water-blue primary + DewDrop leaf green accent, taken
   straight from the logo. Accent FILLS already carry navy text
   in the base sheet, so white-on-green never happens.
   ============================================ */
:root {
  --primary: #0d4f8b;
  --primary-dark: #08325a;
  --primary-light: #1b73c4;
  --accent: #2ebd60;
  --accent-light: #7ce6a3;
  --accent-dark: #1d8a44;
  --shadow-accent: 0 10px 40px rgba(46, 189, 96, 0.32);
  /* Component rules across this sheet tint with rgba(var(--accent-rgb), a).
     Keep this in sync with --accent or those glows drift off-brand. */
  --accent-rgb: 46, 189, 96;
}

/* Water band divider — the splash art from the company profile */
.water-band {
  height: 150px;
  background: url('../img/hero-water.webp') center/cover no-repeat;
  margin-top: -1px;
}

@media (max-width: 768px) {
  .water-band { height: 90px; }
}

/* Product / media catalogue tiles */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}

.catalog-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
  display: flex;
  flex-direction: column;
}

.catalog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: var(--accent);
}

.catalog-card-img {
  aspect-ratio: 4 / 3;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.catalog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.catalog-card:hover .catalog-card-img img { transform: scale(1.06); }

.catalog-card h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary-dark);
  padding: var(--space-md);
  margin: 0;
  text-align: center;
  border-top: 3px solid var(--accent);
  background: var(--off-white);
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.catalog-group { margin-bottom: var(--space-3xl); }

.catalog-group-title {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.catalog-group-title i {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--white);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.catalog-group-title h2 {
  font-size: 1.5rem;
  margin: 0;
  color: var(--primary-dark);
}

/* Client logo wall */
.client-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-md);
}

.client-logo {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  padding: var(--space-md);
  transition: all var(--transition-base);
}

.client-logo:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.client-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Authorised brand partners */
.partner-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
  align-items: center;
}

.partner-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  transition: all var(--transition-base);
}

.partner-card:hover { box-shadow: var(--shadow-lg); border-color: var(--accent); }

.partner-card img {
  height: 62px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: var(--space-md);
}

.partner-card p {
  font-size: 0.9rem;
  color: var(--gray-600);
  margin: 0;
}

/* Project gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.gallery-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-md);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.gallery-item:hover img { transform: scale(1.08); }

.gallery-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background: linear-gradient(transparent, rgba(8, 50, 90, 0.92));
  color: var(--white);
  font-weight: 600;
  font-size: 0.95rem;
}

/* Activity list on the services page */
.activity-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }

.activity-row {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: all var(--transition-base);
}

.activity-row:hover { box-shadow: var(--shadow-md); transform: translateX(4px); }

.activity-row i { color: var(--accent); font-size: 1.15rem; margin-top: 2px; }
.activity-row h3 { font-size: 1.05rem; margin: 0 0 0.25rem; color: var(--primary-dark); }
.activity-row p { font-size: 0.9rem; color: var(--gray-600); margin: 0; }

@media (max-width: 1024px) {
  .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .client-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
  .client-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: minmax(0, 1fr); }
  .partner-strip { grid-template-columns: minmax(0, 1fr); }
  .activity-list { grid-template-columns: minmax(0, 1fr); }
  .catalog-card h3 { font-size: 0.85rem; padding: var(--space-sm); }
}

@media (max-width: 480px) {
  .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The base sheet's `.navbar-menu a` (specificity 0,1,1) outranks `.navbar-cta`
   (0,1,0), so the Get Quote pill inherited the plain link's `8px 0` padding and
   15px font — text sat flush against the pill edge at every breakpoint. Win on
   specificity rather than reaching for !important. */
.navbar-menu a.navbar-cta {
  padding: 0.65rem 1.5rem;
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .navbar-menu a.navbar-cta {
    padding: 1rem 2rem;
    font-size: 1rem;
  }
}

/* Between the mobile breakpoint (768px) and ~1024px the desktop nav still has to
   fit eight links plus the Get Quote pill. At the default 2rem gap that row
   overflows the viewport once the pill has its real padding back, so tighten
   the spacing across that band instead of letting the page scroll sideways. */
@media (min-width: 769px) and (max-width: 1024px) {
  .navbar-menu { gap: 1.1rem; }

  .navbar-menu a.navbar-cta {
    padding: 0.55rem 1rem;
    font-size: 0.8rem;
    margin-left: 0.35rem;
  }
}

/* The very bottom of that band (769-899px) is the tightest the desktop nav ever
   gets — one step narrower again so 769px, the last width before the hamburger
   takes over at 768px, still fits without a sideways scroll. */
@media (min-width: 769px) and (max-width: 899px) {
  .navbar-menu { gap: 0.75rem; }

  .navbar-menu a.navbar-cta {
    padding: 0.5rem 0.85rem;
    font-size: 0.78rem;
    margin-left: 0.25rem;
  }
}

/* ============================================
   DEWDROP — VISUAL POLISH
   ============================================ */

/* --- Hero -------------------------------------------------------------
   The base sheet buried the photo at opacity .15 under a flat 135deg wash,
   so every hero read as "blue filter" instead of photography. Let the real
   installation shots come through and lay a DIRECTIONAL scrim over them:
   deep behind the copy on the left, opening up to the right. */
.hero-bg {
  opacity: 0.45;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(8, 50, 90, 0.94) 0%,
      rgba(8, 50, 90, 0.80) 38%,
      rgba(13, 79, 139, 0.45) 72%,
      rgba(13, 79, 139, 0.32) 100%),
    radial-gradient(ellipse at 12% 40%, rgba(8, 50, 90, 0.55) 0%, transparent 62%);
}

/* Keep every hero control and the copy above that scrim. Only the container
   needs positioning — the arrows and dots are already absolutely placed by the
   base sheet, and overriding their `position` moved the dots out of the hero. */
.hero > .container {
  position: relative;
  z-index: 2;
}

.hero-slider-nav,
.hero-slider-dots {
  z-index: 2;
}

.hero h1,
.hero h2 {
  text-shadow: 0 2px 24px rgba(4, 26, 48, 0.45);
}

.hero p {
  text-shadow: 0 1px 12px rgba(4, 26, 48, 0.4);
}

/* A hairline of brand green where the hero meets the water band. */
.hero {
  border-bottom: 3px solid var(--accent);
}

/* --- Product catalogue tiles ----------------------------------------
   These are catalogue photos where the whole unit matters, so `cover` was
   slicing the tops and bottoms off tanks and skids. Contain them on a soft
   card instead — nothing is cropped and the grid reads as a real catalogue. */
.catalog-card-img {
  background: linear-gradient(170deg, #ffffff 0%, #f2f7fc 100%);
  padding: 14px;
}

.catalog-card-img img {
  object-fit: contain;
  mix-blend-mode: multiply;
}

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

/* --- Brand partner strip --------------------------------------------- */
.partner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.partner-card img {
  height: 56px;
  margin-bottom: var(--space-lg);
}

/* --- CTA band --------------------------------------------------------
   The base sheet put --primary body copy on the accent fill, which lands at
   about 2.5:1 on green. --primary-dark clears AA at 5.4:1. */
.cta-section p {
  color: var(--primary-dark);
  opacity: 0.92;
}

.cta-section h2 {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* --- Section headings ------------------------------------------------ */
.section-header h2 {
  letter-spacing: -0.02em;
}

.catalog-group-title i {
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.18);
}

/* --- Stats band ------------------------------------------------------ */
.stats-section .stat-icon {
  box-shadow: 0 8px 24px rgba(4, 26, 48, 0.28);
}

/* --- Gallery --------------------------------------------------------- */
.gallery-item {
  border: 1px solid var(--gray-200);
}

.gallery-item figcaption {
  background: linear-gradient(transparent, rgba(8, 50, 90, 0.94));
  padding-top: var(--space-2xl);
}

@media (max-width: 768px) {
  .hero::after {
    background:
      linear-gradient(180deg,
        rgba(8, 50, 90, 0.88) 0%,
        rgba(8, 50, 90, 0.82) 55%,
        rgba(13, 79, 139, 0.72) 100%);
  }

  .partner-card img { height: 46px; }
}

/* Partner marks vary from 5:1 (Ecolab) to nearly square (Micbac). Sizing by
   height alone made the square one look tiny, so give them all one box and
   let `contain` balance the optical weight. */
.partner-card img {
  width: 100%;
  height: 78px;
  object-fit: contain;
}

@media (max-width: 1024px) {
}

@media (max-width: 768px) {
  .partner-card img { height: 64px; }
}


/* --- Client logo wall ------------------------------------------------
   One authoritative block. `aspect-ratio` is only a suggestion — a squarish
   logo's min-content height overrode it and left the wall ragged — and a
   percentage height/max-height on a centred grid item resolves as `auto`, so
   tall marks spilled out of their tile. Fixed tile height plus an ABSOLUTE
   image height is the only combination that binds in both directions. */
.client-logo {
  aspect-ratio: auto;
  height: 118px;
  min-height: 0;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: var(--gray-200);
  overflow: hidden;
}

.client-logo img {
  width: 100%;
  height: 90px;
  max-width: 100%;
  object-fit: contain;
}

/* Responsive steps for the wall — these MUST come after the block above,
   which sets the desktop height unconditionally. */
@media (max-width: 1024px) {
  .client-logo { height: 104px; padding: 12px; }
  .client-logo img { height: 78px; }
}

@media (max-width: 768px) {
  .client-logo { height: 96px; padding: 10px; }
  .client-logo img { height: 74px; }
}

@media (max-width: 480px) {
  .client-logo { height: 88px; }
  .client-logo img { height: 66px; }
}