/* Main CSS Entry Point - Imports all modular styles */

/* Base styles */
@import url('./base/reset.css');
@import url('./base/typography.css');

/* Utility classes */
@import url('./utilities/utilities.css');

/* Component styles */
@import url('./components/buttons.css');
@import url('./components/cards.css');
@import url('./components/hero.css');
@import url('./components/footer.css');
@import url('./components/nav.css');
@import url('./components/brand.css');
@import url('./components/custom.css');

/* Color System & Variables */
:root {
    /* ═══════════════════════════════════════════════════════════════════
     IPERVOLA README-COMPLIANT COLOR PALETTE
     High-Contrast Authority-Driven Design for Civil Engineering
     60-30-10 Rule: 60% Authority (Black/Dark Earth), 30% Energy (Burnt Orange), 10% Excellence (Gold)
     ═══════════════════════════════════════════════════════════════════ */
  
  /* PRIMARY PALETTE - Authority & Foundation (60% Usage) */
  --black-authority: #000000;        /* Dominant Authority - Backgrounds, primary text, heavy borders */
  --dark-earth: #3F3A22;             /* Foundation Stability - Secondary backgrounds, footers, content cards */
  --dark-earth-alt: #2B2820;         /* Darker variant for depth */
  
  /* SECONDARY PALETTE - Controlled Energy (30% Usage) */
  --burnt-orange: #D37D3F;           /* Primary Energy - CTAs, section headers, progress indicators */
  --burnt-orange-dark: #B8682F;      /* Darker variant for hover states */
  --burnt-orange-light: #E89655;     /* Lighter variant for highlights */
  
  /* ACCENT PALETTE - Excellence & Prestige (10% Usage) */
  --gold-sand: #E8C67B;              /* Excellence - Iconography, decorative lines, hover states, badges */
  --gold-highlight: #F5D595;         /* Lighter gold for emphasis */
  --gold-deep: #D4A955;              /* Deeper gold for borders */
  
  /* FUNCTIONAL COLORS */
  --neutral-light: #F5F5F4;          /* Light backgrounds for contrast */
  --neutral-gray: #E0DED9;           /* Subtle borders and dividers */
  --text-on-dark: #FFFFFF;           /* White text on dark backgrounds */
  --text-on-light: #1A1815;          /* Dark text on light backgrounds */
  
  /* LEGACY SUPPORT - Mapped to README colors */
  --brand-primary: var(--black-authority);     /* Authority */
  --brand-secondary: var(--burnt-orange);      /* Energy */
  --accent: var(--gold-sand);                  /* Excellence */
  --neutral-dark: var(--dark-earth);           /* Stability */

  /* Design tokens */
  --radius: 50px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --ease: cubic-bezier(0.2, 0.9, 0.25, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ═══════════════════════════════════════════════════════════════════
     SURFACE GRADIENTS - 60-30-10 Rule Implementation
     Precise mathematical color theory for engineering brand authority
     ═══════════════════════════════════════════════════════════════════ */
  
  /* Light Surface - Subtle depth for cards and containers */
  --surface-gradient-light: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.18) 0%,          /* 60% Black authority - dominant start */
    rgba(63, 58, 34, 0.14) 25%,      /* 60% Dark earth foundation */
    rgba(211, 125, 63, 0.12) 55%,    /* 30% Burnt orange energy */
    rgba(232, 198, 123, 0.08) 80%,   /* 10% Gold excellence accent */
    rgba(0, 0, 0, 0.18) 100%          /* 60% Black authority - dominant end */
  );
  
  /* Strong Surface - Enhanced contrast for important elements */
  --surface-gradient-strong: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.28) 0%,          /* 60% Black authority enhanced */
    rgba(63, 58, 34, 0.24) 25%,      /* 60% Dark earth foundation */
    rgba(211, 125, 63, 0.20) 55%,    /* 30% Burnt orange energy */
    rgba(232, 198, 123, 0.15) 80%,   /* 10% Gold excellence */
    rgba(0, 0, 0, 0.28) 100%          /* 60% Black authority enhanced */
  );
  
  /* Authority Gradient - Vertical leadership flow */
  --surface-gradient-authority: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.25) 0%,          /* 60% Black leadership */
    rgba(63, 58, 34, 0.20) 30%,      /* 60% Dark earth foundation */
    rgba(211, 125, 63, 0.15) 70%,    /* 30% Burnt orange expertise */
    rgba(63, 58, 34, 0.18) 100%       /* 60% Dark earth stability */
  );
  
  /* Energy Gradient - Dynamic horizontal flow for CTAs */
  --surface-gradient-energy: linear-gradient(
    90deg,
    rgba(211, 125, 63, 0.95) 0%,     /* 30% Burnt orange - dominant */
    rgba(232, 198, 123, 0.85) 50%,   /* 10% Gold excellence blend */
    rgba(211, 125, 63, 0.95) 100%     /* 30% Burnt orange - dominant */
  );
  
  /* Excellence Gradient - Subtle gold accent flow */
  --surface-gradient-excellence: linear-gradient(
    135deg,
    rgba(232, 198, 123, 0.90) 0%,    /* 10% Gold start */
    rgba(245, 213, 149, 0.85) 50%,   /* 10% Gold highlight */
    rgba(212, 169, 85, 0.90) 100%     /* 10% Gold deep */
  );

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

  /* Typography scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.25);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.3);
  --shadow-2xl: 0 32px 64px rgba(0, 0, 0, 0.35);

  /* Z-index scale - Systematic layering */
  --z-base: 1;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  
  /* Component-specific z-index */
  --z-hero-background: -1;
  --z-hero-overlay: 0;
  --z-hero-content: 2;
  --z-hero-logo-video: 1;
  --z-hero-logo-frame: 3;
  --z-nav-header: 1030;
  --z-footer-content: 1;
  --z-card-content: 1;
  --z-whatsapp-fab: 1030;
}

