.swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-inline: 2rem;
  }

  .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 650px;
    height: 460px;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .swiper-slide .title {
    font-size: 32px;
    font-weight: 700;
    position: absolute;
    text-align: center;
    margin-top: 18rem;
     padding: 1rem;
    border-radius: 1rem;
    background-color: rgba(0, 0, 0, 0.313);
    font-family: sans-serif;
  }

  .swiper-slide .title2 {
    font-size: 24px;
    font-weight: 700;
    position: absolute;
    text-align: center;
    margin-top: -5.5rem;
    color: #fff; 
    margin-left:5rem;
    padding: 2rem;
    
    
  }
  .swiper-slide .para2{
    color: #fff;;
    font-size: 16px;
    font-weight: 500;
    
  }

  @media (max-width:560px){
    .swiper-slide .title{
      font-size: 18px;
      margin-left: 1rem;
    }
    .swiper-slide{
      width: 410px;
    }
   
   }

 
   @media (max-width:760px){
    .swiper-slide{
      width: 460px;
    }
   }
   @media (max-width:410px){
    .swiper-slide .title{
      font-size: 12px;
      padding-left: 2.5rem;
    }
   
   }
   @media(max-width:380px){
    .swiper-slide .title{
      font-size: 10px;
      padding-left: 4.5rem;
    }
   }
   @media(max-width:300px){
    .swiper-slide .title{
      font-size: 7px;
      padding-left: 5.5rem;
    }
   }