@use '../../utils' as *;

/*----------------------------------------*/
/*  6.1 Footer Style 1
/*----------------------------------------*/

.bi-footer {
    &-area {
        @media #{$xl,$lg,$md,$xs}{
            padding-top: 90px;           
        }
    }
    &-widget {
        height: 100%;
        padding: 45px 40px;
        border-radius: 20px;
        background: rgba($color: #fff, $alpha: 0.1);
        border: 1px solid rgba($color: #fff, $alpha: 0.1);
        backdrop-filter: blur(40px);
        background: linear-gradient(209deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
        @media #{$xl,$lg,$md,$xs}{
            padding: 35px 20px;        
        }
        & p {
            font-weight: 500;
            font-size: 16px;
            line-height: 1.63;
            letter-spacing: -0.02em;
            color: rgba(255, 255, 255, 0.8);
             @media #{$xl,$lg,$md,$xs}{
                font-size: 14px;      
            }
        }
        &.footer-widget-1-1 {
            margin-inline-end: 88px;
            @media #{$xl}{
                margin-inline-end: 35px;  
            }
            @media #{$lg,$md,$xs}{
                margin-inline-end: 0;  
            }
        }
        &.footer-widget-1-3 {
            padding: 31px 40px;
             @media #{$xl,$lg,$md,$xs}{
                padding: 35px 20px;        
            }
        }
    }
    &-widget-menu {
        transform: translateX(-45px);
        margin: 0 4px;
        @media #{$xl}{
            transform: translateX(-15px);
        }
        @media #{$lg,$md,$xs}{
            transform: translateX(0);
        }
        & ul {
            display: flex;
            flex-wrap: wrap;
            gap: 10px; 
            @media #{$xs}{
                flex-wrap: wrap;      
            }
        
            & li {
                list-style: none;
                display: block;
                padding: 16px 27px;
                border-radius: 10px;
                width: calc(50% - 5px); 
                background: rgba($color: #fff, $alpha: 0.1);
                border: 1px solid rgba($color: #fff, $alpha: 0.1);
                @media #{$xl,$lg,$md}{
                   padding: 12px 19px;   
                }
                @media #{$xs}{
                   padding: 12px 19px;   
                   width: 100%;
                }
                @media #{$sm}{
                   width: calc(50% - 5px); 
                }
                & a {
                    font-size: 16px;
                    height: 100%;
                    color: var(--oit-clr-white);
                    @media #{$xl,$lg,$md,$xs}{
                        font-size: 14px;
                    }
                }
                &:hover{
                    & .border-line {
                        background-size: 0% 2px, 100% 2px;
                    }
                }
            }
        }
    }
    &-social {
        display: flex;
        gap: 7px;
        & a {
            border-radius: 10px;
            width: 50px;
            height: 50px;
            display: inline-block;
            line-height: 45px;
            text-align: center;
            color: var(--oit-clr-white);
            background: rgba($color: #fff, $alpha: 0.1);
            border: 1px solid rgba($color: #fff, $alpha: 0.1);
             @media #{$xl,$lg,$md,$xs}{
                @include oit-circle(40px);  
                border-radius: 10px;   
            }
            & svg {
                height: 23px;
                  @media #{$xl,$lg,$md,$xs}{
                    height: 16px;
                }
            }
            &:hover{
                color: var(--oit-clr-black);
                border-color: var(--oit-clr-white);
                background-color: var(--oit-clr-white);
            }
        }
    }
    &-newsletter{
        & .common-title {
            @media #{$xl,$lg,$md,$xs}{
                font-size: 20px;
                & br {
                    display: none;
                }      
            }
        }
        & span {
            font-weight: 500;
            line-height: 1.63;
            letter-spacing: -0.02em;
            color: var(--oit-clr-white);
             @media #{$xs}{
                font-size: 14px;
                & br {
                    display: none;
                }       
            }
        }
        &-input {
            & input {
                padding: 0 25px;
                padding-inline-end: 75px;
                height: 60px;
                line-height: 60px;
                font-size: 14px;
                border-radius: 10px;
                color: var(--oit-clr-white);
                background-color: transparent;
                border: 1px solid rgba(255, 255, 255, 0.1);
                 @media #{$xl,$lg,$md,$xs}{
                    height: 50px;
                    line-height: 50px;   
                }
            &::placeholder {
                font-size: 14px;
                color: var(--oit-clr-white);
            }
            &:focus{
                border-color: var(--oit-clr-yellow);
            }
            }
            & .submit-btn {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                inset-inline-end: 5px;
                border-radius: 10px;
                height: calc(100% - 10px);
                width: 55px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--oit-clr-black);
                background-color: var(--oit-clr-yellow);
            }
        }
    }
}

