/*

Type: .css
FileName: header
AuthFile: Fabian.L
Property: Naytics
TimeStamp: 04/06/25 - 23:00

*/

html{
    scroll-behavior: smooth;
}
    
a{
    transition: all .35s;
}

.fa-arrow-up-long{
    transition: all .35s;
    transform: scale3d(0.7, 0.7, 0.7) rotateZ(45deg);
}

a:hover .fa-arrow-up-long{
    transform: translateY(-2px) translateX(2px) scale3d(0.7, 0.7, 0.7) rotateZ(45deg);
}

a:hover .fa-envelope{
    animation: env .35s ease-in;
}

#bar1, #bar2, #bar3 {
    opacity: 1;
    transition: all .3s ease-out;
}

.lt_menu.open #bar1 {
    transform: rotate(45deg) translate(5px, 6px);
}

.lt_menu.open #bar2 {
    opacity: 0;
}

.lt_menu.open #bar3 {
    transform: rotate(-45deg) translate(5px, -6px);
}

@keyframes env {
    0% {
        rotate: 0deg;
    }
    25% {
        rotate: 15deg;
    }
    75% {
        rotate: -15deg;
    }
    100% {
        rotate: 0deg;
    }
}
    
.shadow-box{
    width: 100%;
    bottom: auto;
    z-index: 1000;
    box-shadow: 0 4px 19px rgba(142, 151, 158, .25);
}
    
svg{
    width: auto;
    height: 7px;
}
    
@media screen and (max-width: 1024px) {
    .navBar
    {
        display: block;
        position: fixed;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        top: 12vh;
        right: -20px;
        width: 400px;
        max-width: 75%;
        height: 10px;
        opacity: 0;
        background: #fff;
        align-items: center;
        justify-content: space-evenly;
        flex-direction: column;
        padding: 65px 30px;
        transform: translateX(100%);
        transition: all .55s ease;
    }

    .navBar.open
    {
        display: block;
        position: fixed;
        box-shadow: 0 4px 19px rgba(142, 151, 158, .25);
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        top: 12vh;
        right: -20px;
        width: 400px;
        max-width: 75%;
        height: 25vh;
        opacity: 1;
        background: #fff;
        align-items: center;
        justify-content: space-evenly;
        flex-direction: column;
        transform: translateX(0);
        padding: 65px 30px;
    }
}

#flame{
    position: absolute;
    left: 65px;
    background-image: url(../.img/.icon/flame.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
}

#account{
    position: absolute;
    left: 65px;
    background-image: url(../.img/.icon/user.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
}

#logout{
    position: absolute;
    left: 65px;
    background-image: url(../.img/.icon/logout.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
}

#fr{
    position: absolute;
    left: 65px;
    background-image: url(../.img/.icon/flag_fr.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
}

ul li ul.dropdown li{
    display: block;
    width: 100%;
    height: 100%;
}

ul li ul.dropdown li a{
    display: block;
    width: 100%;
    height: 100%;
}

ul li ul.dropdown{
    width: 245px;
    top: 45px;
    float: left;
    left: -50%;
    background-color: #fff;
    position: absolute;
    z-index: 500;
    border-radius: 8px;
    padding: 40px 50px;
    display: none;
    border-left: 4px solid #EE8873;
    filter: drop-shadow(2px 0 4px #333);
}

ul li:hover ul.dropdown{
    display: flex;
    justify-content: center;
    align-items: center;
    animation: growDown linear .25s;
}

ul li ul.dropdown2 li{
    display: block;
}

ul li ul.dropdown2{
    width: 300px;
    top: 60px;
    float: left;
    left: 0;
    background-color: #fff;
    position: absolute;
    z-index: 500;
    border-radius: 8px;
    padding: 40px 50px;
    display: none;
    border-left: 4px solid #EE8873;
    filter: drop-shadow(2px 0 4px #333);
}

ul li:hover ul.dropdown2{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    animation: growDown linear .25s;
}

ul li:hover .fa-caret-down{
    rotate: -180deg;
    transform: translateY(-1px);
}

@keyframes growDown {
    0% {
        transform: scaleY(0)
    }
    80% {
        transform: scaleY(1.1)
    }
    100% {
        transform: scaleY(1)
    }
}