/* Base body styles */
body {
    font-family: var(--font-secondary);
    margin: 0;
    background-color: var(--neutral-dark);
    background-image: url('../assets/images/logo/underground_theme.jpeg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    color: var(--text-on-dark);
    font-size: var(--font-scale-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Prevent zoom from affecting background positioning */
    background-repeat: no-repeat;
    background-origin: border-box;
}

/* Zoom accessibility - ensure content remains readable */
@media screen and (max-width: 768px) and (max-resolution: 2dppx) {
    body {
        background-attachment: scroll; /* Better performance on mobile zoom */
    }
}

/* High zoom level adjustments - prevent layout issues */
@media screen and (min-resolution: 2dppx) {
    body {
        background-size: auto; /* Prevent background distortion on zoom */
        background-position: top center; /* Maintain visual hierarchy */
    }
}

/* Page structure */
.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-content {
  flex: 1;
  padding: 6rem var(--space-md) var(--space-xl) var(--space-md);
}

/* Content sections */
.content-section {
   max-width: 1200px;
   margin: 0 auto;
   padding: var(--space-3xl) var(--space-md);
   text-align: center;
}

.section-intro {
   max-width: 600px;
   margin: 0 auto var(--space-xl) auto;
   font-size: var(--text-lg);
   opacity: 0.9;
   line-height: 1.7;
}

/* Stats section */
.stats-section {
  display: flex;
  justify-content: center;
  gap: var(--space-xl); /* separate the statistic cards */
  padding: var(--space-3xl) var(--space-md);
  text-align: center;
  /* Unified gradient surface instead of flat black to avoid "messy" look */
  background: var(--surface-gradient-light);
  border: 1px solid rgba(46, 139, 87, 0.15);
  border-radius: var(--radius);
  margin: var(--space-xl) auto;
  max-width: 1100px;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.25),
    0 2px 8px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(46, 139, 87, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Individual statistic card */
.brand-stat {
  min-width: 220px;
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius);
  background: rgba(35, 28, 22, 0.8);
  border: 1px solid rgba(46, 139, 87, 0.18);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(46, 139, 87, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.brand-stat:hover {
  transform: translateY(-4px);
  border-color: rgba(46, 139, 87, 0.55);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(46, 139, 87, 0.45), /* emerald-green hover glow */
    inset 0 1px 0 rgba(46, 139, 87, 0.2);
}

/* Number styling - README High-Contrast Authority Numbers */
.brand-stat__number {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 900;
  line-height: 1;
  /* 60-30-10 Rule: Authority gradient with controlled energy accents */
  background: linear-gradient(135deg,
    #000000 0%,          /* 60% Black authority - start */
    #3F3A22 20%,         /* 60% Dark earth foundation */
    #D37D3F 45%,         /* 30% Burnt orange energy - center */
    #E8C67B 70%,         /* 10% Gold excellence - accent */
    #3F3A22 85%,         /* 60% Dark earth stability */
    #000000 100%          /* 60% Black authority - end */
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  animation: stat-number-gradient 4s ease-in-out infinite;
}

/* Psychological animation for statistics */
@keyframes stat-number-gradient {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 50%; }
  50% { background-position: 200% 50%; }
  75% { background-position: 300% 50%; }
  100% { background-position: 0% 50%; }
}

/* Label styling */
.brand-stat__label {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.95;
}

/* Mobile: stack and keep spacing between cards */
@media (max-width: 768px) {
  .stats-section {
    flex-direction: column;
    gap: var(--space-lg);
  }
  .brand-stat {
    width: 100%;
  }
}

.stat-item h3 {
  font-size: var(--text-4xl);
  margin: 0;
  color: var(--gold-highlight);
}

/* Grid layouts */
.project-grid,
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--space-2xl);
  margin-top: var(--space-xl);
}

.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-xl);

  /* Create a clean gradient surface outside the document cards */
  position: relative;
  padding: var(--space-xl);
  border-radius: var(--radius);
}
.doc-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--surface-gradient-light);
  border: 1px solid rgba(46, 139, 87, 0.15);
  border-radius: var(--radius);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(46, 139, 87, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.doc-grid > * {
  position: relative; /* keep cards above gradient surface */
  z-index: 1;
}

/* Filter buttons */
.filter-buttons {
  margin-bottom: var(--space-xl);
  text-align: center;
}

.filter-btn {
  background: transparent;
  border: 1px solid var(--emerald-green);
  color: var(--emerald-green);
  padding: var(--space-sm) var(--space-md);
  margin: 0 var(--space-sm);
  cursor: pointer;
  transition: all 0.3s var(--ease);
  border-radius: 6px;
  font-weight: 500;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.filter-btn.active,
.filter-btn:hover {
  background: var(--emerald-green);
  color: var(--neutral-light);
  box-shadow: 0 0 15px rgba(46, 139, 87, 0.3);
}

/* Contact form */
.contact-form {
   display: flex;
   flex-direction: column;
   gap: var(--space-lg);
   max-width: 1800px; /* 50% wider than 1200px */
   margin: var(--space-3xl) auto 0 auto;
   width: 100%;
}

.form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space-lg);
}

