.sliding-banner {

    position: relative;

    width: 100%;

    overflow: hidden;

}



.sliding-banner .slide {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    transition: opacity 0.5s ease-in-out;

}



.sliding-banner .slide.active {

    opacity: 1;

}



.sliding-banner img {

    width: 100%;

    height: auto;

}



.sliding-banner .slide-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.5);

    display: flex;

    align-items: center;

    justify-content: center;

}



.sliding-banner .text-box {

    text-align: center;

    color: #fff;

}



.sliding-banner .text-box p {

    margin: 0;

}



#sliding-banner-slides-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



#sliding-banner-slides-list li {

    margin-bottom: 20px;

}



#sliding-banner-slides-list img {

    width: 200px;

    height: auto;

    margin-bottom: 10px;

}











/* Add your CSS styles for the slider output here */

.simple-slider {

  /* Your styling for the slider container */

}



.slide {

  /* Your styling for individual slides */

}



.slide img {

    width: -webkit-fill-available;

}



.slide-content {

  /* Your styling for slide content (title and text) */

}









/* CSS for the slider container */

.ass-slider {

    position: relative;

    max-width: 100%; 

    overflow: hidden; 

}



/* CSS for the slides */

.ass-slider .slide {

    position: relative;

    width: 100%;

    transition: opacity 2s; 

}



/* CSS for the slide images */

.ass-slider .slide img {



    height: 100vh;

    width: -webkit-fill-available;

    object-fit: cover;



}



/* CSS for the slide content */

.ass-slider .slide .content {

    position: absolute;

    color: #fff;

    margin: 0;

    top: 50%;

    transform: translate(0, -50%);

    margin-left: 0;

    margin-right: 0;

    background: rgba(0,0,0,0.2);

    padding: 40px;

    border-left: 3px solid #5BC2CE;

    border-right: 3px solid #5BC2CE;

    padding: 30px;

    margin: 20px;

    max-width: 600px;

}

.ass-slider {

    max-height: 100vh;

    overflow: hidden;

    position: relative;

}



.ass-slider .slide {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    min-height: 500px; /* modify this as per your requirement */

}



/* CSS for the "inactive" slides */

.ass-slider .slide.inactive {

    opacity: 0;

    position: absolute;

    top: 0;

    left: 0;

}



.slide h2{

    text-align: center;

    font-size: 42px;

    color: #FFF;

    font-weight: 700;

    margin-bottom: 10px;

    line-height: 1.2;

    /* font-family: 'Roboto Condensed', sans-serif; */

    letter-spacing: 1px;

    text-transform: uppercase;

}



.ass-slider .slide .content h2, 

.ass-slider .slide .content .text {

    transition: transform 1s, opacity 1s;

    opacity: 0;

}



.ass-slider .slide .content h2.animate,

.ass-slider .slide .content .text.animate {

    transform: none;

    opacity: 1;

}



.ass-slider .slide .content h2 {

    transform: translateY(-100%);

}



.ass-slider .slide .content .text {

    transform: translateY(100%);

}



.ass-slider .ass-scroll-down {

    position: absolute;

    bottom: 60px;

    left: 50%;

    transform: translateX(-50%);

}

.ass-scroll-down .arrow-icon {

    transform: scaleY(-1);

    color: white;

    width: 50px;

    height: 50px;

    border: 2px solid white;

    border-radius: 50%;

    padding: 5px;

}

.ass-scroll-down {

    animation: moveUpDown 10s ease-in-out infinite;

}



@keyframes moveUpDown {

    0%, 90% { transform: translateY(0); }

    95% { transform: translateY(-10px); }

    100% { transform: translateY(0); }

}