/*
Theme Name: ASMA AFRIQUE
Theme URI: https://asmaafrique.com
Author: Aliou Bop
Description: Thème premium personnalisé pour ASMA AFRIQUE - Design System v4.0 épuré, moderne et performant.
Version: 4.0.0
Text Domain: asma-afrique
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Poppins:wght@500;600;700&display=swap');


:root {
   /* ═══════════════════════════════════════════════════════════════
      ASMA AFRIQUE - Refined Design System v4.0
      Palette épurée, élégante et professionnelle
   ═══════════════════════════════════════════════════════════════ */

   /* Navy Palette - Backgrounds */
   --color-navy-darkest: #0a1628;
   --color-navy-dark: #0f2038;
   --color-navy-card: #142744;
   --color-navy-lighter: #1d3557;
   --color-navy-surface: rgba(20, 39, 68, 0.6);

   /* Accent - Refined Teal (moins néon, plus élégant) */
   --color-accent: #2e7d85;
   --color-accent-bright: #5ba4ac;
   --color-accent-dim: rgba(46, 125, 133, 0.12);
   --color-accent-glow: rgba(46, 125, 133, 0.25);

   /* Text Colors */
   --color-white: #e8edf3;
   --color-slate: #8fa0b8;
   --color-slate-light: #b8c5d6;

   /* Typography */
   --font-heading: 'Poppins', sans-serif;
   --font-body: 'Inter', sans-serif;

   /* Transitions - Smooth & Professional */
   --transition: all 0.3s ease-out;
   --transition-fast: all 0.2s ease-out;
   --transition-slow: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);

   /* Shadows - Simplified (3 levels only) */
   --shadow-subtle: 0 4px 20px -8px rgba(10, 22, 40, 0.4);
   --shadow-medium: 0 10px 40px -12px rgba(10, 22, 40, 0.6);
   --shadow-strong: 0 20px 50px -15px rgba(10, 22, 40, 0.8);

   /* Legacy shadow support */
   --shadow-soft: var(--shadow-subtle);
   --shadow-hover: var(--shadow-medium);
   --shadow-glow: 0 0 15px var(--color-accent-glow);
   --shadow-card: var(--shadow-medium);

   /* Glass Effects - Refined */
   --glass-bg: rgba(20, 39, 68, 0.7);
   --glass-border: 1px solid rgba(255, 255, 255, 0.06);
   --glass-blur: blur(16px);

   /* Spacing */
   --section-padding: clamp(60px, 10vw, 100px);
   --container-padding: clamp(20px, 5vw, 40px);

   /* Border Radius - Unified */
   --radius-sm: 8px;
   --radius-md: 16px;
   --radius-lg: 24px;

   /* Border */
   --border-subtle: 1px solid rgba(255, 255, 255, 0.05);
   --border-medium: 1px solid rgba(255, 255, 255, 0.08);
   --border-accent: 1px solid rgba(46, 125, 133, 0.3);
}

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

html {
   scroll-behavior: smooth;
}

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

ul {
   list-style: none;
}

.container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
   height: 100%;
}

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

/* Consistent Page Header */
.page-header {
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
   padding: clamp(120px, 15vw, 180px) 0 clamp(60px, 10vw, 100px);
   text-align: center;
   position: relative;
   margin-bottom: clamp(30px, 5vw, 50px);
}

.page-header h1 {
   font-size: 3rem;
   margin-bottom: 20px;
   color: var(--color-white);
}

.page-header p {
   font-size: 1.2rem;
   color: var(--color-slate-light);
   max-width: 800px;
   margin: 0 auto;
}

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

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

body {
   font-family: var(--font-body);
   color: var(--color-slate);
   line-height: 1.6;
   background-color: var(--color-navy-darkest);
   overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--font-heading);
   color: var(--color-white);
   font-weight: 600;
   line-height: 1.2;
   letter-spacing: -0.02em;
}

h1 {
   font-size: clamp(2.2rem, 8vw, 4.5rem);
   line-height: 1.1;
}

h2 {
   font-size: clamp(1.8rem, 6vw, 3.2rem);
   line-height: 1.2;
}

h3 {
   font-size: clamp(1.3rem, 4vw, 2.2rem);
}

p {
   font-size: clamp(0.95rem, 1vw + 0.5rem, 1.1rem);
}

/* Glassmorphism Utility */
.glass {
   background: var(--glass-bg);
   backdrop-filter: var(--glass-blur);
   -webkit-backdrop-filter: var(--glass-blur);
   border: var(--glass-border);
   box-shadow: var(--shadow-soft);
}

/* Typography Utilities */
.hero-heading {
   font-weight: 700;
   letter-spacing: -0.03em;
   text-shadow: 0 5px 15px rgba(2, 12, 27, 0.5);
}

.sub-heading {
   color: var(--color-accent);
   text-transform: uppercase;
   letter-spacing: 2px;
   font-size: 0.85rem;
   font-weight: 600;
   margin-bottom: 10px;
   display: block;
}

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

/* Preloader & Page Transitions */
#preloader {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--color-navy-darkest);
   z-index: 99999;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

#preloader.loaded {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
}

.loader-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
}

.logo-pulse img {
   height: 80px;
   width: auto;
   animation: pulseLogo 2s infinite ease-in-out;
}

.loading-bar {
   width: 200px;
   height: 2px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 2px;
   overflow: hidden;
}

.bar-progress {
   width: 0%;
   height: 100%;
   background: var(--color-accent);
   animation: loadProgress 2s ease-in-out forwards;
}

@keyframes pulseLogo {
   0% {
      transform: scale(1);
      opacity: 0.8;
   }

   50% {
      transform: scale(1.05);
      opacity: 1;
      filter: drop-shadow(0 0 10px rgba(0, 173, 181, 0.5));
   }

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

@keyframes loadProgress {
   0% {
      width: 0%;
   }

   50% {
      width: 70%;
   }

   100% {
      width: 100%;
   }
}

/* ═══════════════════════════════════════════════════════════════
   UNIFIED ANIMATION SYSTEM v4.0
   Animations cohérentes pour tout le site
═══════════════════════════════════════════════════════════════ */

/* Keyframes - Fade In Up */
@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }

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