.checkbox-group {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: var(--space-sm);
   margin-top: var(--space-sm);
}

.checkbox-group label {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
   font-size: var(--text-sm);
}

.radio-group {
   display: flex;
   gap: var(--space-md);
   margin-top: var(--space-sm);
}

.radio-group label {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
   font-size: var(--text-sm);
}

.checkbox-label {
   display: flex;
   align-items: flex-start;
   gap: var(--space-sm);
   font-size: var(--text-sm);
   line-height: 1.5;
   margin-top: var(--space-sm);
}

.checkbox-label a {
   color: var(--gold-sand);
   text-decoration: underline;
}

.checkbox-label a:hover {
   color: var(--gold-highlight);
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group-full {
  grid-column: 1 / -1;
}

.contact-form label {
   margin-bottom: var(--space-sm);
   font-weight: 600;
   font-size: var(--text-sm);
}

.contact-form input,
.contact-form textarea {
  background: rgba(46, 139, 87, 0.1);
  border: 1px solid rgba(46, 139, 87, 0.3);
  border-radius: 6px;
  padding: 0.75rem;
  color: var(--text-on-dark);
  font-size: var(--text-base);
  transition: all 0.3s var(--ease);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--emerald-green);
  box-shadow: 0 0 0 2px rgba(46, 139, 87, 0.2);
  background: rgba(46, 139, 87, 0.15);
}

/* WhatsApp FAB - README High-Contrast Authority Contact */
.whatsapp-fab {
  position: fixed;
  width: 60px;
  height: 60px;
  top: 50%;
  right: var(--space-md);
  transform: translateY(-50%);
  /* 60-30-10 Rule gradient flowing to WhatsApp green */
  background: linear-gradient(135deg,
    #000000 0%,          /* 60% Black authority - start */
    #3F3A22 15%,         /* 60% Dark earth foundation */
    #D37D3F 40%,         /* 30% Burnt orange energy */
    #E8C67B 60%,         /* 10% Gold excellence */
    #25D366 100%          /* WhatsApp green - destination */
  );
  background-size: 300% auto;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  /* Multi-layer shadow following 60-30-10 rule */
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.45),       /* 60% Black authority shadow - dominant */
    0 6px 18px rgba(63, 58, 34, 0.35),     /* 60% Dark earth depth */
    0 4px 15px rgba(211, 125, 63, 0.30),   /* 30% Burnt orange energy glow */
    0 2px 8px rgba(232, 198, 123, 0.20),   /* 10% Gold excellence shimmer */
    0 0 25px rgba(37, 211, 102, 0.35),     /* WhatsApp brand glow */
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  z-index: var(--z-whatsapp-fab);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: 1px solid rgba(232, 198, 123, 0.2); /* 10% Gold border accent */
  animation: fab-gradient-flow 6s ease-in-out infinite, whatsapp-explode 8s ease-in-out infinite;
  animation-delay: 0s, 3s; /* Start explode animation after 3 seconds */
}

/* Psychological gradient animation for global appeal */
@keyframes fab-gradient-flow {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 50%; }
  50% { background-position: 200% 50%; }
  75% { background-position: 300% 50%; }
  100% { background-position: 0% 50%; }
}

