:root {
    --color-black: #4C4C4C;
    --color-black-second: #3A3A3A;
    --color-gray: #C0C0C0;
    --color-gray-light: #F6F8FA;
    --color-orange: #F3BA69;
    --color-blue: #13263D;

    --header-text-color: var(--color-blue);
    --header-background-color: #fff;
    --header-icon-inner-color: #fff;

    --padd: 15px;
}

body{

    &.home{
        --header-text-color: #fff;
        --header-background-color: transparent;
        --header-icon-inner-color: var(--color-blue);

        .header{
            position: absolute;
            width: 100%;
            top: 0;
            z-index: 100;
        }

    }

    &.menu-open{
        --header-text-color: #fff;
        --header-background-color: var(--color-blue);
        --header-icon-inner-color: var(--color-blue);
    }

    &:not(.home) {
        .site-main {
            padding-top: 80px;

            @media (max-width: 1024px){

                padding-top: 60px;

            }
        }
    }

}



.header {
    background: var(--header-background-color);
    padding: 20px 0 0 ;
    position: relative;
    transition: all ease .3s;


    @media (max-width: 767px) {
        padding-bottom: 20px;
    }

    .flex {
        align-items: center;
        gap: 17%;
    }

    .icon {
        width: 10px;
        height: 7px;
    }
}


.header_menu {

    --gap: 40px;

    .icon{
        width: 10px;
        height: 7px;
    }

    .menu-link{
        color: var(--header-text-color);

        i{
            margin-left: 5px;
        }
    }

    ul:not(.sub-menu){
        display: flex;
        gap: var(--gap);

        &> li {
            position: relative;

            &:not(:last-child) {
                position: relative;

                &:after {
                    --size: 5px;
                    content: "";
                    position: absolute;
                    width: var(--size);
                    height: var(--size);
                    background: var(--color-orange);
                    right: calc(calc(calc(var(--gap) / 2) + calc(var(--size) / 2)) * -1);
                    top: calc(50% - calc(var(--size) / 2));
                    border-radius: 50%;
                }
            }

        }

    }

    .sub-menu-wrapper {
        @media (min-width: 1025px) {
            --width: 255px;
            background: transparent;
            padding-top: 20px;
            position: absolute;
            width: var(--width);
            left: calc(calc(calc(var(--width) / 2) * -1) + 50%);
            top: 100%;
            max-height: 0;
            opacity: 0;
            visibility: hidden;
            z-index: -10;
            transform: translateY(-20px);
            box-shadow: 0px 8px 18px 0px rgba(0, 0, 0, 0.03);
            transition: all ease .3s
        }

        .sub-menu{
            border-radius: 10px;
            width: 100%;
            padding: 15px;
            display: flex;
            flex-direction: column;
            row-gap: 20px;

            @media (min-width: 1025px) {
                padding: 25px;
                background: #fff;

                text-align: center;
                font-size: 20px;
                font-weight: 600;
                line-height: 110%;
                letter-spacing: -0.6px;
                text-transform: uppercase;
            }

            a{
                @media (min-width: 1025px) {
                    color: var(--color-blue)
                }
            }
        }

    }


}


.header_info {
    display: flex;
    align-items: center;
    gap: 40px;

    *{
        transition: all ease .3s;
    }

    .phone{
        color: var(--header-text-color);
        display: flex;
        gap: 5px;
        font-size: 18px;
        font-weight: 500;
        line-height: 120%;
        letter-spacing: -0.18px;
        text-transform: capitalize;

        .icon{
            width: 21px;
            height: 21px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: var(--header-text-color);
            color: var(--header-icon-inner-color);
            border-radius: 100%;
        }
    }
}

.lang_block{
    position: relative;
    cursor: pointer;
    color: var(--header-text-color);


    img {
        width: 20px;
    }

    .lang_list {
        position: absolute;
        opacity: 0;
        visibility: hidden;
        z-index: -1;
    }

}


.burger-menu{

    width: 42px;
    height: 42px;
    z-index: 100;
    @media (min-width: 1025px) {
        display: none;
    }
}


.site-logo{
    min-width: 143px;
    z-index: 100;

    @media (max-width: 767px) {
        min-width: unset;
        max-width: 90px;

        svg{
            width: 100%;
            height: auto;
        }
    }
}

.site-navigation{
    flex-grow: 1;
    display: flex;
    justify-content: space-between;


    @media (max-width: 1024px) {
        position: absolute;
        max-height: 0;
        z-index: -100;
        transform: translateY(-150%);
        opacity: 0;
        visibility: hidden;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--color-blue);
        flex-direction: column;
        padding: 30px 20px;
        transition: transform ease .3s, z-index 0.7s ease, opacity 0.3s ease, max-height .3s ease, visibility .3s ease;

    }
}

.menu-button {
    position: relative;
    width: 42px;
    height: 42px;
    cursor: pointer;
    border-radius: 21px;
    transition: background-color 0.3s ease;
    background-color: var(--header-text-color);
}

.dot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--header-icon-inner-color);
    transition: all 0.5s ease;

    &:nth-child(1) {
        top: 13px;
        left: 13px;
    }

    &:nth-child(2) {
        top: 13px;
        right: 13px;
    }

    &:nth-child(3) {
        bottom: 13px;
        left: 13px;
    }

    &:nth-child(4) {
        bottom: 13px;
        right: 13px;
    }

}

.hero-slider{


    .slide-inner{
        position: relative;
        min-height: 760px;
    }

    .media{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;

        picture{
            display: block;
            height: 100%;
            position: relative;

            img{
                left: 0;
                right: 0;
                position: absolute;
                max-width: unset;
                object-fit: cover;
            }
        }

        .video{
            left: 0;
            right: 0;
            position: absolute;
            max-width: unset;
            object-fit: cover;
        }
    }

    .content-container{
        margin: 0;
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;

        .container{
            height: 100%;
        }

        .content{
            width: 100%;
            height: 100%;
        }
    }

    .buttons{
        a{
            display: inline-flex;
        }
    }

    .swiper-nav_container{
        position: absolute;
        bottom: 0;
        width: 100%;
        padding-bottom: 60px;
    }
}