/* Keyframes - Fade In */
@keyframes fadeIn {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

/* Keyframes - Scale In */
@keyframes scaleIn {
   from {
      opacity: 0;
      transform: scale(0.9);
   }

   to {
      opacity: 1;
      transform: scale(1);
   }
}

/* Keyframes - Slide In Left */
@keyframes slideInLeft {
   from {
      opacity: 0;
      transform: translateX(-40px);
   }

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

/* Keyframes - Slide In Right */
@keyframes slideInRight {
   from {
      opacity: 0;
      transform: translateX(40px);
   }

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

/* Animation Utility Classes - Visible by Default with CSS Animation */
.animate-up {
   animation: fadeInUp 0.6s ease-out forwards;
}

.animate-up.animated {
   opacity: 1;
   transform: translateY(0);
}

.animate-reveal {
   animation: fadeInUp 0.5s ease-out forwards;
}

.animate-reveal.animated {
   opacity: 1;
   transform: translateY(0);
}

.animate-scale {
   animation: scaleIn 0.5s ease-out forwards;
}

.animate-scale.animated {
   opacity: 1;
   transform: scale(1);
}

/* Stagger Children - Auto Animate */
.stagger-children>* {
   animation: fadeInUp 0.4s ease-out forwards;
}

.stagger-children>*:nth-child(1) {
   animation-delay: 0.05s;
}

.stagger-children>*:nth-child(2) {
   animation-delay: 0.1s;
}

.stagger-children>*:nth-child(3) {
   animation-delay: 0.15s;
}

.stagger-children>*:nth-child(4) {
   animation-delay: 0.2s;
}

.stagger-children>*:nth-child(5) {
   animation-delay: 0.25s;
}

.stagger-children>*:nth-child(6) {
   animation-delay: 0.3s;
}

/* Animation Delays */
.delay-1 {
   transition-delay: 0.1s;
}

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

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

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

.delay-5 {
   transition-delay: 0.5s;
}

/* Staggered Children Animation */
.stagger-children>* {
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.stagger-children.animated>*:nth-child(1) {
   transition-delay: 0.05s;
}

.stagger-children.animated>*:nth-child(2) {
   transition-delay: 0.1s;
}

.stagger-children.animated>*:nth-child(3) {
   transition-delay: 0.15s;
}

.stagger-children.animated>*:nth-child(4) {
   transition-delay: 0.2s;
}

.stagger-children.animated>*:nth-child(5) {
   transition-delay: 0.25s;
}

.stagger-children.animated>*:nth-child(6) {
   transition-delay: 0.3s;
}

.stagger-children.animated>* {
   opacity: 1;
   transform: translateY(0);
}

/* Hover Animations - Unified */
.hover-lift {
   transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

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

.hover-glow {
   transition: box-shadow 0.3s ease-out, border-color 0.3s ease-out;
}

.hover-glow:hover {
   box-shadow: 0 0 20px var(--color-accent-glow);
   border-color: var(--color-accent);
}

/* Icon Spin on Hover */
.hover-spin:hover i,
.hover-spin:hover .icon {
   transform: rotate(10deg) scale(1.1);
}

/* Page Transition Overlay */
body {
   opacity: 0;
   transition: opacity 0.5s ease-in-out;
}

body.page-loaded {
   opacity: 1;
}

/* Scroll Progress Bar */
#scroll-progress {
   position: fixed;
   top: 0;
   left: 0;
   height: 3px;
   background: var(--color-accent);
   z-index: 10000;
   width: 0%;
   transition: width 0.1s linear;
}

/* Noise Texture Overlay */
body::before {
   content: "";
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
   pointer-events: none;
   z-index: 9999;
   opacity: 0.03;
   z-index: 9999;
   pointer-events: none;
   mix-blend-mode: overlay;
}

/* --- PREMIUM UI ELEMENTS --- */

/* Premium Card - Refined v4.0 */
.premium-card {
   background: var(--color-navy-surface);
   backdrop-filter: var(--glass-blur);
   -webkit-backdrop-filter: var(--glass-blur);
   padding: 35px;
   border-radius: var(--radius-md);
   border: var(--border-subtle);
   box-shadow: var(--shadow-subtle);
   transition: var(--transition);
   display: flex;
   flex-direction: column;
   height: 100%;
   position: relative;
   overflow: hidden;
}

.premium-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 3px;
   background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
   opacity: 0;
   transition: var(--transition);
}

.premium-card:hover::before {
   opacity: 0.8;
}

.premium-card:hover {
   transform: translateY(-5px);
   border-color: var(--color-accent-dim);
   box-shadow: var(--shadow-medium);
}

/* Feature Card (Unified System) */
.feature-card {
   background: rgba(17, 34, 64, 0.5);
   border: 1px solid rgba(255, 255, 255, 0.05);
   padding: 35px;
   border-radius: 16px;
   transition: var(--transition);
   text-decoration: none !important;
   display: flex;
   flex-direction: column;
   gap: 15px;
   height: 100%;
   position: relative;
}

.feature-card .icon {
   width: 60px;
   height: 60px;
   background: var(--color-accent-dim);
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
   color: var(--color-accent);
   transition: var(--transition);
}

.feature-card h3 {
   font-size: 1.25rem;
   margin: 10px 0 5px;
   color: var(--color-white);
   transition: var(--transition);
}

.feature-card p {
   font-size: 0.95rem;
   color: var(--color-slate);
   line-height: 1.6;
}

.feature-card:hover {
   background: rgba(17, 34, 64, 0.9);
   border-color: var(--color-accent);
   transform: translateY(-5px);
   box-shadow: var(--shadow-hover);
}

.feature-card:hover .icon {
   background: var(--color-accent);
   color: var(--color-navy-darkest);
   transform: scale(1.1) rotate(5deg);
}

.feature-card:hover h3 {
   color: var(--color-accent-bright);
}

/* Animations */
@keyframes glowPulse {
   0% {
      box-shadow: 0 0 5px rgba(0, 173, 181, 0.2);
   }

   50% {
      box-shadow: 0 0 20px rgba(0, 173, 181, 0.4);
   }

   100% {
      box-shadow: 0 0 5px rgba(0, 173, 181, 0.2);
   }
}

.glow-pulse {
   animation: glowPulse 2s infinite ease-in-out;
}

.premium-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-hover);
   border-color: var(--color-accent);
   background: var(--color-navy-card);
}

.tilt-card {
   transform-style: preserve-3d;
   perspective: 1000px;
   will-change: transform;
}

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

.premium-card p {
   color: var(--color-slate-light);
   font-size: 0.95rem;
   margin-bottom: 0;
}

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

/* Icon Box */
.icon-box {
   width: 60px;
   height: 60px;
   background: rgba(0, 173, 181, 0.1);
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
   transition: var(--transition);
}

.premium-card:hover .icon-box {
   background: var(--color-accent);
   transform: scale(1.1);
}

.icon-box i {
   font-size: 1.8rem;
   color: var(--color-accent);
   transition: var(--transition);
}

.premium-card:hover .icon-box i {
   color: var(--color-navy-darkest);
}

/* Button System */
.btn {
   display: inline-block;
   padding: 14px 32px;
   border-radius: 4px;
   font-family: var(--font-heading);
   font-size: 0.9rem;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   transition: var(--transition);
   cursor: pointer;
   text-decoration: none;
   border: 1px solid transparent;
}

.btn-primary {
   background-color: transparent;
   border: 1.5px solid var(--color-accent);
   color: var(--color-accent);
   position: relative;
   overflow: hidden;
   z-index: 1;
}

.btn-primary:hover {
   color: var(--color-navy-darkest);
   background-color: var(--color-accent);
   box-shadow: 0 0 25px rgba(204, 164, 59, 0.4);
   transform: translateY(-3px);
}

/* Magnetic Glow Effect */
.btn-glow {
   position: relative;
   overflow: hidden;
}

.btn-glow::before {
   content: '';
   position: absolute;
   top: var(--y, 0);
   left: var(--x, 0);
   width: 0;
   height: 0;
   background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.4), transparent);
   transform: translate(-50%, -50%);
   transition: width 0.2s ease, height 0.2s ease;
   z-index: 0;
   pointer-events: none;
   border-radius: 50%;
}

.btn-glow:hover::before {
   width: 200px;
   height: 200px;
}

.btn-outline {
   background-color: rgba(255, 255, 255, 0.05);
   border: 1.5px solid var(--color-white);
   color: var(--color-white);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
}

.btn-outline:hover {
   background-color: rgba(255, 255, 255, 0.15);
   border-color: var(--color-white);
   transform: translateY(-3px);
   box-shadow: 0 10px 20px -10px rgba(255, 255, 255, 0.2);
}

.btn-contact {
   border: 1.5px solid var(--color-accent);
   color: var(--color-accent) !important;
   padding: 10px 22px;
   font-size: 0.85rem;
   display: flex;
   align-items: center;
   justify-content: center;
}

.btn-contact:hover {
   background: var(--color-accent-dim) !important;
   box-shadow: var(--shadow-glow);
   transform: translateY(-2px);
}

.hero-buttons {
   display: flex;
   gap: 20px;
   justify-content: center;
   margin-top: 30px;
}

/* Hero Section with Slider */
/* Hero Section with Slider - Grid Refactor for Responsive Height */
.hero-slider {
   min-height: 80vh;
   width: 100%;
   position: relative;
   overflow: hidden;
   padding-top: 0 !important;
}

.slides-container {
   display: grid;
   grid-template-areas: "stack";
   width: 100%;
}

.slide {
   grid-area: stack;
   position: relative;
   /* Stacked via Grid, participating in flow */
   width: 100%;
   min-height: 80vh;
   height: auto;
   opacity: 0;
   transition: opacity 1.2s ease-in-out;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-color: var(--color-navy-darkest);
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 100px 0;
   /* Add padding for content safety */
   z-index: 1;
}

.slide.active {
   opacity: 1;
   z-index: 2;
}

