/*===================== STYLE GLOBAL OF WEBSITE ===========================*/
:root{
    --color-white : #ffffff ;    
    --color-black : #000000 ;  
    --color-primary : #272417;  
    --color-secundary : #AB9E57;  
    --color-one-primary : #4D4827 ;
}

body, html {
    scroll-behavior: smooth;
    background: #f7f8fb;
}

/*===================== HEADER OF WEBSITE ===========================*/

header.mobile {
    display: none;
}
header.web {
    display: flex;
}
header {
    height: 8.07291666vw;
    background: var(--color-primary);
    display: flex;
    justify-content: space-between;
    gap: 5.9895vw;
    align-items: center;
    padding: 0 9.791666vw;
    transition: all .5s ease-in-out;
}

header .content-items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5.9895vw;
}
header .content-items li {
    list-style: none;
    color: var(--color-white);
    font-size: 1.0416vw;
    text-transform: uppercase;
    text-wrap: nowrap;
    transition: all .5s ease-in-out;
}
header .content-items li.active,
header .content-items li a.active {
    color: var(--accent-color-1);
}
header .content-items li:hover {
    color: var(--accent-color-1);
    transition: all .5s ease-in-out;
}
header .logo img {
    width: 10.3125vw;
    height: auto;
}
header .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.9895vw;
}
header .logo .line-vert {
    height: 2.70833vw;
    width: 0.05208vw;
    background: var(--color-secundary);
}

/*===================== FOOTER OF WEBSITE ===========================*/

footer {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    height: 2.44791vw;
    z-index: 4;
}


/*===================== RESPONSIVE OF HEADER__WEBSITE ===========================*/

@media (max-width:768px) {

    header.web {
        display: none;
    }
    header.mobile {
        display: flex;
    }
    
    header.mobile {
        height: 16.072917vw;
        display: flex;
        flex-direction: column;
        align-items: end;
        gap: 0;
    }
    header.mobile .content-ul{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: -webkit-fill-available;
        width: 100%;
    }

    header .logo img {
        width: 20.3125vw;
        height: auto;
    }

    header.mobile .toggle-bars {
        display: none;
        color: var(--color-white);
        font-size: 5vw;
    }
    header.mobile .toggle-bars.active{
        display: block;
    }

    header.mobile .list-items {
        display: none;
        flex-direction: column;
        gap: 1vw;
        justify-content: center;
        align-items: flex-start;

        animation: closeMenu .5s linear;
        transition: all .5s ease-in-out;
        transition: transform .5s ease-in-out;
    }
    header.mobile .list-items.active {
        display: flex;
        color: white;
        box-shadow: 0px 2px 16px #272417;
        position: relative;
        top: 0vw;
        right: 0;
        border-radius: 5px;
        padding: 0vw 3vw;
        background: #ab9e57;
        width: auto;

        animation: openMenu .5s linear;
        transition: all .5s ease-in-out;
        transition: transform .5s ease-in-out;
    }
    @keyframes openMenu {
        0% {
            opacity: 0;
            transform: translateX(50%);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }
    @keyframes closeMenu {
        100% {
            opacity: 1;
            transform: translateX(-50%);
        }
        0% {
            opacity: 0;
            transform: translateX(0%);
        }
    }
    header.mobile .list-items li {
        list-style: none;
        margin: 3vw 0vw;
        color: var(--color-white);
        font-size: 3vw;
        text-transform: uppercase;
        text-wrap: nowrap;
    }

    footer {
        height: 10.44791vw;
    }

}