@media (min-width:992px) and (max-width:1199px){
     
  .carousel-subTitle{
    font-size: 48px; 
  }
  
  .avail-main-container{
    bottom: -21rem;
  }

  .avail-box{
    margin: 0 10px;
  }

  .servicesBoxContainer{
      display: grid; 
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      column-gap: 10px;
      margin: 50px 120px 100px 120px;
    }
  
    .services-box{
      width: 100% ;
      height: 120px;
    }

    .services-box p{
        font-size: 1rem;
    }

    .slide-1-DetailsText{
      margin-right: 150px;
    }

    .ff{
      margin-top: 100px;
     }

     .q{
      min-width: 33.33%;
    }

    .galleryDescContainer{
      width: 100%;
      height: 100%;
      animation: 20s slider infinite;
    }

    .galleryDescContainer img{
      width: 100%;
      height: 100%;
    }
    
    @keyframes slider {
       0%{
         left: 0;
       }
    
       20%{
         left: 0;
       }
    
       25%{
         left: -33.33%;
      }
    
       45%{
        left: -33.33%;
     }
     
      50%{
      left: -66.66%;
    } 
     70%{
      left: -66.66%;
    }
    
    75%{
      left: -99.99%;
    }
    
    95%{
      left: -99.99%;
    }
    
    100%{
      left: 0%;
    }
    }
    
     
}

@media only screen and (max-width:992px){
  .carousel{
     max-width: 100%;
  }

  .carousel-subTitle{
    font-size: 42px; 
  }

  .carousel-button {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }   
  
  .carousel-button.prev > img{
      width: 50px; 
      height: 50px; 
      object-fit: cover; 
      border-radius: 50%;
    }
  
    .carousel-button.next > img{
      width: 50px; 
      height: 50px; 
      object-fit: cover; 
      border-radius: 50%;
    }

    .carousel-button.next {
      right: 1rem;
    }

    .avail-main-container{
      bottom: -20rem;
    }

    .avail-box{
      margin: 0px 10px;
      padding: 0 5px;
      display: grid; 
      grid-template-columns: 1.3fr 0.8fr 0.5fr;
    }

    .avail-button-view{
      margin: 20px 10px;
    }

    .ind-avail-box{
      margin: 20px 5px;
    }

    .aboutUsContainer{
      display: grid;
      margin: 120px 120px 100px 120px; 
      grid-template-columns: 1fr;
    }
  
     .aboutUsTextDetails{
      display: grid;
      grid-template-columns: 1fr;
      margin-bottom: 50px;
      height: 400px;
    }
  
    .aboutUsTitleView{
      display: flex; 
      flex-direction: column;
      justify-content: space-evenly;
    }
       
    .aboutUsTitleView h1 {
      font-size: 33px; 
      font-weight: 300;
    }
    
    .aboutUsMessage{
      font-size: 21px;;
    }
  
    .aboutUsThumbnailsView{
      display: grid; 
      grid-template-columns: 1fr 1fr; 
      column-gap: 10px;
    }

    .servicesBoxContainer{
      margin: 0px 120px 150px 120px; 
       column-gap: 15px;
    }

    .services-box > img{
      width: 35px;
      height: 35px;
    }
  
    .services-box p {
      font-size: 0.9rem; 
      font-family: 'Poppins', sans-serif;
    }

    .slide-1-DetailsText{
      margin-right: 50px;
    }

    .testimonialsContainer{
      margin: 100px 110px; 
      height: 400px;
  }

    .testimonialsContainer img{
      width: 100%; 
      height: 60%; 
      margin-top: 25%;
    }

    .testimonialsTitle{
      font-size: 14px; 
    }
    
    .testimonialsSubTitle{
      font-size: 35px; 
    }
    
    .testimonialsMessage p{
      font-size: 18px; 
    }

    .q{
      min-width: 50%;
      overflow-y: hidden;
      height: 100%;
    }

    .galleryDescContainer{
      width: 100%;
      height: 80%;
    }

    .galleryDescContainer img{
      height: 100%;
    }
    
    @keyframes slider {
      0%{
        left: 0;
      }
   
      20%{
        left: -0%;
      }
   
      25%{
        left: -50%;
     }
   
      45%{
       left: -50%;
    }
    
     50%{
     left: -100%;
   } 
    70%{
     left: -100%;
   }
   
   75%{
     left: -150%;
   }
   
   95%{
     left: -150%;
   }
   
   100%{
     left: -200%;
   }
   }
    
   .blogContainer{
    margin-top: -60px;
   }

    .blogCardContainer{
      grid-template-columns: 1fr 1fr; 
    }

    .blogContentView{ 
      justify-content: flex-start;
      margin-bottom: 20px;
    }

    .blogDate{
      margin: 10px 0px;
    }
  
    .blogTitle{
      margin: 10px 0px;
    }
  
    .blogMsg{
      margin: 10px 0px;
    }
}