/* Zoom effect on background for premium feel */
.slide.active {
   animation: slideZoom 15s linear forwards;
}

@keyframes slideZoom {
   from {
      transform: scale(1);
   }

   to {
      transform: scale(1.1);
   }
}

.hero-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: radial-gradient(circle at center, transparent 0%, var(--color-navy-darkest) 100%);
   opacity: 0.6;
   z-index: 1;
}

.hero-content {
   position: relative;
   z-index: 2;
   max-width: 900px;
   padding: 0 20px;
}

.hero-content h2 {
   font-size: clamp(2.5rem, 6vw + 1rem, 5rem);
   margin-bottom: 20px;
   font-weight: 700;
   line-height: 1.1;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-content p {
   font-size: clamp(1rem, 2vw, 1.4rem);
   color: var(--color-slate-light);
   margin-bottom: 40px;
   max-width: 700px;
   margin-left: auto;
   margin-right: auto;
}

/* Slider Navigation Dots */
.slider-nav {
   position: absolute;
   bottom: 40px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 10;
   display: flex;
   gap: 15px;
}

.dot {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.3);
   cursor: pointer;
   transition: var(--transition);
   border: 2px solid transparent;
}

.dot:hover {
   background: rgba(255, 255, 255, 0.6);
}

.dot.active {
   background: var(--color-accent);
   transform: scale(1.2);
   box-shadow: 0 0 10px var(--color-accent);
}

/* Header - Refined v4.0 */
#header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 9999;
   background: rgba(15, 32, 56, 0.9);
   backdrop-filter: var(--glass-blur);
   -webkit-backdrop-filter: var(--glass-blur);
   border-bottom: var(--border-subtle);
   transition: var(--transition-slow);
   padding: 20px 0;
   height: 80px;
}

#header .container.header-container {
   max-width: 95%;
   width: 95%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 20px;
}

#header.header-scrolled {
   padding: 14px 0;
   background: rgba(10, 22, 40, 0.98);
   box-shadow: var(--shadow-medium);
   border-bottom-color: rgba(46, 125, 133, 0.15);
}

#header.header-hidden {
   transform: translateY(-100%);
}

#header.header-visible {
   transform: translateY(0);
   background: rgba(10, 22, 40, 0.98);
   box-shadow: var(--shadow-medium);
}

/* Mobile Header Active State */
@media (max-width: 768px) {
   #header.active {
      height: 100vh;
      z-index: 99999;
      background: rgba(10, 22, 40, 0.99);
   }

   #header.active .header-container {
      height: 80px;
      align-items: center;
   }
}

.logo {
   display: flex;
   align-items: center;
   gap: 15px;
}

.logo-img {
   height: 50px;
   width: auto;
   object-fit: contain;
}

.logo-text h1 {
   font-size: 1.4rem;
   margin: 0;
   line-height: 1;
}

.logo-text span {
   font-size: 0.7rem;
   color: var(--color-accent);
   display: block;
   font-weight: 500;
   margin-top: 2px;
}

.nav-menu ul {
   display: flex;
   align-items: center;
   gap: 45px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.nav-menu li {
   margin: 0;
}

.nav-menu a {
   white-space: nowrap;
   font-family: var(--font-body);
   color: var(--color-white);
   font-weight: 500;
   font-size: 0.95rem;
   transition: var(--transition);
   position: relative;
   padding: 10px 0;
}

/* Underline Animation */
.nav-menu a::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   width: 0;
   height: 2px;
   background: var(--color-accent);
   transition: var(--transition);
   transform: translateX(-50%);
}

.nav-menu a:hover::after,
.nav-menu .current-menu-item>a::after {
   width: 100%;
}

.hamburger {
   display: none;
   cursor: pointer;
   font-size: 1.5rem;
   color: var(--color-white);
   padding: 10px;
}

/* Desktop Navigation - Continue */
@media (min-width: 993px) {
   .nav-menu ul {
      gap: 45px;
   }

   .nav-menu ul li:last-child a::after {
      display: none;
   }
}

/* Mobile Navigation - Refined */
@media (max-width: 992px) {
   .hamburger {
      display: block;
   }

   .nav-menu {
      position: fixed;
      top: 80px;
      right: -100%;
      width: 75%;
      max-width: 350px;
      height: calc(100vh - 80px);
      background: rgba(10, 22, 40, 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      transition: right 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
      padding: 40px 30px;
      z-index: 1000;
      border-left: var(--border-subtle);
   }

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

   .nav-menu ul {
      flex-direction: column;
      gap: 0;
      align-items: stretch;
   }

   .nav-menu li {
      opacity: 0;
      transform: translateX(20px);
      transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
   }

   .nav-menu.active li {
      opacity: 1;
      transform: translateX(0);
   }

   .nav-menu a {
      font-size: 1.15rem;
      display: block;
      padding: 15px 0;
      border-bottom: var(--border-subtle);
   }

   .nav-menu a::after {
      display: none;
   }

   .nav-menu .current-menu-item>a {
      color: var(--color-accent);
      padding-left: 15px;
      border-left: 3px solid var(--color-accent);
   }

   /* Mobile Contact Button */
   .nav-menu ul li:last-child {
      margin-top: 25px;
   }

   .nav-menu ul li:last-child a {
      background: var(--color-accent);
      color: #ffffff !important;
      text-align: center;
      padding: 16px 30px;
      border-radius: var(--radius-sm);
      font-weight: 700;
      text-transform: uppercase;
      font-size: 1rem;
      box-shadow: var(--shadow-subtle);
      border: none;
   }

   .nav-menu ul li:last-child a:active {
      transform: scale(0.98);
   }
}

.nav-menu a:hover,
.nav-menu a.active {
   color: var(--color-accent);
}

.nav-menu a::after {
   background-color: var(--color-accent);
}

/* Contact CTA Button in Menu - Refined */
.nav-menu ul li:last-child a {
   background: var(--color-white);
   padding: 12px 40px;
   border-radius: var(--radius-sm);
   color: var(--color-accent) !important;
   font-weight: 700;
   letter-spacing: 0.5px;
   box-shadow: var(--shadow-subtle);
   transition: var(--transition);
   position: relative;
   overflow: hidden;
   text-transform: uppercase;
}

.nav-menu ul li:last-child a:hover {
   background: var(--color-white);
   color: var(--color-navy-darkest) !important;
   transform: translateY(-3px);
   box-shadow: var(--shadow-medium);
}

.btn-group {
   display: flex;
   gap: 20px;
   flex-wrap: wrap;
   margin-top: 30px;
}

@media (max-width: 480px) {
   .btn-group {
      flex-direction: column;
      gap: 12px;
   }

   .btn-group .btn {
      width: 100%;
      justify-content: center;
   }
}

.nav-menu ul li:last-child a::after {
   display: none;
}

@media (max-width: 768px) {
   .nav-menu ul li:last-child a {
      border-width: 2px;
      font-size: 1.2rem;
      padding: 12px 30px;
      margin-top: 10px;
   }
}

.section-title {
   margin-bottom: 60px;
   text-align: center;
}

.section-title h2 {
   font-size: 2.5rem;
   margin-bottom: 15px;
}

.section-title h2::after {
   background-color: var(--color-accent);
}

.section-title span {
   color: var(--color-accent);
   letter-spacing: 3px;
}

/* About Section Grids & Content */
.about-text {
   position: relative;
   padding-left: 35px;
   border-left: 4px solid transparent;
   border-image: linear-gradient(to bottom, var(--color-accent) 0%, transparent 100%) 1;
}

.about-grid {
   display: grid;
   grid-template-columns: 1.1fr 0.9fr;
   gap: 60px;
   align-items: center;
}

/* Statistics Section - Vertical Full Width Layout */
.about-stats {
   display: flex !important;
   flex-direction: column !important;
   gap: 20px !important;
   margin-top: 50px;
   width: 100%;
}

.stat-card {
   background: var(--color-navy-surface);
   backdrop-filter: var(--glass-blur);
   -webkit-backdrop-filter: var(--glass-blur);
   border: var(--border-subtle);
   border-radius: var(--radius-md);
   padding: 25px 30px !important;
   display: flex !important;
   flex-direction: row !important;
   align-items: center !important;
   gap: 20px;
   transition: var(--transition);
   width: 100%;
}

.stat-card:hover {
   transform: translateY(-6px);
   border-color: var(--color-accent-dim);
   box-shadow: var(--shadow-medium);
   background: rgba(20, 39, 68, 0.9);
}

.stat-icon {
   width: 55px;
   height: 55px;
   background: var(--color-accent-dim);
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.4rem;
   color: var(--color-accent);
   transition: var(--transition);
}

.stat-card:hover .stat-icon {
   background: var(--color-accent);
   color: var(--color-white);
   transform: scale(1.1);
}

.stat-card h3 {
   font-size: clamp(2rem, 5vw, 2.8rem);
   font-weight: 700;
   color: var(--color-white);
   margin: 0;
   line-height: 1;
}

.stat-card p {
   color: var(--color-slate-light);
   font-size: 0.9rem;
   font-weight: 500;
   margin: 0;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   line-height: 1.3;
}

/* About Page Stats Grid - Premium 2 Columns Layout */
.about-stats-grid {
   display: grid !important;
   grid-template-columns: repeat(2, 1fr) !important;
   gap: 20px !important;
   margin-top: 40px;
   width: 100%;
   max-width: 700px;
}

.about-stats-grid .stat-card {
   background: linear-gradient(135deg, rgba(20, 40, 70, 0.9) 0%, rgba(15, 30, 55, 0.95) 100%);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(46, 125, 133, 0.2);
   border-radius: 12px;
   padding: 32px 24px !important;
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
   justify-content: center !important;
   gap: 14px !important;
   transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
   min-width: 0;
   width: 100% !important;
   position: relative;
   text-align: center;
}

/* Subtle glow accent on top */
.about-stats-grid .stat-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 60%;
   height: 3px;
   background: linear-gradient(to right, rgba(46, 125, 133, 0.3), var(--color-accent), rgba(46, 125, 133, 0.3));
   border-radius: 0 0 4px 4px;
   opacity: 0.8;
   transition: all 0.3s ease;
}

