/* ==============================
   OUR BRANDS HEADING
============================== */

.our-brands-heading{
    width:100%;
    padding:32px 6% 18px;
    background:#fff;
    text-align:left;
}

.our-brands-heading h2{
    margin:0;

    font-family:'Plus Jakarta Sans', sans-serif;
    font-size:26px;
    font-weight:700;

    color:#5e3984;
    letter-spacing:-0.5px;
}


/* MOBILE */
@media(max-width:600px){

    .our-brands-heading{
        padding:26px 20px 15px;
    }

    .our-brands-heading h2{
        font-size:20px;
    }

}
/* =====================================
   VIDEO CARDS SECTION
===================================== */

.video-section{
    width:100%;
    padding:35px 6% 55px;
    background:#ffffff;
}

.video-section-head{
    width:100%;
    margin-bottom:22px;
}

.video-section-head h2{
    margin:0;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:26px;
    font-weight:700;
    color:#5e3984;
}


/* SLIDER */

.video-slider{
    width:100%;
    overflow:hidden;
}


/* TRACK */

.video-track{
    display:flex;
    gap:18px;

    transition:
        transform .65s
        cubic-bezier(.22,.61,.36,1);

    will-change:transform;
}


/* CARD */

.video-card{
    flex:
        0
        0
        calc((100% - 54px) / 4);

    min-width:0;
}


/* VIDEO BOX */

.video-card video{
    width:100%;
    aspect-ratio:9 / 13;

    display:block;

    object-fit:cover;

    border-radius:16px;

    background:#f4eff7;
}


/* TITLE */

.video-card-title{
    margin-top:11px;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:14px;

    font-weight:600;

    text-align:center;

    color:#5e3984;
}


/* TABLET */

@media(max-width:950px){

    .video-card{
        flex:
            0
            0
            calc((100% - 32px) / 3);
    }

}


/* MOBILE */

@media(max-width:600px){

    .video-section{
        padding:
            28px 20px
            40px;
    }

    .video-section-head h2{
        font-size:20px;
    }

    .video-track{
        gap:12px;
    }

    .video-card{
        flex:
            0
            0
            calc((100% - 12px) / 2);
    }

    .video-card video{
        border-radius:13px;
    }

    .video-card-title{
        font-size:13px;
    }

}
/* =====================================
   VIDEO CARDS SECTION
===================================== */

.video-cards-section{
    width:100%;
    padding:20px 6% 40px;
    background:#ffffff;
}


/* =====================================
   VIDEO SLIDER
===================================== */

.video-slider{
    width:100%;
    overflow:hidden;
}


/* =====================================
   VIDEO TRACK
===================================== */

.video-track{
    display:flex;
    gap:16px;

    transition:
        transform .6s
        cubic-bezier(.22,.61,.36,1);

    will-change:transform;
}


/* =====================================
   VIDEO CARD
===================================== */

.video-card{
    position:relative;

    flex:
        0 0
        calc((100% - 48px) / 4);

    height:245px;

    overflow:hidden;

    border-radius:14px;

    background:#f4eff7;
}


/* =====================================
   VIDEO
===================================== */

.video-card video{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    border:0;
    outline:0;
}


/* =====================================
   BOTTOM DARK GRADIENT
===================================== */

.video-card::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:45%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(0,0,0,.58)
        );

    pointer-events:none;

    z-index:2;
}


/* =====================================
   TEXT INSIDE VIDEO
===================================== */

.video-label{
    position:absolute;

    left:16px;
    bottom:14px;

    z-index:3;

    margin:0;

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-size:15px;

    font-weight:600;

    line-height:1.3;

    color:#ffffff;

    text-shadow:
        0 2px 6px
        rgba(0,0,0,.35);

    pointer-events:none;
}


/* =====================================
   TABLET
===================================== */

@media(max-width:950px){

    .video-cards-section{
        padding:
            20px 4%
            35px;
    }


    .video-track{
        gap:14px;
    }


    .video-card{
        flex:
            0 0
            calc((100% - 28px) / 3);

        height:220px;

        border-radius:13px;
    }


    .video-label{
        left:14px;
        bottom:12px;

        font-size:14px;
    }

}


/* =====================================
   MOBILE
===================================== */

@media(max-width:600px){

    .video-cards-section{
        padding:
            15px 15px
            30px;
    }


    .video-track{
        gap:12px;
    }


    .video-card{
        flex:
            0 0
            calc((100% - 12px) / 2);

        height:190px;

        border-radius:11px;
    }


    .video-card::after{
        height:48%;
    }


    .video-label{
        left:11px;
        bottom:10px;

        font-size:12px;

        font-weight:600;
    }

}


/* =====================================
   SMALL MOBILE
===================================== */

@media(max-width:380px){

    .video-cards-section{
        padding:
            12px 12px
            25px;
    }


    .video-track{
        gap:10px;
    }


    .video-card{
        flex:
            0 0
            calc((100% - 10px) / 2);

        height:175px;

        border-radius:10px;
    }


    .video-label{
        left:10px;
        bottom:9px;

        font-size:11px;
    }

}