/*===================== STYLE GLOBAL OF WEBSITE ===========================*/
:root{
    --color-backgr-transparent : #d4dbdc70;
}

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

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

header {
    height: 8vh;
    margin-top: 2vh;
    transition: all .5s ease-in-out;
    display: flex;
    justify-content: center;
}
header.active {
    /* padding-left: calc( var(--content-margin) ); */
}
header .content-header {
    /* padding-left: calc( var(--content-margin) + 3vw );
    padding-right: calc( var(--content-margin) + 3vw ); */
    margin: 0 auto;
    width: calc(100vw - (var(--content-margin) + 14vw) );
    transition: all .5s ease-in-out;
    background: transparent;
}
header .content-header .list-link .link-direct {
    font-size: 1.1vw;
    transition: all .5s ease-in-out;
}
header.active .content-header .list-link .link-direct {
    font-size: 1vw;
    transition: all .5s ease-in-out;
}
header.active .content-header {
    background: var(--success-color);
    transition: all .5s ease-in-out;
    width: calc(100vw - (var(--content-margin) + 5.432vw) );
    padding: 1vw 3vw;
    border-radius: 3vw;
    color: white;
    padding-top: 2vw;
    padding-bottom: 2vw;
}

header .img-logo {
    width: 10vw;
    height: 3vw;
    transition: all .5s ease-in-out;
}
header.active .img-logo img {
    height: 2.5vw;
    width: 10vw;
    filter: contrast(0%) brightness(200%);
    transition: all .5s ease-in-out;
}

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

footer .banner-image {
    width: 100%;
    height: 100%;
}
footer .banner-image::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(176deg, #494240a6 0%, #f97047d7 100%); */
    background: linear-gradient(176deg, #494240a6 0%, #21c28fcf 100%);
    transition: all .5s ease-in-out;
}
footer .logo {
    width: 19vw;
    height: 7vw;
}

footer .content-top,
footer .content-bottom {
    z-index: 3;
}
footer .top-between .list {
    gap: 1vw;
    display: grid;
    grid-template-columns: repeat(2, 3fr);
}

footer .line-style {
    width: calc(100% - (2*var(--content-margin)) );
    margin: 0 auto;
}

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

@media (max-width:768px) {

   

}