.bc-footer {
    &-area {
         @media #{$xl,$lg,$md,$xs} {
           padding-top: 90px;
        }
    }
    &-widget {
        padding: 35px 40px;
        border-radius: 20px;
        border: 1px solid rgba($color: #383F3E, $alpha: 0.1);
        &-title {
            font-size: 20px;
            color: var(--oit-clr-black);
            &.mb-65 {
                 @media #{$xl}{
                    margin-bottom: 25px;
                }
                 @media #{$lg,$md,$xs}{
                    margin-bottom: 45px;
                }
            }
        }
        &-menu {
            & ul {
                & li {
                    list-style-type: none;
                    &:not(:last-child){
                        margin-bottom: 12px;
                    }
                    & a {
                        font-weight: 500;
                        font-size: 16px;
                        letter-spacing: -0.02em;
                        &:hover {
                            color: var(--oit-clr-black);
                        }
                    }
                }
            }
        }
        &-social {
            & a {
                padding: 50px 15px;
                display: inline-block;
                border-radius: 20px;
                text-align: center;
                width: 100%;
                margin-bottom: 25px;
                color: var(--oit-clr-black);
                border: 1px solid rgba($color: #383F3E, $alpha: 0.1);
                @media #{$xl}{
                    padding: 44px 15px;
                }
                @media #{$lg}{
                    padding: 30px 15px;
                }
                @media #{$md}{
                    padding: 48px 15px;
                }
                @media #{$xs}{
                    padding: 30px 15px;
                }
                & svg {
                    height: 36px;
                    @media #{$xl,$lg}{
                        height: 20px;
                    }
                    @media #{$md}{
                        height: 30px;
                    }
                    @media #{$xs}{
                        height: 20px;
                    }
                }
                &:hover {
                    background-color: var(--oit-clr-green);
                    border-color: var(--oit-clr-green);
                    color: var(--oit-clr-white);
                }
            }
        }
    }
}

.ic-footer {
    &-area {
        @media #{$lg,$md,$xs}{
            padding-top: 90px;
        } 
    }
    &-widget {
        & .bc-footer-widget-title{
            font-size: 30px;
            color: var(--oit-clr-white);
            @media #{$xl}{
                font-size: 24px;
            } 
            @media #{$lg,$md,$xs}{
                font-size: 20px;
            } 
        }
        &-text {
            & p {
                color: rgba(255, 255, 255, 0.7);
            }
        }
        & .bc-footer-widget-menu {
            & ul {
                & li {
                    & a {
                        font-size: 20px;
                        color: rgba(255, 255, 255, 0.7);
                        @media #{$xl,$lg,$md,$xs}{
                            font-size: 16px;
                        }
                    }
                    &:not(:last-child) {
                        margin-bottom: 14px;
                    }
                }
            }
        }
        &.footer-widget-1-2 {
            margin-inline-start: 145px;
            @media #{$xl}{
                margin-inline-start: 105px;
            }
            @media #{$lg}{
                margin-inline-start: 80px;
            }
            @media #{$md}{
                margin-inline-start: 40px;
            }
            @media #{$xs}{
                margin-inline-start: 0;
            }
        }
        &.footer-widget-1-3 {
            margin-inline-start: 35px;            
            @media #{$md,$xs}{
                margin-inline-start: 0;
            }
        }
        &.footer-widget-1-4 {
            margin-inline-start: 5px;
            @media #{$lg}{
                margin-inline-start: 0;
            }
            @media #{$md}{
                margin-inline-start: 40px;
            }
            @media #{$xs}{
                margin-inline-start: 0;
            }
        }
        & .bc-price-contact-info a {
            @media #{$lg,$md,$xs}{
                padding-inline-start: 30px;
                & br {
                    display: none;
                }
            } 
            & svg {
                @media #{$lg,$md,$xs}{
                    height: 15px;
                    top: 5px;
                } 

            }
        }

    }
    &-top {
        &-wrap {
            @media #{$xs}{
                margin-bottom: 60px;
            } 
        }
        &-content {
            @media #{$xs}{
                margin-bottom: 40px;
            } 
            & p {
                font-size: 30px;
                line-height: 1.3;
                font-weight: 600;
                @media #{$xl,$lg,$md,$xs}{
                    font-size: 20px;
                } 
            }
        }
    }
}