/* WhatsApp Explode Effect - Thematic for explosives company */
@keyframes whatsapp-explode {
  /* Normal state (0-10%) */
  0%, 10% {
    transform: translateY(-50%) scale(1) rotate(0deg);
    opacity: 1;
    filter: blur(0px);
  }

  /* Build up energy (10-20%) */
  10%, 20% {
    transform: translateY(-50%) scale(1.1) rotate(5deg);
    opacity: 1;
    filter: blur(0px);
    box-shadow:
      0 15px 40px rgba(0, 0, 0, 0.55),
      0 8px 25px rgba(63, 58, 34, 0.45),
      0 5px 20px rgba(211, 125, 63, 0.40),
      0 3px 12px rgba(232, 198, 123, 0.30),
      0 0 35px rgba(37, 211, 102, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }

  /* Explosion start - break apart (20-35%) */
  20%, 35% {
    transform: translateY(-50%) scale(1.3) rotate(15deg);
    opacity: 0.8;
    filter: blur(1px);
    box-shadow:
      0 20px 50px rgba(0, 0, 0, 0.65),
      0 10px 30px rgba(63, 58, 34, 0.55),
      0 6px 25px rgba(211, 125, 63, 0.50),
      0 4px 15px rgba(232, 198, 123, 0.40),
      0 0 45px rgba(37, 211, 102, 0.55),
      5px 5px 20px rgba(211, 125, 63, 0.6),
      -5px -5px 20px rgba(232, 198, 123, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.45);
  }

  /* Full explosion - particle effect (35-50%) */
  35%, 50% {
    transform: translateY(-50%) scale(1.5) rotate(45deg);
    opacity: 0.4;
    filter: blur(2px);
    box-shadow:
      0 25px 60px rgba(0, 0, 0, 0.75),
      0 12px 35px rgba(63, 58, 34, 0.65),
      0 8px 30px rgba(211, 125, 63, 0.60),
      0 5px 20px rgba(232, 198, 123, 0.50),
      0 0 55px rgba(37, 211, 102, 0.65),
      10px 10px 30px rgba(211, 125, 63, 0.8),
      -10px -10px 30px rgba(232, 198, 123, 0.7),
      15px -5px 25px rgba(63, 58, 34, 0.6),
      -15px 5px 25px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.55);
  }

  /* Vanish completely (50-70%) */
  50%, 70% {
    transform: translateY(-50%) scale(0.1) rotate(180deg);
    opacity: 0;
    filter: blur(5px);
    box-shadow:
      0 30px 70px rgba(0, 0, 0, 0.85),
      0 15px 40px rgba(63, 58, 34, 0.75),
      0 10px 35px rgba(211, 125, 63, 0.70),
      0 6px 25px rgba(232, 198, 123, 0.60),
      0 0 65px rgba(37, 211, 102, 0.75),
      20px 20px 40px rgba(211, 125, 63, 1),
      -20px -20px 40px rgba(232, 198, 123, 0.9),
      25px -10px 35px rgba(63, 58, 34, 0.8),
      -25px 10px 35px rgba(0, 0, 0, 0.7);
  }

  /* Reappear - smooth return (70-90%) */
  70%, 90% {
    transform: translateY(-50%) scale(0.8) rotate(90deg);
    opacity: 0.6;
    filter: blur(1px);
    box-shadow:
      0 15px 40px rgba(0, 0, 0, 0.55),
      0 8px 25px rgba(63, 58, 34, 0.45),
      0 5px 20px rgba(211, 125, 63, 0.40),
      0 3px 12px rgba(232, 198, 123, 0.30),
      0 0 35px rgba(37, 211, 102, 0.45);
  }

  /* Back to normal (90-100%) */
  90%, 100% {
    transform: translateY(-50%) scale(1) rotate(0deg);
    opacity: 1;
    filter: blur(0px);
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.45),
      0 6px 18px rgba(63, 58, 34, 0.35),
      0 4px 15px rgba(211, 125, 63, 0.30),
      0 2px 8px rgba(232, 198, 123, 0.20),
      0 0 25px rgba(37, 211, 102, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
}

.whatsapp-fab:hover {
   transform: translateY(-50%) translateY(-8px) scale(1.12);
   /* Enhanced 60-30-10 shadows on hover */
   box-shadow:
     0 18px 45px rgba(0, 0, 0, 0.55),       /* 60% Enhanced black authority - dominant */
     0 12px 30px rgba(63, 58, 34, 0.45),    /* 60% Dark earth enhanced depth */
     0 8px 20px rgba(211, 125, 63, 0.40),   /* 30% Burnt orange energy amplified */
     0 4px 12px rgba(232, 198, 123, 0.35),  /* 10% Gold excellence enhanced */
     0 0 35px rgba(37, 211, 102, 0.45),     /* WhatsApp enhanced glow */
     inset 0 1px 0 rgba(255, 255, 255, 0.35);
   border-color: rgba(232, 198, 123, 0.4); /* 10% Gold border enhanced */
   filter: brightness(1.08); /* Slight brightness lift for impact */
   animation-duration: 3s; /* Smoother animation on hover */
   /* Override explode animation on hover for better UX */
   animation-play-state: paused;
}

.whatsapp-fab:hover svg {
   color: #2E8B57; /* Emerald green effect on the phone icon */
   filter: drop-shadow(0 0 8px rgba(46, 139, 87, 0.8)); /* Emerald glow effect */
}

.whatsapp-fab svg {
  width: 32px;
  height: 32px;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Disable explode animation for accessibility */
  .whatsapp-fab {
    animation: fab-gradient-flow 6s ease-in-out infinite !important;
  }
}

/* Focus styles for keyboard navigation */
*:focus {
  outline: 2px solid var(--emerald-green);
  outline-offset: 2px;
}

/* Skip link for screen readers */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--emerald-green);
  color: var(--text-on-dark);
  padding: 8px;
  text-decoration: none;
  border-radius: 4px;
  z-index: var(--z-tooltip);
}

