﻿@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Orbitron:wght@400..900&display=swap');

/* General Body Styles */
body {
    font-family: 'Poppins', sans-serif; /* Clean, modern font for body text */
    background-color: #4CA1FF;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23003366'/%3E%3Cstop offset='1' stop-color='%234CA1FF'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%23003366' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23003366' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.4'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover; /* Light background color for a clean look */
    margin: 0;
    padding: 0;
    color: #333; /* Dark text for better readability */
    line-height: 1.6;
}

/* Heading Styles */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', sans-serif; /* Keep headings consistent with body font */
     /* Matching the logo's color */
    margin: 10px 0;
}

h1 {
    font-size: 36px; /* Large size for main headings */
}

h2 {
    font-size: 28px; /* Medium size for secondary headings */
}

h3 {
    font-size: 22px; /* Smaller for tertiary headings */
}

/* Link (a tag) Styles */
a {
    color: #1e3c72; /* Link color matching the logo */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease; /* Smooth transition for color change */
}

a:hover {
    color: #ff6600; /* Hover color for links */
    text-decoration: underline; /* Underline on hover */
}





/* Top Bar */
.topbar {
    color: #ffffff; /* White text for clarity */
    font-size: 17px;
    padding: 10px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
}

/* Container Layout */
.topbar-container {
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* Sections */
.topbar-left, .topbar-center, .topbar-right {
    display: flex;
    align-items: center;
    flex: 1;
}

.topbar-left {
    justify-content: flex-start;
}

.topbar-center {
    justify-content: center;
    font-weight: 400;
    color: #f0f0f0;
    font-size: 16px;
    text-align: center;
}

.topbar-right {
    justify-content: flex-end;
    gap: 12px;
}

/* Call Link */
.call-link {
    color: #ffffff;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

.call-link:hover {
    color: #90caf9; /* Light blue for hover effect */
	
}

/* Social Media Icons */
.social-icon {
    font-size: 15px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}

.social-icon i {
    color: #ffffff;
}

.social-icon:hover {
    background: #ffffff;
}

.social-icon:hover i {
    color: #ffb300; /* Soft Gold on hover for a touch of elegance */
}

/* Book Now Button */
.book-now {
    background: linear-gradient(to right, #ffffff, #a5d6a7); /* Soft gradient from white to light green */
    color: #004d40; /* Dark teal for a calm and professional appearance */
    padding: 9px 18px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.book-now:hover {
    background: linear-gradient(to right, #81d4fa, #004d40); /* Soft blue to dark green for hover */
    color: #ffffff;
    transform: scale(1.06);
	text-decoration:none;
}

/* 🔹 Responsive Design - Tablet & Mobile */
@media screen and (max-width: 1024px) {
    .topbar-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .topbar {
        padding: 12px 0;
    }

    .topbar-left,
    .topbar-center,
    .topbar-right {
        width: 100%;
        justify-content: center;
        margin-bottom: 8px;
    }

    .topbar-right {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    .social-icon {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .book-now {
        font-size: 13px;
        padding: 7px 14px;
    }
}

/* 🔹 Mobile View Fixes */
@media screen and (max-width: 768px) {
    .topbar {
        flex-direction: column;
        padding: 10px 0;
    }

    .topbar-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .topbar-left,
    .topbar-center,
    .topbar-right {
        width: 100%;
        justify-content: center;
        text-align: center;
        margin-bottom: 6px;
    }

    .topbar-right {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .social-icon {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    .book-now {
        font-size: 12px;
        padding: 6px 12px;
    }
}
/* Transparent Header */
.transparent-header {
   background:linear-gradient(to bottom,#ddeeff, #f1f1f1); /* Light white gradient for subtlety */
   padding: 20px 0;
   position: sticky;
   top: 0;
   width: 100%;
   z-index: 102;
   transition: background-color 0.3s ease;
   color: #003366; /* Dark blue text for better readability */
   box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); /* Soft shadow for a modern touch */
}

/* Sticky Header */
header.sticky {
    background-color: rgba(255, 255, 255, 1); /* Solid white background for sticky state */
    color: #003366; /* Dark blue text */
}

/* Header Container */
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 0; /* Clean, sharp edges */
}

/* Logo (No background, clean look) */
.logo-img {
    height: 70px;
    position: relative;
    z-index: 103;
    background: none; /* Transparent background behind logo */
    border-radius: 0; /* No rounded corners around the logo */
}

/* Navigation */
#mainNav {
    flex: 1;
}

.desktop-nav {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 30px; /* More gap for spacing */
}

.desktop-nav li a {
    text-decoration: none;
    color: #003366; /* Dark blue for readability */
    font-weight: 400;
    font-size: 20px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.desktop-nav li a:hover {
    color: #007BFF; /* Soft blue on hover for elegance */
    transform: scale(1.05);
}

/* Hamburger Menu */
#hamburger-menu {
    display: none;
    cursor: pointer;
    position: relative;
}

.hamburger-lines {
    width: 25px;
    height: 3px;
    background-color: #003366; /* Dark blue hamburger lines for visibility */
    margin: 5px;
    transition: all 0.3s ease;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.mobile-menu-overlay.open {
    display: block;
    opacity: 1;
}

.mobile-menu-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex-direction: column;
}

/* Mobile "Book Now" Button */
.mobile-menu-content ul li .btn-book-now {
    background-color: #007BFF; /* Soft blue for the button */
    padding: 12px 30px;
    border-radius: 30px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.4);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
}

.mobile-menu-content ul li .btn-book-now:hover {
    background-color: #4CAF50; /* Fresh Green on hover */
    color: #fff;
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.6);
}

/* Close Button */
.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 60px;
    color: #003366; /* Dark Blue for close button */
    cursor: pointer;
    transition: transform 0.3s ease;
}

.close-btn:hover {
    transform: rotate(90deg);
}

/* Mobile Logo */
.mobile-logo img {
    width: 180px;
    margin-bottom: 20px;
}

/* Mobile Menu Links */
.mobile-menu-content ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

.mobile-menu-content ul li a {
    display: block;
    color: #003366; /* Dark Blue text */
    font-size: 24px;
    padding: 15px 0;
    text-transform: uppercase;
    font-weight: bold;
    transition: color 0.3s ease;
    text-decoration: none;
}

.mobile-menu-content ul li a:hover {
    color: #007BFF; /* Soft blue hover effect */
}

#nav-list li a.active {
    
    font-weight: 500;
    border-bottom: 3px solid #FFD700;
}

/* Responsive Layout */
@media (max-width: 820px) {
    .container {
        padding: 0 10px;
    }

    .desktop-nav {
        display: none;
    }

    /* Show Hamburger Menu */
    #hamburger-menu {
        display: block;
    }

    .logo {
        display: flex;
        justify-content: left;
        width: 100%;
    }

    .btn-book-now {
        padding: 10px 20px;
    }
}

@media (max-width: 480px) {
    .btn-book-now {
        padding: 8px 15px;
    }

    header .logo img {
        height: 60px;
    }
}




/* Custom Hero Slider */
.custom-hero-slider {
  position: relative;
  height: 100vh;
  overflow: hidden;
  
}

.custom-slider {
  height: 100%;
  position: relative;
}

.custom-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.custom-slide.active {
  opacity: 1;

}

.custom-slide-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45); /* dark overlay for better readability */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  text-align: center;
  padding: 0 20px;
}

