/* =========================================
   GQM - Modern Professional Website V2.0
   Design: Contemporary Industrial Elegance
   ========================================= */

/* === CSS Variables - Modern Color Palette === */
:root {
    /* Primary Colors - Deep Ocean & Energy */
    --primary-color: #0A4D68;
    --primary-light: #088395;
    --primary-dark: #05293D;
    --accent-color: #00D9FF;
    --accent-warm: #FF6B35;
    
    /* Secondary Colors */
    --secondary-color: #E94560;
    --secondary-light: #FF6B6B;
    
    /* Neutrals */
    --dark: #0B1215;
    --dark-light: #1A2428;
    --gray-900: #1E2D34;
    --gray-800: #2C3E47;
    --gray-700: #3D5159;
    --gray-600: #526873;
    --gray-500: #6B808F;
    --gray-400: #8A9AA6;
    --gray-300: #B4BEC6;
    --gray-200: #D8DFE4;
    --gray-100: #EDF1F4;
    --gray-50: #F7F9FB;
    --white: #FFFFFF;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #088395 0%, #00D9FF 100%);
    --gradient-secondary: linear-gradient(135deg, #E94560 0%, #FF6B35 100%);
    --gradient-dark: linear-gradient(135deg, #0A4D68 0%, #088395 100%);
    --gradient-accent: linear-gradient(135deg, #00D9FF 0%, #088395 100%);
    
    /* Typography */
    --font-primary: 'Sora', sans-serif;
    --font-secondary: 'DM Sans', sans-serif;
    --font-accent: 'Crimson Pro', serif;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;
    
    /* Border Radius */
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    
    /* Shadows - Enhanced */
    --shadow-sm: 0 2px 8px rgba(10, 77, 104, 0.08);
    --shadow-md: 0 4px 16px rgba(10, 77, 104, 0.12);
    --shadow-lg: 0 8px 32px rgba(10, 77, 104, 0.16);
    --shadow-xl: 0 16px 48px rgba(10, 77, 104, 0.2);
    --shadow-2xl: 0 24px 64px rgba(10, 77, 104, 0.24);
    --shadow-glow: 0 0 40px rgba(0, 217, 255, 0.3);
    
    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* === Reset & Base Styles === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    font-family: var(--font-secondary);
    color: var(--gray-700);
    line-height: 1.7;
    background-color: var(--white);
    overflow-x: hidden;
    position: relative;
}

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

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); }

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

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

ul {
    list-style: none;
}

/* === Animated Background Orbs === */
.bg-orbs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    animation: float-orbs 20s infinite ease-in-out;
}

.orb-1 {
    width: 500px;
    height: 500px;
    background: var(--gradient-primary);
    top: -250px;
    right: -250px;
}

.orb-2 {
    width: 400px;
    height: 400px;
    background: var(--gradient-secondary);
    bottom: -200px;
    left: -200px;
    animation-delay: -7s;
}

.orb-3 {
    width: 300px;
    height: 300px;
    background: var(--gradient-accent);
    top: 50%;
    left: 50%;
    animation-delay: -14s;
}

@keyframes float-orbs {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(50px, -50px) rotate(120deg);
    }
    66% {
        transform: translate(-30px, 30px) rotate(240deg);
    }
}

/* === Container === */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* === Header & Navigation === */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 1px 0 rgba(10, 77, 104, 0.1);
    transition: all var(--transition-base);
}

.header.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow-md);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 0;
}

.logo-img {
    max-height: 60px;
    width: auto;
    object-fit: contain;
    transition: var(--transition-base);
}

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

.nav-list {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
}

.nav-link {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--gray-700);
    position: relative;
    padding: var(--spacing-xs) 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: -0.01em;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: 2px;
    transition: width var(--transition-base);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link:hover {
    color: var(--primary-color);
}

/* Dropdown */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 20px);
    left: 0;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-sm);
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-base);
    border: 1px solid var(--gray-100);
}

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

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu a {
    color: var(--gray-700);
    display: block;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    font-weight: 500;
    font-size: 0.9rem;
}

.dropdown-menu a:hover {
    background: linear-gradient(135deg, rgba(8, 131, 149, 0.1) 0%, rgba(0, 217, 255, 0.1) 100%);
    color: var(--primary-color);
    transform: translateX(8px);
    padding-left: 1.25rem;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
}

.nav-toggle span {
    width: 28px;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: 3px;
    transition: var(--transition-base);
}

/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 1rem 2rem;
    font-weight: 700;
    font-size: 1rem;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    cursor: pointer;
    border: none;
    font-family: var(--font-primary);
    position: relative;
    overflow: hidden;
    letter-spacing: -0.02em;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 20px rgba(8, 131, 149, 0.3);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(8, 131, 149, 0.4);
}

.btn-secondary {
    background: var(--gradient-secondary);
    color: white;
    box-shadow: 0 4px 20px rgba(233, 69, 96, 0.3);
}

.btn-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(233, 69, 96, 0.4);
}

.btn-large {
    padding: 1.25rem 2.5rem;
    font-size: 1.1rem;
}

.btn i {
    transition: transform var(--transition-base);
}

.btn:hover i {
    transform: translateX(5px);
}

/* === Page Header === */
.page-header {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding-top: 120px;
    padding-bottom: var(--spacing-3xl);
    overflow: hidden;
}

.hero-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #F7F9FB 0%, #EDF1F4 50%, #F7F9FB 100%);
    z-index: -1;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(8, 131, 149, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(233, 69, 96, 0.12) 0%, transparent 50%);
    z-index: -1; /* sits above the video but below content */
}

