.swiper-main {

    width: 100%;

    

}



.swiper-main img {    

    

    width: 100%;

    object-fit: fill;

}



.swiper-main .swiper-button-prev,

.swiper-main .swiper-button-next{

    --swiper-navigation-size: 20px;

    background-color: #ffffff;

    height: 70px;

    width: 50px;

    margin-top: -35px;

    opacity: 0;

    transition: opacity 0.3s;

}



.swiper-main .swiper-button-prev{

    border-radius: 0 65px 65px 0;

    left: -10px;

}



.swiper-main .swiper-button-next{

    border-radius: 65px 0 0 65px;

    right: -10px;

}



.swiper-main:hover .swiper-button-prev,

.swiper-main:hover .swiper-button-next{

    opacity: 1;

}



.swiper-slide {

    position: absolute;

}



.swiper-slide span{

    height: 25%;

    width: 30%;

    font-size: 18px;

    line-height: 1.5;

    text-align: left;

    position: absolute;

    top: 40%;

    left: 0;

    font-family: 'Trebuchet MS', sans-serif;  

    color: var(--text-color-inverse);

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

    

    padding-inline: 100px;

    padding-top: 25px;

    padding-bottom: 40px;

    

}



.swiper-slide button{

    font-size: 16px;

    font-weight: 500;

    padding: 0.5em 0.5em;

    position: absolute;

    text-align: center;

    border: none;

    

    left: 0;

    top: 67%;

    margin-left: 100px;    

    color: var(--text-color-inverse);

    background-color: var(--text-color-hover);   

    

}



.swiper-slide button:hover{

    cursor: pointer;

    filter: brightness(120%);

}







@media(max-width: 1080px){

    .swiper-main {

        width: 100%;

        

    }

    

    .swiper-main img {

       

        width: 100%;

        object-fit: fill;

    }

    

    .swiper-main .swiper-button-prev,

    .swiper-main .swiper-button-next{

        --swiper-navigation-size: 10px;

        background-color: #ffffff;

        height: 35px;

        width: 25px;

        margin-top: -35px;

        opacity: 0;

        transition: opacity 0.3s;

    }

    

    .swiper-main .swiper-button-prev{

        border-radius: 0 65px 65px 0;

        left: -10px;

    }

    

    .swiper-main .swiper-button-next{

        border-radius: 65px 0 0 65px;

        right: -10px;

    }

    

    .swiper-main:hover .swiper-button-prev,

    .swiper-main:hover .swiper-button-next{

        opacity: 1;

    }

    

    .swiper-slide {

        position: absolute;

    }

    

    .swiper-slide span{

       display: none;

        

    }

    

    .swiper-slide button{

       display: none; 

        

    }

    

    

   

}