/* Brand 1 ---------------------------------- */
.brand-sec1 {
    background-color: $smoke-color;
    position: relative;
    overflow: hidden;
    .brand-title-area {
        position: absolute;
        top: 0;
        left: 0;
        background-color: $theme-color;
    }
}
.brand-title-area {
    background-color: $theme-color;
}
.brand-sec2 {
    .title-area2 {
        padding: 40px 50px;
    }
}
#brandSlide1 {
    margin-left: 300px;
}
@media (min-width: 2350px) {
    #brandSlide1 {
        margin-left: 0px;
    }
}

.brand-box {
    padding: 54px 0;
    text-align: center;
    filter: grayscale(1);
    transition: 0.4s ease-in-out;
    &:hover {
        filter: none;
    }
}

@include xxl {
    #brandSlide1 {
        margin-left: 430px;
    }
}

@include lg {
    #brandSlide1 {
        margin-left: 360px;
    }
    .brand-box {
        padding: 46px 0;
    }
}

@include md {
    .brand-sec2 .title-area2 {
        text-align: center;
        .title {
            max-width: 100%;
        }
    }
}

@include sm {
    .brand-sec1 .brand-title-area {
        position: relative;
    }
    #brandSlide1 {
        margin-left: 0;
    }
}

@include vxs {
    .brand-sec2 .title-area2 {
        padding: 40px 20px;
    }
}

/* Brand 3 ---------------------------------- */
.brand-sec3 {
    background-color: $title-color;
    padding-top: 60px;
}
.brand-title {
    &-border {
        position: relative;
        z-index: 2;
        &:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: #2A2F3C;
            z-index: -1;
        }
    }
    text-align: center;
    margin: -0.3em auto;
    font-weight: 600;
    position: relative;
    z-index: 2;
    max-width: fit-content;
    padding: 0 20px;
    background-color: $title-color;
}

@include lg {
    .brand-sec3 {
        padding-top: 46px;
    }
}