.fc-footer{
    &-style {
        & .bi-footer-newsletter-input  {
            & .submit-btn {
                background-color: var(--oit-clr-white);
            }
            & input {
                &:focus {
                    border-color: var(--oit-clr-green-soft);
                }
            }
        }
        &.bs-footer-style .bi-copyright-policy a:not(:last-child)::after {
            background-color: var(--oit-clr-green-neon);
        }
    }
    &-social {
        display: flex;
        gap: 40px;
        @media #{$xl,$lg,$md}{
            gap: 25px;
        } 
        @media #{$xs}{
            gap: 25px;
            margin-top: 80px;
        } 
        & a {
            color: var(--oit-clr-white);
            & svg {
                width: 28px;
                height: 28px;
                @media #{$xl,$lg,$md,$xs}{
                    height: 20px;
                    width: 20px;
                } 
            }
            &:hover {
                color: var(--oit-clr-green-neon);
            }
        }
    }
}

.mc-footer{
    &-style {
        & .bi-footer-newsletter-input .submit-btn {
            background-color: var(--oit-clr-green-soft);
        }
        & .footer-widget-1-2 {
            margin-inline-start: -40px;
            @media #{$md}{
                margin-inline-start: 10px;
            }
            @media #{$xs}{
                margin-inline-start: 0;
            }
        }
        & .footer-widget-1-3 {
            margin-inline-start: -10px;
            @media #{$md}{
                margin-inline-start: 40px;
            }
            @media #{$xs}{
                margin-inline-start: 0;
            }
        }
        & .footer-widget-1-4 {
            @media #{$md,$xs}{
                margin-inline-start: 0;
            }
        }
    }
}

.ins-footer-style {
    & .bc-footer-widget-title {
        color: var(--oit-clr-white);
    }
    & .bc-footer-widget {
        backdrop-filter: blur(20px);
        background: linear-gradient(209deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%);
    }
    & .bc-footer-widget-menu ul li a {
        color: rgba(255, 255, 255, 0.5);
        &:hover {
            color: var(--oit-clr-white);
        }
    }
    & .bc-footer-widget-social a {
        color: var(--oit-clr-white);
        border: none;
        transition: .3s;
        backdrop-filter: blur(20px);
        background: linear-gradient(209deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%);
        @media #{$xl}{
            padding: 46px 15px;
        }
        &:hover{
            color: var(--oit-clr-black);
            background-color: var(--oit-clr-white);
        }
    }
}

.footer-inner-style {
    & .bi-copyright-wrap {
       backdrop-filter: blur(20px);
       background: linear-gradient(209deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
    }
}


// copyright css start

.bi-copyright {
    &-wrap {
        padding: 25px 30px;
        border-radius: 20px;
        background: rgba($color: #fff, $alpha: 0.01);
        border: 1px solid rgba($color: #fff, $alpha: 0.1);
        @media #{$xl,$lg,$md,$xs}{
            border-radius: 10px;
            padding: 18px 30px;
        }
        @media #{$xs}{
            border-radius: 10px;
            padding: 18px 15px;
        }
        & p,a {
            font-size: 16px;
            font-weight: 500;
            line-height: 1.75;
            color: var(--oit-clr-white);
            @media #{$xs}{
                font-size: 14px;
                line-height: 1.2;
            }
            & span{
                font-weight: 700;
                color: var(--oit-clr-yellow);
            }
        }

    }
    &-policy {
        & a {
            @media #{$xs}{
                font-size: 14px;
                margin-top: 15px;
                display: inline-block;
            }
            &:not(:last-child){
                &::after {
                    display: inline-block;
                    content: '';
                    height: 8px;
                    width: 8px;
                    border-radius: 50%;
                    margin-inline-start: 20px;
                    margin-inline-end: 15px;
                    background-color: var(--oit-clr-white);
                }
            }
        }
    }
}

.bi-copyright-area {
    &.inner-style {
        & .bi-copyright-wrap {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
    }
}
.bm-copyright-style {
    padding: 29px 0;
    & .bi-copyright-text {
        & p {
            @media #{$xxl,$xl,$lg,$md}{
                font-size: 16px;
            }
            @media #{$xs}{
                font-size: 14px;
            }
        }
    }
}