.custom-subtitle {
  font-size: 25px;
  margin-bottom: 18px;
  color: #FFD700; /* Soft gold for better harmony */
  font-weight: 500;
  letter-spacing: 0.5px;
}

.custom-title {
  font-size: 54px;
  line-height: 1.2;
  margin-bottom: 18px;
  font-weight: 700;
  color: #ffffff; /* White title to ensure readability */
}

.custom-text {
  font-size: 17px;
  max-width: 720px;
  margin-bottom: 25px;
  color: #f1f1f1; /* Light grey text for contrast */
  line-height: 1.6;
}

.custom-btn {
  position: relative;
  display: inline-block;
  background-color: #1E90FF; /* Bright blue button */
  color: #fff;
  padding: 12px 32px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  overflow: hidden;
  z-index: 1;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.custom-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #FFD700; /* Soft gold */
  transform: skewX(-20deg);
  transition: all 0.4s ease;
  z-index: -1;
}

.custom-btn:hover::before {
  left: 0;
}

.custom-btn:hover {
  color: #000; /* Dark text on hover for contrast */
  background-color: #FFD700; /* Gold button hover effect */
}

/* Navigation Arrows */
.custom-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32px;
  color: #fff;
  cursor: pointer;
  z-index: 2;
  padding: 10px;
}

.custom-prev {
  left: 20px;
}

.custom-next {
  right: 20px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .custom-title {
    font-size: 36px;
  }

  .custom-text {
    font-size: 15px;
  }

  .custom-btn {
    font-size: 15px;
    padding: 10px 24px;
  }
}


/* Wavy Divider */
.wavy-divider {
    width: 100%;
    height: 150px;
    background: url('assets/images/wave.svg') no-repeat center center;
    background-size: cover;
    transform: rotate(180deg); /* Flip the divider */
	margin-top:-150px;
	
}


