/* brand box start --------------------*/
.brand-area {
    .th-container {
        --main-container: 1830px;
    }
}

.brand-box {
    width: 100%;
    height: 50px;
    overflow: hidden;
    margin: auto;
    position: relative;
    display: block;
    filter: grayscale(9);
    transition: .4s;

    &:hover {
        filter: grayscale(0);

        a img {
            &.gray {

                opacity: 1;
                visibility: visible;
                transition: all 0.7s ease-in-out;
                transform: translateY(0%);

            }

            &.original {

                opacity: 0;
                visibility: hidden;
                transition: all 0.7s ease-in-out;
                transform: translateY(100%);
            }
        }
    }

    img {
        margin: 0 auto;
        transition: all 0.7s ease-in-out;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;

        &.gray {

            transition: all 0.3s ease-in-out;
            opacity: 0;
            visibility: hidden;
            transition: all 0.7s ease-in-out;
            transform: translateY(-100%);


        }

        &.original {

            transition: all 0.7s ease-in-out;
            transform: translateY(0%);
        }
    }
}

/* elements-sec  start*/
.elements-sec {
    .th-container {
        --main-container: 1744px;
    }
}

.elements-item {
    text-align: center;
    animation-duration: 1s;
    animation-fill-mode: both;

}

.moveFromTop {
    animation-name: moveFromTop
}

@keyframes moveFromTop {
    from {
        transform: translateY(-100%)
    }
}


/* matter js */
.tags-container>canvas {
    position: relative;
    top: -1px;
    left: -1px;
}

.tags-container {
    width: 100vw;
    height: 200px;
    margin-top: 0vw;
    overflow: hidden;
}

/* brand box2 start ---------------*/
.brand2 {
    margin-top: -215px;
    padding-bottom: 55px;
    background: $smoke-color;

    @include md {
        margin-top: -140px;
    }
}

.brandSlider2 {
    padding: 35px 16px 25px 35px;  
    background: $white-color;
    border-radius: 50px;
    margin-top: 35px;
}

/* brand box2 end ---------------*/

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

/* brand box4 start ---------------*/
.brand4 {
    margin-top: -250px;
    @include md{
        margin-top: -140px;
    }

    &-wrapp {
        padding-top: 163px;
        border-radius: 30px;
        background-color: $dark-bg-color;

        & .sec-note {
            font-size: 40px;
            @include sm{
                font-size: 24px;
            }
        }
    }
}

.brandSlider4 {
    padding: 40px;
    padding-bottom: 14px;
    border-top: 1px solid rgba($color: #fff, $alpha: .1);
    @include md{
        padding-bottom: 60px;
    }

    @include xs{
        padding-bottom: 15px;
    }

    & .brand-box {
        &:hover {
            filter: brightness(3) contrast(1);
        }
    }
}

/* brand box4 end ---------------*/