@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Cormorant+Garamond:wght@400;600&family=Playfair+Display:wght@400;600&display=swap");

/* Reset margin and padding on html and body */
html,
body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

/* Reducing the height of the header */
.et-l--header {
  padding-top: 0; /* Removed top padding */
  padding-bottom: 0px; /* Reduced bottom padding */
  min-height: 30px; /* Set a specific height if needed */
  margin-bottom: 2px; /* Removed margin-top */
  margin-top: 2px;
}
/* Styling the centered content */
.centered-content {
  position: absolute; /* Position on top of the video */
  top: 50%; /* Vertically center it */
  left: 50%; /* Horizontally center it */
  transform: translate(-50%, -50%); /* Adjust for perfect centering */
  text-align: center; /* Align text in the center */
  z-index: 1001; /* Ensure it stays above the video */
}

/* Styling for the logo */
.centered-logo {
  width: 300px; /* Enlarged logo size */
  height: auto;
}

.offer-banner {
  background-color: #e0b974; /* Gold background */
  padding: 3px; /* Reduced padding */
  text-align: center;
  border-radius: 7px;
  transition: background-color 0.3s ease-in-out;
}

.offer-banner:hover {
  background-color: #43b3ae; /* Teal color on hover */
}

.offer-banner strong {
  color: white; /* Ensure text remains readable */
}

/* Reset margin and padding on html and body */
html,
body {
  margin: 0;
  padding: 0;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .centered-logo {
    width: 300px; /* Adjust logo size for smaller screens */
  }

  .offer-banner {
    padding: 2px; /* Adjust padding for smaller screens */
  }
}

@media (max-width: 992px) {
  .centered-logo {
    width: 250px; /* Adjust logo size for tablets */
  }

  .offer-banner {
    padding: 2px; /* Adjust padding for tablets */
  }
}

@media (max-width: 768px) {
  .centered-logo {
    width: 200px;
    height: auto; /* Adjust logo size for smaller screens */
  }

  .offer-banner {
    padding: 1px; /* Adjust padding for smaller screens */
  }
}

@media (max-width: 576px) {
  .centered-logo {
    width: 150px;
    height: auto; /* Adjust logo size for mobile */
  }

  .offer-banner {
    padding: 1px; /* Adjust padding for mobile */
  }
}

/* Navigation bar styling */
.navbar {
  position: absolute; /* Keep it over the video */
  top: 0; /* Align to the top of the video */
  width: 100%; /* Full width */
  z-index: 1000; /* Ensure it's above the video */
  padding: 10px 20px; /* Padding for the navbar */
  display: flex;
  justify-content: center; /* Center align the nav items */
  align-items: center; /* Align items vertically */
}

/* Center align the navigation menu */
.navbar ul {
  background: rgba(0, 0, 0, 0.4); /* Dark background for contrast */
  border-radius: 5px; /* Rounded corners */
  list-style: none;
  padding: 10px 20px; /* Add some padding */
  margin: 0;
  display: flex;
  align-items: center; /* Keep items vertically aligned */
  justify-content: center; /* Center align the list items */
}

/* Apply luxury font to navbar items */
.nav-item a {
  color: white; /* Text color */
  font-size: 15px; /* Increase font size */
  font-weight: 100; /* Make it slightly bold for elegance */
  font-family: "Playfair Display", serif; /* Apply luxury font */
  text-decoration: none;
  padding: 12px 18px; /* Slightly bigger padding for better spacing */
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
}

.nav-item a:hover {
  color: #e0b974; /* Teal on hover */
}