.skip-link:focus {
  top: 6px;
}

/* Skip link for screen readers */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--emerald-green);
  color: var(--text-on-dark);
  padding: 8px;
  text-decoration: none;
  border-radius: 4px;
  z-index: var(--z-tooltip);
}

.skip-link:focus {
  top: 6px;
}

/* Responsive design */
@media (max-width: 768px) {
   .page-content {
     padding: 5rem var(--space-sm) var(--space-lg) var(--space-sm);
   }

   /* Mobile tuning for gradient surfaces */
   .doc-grid {
     padding: var(--space-lg);
     gap: var(--space-lg);
   }
   .stats-section {
     padding: var(--space-2xl) var(--space-md);
   }

   .content-section {
     padding: var(--space-xl) var(--space-sm);
   }

   .stats-section {
     flex-direction: column;
     gap: var(--space-xl);
   }

   .project-grid,
   .gallery-grid,
   .doc-grid {
     grid-template-columns: 1fr;
     gap: var(--space-lg);
   }

   .service-grid {
     grid-template-columns: 1fr;
     gap: var(--space-lg);
   }

   .contact-form {
     gap: var(--space-md);
   }

   .form-row {
     grid-template-columns: 1fr;
     gap: var(--space-md);
   }

   .checkbox-group {
     grid-template-columns: 1fr;
     gap: var(--space-sm);
   }

   .radio-group {
     flex-direction: column;
     gap: var(--space-sm);
   }

   .whatsapp-fab {
     width: 50px;
     height: 50px;
     right: var(--space-sm);
   }

   .whatsapp-fab svg {
     width: 24px;
     height: 24px;
   }
 }

@media (max-width: 480px) {
  .page-content {
    padding: 4rem var(--space-xs) var(--space-md) var(--space-xs);
  }

  .content-section {
    padding: var(--space-lg) var(--space-xs);
  }
}
/* Performance Optimizations */
/* Optimize images with better loading */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: auto;
}

/* Improve scroll performance */
html {
  scroll-behavior: smooth;
}

/* Optimize video loading */
video {
  background: #000;
}

/* Improve loading experience */
.loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
   0% {
     background-position: 200% 0;
   }
   100% {
     background-position: -200% 0;
   }
}

