@use '../utils' as *;

/*----------------------------------------*/
/*  brand
/*----------------------------------------*/

.rs-brand {
    &-one {
        position: relative;
        z-index: 1;
        .rs-brand-bg-thumb{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            inset-inline-start: 0;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            z-index: -1;
        }
        .rs-brand-item {
            background: var(--rs-white);
            display: flex;
            align-items: center;
            justify-content: center;
            height: 200px;
            width: 100%;
            box-shadow: 7px 7px 40px -3px rgba(16.98, 11.979, 45.91, 0.05);
            &.has-clip-path{
                clip-path: polygon(0% 0%, 80% 0, 100% 20%, 100% 100%, 0% 100%);
            }
            &:hover {
                .rs-brand-thumb {
                    img {
                        transform: scale(1.2);
                    }
                }
            }
        }
        .rs-brand-thumb {
            img {
                width: 90px;
                transition: all 0.5s ease;
            }
        }
        &.has-theme-blue{
            .rs-section-subtitle{
                color: var(--rs-white);
            }
            .rs-section-title{
                color: var(--rs-white);
            }
            .rs-brand-item{
                background: rgba(255, 255, 255, 0.07);
            }
        }
        &.has-bg-light{
            .rs-brand-item{
                background: var(--rs-bg-primary);box-shadow: unset;
            }
        }
    }
    &-two {
        position: relative;
        z-index: 1;
        overflow-x: clip;
        .rs-brand-wrapper{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px 80px;
            @media #{$laptop}{
                gap: 30px 30px;
            }
            @media #{$lg}{
                align-items: start;
            }
            @media #{$sm}{
                grid-template-columns: repeat(1, 1fr);
            }
        }
        .rs-brand-shape-thumb {
            position: absolute;
            inset-inline-start: -30px;
            overflow: hidden;
            visibility: hidden;
            bottom: 0;
            z-index: -1;
            @include rtl{
                inset-inline-end: -30px;
                inset-inline-start: auto;
            }
            @media #{$md}{
                display: none;
            }
            img {
                transition: unset;
            }

        }
        .rs-brand-circle-shape {
            position: absolute;
            bottom: 70px;
            inset-inline-start: 27%;
            width: 150px;
            z-index: -1;
            @media #{$md}{
                display: none;
            }
            img {
                animation: rs-scale-two 1s alternate infinite;
                -webkit-animation: rs-scale-two 1s alternate infinite;
            }
        }
        .rs-brand-item-wrapper {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            @media #{$lg}{
                grid-template-columns: repeat(3, 1fr);
            }
            @media #{$md}{
                grid-template-columns: repeat(2, 1fr);
            }
            @media #{$sm}{
                display: flex;
                flex-wrap: wrap;
            }
        }
        .rs-brand-item {
            background: var(--rs-bg-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            height: 200px;
            width: 200px;
            @media #{$laptop}{
                width: 170px;
            }
            @media #{$sm}{
                width: 130px;
            }
            @media #{$mobile}{
                width: 100%;
            }
            &:hover {
                .rs-brand-thumb {
                    img {
                        transform: scale(1.2);
                    }
                }
            }
        }
        .rs-brand-thumb {
            img {
                width: 90px;
                transition: all 0.5s ease;
            }
        }
        .rs-section-title-wrapper{
            @media #{$lg}{
                position: sticky;
                top: 110px;
            }
            @media #{$sm}{
                position: relative;
                top: unset;
            }
        }
        &.has-theme-light-blue{
            .rs-brand-item{
                width: 220px;
                @media #{$laptop}{
                    width: 170px;
                }
                @media #{$md}{
                    width: 220px;
                }
                @media #{$mobile}{
                    width: 100%;
                }
            }
            .descrip {
                max-width: 600px;
            }
            .rs-brand-shape-thumb{
                inset-inline-start: -230px;
                @include rtl{
                    inset-inline-end: -30px;
                    inset-inline-start: auto;
                }
            }
            .rs-section-subtitle-wrapper{
                margin-bottom: 40px;
            }
        }
        &.has-theme-orange{
            .rs-brand-wrapper{
                align-items: center;
            }
            .rs-brand-shape{
                position: absolute;
                bottom: 0;
                inset-inline-start: 0;
                @media #{$sm}{
                    display: none;
                }
            }
            .rs-brand-slider-wrapper{
                .rs-brand-item {
                    background: var(--rs-bg-primary);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 200px;
                    width: 100%;
                }
            }
        }
    }
    &-three{
        position: relative;
        z-index: 1;
        .rs-brand-wrapper{
            display: grid;
            grid-template-columns: repeat(6,1fr);
            gap: 30px;
            @media #{$lg}{
                grid-template-columns: repeat(5,1fr);
            }
            @media #{$md}{
                grid-template-columns: repeat(4,1fr);
            }
            @media #{$sm}{
                grid-template-columns: repeat(3,1fr);
            }
            @media #{$mobile}{
                grid-template-columns: repeat(2,1fr);
            }
        }
        .rs-brand-item {
            background: var(--rs-white);
            display: flex;
            align-items: center;
            justify-content: center;
            height: 200px;
            &:hover {
                .rs-brand-thumb {
                    img {
                        transform: scale(1.2);
                    }
                }
            }
        }
        .rs-brand-thumb {
            img {
                width: 90px;
                transition: all 0.5s ease;
            }
        }
    }
    &-four{
        .rs-brand-item{
            background: var(--rs-bg-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            height: 200px;
            width: 100%;
            transition: all 0.3s linear;
            &:hover{
                background: var(--rs-theme-light-green);
                .rs-brand-thumb{
                    img{
                        &.hover-thumb{
                            visibility: visible;
                            opacity: 1;
                        }
                        &.main-thumb{
                            visibility: hidden;
                            opacity: 0;
                        }
                    }
                }
            }
        }
        .rs-brand-thumb{
            position: relative;
            overflow: hidden;
            .hover-thumb{
                position: absolute;
                visibility: hidden;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                opacity: 0;
            }
            img{
                width: 90px;
            }
        }
    }
    &-five {
        &.has-pos-none{
            .rs-brand-item {
                &::before{
                    content: none;
                }
                &::after{
                    content: none;
                }
            } 
        }
        .rs-brand-item {
            background: var(--rs-bg-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            height: 200px;
            width: 100%;
            position: relative;
            z-index: 1;
            margin: 15px 0 15px 0;
            &::before{
                position: absolute;
                content: "";
                top: -12px;
                right: 0;
                background-color: var(--rs-bg-primary);
                width: 125px;
                height: 12px;
                border-radius: 15px 20px 0 0;
            }
            &::after{
                position: absolute;
                content: "";
                bottom: -12px;
                right: 0;
                background-color: var(--rs-bg-primary);
                width: 60px;
                height: 12px;
                border-radius: 0 0 20px 15px;
            }
            .rs-brand-shape{
                position: absolute;
                bottom: -12px;
                left: 0;
                width: 30px;
                height: 12px;
                background-color: var(--rs-bg-primary);
                border-radius: 0 0 15px 20px;
            }
            &:hover {
                .rs-brand-thumb {
                    img {
                        transform: scale(1.2);
                    }
                }
            }
        }
        .rs-brand-thumb {
            img {
                width: 90px;
                transition: all 0.5s ease;
            }
        }
        &.has-theme-blue{
            .rs-section-subtitle{
                color: var(--rs-white);
            }
            .rs-section-title{
                color: var(--rs-white);
            }
            .rs-brand-item{
                background: rgba(255, 255, 255, 0.07);
            }
        }
        &.has-bg-light{
            .rs-brand-item{
                background: var(--rs-bg-primary);box-shadow: unset;
            }
        }
    }
    &-six {
        position: relative;
        z-index: 1;
        .rs-brand-bg-thumb{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            inset-inline-start: 0;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            z-index: -1;
        }
        .rs-brand-item {
            background: var(--rs-bg-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            height: 200px;
            width: 100%;
            &:hover {
                .rs-brand-thumb {
                    img {
                        transform: scale(1.2);
                    }
                }
            }
        }
        .rs-brand-thumb {
            img {
                width: 90px;
                transition: all 0.5s ease;
            }
        }
    }
}

// bg image style

.rs-brand-thumb-wrapper{
    position: relative;
    .rs-brand-bg-thumb{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        inset-inline-start: 0;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        z-index: -1;
    }
}