/* Styling the video div to make it full width */
.et_pb_section_video {
  width: 100%; /* Full width */
  max-width: 100%; /* Ensure it doesn't exceed screen width */
  margin: 0 auto; /* Centering the video */
  overflow: hidden; /* Hide overflow if any */
  height: 93vh; /* Set height to 77% of the viewport height */
  position: relative; /* Ensures navbar stays within this container */
}
/* Styling for the new "Book Your Stay" button */
.new-book-btn {
  display: inline-block; /* Make it inline */
  color: #815304; /* White text */
  font-size: 18px; /* Adjust font size */
  font-weight: 100; /* Slightly bold */
  text-decoration: none;
  padding: 12px 24px;
  background-color: #e1dfdf; /* Light gold background */
  margin-top: 20px; /* Space above the button */
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* Hover effect for the "Book Your Stay" button */
.new-book-btn:hover {
  background-color: #43b3ae; /* Teal background on hover */
  border-color: #43b3ae; /* Change border to teal on hover */
  color: white; /* Keep text white */
}
/* Make sure video stretches across the section */
.et_pb_section_video video {
  width: 100%; /* Video will now stretch 100% of its container width */
  height: 100%; /* Full height */
  object-fit: cover; /* Ensure the video covers the container without distortion */
}

/* Additional styling for the text div */
.et_pb_row_0 {
  text-align: center;
  margin-top: 15px;
}

.et_pb_row_0 img {
  max-width: 80%; /* Limit image width */
  border-radius: 8px; /* Round corners */
}

/* Button Styling */
.et_pb_button_0 {
  background-color: #e0b974; /* Matching background color */
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
}

.et_pb_button_0:hover {
  background-color: #43b3ae;
  transition: background-color 0.3s ease-in-out;
  /* Teal on hover */
}
/* Navigation bar styling */
.navbar {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1000;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .nav-item a {
    font-size: 14px; /* Adjust font size */
    padding: 10px 15px; /* Adjust padding */
  }

  .book-btn {
    font-size: 16px; /* Adjust font size */
    padding: 8px 16px; /* Adjust padding */
  }

  .new-book-btn {
    font-size: 16px; /* Adjust font size */
    padding: 10px 20px; /* Adjust padding */
  }

  .et_pb_section_video {
    height: 80vh; /* Adjust video section height */
  }
}

@media (max-width: 992px) {
  .nav-item a {
    font-size: 12px; /* Adjust font size for tablets */
    padding: 8px 12px; /* Adjust padding for tablets */
  }

  .book-btn {
    font-size: 14px; /* Adjust font size */
    padding: 8px 16px; /* Adjust padding */
  }

  .nav-logo {
    width: 50px; /* Adjust logo size for tablets */
  }

  .new-book-btn {
    font-size: 14px; /* Adjust font size */
    padding: 10px 18px; /* Adjust padding */
  }

  .et_pb_section_video {
    height: 75vh; /* Adjust video section height */
  }
}

@media (max-width: 768px) {
  .nav-item a {
    font-size: 12px; /* Adjust font size for smaller screens */
    padding: 6px 10px; /* Adjust padding */
  }

  .book-btn {
    font-size: 14px; /* Adjust font size */
    padding: 6px 14px; /* Adjust padding */
  }

  .nav-logo {
    width: 40px; /* Adjust logo size for smaller screens */
  }

  .new-book-btn {
    font-size: 14px; /* Adjust font size */
    padding: 8px 16px; /* Adjust padding */
  }

  .et_pb_section_video {
    height: 70vh; /* Adjust video section height */
  }
}

@media (max-width: 576px) {
  .navbar {
    flex-direction: column; /* Stack navbar items */
    padding: 5px 10px; /* Adjust padding */
  }

  .nav-item a {
    font-size: 10px; /* Adjust font size for mobile */
    padding: 4px 8px; /* Adjust padding */
  }

  .book-btn {
    font-size: 12px; /* Adjust font size */
    padding: 5px 12px; /* Adjust padding */
  }

  .nav-logo {
    width: 35px; /* Adjust logo size for mobile */
  }

  .new-book-btn {
    font-size: 12px; /* Adjust font size */
    padding: 6px 14px; /* Adjust padding */
  }

  .et_pb_section_video {
    height: 60vh; /* Adjust video section height */
  }

  .et_pb_row_0 img {
    max-width: 100%; /* Allow images to scale on smaller screens */
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Playfair Display", serif;
}

/* Hero Section */
.hero-section {
  width: 100%;
  height: 900px; /* Adjust the height as needed */
  background: url("./media/back.webp") no-repeat center center / cover; /* Hero background image */
  background-attachment: fixed; /* Keeps the background fixed during scrolling */
  background-size: cover; /* Ensures the background image covers the entire section */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff; /* White text for contrast */
  text-align: center;
  padding: 20px;
  position: relative;
  z-index: 1; /* Keeps the section content in front */
}

/* Hero Content Styling */
.hero-content {
  max-width: 800px; /* Restrict the width of the content */
  background: rgba(0, 0, 0, 0.4); /* Dark background for contrast */
  padding: 40px;
  border-radius: 10px;
  position: relative; /* Keeps the content above the fixed background */
  z-index: 2;
}

/* Headline */
.hero-section h1 {
  font-family: "Playfair Display", serif; /* Luxury font */
  font-size: 36px;
  color: #d8a66c; /* Same color as the button */
  margin-bottom: 15px;
  font-family: "Playfair Display", serif;
}

/* Description */
.hero-section p {
  font-family: "Playfair Display", serif; /* Luxury font */
  font-size: 18px;
  color: #f1f1f1;
  margin-bottom: 20px;
}

/* Hero Button */
.hero-btn {
  background: #d8a66c; /* Same color as the button in the cards */
  color: white;
  padding: 12px 20px;
  font-size: 16px;
  text-transform: uppercase;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.hero-btn:hover {
  background: #b07d50; /* Hover effect */
}

/* Accommodation Section */
.accommodation-section {
  padding: 50px 20px;
  background-color: #f8f8f8;
  text-align: center;
}

.section-header {
  font-size: 32px;
  font-weight: bold;
  color: #e22d2d;
  text-align: center;
  margin-bottom: 40px;
  text-transform: uppercase;
}

.accommodation-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.accommodation-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 100%;
  max-width: 500px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.accommodation-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.accommodation-card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.accommodation-details {
  padding: 20px;
}

.accommodation-details h2 {
  font-size: 24px;
  color: #c7925b;
  margin-bottom: 10px;
}

.accommodation-details p {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}

.view-suite-btn {
  background: #d8a66c;
  color: white;
  padding: 12px 20px;
  border: none;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
  margin-top: 15px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.view-suite-btn:hover {
  background-color: #43b3ae;
}

@media (max-width: 768px) {
  .accommodation-container {
    flex-direction: column;
    align-items: center;
  }

  .accommodation-card {
    max-width: 100%;
  }
}

/* Menu Section */
.menu-section {
  padding: 20px;
  background-color: #eae9e9;
  font-family: Arial, sans-serif;
  height: auto; /* Allow height to adjust based on content */
}

/* Menu Titles (Horizontal) */
.menu-titles {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.menu-title {
  font-size: 18px;
  font-weight: bold;
  padding: 10px 20px;
  cursor: pointer;
  color: #d8a66c;
  border-radius: 5px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.menu-title:hover {
  color: #43b3ae;
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.menu-title.active {
  background-color: #706e6e;
}

/* Menu Content */
.menu-content {
  display: none;
  margin-top: 20px;
  text-align: center;
  background-color: #666;
  height: 250px;
}

.menu-content ul {
  list-style-type: none;
  padding: 0;
}

/* Food Items */
.food-item {
  display: inline-block;
  margin: 15px;
  text-align: center;
}

.food-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}

/* Show active menu section */
.menu-content.active {
  display: block;
  background-color: #d3cbcb;
  border-radius: 5px;
}

.food-item p {
  font-size: 16px;
  color: #666;
}

/* Responsive Design */
@media (max-width: 768px) {
  .menu-titles {
    justify-content: center; /* Center menu titles on smaller screens */
    flex-wrap: wrap; /* Allow wrapping of titles */
  }

  .menu-title {
    font-size: 16px; /* Smaller font size */
    padding: 8px 15px; /* Smaller padding */
  }

  .menu-content {
    height: auto; /* Allow content to adjust in height */
  }

  .food-item {
    display: block; /* Stack food items vertically */
    margin: 10px auto; /* Center food items */
  }

  .food-img {
    width: 100px; /* Smaller food images */
    height: 100px;
  }

  .food-item p {
    font-size: 14px; /* Smaller font size for food description */
  }
}

@media (max-width: 480px) {
  .section-header {
    font-size: 28px; /* Smaller header text */
  }

  .menu-title {
    font-size: 14px; /* Further reduce font size */
  }

  .food-img {
    width: 90px; /* Even smaller images on very small screens */
    height: 90px;
  }

  .food-item p {
    font-size: 12px; /* Further reduce text size */
  }
}
/* Testimonial Section */
.testimonial-section {
  width: 100%;
  padding: 50px 20px;
  background-color: #f8f8f8; /* Light background */
  text-align: center;
}

/* Testimonial Container */
.testimonial-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

/* Testimonial Card Styling */
.testimonial-card {
  background: #fff;
  padding: 20px;
  max-width: 350px;
  width: 100%; /* Make it responsive */
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease;
}

/* Testimonial Rating (Starfish) */
.testimonial-rating {
  margin-bottom: 10px;
}

.testimonial-rating img {
  margin: 0 2px;
}

/* Testimonial Text */
.testimonial-text {
  font-size: 16px;
  color: #333;
  font-style: italic;
  margin-bottom: 10px;
}

/* Author Name */
.testimonial-author {
  font-size: 14px;
  color: #666;
  font-weight: bold;
}

/* Hover Effect */
.testimonial-card:hover {
  transform: translateY(-10px); /* Slightly lift the card on hover */
}

/* Responsive Design */
@media (max-width: 768px) {
  .testimonial-container {
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Adjust the gap between cards */
  }

  .testimonial-card {
    max-width: 90%; /* Make the cards responsive */
    padding: 15px; /* Adjust padding */
  }

  .testimonial-text {
    font-size: 14px; /* Smaller font size on mobile */
  }

  .testimonial-author {
    font-size: 12px; /* Smaller font size for author on mobile */
  }
}

@media (max-width: 480px) {
  .testimonial-container {
    gap: 15px; /* Tighter gap on very small screens */
  }

  .testimonial-card {
    max-width: 100%; /* Full width on small screens */
    padding: 10px; /* Smaller padding */
  }

  .testimonial-text {
    font-size: 12px; /* Further reduce font size */
  }

  .testimonial-author {
    font-size: 10px; /* Further reduce font size */
  }
}

/* Footer Styling */
.footer {
  background-color: #222;
  color: #fff;
  padding: 30px 0;
  font-family: Arial, sans-serif;
  position: relative;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  flex-wrap: wrap;
  position: relative;
}

/* Footer Map */
.footer-map {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 180px;
  height: 180px;
  z-index: 1;
}

.footer-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
}

/* Footer Sections */
.footer-left {
  flex: 1;
  min-width: 250px;
  margin-bottom: 20px;
  padding-left: 200px; /* Make space for the map */
}

/* Align Policies to the Right */
.footer-right {
  flex: 1;
  min-width: 250px;
  text-align: right;
  margin-bottom: 20px;
}

.footer-left h4,
.footer-right p {
  font-size: 22px;
  margin-bottom: 10px;
  color: #d8a66c;
}

.footer-left p,
.footer-right ul li {
  font-size: 18px;
  color: #bbb;
  margin-bottom: 8px;
}

.footer-right ul {
  list-style: none;
  padding: 0;
}

.footer-right ul li {
  margin-bottom: 6px;
}

.footer-right ul li a {
  color: #bbb;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s ease;
}

.footer-right ul li a:hover {
  color: #d8a66c;
}

/* Footer Bottom */
.footer-bottom {
  text-align: center;
  margin-top: 15px;
  background-color: #111;
  padding: 10px 0;
  font-size: 14px;
}

.footer-bottom p {
  color: #bbb;
  margin: 0;
}

/* Responsive Design */
@media (max-width: 992px) {
  .footer-map {
    position: static;
    width: 100%;
    height: 250px;
    margin-bottom: 20px;
  }

  .footer-left {
    padding-left: 0;
    text-align: center;
  }

  .footer-right {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
  }

  .footer-left,
  .footer-right {
    width: 100%;
    text-align: center;
  }

  .footer-left h4,
  .footer-right p {
    font-size: 20px;
  }

  .footer-left p,
  .footer-right ul li {
    font-size: 16px;
  }
}

/* Add styles for meal preference options */
.meal-preference {
  margin-top: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.meal-options {
  margin-top: 10px;
}

.meal-options label {
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  cursor: pointer;
}

.meal-options input[type="radio"] {
  margin-right: 10px;
}

/* Responsive styles for meal options */
@media (max-width: 768px) {
  .meal-options label {
    font-size: 14px;
  }
}