* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  scroll-behavior: smooth;
}

p {
  font-family: "Nunito Sans", sans-serif;
}
h1,
h2,
h3 {
  font-family: "Playfair Display", serif;
}
button {
  border: none;
  background-color: transparent;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

nav {
  width: 100%;
  background-color: white;
  position: sticky;
  z-index: 1000;
  top: 0;
  font-family: "Nunito Sans", sans-serif;
}

.nav_top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px 100px;
  font-family: "Nunito Sans", sans-serif;
}

.nav_top_content1 {
  color: grey;
  cursor: pointer;
  transition: all 0.5s ease;
}

.nav_top_content1:hover {
  color: #b89458;
}

.nav_top_content2 {
  display: flex;
  gap: 15px;
  cursor: pointer;
}

.nav_top_content2 > p {
  color: #b89458;
}

.nav_drop_down {
  position: relative;
}
.drop_down_button button {
  border: 1px solid rgba(0, 0, 0, 0.432);
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.5s ease;
}
.drop_down_button button:hover {
  border: 1px solid #b89458;
}

.nav_drop_down:hover .drop_down_content {
  display: block;
}

.drop_down_button button::after {
  content: "\25BC";
  padding-left: 5px;
  font-size: 10px;
}

.drop_down_content a {
  display: block;
  padding: 5px 10px;
  font-size: 13px;
  color: black;
  z-index: 999;

  background-color: whitesmoke;
}

.drop_down_content a:hover {
  background-color: lightgrey;
}
.drop_down_content {
  border: 1px solid rgba(0, 0, 0, 0.432);
  display: none;
  position: absolute;
  min-width: 100%;
}

