/* ==========================================================
   RESPONSIVE BANNER MODULE
   Modern Premium Style
========================================================== */


/* ==========================
   MAIN WRAPPER
========================== */

.responsive-banner {
    width: 100%;
    margin: 30px 0;
}


/* ==========================
   DESKTOP STRUCTURE
========================== */

.responsive-banner-desktop {
    display: flex;
    gap: var(--rb-gap);
    width: 100%;
}


.responsive-banner-slider {
    flex: 2;
    position: relative;
    overflow: hidden;
    border-radius: var(--rb-radius);
}


.responsive-banner-main {

    display: none;

    position: relative;

    width:100%;

    height:var(--rb-height-desktop);

    overflow:hidden;

    border-radius:var(--rb-radius);

}


.responsive-banner-main.active {

    display:block;

}



/* ==========================
   IMAGES
========================== */


.responsive-banner img {

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}



.responsive-banner-main img,
.responsive-banner-small img {

    transition:

        transform .6s ease,

        filter .4s ease;

}



.responsive-banner-main:hover img,
.responsive-banner-small:hover img {

    transform:scale(1.05);

}




/* ==========================
   SIDE BANNERS
========================== */


.responsive-banner-side {

    flex:1;

    display:flex;

    flex-direction:column;

    gap:var(--rb-gap);

}



.responsive-banner-small {

    position:relative;

    overflow:hidden;

    height:

    calc(

        (var(--rb-height-desktop) - var(--rb-gap))

        / 2

    );

    border-radius:var(--rb-radius);

}



.responsive-banner-small a {

    display:block;

    width:auto;

    height:100%;

}




/* ==========================
   CONTENT BOX
========================== */


.responsive-banner-content {

    position:absolute;

    left:40px;

    bottom:40px;

    z-index:20;


    display:flex;

    flex-direction:column;

    align-items:flex-start;


    max-width:70%;

}




/* ==========================
   TITLES
========================== */


.responsive-banner-content h2,
.responsive-banner-content h3 {
    color: var(--rb-text-color);
}



.responsive-banner-content h2 {

    font-size:30px;

}



.responsive-banner-content h3 {

    font-size:24px;

}




/* ==========================
   BUTTON
========================== */


.responsive-banner-button {

    background: var(--rb-button-bg);

    color: var(--rb-button-color);

    padding: 10px 20px;

    border-radius: 15px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    text-decoration: none;

    transition: .3s ease;

}



.responsive-banner-button:hover {


    background:#111;


    color:#fff;


    transform:

    translateY(-3px);

}




/* ==========================
   SMALL BANNER TEXT
========================== */


.responsive-banner-small .responsive-banner-content {


    left:25px;

    bottom:25px;

    max-width:80%;

}



.responsive-banner-small .responsive-banner-content h3 {


    font-size:22px;

    margin-bottom:12px;

}



.responsive-banner-small .responsive-banner-button {


    padding:10px 20px;

    font-size:13px;

}





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


.responsive-banner-mobile {

    display:none;

}



@media(max-width:767px){


    .responsive-banner {

        margin:20px 0;

    }



    .responsive-banner-desktop {

        display:none;

    }



    .responsive-banner-mobile {

        display:block;

        overflow:hidden;

        border-radius:var(--rb-radius);

    }



    .responsive-banner-mobile-slide {


        display:none;


        position:relative;


        height:var(--rb-height-mobile);


        overflow:hidden;


        border-radius:var(--rb-radius);


    }



    .responsive-banner-mobile-slide.active {

        display:block;

    }



    .responsive-banner-mobile-slide a {

        display:block;

        height:100%;

    }




    .responsive-banner-mobile .responsive-banner-content {


        left:20px;

        bottom:20px;

        max-width:85%;


    }




    .responsive-banner-mobile .responsive-banner-content h2 {


        font-size:28px;


    }



    .responsive-banner-mobile .responsive-banner-button {


        padding:10px 20px;

        font-size:14px;

    }



}





/* ==========================
   ANIMATION SUPPORT
========================== */


.responsive-banner-main,
.responsive-banner-mobile-slide {

    animation-duration:.6s;

    animation-fill-mode:both;

}



[data-animation="fade"] .responsive-banner-main.active,
[data-animation="fade"] .responsive-banner-mobile-slide.active {


    animation-name:rbFade;

}



@keyframes rbFade {


    from {

        opacity:0;

    }


    to {

        opacity:1;

    }

}





[data-animation="slide"] .responsive-banner-main.active,
[data-animation="slide"] .responsive-banner-mobile-slide.active {


    animation-name:rbSlide;

}



@keyframes rbSlide {


    from {

        opacity:0;

        transform:translateX(30px);

    }


    to {

        opacity:1;

        transform:translateX(0);

    }

}