.about-stats-grid .stat-card:hover {
   transform: translateY(-4px);
   border-color: rgba(46, 125, 133, 0.5);
   box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3), 0 0 25px rgba(46, 125, 133, 0.15);
   background: linear-gradient(135deg, rgba(25, 50, 85, 0.95) 0%, rgba(18, 35, 65, 1) 100%);
}

.about-stats-grid .stat-card:hover::before {
   width: 80%;
   opacity: 1;
}

/* Premium Stat Card Icon */
.about-stats-grid .stat-icon {
   width: 52px !important;
   height: 52px !important;
   min-width: 52px;
   background: linear-gradient(135deg, rgba(46, 125, 133, 0.2) 0%, rgba(46, 125, 133, 0.1) 100%);
   border: 1px solid rgba(46, 125, 133, 0.3);
   border-radius: 10px;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   font-size: 1.3rem;
   color: var(--color-accent);
   flex-shrink: 0;
   transition: all 0.3s ease;
}

.about-stats-grid .stat-card:hover .stat-icon {
   background: var(--color-accent);
   border-color: var(--color-accent);
   color: var(--color-white);
   transform: scale(1.1) rotate(-5deg);
   box-shadow: 0 4px 15px rgba(46, 125, 133, 0.4);
}

/* Stat Number Wrapper - Centered */
.stat-number-wrapper {
   display: flex !important;
   flex-direction: row !important;
   align-items: baseline !important;
   justify-content: center !important;
   gap: 3px;
   flex-shrink: 0;
}

.stat-number-wrapper h3 {
   font-size: clamp(2.2rem, 4vw, 3rem) !important;
   font-weight: 700;
   color: var(--color-white);
   margin: 0 !important;
   line-height: 1;
   font-family: var(--font-heading);
}

.stat-plus {
   font-size: 1.4rem;
   font-weight: 700;
   color: var(--color-accent);
}

/* Stat Card Text - Centered & Readable */
.about-stats-grid .stat-card>p {
   width: 100%;
   font-size: 0.7rem !important;
   line-height: 1.3;
   margin: 0 !important;
   text-transform: uppercase;
   letter-spacing: 0.8px;
   color: var(--color-slate-light);
   font-weight: 600;
   text-align: center;
   white-space: normal;
}

/* Stat Counter Animation */
.stat-counter {
   font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
   font-weight: 700;
   color: var(--color-white);
   font-family: var(--font-heading);
}

/* About Stats Grid Responsive */
@media (max-width: 768px) {
   .about-stats-grid {
      grid-template-columns: 1fr !important;
      gap: 15px !important;
   }

   .about-stats-grid .stat-card {
      padding: 20px !important;
   }
}

/* Responsive Stats */
@media (max-width: 992px) {
   .about-grid {
      grid-template-columns: 1fr;
   }

   .about-text {
      padding-left: 0;
      border-left: none;
   }

   .about-stats {
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
   }
}

@media (max-width: 640px) {
   .about-stats {
      grid-template-columns: 1fr;
      gap: 15px;
   }

   .stat-card {
      flex-direction: row;
      text-align: left;
      padding: 25px;
      min-height: auto;
      gap: 20px;
   }

   .stat-icon {
      width: 50px;
      height: 50px;
      flex-shrink: 0;
   }

   .stat-card h3 {
      font-size: 1.8rem;
   }
}

.premium-desc {
   font-size: 1.15rem;
   line-height: 1.85;
   color: var(--color-slate-light);
   margin-bottom: 25px;
}

.accreditation-card-horizontal {
   display: flex;
   align-items: center;
   gap: 25px;
   background: rgba(0, 173, 181, 0.08);
   border: 1px solid rgba(0, 173, 181, 0.2);
   padding: 30px;
   border-radius: 24px;
   margin-top: 40px;
   transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
   position: relative;
   overflow: hidden;
}

.accreditation-card-horizontal::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 5px;
   height: 100%;
   background: var(--color-accent);
}

.accreditation-card-horizontal:hover {
   background: rgba(0, 173, 181, 0.12);
   transform: translateX(10px);
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.accreditation-icon-wrapper {
   font-size: 3rem;
   color: var(--color-accent);
   flex-shrink: 0;
   animation: pulseIcon 3s infinite ease-in-out;
}

@keyframes pulseIcon {
   0% {
      transform: scale(1);
      opacity: 0.8;
   }

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

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

.accreditation-content h4 {
   color: var(--color-white);
   margin: 0 0 8px 0;
   font-size: 1.3rem;
   font-weight: 600;
}

.accreditation-content p {
   margin: 0;
   font-size: 1rem;
   color: var(--color-slate-light);
   line-height: 1.6;
}

.about-grid {
   display: grid;
   grid-template-columns: 1.1fr 0.9fr;
   gap: 60px;
   align-items: center;
}

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

   .about-text {
      padding-left: 0;
      border-left: none;
   }
}

.about-stats-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 25px;
}

@media (max-width: 480px) {
   .about-stats-grid {
      grid-template-columns: 1fr;
   }
}

.stat-card {
   background: var(--glass-bg);
   backdrop-filter: var(--glass-blur);
   -webkit-backdrop-filter: var(--glass-blur);
   padding: 35px 15px;
   border-radius: 16px;
   box-shadow: var(--shadow-soft);
   transition: var(--transition);
   border: var(--glass-border);
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 200px;
   /* Reduced min-height */
   width: 100%;
}

.stat-card:hover {
   transform: translateY(-10px);
   border-color: var(--color-accent);
   box-shadow: var(--shadow-glow);
   background: var(--color-navy-card);
}

.stat-icon {
   width: 50px;
   height: 50px;
   background: rgba(0, 173, 181, 0.1);
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 15px;
   transition: all 0.4s ease;
   color: var(--color-accent);
   font-size: 1.4rem;
}

.stat-card:hover .stat-icon {
   background: var(--color-accent);
   color: var(--color-navy-darkest);
   transform: scale(1.1) rotate(-5deg);
}