/* Projects page title gradient effect */
.projects-title-gradient {
    background: linear-gradient(135deg,
        #50C878 0%,     /* Emerald green start */
        #40E0D0 25%,    /* Turquoise */
        #00FF7F 50%,    /* Spring green center */
        #8B4513 75%,    /* Saddle brown */
        #D37D3F 100%    /* Burnt orange end */
    );
    background-size: 300% auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    animation: projects-title-gradient-animation 4s ease-in-out infinite;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 20px rgba(80, 200, 120, 0.5), 0 0 40px rgba(211, 125, 63, 0.3);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Projects title gradient animation */
@keyframes projects-title-gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Strategic Alliances page title gradient effect */
.alliances-title-gradient {
    background: linear-gradient(135deg,
        #50C878 0%,     /* Emerald green start */
        #40E0D0 25%,    /* Turquoise */
        #00FF7F 50%,    /* Spring green center */
        #8B4513 75%,    /* Saddle brown */
        #D37D3F 100%    /* Burnt orange end */
    );
    background-size: 300% auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    animation: alliances-title-gradient-animation 4s ease-in-out infinite;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 20px rgba(80, 200, 120, 0.5), 0 0 40px rgba(211, 125, 63, 0.3);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Alliances title gradient animation */
@keyframes alliances-title-gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Contact page inquiry text gradient effect - smaller size */
.contact-inquiry-gradient {
    background: linear-gradient(135deg,
        #50C878 0%,     /* Emerald green start */
        #40E0D0 25%,    /* Turquoise */
        #00FF7F 50%,    /* Spring green center */
        #8B4513 75%,    /* Saddle brown */
        #D37D3F 100%    /* Burnt orange end */
    );
    background-size: 200% auto; /* Smaller size than titles */
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    animation: contact-inquiry-gradient-animation 3s ease-in-out infinite; /* Faster animation */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 10px rgba(80, 200, 120, 0.4), 0 0 20px rgba(211, 125, 63, 0.2);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
    font-size: 1.1rem; /* Slightly larger for emphasis */
    font-weight: 500;
}

/* Contact inquiry gradient animation */
@keyframes contact-inquiry-gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Gallery filter buttons gold gradient effect */
.filter-gradient-gold {
    background: linear-gradient(135deg,
        #FFD700 0%,     /* Gold start */
        #FFA500 25%,    /* Orange */
        #FFFF00 50%,    /* Yellow center */
        #FF8C00 75%,    /* Dark orange */
        #FFD700 100%    /* Gold end */
    );
    background-size: 250% auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    animation: filter-gold-gradient-animation 3.5s ease-in-out infinite;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 15px rgba(255, 215, 0, 0.4), 0 0 25px rgba(255, 165, 0, 0.3);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    font-weight: 600;
    font-size: 0.95rem;
}

/* Filter gold gradient animation */
@keyframes filter-gold-gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Projects page filter buttons gold gradient effect */
.projects-filter-gradient-gold {
    background: linear-gradient(135deg,
        #FFD700 0%,     /* Gold start */
        #FFA500 25%,    /* Orange */
        #FFFF00 50%,    /* Yellow center */
        #FF8C00 75%,    /* Dark orange */
        #FFD700 100%    /* Gold end */
    );
    background-size: 250% auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    animation: projects-filter-gold-gradient-animation 3.5s ease-in-out infinite;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 15px rgba(255, 215, 0, 0.4), 0 0 25px rgba(255, 165, 0, 0.3);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    font-weight: 600;
    font-size: 0.95rem;
}

/* Projects filter gold gradient animation */
@keyframes projects-filter-gold-gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Services experience brown gradient effect */
.services-experience-brown {
    background: linear-gradient(135deg,
        #8B4513 0%,     /* Saddle brown start */
        #A0522D 25%,    /* Sienna */
        #CD853F 50%,    /* Peru center */
        #D2691E 75%,    /* Chocolate */
        #8B4513 100%    /* Saddle brown end */
    );
    background-size: 280% auto; /* Medium size for title */
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    animation: services-experience-brown-gradient-animation 4.2s ease-in-out infinite;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 18px rgba(139, 69, 19, 0.5), 0 0 32px rgba(205, 133, 63, 0.3);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    font-weight: 700;
    font-size: 2.5rem;
}

/* Services experience brown gradient animation */
@keyframes services-experience-brown-gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Services description burnt orange gradient effect */
.services-description-burnt-orange {
    background: linear-gradient(135deg,
        #D37D3F 0%,     /* Burnt orange start */
        #B8682F 25%,    /* Darker burnt orange */
        #E89655 50%,    /* Lighter burnt orange center */
        #D37D3F 75%,    /* Burnt orange */
        #B8682F 100%    /* Darker burnt orange end */
    );
    background-size: 250% auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    animation: services-description-burnt-orange-gradient-animation 3.8s ease-in-out infinite;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 15px rgba(211, 125, 63, 0.4), 0 0 25px rgba(184, 104, 47, 0.3);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    font-weight: 500;
    font-size: 1.05rem; /* Original size for general use */
    line-height: 1.6;
}

/* Specific rule for contact form labels - 50% bigger */
.contact-form .services-description-burnt-orange {
    font-size: 1.575rem; /* 50% bigger than 1.05rem - only for contact form */
}

/* Contact intro large text - 50% bigger */
.contact-intro-large {
    font-size: 1.575rem !important; /* 50% bigger than 1.05rem */
}

/* WhatsApp button enhanced effects */
.whatsapp-btn-enhanced {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,
        #C47845 0%,     /* Burnt Orange - background color start */
        #E6B885 15%,    /* Light Gold - highlight areas */
        #D4A574 35%,    /* Main Gold - primary text color */
        #B8956A 50%,    /* Deep Bronze - shadow areas */
        #C47845 65%,    /* Burnt Orange - enhanced background */
        #D4A574 80%,    /* Main Gold - primary text color */
        #E6B885 100%    /* Light Gold - highlight areas */
    ) !important;
    background-size: 400% auto !important;
    color: transparent !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    animation: services-golden-gradient-animation 4s ease-in-out infinite !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 20px rgba(196, 120, 69, 0.6), 0 0 40px rgba(212, 165, 116, 0.4) !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    border: 2px solid rgba(212, 165, 116, 0.3) !important;
    border-radius: 12px !important;
    padding: 1rem 2rem !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow:
        0 8px 24px rgba(211, 125, 63, 0.3),
        0 4px 12px rgba(232, 198, 123, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.whatsapp-btn-enhanced:hover {
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow:
        0 16px 40px rgba(211, 125, 63, 0.4),
        0 8px 20px rgba(232, 198, 123, 0.3),
        0 0 30px rgba(196, 120, 69, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(212, 165, 116, 0.6) !important;
    filter: brightness(1.1) !important;
}

.whatsapp-btn-enhanced::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.6s ease;
}

.whatsapp-btn-enhanced:hover::before {
    left: 100%;
}

/* Center text utility class */
.text-center {
    text-align: center !important;
}

/* Justify text utility class */
.text-justify {
    text-align: justify !important;
}

/* Two-column card layout for home page cards */
.card__content--two-column {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    padding: 0 1rem;
}

.card__title-section {
    flex: 0 0 30%;
    text-align: left;
    min-width: 200px;
}

.card__description-section {
    flex: 1;
    text-align: left;
    max-width: 100%;
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
    .card__content--two-column {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        padding: 0;
    }

    .card__title-section,
    .card__description-section {
        flex: none;
        text-align: center;
        min-width: unset;
    }
}

/* Tablet adjustments */
@media (max-width: 1024px) and (min-width: 769px) {
    .card__content--two-column {
        gap: 1.5rem;
        padding: 0 0.5rem;
    }

    .card__title-section {
        flex: 0 0 35%;
        min-width: 180px;
    }
}

/* Document title link styling */
.document-title-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.document-title-link:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* Service card link styling */
.service-card-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block;
    transition: transform 0.3s ease;
}

.service-card-link:hover .service-card {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 20px 50px rgba(211, 125, 63, 0.15),
        0 10px 20px rgba(232, 198, 123, 0.1),
        0 0 0 1px rgba(211, 125, 63, 0.3);
}

/* Enhanced download button styling */
.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg,
        #D37D3F 0%,     /* Burnt orange start */
        #E8C67B 50%,    /* Gold center */
        #D37D3F 100%    /* Burnt orange end */
    );
    background-size: 200% auto;
    color: #FFFFFF !important;
    text-decoration: none !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow:
        0 4px 12px rgba(211, 125, 63, 0.3),
        0 2px 6px rgba(232, 198, 123, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(232, 198, 123, 0.3);
    animation: btn-download-shimmer 3s ease-in-out infinite;
}

.btn-download:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow:
        0 8px 20px rgba(211, 125, 63, 0.4),
        0 4px 12px rgba(232, 198, 123, 0.3),
        0 0 20px rgba(211, 125, 63, 0.2);
    background-position: right center;
    border-color: rgba(232, 198, 123, 0.6);
}

