.site-header-video {
    /* background-image removed from here */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 120vh;
    position: relative;
    background-color: #222;

    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.4);
        right: 0;
        bottom: 0;
        transition: 0.3s all ease-in-out;
        z-index: 0;
    }

    &.header-scrolled {
        &:before {
            background-color: rgba(0, 0, 0, 0.6);
        }

    }
}


.site-header-video-content,
.content-after-scroll {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

/* Initial State */
.site-header-video-content{
    opacity: 1;
    visibility: visible;
}

/* Initial State */
.content-after-scroll {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    z-index: 99;
    top: 60%;
    color: #fff;
    transform: translatey(-50%);
    width: 100%;
    transition: opacity 0.5s ease-in-out, visibility 0s linear 0.5s;
}

.content-after-scroll .trip-card__wrapper{
    flex-wrap: nowrap;
}
.content-after-scroll .section-title{
    color: #fff;
}

/* Active State (after scroll) */
.header-scrolled .site-header-video-content{
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}


/* Visible State */
.header-scrolled .content-after-scroll {
    opacity: 1;
    visibility: visible;

    transition: opacity 0.5s ease;
}


/* Ensure the parent container can hold the overlay */
.desktop-navigation.active {
    overflow: hidden; /* Prevents overlay overflow */
}

/* Background image layer */
.desktop-navigation.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("../img/navbar-overlay.png") no-repeat center center;
    background-size: cover;
    opacity: 0.1;
    z-index: -1; /* Places it behind navbar content */
}

/* Ensure navbar content stays above overlay */
.desktop-navigation > * {
    position: relative;
    z-index: 2;
}

@keyframes shine {
    0% {
        left: -100%;
    }
    100% {
        left: 150%; /* End far enough to the right to clear the container */
    }
}

.about-page {
    position: relative;

}

.about-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../../assets/img/mountain-line2.png");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.08;
    z-index: -1;
}

@media screen and (max-width: 767px) {

    .site-header-video {
        height: 850px;
    }
    .content-after-scroll .section-tagline{
        text-align: center;
    }
    .content-after-scroll .section-title{
        text-align: center;
    }

    .site-header-video-content{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        padding: 0 15px;
    }

    .site-header-video-content .section-title{
        color: #fff;
        font-size: 32px;
    }

    .site-header-top.is-sticky{
        padding: 2px 20px;
    }

    .mobile-toggle span{
        background: #fff;
    }


    .site-header-top.is-sticky .mobile-toggle span{
        background: #292929;
    }

}