/*----------------------------------------*/
/*   Header */
/*----------------------------------------*/

.rts-header-area {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    width: 100%;

    &.v1 {
        .rts-top-header {
            &::before {
                @include before;
                background: var(--linear-bg-color);
                opacity: 0.3;
                border-bottom: 1px solid #ffffff;
                backdrop-filter: blur(3px);
                z-index: -1;
            }
        }
    }

    &.v4,
    &.v7 {
        display: none;

        @include mq(max-lg) {
            display: block;
        }
    }

    &.v8 {
        position: fixed;

        &::before {
            @include before;
            background: var(--linear-bg-color);
            opacity: 0.3;
            backdrop-filter: blur(3px);
            border-bottom: 1px solid #ffffff;
            z-index: -1;
        }

        @include flex-between;
        align-items: center;
        padding: 30px 100px;

        @include mq(max-xl) {
            padding: 30px 60px;
        }

        @include mq(max-sm) {
            padding: 30px;
        }

        .menu-toggle {
            width: 40px;
            height: 20px;
            display: flex;
            flex-direction: column;
            gap: 7px;
            background: transparent;
            cursor: pointer;

            span {
                border-bottom: 2px solid var(--color-white);
                @include rts-transition;

                &:nth-child(2) {
                    width: 70%;
                    margin-left: auto;
                }
            }

            &:hover {
                span {
                    &:nth-child(2) {
                        width: 100%;
                    }
                }
            }
        }
    }

    .rts-top-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 9px 41px;
        position: relative;

        &::before {
            @include before;
            background: var(--linear-bg-color);
            opacity: 0.2;
            backdrop-filter: blur(3px);
            border-bottom: 1px solid #ffffff;
            z-index: -1;
        }

        @include mq(max-xl) {
            padding: 30px 60px;
        }
        @include mq(max-lg){
            padding: 20px 60px;
        }

        @include mq(max-sm) {
            padding: 20px;
        }

        .icon-info {
            @include flex-center;
            justify-content: start;
            gap: 33px;
            flex-basis: 33%;
            @include mq(max-xxl){
                flex-basis: 34%;
            }
            .rts-social {
                @include flex;
                gap: 10px;

                a {
                    @include flex;
                    width: 34px;
                    height: 34px;
                    border-radius: 50%;
                    background: #917E68;
                    color: var(--color-white);
                }
            }

            .rts-tel {
                color: var(--color-white);

                i {
                    margin-right: 9px;
                }
            }
        }

        .logo {
            flex-basis: 78%;
            text-align: center;
            @include mq(max-sm){
                flex-basis: 40%;
            }
        }

        .right {
            flex-basis: 33%;
            @include flex-center;
            justify-content: end;
            gap: 37px;

            .menu-toggle {
                width: 30px;
                height: 20px;
                display: flex;
                flex-direction: column;
                gap: 7px;
                cursor: pointer;

                span {
                    border-bottom: 2px solid var(--color-white);
                    @include rts-transition;

                    &:nth-child(2) {
                        width: 70%;
                        margin-left: auto;
                    }
                }

                &:hover {
                    span {
                        &:nth-child(2) {
                            width: 100%;
                        }
                    }
                }
            }
        }

        .rts-btn {
            padding: 13px 32px;
            color: var(--color-white);
            font-weight: 500;
        }
    }

    .rts-main-header {
        @include flex;
        padding: 0 100px;
        border-bottom: 1px solid #898685;
    }
}

// header sticky

.header--sticky.sticky {
    position: fixed !important;
    top: 0;
    width: 100%;
    animation: stickyanimations 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    box-shadow: 0px 7px 18px #1810100d;
    z-index: 999;
    border: none !important;
    backdrop-filter: blur(2px);
    background: linear-gradient(90deg, #827061 0%, #987A60 36.06%, #655445 67.01%, #68594C 100%);

    @include mq(max-xl) {
        height: 80px;
    }

    .rts-top-header {
        &::before {
            display: none;
        }

        @include mq(max-xl) {
            padding: 19px 60px;
        }

        @include mq(max-sm) {
            padding: 20px;
        }
    }

    .rts-main-header {
        display: none;
    }

    &.v8 {
        &::before {
            border-color: transparent;
        }
    }

    .main-nav-area ul.rts-desktop-menu .menu-item .rts-dropdown-main-element {
        padding: 43px 0;
    }
}

@keyframes stickyanimations {
    0% {
        transform: translateY(-100px);
    }

    100% {
        transform: translateY(0px);
    }
}



.header--sticky.sticky {
    position: fixed !important;
    top: 0;
    width: 100%;
    -webkit-animation: stickyanimations 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: stickyanimations 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    box-shadow: 0px 7px 18px rgba(24, 16, 16, 0.0509803922);
    z-index: 999;
    border: none !important;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background: -webkit-linear-gradient(left, #827061 0%, #987A60 36.06%, #655445 67.01%, #68594C 100%);
    background: linear-gradient(90deg, #827061 0%, #987A60 36.06%, #655445 67.01%, #68594C 100%);
}