.swiper {
      width: 100%;
      height: 30rem;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 85vh;
      object-fit: cover;
    }
    @media (max-width: 768px){
        .swiper-slide img {      
            height: 100%;
        }
    }

    .swiper-pagination-bullet{
      background-color: white;
    }

    /* custom css */
    .banner-text{
      position: absolute;                        
      height: 100%;                  
      background-image: linear-gradient(to right, rgb(0 0 0 / 52%), rgba(223, 0, 37, 0%));
      padding-top: 10%;
      padding-left: 5%;        
    }