:root {
    --color-brand-primary: #14b8a6;
    --color-brand-secondary: #0f172a;
    --color-brand-accent: #ef4444;
    --color-bg-main: #ffffff;
    --color-bg-alt: #f8fafc;
    --color-bg-dark: #0f172a;
    --color-text-main: #1e293b;
    --color-text-muted: #64748b;
    --color-text-light: #f1f5f9;
    --color-text-white: #ffffff;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 6rem;
    --font-main: 'Inter', sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    background-color: var(--color-bg-main);
    color: var(--color-text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

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

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

/* Hero Section */
.hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-track {
    position: absolute;
    inset: 0;
    display: flex;
    width: 500%; /* 5 slides = 500% */
    height: 100%;
    z-index: 0;
    animation: hero-scroll 16s infinite ease-in-out;
}

.hero-slide {
    width: 20%; /* Each slide is 1/5th of the 500% track */
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* Individual Slide Images */
.h-slide-1 { background-image: linear-gradient(rgba(15, 23, 42, 0.5), rgba(15, 23, 42, 0.5)), url('https://saftech.ae/content/hero/02.webp'); }
.h-slide-2 { background-image: linear-gradient(rgba(15, 23, 42, 0.5), rgba(15, 23, 42, 0.5)), url('https://saftech.ae/content/hero/03.webp'); }
.h-slide-3 { background-image: linear-gradient(rgba(15, 23, 42, 0.5), rgba(15, 23, 42, 0.5)), url('https://saftech.ae/content/hero/04.webp'); }
.h-slide-4 { background-image: linear-gradient(rgba(15, 23, 42, 0.5), rgba(15, 23, 42, 0.5)), url('https://saftech.ae/content/hero/01.webp'); }
.h-slide-5 { background-image: linear-gradient(rgba(15, 23, 42, 0.5), rgba(15, 23, 42, 0.5)), url('https://saftech.ae/content/hero/02.webp'); }

@keyframes hero-scroll {
    0%, 20% { transform: translateX(0); }
    25%, 45% { transform: translateX(-20%); }
    50%, 70% { transform: translateX(-40%); }
    75%, 95% { transform: translateX(-60%); }
    100% { transform: translateX(-80%); }
}

/* Logo Carousel Styles */
.carousel-container {
    overflow: hidden;
    width: 100%;
    position: relative;
    padding: 40px 0;
}

.carousel-track {
    display: flex;
    width: max-content; /* Important: allows track to be as wide as all logos */
    animation: scroll-logos 30s linear infinite;
}

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

.carousel-slide {
    flex-shrink: 0;
    padding: 0 40px;
}

.client-logo {
    height: 50px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.5;
    transition: all 0.3s ease;
}

.carousel-slide:hover .client-logo {
    filter: grayscale(0%);
    opacity: 1;
}

@keyframes scroll-logos {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Moves exactly half way (one full set of logos) */
}