/* Hero background video */
.hero-background .hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -2; /* below overlay */
    object-fit: cover;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2; /* ensure content sits above overlay */
}

/* === Hero Title Staggered Entrance Animation === */
.hero-title {
    overflow: visible; /* allow lines to animate in */
    margin-bottom: 1.5rem; /* space after title before description/buttons */
}

/* Disable site-wide slideUp for hero title lines to avoid animation conflicts */
.page-header .hero-title .title-line {
    animation: none !important;
    display: block;
    transform: translateX(-30px);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
}

/* Fallback for any other selectors */
.hero-title .title-line {
    display: block;
}

/* Staggered reveal when parent receives .title-animate */
.title-animate .title-line:nth-child(1) {
    transform: translateX(0);
    opacity: 1;
    transition-delay: 0.05s;
}
.title-animate .title-line:nth-child(2) {
    transform: translateX(0);
    opacity: 1;
    transition-delay: 0.28s;
}
.title-animate .title-line:nth-child(3) {
    transform: translateX(0);
    opacity: 1;
    transition-delay: 0.52s;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .hero-title .title-line {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }
}

/* Space between title and description/buttons */
.hero-description {
    margin-top: 2.5rem; /* increased gap for better separation */
    margin-bottom: 1.5rem;
}

/* Add breathing room above the hero action buttons */
.hero-actions {
    margin-top: 1.75rem; /* larger spacing before CTA buttons */
}

/* === Hero badge (small top badge) === */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(255,255,255,0.95);
    color: var(--primary-dark);
    padding: 0.45rem 0.75rem;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 3;
    margin-bottom: 1.75rem; /* spacing between badge and title (increased) */
}

@media (max-width: 768px) {
    .hero-badge { background: rgba(255,255,255,0.98); }
}  


@media (max-width: 768px) {
    .hero-background .hero-video { display: none; }
    .hero-background { background: linear-gradient(135deg, #F7F9FB 0%, #EDF1F4 50%, #F7F9FB 100%); }
}

.gradient-mesh {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(45deg, transparent 48%, rgba(8, 131, 149, 0.03) 50%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, rgba(233, 69, 96, 0.03) 50%, transparent 52%);
    background-size: 40px 40px;
}

.hero-shapes {
    position: absolute;
    inset: 0;
}

.shape {
    position: absolute;
    border-radius: 50%;
    background: var(--gradient-primary);
    opacity: 0.08;
    animation: float-shapes 25s infinite ease-in-out;
    filter: blur(60px);
}

.shape-1 {
    width: 600px;
    height: 600px;
    top: -300px;
    right: -100px;
}

.shape-2 {
    width: 450px;
    height: 450px;
    bottom: -150px;
    left: -100px;
    background: var(--gradient-secondary);
    animation-delay: -8s;
}

.shape-3 {
    width: 350px;
    height: 350px;
    top: 40%;
    left: 40%;
    background: var(--gradient-accent);
    animation-delay: -16s;
}

@keyframes float-shapes {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(50px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-40px, 40px) scale(0.9);
    }
}

.page-header-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
    font-size: 0.9rem;
    font-weight: 500;
}

.breadcrumb a {
    color: var(--gray-600);
    transition: var(--transition-fast);
}

.breadcrumb a:hover {
    color: var(--primary-color);
}

.separator {
    color: var(--gray-400);
}

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

.page-title {
    margin-bottom: var(--spacing-lg);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.title-line {
    display: block;
    animation: slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.title-line:nth-child(1) {
    animation-delay: 0.1s;
}

.title-line:nth-child(2) {
    animation-delay: 0.3s;
}

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

.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.page-description {
    font-size: 1.25rem;
    color: var(--gray-600);
    max-width: 600px;
    margin: 0 auto var(--spacing-xl);
    line-height: 1.8;
}

/* Scroll Indicator */
.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-2xl);
    animation: float 2s infinite ease-in-out;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.mouse {
    width: 28px;
    height: 45px;
    border: 3px solid var(--primary-color);
    border-radius: 20px;
    position: relative;
}

.wheel {
    width: 4px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll-down 1.5s infinite;
}

@keyframes scroll-down {
    0% {
        opacity: 1;
        top: 8px;
    }
    100% {
        opacity: 0;
        top: 25px;
    }
}

.scroll-indicator span {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary-color);
}

/* === About Section === */
.about-section {
    padding: var(--spacing-3xl) 0;
    position: relative;
}

.section-tag {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, rgba(8, 131, 149, 0.1) 0%, rgba(0, 217, 255, 0.1) 100%);
    color: var(--primary-color);
    border-radius: var(--radius-xl);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--spacing-md);
    border: 1px solid rgba(8, 131, 149, 0.2);
}

.about-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--spacing-3xl);
}

.section-title {
    margin-bottom: var(--spacing-md);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.section-description {
    font-size: 1.125rem;
    color: var(--gray-600);
    line-height: 1.8;
}

.about-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--spacing-3xl);
    align-items: start;
    margin-top: var(--spacing-3xl);
}

/* About Card */
.about-card {
    background: white;
    padding: var(--spacing-3xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-slow);
    border: 1px solid var(--gray-100);
}

.card-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 217, 255, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.about-card:hover .card-glow {
    opacity: 1;
}

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

.card-number {
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 5rem;
    font-weight: 900;
    color: var(--gray-100);
    line-height: 1;
    font-family: var(--font-primary);
}

.about-card h3 {
    font-size: 1.75rem;
    margin-bottom: var(--spacing-lg);
    color: var(--gray-900);
    position: relative;
    z-index: 1;
}

.about-card p {
    color: var(--gray-600);
    line-height: 1.9;
    margin-bottom: var(--spacing-md);
    font-size: 1.05rem;
    position: relative;
    z-index: 1;
}