.navbar {
  padding: 10px 100px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.navlogo {
  width: 30%;

  cursor: pointer;
}

.navlinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.navlinks a {
  color: #000000;

  font-size: 14px;
  font-weight: bold;
  transition: all 0.4s;
}

.navlinks a:hover {
  color: #b89458;
}

.page_dropdown {
  position: relative;
}

.page_dropdown_head a {
  transition: all 0.4s;
}

.page_dropdown:hover .page_dropdown_content {
  display: block;
}
.page_dropdown_content {
  position: absolute;
  display: none;
  transition: all 0.4s;
}
.page_dropdown_content a {
  display: block;
  background-color: white;
  z-index: 999;
  font-size: 15px;
  font-weight: lighter;
  transition: all 0.4s;
  white-space: nowrap;
  padding: 10px 15px;
}

.page_dropdown_content a:hover {
  background-color: #b89458;
  color: white;
}

.navbar_button button {
  font-family: monospace;
  font-size: 18px;
  font-weight: bolder;
  background-color: #b89458;
  color: white;
  padding: 15px 20px;
  cursor: pointer;
}

.navbar_button button:hover {
  background-color: black;
}

.hero_section {
  height: 600px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("images/hero.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}

.hero_header h1 {
  font-size: 60px;
  padding-bottom: 10px;
}
.hero_content {
  width: 50%;
  padding-bottom: 30px;
}
.hero_button button {
  color: white;
  text-align: center;
  background-color: #b89458;
  padding: 15px 25px;
  transition: all 0.3s;
  font-size: 18px;
  border-radius: 2px;
}

.hero_button button:hover {
  background-color: #6c5527;
}

.hero_footer {
  background-color: #f0f0f0;
  padding: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 25px;
  position: absolute;
  bottom: -10%;
}

.hero_footer_content {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}

.hero_footer_content button {
  padding: 15px 10px;
  background-color: white;
  position: relative;
}

.hero_footer_button button {
  padding: 15px 50px;
  background-color: #b89458;
  color: white;
}

.hero_footer_button button:hover {
  background-color: #6c5527;
}

.hero_footer_content i {
  padding-left: 80px;
}

.abc i {
  font-size: 11px;
}

.about_section {
  padding: 150px 100px 100px 100px;
}

.about_header1 p {
  color: #b89458;
  text-align: center;
  font-size: 1.3em;
}

.about_header2 h1 {
  font-size: 3em;
  text-align: center;
  padding-top: 10px;
}

.about_head {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.about_header3 p {
  width: 70%;
  text-align: center;
  font-size: 15px;
  color: grey;
  position: relative;
  margin: 0 auto;
  padding: 20px;
}

.about_header3 p::after {
  content: "";
  width: 40px;
  height: 3px;
  position: absolute;
  background-color: #b89458;
  left: 45%;
  bottom: -20%;
  box-shadow: 1px 4px 10px #b895589a;
  transform: translateX(40%);
}

.about_container {
  padding-top: 100px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

.about_image {
  width: 60%;
}

.about_content {
  width: 35%;
}
.about_image1 {
  position: relative;
  height: 350px;
  width: 550px;
}

.about_image1 img {
  width: 100%;
  height: 100%;
}

.about_image2 {
  position: absolute;
  top: 15%;
  border: 10px solid white;
  height: 280px;
  width: 450px;
  left: 45%;
}

.about_image2 img {
  height: 100%;
  width: 100%;
}

.about_content_head h1 {
  font-size: 25px;
  text-align: left;
  padding-bottom: 10px;
}

.about_card1 img {
  height: 50px;
  width: 50px;
  filter: grayscale(1);
  transition: all 0.4s;
  cursor: pointer;
}

.about_card1 img:hover {
  filter: grayscale(0);
  transform: rotate(360deg);
}

.about_card1 {
  display: flex;
  align-items: center;

  padding-top: 25px;
}

.about_card1 h3 {
  padding-left: 25px;
}

.room_section {
  background-color: #f0f0f0;
  padding: 100px;
}

.room_head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.room_header1 p {
  color: #b89458;
  font-size: 20px;
}

.room_header2 h1 {
  padding-top: 20px;
}

.room_header3 p {
  width: 70%;
  text-align: center;
  margin: 0 auto;
  color: grey;
  padding: 10px 0 15px 0;
  position: relative;
}

.room_header3 p::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 3px;
  background-color: #b89458;
  left: 45%;
  bottom: -20%;
  box-shadow: 1px 4px 10px #b895589a;
  transform: translateX(40%);
}

.room_container {
  padding-top: 100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.room_card {
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.room_card_image {
  height: 250px;
  overflow: hidden;
}

.room_card_image img {
  width: 100%;
  height: 100%;
  transition: all 0.4s;
}
.room_card:hover img {
  transform: scale(1.3);
}
.room_content {
  padding: 40px;
}

.room_content1 h3 {
  text-align: center;
  font-size: 22px;
}

.room_content2 h3 {
  text-align: center;
  font-size: 22px;
  color: #b89458;
  padding-top: 10px;
}

.room_content3 {
  text-align: center;
  font-size: 14px;
  padding-top: 20px;
  color: grey;
}

.room_content4 {
  padding-top: 20px;
  display: flex;
  justify-content: center;
  gap: 15px;
}

.details {
  padding: 10px 20px;
  border: 1px solid black;
  transition: all 0.4s;
}

.details:hover {
  background-color: #b89458;
  color: white;
  border: 1px solid transparent;
  transform: translateY(5px);
}

.book {
  padding: 10px 25px;
  background-color: #b89458;
  color: white;
  border: 1px solid transparent;
  transition: all 0.4s;
}

.book:hover {
  color: #b89458;
  background-color: white;
  border: 1px solid #b89458;
  transform: translateY(5px);
}

.testimonial_section {
  padding: 0 0 0 100px;
  display: grid;
  grid-template-columns: repeat(1, 1fr) repeat(1, 2fr);
  gap: 30px;
}

.testimonial_header p {
  color: #b89458;
  padding: 100px 0 20px 0;
  font-size: 20px;
}

.testimonial_header h1 {
  font-size: 40px;
  font-family: "Playfair Display", serif;
  position: relative;
}

.testimonial_header h1::after {
  content: "";
  background-color: #b89458;
  position: absolute;
  width: 45px;
  height: 3px;
  left: 0;
  bottom: -25px;
  transform: translateX(0%);
}

.testimonial_content {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("images/testimonialbg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: white;
  background-attachment: fixed;
  padding: 100px 100px 100px 60px;
}

.testimonial_content i {
  color: #b89458;
  font-size: 60px;
  padding-bottom: 20px;
}

.testimonial_content1 p {
  font-weight: bold;
  font-size: 18px;
}

.testimonial_content2 {
  display: flex;
  align-items: center;
  padding-top: 30px;
}

.testimonial_profile {
  width: 100px;
  height: 100px;
  position: relative;

  border-radius: 50%;
}

.testimonial_profile img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}

.testimonial_profile_content {
  padding-left: 20px;
}
.testimonial_profile_content p:nth-child(1) {
  font-weight: bold;
  font-size: 20px;
}

.blog_section {
  padding: 100px;
}

.blog_head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.blog_head1 p {
  color: #b89458;
  font-size: 20px;
}

.blog_head2 h1 {
  padding-top: 16px;
  font-family: "Playfair Display", serif;
  font-size: 40px;
}

.blog_head3 {
  width: 70%;
  text-align: center;
  color: grey;
  font-size: 15px;
  font-family: "Playfair Display", serif;
  padding: 20px 0;
  position: relative;
}

.blog_head3::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 3px;
  background-color: #b89458;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.blog_container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  padding-top: 70px;
}

.blog_card {
  border: 1px solid rgba(128, 128, 128, 0.39);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

.blog_img {
  height: 250px;
  overflow: hidden;
}

.blog_img img {
  width: 100%;
  height: 100%;
  transition: all 0.4s;
}

.blog_card:hover .blog_img img {
  transform: scale(1.1);
}

.blog_card:hover .blog_content1 {
  color: #b89458;
}

.blog_card:hover .blog_content3 {
  color: #b89458;
}
.blog_content {
  padding: 30px 20px;
}

.blog_content1,
.blog_content3 {
  display: flex;
  align-items: center;
  transition: all 0.4s;
}

.blog_content2 h3 {
  font-family: "Playfair Display", serif;
  padding-top: 20px;
}
.blog_content3 {
  padding-top: 30px;
}

.blog_content1 p,
.blog_content3 p {
  padding-left: 15px;
}

.gallery_section {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  position: relative;
}

.gallery_card:nth-child(6) {
  filter: brightness(0.5);
}

.gallery_card img {
  width: 100%;
  height: 100%;
  transition: all 0.4s;
}

.gallery_card {
  overflow: hidden;
}

.gallery_section:hover img {
  transform: scale(1.1);
}
.gallery_button {
  padding: 10px 20px;
  background-color: #b89458;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
}

.gallery_button button {
  color: white;
  font-size: 17px;
}

.gallery_button:hover {
  background-color: #6c5527;
}

.footer_section * {
  font-family: "Playfair Display", serif;
}

.footer_section {
  background-color: #f0f0f0c7;
}

.footer_container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 70px 100px;
  gap: 35px;
}

.footer1 h1 {
  font-size: 30px;
  padding-bottom: 30px;
}
.footer1 p {
  font-size: 17px;
  color: rgba(0, 0, 0, 0.829);
}

.footer2 h1,
.footer3 h1,
.footer4 h1 {
  font-size: 25px;
  padding-bottom: 30px;
}

.footer2 p {
  padding-bottom: 15px;
}

.footer2 i {
  color: #b89458;
  padding-right: 7px;
}

.footer3 {
  display: grid;
  grid-template-columns: 1fr;
}

.footer3 a {
  padding-bottom: 15px;
  color: black;
  transition: all 0.4s;
}

.footer3 a:hover {
  color: #b89458;
}

.footer3 i {
  padding-right: 7px;
  font-size: 12px;
  font-weight: bold;
}

.footer4 {
  display: grid;
  grid-template-columns: 1fr;
}

.footer4 a {
  padding-bottom: 15px;
  color: black;
  transition: all 0.4s;
}

.footer4 a:hover {
  color: #b89458;
}

.footer4 p {
  font-size: 20px;
  font-weight: bold;
  padding-bottom: 25px;
}

.footer4_icons i {
  color: #b89458;
  padding-right: 10px;
  font-size: 17px;
  transition: all 0.6s;
}

.footer4_icons i:hover {
  transform: rotate(360deg);
  color: #a259ff;
}

.footer5 {
  padding: 20px 0;
  text-align: center;
  font-size: 14px;
}

.footer5 span {
  color: #b89458;
  transition: all 0.4s;
}

.footer5 span:hover {
  color: #a259ff;
}

.about_hero {
  height: 300px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("images/hero.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color: white;
  text-align: center;
}

.about_hero h1 {
  font-size: 50px;
  font-family: "Playfair Display", serif;
  padding: 100px 0;
}

.about_hero_content i {
  padding: 0 7px;
}

.about_hero_content a {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.87);
}

.about_room {
  padding: 100px;
}

.about_room_head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.about_room_head1 {
  color: #b89458;
  font-size: 20px;
}

.about_room_head2 h1 {
  font-family: "Playfair Display", serif;
  font-size: 50px;
  padding-top: 15px;
}

.about_room_head3 {
  width: 70%;
  text-align: center;
  color: grey;
  padding-top: 20px;
  position: relative;
}

.about_room_head3::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 3px;
  background-color: #b89458;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}

.about_room_container {
  padding-top: 100px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.about_room_image img {
  width: 100%;
}

.about_room_content1 h1 {
  font-family: "Playfair Display", serif;
}

.about_room_content2 {
  padding-top: 20px;
  color: #333333;
  font-size: 15px;
}

.about_room_content3 {
  padding-top: 30px;
}

.about_room_content3 p {
  padding-bottom: 15px;
  font-size: 15px;
}

.about_room_content3 i {
  color: #b89458;
  padding-right: 12px;
}

.about_room_content4 button {
  padding: 15px 20px;
  background-color: #b89458;
  color: white;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.4s;
}

.about_room_content4 button:hover {
  background-color: #6c5527;
}

.breakfast_container {
  padding: 0 100px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  align-items: center;
}

.breakfast_content1 h1 {
  font-family: "Playfair Display", serif;
  font-size: 35px;
  color: rgba(0, 0, 0, 0.801);
}

.breakfast_content2 {
  color: #333333;
  padding-top: 30px;
  font-size: 15px;
}

.breakfast_content3 {
  color: #333333;
  padding-top: 20px;
  font-size: 15px;
  padding-bottom: 40px;
}

.breakfast_content4 button {
  padding: 10px 15px;
  border: 1px solid rgba(0, 0, 0, 0.527);
  font-size: 16px;
  transition: all 0.4s;
}

.breakfast_content4 button:hover {
  background-color: #b89458;
  color: white;
  border: 1px solid transparent;
}
.breakfast_image {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.breakfast_image img {
  width: 100%;
}

.about_icons {
  margin: 100px 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("images/blog.jpeg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  height: 400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 200px;
  align-items: center;
}

.about_icons_card img {
  height: 100px;
  width: 100px;
  filter: grayscale(1);
  transition: all 0.4s;
}

.about_icons_card img:hover {
  filter: grayscale(0);
}
.about_icons_card {
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about_icons_card h1 {
  font-family: "Playfair Display", serif;
  font-size: 50px;
  padding-top: 15px;
}

.about_icons_card p {
  padding-top: 10px;
}

.standard_section {
  padding: 0 100px 100px 100px;
}

.standard_head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.standard_head1 {
  color: #b89458;
  font-size: 18px;
}

.standard_head2 h1 {
  font-family: "Playfair Display", serif;
  font-size: 40px;
  padding-top: 25px;
}

.standard_head3 {
  width: 70%;
  font-size: 15px;
  color: grey;
  text-align: center;
  padding-top: 20px;
  position: relative;
}

.standard_head3::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 3px;
  background-color: #b89458;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
}

.standard_container {
  padding-top: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.standard_card {
  position: relative;
  padding: 15px;
  transition: all 0.5s ease;
}

.standard_card::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -20px;
  height: 100%;
  width: 20px;
  background-color: #b1b1b1;
  display: none;
  transition: all 0.5s ease;
}

.standard_card::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  height: 20px;
  width: 100%;
  background-color: #b1b1b1;
  display: none;
  transition: all 0.5s ease;
}

.standard_container:hover ::before {
  display: block;
}

.standard_container:hover ::after {
  display: block;
}
.standard_container:hover .standard_card {
  transform: rotate(-2deg) skew(10deg) translate(20px, -15px);
  box-shadow: -50px 50px 50px rgba(0, 0, 0, 0.5);
}

.standard_container:hover .standard_card p {
  color: white;
}

.standard_container:hover .standard_card:nth-child(1) {
  background-color: #00bfff;
  color: white;
}

.standard_container:hover .standard_card:nth-child(2) {
  background-color: #ff6600;
  color: white;
}

.standard_container:hover .standard_card:nth-child(3) {
  background-color: #00c291;
  color: white;
}

.standard_container:hover .standard_card:nth-child(4) {
  background-color: #e91e63;
  color: white;
}

.standard_container:hover .standard_card:nth-child(5) {
  background-color: #a259ff;
  color: white;
}

.standard_container:hover .standard_card:nth-child(6) {
  background-color: #ff4081;
  color: white;
}
.standard_card h3 {
  font-family: "Playfair Display", serif;
  font-size: 20px;
}

.standard_card p {
  padding-top: 20px;
  color: #333333;
  font-size: 15px;
}
.standard_bottom {
  text-align: center;
  padding-top: 80px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.699);
}

.standard_bottom span {
  color: #b89458;
  transition: all 0.4s;
}

.standard_bottom span:hover {
  color: #a259ff;
}

.service_section1 {
  padding: 100px;
}

.service_section1_head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.service_section1_head1 {
  color: #b89458;
  font-size: 20px;
}

.service_section1_head2 {
  padding-top: 20px;
  font-size: 25px;
}

.service_section1_head3 {
  width: 70%;
  text-align: center;
  color: #333333;
  position: relative;

  padding-top: 20px;
}

.service_section1_head3::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 3px;
  background-color: #b89458;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
}

.service_section1_container {
  padding-top: 100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.service_section1_card img {
  width: 100px;
  height: 100px;
  filter: grayscale(1);
  transition: all 0.5s ease;
}

.service_section1_card {
  border: 1px solid #3333334b;
  padding: 35px 15px;
  text-align: center;
  transition: all 0.5s ease;
}

.service_section1_card h3 {
  padding-top: 20px;
}

.service_section1_card p {
  padding-top: 25px;
  font-size: 14px;
  color: #333333;
}

.service_section1_card::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -20px;
  height: 100%;
  width: 20px;
  background-color: #b1b1b1;
  display: none;
  transition: all 0.5s ease;
}

.service_section1_card::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  height: 20px;
  width: 100%;
  background-color: #b1b1b1;
  display: none;
  transition: all 0.5s ease;
}
.service_section1_container:hover .service_section1_card img {
  filter: grayscale(0);
}

.service_section1_container:hover {
  gap: 30px;
}

.service_section1_container:hover .service_section1_card p {
  color: white;
}
.service_section1_container:hover ::before {
  display: block;
}

.service_section1_container:hover ::after {
  display: block;
}
.service_section1_container:hover .service_section1_card {
  transform: translate(20px, -15px);
  box-shadow: -50px 50px 50px rgba(0, 0, 0, 0.5);
}

.service_section1_container:hover .service_section1_card:nth-child(1) {
  background-color: #00bfff;
  color: white;
}

.service_section1_container:hover .service_section1_card:nth-child(2) {
  background-color: #ff6600;
  color: white;
}

.service_section1_container:hover .service_section1_card:nth-child(3) {
  background-color: #00c291;
  color: white;
}

.service_section1_container:hover .service_section1_card:nth-child(4) {
  background-color: #e91e63;
  color: white;
}

.service_section1_container:hover .service_section1_card:nth-child(5) {
  background-color: #a259ff;
  color: white;
}

.service_section1_container:hover .service_section1_card:nth-child(6) {
  background-color: #ff4081;
  color: white;
}

.service_section2 {
  padding: 100px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
}

.service_section2_card1 {
  border: 1px solid rgba(128, 128, 128, 0.322);
  background-color: #f0f0f065;
  padding: 50px 30px;
  height: fit-content;
  transition: all 0.4s;
}

.service_section2_card1:hover {
  background-color: #f0f0f0d5;
}
.service_section2_card1 h1 {
  font-size: 30px;
  color: #333333;
}

.service_section2_card1 p {
  font-size: 15px;
  color: #333333;
  padding-top: 25px;
}

.service_section2_card1 button {
  background-color: #b89458;
  color: white;
  padding: 12px 20px;
  margin-top: 20px;
  font-size: 17px;
  transition: all 0.4s;
}

.service_section2_card1 button:hover {
  background-color: #6c5527;
}

.service_section2_card2 h1 {
  font-size: 30px;
  color: #333333;
}

.service_section2_card2 p {
  font-size: 15px;
  color: #333333;
  padding-top: 10px;
}

.service_section2_card2 span {
  color: #b89458;
  padding-right: 12px;
  font-size: 20px;
}

.service_section2_card2 button {
  background-color: white;
  border: 1px solid black;
  padding: 12px 20px;
  margin-top: 20px;
  font-size: 17px;
  transition: all 0.4s;
}

.service_section2_card2 button:hover {
  background-color: #b89458;
  color: white;
  border: 1px solid transparent;
}

.room_section1 {
  padding: 100px;
  display: grid;
  grid-template-columns: repeat(1, 2fr) repeat(1, 1fr);
  gap: 30px;
}

.room_section1_card1 {
  border: 1px solid rgba(128, 128, 128, 0.158);
  padding: 25px;
}

.room_section1_image img {
  width: 100%;
  object-fit: cover;
}

.room_card1_head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 15px;
}

.room_card1_head1 h1 {
  font-size: 30px;
  color: #333333;
}

.room_card1_head1 p {
  font-size: 17px;
  color: #333333;
}

.start {
  font-weight: bold;
}

.dollar {
  color: #b89458;
  font-size: 35px;
  font-family: "Playfair Display", serif;
}

.room_head_button button {
  padding: 10px 17px;
  background-color: #b89458;
  color: white;
  font-size: 20px;
  transition: all 0.4s;
}

.room_head_button button:hover {
  background-color: #6c5527;
}

.room_card1_amenties {
  padding: 50px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.room_card1_amenties i {
  color: #b89458;
  padding-right: 10px;
}

.room_card1_content h1 {
  font-size: 25px;
  color: #333333;
}

.room_card1_content p {
  color: #333333;
  font-size: 15px;
  padding-top: 15px;
}

.room_section1_card2 {
  background-color: #2e343b;
  padding: 30px;
  height: fit-content;
}

.room_section1_card2 label,
.room_section1_card2 h1 {
  color: white;
}

.room_card2_head h1 {
  font-size: 22px;
  text-align: center;
  padding-bottom: 10px;
}

.room_card2_inputs {
  padding: 15px 0;
}

.room_inputs {
  display: grid;
  grid-template-columns: 1fr;
  padding-bottom: 20px;
}

.room_inputs label {
  padding-bottom: 5px;
  color: #ffffffb3;
  font-size: 15px;
  font-family: "Poppins", sans-serif;
}

.room_inputs input {
  border: none;
  background-color: transparent;
  border: 1px solid #8c939b;
  padding: 10px;
  transition: all 0.5s ease;
  color: #b0b0b0;
}
.room_inputs input::placeholder {
  color: #b0b0b0;
}

.room_inputs input[type="datetime-local"]::-webkit-datetime-edit {
  color: #b0b0b0;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.room_inputs input:focus {
  border: 1px solid #b89458;
  outline: none;
}

.room_checkbox h1 {
  font-size: 15px;
  padding-bottom: 15px;
}

.room_check {
  padding-bottom: 10px;
}
.room_check label {
  padding-left: 10px;
  font-size: 14px;
  color: #ffffffb3;
}

.room_range p {
  color: white;

  font-size: 15px;
  padding: 15px 0;
}

.room_range label:nth-of-type(1) {
  padding-right: 10px;
}

.room_range label:nth-of-type(2) {
  padding-left: 10px;
}

.room_button input {
  color: white;
  background-color: #b89458;
  border: none;
  padding: 10px 20px;
  width: 100%;
  font-size: 16px;
  margin-top: 20px;
  transition: all 0.4s;
}

.room_button input:hover {
  background-color: #6c5527;
}
.room_section1_card3 {
  background-color: #f0f0f065;
  padding: 30px;
}

.room_card3_head h1 {
  color: #333333;
  font-size: 20px;
}

.room_card3_profile {
  display: flex;
  padding: 30px 0 50px 0;
  gap: 30px;
  align-items: center;
}

.profile1_img img {
  border-radius: 50%;
  border: 5px solid #b89458;
}

.profile1_content h1 {
  color: #333333;
  font-size: 20px;
}

.profile1_content p {
  color: #333333;
  font-size: 15px;
  padding-top: 15px;
}

.room_message h1 {
  font-size: 20px;
  color: #333333;
  padding: 30px 0 20px 0;
}

.room_message_inputs {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.room_message_inputs input {
  padding: 10px;
  border: none;
  border: 1px solid rgba(0, 0, 0, 0.205);
  transition: all 0.5s ease;
}

.room_message_inputs input:focus {
  border: 1px solid #b89458;
  outline: none;
}
.room_message_inputs textarea {
  padding: 10px;
  border: none;
  border: 1px solid rgba(0, 0, 0, 0.205);
  transition: all 0.5s ease;
}

.room_message_inputs textarea:focus {
  border: 1px solid #b89458;
  outline: none;
}

.room_message_inputs input[type="submit"] {
  padding: 10px 20px;
  background-color: #b89458;
  color: white;
  font-size: 16px;
  width: fit-content;
  font-weight: bold;
  border: none;
}

.room_message_inputs input[type="submit"]:hover {
  background-color: #6c5527;
}

.select_room_section1 {
  display: flex;
  justify-content: space-between;
  padding: 100px;
}

.select_room_section1 p {
  color: black;
  font-size: 14px;
  padding-top: 30px;
}

.step *::before,
.step *::after {
  content: none !important;
  display: none !important;
}
.circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #ccc;
  transition: all 0.5s ease;
}
.line {
  height: 2px;
  width: 500px;
  background-color: #ccc;
  margin-left: 10px;
}

.def {
  display: flex;
  align-items: center;
  justify-content: center;
}

.step1 .circle {
  background-color: #b89458;
}

.step:hover .circle {
  background-color: transparent;
  border: 2px solid #b89458;
}

.select_room_footer {
  background-color: #2e343b;
  padding: 50px;
  margin: 0 100px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.select_room_footer_content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.select_room_footer_content button {
  padding: 15px 10px;
  background-color: white;
  position: relative;
}

.select_room_footer_button button {
  padding: 15px 55px;
  background-color: #b89458;
  color: white;
}

.select_room_footer_button button:hover {
  background-color: #6c5527;
}

.select_room_footer_content i {
  padding-left: 80px;
}

.select_room_section2 {
  padding: 50px 100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}
.select_room_card {
  position: relative;
  overflow: hidden;
}

.select_room_card::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid white;
  top: 20px;
  right: 20px;
  transform: translateX(20%);
}

.select_room_card:nth-child(1)::before {
  content: "";
  position: absolute;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background-color: #b89458;
  top: 26px;
  right: 25px;
  transform: translateX(25%);
}

.select_room_image {
  width: 100%;
  height: 100%;
}

.off {
  position: absolute;

  background-color: #b89458;
  color: white;
  top: 20px;
  left: -30px;
  transform: translateX(30px);
  padding: 5px 45px;
  transform: rotate(-40deg);
  transition: all 0.3s;
}
.off h3 {
  font-family: "poppins", serif;
  font-size: 17px;
}
.select_room_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.select_room_card:hover .select_room_content {
  opacity: 1;
}

.select_room_card:hover .off {
  opacity: 0;
}
.select_room_content {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));

  color: white;
  padding: 30px 25px;
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  opacity: 0;
}

.select_room_card:hover .select_room_content h3 {
  transform: translateY(0%);
}

.select_room_content h3 {
  font-family: "Montserrat", sans-serif;
  transform: translateY(100%);
  transition: all 0.6s ease;
}

.select_room_content > p {
  padding-top: 30px;
}

.select_room_card:hover .select_room_content p {
  transform: translateY(0%);
}
.select_room_content p {
  font-size: 14px;
  transform: translateY(100%);

  transition: all 0.6s ease;
}

.select_room_card:hover .select_room_icons {
  transform: translateY(0%);
}
.select_room_icons {
  padding-top: 30px;
  transform: translateY(100%);
  transition: all 0.6s ease;
}

.select_room_icons span {
  padding-right: 5px;
}

.select_room_card:hover .select_room_bottom {
  transform: translateY(0%);
}

.select_room_bottom {
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  transform: translateY(100%);

  transition: all 0.6s ease;
}

.select_room_bottom span {
  font-size: 25px;
}

.reservation_details_section1 {
  display: flex;
  justify-content: space-between;
  padding: 100px;
}

.reservation_details_section1 p {
  color: black;
  font-size: 14px;
  padding-top: 30px;
}

.reservation *::before,
.reservation *::after {
  content: none !important;
  display: none !important;
}
.circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #ccc;
  transition: all 0.5s ease;
}
.line {
  height: 2px;
  width: 500px;
  background-color: #ccc;
  margin-left: 10px;
}

.def {
  display: flex;
  align-items: center;
  justify-content: center;
}

.steper1 .circle {
  border: 2px solid #b89458;
  background-color: transparent;
}

.steper2 .circle {
  background-color: #b89458;
}

.reservation:hover .circle {
  background-color: transparent;
  border: 2px solid #b89458;
}

.reservation_section2 {
  padding: 0 100px 100px 100px;
  display: grid;
  grid-template-columns: repeat(1, 1fr) repeat(1, 2fr);
  gap: 30px;
}

.reservation_card1 {
  background-color: #1f1f1f;
  padding: 30px 25px;
}

.reservation_card1_head h1 {
  color: white;
  font-size: 25px;
}

.reservation_card1_table {
  background-color: white;
  padding: 20px 20px 20px 40px;
  margin-top: 25px;
  border-radius: 6px;
}

.card1_table_head {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.card1_table_right1 img {
  width: 100%;
  border-radius: 6px;
}

.reservation_card1 p {
  color: #333333;
  font-size: 15px;
}

.card1_table_right1 {
  padding-left: 20px;
  border-bottom: 1px solid #2e343b48;
  padding-bottom: 15px;
}

.card1_table_right1 p {
  color: #b89458;
}
.card1_table_left1 {
  border-right: 1px solid #2e343b48;
  border-bottom: 1px solid #2e343b48;
  padding-left: 10px;
  padding-bottom: 15px;
}
.card1_table_left1 p {
  padding-top: 25px;
}

.card1_table_content1,
.card1_table_content2,
.card1_table_content3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.card1_table_right2 {
  padding-left: 20px;
  border-bottom: 1px solid #2e343b48;
  padding-bottom: 15px;
}

.card1_table_left2 {
  border-right: 1px solid #2e343b48;
  border-bottom: 1px solid #2e343b48;
  padding-left: 10px;
  padding-bottom: 15px;
}

.card1_table_content3 .card1_table_left2 {
  border-bottom: none;
}

.card1_table_content3 .card1_table_right2 {
  border-bottom: none;
}

.reservation_card1_bottom {
  padding-top: 30px;
}

.card1_bottom_head h1 {
  font-size: 20px;
  color: white;
}

.card1_bottom_grid {
  background-color: white;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 6px;
  align-items: center;
  margin-top: 15px;
}

.card1_bottom_grid1,
.card1_bottom_grid2 {
  padding: 30px 15px 40px 15px;
  border-right: 1px solid #2e343b48;
  text-align: center;
}

.card1_bottom_grid1 p,
.card1_bottom_grid2 p,
.card1_bottom_grid3 p {
  color: black;
  font-weight: bolder;
}

.card1_bottom_grid1 span,
.card1_bottom_grid2 span {
  font-size: 25px;
  display: block;
  text-align: center;
}

.card1_bottom_grid3 {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}

.bottom_grid3_up {
  border-bottom: 1px solid #2e343b48;
  text-align: center;
}

.bottom_grid3_down {
  text-align: center;
}

.bottom_grid3_up p,
.bottom_grid3_down p {
  font-size: 20px;
  padding: 10px;
}

.bottom_grid3_down p {
  color: #b89458;
}

.card1_payments {
  padding-top: 25px;
  display: flex;
  justify-content: space-between;
}

.card1_payments img {
  border-radius: 5px;
}

.reservation_card2 {
  background-color: #fafafa;
  padding: 30px;
  height: fit-content;
}

.reservation_card2_head h1 {
  color: #2e343b;
  font-size: 25px;
}

.reservation_card2_message {
  padding-top: 40px;
}

.card2_message_row1,
.card2_message_row2,
.card2_message_row3,
.card2_message_row4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.message_row1_column1 input {
  padding: 13px;
  border: none;
  border: 1px solid rgba(128, 128, 128, 0.507);
  width: 100%;
  transition: all 0.5s ease;
}

.message_row1_column2 input {
  padding: 13px;
  border: none;
  border: 1px solid rgba(128, 128, 128, 0.507);
  width: 100%;
  transition: all 0.5s ease;
}

.message_row1_column2 input:focus,
.message_row1_column1 input:focus,
.card2_message_row5 textarea:focus {
  outline: none;
  border: 1px solid #b89458;
}

.card2_message_row5 textarea {
  padding: 13px;
  border: none;
  border: 1px solid rgba(128, 128, 128, 0.507);
  width: 100%;
  transition: all 0.5s ease;
}

.message_row1_column1 {
  padding-bottom: 20px;
}

.card2_submit input {
  padding: 12px 20px;
  background-color: #b89458;
  color: white;
  border: none;
  font-size: 16px;
  margin-top: 20px;
}

.card2_submit {
  display: flex;
  justify-content: flex-end;
}

.blog_section1 {
  padding: 50px 100px;
  display: grid;
  grid-template-columns: repeat(1, 1fr) repeat(1, 2fr);
  gap: 30px;
}

.blog_Section1_card1 {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-top: 5px solid #b89458;
  padding: 30px 25px;
}

.blog_Section1_card1 > h3 {
  padding-bottom: 30px;
  color: #2e343b;
}

.blog_card1_image {
  display: flex;
  gap: 25px;
}

.blog_card1_image img {
  height: 80px;
  width: 80px;
}

.blog_card1_image_content h3 {
  font-size: 16px;
  cursor: pointer;
}

.blog_card1_image_content p {
  padding-top: 12px;
  font-size: 13px;
  color: #2e343b;
}

.blog_card1_content1 {
  padding-bottom: 15px;
}

.blog_card1_categories {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-top: 5px solid #b89458;
  padding: 30px 25px;
  margin-top: 25px;
}

.blog_card1_categories > h3 {
  color: #2e343b;
  padding-bottom: 20px;
}

.blog_card1_categories a {
  display: block;
  color: #2e343bbe;
  padding-bottom: 10px;
  transition: all 0.4s ease;
  font-size: 14px;
}

.blog_card1_categories i {
  color: black;
  font-size: 14px;
  padding-right: 10px;
}

.blog_card1_categories a:hover {
  color: #b89458;
  transform: translateX(4px);
}

.blog_card1_cloud {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-top: 5px solid #b89458;
  padding: 30px 25px;
  margin-top: 25px;
}

.blog_card1_cloud > h3 {
  color: #2e343b;
  padding-bottom: 20px;
}

.blog_card1_cloud a {
  padding: 10px 14px;
  border: 1px solid rgba(128, 128, 128, 0.37);
  color: rgba(0, 0, 0, 0.534);
  font-size: 14px;
  text-align: center;
  transition: all 0.4s ease;
}

.cloud_links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.blog_card1_cloud a:hover {
  background-color: #b89458;
  color: white;
  border: 1px solid transparent;
}

.Section1_right_card1 {
  border: 1px solid rgba(128, 128, 128, 0.37);
}

.right_card1_image img {
  width: 100%;
  height: 400px;
  cursor: pointer;
}

.card1_main_content {
  padding: 30px 25px;
}

.right_card1_head1 h1 {
  font-size: 25px;
  color: #2e343b;
  cursor: pointer;
  transition: all 0.5s ease;
}

.right_card1_head1 h1:hover {
  color: #b89458;
}

.right_card1_head2 {
  padding-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.right_card1_head2 p {
  font-size: 14px;
  color: #2e343b;
}

.right_card1_head2 i {
  color: #b89458;
  padding-right: 10px;
}

.right_card1_head2 span {
  cursor: pointer;
  transition: all 0.4s ease;
}

.right_card1_head2 span:hover {
  color: #b89458;
}

.right_card1_content {
  padding-top: 25px;
  font-size: 14px;
  color: #2e343b;
}

.right_card1_button button {
  padding: 10px 20px;
  background-color: #b89458;
  color: white;
  margin-top: 30px;
  transition: all 0.4s;
}

.right_card1_button button:hover {
  background-color: #6c5527;
}

.section1_right_card5 {
  border: 1px solid rgba(128, 128, 128, 0.37);
  margin-top: 25px;
}

.right_card5_image img {
  width: 100%;
  cursor: pointer;
}

.card5_main_content {
  padding: 30px 25px;
}

.right_card5_head1 h1 {
  font-size: 25px;
  color: #2e343b;
  cursor: pointer;
  transition: all 0.5s ease;
}

.right_card5_head1 h1:hover {
  color: #b89458;
}

.right_card5_head2 {
  padding-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.right_card5_head2 p {
  font-size: 14px;
  color: #2e343b;
}

.right_card5_head2 i {
  color: #b89458;
  padding-right: 10px;
}

.right_card5_head2 span {
  cursor: pointer;
  transition: all 0.4s ease;
}

.right_card5_head2 span:hover {
  color: #b89458;
}

.right_card5_content {
  padding-top: 25px;
  font-size: 14px;
  color: #2e343b;
}

.right_card5_button button {
  padding: 10px 20px;
  background-color: #b89458;
  color: white;
  margin-top: 30px;
  transition: all 0.4s;
}

.right_card5_button button:hover {
  background-color: #6c5527;
}

.section1_right_card2 {
  border: 1px solid rgba(128, 128, 128, 0.37);
  margin-top: 25px;
}

.card2_main_content {
  padding: 30px 25px;
}

.right_card2_head1 h1 {
  font-size: 25px;
  color: #2e343b;
  cursor: pointer;
  transition: all 0.5s ease;
}

.right_card2_head1 h1:hover {
  color: #b89458;
}

.right_card2_head2 {
  padding-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.right_card2_head2 p {
  font-size: 14px;
  color: #2e343b;
}

.right_card2_head2 i {
  color: #b89458;
  padding-right: 10px;
}

.right_card2_head2 span {
  cursor: pointer;
  transition: all 0.4s ease;
}

.right_card2_head2 span:hover {
  color: #b89458;
}

.right_card2_content {
  padding-top: 25px;
  font-size: 14px;
  color: #2e343b;
}

.right_card2_button button {
  padding: 10px 20px;
  background-color: #b89458;
  color: white;
  margin-top: 30px;
  transition: all 0.4s;
}

.right_card2_button button:hover {
  background-color: #6c5527;
}

.section1_right_card3 {
  border: 1px solid rgba(128, 128, 128, 0.37);
  margin-top: 25px;
}

.card3_main_content {
  padding: 30px 25px;
}

.right_card3_head1 h1 {
  font-size: 25px;
  color: #2e343b;
  cursor: pointer;
  transition: all 0.5s ease;
}

.right_card3_head1 h1:hover {
  color: #b89458;
}

.right_card3_head2 {
  padding-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.right_card3_head2 p {
  font-size: 14px;
  color: #2e343b;
}

.right_card3_head2 i {
  color: #b89458;
  padding-right: 10px;
}

.right_card3_head2 span {
  cursor: pointer;
  transition: all 0.4s ease;
}

.right_card3_head2 span:hover {
  color: #b89458;
}

.right_card3_content {
  padding-top: 25px;
  font-size: 14px;
  color: #2e343b;
}

.right_card3_button button {
  padding: 10px 20px;
  background-color: #b89458;
  color: white;
  margin-top: 30px;
  transition: all 0.4s;
}

.right_card3_button button:hover {
  background-color: #6c5527;
}

.section1_right_card4 {
  border: 1px solid rgba(128, 128, 128, 0.37);
  margin-top: 25px;
}
.youtube iframe {
  width: 100%;
  height: 400px;
}

.card4_main_content {
  padding: 30px 25px;
}

.right_card4_head1 h1 {
  font-size: 25px;
  color: #2e343b;
  cursor: pointer;
  transition: all 0.5s ease;
}

.right_card4_head1 h1:hover {
  color: #b89458;
}

.right_card4_head2 {
  padding-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.right_card4_head2 p {
  font-size: 14px;
  color: #2e343b;
}

.right_card4_head2 i {
  color: #b89458;
  padding-right: 10px;
}

.right_card4_head2 span {
  cursor: pointer;
  transition: all 0.4s ease;
}

.right_card4_head2 span:hover {
  color: #b89458;
}

.right_card4_content {
  padding-top: 25px;
  font-size: 14px;
  color: #2e343b;
}

.right_card4_button button {
  padding: 10px 20px;
  background-color: #b89458;
  color: white;
  margin-top: 30px;
  transition: all 0.4s;
}

.right_card4_button button:hover {
  background-color: #6c5527;
}

.next_page {
  margin: 50px 0;
}

.next_page a {
  padding-right: 15px;
  color: black;
  padding: 5px 8px;
  border: 1px solid transparent;
}

.next_page a:nth-child(2) {
  border: 1px solid #b89458;
}

.next_page a:hover {
  border: 1px solid #b89458;
}
@media screen and (max-width: 500px) {
  nav {
    position: static;
  }

  .nav_top,
  .navbar {
    padding: 15px;
  }
  .navbar {
    flex-direction: column;
    gap: 15px;
  }

  .navlinks {
    justify-content: flex-start;
  }

  .navlogo,
  .navbar_button,
  .hero_content {
    width: 100%;
  }

  .nav_top_content1 {
    padding-bottom: 15px;
  }
  .hero_section {
    height: auto;
    padding: 100px 0;
  }

  .hero_header {
    padding-top: 20px;
  }

  .hero_header h1 {
    font-size: 30px;
  }

  .hero_button button {
    font-size: 15px;
  }

  .hero_button {
    padding-bottom: 20px;
  }

  .hero_footer {
    bottom: -80%;
    padding: 20px;
    flex-direction: column;
  }

  .hero_footer_content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .about_section {
    margin-top: 400px;
    padding: 15px;
  }

  .about_header3 p {
    width: 100%;
  }

  .about_content,
  .about_image {
    width: 100%;
  }
  .about_image2 {
    left: 35%;
    top: 40px;
    width: 80%;
  }

  .about_image1 {
    width: 80%;
  }

  .about_container {
    flex-direction: column;
  }

  .room_section {
    padding: 15px;
  }

  .room_header3 p {
    width: 100%;
  }
  .room_header3 p::after {
    left: 35%;
  }

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

  .testimonial_section {
    padding: 15px;
    grid-template-columns: 1fr;
  }

  .testimonial_content {
    padding: 100px 25px;
    margin-top: 20px;
  }

  .blog_section {
    padding: 15px;
  }

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

  .blog_head2 h1 {
    font-size: 25px;
  }

  .blog_head3 {
    width: 100%;
  }

  .gallery_section {
    grid-template-columns: 1fr;
    padding-top: 50px;
  }

  .footer_container {
    grid-template-columns: 1fr;
    padding: 15px;
  }

  .about_hero {
    height: auto;
    padding-bottom: 20px;
  }

  .about_room {
    padding: 15px;
  }

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

  .about_room_head2 h1 {
    font-size: 25px;
  }

  .about_room_head3 {
    width: 100%;
  }

  .breakfast_container {
    grid-template-columns: 1fr;
    padding: 15px;
  }

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

  .about_icons {
    height: auto;
    padding: 100px 15px;
    gap: 25px;
  }

  .about_icons_card {
    width: 100%;
  }

  .standard_section {
    padding: 15px;
  }

  .standard_head3 {
    width: 100%;
  }

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

  .service_section1 {
    padding: 15px;
    padding-top: 50px;
  }

  .service_section1_head2 {
    font-size: 20px;
    text-align: center;
  }
  .service_section1_head3 {
    width: 100%;
  }

  .service_section1_container {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .service_section2 {
    grid-template-columns: 1fr;
    padding: 15px;
    padding-top: 50px;
  }

  .service_section2_card1 {
    padding: 15px;
  }

  .service_section2_card2 {
    padding: 15px;
  }
  .service_section2_card2 span {
    padding-right: 5px;
  }

  .room_section1 {
    padding: 10px;
    grid-template-columns: 1fr;
  }

  .room_section1_card1 {
    padding: 10px;
  }

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

  .room_section1_card3 {
    padding: 15px;
  }

  .room_card3_profile {
    flex-wrap: wrap;
  }

  .select_room_section1 {
    padding: 15px;
    padding-top: 40px;
  }

  .line {
    display: none;
  }

  .select_room_footer {
    margin: 15px;
  }

  .select_room_section2 {
    padding: 15px;
    grid-template-columns: 1fr;
    padding-bottom: 30px;
  }

  .reservation_details_section1 {
    padding: 15px;
    padding-top: 40px;
  }

  .reservation_section2 {
    padding: 15px;
    grid-template-columns: 1fr;
  }

  .card2_message_row1,
  .card2_message_row2,
  .card2_message_row3,
  .card2_message_row4 {
    grid-template-columns: 1fr;
  }

  .message_row1_column1 {
    padding-bottom: 0;
  }

  .message_row1_column2 {
    padding-bottom: 20px;
  }

  .card2_submit {
    justify-content: center;
  }

  .blog_section1 {
    padding: 15px;
    grid-template-columns: 1fr;
  }
  .cloud_links {
    grid-template-columns: 1fr;
  }
  .blog_card1_cloud h3 {
    text-align: center;
  }
  .right_card1_image img {
    height: 100%;
  }
}

@media screen and (min-width: 501px) and (max-width: 800px) {
  nav {
    position: static;
  }

  .nav_top,
  .navbar,
  .hero_section {
    padding: 25px;
  }

  .navbar {
    flex-direction: column;
    gap: 15px;
  }

  .navlinks {
    align-items: flex-start;
  }
  .navlogo,
  .navlinks,
  .navbar_button,
  .hero_content {
    width: 100%;
  }

  .nav_top_content1 {
    padding-bottom: 15px;
  }

  .hero_section {
    height: auto;
    padding: 100px 20px;
  }

  .hero_header {
    padding-top: 20px;
  }

  .hero_header h1 {
    font-size: 40px;
  }

  .hero_button button {
    font-size: 18px;
  }

  .hero_button {
    padding-bottom: 20px;
  }

  .hero_footer {
    transform: translateY(50%);
    margin: 0 30px;
    padding: 20px;
  }

  .hero_footer_content {
    width: 100%;
    display: flex;

    justify-content: center;
    align-items: center;
  }

  .about_section {
    padding: 25px;
    margin-top: 200px;
  }

  .about_header3 p {
    width: 100%;
  }

  .about_image1 {
    width: 380px;
    height: 350px;
  }

  .about_image2 {
    left: 35%;
    top: 40px;
    width: 80%;
  }

  .about_image,
  .about_content {
    width: 100%;
  }

  .about_container {
    flex-direction: column;
  }

  .room_section {
    padding: 25px;
  }

  .room_header3 p {
    width: 100%;
  }

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

  .testimonial_section {
    padding: 25px;
    grid-template-columns: 1fr;
  }

  .testimonial_content {
    padding: 100px 30px;
    margin-top: 20px;
  }

  .blog_section {
    padding: 25px;
  }

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

  .blog_head2 h1 {
    font-size: 25px;
  }

  .blog_head3 {
    width: 100%;
  }

  .gallery_section {
    grid-template-columns: 1fr 1fr;
    padding-top: 50px;
  }

  .footer_container {
    grid-template-columns: repeat(2, 1fr);
    padding: 25px;
  }

  .about_hero {
    height: auto;
    padding-bottom: 25px;
  }

  .about_room {
    padding: 15px;
  }

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

  .about_room_head2 h1 {
    font-size: 30px;
  }

  .about_room_head3 {
    width: 100%;
  }

  .breakfast_container {
    grid-template-columns: 1fr;
    padding: 25px;
  }

  .about_icons {
    height: auto;
    padding: 100px 15px;
    gap: 25px;
  }

  .about_icons_card {
    width: 45%;
  }

  .standard_section {
    padding: 25px;
  }

  .standard_head3 {
    width: 100%;
  }

  .standard_container {
    grid-template-columns: repeat(2, 1fr);
  }

  .service_section1 {
    padding: 25px;
    padding-top: 50px;
  }

  .service_section1_head2 {
    font-size: 25px;
    text-align: center;
  }
  .service_section1_head3 {
    width: 100%;
  }

  .service_section1_container {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }

  .service_section2 {
    grid-template-columns: 1fr;
    padding: 25px;
    padding-top: 50px;
  }

  .service_section2_card1 {
    padding: 25px;
  }

  .service_section2_card2 {
    padding: 25px;
  }
  .service_section2_card2 span {
    padding-right: 8px;
  }

  .room_section1 {
    padding: 15px;
    grid-template-columns: 1fr;
  }

  .room_section1_card1 {
    padding: 15px;
  }

  .room_card1_amenties {
    grid-template-columns: repeat(2, 1fr);
  }

  .room_section1_card3 {
    padding: 15px;
  }

  .room_card3_profile {
    flex-wrap: wrap;
  }

  .select_room_section1 {
    padding: 25px;
    padding-top: 40px;
  }

  .line {
    display: none;
  }

  .select_room_footer {
    margin: 25px;
  }

  .select_room_section2 {
    padding: 15px;
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: 30px;
  }

  .reservation_details_section1 {
    padding: 25px;
    padding-top: 40px;
  }

  .reservation_section2 {
    padding: 25px;
    grid-template-columns: 1fr;
  }

  .card2_message_row1,
  .card2_message_row2,
  .card2_message_row3,
  .card2_message_row4 {
    grid-template-columns: 1fr 1fr;
  }

  .message_row1_column1 {
    padding-bottom: 0;
  }

  .message_row1_column2 {
    padding-bottom: 20px;
  }

  .card2_submit {
    justify-content: center;
  }

  .blog_section1 {
    padding: 25px;
    grid-template-columns: 1fr;
  }
  .cloud_links {
    grid-template-columns: 1fr 1fr;
  }
  .blog_card1_cloud h3 {
    text-align: center;
  }
  .right_card1_image img {
    height: 100%;
  }
}

@media screen and (min-width: 801px) and (max-width: 1024px) {
  nav {
    position: static;
  }

  .nav_top,
  .navbar,
  .hero_section {
    padding: 25px 80px;
  }

  .navbar {
    gap: 15px;
  }

  .navlinks {
    align-items: flex-start;
  }
  .hero_content {
    width: 100%;
  }

  .nav_top_content1 {
    padding-bottom: 15px;
  }

  .hero_section {
    height: auto;
    padding: 100px 20px;
  }

  .hero_header {
    padding-top: 20px;
  }

  .hero_header h1 {
    font-size: 40px;
  }

  .hero_button button {
    font-size: 18px;
  }

  .hero_button {
    padding-bottom: 20px;
  }

  .hero_footer {
    transform: translateY(50%);
    margin: 0 30px;
    padding: 20px;
  }

  .hero_footer_content {
    width: 100%;
    display: flex;

    justify-content: center;
    align-items: center;
  }

  .about_section {
    padding: 25px;
    margin-top: 200px;
  }

  .about_header3 p {
    width: 100%;
  }

  .about_image1 {
    width: 380px;
    height: 350px;
  }

  .about_image2 {
    left: 35%;
    top: 40px;
    width: 80%;
  }

  .room_section {
    padding: 25px;
  }

  .room_header3 p {
    width: 100%;
  }

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

  .testimonial_section {
    padding: 25px;
    grid-template-columns: 1fr 1fr;
  }

  .testimonial_content {
    padding: 100px 30px;
    margin-top: 20px;
  }

  .blog_section {
    padding: 25px;
  }

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

  .blog_head2 h1 {
    font-size: 25px;
  }

  .blog_head3 {
    width: 100%;
  }

  .gallery_section {
    grid-template-columns: 1fr 1fr;
    padding-top: 50px;
  }

  .footer_container {
    grid-template-columns: repeat(2, 1fr);
    padding: 25px;
  }

  .about_hero {
    height: auto;
    padding-bottom: 25px;
  }

  .about_room {
    padding: 15px;
  }

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

  .about_room_head2 h1 {
    font-size: 30px;
  }

  .about_room_head3 {
    width: 100%;
  }

  .breakfast_container {
    grid-template-columns: 1fr;
    padding: 25px;
  }

  .about_icons {
    height: auto;
    padding: 100px 15px;
    gap: 25px;
  }

  .about_icons_card {
    width: 45%;
  }

  .standard_section {
    padding: 25px;
  }

  .standard_head3 {
    width: 100%;
  }

  .standard_container {
    grid-template-columns: repeat(2, 1fr);
  }

  .service_section1 {
    padding: 25px;
    padding-top: 50px;
  }

  .service_section1_head2 {
    font-size: 25px;
    text-align: center;
  }
  .service_section1_head3 {
    width: 100%;
  }

  .service_section1_container {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }

  .service_section2 {
    grid-template-columns: 1fr;
    padding: 25px;
    padding-top: 50px;
  }

  .service_section2_card1 {
    padding: 25px;
  }

  .service_section2_card2 {
    padding: 25px;
  }
  .service_section2_card2 span {
    padding-right: 8px;
  }

  .room_section1 {
    padding: 15px;
    grid-template-columns: 1fr;
  }

  .room_section1_card1 {
    padding: 15px;
  }

  .room_card1_amenties {
    grid-template-columns: repeat(2, 1fr);
  }

  .room_section1_card3 {
    padding: 15px;
  }

  .room_card3_profile {
    flex-wrap: wrap;
  }

  .select_room_section1 {
    padding: 25px;
    padding-top: 40px;
  }

  .line {
    display: none;
  }

  .select_room_footer {
    margin: 25px;
  }

  .select_room_section2 {
    padding: 15px;
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: 30px;
  }

  .reservation_details_section1 {
    padding: 25px;
    padding-top: 40px;
  }

  .reservation_section2 {
    padding: 25px;
    grid-template-columns: 1fr;
  }

  .card2_message_row1,
  .card2_message_row2,
  .card2_message_row3,
  .card2_message_row4 {
    grid-template-columns: 1fr 1fr;
  }

  .message_row1_column1 {
    padding-bottom: 0;
  }

  .message_row1_column2 {
    padding-bottom: 20px;
  }

  .card2_submit {
    justify-content: center;
  }

  .blog_section1 {
    padding: 25px;
    grid-template-columns: 1fr;
  }
  .cloud_links {
    grid-template-columns: 1fr 1fr;
  }
  .blog_card1_cloud h3 {
    text-align: center;
  }
  .right_card1_image img {
    height: 100%;
  }
}