@use '../../utils' as *;
/*----------------------------------------*/
/*  3.1 Header Style 1
/*----------------------------------------*/
.oit-header-transparent{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
}

.oit-header{
    &-bar{
        height: 56px;
        width: 56px;
        line-height: 56px;
        border-radius: 10px;
        background-color: var(--oit-clr-green);
        @media #{$xl,$lg,$md,$xs}{
            height: 44px;
            width: 44px;
        }
        & span{
            height: 2px;
            width: 28px;
            display: block;
            margin: 5px auto;
            transition: all .3s ease-in-out;
            background-color: var(--oit-clr-black);
            &:first-child{
                transform-origin: right center;
                transform: scaleX(0.5);
            }
            &:last-child{
                transform-origin: left center;
                transform: scaleX(0.5);
            }
        }
        &:hover{
            & span{
                &:first-child{
                    transform: scaleX(1);
                }
                &:last-child{
                    transform: scaleX(1);
                }
            }
        }
    }
    &-menu{
        & nav{
            & > ul{
                & > li {
                    display: inline-block;
                    padding: 25px 20px;
                    @media #{$xl}{
                        padding: 25px 15px;
                    } 
                    & > a{
                        font-size: 18px;
                        display: inline-block;
                        color: var(--oit-clr-white);
                        border-radius: 4px;
                        line-height: 1;
                        transition: .3s;
                    }
                    &:hover {
                        & > a {
                            color: var(--oit-clr-white);
                        }
                    }
                }
            }
        }
    }
    &-bdr{
        padding: 0 20px;
        border-bottom: 1px solid rgba($color: #fff, $alpha: 0.1);   
        @media #{$lg,$md,$xs}{
            padding: 0;
        }     
    }
    &-wrap {
        padding: 0 20px;
        @media #{$xs}{
            padding: 0 10px;
        }
    }
    &-logo{
        @media #{$lg,$md,$xs}{
            padding: 15px 0;
        }
    }

}

.bi-header-style {
    border-radius: 300px;
    background: linear-gradient(209deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
    & .oit-header-logo {
        padding-inline-start: 10px;
    }
    & .oit-header-menu{
        & nav{
            & > ul{
                & > li {
                    display: inline-block;
                    padding: 24px 20px;               
                }
            }
        }
    }
    & .oit-header-bar {
        border-radius: 50%;
        background-color: var(--oit-clr-yellow);
    }
}

.bm-header-style {
    padding: 26px 0;
    border-bottom: 1px solid rgba($color: #fff, $alpha: 0.1); 
    @media #{$lg,$md,$xs}{
        padding: 0;        
    }
    & .oit-header-bar {
        height: auto;
        width: auto;
        background-color: transparent;
        & span {
            width: 34px;
            border-radius: 10px;
            background-color: var(--oit-clr-white);
        }
    }
}

.ic-header {
    &-style {
        border-bottom: 1px solid #E2E8F0;
        & .oit-header-logo {
            padding-inline-start: 20px;
            @media #{$lg,$md,$xs}{
                padding-inline-start: 0;
            }
        }
        & .oit-header-action {        
            padding-inline-end: 20px;
            @media #{$lg,$md,$xs}{
                padding: 0;
            }
        }
        & .oit-header-bar {        
            background-color: var(--oit-clr-teal-2);
            & span {
                background-color: var(--oit-clr-white);
            }
        }
        & .oit-header-menu{
            margin-inline-start: 15px;
            & nav{
                & > ul{
                    & > li {
                        & > a {
                            color: var(--oit-clr-black);
                        }
                        &.has-dropdown {
                            & a {
                                &::after {
                                    color: var(--oit-clr-black);
                                }
                            }
                        }
                        &:hover {
                            & > a {
                                color: var(--oit-clr-black);
                            }
                        }
                    }
                }
            }
        }
    }
    &-wrap {
        padding: 0 20px;
         @media #{$xs}{
            padding: 0;
        }
    }
}

.bs-header-style {
    border-radius: 10px;
    background: linear-gradient(209deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
    & .oit-header-bar {   
        border-radius: 10px;     
        background-color: var(--oit-clr-white);
        & span {
            background-color: var(--oit-clr-black);
        }
    }
}

.fc-header-style {
    & .oit-header-bar {   
        border-radius: 10px;     
        background-color: var(--oit-clr-green-neon);
        & span {
            background-color: var(--oit-clr-black);
        }
    }
}

.mc-header-style {
    & .oit-header-bar {   
        border-radius: 10px;     
        background-color: var(--oit-clr-green-soft);
        & span {
            background-color: var(--oit-clr-black);
        }
    }
}

.ins-header-style {
    & .oit-header-menu{
        & nav{
            & > ul{
                & > li {
                    & > a {
                        color: var(--oit-clr-forest-rich);
                    }
                    &.has-dropdown {
                        & a {
                            &::after {
                                color: var(--oit-clr-forest-rich);
                            }
                        }
                    }
                }
            }
        }
    }
    & .oit-header-bar {      
        background-color: var(--oit-clr-forest-rich);
        & span {
            background-color: var(--oit-clr-white);
        }
    }
}

.ins-header-top {
    &-bar {
        &-area {
            padding: 5px 0;
        }
        &-info {
            & ul {
                & li {
                    list-style-type: none;
                    display: inline-block;
                    &:not(:last-child){
                        &::after{
                            display: inline-block;
                            content: '';
                            height: 17px;
                            width: 1px;
                            margin-inline-end: 35px;
                            margin-inline-start: 30px;
                            background-color: rgba(255, 255, 255, 0.2);
                            @media #{$xl,$lg,$md,$xs}{
                                display: none;
                            }
                        }
                    }
                    &:first-child {
                        &::after{
                            @media #{$xl}{
                                display: inline-block;
                            }
                        }
                    }
                }
            }
            & a,
            & span {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                font-weight: 500;
                font-size: 14px;
                color: rgba(255, 255, 255, 0.8);
                & svg {
                    color: var(--oit-clr-white);
                }
            }
        }
        &-social {
            & span {
                font-weight: 500;
                font-size: 14px;
                line-height: 1.7;
                color: rgba(255, 255, 255, 0.8);
            }
            & a {
                color: rgba(255, 255, 255, 0.8);
                & svg {
                    height: 18px;
                }
                &:hover {
                    color: var(--oit-clr-white);
                }
            }
        }
        
    }
}