.about-card strong {
    color: var(--primary-color);
    font-weight: 700;
}

.card-decoration {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--gradient-primary);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Visual Grid */
.visual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.visual-card {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: all var(--transition-base);
    border: 1px solid var(--gray-100);
    position: relative;
    overflow: hidden;
}

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

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

.visual-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: var(--shadow-2xl);
    /* noticeably darker background on hover */
    background: linear-gradient(180deg, #e6eef8, #dfe9f3);
    border-color: #c7d8ea;
}

.visual-icon {
    width: 70px;
    height: 70px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
    font-size: 1.75rem;
    color: white;
    box-shadow: var(--shadow-glow);
    transition: all .18s ease;
}

.visual-card:hover .visual-icon {
    transform: scale(1.12) rotate(12deg);
    filter: brightness(0.78) saturate(0.95); /* darker icon bg */
}

/* === Stronger Hover darkening for About / Commitments / Experiences === */
.about-card:hover {
    background: linear-gradient(180deg, #e9f0f7, #dfe8f2);
    border-color: #cddff0;
    transform: translateY(-12px) scale(1.02);
    box-shadow: var(--shadow-2xl);
}

.about-card:hover .card-glow { opacity: 1; }

.about-card:hover .card-number {
    color: #052238; /* darker number for emphasis */
    transition: color var(--transition-fast);
}

.about-card:hover h3 {
    color: #021627; /* much darker heading */
}

.about-card:hover p {
    color: #0b1b2b; /* darker paragraph */
}

/* Make hero/page title appear more pronounced on hover */
.page-title:hover .title-line,
.hero-title:hover .title-line {
    color: rgba(255,255,255,0.96) !important;
    text-shadow: 0 6px 18px rgba(0,0,0,0.8);
    transition: color .18s ease, text-shadow .18s ease;
}

/* Experiences cards follow visual-card behaviour; ensure h4/p darken more on hover */
.visual-card:hover h4 { color: #043a5a; }
.visual-card:hover p { color: #17233a; }

/* Smooth transitions for numbers and text */
.card-number, .about-card h3, .about-card p, .visual-card h4, .visual-card p {
    transition: color var(--transition-fast);
}

.visual-card h4 {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-xs);
    color: var(--gray-900);
}

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

/* Floating Animation */
.floating-card {
    animation: float-card 4s infinite ease-in-out;
}

@keyframes float-card {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

/* === Commitments Section === */
.commitments-section {
    padding: var(--spacing-3xl) 0;
    background: linear-gradient(135deg, var(--gray-50) 0%, white 50%, var(--gray-50) 100%);
    position: relative;
}

.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--spacing-3xl);
}

.commitments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-2xl);
    margin-top: var(--spacing-3xl);
}

.commitment-card {
    background: white;
    padding: var(--spacing-2xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-base);
    border: 1px solid var(--gray-100);
}

.commitment-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity var(--transition-base);
    z-index: 0;
}

.commitment-card:hover::before {
    opacity: 0.05;
}

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

.commitment-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(8, 131, 149, 0.1) 0%, rgba(0, 217, 255, 0.1) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
    font-size: 2rem;
    color: var(--primary-color);
    transition: all var(--transition-base);
    position: relative;
    z-index: 1;
}

.commitment-card:hover .commitment-icon {
    background: var(--gradient-primary);
    color: white;
    transform: scale(1.1) rotate(5deg);
    box-shadow: var(--shadow-glow);
}

.commitment-card h3 {
    font-size: 1.35rem;
    margin-bottom: var(--spacing-md);
    color: var(--gray-900);
    position: relative;
    z-index: 1;
}

.commitment-card p {
    color: var(--gray-600);
    line-height: 1.8;
    font-size: 0.95rem;
    position: relative;
    z-index: 1;
}

.commitment-number {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--gray-100);
    font-family: var(--font-primary);
    line-height: 1;
    z-index: 0;
}

/* === Experience Section === */
.experience-section {
    padding: var(--spacing-3xl) 0;
    background: white;
}

.experience-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    align-items: center;
    margin-top: var(--spacing-3xl);
}

.experience-intro {
    font-size: 1.125rem;
    color: var(--gray-600);
    line-height: 1.8;
    margin: var(--spacing-lg) 0 var(--spacing-2xl);
}

.highlight-features {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: linear-gradient(135deg, var(--gray-50) 0%, white 100%);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    border-left: 4px solid var(--primary-color);
}

.highlight-item:hover {
    transform: translateX(10px);
    background: linear-gradient(135deg, rgba(8, 131, 149, 0.05) 0%, white 100%);
}

.highlight-item i {
    font-size: 1.25rem;
    color: var(--primary-color);
    flex-shrink: 0;
}

.highlight-item span {
    font-weight: 500;
    color: var(--gray-700);
    font-size: 0.95rem;
}

/* Stats */
.experience-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.stat-box {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-base);
    border: 1px solid var(--gray-100);
}

.stat-glow {
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle, rgba(0, 217, 255, 0.2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.stat-box:hover .stat-glow {
    opacity: 1;
}

.stat-box:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: var(--shadow-xl);
}

.stat-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
    font-size: 1.5rem;
    color: white;
    box-shadow: var(--shadow-glow);
}

.stat-value {
    font-size: 3rem;
    font-weight: 900;
    color: var(--gray-900);
    font-family: var(--font-primary);
    line-height: 1;
    margin-bottom: var(--spacing-sm);
}

.stat-decimal {
    font-size: 1.5rem;
    color: var(--gray-600);
}