/* Custom Divider */
.custom-divider {
    width: 100%;
    height: 150px;
    background: url('assets/images/wave.svg') no-repeat center center;
    background-size: cover;
   
}
/* Custom Divider */
.custom-divider1 {
    width: 100%;
    height: 150px;
    background: url('assets/images/wave.svg') no-repeat center center;
    background-size: cover;
	
   
}
/* Booking Section Styles */
.booking-section {
  background: linear-gradient(145deg, #ffffff, #f1f9ff); /* Set the background color to a suitable shade */
  padding: 10px 20px; /* Add some padding */
  color: #fff; /* White text */
}


/* 🌟 Booking Form Styling */
.welcome-booking-form {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    background: #e5e6e7;
    padding: 20px;
    max-width: 1400px;
    width: 100%;
    border-radius: 12px;
    margin: 0 auto;
}

/* Form Groups */
.welcome-form-group {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    padding: 14px;
    flex: 1;
    min-width: 180px;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    position: relative;
}

.welcome-form-group label {
    font-size: 16px;
    color: #2F4F4F;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.welcome-form-group i {
    color: #0e183a;
}

.welcome-form-group input,
.welcome-form-group select {
    background: transparent;
    border: 1px solid #FF6347;
    color: #003366;
    font-size: 15px;
    outline: none;
    margin-top: 5px;
    font-weight: 500;
    text-align: center;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

/* Button Styling */
.welcome-booking-btn {
    background: linear-gradient(to right, #FF4500, #FF6347);
    color: white;
    border: none;
    padding: 14px 24px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    font-weight: 600;
    box-shadow: 0px 4px 12px rgba(255, 99, 71, 0.3);
}

.welcome-booking-btn:hover {
    background: linear-gradient(to right, #275ba9, #181d39);
    box-shadow: 0px 6px 18px rgba(255, 99, 71, 0.4);
}

/* Responsive */
@media (max-width: 820px) {
    .welcome-booking-form {
        flex-direction: column;
        width: 80%;
        gap: 12px;
        padding: 10px;
    }

    .welcome-form-group {
        width: 80%;
        min-width: unset;
    }

    .welcome-booking-btn {
        width: 80%;
    }
}

@media (max-width: 538px) {
    .welcome-booking-form {
        padding: 15px;
    }

    .welcome-form-group label {
        font-size: 14px;
    }

    .welcome-booking-btn {
        padding: 12px;
        font-size: 14px;
    }
}


/* No-Image Welcome Style */
.no-image-welcome {
  background: linear-gradient(145deg, #0000006b, #002e4063); /* Deep blue gradient background */
  color: #ffffff;
  padding: 80px 20px;
  position: relative;
  overflow: hidden;
  margin-top:-150px;
  }

/* Add abstract decorative background shapes */
.no-image-welcome::before,
.no-image-welcome::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 50%;
  z-index: 0;
}

.no-image-welcome::before {
  top: -100px;
  left: -150px;
}

.no-image-welcome::after {
  bottom: -100px;
  right: -150px;
}

.welcome-container.text-only {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: auto;
  text-align: left;
}

.welcome-content-block {
  padding: 20px;
}

.welcome-subtitle {
  font-size: 22px;
  color: #97d5ff;
  font-weight: 600;
  margin-bottom: 10px;
  display: inline-block;
}

.welcome-title {
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.3;
}

.welcome-desc1 {
  font-size: 20px;
  color: #f0f0f0;
  margin-bottom: 25px;
}

.welcome-desc {
  font-size: 18px;
  color: #e0e0e0;
  line-height: 1.7;
  margin-bottom: 30px;
}

/* Accordion */
.accordion-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.accordion-box {
  background: rgba(255, 255, 255, 0.05);
  border-left: 5px solid #4CAF50;
  padding: 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.accordion-box:hover {
  background: rgba(255, 255, 255, 0.1);
}

.accordion-header {
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
}

.accordion-content {
  margin-top: 10px;
  font-size: 17px;
  color: #dddddd;
  display: none;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
  .welcome-title {
    font-size: 30px;
  }
  .welcome-desc1,
  .welcome-desc,
  .accordion-header {
    font-size: 16px;
  }
}



/* 🌟 Popular Amenities Section */
.popular-amenities {
    background: linear-gradient(to bottom, #1e2a47, #00aaff); /* Dark Blue to Aqua Gradient */
    padding: 60px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

/* 📍 Container */
.amenities-container {
    max-width: 1200px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    width: 90%;
}

/* 📝 Left Text Section */
.amenities-text {
    flex: 1;
    max-width: 450px;
    text-align: left;
    z-index: 1;
	color:#aecbff;
}

.amenities-title {
    font-size: 42px;
    font-weight: 700;
    margin: 10px 0;
    color: #ffffff; /* White text */
}

.amenities-description {
    font-size: 20px;
    color: #ffffff; /* White text for readability */
    margin-bottom: 30px;
    font-weight: 400;
}

/* 🌟 Button Styling */
.amenities-button {
    position: relative;
    display: inline-block;
    background-color: #4e7dff; /* Light Blue base color */
    color: white;
    font-size: 18px;
    font-weight: 300;
    padding: 14px 28px;
    border-radius: 8px;
    text-decoration: none;
    overflow: hidden;
    z-index: 1;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.amenities-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #FFD700; /* Gold hover effect */
    transform: skewX(-20deg);
    transition: all 0.4s ease;
    z-index: -1;
}

.amenities-button:hover::before {
    left: 0;
}

.amenities-button:hover {
    color: #000; /* Dark text on hover */
    background-color: #FFD700; /* Gold hover effect */
    text-decoration: none;
}


/* 📌 Amenities Grid */
.amenities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    flex: 1;
    justify-content: center;
    width: 100%;
}

/* 🏨 Amenity Box */
.amenity-box {
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* Icon Styling */
.amenity-box i {
    font-size: 42px;
    color: #00aaff; /* Cyan for icons */
    margin-bottom: 8px;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Name Below Icon */
.amenity-box span {
    font-size: 18px;
    font-weight: 300;
    color: #264653; /* Dark Blue for title */
    margin-bottom: 10px;
    transition: opacity 0.3s ease-in-out;
}

/* Hidden Info */
.amenity-info {
    position: absolute;
    top: 100%;
    left: 0;
    width: 90%;
    padding: 15px;
    font-size: 16px;
    color: #ffffff;
    opacity: 0;
    transition: top 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Hover Effect */
.amenity-box:hover {
    background: #00aaff; /* Light Blue background on hover */
}

.amenity-box:hover i {
    transform: translateY(-20px);
    opacity: 0;
}

.amenity-box:hover span {
    opacity: 0;
}

.amenity-box:hover .amenity-info {
    top: 50%;
    opacity: 1;
    transform: translateY(-50%);
}

/* 📱 Responsive */
@media (max-width: 992px) {
    .amenities-container {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .amenities-grid {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }

    .amenity-box {
        padding: 25px;
    }
}

@media (max-width: 600px) {
    .amenities-grid {
        grid-template-columns: 1fr;
    }
}
/* 🌟 Explore Attractions Section */
.explore-attractions-section {
  padding: 40px 20px;
  background:linear-gradient(145deg, #0000006b, #002e4063); /* Transparent background */
  position: relative;
}

/* 📍 Container */
.explore-attractions-container {
  max-width: 1400px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Left Content */
.attractions-left {
  flex: 1;
  padding: 30px;
  border-radius: 12px;
  box-sizing: border-box;
}

/* Right Content (Swiper) */
.attractions-right {
  flex: 1;
  padding: 10px;
  border-radius: 12px;
  box-sizing: border-box;
}

/* Text Styling */
.explore-attractions-text {
  max-width: 100%;
}

.section-highlight {
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #ffffff; /* White text for highlight */
  margin-bottom: 10px;
}

.explore-attractions-title {
  font-size: 42px;
  font-weight: 700;
  color: #ffffff; /* White title for contrast */
  margin-bottom: 15px;
}

.explore-attractions-text p {
  font-size: 20px;
  color: #ffffff; /* White text for description */
  margin-bottom: 25px;
}

/* Button Styling */
.explore-attractions-button {
  position: relative;
  display: inline-block;
  background-color: #1E90FF; /* Bright blue button */
  color: white;
  padding: 12px 32px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  overflow: hidden;
  z-index: 1;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.explore-attractions-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #FFD700; /* Soft gold for hover effect */
  transform: skewX(-20deg);
  transition: all 0.4s ease;
  z-index: -1;
}

.explore-attractions-button:hover::before {
  left: 0;
}

.explore-attractions-button:hover {
  color: #000; /* Dark text on hover for contrast */
  background-color: #FFD700; /* Gold button hover effect */
}

/* Swiper container */
.explore-attractions-swiper {
  width: 100%;
  height: 100%;
  max-height: 480px;
  position: relative;
  box-sizing: border-box;
}

.explore-attractions-swiper .swiper-slide {
  background: #ffffffb3; /* Light transparent white for each slide */
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.explore-attractions-swiper img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.slide-info {
  padding: 30px;
  background: rgba(0, 0, 0, 0.6); /* Dark overlay on text for better readability */
  color: white; /* White text inside the overlay */
  text-align: left;
}

.slide-info h3 {
  font-size: 26px;
  margin-bottom: 10px;
  color: #ffffff; /* White text for the heading */
}

.slide-info p {
  font-size: 16px;
  color: #ffffff; /* White text for the paragraph */
}

/* Navigation Arrows */
.swiper-button-next,
.swiper-button-prev {
  background: rgba(0, 0, 0, 0.3);
  padding: 15px;
  border-radius: 50%;
  color: #fff;
  z-index: 10;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 16px;
}

/* ✅ Mobile Responsive */
@media (max-width: 932px) {
  .explore-attractions-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0;
  }

  .attractions-left,
  .attractions-right {
    width: 100%;
    padding: 20px;
  }

  .explore-attractions-title {
    font-size: 28px;
  }

  .explore-attractions-text p,
  .slide-info p {
    font-size: 15px;
  }

  .slide-info {
    padding: 20px;
  }

  .explore-attractions-swiper {
    height: auto;
  }

  .explore-attractions-swiper img {
    height: 220px;
  }

  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }
}

@media (max-width: 820px) {
  .explore-attractions-title {
    font-size: 26px;
  }

  .slide-info {
    padding: 15px;
  }
}

@media (max-width: 580px) {
  .explore-attractions-title {
    font-size: 24px;
  }

  .explore-attractions-text p,
  .slide-info p {
    font-size: 14px;
  }

  .explore-attractions-button {
    font-size: 14px;
    padding: 10px 28px;
  }

  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }
}




.arya-luxury-rooms {
  padding: 80px 20px;
  background:linear-gradient(to bottom, #1e2a47, #00aaff);
}

.arya-rooms-header {
  text-align: center;
  margin-bottom: 60px;
}

.arya-rooms-header h5 {
  color: #ffffff;
  text-transform: uppercase;
  font-size: 21px;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.arya-rooms-header h2 {
  font-size: 45px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 12px;
  text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.5); /* Soft glow effect */
}


.arya-rooms-header p {
  color: #fff;
  font-size: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.arya-rooms-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

/* Card */
.arya-room-box {
  width: 480px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.arya-room-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

/* Image */
.arya-room-img {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.arya-room-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.4s ease;
}

.arya-room-box:hover img {
  scale: 1.05;
}

/* Label */
.arya-label {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #4A90E2;
  color: #fff;
  font-size: 16px;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Content */
.arya-room-body {
  padding: 20px;
  text-align: center;
}

.arya-room-body h3 {
  font-size: 18px;
  color: #2C2C2C;
  margin-bottom: 12px;
  font-weight: 600;
}

.arya-room-body ul {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}

.arya-room-body ul li {
  font-size: 18px;
  color: #555;
  margin-bottom: 6px;
}

.arya-room-body em {
  margin-right: 6px;
  font-style: normal;
  color: #5BB5A2;
}

/* Button */
.arya-book-btn {
  display: inline-block;
  background: linear-gradient(to right, #4A90E2, #5BB5A2);
  padding: 10px 26px;
  color: #fff;
  border-radius: 30px;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

.arya-book-btn:hover {
  background: linear-gradient(to right, #5BB5A2, #4A90E2);
}

/* Mobile */
@media (max-width: 768px) {
  .arya-room-box {
    width: 100%;
    max-width: 340px;
  }
}


/* Section */
.americas-media-gallery-section {
  padding: 80px 5%;
  /* Dark Blue to Aqua Gradient */
  position: relative;
}

/* Title */
.americas-media-title {
  text-align: center;
  margin-bottom: 50px;
  text-transform: uppercase;
}

.americas-subtitle {
  font-size: 18px;
  color: #ffffff;  /* White for subtitle */
  font-weight: 600;
  margin-bottom: 15px;
  display: inline-block;
}

.americas-title {
  font-size: 38px;
  color: #ffffff;  /* White for the title */
  font-weight: 700;
}

.americas-media-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
  align-items: stretch;
}

/* Half Columns */
.americas-media-half {
  flex: 0 0 48%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Video Container with Text */
.americas-video-box {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.americas-video-description {
  margin-top: 20px;
  font-size: 16px;
  color: #f1f1f1;  /* Light gray for text */
  line-height: 1.6;
}

/* Video */
.americas-video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.americas-video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Gallery */
.americas-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.americas-gallery-grid img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  cursor: pointer;
}

.americas-gallery-grid img:hover {
  transform: scale(1.03);
}

.americas-gallery-button {
  margin-top: 30px;
}

/* Style the lightbox container */
.lightbox-modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: hidden;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* The image inside the lightbox */
.lightbox-modal-content {
  max-width: 90%;
  max-height: 90%;
  margin: auto;
}

/* The close button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #ff0000;
  text-decoration: none;
  cursor: pointer;
}


/* Button Styling */
.custom-btn {
  display: inline-block;
  background: linear-gradient(to right, #007bff, #00bfae);  /* Blue to Teal gradient */
  color: white;
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 16px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
  transition: background 0.3s ease;
}

.custom-btn:hover {
  background: linear-gradient(to right, #00bfae, #007bff);  /* Reverse gradient on hover */
  color: #000;
  text-decoration: none;
}

/* Responsive */
@media (max-width: 992px) {
  .americas-media-half {
    flex: 0 0 100%;
  }

  .americas-gallery-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* Footer Section */
.aligned-footer {
    background: linear-gradient(to bottom,#ddeeff, #f1f1f1); /* White to light gray gradient */
    color: #333333; /* Dark text for readability */
    padding: 60px 5%;
    position: relative;
    overflow: hidden;
    font-size: 18px;
}

/* Top Row: Logo and Social Media */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.footer-logo img {
    max-width: 180px;
    height: auto;
    display: block;
    background: none;  /* No background for logo */
    border-radius: 0;   /* Clean edges */
}

.footer-social-icons {
    display: flex;
    gap: 20px;
}

.footer-social-icon {
    width: 45px;
    height: 45px;
    background: #e0e0e0; /* Light gray background for social icons */
    color: #333333; /* Dark icons */
    border: 2px solid #e0e0e0; 
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.footer-social-icon:hover {
    background: #b0b0b0; /* Slightly darker gray hover effect */
    color: #fff;
    transform: scale(1.1);
    text-decoration: none;
}

/* Footer Main Content */
.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 40px;
}

.footer-contact,
.footer-links,
.footer-follow {
    flex: 1;
    min-width: 250px;
}

.footer-contact h4,
.footer-links h4,
.footer-follow h4 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #333333; /* Dark gray for headers */
    border-bottom: 3px solid #b0b0b0; /* Light gray underline */
    display: inline-block;
    padding-bottom: 8px;
}

.footer-contact p,
.footer-contact,
.footer-contact a {
    color: #666666; /* Medium gray text for content */
    font-size: 17px;
    text-decoration: none;
}

.footer-contact a:hover {
    text-decoration: none;
    color: #333333; /* Dark gray on hover */
}

.cgsl {
    color: #333333;
    font-weight: bold;
}

.cgsl:hover {
    color: #b0b0b0;
}

.cgs2 span{
        font-size: 22px;
    font-weight: 500;
    
    color: #333333;
   
    display: inline-block;
  
}

/* Quick Links */
.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.footer-links ul li {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 25px;
}

.footer-links ul li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #b0b0b0; /* Light gray arrow */
    font-weight: bold;
}

.footer-links ul li a {
    color: #666666; /* Medium gray links */
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links ul li a:hover {
    color: #333333; /* Dark gray hover color */
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid #dddddd; /* Light gray border for separation */
    margin-top: 50px;
    padding-top: 20px;
    text-align: center;
    color: #666666;
    font-size: 15px;
}

.footer-bottom a {
    color: #666666;
    text-decoration: none;
    font-weight: 600;
}

.footer-bottom a:hover {
    text-decoration: none;
    color: #333333; /* Dark gray hover effect on footer links */
}

/* Hotel Policies Section */
.footer-policy {
    background: rgba(255, 255, 255, 0.7); /* Light transparent white for policy section */
    padding: 25px;
    border-radius: 8px;
    margin-top: 40px;
}

.footer-policy h4 {
    color: #333333; /* Dark gray for header */
    font-size: 22px;
    margin-bottom: 15px;
}

.footer-policy ul {
    list-style: none;
    padding: 0;
}

.footer-policy ul li {
    font-size: 16px;
    color: #666666; /* Medium gray for text */
    margin-bottom: 12px;
}

.footer-policy ul li strong {
    color: #333333; /* Dark gray for emphasized text */
}

/* Responsive Design */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        align-items: center;
    }

    .footer-contact,
    .footer-links,
    .footer-follow {
        text-align: center;
        margin-bottom: 30px;
    }

    .footer-contact h4,
    .footer-links h4,
    .footer-follow h4 {
        font-size: 20px;
    }

    .footer-links ul {
        grid-template-columns: 1fr 1fr;
    }

    .footer-social-icons {
        justify-content: center;
    }
}

/* Dropdown Container */
.has-dropdown {
    position: relative;
}

/* Dropdown Menu */
.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    list-style: none;
    min-width: 220px;
    padding: 8px 0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

/* Dropdown List Items */
.dropdown li {
    border-bottom: 1px solid #f0f0f0;
}

.dropdown li:last-child {
    border-bottom: none;
}

/* Dropdown Links */
.dropdown li a {
    display: block;
    padding: 12px 18px;
    font-size: 16px;
    color: #004080; /* Dark blue to match site theme */
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    font-weight: 500;
}

/* Hover Effects */
.dropdown li a:hover {
    background-color: #e6f0ff; /* Soft light blue hover */
    color: #003366;
    border-radius: 4px;
}

/* Show Dropdown on Hover (Desktop) */
.has-dropdown:hover .dropdown {
    display: block;
}

/* Mobile Styles */
.mobile-menu .has-dropdown {
    position: relative;
}

.mobile-menu .dropdown {
    display: none;
    position: relative;
    background: #f5f9ff;
    padding: 10px 0;
    border-radius: 6px;
}

.mobile-menu .has-dropdown.active .dropdown {
    display: block;
}
.has-dropdown > a::after {
    content: "▼";
    font-size: 10px;
    color: #666;
    margin-left: 6px;
    transition: transform 0.3s ease;
    display: inline-block;
}

/* Rotate arrow on hover */
.has-dropdown:hover > a::after {
    transform: rotate(180deg);
    color: #FFD700; /* Accent yellow on hover */
}

.custom-inner-hero {
    background-size: cover;
    background-position: center;
    position: relative;
    height: 350px; /* Slightly increased height for more impact */
    overflow: hidden;
    transition: all 0.3s ease-in-out; /* Smooth transition on hover */
}

/* Hover effect for the background */
.custom-inner-hero:hover {
    background-position: center center;
    transform: scale(1.05); /* Subtle zoom-in effect on hover */
}

.custom-inner-hero .custom-slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Darker overlay for depth */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    padding: 30px 20px; /* Increased padding for balance */
    box-sizing: border-box;
}

.custom-title {
    font-family: 'Helvetica Neue', sans-serif; /* Elegant font */
    font-size: 48px; /* Larger, more impactful title */
    font-weight: 700; /* Bold text */
    text-transform: uppercase;
    letter-spacing: 3px;
    line-height: 1.2;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Subtle text shadow for better contrast */
    margin: 0;
    opacity: 0.9; /* Slight transparency for a modern look */
    transition: opacity 0.3s ease;
}

/* On hover, text opacity becomes fully solid */
.custom-inner-hero:hover .custom-title {
    opacity: 1;
}



/* Container for the entire section */
.unique-amenities-section-extended {
    background: linear-gradient(145deg, #ffffff, #f1f9ff); /* Subtle gradient for depth */
    padding: 40px 0;
    text-align: center;
}

/* Wrapper for the content */
.unique-amenities-wrapper-extended {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Header Styling */
.unique-amenities-header-extended {
    font-size: 36px;
    font-weight: 700;
    color: #004080; /* Dark blue for the heading */
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
   
}

/* Header link styles */
.unique-header-link-extended {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
}

.unique-header-link-extended:hover {
    color: #FFD700; /* Yellow on hover */
    text-decoration: underline;
}

/* Section description */
.unique-section-description-extended {
    font-size: 18px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Links in the description */
.unique-keyword-link-extended {
    color: #004080; /* Blue for clickable text */
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease;
}

.unique-keyword-link-extended:hover {
    color: #FFD700; /* Highlight in yellow on hover */
    text-decoration: underline;
}

/* Grid title for amenities section */
.unique-grid-title-extended {
    font-size: 36px;
    font-weight: 700;
    color: #004080;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Grid styling for amenities cards */
.unique-amenities-grid-extended {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Responsive grid */
    gap: 40px;
    justify-items: center;
}

/* Styling for each amenity card */
.unique-amenity-card-extended {
    background: #ffffff; /* White background for items */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Larger shadow for premium feel */
    text-align: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Hover effect for amenity cards */
.unique-amenity-card-extended:hover {
    transform: translateY(-10px); /* Lift effect on hover */
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15); /* Larger shadow on hover */
}

/* Icon styling for amenity cards */
.unique-amenity-card-extended i {
    font-size: 60px; /* Larger icons for impact */
    color: #004080; /* Dark blue for icons */
    margin-bottom: 20px;
    transition: color 0.3s ease;
}

/* Hover color change for icons */
.unique-amenity-card-extended:hover i {
    color: #FFD700; /* Yellow color on hover */
}

/* Title in amenity cards */
.unique-amenity-card-extended h4 {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

/* Description text inside the amenity cards */
.unique-amenity-card-extended p {
    font-size: 16px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 10px;
}



/* Overall section styling */
.unique-amenities-section {
    background: #f8f8f8; /* Light background */
    padding: 60px 0;
}

.unique-amenities-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.unique-section-title {
    font-size: 36px;
    font-weight: 700;
    color: #004080;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
}

.unique-section-title::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background-color: #FFD700; /* Yellow underline */
    margin: 10px auto;
}

/* Cards container (grid layout) */
.unique-amenities-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Grid with auto-fill */
    gap: 30px; /* Reduced gap to prevent excessive space */
    justify-items: center;
    margin-top: 30px;
}

/* Each card styling */
.unique-general-card, .unique-room-card, .unique-bathroom-card, .unique-parking-card, .unique-services-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    width: 300px; /* Fixed width for uniformity */
    height: auto; /* Height will adjust based on content */
}

/* Hover effects */
.unique-general-card:hover, .unique-room-card:hover, .unique-bathroom-card:hover, .unique-parking-card:hover, .unique-services-card:hover {
    transform: translateY(-8px); /* Subtle hover effect */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
}

/* Card header (icon and title) */
.unique-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.unique-card-header i {
    font-size: 28px;
    color: #004080;
    margin-right: 15px;
    transition: color 0.3s ease;
}

.unique-card-header i:hover {
    color: #FFD700; /* Hover color for icons */
}

.unique-card-title {
    font-size: 22px;
    font-weight: 600;
    color: #004080;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    height: auto;
}

/* List items */
.unique-amenities-list {
    list-style-type: none;
    padding-left: 0;
    color: #333;
    font-size: 16px;
}

.unique-amenities-list li {
    line-height: 1.6;
    padding: 6px 0;
    border-bottom: 1px solid #f2f2f2; /* Soft separator */
}

.unique-amenities-list li:last-child {
    border-bottom: none;
}

.unique-amenities-list li:hover {
    background-color: #f0f8ff; /* Light hover effect */
    padding-left: 10px;
    transition: all 0.3s ease;
}

/* Specific card styles with background colors */
.unique-general-card {
    background: #e6e6e6;
}

.unique-room-card {
    background: #cfe2ff;
}

.unique-bathroom-card {
    background: #d9f7d9;
}

.unique-parking-card {
    background: #f1f1f1;
}

.unique-services-card {
    background: #d9e6f3;
}


/* Container for the entire section */
.whats-nearby-container {
    background: #f8f8f8;
    padding: 60px 0;
    font-family: 'Arial', sans-serif;
    overflow: hidden;
}

/* Section title styling */
.whats-nearby-title {
    font-size: 36px;
    font-weight: bold;
    color: #004080;
    text-align: center;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Section description styling */
.section-description {
    font-size: 18px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* Cards container (grid layout) */
.whats-nearby-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 cards per row */
    gap: 10px;
    justify-items: center;
    padding: 0 90px;
    max-width: 100%;
	   margin-top: 40px;
}

/* Card styling */
.whats-nearby-card {
    background: #ffffff;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Soft shadow */
    width: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    
    max-width: 320px; /* Limit card width */
    height: 350px; /* Ensure equal height for all cards */
}

/* Hover effect for the cards */
.whats-nearby-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}

/* Header inside the card */
.whats-nearby-card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.whats-nearby-card-header i {
    font-size: 30px;
    color: #004080;
    margin-right: 15px;
    transition: color 0.3s ease;
}

.whats-nearby-card-header i:hover {
    color: #FFD700;
}

.whats-nearby-card-header h3 {
    font-size: 24px;
    font-weight: 600;
    color: #004080;
    margin: 0;
}

/* List inside the card */
.whats-nearby-card ul {
    list-style-type: none;
    padding-left: 0;
    font-size: 16px;
    color: #333;
}

.whats-nearby-card li {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f2f2f2;
}

.whats-nearby-card li:last-child {
    border-bottom: none;
}

.whats-nearby-card li:hover {
    background-color: #f0f8ff;
    transition: all 0.3s ease;
}

/* Distance styling */
.distance {
    font-weight: bold;
    color: #666;
}

/* Background colors for cards */
.whats-nearby-card.parks {
    background: linear-gradient(145deg, #cceeff, #b3d9f7);
}

.whats-nearby-card.restaurants {
    background: linear-gradient(145deg, #ffebeb, #ffb3b3);
}

.whats-nearby-card.transit {
    background: linear-gradient(145deg, #f2f2f2, #e0e0e0);
}

/* Mobile layout: 2 cards per row */
@media (max-width: 1024px) {
    .whats-nearby-cards {
        grid-template-columns: repeat(2, 1fr); /* 2 cards per row */
    }
}

/* Mobile layout: 1 card per row */
@media (max-width: 768px) {
    .whats-nearby-cards {
        grid-template-columns: 1fr; /* 1 card per row */
    }
}




/* Custom Location Section */
.custom-location-section {
  padding: 40px 20px;
 
  
}

/* Container */
.custom-location-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  padding: 40px;
  border-radius: 12px;
  background: linear-gradient(to bottom,#ddeeff, #f1f1f1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Header Section */
.custom-location-header {
  text-align: center;
  margin-bottom: -50px;
  width: 100%;
}

.custom-location-title {
  font-size: 3rem;
  color: #004080; /* Deep blue */
  margin-bottom: 40px;
  text-transform: uppercase;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Left Side: Text & Form */
.custom-location-text {
  flex: 1;
  max-width: 50%;
  padding: 20px;
}

.custom-location-description {
  font-size: 20px;
  color: #333333; /* Darker text */
  margin-bottom: 20px;
  line-height: 1.7;
}

/* Coordinates Box */
.custom-coordinates-box {
  background-color: #eaf1f8; /* Soft blue */
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
  border-left: 4px solid #004080; /* Deep blue */
}

.custom-coordinates-title {
  font-size: 20px;
  margin-bottom: 10px;
  color: #004080;
  font-weight: 700;
}

.custom-coordinate-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.custom-coordinate-list li {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.custom-coordinate-list em {
  color: #c74e2d;
  margin-right: 8px;
}

/* Form Styling */
.custom-directions-form {
  margin-top: 20px;
}

.custom-input-field {
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  background-color: #fff;
  color: #1b2b64;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.06);
  transition: border-color 0.3s ease;
}

.custom-input-field::placeholder {
  color: #888;
}

.custom-input-field:focus {
  border-color: #004080;
  outline: none;
  box-shadow: 0 0 8px rgba(0, 64, 128, 0.2);
}

.custom-directions-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(to right, #004080, #c74e2d);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.custom-directions-btn:hover {
  background: linear-gradient(to right, #c74e2d, #004080);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* Right Side: Map Image */
.custom-location-image {
  flex: 1;
  max-width: 45%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-image {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.custom-image:hover {
  transform: scale(1.03);
}

/* Responsive Design */
@media (max-width: 768px) {
  .custom-location-container {
    flex-direction: column;
  }

  .custom-location-text,
  .custom-location-image {
    max-width: 100%;
  }

  .custom-location-title {
    font-size: 32px;
  }
}



/* 1. Full-width Title Section */
.contact-hero-banner {
  background: #f0f9f9; /* Light cyan background */
  padding: 10px 20px;
  text-align: center;
 margin-bottom:-50px;
}

.contact-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.custom-contact-title {
  font-size: 3rem;
  color: #004080; /* Deep Blue */
  margin-bottom: 40px;
  text-transform: uppercase;
  font-weight: 800;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
}

/* Custom Location Section */
.futuristic-contact-section {
  padding: 40px 20px 80px;
  background: #f0f9f9; /* Light cyan background */
}

.futuristic-contact-container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* Left Side: Contact Info */
.futuristic-contact-info {
  flex: 1;
  max-width: 520px;
  padding: 30px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Soft shadow */
  text-align: left;
  color: #004080; /* Dark blue for text */
}

.futuristic-contact-info p {
  font-size: 18px;
  color: #333;
  line-height: 1.6;
}

.futuristic-info-block {
  margin-top: 20px;
}

.futuristic-info-block h2,
.futuristic-info-block h3 {
  font-size: 22px;
  margin-bottom: 5px;
  color: #017374; /* Deep teal */
  font-weight: 700;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}

.futuristic-info-block a {
  color: #1b2b64;
  font-weight: bold;
  text-decoration: none;
}

.futuristic-info-block a:hover {
  color: #c74e2d;
  text-decoration: underline;
}

/* Right Side: Map Image */
.futuristic-image-block {
  flex: 1;
  max-width: 450px;
}

.contact-image {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.contact-image:hover {
  transform: scale(1.03);
}

/* Responsive */
@media (max-width: 768px) {
  .futuristic-contact-container {
    flex-direction: column;
  }

  .futuristic-contact-info,
  .futuristic-image-block {
    max-width: 100%;
  }

  .futuristic-contact-title {
    font-size: 32px;
  }

  .custom-contact-description {
    font-size: 16px;
  }

  .contact-image {
    margin-bottom: 60px;
  }
}



/* 🌐 Updated Sitemap Section - Americas Best Value Inn Prescott Valley Theme */
.sitemap-section {
    padding: 80px 20px;
    background: #f0f9f9; /* Soft light cyan background */
    text-align: center;
    margin-top: -60px;
}

.sitemap-container {
    max-width: 1200px;
    margin: 0 auto;
}

.sitemap-title {
    font-size: 3rem;
    color: #004080; /* Deep Blue */
    margin-bottom: 20px;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(0, 64, 128, 0.4);
}

.sitemap-subtitle {
    font-size: 1.4rem;
    color: #666666; /* Grayish color */
    margin-bottom: 50px;
    font-weight: 400;
}

.sitemap-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.sitemap-block {
    background: #cfe2f3; /* Light blue background for blocks */
    padding: 40px;
    border-radius: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 18px rgba(0, 64, 128, 0.2);
    border: 1px solid rgba(0, 64, 128, 0.25);
}

.sitemap-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 64, 128, 0.4);
    border-color: #004080;
}

.sitemap-block h2 {
    font-size: 1.8rem;
    color: #004080; /* Deep blue */
    margin-bottom: 15px;
    font-weight: 700;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
}

.sitemap-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sitemap-block ul li {
    margin-bottom: 15px;
}

.sitemap-block ul li a {
    font-size: 18px;
    color: #017374; /* Teal for links */
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

.sitemap-block ul li a i {
    margin-right: 10px;
    font-size: 1.2rem;
    color: #004080; /* Deep blue icon */
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}

.sitemap-block ul li a:hover {
    color: #004080; /* Deep blue on hover */
}

/* 📱 Responsive Design */
@media (max-width: 1024px) {
    .sitemap-links {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .sitemap-links {
        grid-template-columns: 1fr;
    }
}


/* 🌐 Updated FAQ Section - Americas Best Value Inn Prescott Valley Theme */
.new-facility-title {
  color: #004080; /* Deep Blue */
  font-weight: bold;
  text-decoration: none;
  transition: color 0.3s ease;
}

.new-facility-title:hover {
  color: #FFD700; /* Gold hover */
  text-decoration: none;
}

.faq-section {
  padding: 100px 20px;
  background: #f0f9f9; /* Soft light cyan */
  color: #333; /* Dark text */
  text-align: center;
  position: relative;
  overflow: hidden;
}

.faq-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.faq-title {
  font-size: 3rem;
  font-weight: 800;
  color: #004080; /* Deep Blue */
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none;
  text-shadow: 0 0 5px rgba(0, 75, 135, 0.2);
}

.faq-subtitle {
  font-size: 1.3rem;
  color: #666666; /* Soft gray for subtitle */
  margin-bottom: 50px;
}

.faq-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  text-align: left;
}

.faq-item {
  background: #ffffff;
  padding: 30px;
  border-radius: 15px;
  border-left: 5px solid #FFD700; /* Gold highlight */
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.faq-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.15);
}

.faq-item h2 {
  font-size: 1.8rem;
  color: #004080; /* Deep Blue */
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #FFD700; /* Gold underline */
}

.faq-item p {
  font-size: 1.1rem;
  color: #444;
  line-height: 1.8;
  margin-bottom: 15px;
}

.faq-item a {
  color: #004080; /* Deep Blue for links */
  font-weight: bold;
  text-decoration: none;
  transition: color 0.3s ease;
  position: relative;
}

.faq-item a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #FFD700; /* Gold underline on hover */
  transition: width 0.3s ease;
}

.faq-item a:hover {
  color: #FFD700;
  text-decoration: none;
}

.faq-item a:hover::after {
  width: 100%;
}

/* 📱 Responsive Design */
@media (max-width: 1024px) {
  .faq-title {
    font-size: 2.5rem;
  }

  .faq-item h2 {
    font-size: 1.6rem;
  }

  .faq-item p {
    font-size: 1rem;
  }
}
