/* Heder */
.headerContainer {
    background-color: var(--background-primary-dark);
    color: var(--text-over-secondary);
    z-index: 5;
}

.menu-btn .bt-line {
    background-color: var(--text-over-secondary);
}

.logoNavBar {
    filter: invert(68%) sepia(6%) saturate(437%) hue-rotate(21deg)
        brightness(91%) contrast(90%);
}

.menuComponent {
    background-color: var(--background-primary-dark);
}

.menuLinks p {
    color: var(--text-over-secondary);
}

/* ###################### Section Groovy ##########################*/
.groovy {
    background-image: url('./../../assets/page02/background-dark.jpg');
}

.rotated-text-groovy {
    color: var(--text-over-secondary) !important;
}

.groovy-text {
    color: var(--text-over-secondary);
}

.gr-Slidetext {
    color: var(--text-over-secondary) !important;
}

.gr-Scroll {
    color: var(--text-over-secondary) !important;
}

/* ###################### First Movie Section ##########################*/

#sectionOurService {
    background-color: var(--background-primary-dark)!important;
}

.textOurService {
    color: var(--text-over-secondary)!important;
}

/* ###################### First Movie Section ##########################*/
.firstMovieContainer video {
    filter: none;
}
/* ###################### Final Section ##########################*/

.finalSection {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    color: var(--background-primary);
    font-family: var(--font-secondary);
    font-size: 5.2rem;
    font-weight: 400 !important;
}

@media screen and (max-width: 1024px) {
    .groovy {
        background-image: url('./../../assets/page02/background-darkmobile.png');
    }

    .rotated-text-groovy {
        color: var(--text-over-secondary) !important;
    }

    .groovy-text {
        color: var(--text-over-secondary) !important;
    }

    .letter {
        opacity: 0;
        transform: scale(4);
        filter: blur(0);
        transition: all 0.7s ease-in-out;
    }

    .gr-Slidetext {
        color: var(--text-over-secondary) !important;
    }
    .finalSection {
        font-size: 4.2rem;
        gap: 3rem;
    }
}

@media screen and (max-width: 767px) {
    .groovy {
        background-image: url('./../../assets/page02/background-darkmobile767.png');
        background-size: 100% 100%;
    }
    .finalSection {
        font-size: 2.2rem;
        gap: 3rem;
        padding: 2rem;
    }
}