.stat-number-wrapper {
   display: flex;
   align-items: baseline;
   justify-content: center;
   gap: 4px;
   margin-bottom: 8px;
}

.stat-counter {
   font-size: clamp(2rem, 5vw, 2.6rem);
   /* Fluid font size */
   font-weight: 700;
   color: var(--color-white);
   margin: 0;
   line-height: 1;
}

.stat-plus {
   font-size: clamp(1rem, 3vw, 1.4rem);
   font-weight: 600;
   color: var(--color-accent);
}

.stat-card p {
   color: var(--color-slate-light);
   font-size: clamp(0.75rem, 2vw, 0.85rem);
   /* Smaller font size for labels */
   font-weight: 500;
   margin: 0;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   /* Reduced letter-spacing */
   line-height: 1.2;
   max-width: 100%;
   word-wrap: break-word;
}

/* --- Partners 3-Column Responsive Colored Grid --- */
.partners-grid-full {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 40px;
   padding: 40px 0;
   align-items: center;
   justify-items: center;
}

@media (max-width: 992px) {
   .partners-grid-full {
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
   }
}

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

@media (max-width: 480px) {
   .partners-grid-full {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
   }
}

.partner-item {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   background: transparent !important;
   border: none !important;
   box-shadow: none !important;
}

.partner-item img {
   max-width: 180px;
   height: auto;
   max-height: 80px;
   object-fit: contain;
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   /* Colors restored per user request */
}

.partner-item:hover img {
   transform: translateY(-5px) scale(1.08);
}

.accreditations {
   display: flex;
   flex-direction: column;
   gap: 20px;
   margin-top: 40px;
}

.badge {
   display: flex;
   align-items: center;
   gap: 20px;
   background: var(--color-navy-dark);
   padding: 20px;
   border-radius: 8px;
   border-left: 4px solid var(--color-accent);
   box-shadow: var(--shadow-soft);
   transition: var(--transition);
}

.badge:hover {
   transform: translateX(10px);
   background: var(--color-navy-lighter);
}

.badge i {
   font-size: 2rem;
   color: var(--color-accent);
}

.badge div {
   display: flex;
   flex-direction: column;
}

.badge strong {
   color: var(--color-white);
   font-size: 1.1rem;
}

.badge span {
   color: var(--color-slate);
   font-size: 0.9rem;
}

/* Service Grids */
.services-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 30px;
   margin-top: 40px;
}

/* New Feature Grid for Surveillance */
.surveillance-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 20px;
   margin-top: 30px;
}

.service-feature-item {
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(0, 173, 181, 0.15);
   border-radius: 8px;
   padding: 20px;
   display: flex;
   align-items: flex-start;
   gap: 15px;
   transition: all 0.3s ease;
}

.service-feature-item:hover {
   background: rgba(0, 173, 181, 0.05);
   border-color: var(--color-accent);
   transform: translateY(-5px);
   box-shadow: var(--shadow-soft);
}

.service-feature-item i {
   color: var(--color-accent);
   font-size: 1.2rem;
   margin-top: 4px;
   flex-shrink: 0;
}

.service-feature-item p {
   margin: 0;
   color: var(--color-slate-light);
   font-size: 0.95rem;
   line-height: 1.5;
}

.service-feature-item:hover p {
   color: var(--color-white);
}

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

/* Service Cards with Premium Look */
.service-card {
   background: var(--glass-bg);
   backdrop-filter: var(--glass-blur);
   -webkit-backdrop-filter: var(--glass-blur);
   padding: 35px;
   border-radius: 16px;
   box-shadow: var(--shadow-soft);
   transition: var(--transition);
   border: var(--glass-border);
   height: 100%;
   display: flex;
   flex-direction: column;
}

.service-card:hover {
   transform: translateY(-10px);
   border-color: var(--color-accent);
   box-shadow: var(--shadow-glow);
   background: var(--color-navy-card);
}

/* Council Items */
.council-item {
   display: flex;
   gap: 25px;
   padding: 35px;
   border-radius: 16px;
   background: var(--glass-bg);
   backdrop-filter: var(--glass-blur);
   -webkit-backdrop-filter: var(--glass-blur);
   box-shadow: var(--shadow-soft);
   border: var(--glass-border);
   transition: var(--transition);
   align-items: flex-start;
}

.council-item:hover {
   box-shadow: var(--shadow-glow);
   transform: translateY(-5px);
   background: var(--color-navy-card);
   border-color: var(--color-accent);
}

.council-item i,
.service-card .icon,
.badge i {
   color: var(--color-accent);
   font-size: 2rem;
   margin-bottom: 20px;
}

.council-item i {
   margin-bottom: 0;
   margin-top: 5px;
}

.team-card.featured.ceo {
   border: 1px solid var(--color-accent);
   background: linear-gradient(135deg, var(--color-navy-card) 0%, rgba(204, 164, 59, 0.05) 100%);
   border-radius: 16px;
}

.team-card.featured.ceo::before {
   background: var(--color-accent);
}

.team-card.featured.ceo .member-info h3,
.team-member .role,
.featured .role {
   color: var(--color-accent);
}

.footer-col h4,
.footer-col ul li i,
.footer-col a:hover {
   color: var(--color-accent);
}

/* Stat Cards */
.stat-card {
   background: var(--glass-bg);
   backdrop-filter: var(--glass-blur);
   -webkit-backdrop-filter: var(--glass-blur);
   padding: 30px;
   text-align: center;
   border-radius: 16px;
   box-shadow: var(--shadow-soft);
   border: var(--glass-border);
   transition: var(--transition);
}

.stat-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-glow);
   border-color: var(--color-accent);
}

.stat-card h3 {
   color: var(--color-accent);
   font-size: 2.5rem;
   margin-bottom: 10px;
}

/* Team Continued & Gallery */
.team-container {
   display: flex;
   flex-direction: column;
   gap: 40px;
}

.team-card.featured {
   display: flex;
   background: var(--glass-bg);
   border-radius: 16px;
   overflow: hidden;
   box-shadow: var(--shadow-soft);
   transition: var(--transition);
   border: var(--glass-border);
}

.team-card.featured:hover {
   box-shadow: var(--shadow-hover);
   transform: translateY(-5px);
   border-color: var(--color-accent);
}

.featured .member-img {
   width: 300px;
   background-color: var(--color-navy-lighter);
   background-size: cover;
   background-position: top center;
}

.featured .member-info {
   padding: 40px;
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.featured h3 {
   font-size: 1.8rem;
   margin-bottom: 5px;
   color: var(--color-white);
}

.featured .role {
   font-size: 1rem;
   margin-bottom: 20px;
   display: block;
   font-weight: 500;
}

/* Expertise Intro */
.expertise-hero {
   max-width: 900px;
   margin: 0 auto 80px;
   text-align: center;
}

.expertise-hero p {
   font-size: 1.1rem;
   line-height: 1.8;
   color: var(--color-slate-light);
}

.expertise-outro {
   margin-top: 80px;
   padding: 50px;
   background: var(--glass-bg);
   backdrop-filter: var(--glass-blur);
   border-radius: 12px;
   border: var(--glass-border);
   text-align: center;
}



.team-grid-small {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 30px;
}

.member-img-small {
   height: 260px;
   width: 100%;
   background-color: var(--color-navy-lighter);
   background-size: cover;
   background-position: top center;
   border-radius: 8px;
   margin-bottom: 20px;
}

.team-member {
   background: var(--color-navy-card);
   padding: 30px;
   border-radius: 12px;
   text-align: left;
   box-shadow: var(--shadow-soft);
   transition: var(--transition);
   border: 1px solid rgba(255, 255, 255, 0.05);
   height: 100%;
   display: flex;
   flex-direction: column;
}

.member-bio {
   margin-top: 15px;
   font-size: 0.85rem;
   color: var(--color-slate-light);
   line-height: 1.6;
}

.team-member:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-hover);
   border-color: var(--color-accent);
}

.team-member h4 {
   color: var(--color-white);
   font-size: 1.1rem;
   margin-bottom: 5px;
}