@media only screen and (max-width:768px){
  .carousel-subTitle{
    font-size: 30px; 
  }

  .avail-main-container{
    height: 350px;  
    bottom: -26rem;
  }
  
  .avail-box{
    margin: 0 10px; 
    padding: 0px 10px;
    grid-template-columns: 1fr; 
  }

 .check-inputs{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    margin: 0px 20px;
 }

  .ind-avail-input{
    width: 100%;
  }

 .number-input{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 20px;
    margin: 0px 20px;
 }

  .room-number-inputTag{
    width: 100%;
    padding: 0px 20px;
  }
  
  .aboutUsContainer{
    margin: 200px 100px 100px 100px; 
  }

    .servicesBoxContainer{ 
      display: grid;
      grid-template-columns: 1fr 1fr;
      height: 100%;
      column-gap: 30px;
      row-gap: 20px;
    }

    .services-box{
        height: 100px;
    }

    .services-box > img{
      width: 35px;
      height: 35px;
    }
  
    .services-box p {
      font-size: 0.9rem; 
      font-family: 'Poppins', sans-serif;
    }

    .ff{
      margin-top: 0px;
     }

 .sec-carousel{
   position: relative;
   width: 100%; 
   height: 50rem; 
   background-color: #0e2737;
 }
 
 .slide-1-Container{
   margin: 0;
       display: grid; 
       grid-template-columns: 1fr;
 }
 
 
 .slide-1-Container img {
   margin: 2rem 0;
   width: 100%; 
   height: 50%; 
 }
 
 .carouselButtons{
   position: absolute;
   bottom: 0;
   left: 50%;
 }
 
 
 .slide-1-Details{
   width: 100%;
   height: 30%;
   display: flex; 
   flex-direction: column; 
   justify-content: flex-end; 
   padding: 10px 0px 10px 10px;
   margin-top: 30px; 
 }
 
 .slide-1-DetailsTitle{
   font-size: 25px; 
   margin: 0 10px;
 }
 
 .slide-1-Rent{
  font-size: 25px; 
  margin: 0 10px;
}
 
 .slide-1-Details ul li{
  font-size: 16px; 
  margin: 0 10px;
}
 
 .slide-1-viewDetails{
  margin-left: 10px;   
}
 
 .slide-1-viewDetails p{
   font-size: 18px;
   padding: 10px;
 }    

 .slide-1-DetailsText{
  width: 300px;
}

 .testimonialsContainer{
  margin: 130px;
  padding: 0px;
  display: grid; 
  grid-template-columns: 1fr; 
  height: 100%;
}

    .testimonialsContainer img{
      width: 100%; 
      height: 100%; 
      margin: 0px;
    }

    .testimonialsMessageView{
      margin-top: 60px;
      height: 420px;
    }

    .q{
      min-width: 100%;
    }

    .galleryDescContainer{
      width: 100%;
      height: 80%;
      animation: 20s slider infinite;
    }

    .galleryDescContainer img{
      height: 100%;
    }
    
    @keyframes slider {
       0%{
         left: 0;
       }
    
       20%{
         left: 0;
       }
    
       25%{
         left: -100%;
      }
    
       45%{
        left: -100%;
     }
     
      50%{
      left: -200%;
    } 
     70%{
      left: -200%;
    }
    
    75%{
      left: -300%;
    }
    
    95%{
      left: -300%;
    }
    
    100%{
      left: -400%;
    }
    }

    .blogContainer{
      margin-top: -80px;
     }
    
    .blogCardContainer{
      grid-template-columns: 1fr; 
    }

    .blogContentView{ 
      justify-content: flex-start;
      margin-bottom: 20px;
    }

    .blogDate{
      margin: 10px 0px;
    }
  
    .blogTitle{
      margin: 10px 0px;
    }
  
    .blogMsg{
      margin: 10px 0px;
    }
}

@media only screen and (max-width:576px){

  .carousel-subTitle{
    font-size: 30px; 
  }

  .avail-main-container{

    height: 350px;  
    bottom: -25rem;
  }
  
  .avail-box{
    margin: 0 10px; 
    padding: 0px 10px;
    grid-template-columns: 1fr; 
  }

 .check-inputs{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    margin: 0px 20px;
 }

  .ind-avail-input{
    width: 100%;
  }

 .number-input{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 20px;
    margin: 0px 20px;
 }

  .room-number-inputTag{
    width: 100%;
    padding: 0px 20px;
  }
  
  .aboutUsContainer{
      margin: 180px 10px 0px 10px; 
    }
  
    .servicesBoxContainer{
      margin: 70px 10px;
      column-gap: 50px;
      row-gap: 30px;
    }

    .services-box > img{
      width: 35px;
      height: 35px;
    }
  
    .services-box p {
      font-size: 0.9rem; 
      font-family: 'Poppins', sans-serif;
    }

    .sec-carousel{
      height: 45rem; 
    }

    .slide-1-Details{
      margin: 60px 0px; 
    }


    .testimonialsContainer{
      margin: 70px 10px; 
      height: 100%;
  }

    .testimonialsContainer img{
      width: 100%; 
      height: 90%; 
    }

    .testimonialsMessageView{
      margin-top: 20px;
    }

    .blogContSubTitle{
      font-size: 1.5rem;
    }

    .blogCardContainer{
      grid-template-columns: 1fr; 
      margin: 50px 10px; 
    }
}

 @media only screen and (max-width:450px) {
   .main-container{
     width: 100%;
   }

   .ff{
     overflow: hidden;
   }

  .avail-main-container{
   width: 100%;
   height: 380px;
   padding:0px 10px;
   margin-bottom: 50px;
   overflow: hidden;
   /* position: absolute; */
   bottom: -29rem;
  }
  
  .check-inputs{
    display: flex;
    flex-direction: column;
  }
  
  .ind-avail-input{
    width: 100%;
  }

  .room-number-inputTag{
    width: 100%;
    padding: 0px 20px;
  }

  .avail-button{
    width: 100%;
  }

  .sec-carousel{
    height: 40rem; 
  }
 
}