.btn-download svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.btn-download:hover svg {
    transform: translateY(-1px);
}

/* Shimmer animation for download buttons */
@keyframes btn-download-shimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Services description burnt orange gradient animation */
@keyframes services-description-burnt-orange-gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Gradient text card effect - emerald green transparent with burnt orange hover */
.gradient-text-card {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
    padding: 1.5rem 2rem;
    border-radius: 12px;
    background: rgba(80, 200, 120, 0.08); /* Emerald green transparent */
    border: 1px solid rgba(80, 200, 120, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(80, 200, 120, 0.05);
    margin: 1rem auto;
    text-align: center;
}

.gradient-text-card:hover {
    background: rgba(46, 139, 87, 0.15); /* Emerald green on hover */
    border-color: rgba(46, 139, 87, 0.25);
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.15),
        0 0 20px rgba(46, 139, 87, 0.2), /* Emerald glow */
        inset 0 1px 0 rgba(46, 139, 87, 0.1);
}

/* Center titles and justify text within cards */
.gradient-text-card h3 {
    text-align: center;
    margin-bottom: 1rem;
}

.gradient-text-card p {
    text-align: justify;
    line-height: 1.6;
}

/* For buttons, keep inline behavior */
.gradient-text-card.filter-btn {
    display: inline-block;
    width: auto;
    margin: 0.25rem;
    text-align: center;
}

/* Combined text card for multiple elements */
.combined-text-card {
    text-align: center;
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
}

.combined-text-card .section-title {
    margin-bottom: 1rem;
    font-size: 2.2rem;
}

.combined-text-card .service-description {
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
}

/* Strategic alliances intro text gradient effect */
.alliances-intro-gradient {
    background: linear-gradient(135deg,
        #50C878 0%,     /* Emerald green start */
        #40E0D0 25%,    /* Turquoise */
        #00FF7F 50%,    /* Spring green center */
        #8B4513 75%,    /* Saddle brown */
        #D37D3F 100%    /* Burnt orange end */
    );
    background-size: 220% auto; /* Medium size for intro text */
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    animation: alliances-intro-gradient-animation 3.5s ease-in-out infinite;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 12px rgba(80, 200, 120, 0.4), 0 0 22px rgba(211, 125, 63, 0.2);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
    font-size: 1.05rem; /* Slightly larger for emphasis */
    font-weight: 500;
    line-height: 1.6;
}

/* Alliances intro gradient animation */
@keyframes alliances-intro-gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Emerald gradient effect for strategic alliances */
.emerald-gradient {
    background: linear-gradient(135deg,
        #50C878 0%,     /* Emerald green start */
        #40E0D0 25%,    /* Turquoise */
        #00FF7F 50%,    /* Spring green center */
        #32CD32 75%,    /* Lime green */
        #50C878 100%    /* Emerald green end */
    );
    background-size: 300% auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    animation: emerald-gradient-animation 4s ease-in-out infinite;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 20px rgba(80, 200, 120, 0.5), 0 0 40px rgba(64, 224, 208, 0.3);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    font-weight: 700;
    font-size: 1.8rem; /* 20% bigger than 1.5rem */
}

/* Emerald gradient animation */
@keyframes emerald-gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Glass card effect for strategic alliances */
.glass-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 1800px; /* 50% wider than 1200px */
    margin: 0 auto var(--space-lg) auto; /* Added bottom margin for separation */
    padding: var(--space-xl);
}