/* Partners & Clients Full Grid */
.partners-grid-full {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 25vw, 220px), 1fr));
   gap: clamp(15px, 3vw, 30px);
   align-items: center;
   background: rgba(255, 255, 255, 0.02);
   padding: clamp(30px, 6vw, 60px) var(--container-padding);
   border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.05);
   margin-top: 50px;
}

.partner-item {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 15px;
   transition: var(--transition);
}

.partner-item img {
   max-width: 200px;
   height: 100px;
   object-fit: contain;
   opacity: 0.8;
   transition: all 0.3s ease;
}

.partner-item:hover img {
   opacity: 1;
   transform: scale(1.1);
   filter: drop-shadow(0 0 5px rgba(46, 125, 133, 0.3));
}

.partner-item:hover {
   filter: drop-shadow(0 0 8px rgba(0, 173, 181, 0.2));
}

/* Achievements List */
/* Achievements List */
.achievements-timeline {
   max-width: 1100px;
   margin: 50px auto 0;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
}

/* Premium Footer */
.site-footer {
   background-color: var(--color-navy-darkest);
   padding: 80px 0 30px;
   color: var(--color-slate);
   font-size: 0.95rem;
   border-top: 1px solid rgba(0, 173, 181, 0.1);
   position: relative;
   overflow: hidden;
}

/* World Map Overlay */
.site-footer::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url('assets/img/world-map.png');
   /* Ensure this image exists or use a gradient as fallback */
   background-size: cover;
   background-position: center;
   opacity: 0.05;
   pointer-events: none;
}

.footer-grid {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1.5fr 1.2fr;
   /* Adjusted for Newsletter */
   gap: 40px;
   margin-bottom: 60px;
   position: relative;
   z-index: 1;
}

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

.site-footer.minimal .contact-col {
   display: none;
}

.footer-col {
   background: rgba(255, 255, 255, 0.02);
   padding: 30px;
   border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(10px);
}

.footer-logo {
   height: 60px;
   width: auto;
   margin-bottom: 20px;
}

.company-desc {
   line-height: 1.6;
   margin-bottom: 25px;
}

.footer-col h4 {
   color: var(--color-white);
   font-size: 1.2rem;
   margin-bottom: 25px;
   position: relative;
   display: inline-block;
}

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

.footer-col ul li {
   margin-bottom: 12px;
   display: flex;
   align-items: flex-start;
   gap: 10px;
}

.footer.nav-menu ul li a {
   color: var(--color-white);
   font-weight: 500;
   font-size: 0.95rem;
   position: relative;
   padding: 5px 0;
}

.nav-menu ul li a::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 0%;
   height: 2px;
   background: var(--color-accent);
   transition: var(--transition);
}

.nav-menu ul li a:hover::after {
   width: 100%;
}

.nav-menu ul li.current-menu-item a::after {
   width: 100%;
}

.footer-col ul li a {
   transition: var(--transition);
   color: var(--color-slate);
   text-decoration: none;
}

.footer-col ul li a:hover {
   color: var(--color-accent);
   padding-left: 5px;
}

/* Newsletter Form */
.newsletter-form {
   display: flex;
   flex-direction: column;
   gap: 15px;
   margin-top: 15px;
}

.newsletter-input {
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   padding: 12px 15px;
   border-radius: 4px;
   color: var(--color-white);
   font-family: var(--font-body);
   font-size: 0.9rem;
   outline: none;
   transition: var(--transition);
}

.newsletter-input:focus {
   border-color: var(--color-accent);
   background: rgba(255, 255, 255, 0.08);
}

.btn-subscribe {
   background: var(--color-accent);
   color: var(--color-navy-darkest);
   border: none;
   padding: 12px;
   border-radius: 4px;
   font-weight: 600;
   cursor: pointer;
   transition: var(--transition);
   text-transform: uppercase;
   letter-spacing: 1px;
   font-size: 0.85rem;
}

.btn-subscribe:hover {
   background: var(--color-accent-bright);
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(0, 173, 181, 0.3);
}

.social-links {
   display: flex;

   gap: 15px;
}

.social-links a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.05);
   transition: var(--transition);
   color: var(--color-white);
   border: 1px solid rgba(255, 255, 255, 0.1);
}

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

.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, 0.05);
   padding-top: 30px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 0.9rem;
}

/* Responsive Footer */


/* Animations */
.animate-up {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   will-change: opacity, transform;
}

/* Ensure content is visible in active slide even if JS observer fails */
.slide.active .animate-up {
   opacity: 1 !important;
   transform: translateY(0) !important;
}

.animate-up.visible {
   opacity: 1;
   transform: translateY(0);
}

.delay-1 {
   transition-delay: 0.2s;
}

.delay-2 {
   transition-delay: 0.4s;
}

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

.no-decoration {
   display: block;
   text-decoration: none !important;
   color: inherit !important;
}

/* --- PREMIUM INTERACTIONS --- */

/* 1. 3D Tilt Effect */
.tilt-card {
   transform-style: preserve-3d;
   transform: perspective(1000px);
   transition: transform 0.1s;
}

.tilt-card-inner {
   transform: translateZ(20px);
}

/* 2. Infinite Marquee (Partners & Achievements) */
.marquee-container,
.partners-marquee-wrapper {
   overflow: hidden;
   white-space: nowrap;
   position: relative;
   padding: 20px 0;
   mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
   -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.partners-marquee-wrapper {
   display: flex;
   flex-direction: column;
   gap: 20px;
   padding: 60px 0;
}

.partners-marquee-row .marquee-content {
   display: inline-flex;
   gap: 60px;
   /* Reduced gap from 120px */
   animation: marquee 70s linear infinite;
   width: max-content;
}

/* Row specific directions/timing */
.row-1 .marquee-content {
   animation-direction: normal;
   animation-duration: 70s;
}

.row-2 .marquee-content {
   animation-direction: reverse;
   animation-duration: 85s;
   /* Slightly different for organic feel */
}

.partner-item,
.ref-card {
   flex-shrink: 0;
   width: 320px;
   /* Reduced from 420px */
   height: 180px;
   /* Reduced from 200px */
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background: var(--glass-bg);
   border: var(--glass-border);
   border-radius: 20px;
   padding: 30px;
   transition: var(--transition);
   text-align: center;
}

/* 3. Achievements Timeline - MODERN GRID DESIGN */
.achievements-timeline {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   gap: 20px;
   max-width: 1400px;
   margin: 40px auto 0;
   padding: 0;
   position: relative;
}

.achievements-timeline::before {
   display: none;
   /* Remove timeline line */
}

.achievement-item {
   position: relative;
   width: 100%;
   margin-bottom: 0;
   padding: 0;
   z-index: 1;
   display: block;
   text-align: left;
}

.achievement-item:nth-child(odd),
.achievement-item:nth-child(even) {
   left: auto;
   text-align: left;
}

.achievement-dot {
   display: none;
   /* Remove dots for cleaner design */
}

.achievement-card {
   background: linear-gradient(135deg, rgba(18, 43, 51, 0.8) 0%, rgba(26, 58, 66, 0.6) 100%);
   border: 1px solid rgba(46, 125, 133, 0.15);
   border-radius: 16px;
   padding: 24px;
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   flex-direction: column;
   height: 100%;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
   position: relative;
   overflow: hidden;
}

.achievement-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 3px;
   background: linear-gradient(90deg, var(--color-accent) 0%, transparent 100%);
   opacity: 0;
   transition: opacity 0.4s ease;
}

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

.achievement-card:hover {
   transform: translateY(-8px);
   border-color: var(--color-accent);
   box-shadow: 0 12px 40px rgba(46, 125, 133, 0.25);
   background: linear-gradient(135deg, rgba(18, 43, 51, 0.95) 0%, rgba(26, 58, 66, 0.8) 100%);
}

.achievement-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 16px;
   gap: 12px;
   flex-wrap: wrap;
}

.achievement-date {
   font-size: 0.8rem;
   color: var(--color-accent);
   font-weight: 600;
   letter-spacing: 0.5px;
   font-family: var(--font-heading);
}

