/* Force full-width even inside WPBakery containers */
.aaa-slider-wrapper {
   position: relative;
   width: 100vw;
   left: 50%;
   right: 50%;
   margin-left: -50vw;
   margin-right: -50vw;
   overflow: visible;
}
.aaa-slider-container {
    overflow: visible;
    position: relative;
    width: 100%;
}

.aaa-slider {
    display: flex;
    transition: transform 0.5s ease;
    gap: 0; /* no gaps */
}

/* Slide size logic */

.aaa-slide {
    flex: 0 0 65%; /* each slide = 65% of viewport */
    position: relative;
    opacity: 0.6;
    transition: transform 0.4s ease, opacity 0.4s ease;
    margin: 0;
}
@media (max-width: 40em){
    .aaa-slide {
        flex: 0 0 85%; 
    }
}
/* Active slide pops */

.aaa-slide.active {
    opacity: 1;
}
.aaa-slide.active .title{
    opacity: 1;
}
/* Image styling */

.aaa-slide img {
    width: 100%;
    /*border-radius: 10px;*/
    display: block;
}
.aaa-slide .title{
    opacity: 0;
    transition: 1s all ease-in;
}
.aaa-slide .title h3{
    text-transform:uppercase;
@media (min-width: 40em){
    .aaa-slide .title{
        position: absolute;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        width: 100%;
        display: flex;
        align-items: center;
        padding: 20px;
        
    }
    .aaa-slide .title h3{
        color:#fff;
         letter-spacing: 3px;
    }
}
@media (max-width: 40em){
    .aaa-slide .title h3{
        color:#000;
        font-size: 18px;
        letter-spacing: 2px;
    }
}

/* Navigation buttons */
.aaa-prev,
.aaa-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 50 !important;
    background: rgba(0,0,0,0.5) !important;
    color: #fff !important;
    padding: 0.4em 0.6em !important;
    border: none !important;
    cursor: pointer !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.aaa-prev:hover,
.aaa-next:hover{
    background: #000 !important;
}
.aaa-prev { left: 40px; }
.aaa-next { right: 40px; }

@media (max-width: 40em){
    .aaa-prev { left: 5px; }
    .aaa-next { right: 5px; }
}