.stat-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* === Service Promise === */
.service-promise {
    padding: var(--spacing-3xl) 0;
    background: linear-gradient(135deg, var(--dark) 0%, var(--dark-light) 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.service-promise::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(45deg, transparent 48%, rgba(0, 217, 255, 0.05) 50%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, rgba(233, 69, 96, 0.05) 50%, transparent 52%);
    background-size: 50px 50px;
}

.promise-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--spacing-3xl);
}

.promise-header .section-tag {
    background: linear-gradient(135deg, rgba(0, 217, 255, 0.2) 0%, rgba(8, 131, 149, 0.2) 100%);
    color: var(--accent-color);
    border-color: rgba(0, 217, 255, 0.3);
}

.promise-header .section-title,
.promise-header .section-description {
    color: white;
}

.promise-timeline {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    padding: var(--spacing-2xl) 0;
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, transparent 0%, var(--accent-color) 10%, var(--accent-color) 90%, transparent 100%);
    transform: translateX(-50%);
}

.promise-item {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
    align-items: center;
    position: relative;
}

.promise-item:nth-child(odd) .promise-content {
    text-align: right;
    order: 1;
}

.promise-item:nth-child(odd) .promise-icon {
    order: 3;
}

.promise-item:nth-child(even) .promise-content {
    text-align: left;
    order: 3;
}

.promise-item:nth-child(even) .promise-icon {
    order: 1;
}

.promise-number {
    width: 70px;
    height: 70px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 900;
    color: white;
    box-shadow: 0 0 30px rgba(0, 217, 255, 0.5);
    position: relative;
    z-index: 2;
    order: 2;
}

.promise-content h3 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
    color: white;
}

.promise-content p {
    color: var(--gray-300);
    line-height: 1.8;
}

.promise-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--accent-color);
    backdrop-filter: blur(10px);
}

/* === CTA Section === */
.cta {
    padding: var(--spacing-3xl) 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #088395 0%, #00D9FF 100%);
}

.cta-background {
    position: absolute;
    inset: 0;
}

.cta-pattern {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
}

.cta-content {
    text-align: center;
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.cta-icon {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-xl);
    font-size: 2.5rem;
    color: white;
    backdrop-filter: blur(10px);
    animation: pulse-icon 2s infinite;
}

@keyframes pulse-icon {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
    }
}

.cta-title {
    font-size: clamp(2rem, 4vw, 3rem);
    color: white;
    margin-bottom: var(--spacing-md);
    font-weight: 800;
}

.cta-description {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--spacing-2xl);
    line-height: 1.8;
}

.cta-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