.achievement-badge {
   background: rgba(46, 125, 133, 0.15);
   color: var(--color-accent);
   padding: 5px 14px;
   border-radius: 20px;
   font-size: 0.7rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   border: 1px solid rgba(46, 125, 133, 0.3);
   transition: all 0.3s ease;
}

.achievement-card:hover .achievement-badge {
   background: rgba(46, 125, 133, 0.25);
   border-color: var(--color-accent);
   transform: scale(1.05);
}

.achievement-icon {
   width: 56px;
   height: 56px;
   background: rgba(46, 125, 133, 0.12);
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 16px;
   font-size: 1.4rem;
   color: var(--color-accent);
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   border: 1px solid rgba(46, 125, 133, 0.2);
}

.achievement-item:nth-child(odd) .achievement-icon,
.achievement-item:nth-child(even) .achievement-icon {
   margin-left: 0;
}

.achievement-card:hover .achievement-icon {
   background: linear-gradient(135deg, var(--color-accent) 0%, rgba(46, 125, 133, 0.8) 100%);
   color: var(--color-white);
   transform: scale(1.1) rotate(5deg);
   border-color: var(--color-accent);
   box-shadow: 0 4px 15px rgba(46, 125, 133, 0.4);
}

.achievement-content {
   flex: 1;
}

.achievement-content p {
   margin: 0;
   font-size: 0.95rem;
   line-height: 1.6;
   color: var(--color-slate-light);
   transition: color 0.3s ease;
}

.achievement-card:hover .achievement-content p {
   color: var(--color-white);
}

.achievement-content strong {
   color: var(--color-white);
   font-weight: 600;
   transition: color 0.3s ease;
}

.achievement-card:hover .achievement-content strong {
   color: var(--color-accent-bright);
}

.highlight-border .achievement-card {
   border: 1.5px solid var(--color-accent);
   background: linear-gradient(135deg, rgba(46, 125, 133, 0.1) 0%, rgba(18, 43, 51, 0.8) 100%);
   box-shadow: 0 8px 30px rgba(46, 125, 133, 0.2);
}

.highlight-border .achievement-card::before {
   opacity: 1;
}

/* Responsive Grid Design */
@media (max-width: 1200px) {
   .achievements-timeline {
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 18px;
   }
}

@media (max-width: 768px) {
   .achievements-timeline {
      grid-template-columns: 1fr;
      gap: 16px;
      padding: 0;
   }

   .achievement-item {
      width: 100% !important;
      left: auto !important;
      padding: 0 !important;
      margin-bottom: 0 !important;
      text-align: left !important;
   }

   .achievement-card {
      padding: 20px !important;
      border-radius: 14px !important;
   }

   .achievement-icon {
      width: 50px !important;
      height: 50px !important;
      font-size: 1.2rem !important;
      margin-bottom: 14px !important;
      margin-left: 0 !important;
   }

   .achievement-header {
      margin-bottom: 14px;
   }

   .achievement-content p {
      font-size: 0.9rem;
   }
}

@media (max-width: 480px) {
   .achievements-timeline {
      gap: 14px;
   }

   .achievement-card {
      padding: 18px !important;
   }
}

.partner-item:hover,
.ref-card:hover {
   transform: translateY(-5px);
   border-color: var(--color-accent);
   box-shadow: 0 10px 20px rgba(0, 173, 181, 0.2);
}

.partner-item:hover i,
.ref-card:hover i {
   transform: scale(1.1);
}

.partner-item img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
}

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

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

.marquee-container:hover .marquee-content,
.partners-marquee-row:hover .marquee-content {
   animation-play-state: paused;
}

/* 3. Glowing Mouse-Tracking Button */
.btn-glow {
   position: relative;
   overflow: hidden;
}

.btn-glow::before {
   content: '';
   position: absolute;
   top: var(--y, 0);
   left: var(--x, 0);
   transform: translate(-50%, -50%);
   width: 0;
   height: 0;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(0, 173, 181, 0.4) 0%, transparent 70%);
   transition: width 0.5s ease, height 0.5s ease;
   z-index: 0;
   pointer-events: none;
}

.btn-glow:hover::before {
   width: 200px;
   height: 200px;
}

/* 4. Stat Counter */
.stat-card h3 {
   font-variant-numeric: tabular-nums;
}

/* Mobile Responsive Tweaks for Marquee */
@media (max-width: 768px) {
   .marquee-content {
      animation-duration: 20s;
      gap: 30px;
   }

   .partner-item {
      width: 220px;
      height: 110px;
   }
}

/* CEO Card Responsive Layout */
.ceo-card {
   display: flex;
   flex-direction: column;
   gap: 30px;
   align-items: center;
}

@media (min-width: 768px) {
   .ceo-card {
      flex-direction: row;
      align-items: flex-start;
   }
}

