/* Hero Slider */
.hero-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    padding-top: calc(var(--header-height) + var(--top-bar-height));
    /* Account for both headers */
    background-color: #000;
    /* Ensure hero is dark for premium feel */
    color: #fff;
    /* Invert text for hero since it's dark again */
}

/* Override header variables for hero */
.hero-container h1,
.hero-container p,
.hero-container .subtitle {
    color: white;
    /* Force white text in slider */
}

.hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 10%;
    opacity: 0;
    visibility: hidden;
    transition: all 1s ease-in-out;
    background-size: cover;
    background-position: center;
    transform: translateX(100%);
    /* Start off-screen right */
    z-index: 1;
}

/* Slide content gets a dark overlay for readability */
.slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.3) 100%);
    z-index: 1;
}

.slide-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    transform: translateX(50px);
    opacity: 0;
    transition: all 0.8s ease 0.3s;
    /* Delay for content animation */
}

.slide.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    /* On screen */
    z-index: 5;
}

.slide.active .slide-content {
    transform: translateX(0);
    opacity: 1;
}

.slide.exit {
    transform: translateX(-100%);
    /* Exit to left */
    z-index: 4;
    opacity: 1;
    /* Keep visible while sliding out */
    visibility: visible;
}

/* Slide Image styling if separate from background */
.slide-image-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    z-index: 0;
    /* Image inside will be covered by gradient */
}

.slide-tag {
    font-family: var(--font-head);
    color: var(--accent-red);
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    text-transform: uppercase;
    display: block;
    font-weight: 600;
}



/* Responsive adjustment */
@media (max-width: 768px) {
    .slide::before {
        background: rgba(0, 0, 0, 0.85);
        /* Darker on mobile */
    }
}

/* Services */
.services {
    padding: 6rem 0;
    /* Reduced top/bottom padding slightly */
    background: #ffffff;
    /* White background */
}

/* Override container for services to be wider for 5 columns */
.services .container {
    max-width: 95%;
    /* Use almost full width */
    padding: 0 2rem;
}

.section-header {
    margin-bottom: 4rem;
}

/* Cleaner Service Layout - Compact Version */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    /* Reduced gap */
}

/* 5 Column Layout for large screens */
.services-5-col {
    grid-template-columns: repeat(5, 1fr);
}

.service-card {
    background: transparent;
    border: none;
    padding: 0.5rem;
    /* Minimized padding */
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    height: 100%;
}

.service-card:hover {
    transform: none;
    box-shadow: none;
}

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

/* Remove the top red gradient line if not in new design, or keep it.
   Image shows clean white cards. Let's remove the top line for now to match the "clean card" look. */
.service-card::before {
    display: none;
}

.card-icon {
    font-size: 2.5rem;
    /* Slightly smaller icon base */
    margin-bottom: 1rem;
    /* Reduced margin */
    color: var(--accent-red);
    height: 40px;
    /* Smaller icon box */
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.card-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.service-card h3 {
    margin-bottom: 0.8rem;
    /* Reduced margin */
    font-size: 1.1rem;
    /* Slightly smaller title */
    color: var(--accent-red);
    font-weight: 700;
    min-height: auto;
    display: block;
}

.service-card p {
    color: var(--text-main);
    font-size: 0.85rem;
    /* Smaller body text */
    line-height: 1.5;
    /* Tighter line height */
    margin-bottom: 1.5rem;
    /* Reduced margin */
    flex-grow: 1;
}

.btn-learn-more {
    background: transparent;
    color: var(--accent-red);
    font-size: 0.8rem;
    /* Smaller button text */
    padding: 0.5rem 1.5rem;
    /* Smaller button padding */
    border: 1px solid var(--accent-red);
    border-radius: 50px;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: auto;
    align-self: flex-start;
    transition: all 0.3s;
}

.btn-learn-more:hover {
    background: var(--accent-red);
    color: white;
}

/* Responsive adjustment for 5 columns */
@media (max-width: 1400px) {
    .services-5-col {
        grid-template-columns: repeat(3, 1fr);
        /* 3 cols on medium screens */
    }
}

@media (max-width: 992px) {
    .services-5-col {
        grid-template-columns: repeat(2, 1fr);
        /* 2 cols on tablets */
    }
}

@media (max-width: 600px) {
    .services-5-col {
        grid-template-columns: 1fr;
        /* 1 col on mobile */
    }
}

/* Responsive specific to home */
@media (max-width: 768px) {
    .hero {
        text-align: center;
        justify-content: center;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .subtitle {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Why Us Statistics */
.why-us-stats {
    background-color: var(--accent-red);
    background-image: url('../../images/why-us.jpeg');
    /* Updated to jpeg */
    background-size: cover;
    background-position: center 70%;
    /* Shift view to lower part of image */
    background-repeat: no-repeat;
    /* Blend the image with the red background color */
    background-blend-mode: multiply;
    padding: 3rem 0;
    /* Reduced padding for shorter height */
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Add a subtle glow/vignette overlay */
.why-us-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    align-items: flex-start;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-number {
    font-family: var(--font-head);
    font-size: 5rem;
    font-weight: 400;
    /* Lighter weight like reference image */
    line-height: 1;
    margin-bottom: 1rem;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.stat-desc {
    font-size: 0.9rem;
    text-transform: uppercase;
    line-height: 1.4;
    max-width: 250px;
    /* Constrain width for better wrap */
    opacity: 0.9;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* Responsive stats */
@media (max-width: 992px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

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

/* Industries Section */
.industries-section {
    padding: 2rem 0;
    /* Reduced padding for compact layout */
    background-color: #ffffff;
    /* White bg */
    position: relative;
    overflow: hidden;
}

/* Background World Map Placeholder */
.world-map-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-image: url('../../images/map.png');
    /* Use map.png */
    background-size: cover;
    /* Cover entire area */
    background-repeat: no-repeat;
    background-position: center 30%;
    opacity: 0.15;
    /* Subtler opacity */
    /* Blend edges into white background */
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent), linear-gradient(to right, transparent, black 20%, black 80%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent), linear-gradient(to right, transparent, black 20%, black 80%, transparent);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    pointer-events: none;
    z-index: 0;
}

.industries-container {
    position: relative;
    z-index: 1;
}

.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    margin-top: 3rem;
    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);
}

.marquee-track {
    display: flex;
    gap: 4rem;
    width: max-content;
    animation: scroll 40s linear infinite;
    /* Slow smooth scroll */
}

/* Pause on hover if desired -> User didn't ask but good UX */
.marquee-track:hover {
    animation-play-state: paused;
}

.industry-item {
    font-size: 1.1rem;
    color: var(--text-muted);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

/* Add an icon before each item text */
.industry-item .icon::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E5001C'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 8px;
    transform: translateY(-1px);
}

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

    100% {
        transform: translateX(-50%);
        /* Move half way (since content is duplicated) */
    }
}