@media only screen and (max-width: 1600px) {
  .banner-font-size {
    font-size: 3rem;
  }
  section.booking-form .container {
    transform: translateY(-55px);
  }
}


@media only screen and (max-width: 1400px) {
  section.home-banner .carousel-item {
    position: relative;
    height: calc(100vh - 10%);
  }

  section.booking-form .container {
    transform: translateY(-60px);
  }

  .ui-widget-content {
    width: 17%;
    background-color: #fff;
  }



  section.booking-form .btn-1{
    font-size: 1.1rem;
  }
}

@media only screen and (max-width: 1200px) {
  .h-font-size {
    font-size: 3.4rem;
  }
  section.rooms .overlay {
    height: 20%;
  }

  section.feature .heading .img-bg {
    width: 170px;
  }
    section.booking-form .btn-1{
    padding: 0.5rem 1.5rem;
  }
  nav .nav-link{
    font-size: 1rem;
  }
  
}

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

  section.rooms .content-box:hover .wrapper {
    height: 55%;
  }

  section.banner-room .carousel-item {
    height: 70vh;
  }

}

@media only screen and (max-width: 990px) {
  nav li {
    width: 92%;
  }
  nav .navbar-brand {
    max-width: 50%;
  }
  nav img {
    width: 100%;
  }

  .banner-font-size {
    font-size: 2.4rem;
  }

  section.booking-form .flex {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10px;
    row-gap: 5px;
  }

  .ui-widget-content {
    width: 25%;
  }

  section.about .img-box {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
  }
  section.about .img-box .about-img1 {
    transform: translateY(0px);
  }
  section.about .img-box .about-img2 {
    transform: translateY(0);
  }

  section.rooms .content-box:hover .wrapper {
    height: 40%;
  }
  section.rooms .overlay {
    height: 14%;
  }

  section.feature .heading .img-bg {
    width: 200px;
  }


  section.all-room .card{
    position: relative;
    left: 0;
    padding: 3rem 1rem;
  }
  section.all-room .card2{
    position: relative;
    left: 0;
    padding: 3rem 1rem;
  }
  section.all-room .card .feature, section.all-room .card2 .feature{
    gap: 15px;
  }
  section.all-room .row{
    margin-bottom: 5rem;
    }
    section.contact .border-right{
      border-right: 1px solid transparent;
      
    } 
}

@media only screen and (max-width: 767px) {
  .banner-font-size {
    font-size: 1.9rem;
  }
  .ui-widget-content {
    width: 35%;
  }
  section.home-banner .carousel-item {
    height: 400px;
  }

  section.rooms .overlay {
    height: 16%;
  }
  section.video .container-fluid {
    position: relative;
    height: 400px;
  }
  section.video img {
    height: 100%;
    object-fit: cover;
  }

  section.video-banner video{
    height: 60vh;
  }
  section.booking-form .container {
    padding: 1rem;
    transform: translateY(-10px);
  }

  section.rooms .content-box:hover .wrapper {
    height: 55%;
  }

  section.aboutpage p{
    max-width: 100%;
    margin: 0 auto;
  }

  section.banner-room .carousel-item {
    height: 50vh;
  }

  
}

@media only screen and (max-width: 550px) {
  .banner-font-size {
    font-size: 1.5rem;
  }

  .carousel-control-next-icon,
  .carousel-control-prev-icon {
    width: 1rem;
    height: 1rem;
  }

  section.booking-form .flex {
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
  }


  .ui-widget-content {
    width: 50%;
  }
  section.rooms .overlay {
    height: 20%;
  }
  section.home-banner{
    margin-top: 72px;
  }

  section.booking-form .date-div{
    margin-bottom: 0.5rem !important;
  }
  section.booking-form .date-div:last-child{
    margin-bottom: 0.8rem !important;
  }

  .sub-font-size{
    font-size: 2rem;
  }

  .h-font-size{
    font-size: 2.4rem;
  }

  footer li a{
    font-size: 1.2rem;
  }

  .carousel-control-next, .carousel-control-prev{
    height: 60%;
  }
}

@media only screen and (max-width: 480px) {
  .banner-font-size {
    font-size: 1.8rem;
  }

  section.home-banner .carousel-item .content {
    padding: 0.3rem 0.7rem;
  }
  section.home-banner .carousel-item {
    height: 300px;
  }

  .ui-widget-content {
    width: 80%;
  }
  .small-font-size {
    font-size: 1.1rem;
  }

  section.rooms .content-box {
    height: 350px;
  }
  section.rooms .content-box .room-img {
    height: 100%;
  }

  section.rooms .content-box .wrapper {
    height: 55px;
  }

  section.rooms .overlay {
    height: 15%;
  }

  section.rooms .feature {
    gap: 10px;
  }

  section.feature .heading .img-bg {
    width: 140px;
    opacity: 0.5;
  }
  section.home-banner {
    margin-top: 70px;
  }
  section.video .container-fluid {
    position: relative;
    height: 300px;
  }
  section.all-room .card .feature, section.all-room .card2 .feature{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  section.banner.bg{
    height: 250px;
  }
  section.all-room .card h4, section.all-room .card2 h4{
    font-size: 1.5rem;
  }
}

@media only screen and (max-width: 418px) {
  section.rooms .feature {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  section.rooms .feature {
    flex-direction: column;
  }
  section.rooms .btn-3 {
    padding: 0.3rem 1.2rem;
    font-size: 1rem;
    vertical-align: center;
    font-weight: 400;
  }
  section.home-banner{
    margin-top: 64px;
  }
}

@media only screen and (max-width: 360px) {
  .banner-font-size {
    font-size: 1.2rem;
  }

  section.home-banner .carousel-item .content {
    padding: 0.3rem 0.7rem;
  }

  section.feedback {
    height: 700px;
  }
}