/*-- Header & Footer --*/

.header-container {
    padding: 10px;
}

        /*-- Burger Menu --*/

.open-menu, .close-menu {
    display: none;
    justify-content: center;
    align-items: center;
    border: none;
    background-color: transparent;
    transform-origin: center;
}

.open-menu.active, .close-menu.active {
    display: flex;
    transition: 0.2s;
}

.open-menu.active {
    animation: rotate-left 0.5s;
}

.close-menu.active {
    animation: rotate-right 0.5s;
}

@keyframes rotate-right {
    from {
        transform: rotate(45deg);
    }

    to {
        transform: rotate(90deg);
    }
}

@keyframes rotate-left {

    from {
        transform: rotate(45deg);
    }
    to {
        transform: rotate(0deg);
    }
    
}

    /*-- End Burger Menu --*/

    /*-- Navigation Menu --*/

.menu-navigation {
    position: fixed;
    transform: translateX(100%);
    top: 0px;
    right: 0px;
    width: 80vw;
    height: 100vh;
    z-index: -1;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
    background-color: var(--midnight-green);
    box-shadow: -4px 0px 10px var(--rich-black);       
    opacity: 0;
    pointer-events: none;
    transition: 0.5s ease;
    will-change: transform, opacity;
}

.menu-navigation.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.menu-navigation > * {
    position: relative;
    width: 100%;
    text-align: center;
}

.menu-navigation > *:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 1px;
    background-color: #ccc;
}

.lk-nav{
    font-size: 1.2rem;
}

body.active {
    overflow: hidden;
}

body.active::after {
    content: '';
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    z-index: 2;
    background-color: var(--rich-black);
    opacity: 0.8;
}

    /*-- End Navigation Menu --*/

/*-- Hero --*/

.hero-container {
    min-height: auto;
    height: auto;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    gap: 36px;
    padding: 120px 20px;
    border-radius: 0;
}

.content-hero {
    max-width: 508px;
    min-width: 0px;
    height: 100%;
}

.pic-hero {
    max-width: 372px;
}

    /*-- Typography Hero --*/

h1 {
    text-align: center;
}

.content-hero h2 {
    font-size: 1.5rem;
}

.content-hero p {
    font-size: 1.2rem;
    margin: 8px 0 32px 0;
}

    /*-- Button Hero --*/

.link-hero-container {
    max-width: 508px;
    margin: 0 auto;
}

/*-- Medias Queries --*/

@media (max-width: 320px) {
    /*-- Header --*/

    .menu-navigation {
        width: 100dvw;
    }

    /*-- Hero --*/
    .hero-container {
        padding: 80px 20px;
    }

    .content-hero h2 {
        font-size: 1.2rem;
    }

    .content-hero p {
        font-size: 0.9rem;
    }

}

@media (max-width: 300px) {
    .hero-container {
        padding: 40px 20px 80px 20px;
    }  
}