.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
        rgba(80, 200, 120, 0.05) 0%,
        rgba(64, 224, 208, 0.03) 50%,
        rgba(80, 200, 120, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(80, 200, 120, 0.35); /* Enhanced emerald border */
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.18),
        0 6px 16px rgba(0, 0, 0, 0.12),
        0 0 32px rgba(80, 200, 120, 0.25), /* Stronger emerald glow */
        0 0 48px rgba(64, 224, 208, 0.15), /* Turquoise glow */
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-6px) scale(1.01); /* Enhanced lift and slight scale */
}

.glass-card:hover::before {
    opacity: 1;
    background: linear-gradient(135deg,
        rgba(80, 200, 120, 0.12) 0%, /* Stronger emerald */
        rgba(64, 224, 208, 0.08) 50%, /* Enhanced turquoise */
        rgba(80, 200, 120, 0.12) 100% /* Stronger emerald */
    );
}

/* Emerald Burnt Orange Card Effect */
.emerald-burnt-orange-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(80, 200, 120, 0.2);
    border-radius: 16px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.emerald-burnt-orange-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
        rgba(80, 200, 120, 0.08) 0%,    /* Emerald green */
        rgba(211, 125, 63, 0.06) 50%,   /* Burnt orange */
        rgba(80, 200, 120, 0.08) 100%   /* Emerald green */
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.emerald-burnt-orange-card:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(80, 200, 120, 0.35);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.1),
        0 0 25px rgba(80, 200, 120, 0.15),    /* Emerald glow */
        0 0 15px rgba(211, 125, 63, 0.1),     /* Burnt orange glow */
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-4px);
}

.emerald-burnt-orange-card:hover::before {
    opacity: 1;
}

/* Emerald Hover Card Effect */
.emerald-hover-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.emerald-hover-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
        rgba(80, 200, 120, 0.05) 0%,    /* Emerald green */
        rgba(64, 224, 208, 0.03) 50%,   /* Turquoise */
        rgba(80, 200, 120, 0.05) 100%   /* Emerald green */
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.emerald-hover-card:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(80, 200, 120, 0.25);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.1),
        0 0 25px rgba(80, 200, 120, 0.15),    /* Emerald glow */
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-4px);
}

.emerald-hover-card:hover::before {
    opacity: 1;
}

/* Separate alliance cards with proper spacing */
.alliance-item {
    margin-bottom: 2rem;
}

.alliance-item:last-child {
    margin-bottom: 0;
}

/* Golden gradient effect for "Oferta de Servicios" */
.services-golden-gradient {
    background: linear-gradient(135deg,
        #C47845 0%,     /* Burnt Orange - background color start */
        #E6B885 15%,    /* Light Gold - highlight areas */
        #D4A574 35%,    /* Main Gold - primary text color */
        #B8956A 50%,    /* Deep Bronze - shadow areas */
        #C47845 65%,    /* Burnt Orange - enhanced background */
        #D4A574 80%,    /* Main Gold - primary text color */
        #E6B885 100%    /* Light Gold - highlight areas */
    );
    background-size: 400% auto;
    color: transparent !important; /* Force transparent to override any other color rules */
    background-clip: text;
    -webkit-background-clip: text;
    animation: services-golden-gradient-animation 4s ease-in-out infinite;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 20px rgba(196, 120, 69, 0.6), 0 0 40px rgba(212, 165, 116, 0.4);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    font-weight: 700;
    font-size: 2.2rem;
}

/* Emerald gradient for subtitles (h4 elements) in glass cards only */
.glass-card h4 {
    background: linear-gradient(135deg,
        #50C878 0%,     /* Emerald green start */
        #40E0D0 25%,    /* Turquoise */
        #00FF7F 50%,    /* Spring green center */
        #32CD32 75%,    /* Lime green */
        #50C878 100%    /* Emerald green end */
    );
    background-size: 300% auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    animation: emerald-subtitle-gradient-animation 4s ease-in-out infinite;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 20px rgba(80, 200, 120, 0.5), 0 0 40px rgba(64, 224, 208, 0.3);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    font-weight: 600;
    font-size: 1.1rem;
    margin: 1.5rem 0 0.5rem 0;
}

/* Emerald subtitle gradient animation */
@keyframes emerald-subtitle-gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Golden gradient animation for services */
@keyframes services-golden-gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Glass effect for document cards */
.document-glass-effect {
    background: rgba(211, 125, 63, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(211, 125, 63, 0.15) !important;
    border-radius: 12px !important;
    box-shadow:
        0 8px 24px rgba(211, 125, 63, 0.12),
        0 4px 12px rgba(232, 198, 123, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 1rem !important; /* Add spacing between cards */
    padding: 1.5rem !important; /* Increase padding for better separation */
}

.document-glass-effect:hover {
    background: rgba(211, 125, 63, 0.12) !important;
    border-color: rgba(211, 125, 63, 0.25) !important;
    box-shadow:
        0 12px 32px rgba(211, 125, 63, 0.18),
        0 6px 16px rgba(232, 198, 123, 0.12),
        0 0 20px rgba(211, 125, 63, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-4px) !important;
   margin: 0.5rem !important; /* Reduce margin on hover for tighter effect */
}