@use '../utils' as *;

/*----------------------------------------*/
/*  07. brand css start
/*----------------------------------------*/
.it-brand {
    &-item {
        height: 120px;
        line-height: 120px;
        position: relative;
        @media #{$xs}{ 
            text-align: center;
        }  
    }
    &-wrap {
        padding: 30px 80px;
        border-radius: 20px;
        border: 1px solid rgba($color: #03594E, $alpha: .5);
        @media #{$md,$xs}{
            padding: 30px;
        } 
        & .row:first-child {
            [class*=col] {
                border-bottom: 1px solid rgba(3, 89, 78, 0.1);
                @media #{$xs}{ 
                    border-bottom: none;
                } 
            }
        }
        & .row {
            [class*=col]:not(:last-child) {
                & .it-brand-item {
                    &::after {
                        position: absolute;
                        top: 0;
                        right: 17%;
                        content: '';
                        height: 100%;
                        width: 1px;
                        background-color: rgba(3, 89, 78, 0.1);
                        @media #{$md,$xs}{ 
                            display: none;
                        }
                    }
                }
            }
            [class*=col]:nth-child(2) {
                & .it-brand-item {
                    transform: translateX(-10px);  
                    @media #{$md,$xs}{ 
                        transform: translateX(0); 
                    }   
                    &::after {
                        right: -17%;
                    }               
                }
            }
            [class*=col]:nth-child(3) {
                & .it-brand-item {
                    transform: translateX(60px);
                    @media #{$md,$xs}{ 
                        transform: translateX(0); 
                    }  
                    &::after {
                        right: -5%;
                    }
                }
            }
        }
    }
    &-active{
        & .slider-transtion {
            -webkit-transition-timing-function: linear;
            transition-timing-function: linear;
        }
        & .swiper-slide{
            width: auto;
        }
    }
}
.it-brand-2{
    &-shape {
        &-1 {
            position: absolute;
            top: 0;
            left: 1%;
        }
        &-2 {
            position: absolute;
            bottom: 0;
            right: 5%;
        }
        &-3 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}
.it-brand-3 {
    &-area {
        @media #{$lg,$md,$xs}{
            padding-bottom: 130px;
        }
    }
    &-item {
        position: relative;  
        & img {
            @media #{$lg,$xs}{
                height: 50px;
            }
            @media #{$sm}{
                height: 60px;
            }
        }    
    }
    &-left {
        & .it-section-title {
            @media #{$lg}{
                font-size: 31px;
                & br {
                    display: none;
                }
            }
            @media #{$md,$xs}{
                & br {
                    display: none;
                }
            }
        }
        
    }
    &-wrap {
        padding: 40px 50px;
        border-radius: 20px;
        background-color: var(--it-common-white);
        border: 1px solid rgba(61, 151, 254, 0.5);
        @media #{$lg}{
            padding: 40px 30px;
        }
        @media #{$md}{
            padding: 40px 30px;
            margin-top: 50px;
        }
        @media #{$xs}{
            padding: 30px 20px;
            margin-top: 50px;
        }
        @media #{$sm}{
            padding: 40px;
        }
        & .row {
            [class*=col]:not(:last-child){
                & .it-brand-3-item  {
                    &::after{
                        content: '';
                        position: absolute;
                        top: 0;
                        right: 10%;
                        height: 100%;
                        width: 1px;
                        background-color: rgba(108, 117, 125, 0.15);
                    }
                    &.style-2 {
                        &::after {
                            right: -16%;
                        }
                    }
                }
            }
        }
        & .row:first-child {
            [class*=col]{
                & .it-brand-3-item  {
                    padding-bottom: 30px;
                    border-bottom: 1px solid rgba(108, 117, 125, 0.15);
                }
            }
        }
        & .row:last-child {
            [class*=col]{
                & .it-brand-3-item  {
                    padding-top: 20px;
                }
            }
        }
    }
    &-shape-1 {
        position: absolute;
        bottom: 14%;
        right: 12%;
        z-index: -1;
        animation: rotate 40s linear infinite;
    }
}
.it-brand-4 {
    &-ptb {
        padding: 51px 0;
    }
    &-active{
        & .slider-transtion {
            -webkit-transition-timing-function: linear;
            transition-timing-function: linear;
        }
        & .swiper-slide{
            width: auto;
        }
    }
    &-top-text {
        line-height: 0;
        position: relative;
        &::after{
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 1px;
            z-index: -3;
            transform: translateY(-50%);
            background-color: #A3C8C3;
            @media #{$xs}{
                display: none;
            }
            @media #{$sm}{
                display: block;
            }
        }
        & h5 {
            padding: 8px 20px;
            border-radius: 100px;
            line-height: 1;
            position: relative;
            display: inline-block;
            margin-bottom: 0;
            color: var(--it-theme-1);            
            border: 1px solid rgba($color: #03594E, $alpha: .3);
            @media #{$md}{
                font-size: 14px;
                padding: 4px 25px;
            }
            @media #{$xs}{
                font-size: 12px;
                line-height: 1.4;
                padding: 4px 15px;
            }
            &::before{
                position: absolute;
                content: '';
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -1;
                border-radius: 100px;
                background-color: rgba($color: #1AB69D, $alpha: .1);
            }
            &::after{
                position: absolute;
                content: '';
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -2;
                border-radius: 100px;
                background-color: var(--it-common-white);
            }
        }
    }
}
.it-brand-5 {
    &-item {
        padding: 15px 15px;
        padding-right: 50px;
        border-radius: 10px;
        background-color: var(--it-common-white);
        box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
        @media #{$xs}{
            padding: 13px 15px;
            padding-right: 25px;
        }
        & img {
            margin-right: 15px;
            flex: 0 0 auto;
            height: 50px;
            width: 50px;
            border-radius: 50%;
            @media #{$xs}{
                height: 30px;
                width: 30px;
            }
        }
        & span {
            font-size: 24px;
            color: var(--it-common-black);
            font-family: var(--it-ff-spartan-semibold);
            @media #{$xs}{
                font-size: 16px;
            }
        }
    }
    &-area {
        margin-top: -40px;
        @media #{$xs}{
            margin-top: -28px;
        }
        & .it-brand-6-active {
            padding-bottom: 30px;
        }
    }
}