/* Services Page Styles - Fullscreen Video Scroll */

/* Container for Snap Scrolling */
.services-container {
    height: 100vh;
    width: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    /* Hide scrollbar for cleaner look */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.services-container::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

/* Individual Fullscreen Section */
.service-slide {
    position: relative;
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-decoration: none;
    /* For the anchor wrapper */
}

/* Video Background */
.service-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Dark Overlay for Readability */
.service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    /* Darken video */
    z-index: 1;
    transition: background 0.3s ease;
}

.service-slide:hover .service-overlay {
    background: rgba(0, 0, 0, 0.2);
    /* Lighten on hover */
}

/* Content Container */
.service-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #FFFFFF;
    padding: 2rem;
    max-width: 800px;
}

/* Typography (JvM Style) */
.service-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 1rem;
    letter-spacing: 0.1em;
}

.service-title {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.9;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.service-desc {
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 500;
    opacity: 0.9;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Explore Indicator */
.service-explore {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.5rem;
    transition: all 0.3s ease;
}

.service-slide:hover .service-explore {
    gap: 1rem;
    color: var(--accent-color);
}

/* Footer Specific Fix */
/* Since footer is standard, it might break snap scroll flow. 
   Option: Putting footer as the last snap item or keeping it separate.
   For JvM infinity feel, maybe no footer or minimal footer snap.
   Let's check if user wants footer. Standard pages usually have one.
   We will make the footer a snap-align-start section but auto height.
*/
/* Enforce White Text for Contrast */
.service-content h2,
.service-content p,
.service-content span,
.service-content .service-explore {
    color: #FFFFFF !important;
}

/* Footer alignment in scroll flow */
.services-footer {
    scroll-snap-align: start;
    height: auto;
    min-height: auto;
}

/* DESKTOP: Bottom Left Alignment */
@media (min-width: 1024px) {
    .service-slide {
        align-items: flex-end;
        /* Bottom */
        justify-content: flex-start;
        /* Left */
        padding-bottom: 8rem;
        /* Space from bottom */
        padding-left: 3%;
        /* Closer to left edge */
    }

    .service-content {
        text-align: left;
        margin: 0;
        max-width: 700px;
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
        /* Stronger shadow */
    }

    .service-desc {
        margin-left: 0;
        margin-right: 0;
        font-size: 1.5rem;
        /* Larger on desktop */
    }

    .service-title {
        font-size: 6rem;
        /* Massive on desktop */
    }
}