/* Service Intro Card & Feature Grid Enhancement */
.service-intro-card {
   background: rgba(17, 34, 64, 0.8);
   border: 1px solid var(--color-accent);
   border-radius: 24px;
   padding: clamp(30px, 5vw, 50px);
   margin-bottom: 40px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.service-intro-card .icon-box {
   margin: 0 auto 20px;
   width: 80px;
   height: 80px;
   background: rgba(0, 173, 181, 0.1);
   border: 1px solid rgba(0, 173, 181, 0.2);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 20px;
   color: var(--color-accent);
}

.service-intro-card h3 {
   font-size: clamp(1.6rem, 2.5vw, 2.2rem);
   margin-bottom: 15px;
   color: var(--color-white);
   font-family: var(--font-heading);
}

.service-intro-card p {
   color: var(--color-slate-light);
   max-width: 800px;
   margin: 0 auto;
   line-height: 1.8;
   font-size: 1.1rem;
}

.service-feature-item {
   background: rgba(255, 255, 255, 0.03);
   padding: 18px 22px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   gap: 15px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-feature-item:hover {
   background: rgba(0, 173, 181, 0.08);
   border-color: var(--color-accent);
   transform: translateY(-3px);
   box-shadow: 0 5px 15px rgba(0, 173, 181, 0.15);
}

.service-feature-item i {
   font-size: 1.3rem;
   color: var(--color-accent);
   min-width: 25px;
   text-align: center;
}

.service-feature-item p {
   margin: 0;
   color: var(--color-slate-light);
   font-size: 0.95rem;
   font-weight: 500;
   line-height: 1.4;
}

@media (max-width: 768px) {
   .service-intro-card {
      text-align: left !important;
      padding: 30px 20px;
   }

   .service-intro-card .icon-box {
      margin-left: 0;
      width: 65px;
      height: 65px;
   }

   .service-intro-card h3 {
      font-size: 1.8rem;
   }

   .service-intro-card p {
      margin-left: 0;
      text-align: left;
   }

   .premium-grid {
      grid-template-columns: 1fr !important;
      margin-top: 25px;
   }
}

/* Fix for broken list layout in sidebar/cards */
/* --- CONSOLIDATED RESPONSIVE DESIGN --- */

/* 1. Large Tablets & Small Laptops (992px) */
@media (max-width: 992px) {
   .about-grid {
      grid-template-columns: 1fr;
      gap: 40px;
   }

   .about-stats {
      flex-direction: row;
      flex-wrap: wrap;
   }

   .about-stats .premium-card {
      flex: 1 1 200px;
   }

   .featured {
      flex-direction: column;
   }

   .featured .member-img {
      width: 100%;
      height: 350px;
   }

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

/* 2. Tablets & Large Phones (768px) */
@media (max-width: 768px) {
   .header-container {
      padding: 0 15px;
   }

   /* Navigation & Menu */
   .nav-menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: rgba(2, 12, 27, 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      display: flex;
      align-items: center;
      justify-content: center;
      visibility: hidden;
      opacity: 0;
      transform: scale(0.95);
      transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
      z-index: 9999;
      padding-top: 80px;
      /* Offset for the logo bar */
   }

   .nav-menu.active {
      visibility: visible;
      opacity: 1;
      transform: scale(1);
   }

   .nav-menu ul {
      flex-direction: column;
      gap: 30px;
      text-align: center;
   }

   .nav-menu a {
      font-size: 1.5rem;
      font-weight: 600;
   }

   .hamburger {
      display: block;
      color: var(--color-accent);
      z-index: 10000;
   }

   /* Grid Overrides */
   .premium-grid,
   .services-grid,
   .council-grid,
   .about-stats {
      grid-template-columns: 1fr;
   }

   .accreditation-card {
      flex-direction: column;
      text-align: center;
      padding: 30px;
   }

   .council-item {
      flex-direction: column;
      text-align: center;
      align-items: center;
   }

   /* Performance: Disable Tilt on Mobile */
   .tilt-card {
      transform: none !important;
   }

   /* Header Padding Fix */
   .page-header {
      padding: 100px 0 60px;
   }
}

/* 3. Small Phones (480px) */
@media (max-width: 480px) {
   .hero-buttons {
      flex-direction: column;
      gap: 15px;
   }

   .btn {
      width: 100%;
      text-align: center;
   }

   .logo-text h1 {
      font-size: 1.1rem;
   }

   .footer-grid {
      grid-template-columns: 1fr;
      gap: 30px;
   }

   .footer-bottom {
      flex-direction: column;
      gap: 15px;
      text-align: center;
   }
}

/* 4. Global Overflow Catch-all */
html,
body {
   max-width: 100%;
   overflow-x: hidden;
}

.service-feature-item i {
   min-width: 24px;
   /* Ensure icon doesn't shrink */
   text-align: center;
}

/* 5. Modern Back to Top Button */
.back-to-top {
   position: fixed;
   bottom: 30px;
   right: 30px;
   width: 50px;
   height: 50px;
   background: #D4AF37;
   color: #0a1a1f;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
   cursor: pointer;
   z-index: 1000;
   opacity: 0;
   visibility: hidden;
   transform: translateY(20px);
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
   border: none;
}

.back-to-top.active {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

.back-to-top:hover {
   background: #f1f7f8;
   transform: translateY(-5px) scale(1.1);
   box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5);
}

.back-to-top i {
   transition: transform 0.3s ease;
}

.back-to-top:hover i {
   transform: translateY(-3px);
}

/* CEO card specific styles */
.ceo-card {
   display: flex;
   gap: clamp(30px, 5vw, 60px);
   align-items: center;
   background: rgba(255, 255, 255, 0.01);
   border: 1px solid var(--color-accent-dim);
   padding: clamp(30px, 5vw, 50px);
   border-radius: 24px;
}

/* --- SECTION SPECIFIC REFINEMENTS --- */

/* CEO Section */
.ceo-card {
   flex-direction: row !important;
   gap: 40px;
   align-items: center;
}

.ceo-img {
   flex-shrink: 0;
   border-radius: 12px;
   box-shadow: var(--shadow-card);
   background-size: cover;
   background-position: center;
   transition: var(--transition);
}

.ceo-card:hover .ceo-img {
   transform: scale(1.02);
   box-shadow: var(--shadow-neon);
}

.ceo-info h3 {
   font-size: 2.2rem;
   margin-bottom: 5px;
}

.ceo-info .role {
   color: var(--color-accent);
   font-size: 1.1rem;
   font-weight: 500;
   margin-bottom: 25px;
   display: block;
}

/* Stat Cards */
.about-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
   margin-top: 60px;
   width: 100%;
}

.stat-card {
   background: rgba(17, 34, 64, 0.4);
   backdrop-filter: blur(15px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   padding: 35px 25px;
   /* More compact height */
   border-radius: 20px;
   text-align: center;
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   position: relative;
   overflow: hidden;
}

.stat-icon {
   width: 50px;
   height: 50px;
   background: rgba(0, 173, 181, 0.1);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 20px;
   font-size: 1.5rem;
   color: var(--color-accent);
   transition: var(--transition);
}

.stat-card h3 {
   font-size: 2.8rem;
   color: var(--color-accent-bright);
   margin-bottom: 8px;
   font-weight: 700;
   text-shadow: 0 0 20px rgba(0, 173, 181, 0.3);
}

.stat-card p {
   font-size: 0.85rem;
   text-transform: uppercase;
   letter-spacing: 2px;
   color: var(--color-white);
   opacity: 0.6;
   font-weight: 500;
}

.stat-card::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 3px;
   background: var(--color-accent);
   transform: scaleX(0);
   transition: transform 0.4s ease;
}

.stat-card:hover {
   background: radial-gradient(circle at top right, rgba(0, 173, 181, 0.15), rgba(17, 34, 64, 0.8));
   transform: translateY(-10px);
   border-color: rgba(0, 173, 181, 0.5);
   box-shadow: 0 25px 50px -12px rgba(2, 12, 27, 0.9), 0 0 15px rgba(0, 173, 181, 0.3);
}

.stat-card:hover .stat-icon {
   transform: scale(1.2) rotate(-5deg);
   color: var(--color-accent-bright);
   opacity: 1;
}

.stat-card:hover::after {
   transform: scaleX(1);
}

@media (max-width: 992px) {
   .about-stats {
      grid-template-columns: 1fr;
      gap: 20px;
   }
}

@media (max-width: 992px) {
   .ceo-card {
      flex-direction: column !important;
      text-align: center;
   }

   .ceo-img {
      width: 100% !important;
      max-width: 280px !important;
      height: 320px !important;
      margin: 0 auto;
   }
}

.ceo-card .member-img {
   width: 320px;
   height: 400px;
   flex-shrink: 0;
   border-radius: 20px;
   box-shadow: var(--shadow-soft);
   border: 1px solid rgba(255, 255, 255, 0.1);
   background-size: cover;
   background-position: center;
}

.ceo-card h3 {
   color: var(--color-white);
   font-size: clamp(1.8rem, 2.5vw, 2.4rem);
   margin-bottom: 8px;
   font-family: var(--font-heading);
}

.ceo-card .role {
   color: var(--color-accent);
   font-size: 1.1rem;
   font-weight: 600;
   display: block;
   margin-bottom: 25px;
   letter-spacing: 1px;
   text-transform: uppercase;
}

.ceo-card p {
   color: var(--color-slate-light);
   font-size: 1.05rem;
   line-height: 1.8;
   margin-bottom: 20px;
}

.btn-cv {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   padding: 14px 28px;
   background: var(--gradient-accent);
   color: var(--color-navy);
   font-weight: 700;
   border-radius: 50px;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 4px 15px rgba(0, 173, 181, 0.3);
}

.btn-cv:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 25px rgba(0, 173, 181, 0.5);
   color: var(--color-navy);
}

@media (max-width: 992px) {
   .ceo-card {
      flex-direction: column;
      text-align: left;
      padding: 30px 20px;
      align-items: flex-start;
   }

   .ceo-card .member-img {
      width: 100%;
      max-width: 300px;
      height: 380px;
      margin-bottom: 30px;
      margin-left: 0;
   }

   .ceo-card .member-info {
      text-align: left !important;
      width: 100%;
   }

   .ceo-card .btn-group {
      justify-content: flex-start !important;
      width: 100%;
   }
}

/* Enhancements for general grids */
.premium-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 30px;
   margin-top: 50px;
}

/* Refining About Section Aesthetics */
#about {
   position: relative;
   background: linear-gradient(rgba(10, 25, 47, 0.4), rgba(10, 25, 47, 0.6)), url('assets/img/dots-pattern.png');
   background-size: initial;
   background-repeat: repeat;
}

.about-text {
   position: relative;
   padding-left: clamp(20px, 4vw, 40px);
   border-left: 3px solid var(--color-accent);
}

.about-text p {
   font-size: clamp(1rem, 1.1vw, 1.15rem);
   line-height: 1.8;
   margin-bottom: 25px;
   color: var(--color-slate-light);
}

.highlight-accent {
   color: var(--color-accent);
   font-weight: 600;
}

.highlight-white {
   color: var(--color-white);
   font-weight: 600;
}

@media (max-width: 768px) {
   .about-text {
      padding-left: 20px;
      border-left-width: 4px;
      text-align: left !important;
   }
}