.cta-buttons .btn-primary {
    background: white;
    color: var(--primary-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.cta-buttons .btn-primary:hover {
    background: var(--gray-50);
}

.cta-buttons .btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
    box-shadow: none;
}

.cta-buttons .btn-secondary:hover {
    background: white;
    color: var(--primary-color);
}

/* === Footer === */
.footer {
    background: var(--dark);
    color: var(--gray-300);
}

.footer-top {
    padding: var(--spacing-3xl) 0 var(--spacing-2xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: var(--spacing-2xl);
}

.logo {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: var(--spacing-md);
}

.logo-text {
    font-size: 2.5rem;
    font-weight: 900;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.05em;
    font-family: var(--font-primary);
}

.logo-subtitle {
    font-size: 0.75rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-top: -0.5rem;
}

.footer-description {
    color: var(--gray-400);
    line-height: 1.8;
    margin-bottom: var(--spacing-lg);
}

.footer-rating {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.rating-stars {
    display: flex;
    gap: 0.25rem;
}

.rating-stars i {
    color: #FFB800;
}

.footer-rating span {
    font-size: 0.9rem;
    color: var(--gray-400);
}

.footer-title {
    font-size: 1.1rem;
    color: white;
    margin-bottom: var(--spacing-lg);
    font-weight: 700;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.footer-links a {
    color: var(--gray-400);
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-links a i {
    color: var(--primary-light);
    font-size: 0.75rem;
}

.footer-links a:hover {
    color: var(--accent-color);
    transform: translateX(5px);
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.footer-contact li {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
}

.footer-contact i {
    color: var(--primary-light);
    font-size: 1.1rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.footer-contact a {
    color: var(--gray-400);
    transition: var(--transition-fast);
}

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

.footer-bottom {
    padding: var(--spacing-xl) 0;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.footer-bottom p {
    color: var(--gray-500);
    font-size: 0.9rem;
}

.footer-social {
    display: flex;
    gap: var(--spacing-md);
}

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

.footer-social a:hover {
    background: var(--gradient-primary);
    color: white;
    transform: translateY(-5px);
    box-shadow: var(--shadow-glow);
}

/* === Animations === */
[data-aos] {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-aos].aos-animate {
    opacity: 1;
}

[data-aos="fade-up"] {
    transform: translateY(40px);
}

[data-aos="fade-up"].aos-animate {
    transform: translateY(0);
}

[data-aos="fade-down"] {
    transform: translateY(-40px);
}

[data-aos="fade-down"].aos-animate {
    transform: translateY(0);
}

[data-aos="fade-left"] {
    transform: translateX(40px);
}

[data-aos="fade-left"].aos-animate {
    transform: translateX(0);
}

[data-aos="fade-right"] {
    transform: translateX(-40px);
}

[data-aos="fade-right"].aos-animate {
    transform: translateX(0);
}

[data-aos="zoom-in"] {
    transform: scale(0.9);
}

[data-aos="zoom-in"].aos-animate {
    transform: scale(1);
}

/* === Responsive Design === */
@media (max-width: 1024px) {
    .about-content,
    .experience-wrapper {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
    }
    
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
    
    .promise-timeline {
        max-width: 600px;
    }
    
    .promise-item {
        grid-template-columns: 1fr auto;
        text-align: left !important;
    }
    
    .promise-item .promise-content {
        order: 2 !important;
        text-align: left !important;
    }
    
    .promise-item .promise-number {
        order: 1;
    }
    
    .promise-item .promise-icon {
        display: none;
    }
    
    .timeline-line {
        left: 35px;
    }
}

@media (max-width: 768px) {
    :root {
        --spacing-3xl: 4rem;
        --spacing-2xl: 3rem;
    }
    
    .nav-menu {
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        background: white;
        padding: var(--spacing-lg);
        box-shadow: var(--shadow-xl);
        transform: translateY(-120%);
        opacity: 0;
        transition: all var(--transition-base);
    }
    
    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
    }
    
    .nav-list {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .dropdown-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        margin-top: var(--spacing-sm);
    }
    
    .nav-toggle {
        display: flex;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    .visual-grid {
        grid-template-columns: 1fr;
    }
    
    .commitments-grid {
        grid-template-columns: 1fr;
    }
    
    .experience-stats {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
    
    .cta-buttons .btn {
        width: 100%;
    }
    
    .page-header {
        min-height: 60vh;
        padding-top: 100px;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .card-number,
    .commitment-number {
        font-size: 3rem;
    }
    
    .stat-value {
        font-size: 2.5rem;
    }
    
    .promise-number {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

/* === Very small screens (<=440px) - fix overlap & scale down header action === */
@media (max-width: 440px) {
    /* Give extra top spacing so fixed header doesn't cover the hero title at ~430px */
    .page-header {
        padding-top: 120px;
        padding-bottom: 1.5rem;
        min-height: auto;
    }

    /* Reduce header action button size */
    .nav-actions .btn {
        padding: 0.45rem 0.7rem;
        font-size: 0.82rem;
        border-radius: 0.6rem;
        min-width: auto;
    }

    /* Slightly smaller logo to free vertical space */
    .logo-img { max-height: 48px; }

    /* Make hero title wrap better and be smaller */
    .hero-title {
        font-size: 1.5rem !important;
        line-height: 1.05;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Ensure hero badge is visible and compact on narrow screens */
    .hero-badge {
        font-size: 0.82rem;
        padding: 0.35rem 0.6rem;
        margin-bottom: 0.9rem; /* slightly larger spacing on narrow screens */
    }
}

/* === Small screen hero & buttons tweaks (<=460px) === */
@media (max-width: 460px) {
    .page-header {
        padding-top: 70px;
        padding-bottom: 2rem;
        min-height: auto;
    }

    .hero-title {
        font-size: 1.6rem !important;
        line-height: 1.05;
        letter-spacing: -0.01em;
        overflow-wrap: break-word;
        word-break: break-word;
        margin-bottom: 1.25rem; /* slightly increased on small screens */
    }

    .hero-title .title-line {
        display: block;
    }

    .hero-description {
        font-size: 0.98rem;
        line-height: 1.4;
        margin-top: 1.1rem; /* add more space between title and description on mobile */
        margin-bottom: 1rem;
    }

    .hero-actions {
        gap: 0.75rem;
        flex-direction: column;
        align-items: stretch;
        margin-top: 1.1rem; /* space before buttons */
    }

    .hero-actions .btn,
    .btn-primary.btn-large,
    .btn-secondary.btn-large {
        padding: 0.8rem 1rem;
        font-size: 0.95rem;
        border-radius: 0.8rem;
        width: 100%;
        justify-content: center;
    }

    .nav-actions .btn {
        padding: 0.55rem 0.9rem;
        font-size: 0.92rem;
        border-radius: 0.75rem;
        min-width: auto;
    }

    .hero-stats {
        padding: 1rem 0;
        gap: 1rem;
    }
}

/* === Ensure sufficient top spacing on small screens (<=480px) === */
@media (max-width: 480px) {
    /* Ensure the fixed header does not cover the hero badge/title on small phones */
    .page-header {
        padding-top: 120px !important;
        padding-bottom: 1.5rem;
        min-height: auto;
    }

    /* Make header action compact */
    .nav-actions .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
        border-radius: 0.7rem;
        min-width: auto;
    }

    .logo-img { max-height: 48px; }
}

/* === Small screen hero & buttons tweaks (<=420px) === */
@media (max-width: 420px) {
    .page-header {
        /* keep the larger spacing to avoid overlap */
        padding-top: 110px !important;
        padding-bottom: 1.8rem;
        min-height: auto;
    }

    .hero-title {
        font-size: 1.6rem !important;
        line-height: 1.05;
        letter-spacing: -0.01em;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .hero-title .title-line {
        display: block;
    }

    .hero-description {
        font-size: 0.95rem;
        line-height: 1.4;
    }

    .hero-actions {
        gap: 0.75rem;
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn,
    .btn-primary.btn-large,
    .btn-secondary.btn-large {
        padding: 0.7rem 1rem;
        font-size: 0.95rem;
        border-radius: 0.75rem;
        width: 100%;
        justify-content: center;
    }

    .nav-actions .btn {
        padding: 0.55rem 0.9rem;
        font-size: 0.9rem;
        border-radius: 0.75rem;
        min-width: auto;
    }

    .hero-stats {
        padding: 1rem 0;
        gap: 1rem;
    }
}

/* === Extra small phones (<=380px) fine-tuning === */
@media (max-width: 380px) {
    .hero-title {
        font-size: 1.5rem !important; /* increased for 360-380 phones */
        line-height: 1.14;
    }

    .hero-title .title-line { margin-bottom: 0.45rem; }

    .hero-description {
        font-size: 1.08rem; /* larger for readability */
        line-height: 1.46;
    }

    .btn-primary.btn-large,
    .btn-secondary.btn-large {
        padding: 0.6rem 0.9rem;
        font-size: 0.9rem;
    }

    .nav-actions .btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.85rem;
    }

    .page-header {
        padding-top: 50px;
    }
}

/* === Very narrow phones (<=360px) specific tweaks === */
@media (max-width: 360px) {
    .hero-title { font-size: 1.45rem !important; line-height: 1.12; }
    .hero-title .title-line { margin-bottom: 0.35rem; }
    .hero-description { font-size: 1.06rem; line-height: 1.44; }
    .page-header { padding-top: 48px; }
}

/* === Secteurs Section - Video Background Support === */
.secteurs-section.has-video {
    position: relative;
    overflow: hidden;
    background: transparent;
}

.secteurs-section.has-video .secteurs-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    object-fit: cover;
    pointer-events: none;
}

.secteurs-section.has-video .video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2,6,23,0.35), rgba(2,6,23,0.45));
    z-index: 1;
}

.secteurs-section.has-video .container {
    position: relative;
    z-index: 2;
}

.secteurs-section.has-video .section-title,
.secteurs-section.has-video .section-description,
.secteurs-section.has-video .section-tag {
    color: #ffffff;
}

.secteurs-section.has-video .secteurs-grid .secteur-item {
    background: rgba(255,255,255,0.06);
    color: #ffffff;
    box-shadow: none;
    border: 1px solid rgba(255,255,255,0.04);
}

@media (max-width: 768px) {
    .secteurs-section.has-video .secteurs-video { display: none; }
    .secteurs-section.has-video { background: #ffffff; }
    .secteurs-section.has-video .video-overlay { display: none; }
    .secteurs-section.has-video .section-title,
    .secteurs-section.has-video .section-description,
    .secteurs-section.has-video .section-tag {
        color: #111827 !important;
    }
}

/* === Clients Carousel === */
.clients-section {
    background: #f8fafc;
}

/* === Services Page Hero Background === */
.services-hero {
    position: relative;
    background-image: url('../images/services-hero.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;

    /* Use 1080×720 (3:2) aspect ratio and responsive min-height */
    aspect-ratio: 1080 / 720; /* 3 / 2 */
    min-height: 360px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Larger screens: keep a taller minimum without forcing excessive scaling */
@media (min-width: 1200px) {
    .services-hero { min-height: 540px; }
}

/* Overlay for contrast */
.services-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(2,6,23,0.18), rgba(2,6,23,0.05));
    z-index: 1;
    pointer-events: none;
}

.services-hero .page-header-content,
.services-hero .page-title,
.services-hero .page-description,
.services-hero .breadcrumb {
    position: relative;
    z-index: 2;

    /* Ensure text is visible over the hero image */
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}

/* Breadcrumb links and description fine-tuning */
.services-hero .breadcrumb a,
.services-hero .breadcrumb a:visited {
    color: rgba(255,255,255,0.95);
}

.services-hero .page-description {
    color: rgba(255,255,255,0.92);
}

@media (max-width: 992px) {
    .services-hero {
        background-position: center top;
        background-size: cover;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

@media (max-width: 768px) {
    /* Show background on small screens; reduce height and improve contrast for phones */
    .services-hero {
        background-image: url('../images/services-hero.webp');
        background-size: cover;
        background-position: center top;
        aspect-ratio: auto;
        min-height: 220px;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    /* Stronger overlay on small screens for better text contrast */
    .services-hero::before {
        background: linear-gradient(180deg, rgba(2,6,23,0.45), rgba(2,6,23,0.15));
    }
}

/* === Enterprise Page Hero Background === */
.entreprise-hero {
    position: relative;
    background-image: url('../images/entreprise-hero.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;

    /* Use 1080×720 aspect ratio and responsive min-height similar to services hero */
    aspect-ratio: 1080 / 720;
    min-height: 360px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Larger screens: keep a taller minimum without forcing excessive scaling */
@media (min-width: 1200px) {
    .entreprise-hero { min-height: 540px; }
}

/* Remove the default gradient background that sits in .hero-background for this page */
.entreprise-hero .hero-background { background: transparent; }
.entreprise-hero .hero-overlay { background: none; }
.entreprise-hero .gradient-mesh { opacity: 0.08; }

@media (max-width: 992px) {
    .entreprise-hero {
        background-position: center top;
        background-size: cover;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* Align page header content to the left and constrain width for enterprise hero */
.entreprise-hero .page-header-content {
    text-align: left !important;
    max-width: 720px;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 0.5rem;
    padding-right: 0;
}

/* Position top-left on large screens */
@media (min-width: 992px) {
    .entreprise-hero .page-header-content {
        position: absolute !important;
        top: 48px;
        left: 48px;
        margin: 0 !important;
        max-width: 640px;
        padding-left: 0;
    }
}

/* Ensure children are left-aligned and breadcrumb starts at left */
.entreprise-hero .breadcrumb { justify-content: flex-start; }
.entreprise-hero .page-title,
.entreprise-hero .page-description { text-align: left; }

@media (max-width: 768px) {
    .entreprise-hero .page-header-content { max-width: 100%; padding-left: 0.75rem; padding-right: 0.75rem; text-align: left !important; position: static !important; }
    .entreprise-hero .breadcrumb { justify-content: flex-start; }
} 

/* Overlay for contrast */
.entreprise-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(2,6,23,0.18), rgba(2,6,23,0.05));
    z-index: 1;
    pointer-events: none;
}

.entreprise-hero .page-header-content,
.entreprise-hero .page-title,
.entreprise-hero .page-description,
.entreprise-hero .breadcrumb {
    position: relative;
    z-index: 2;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}

/* Force gradient-text to plain white on enterprise hero for consistency */
.entreprise-hero .page-title .gradient-text {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}

.entreprise-hero .page-title .title-line {
    color: #ffffff;
}

@media (min-width: 992px) {
    .entreprise-hero { min-height: 360px; }
}

@media (max-width: 992px) {
    .entreprise-hero {
        background-position: center top;
        background-size: cover;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

@media (max-width: 768px) {
    /* Keep the background visible on small screens but reduce height */
    .entreprise-hero {
        background-image: url('../images/entreprise-hero.webp');
        background-size: cover;
        background-position: center top;
        aspect-ratio: auto;
        min-height: 220px;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .entreprise-hero::before {
        background: linear-gradient(180deg, rgba(2,6,23,0.45), rgba(2,6,23,0.15));
    }
}

/* === L'Ingénierie Page Hero === */
.lingenierie-hero {
    position: relative;
    background-image: url('../images/lingenierie-hero.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;

    /* Use 1080×720 aspect-like responsive settings */
    aspect-ratio: 1080 / 720;
    min-height: 360px;
    padding-top: 0;
    padding-bottom: 0;
}

@media (min-width: 1200px) {
    .lingenierie-hero { min-height: 540px; }
}

.lingenierie-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(2,6,23,0.18), rgba(2,6,23,0.05));
    z-index: 1;
    pointer-events: none;
}

.lingenierie-hero .page-header-content,
.lingenierie-hero .page-title,
.lingenierie-hero .page-description,
.lingenierie-hero .breadcrumb {
    position: relative;
    z-index: 2;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}

/* Position content top-center on large screens */
@media (min-width: 992px) {
    .lingenierie-hero .page-header-content {
        position: absolute !important;
        top: 48px;
        left: 50%;
        transform: translateX(-50%);
        margin: 0 !important;
        max-width: 900px;
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }

    .lingenierie-hero .page-title,
    .lingenierie-hero .page-description { text-align: center; }
}

@media (max-width: 992px) {
    .lingenierie-hero {
        background-position: center top;
        background-size: cover;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* Remove default overlay/gradient from hero-background to show image clearly */
.lingenierie-hero .hero-background { background: transparent; }
.lingenierie-hero .hero-overlay { background: none; }
.lingenierie-hero .gradient-mesh { opacity: 0.08; }

/* === Contact Page Styles (moved from contact/index.php inline) === */
.contact-hero {
    position: relative;
    color: white;
    padding-top: 3rem;
    padding-bottom: 3rem;
}
/* Contact hero image background */
.contact-hero .hero-background {
    background-image: url('../images/contact-hero.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.contact-hero .hero-overlay {
    /* slightly darker overlay for reliable contrast with foreground text */
    background: linear-gradient(180deg, rgba(2,6,23,0.45), rgba(2,6,23,0.18));
    z-index: -1;
}

.contact-hero .page-header-content,
.contact-hero .page-title,
.contact-hero .page-description {
    position: relative;
    z-index: 2;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}

@media (min-width: 992px) {
    .contact-hero .page-header-content { position: absolute !important; top: 48px; left: 48px; margin: 0 !important; max-width: 640px; padding-left: 0; text-align: left; }
}

@media (max-width: 992px) {
    .contact-hero { padding-top: 2rem; padding-bottom: 2rem; }
    .contact-hero .page-header-content { text-align: center; }
}

.contact-section { padding: 4rem 0; }
.contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.contact-form { background: white; padding: 2.5rem; border-radius: 1.25rem; box-shadow: var(--shadow-lg); }
.contact-form h2 { margin-bottom: 1.5rem; font-size: 1.5rem; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #111827; }
.form-group input, .form-group textarea { width: 100%; padding: 0.85rem; border: 2px solid #e5e7eb; border-radius: 0.75rem; }
.form-submit { background: #ef4444; color: white; padding: 0.75rem 1.25rem; border-radius: 0.75rem; width: 100%; font-weight: 700; }
.form-submit:hover { background: #e63946; }
.contact-info { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-card { background: white; padding: 1.5rem; border-radius: 1rem; box-shadow: var(--shadow-md); display:flex; gap:1rem; align-items:flex-start; }
.contact-card-icon { width:60px; height:60px; background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); border-radius: 1rem; display:flex; align-items:center; justify-content:center; color: #fff; }
.contact-card-content h3 { margin-bottom: 0.5rem; color: #111827; }
.contact-card-content p { color: #6b7280; }

/* Address card with background image (full visible, centered) */
.contact-card--address {
    background-image: url('../images/address.webp');
    /* Show the full image without zooming/cropping */
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: var(--dark);
    color: #fff;
    position: relative;
    overflow: hidden;
    border: none;
    box-shadow: var(--shadow-md);
}
.contact-card--address::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Subtle overlay to preserve readability while keeping image visible */
    background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.08));
    z-index: 0;
}
.contact-card--address .contact-card-content {
    position: relative;
    z-index: 2;
    color: #fff;
}
.contact-card--address .contact-card-icon {
    background: rgba(255,255,255,0.10);
    color: #fff;
}
.contact-card--address .contact-card-content h3,
.contact-card--address .contact-card-content p {
    color: #ffffff; /* ensure titles and text are white */
}
.contact-card--address .contact-address {
    color: #ffffff;
    font-weight: 600;
    margin: 0;
}
.contact-card--address { padding: 1.5rem; min-height: 160px; border-radius: 1rem; }

/* Zoom button (top-right) */
.address-zoom {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    background: rgba(0,0,0,0.45);
    color: #fff;
    border: none;
    padding: 0.5rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}
.address-zoom:hover { background: rgba(0,0,0,0.6); transform: scale(1.03); }
.address-zoom:focus { outline: 2px solid rgba(255,255,255,0.2); }

/* Cursor pointer to indicate clickable area */
.contact-card--address { cursor: pointer; }

/* Modal for image zoom */
.image-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.85); z-index: 99999; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; }
.image-modal.open { opacity: 1; visibility: visible; }
.image-modal .modal-inner { position: relative; max-width: 96%; max-height: 96%; }
.image-modal img { display: block; max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: var(--shadow-2xl); }
.image-modal .close-btn { position: absolute; top: -18px; right: -18px; background: #ffffff; color: #111827; border-radius: 999px; border: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); cursor: pointer; }

@media (max-width: 768px) {
    .contact-card--address { padding: 1rem; min-height: 140px; background-size: cover; background-position: center; }
    .address-zoom { top: 8px; right: 8px; width: 36px; height: 36px; }
}

.whatsapp-btn { display:inline-flex; align-items:center; gap:0.5rem; background:#25d366; color:#fff; padding:0.6rem 1.2rem; border-radius:0.75rem; }
.map-container { width:100%; height:400px; border-radius:1rem; overflow:hidden; box-shadow: var(--shadow-md); margin-top:1.5rem; }

/* Ensure embedded maps fill their container (overrides inline width/height) */
.map-container iframe {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 300px;
    border: none;
}

/* Desktop / Tablet tweak */
@media (max-width: 992px) {
    .map-container { height: 340px; }
    .map-container iframe { min-height: 260px; }
}

/* Mobile-specific contact layout fixes */
@media (max-width: 768px) {
    /* Stack form and info into a single column */
    .contact-content { grid-template-columns: 1fr; gap: 1.25rem; }

    /* Reduce padding for the form and make CTA full-width */
    .contact-form { padding: 1.25rem; }
    .form-group input, .form-group textarea { font-size: 1rem; padding: 0.85rem; }
    .form-submit { width: 100%; padding: 0.9rem; font-size: 1rem; }

    /* Make contact cards more compact and readable */
    .contact-card { flex-direction: row; align-items: center; gap: 1rem; padding: 1rem; }
    .contact-card-icon { width: 48px; height: 48px; flex-shrink: 0; }
    .contact-card-content h3 { font-size: 1rem; margin-bottom: 0.25rem; }
    .contact-card-content p { font-size: 0.95rem; margin: 0; }

    /* Convert contact links and WhatsApp to full-width buttons for better tap targets */
    .contact-card-content a, .contact-card-content .whatsapp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.75rem; width: 100%; border-radius: 0.75rem; font-weight: 700; }
    .contact-card-content a { background: rgba(255,255,255,0.06); color: #ffffff; text-decoration: none; }
    .contact-card-content a:hover { background: rgba(255,255,255,0.09); }

    /* Map smaller on narrow screens */
    .map-container { height: 260px; }
    .map-container iframe { min-height: 220px; }

    /* Improve spacing inside the contact hero on small viewports */
    .contact-hero { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .contact-hero .page-header-content { text-align: center; padding-left: 0; }
}

/* === Contrôle Qualité - Background Illustration === */
#controle-qualite {
    position: relative;
    background-image: linear-gradient(90deg, rgba(255,255,255,0.98), rgba(255,255,255,0.9)), url('../images/control.svg');
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 40% auto;
    padding: 4rem 0;
}

#controle-qualite .container {
    position: relative;
    z-index: 2;
}

/* Slight tint overlay to improve contrast for text */
#controle-qualite::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.85) 60%);
    z-index: 1;
    pointer-events: none;
}

/* Make sure inner content sits above the overlay */
#controle-qualite .about-intro,
#controle-qualite .about-content {
    position: relative;
    z-index: 3;
}

@media (max-width: 992px) {
    #controle-qualite {
        background-size: 50% auto;
        background-position: center top;
        padding: 3rem 0;
    }
}

@media (max-width: 768px) {
    /* Hide decorative background on small screens for performance and clarity */
    #controle-qualite {
        background-image: none;
        padding: 2.5rem 0;
    }
}

.clients-wrap {
    overflow: hidden;
}

.clients-track {
    display: flex;
    gap: 2rem;
    align-items: center;
    will-change: transform;
    animation: scroll-left 20s linear infinite;
}

.clients-item {
    flex: 0 0 auto;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.clients-item img {
    max-width: 100%;
    height: 64px;
    object-fit: contain;
    filter: grayscale(0.0) contrast(0.95);
    opacity: 0.95;
    transition: transform 0.3s ease;
}

.clients-item:hover img { transform: scale(1.05); }

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

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

@media (max-width: 768px) {
    .clients-track { animation-duration: 30s; }
    .clients-item { width: 140px; }
    .clients-item img { height: 48px; }
}

/* === Desktop hero: white text on large screens (>=1024px) === */
@media (min-width: 1024px) {
    .page-header .hero-title,
    .page-header .hero-description,
    .page-header .hero-badge {
        color: #ffffff !important;
    }

    /* Ensure gradient-text appears white on large screens */
    .page-header .hero-title .gradient-text {
        background: none !important;
        -webkit-text-fill-color: #ffffff !important;
        color: #ffffff !important;
        background-clip: initial !important;
        -webkit-background-clip: initial !important;
    }

    /* Slightly tint the badge background so white text remains legible */
    .page-header .hero-badge {
        background: rgba(0, 0, 0, 0.18) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255,255,255,0.12);
    }
}