.hero {
  height: 70vh;
}
.hero.text-center {
  color: black !important;
}
.Room h1 {
  text-align: center;
  font-size: 80px;
  font-weight: bold;
}
.Room {
  text-align: center;
}

.Room img {
  display: block;
  margin: 0 auto;
}
.Room p {
  display: inline-block;
  margin-top: 10px;
  max-width: 600px;
  text-align: justify;
}
.col-md-6{
  margin-left: 200px;
  margin-top: 80px;
}
.col-md-7{
  margin-left: 200px;
  margin-top: 50px;
  margin-bottom: 50px;
}
.container-py-5{
  margin-top: 80px;
}
#bookingForm .form-control,
#bookingForm .form-select {
  height: 30px; 
  width: 500px;
  padding: 4px 8px; 
  font-size: 14px; 
}
#bookingForm .btn {
  width: 300px !important;
  display: block;
  margin: 0 auto;
}

.heading-large {
  font-size: 3.5rem; 
  font-weight: bold;
}
.offer-card {
  transition: transform 0.3s;
}

.offer-card:hover {
  transform: scale(1.05);

}


/* =========================
   MOBILE DEVICES (max 576px)
========================= */
@media (max-width: 576px) {

  .hero {
    height: 50vh;
    padding: 20px;
  }

  .Room h1 {
    font-size: 40px;
  }

  .Room img {
    width: 90%;
    height: auto;
  }

  .Room p {
    max-width: 90%;
    font-size: 14px;
  }

  #bookingForm .form-control,
  #bookingForm .form-select {
    width: 100%;
  }

  #bookingForm .btn {
    width: 100% !important;
  }

  .col-md-6,
  .col-md-7 {
    margin-left: 0;
    margin-top: 30px;
  }

  .heading-large {
    font-size: 2rem;
  }
}


/* =========================
   TABLETS (max 768px)
========================= */
@media (max-width: 768px) {

  .Room h1 {
    font-size: 55px;
  }

  .Room p {
    max-width: 80%;
  }

  #bookingForm .form-control,
  #bookingForm .form-select {
    width: 100%;
  }

  .col-md-6,
  .col-md-7 {
    margin-left: 0;
    margin-top: 40px;
  }

  .heading-large {
    font-size: 2.5rem;
  }
}


/* =========================
   SMALL LAPTOPS (max 992px)
========================= */
@media (max-width: 992px) {

  #bookingForm .form-control,
  #bookingForm .form-select {
    width: 100%;
  }

  .col-md-6,
  .col-md-7 {
    margin-left: 0;
  }
}
