﻿* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lora', serif;
}

body {
	background: linear-gradient(175deg, rgb(255 255 255 / 90%), rgb(178 178 178 / 28%)), url(../images/pattern.png);
    
              
    background-size: cover; /* Cover the entire screen */
    background-repeat: no-repeat;
    background-attachment: fixed; /* Fixed background for a modern look */
    color: #FAFAFA; /* Soft white text */
}





h1, h2, h3, h4, h5, h6 {
    font-family: 'Lora', serif;
    font-weight: 600;
}

p, a, li {
    font-family: 'Lora', serif;
    line-height: 1.6;
}

/* Top Bar */
.top-bar {
    background: #b4133c; /* Solid red color */
    padding: 10px 0;
    font-size: 14px;
    z-index: 1000;
    color: #4a4a4a;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.top-left a,
.top-right a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.top-left a:hover,
.top-right a:hover {
    color: #ffd700; /* Lighter yellow hover */
    transform: scale(1.1);
}

.top-right a {
    margin-left: 15px;
}

/* Main Header */
.main-header {

	background: #ffffff; /* Same as 'white' */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    padding: 35px 0;
    position: relative;
    overflow: hidden;
}

/* Header Content Layout */
.header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* Centered Logo */
.logo-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    background: #b4133c;
    padding: 10px;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 153, 51, 0.5);
}

.center-logo {
    max-width: 140px;
    height: auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.center-logo:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 20px #ffd54f);
}

/* Desktop Navigation */
.desktop-nav {
    display: flex;
    align-items: center;
    z-index: 2;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 20px;
}

.nav-links li a {
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    color: #000000; /* White text for clarity */
    transition: all 0.3s ease;
    padding: 10px 20px;
    border-radius: 20px;
    background: rgba(255, 99, 71, 0); /* Transparent by default */
    position: relative;
}

.nav-links li a:hover {
    background: #b4133c; /* Subtle hover effect */
    color: #ffcc00; /* Yellow hover text */
    transform: translateY(-3px); /* Lift effect */
}

.nav-links li a.active {
    background: #b4133c; /* Active link background */
    color: #fff; /* White text for active link */
    font-weight: bold;
}

/* Hamburger Menu */
.hamburger {
    display: none;
    font-size: 28px;
    color: #b4133c;
    cursor: pointer;
    z-index: 10;
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #ff4500, #ffcc00); /* Red-yellow gradient */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    z-index: 999;
}

.mobile-menu.active {
    display: block;
    opacity: 1;
    visibility: visible;
}

.mobile-menu-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
}

.mobile-menu ul {
    list-style: none;
    padding: 0;
}

.mobile-menu ul li {
    margin: 15px 0;
}

.mobile-menu ul li a {
    color: #fff; /* White text */
    font-size: 18px;
    text-decoration: none;
    transition: transform 0.3s ease, color 0.3s ease;
}

.mobile-menu ul li a:hover {
    color: #ffd54f; /* Yellow hover effect */
    transform: scale(1.1);
}

/* Close Button for Mobile Menu */
.mobile-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
}

/* Responsive Design */
@media (max-width: 820px) {
    .desktop-nav {
        display: none; /* Hide desktop navigation */
    }

    .hamburger {
        display: block; /* Show hamburger for mobile */
    }

    .header-content {
        justify-content: space-between;
    }

    .logo-container {
        position: static;
        transform: none;
    }
}



/* Sticky Header */
.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #FFD700; /* Solid gold/yellow */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

/* Sticky Logo */
.sticky-header .logo {
    width: 150px;
    transition: width 0.3s ease;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
}

/* Hamburger Icon for Mobile */
.sticky-header .hamburger {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #b4133c; /* White color for the hamburger icon */
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
}

.sticky-header .hamburger:hover {
    transform: scale(1.1);
    color: #FFD700; /* Yellow hover effect for the hamburger icon */
}

/* Navigation Links */
.sticky-header .nav-links {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    margin-right: 20px;
    align-items: center;
}

.sticky-header .nav-links li {
    list-style: none;
}

.sticky-header .nav-links li a {
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff; /* White text */
    padding: 10px 20px;
    border-radius: 30px;
    transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

.sticky-header .nav-links li a:hover {
    background: #FFD700; /* Yellow hover background */
    color: #d32f2f; /* Deep red hover text */
    transform: translateY(-2px); /* Lift effect */
}

.sticky-header .nav-links li a.active {
    background: #d32f2f; /* Deep red for active link */
    color: #fff; /* White text for active link */
    font-weight: bold;
}

/* Sticky Header for Mobile */
@media (max-width: 820px) {
    .sticky-header .nav-links {
        display: none; /* Hide desktop links on small screens */
    }

    .sticky-header .hamburger {
        display: block; /* Show hamburger menu */
    }
}


/* Hero Slider Styles */
.hero-slider {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.slider-container {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   background-color: transparent;
    z-index: 1;
}

.hero-content-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    max-width: 1200px;
    gap: 30px;
}

/* Hero Content */
.hero-content {
    max-width: 50%;
    color: var(--text-light);
    animation: fadeIn 1.5s ease-out;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: var(--accent-color);
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
}
.hero-title-alt {
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #004d30, #FFD700); /* Deep green to Gold gradient */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}
.hero-description {
    font-size: 1.3rem;
    line-height: 1.8;
    margin-bottom: 20px;
    color: var(--text-light);
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}

.hero-button {
    padding: 12px 40px;
    font-size: 1.2rem;
    color: var(--primary-color);
    background: var(--accent-color);
    border-radius: 50px;
    font-weight: bold;
    box-shadow: 0 10px 20px rgba(255, 215, 0, 0.5);
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
	text-decoration:none;
}

.hero-button:hover {
    transform: translateY(-5px);
    background: var(--btn-hover-color);
    box-shadow: 0 15px 30px rgba(255, 193, 7, 0.5);
}

/* Hero Graphic */
.hero-graphic img {
    width: 100%;
    max-width: 400px;
    border-radius: 10px;
	margin-top:50px;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
	border: 5px solid #FFD700;
}

/* Navigation Buttons */
.prev, .next {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.8); /* Visible background */
    color: var(--primary-color); /* Button color */
    font-size: 1.5rem;
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    z-index: 5; /* Keep above the slides */
    opacity: 1; /* Fully visible */
}

.prev:hover, .next:hover {
    background-color: var(--accent-color); /* Highlight on hover */
    transform: scale(1.1); /* Slight scaling effect */
}
.prev {
    left: 20px;
}

.next {
    right: 20px;
}
/* Ensure buttons are always visible */
.hero-slider:hover .prev,
.hero-slider:hover .next {
    opacity: 1; /* Always visible on hover */
    visibility: visible; /* Ensure visibility */
}
/* Navigation Dots */
.nav-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.dot:hover {
    transform: scale(1.2);
}

.dot.active {
    background: var(--accent-color);
}
@keyframes zoomInEffect {
    0% {
        transform: scale(0.8); /* Start smaller */
        opacity: 0; /* Start hidden */
    }
    50% {
        transform: scale(1.1); /* Slightly larger for a popping effect */
        opacity: 0.8;
    }
    100% {
        transform: scale(1); /* Return to original size */
        opacity: 1; /* Fully visible */
    }
}

/* Prevent flickering during animation */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 1s ease; /* Smooth fade-in/out */
    opacity: 0; /* Initially hidden */
    z-index: 1; /* Background */
}

.slide.active {
    z-index: 2; /* Bring active slide to the front */
    opacity: 1; /* Fully visible */
}

/* General Styles for Mobile */
@media (max-width: 768px) {
	
    .hero-slider {
        height: 80vh; /* Reduce height for smaller screens */
    }

    .hero-content-wrapper {
        flex-direction: column-reverse; /* Stack content and image vertically */
        align-items: center; /* Center align */
        gap: 20px; /* Reduce spacing between elements */
    }

    .hero-content {
        max-width: 90%; /* Increase content width */
        text-align: center; /* Center text alignment */
        padding: 0 15px; /* Add padding to avoid edge overlap */
    }

    .hero-title {
        font-size: 3.5rem;
        font-weight: bold;
        margin-bottom: 20px;
        color: var(--accent-color);
        text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
    }
    .hero-title-alt {
        font-size: 3.5rem;
        font-weight: bold;
        margin-bottom: 20px;
        background: linear-gradient(90deg, #004d30, #FFD700); /* Deep green to Gold gradient */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
    }
    .hero-description {
        font-size: 1.3rem;
        line-height: 1.8;
        margin-bottom: 20px;
        color: var(--text-light);
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
    }
    
    .hero-button {
        padding: 12px 40px;
        font-size: 1.2rem;
        color: var(--primary-color);
        background: var(--accent-color);
        border-radius: 50px;
        font-weight: bold;
        box-shadow: 0 10px 20px rgba(255, 215, 0, 0.5);
        transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
        text-decoration:none;
    }
    
    .hero-button:hover {
        transform: translateY(-5px);
        background: var(--btn-hover-color);
        box-shadow: 0 15px 30px rgba(255, 193, 7, 0.5);
    }

    .hero-graphic img {
        max-width: 280px; /* Reduce graphic size */
        margin: 0 auto;
        display: block;
    }

    .nav-dots {
        bottom: 15px; /* Adjust position of navigation dots */
    }

    .dot {
        width: 10px; /* Reduce size of dots */
        height: 10px;
    }

    /* Navigation Buttons */
    .prev, .next {
        width: 30px; /* Reduce size */
        height: 30px;
        font-size: 1.2rem;
        top: 45%; /* Adjust position */
    }
}

/* Additional Adjustments for Very Small Screens */
@media (max-width: 480px) {
    .hero-slider {
        height: 70vh; /* Further reduce height */
    }

    .hero-title {
        font-size: 2rem; /* Scale down title */
    }

    .hero-description {
        font-size: 0.9rem; /* Scale down description */
    }

    .hero-button {
        font-size: 0.9rem; /* Scale down button text */
        padding: 8px 20px; /* Adjust padding */
    }

    .hero-graphic img {
        max-width: 40%; /* Limit graphic size further */
		margin-top:70px;
    }

    .nav-dots {
        bottom: 10px; /* Bring dots closer to the bottom */
    }
}

/* Adjustments for Tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-slider {
        height: 90vh; /* Slightly reduce height for tablets */
    }

    .hero-content-wrapper {
        gap: 25px; /* Moderate spacing */
    }

    .hero-title {
        font-size: 3rem; /* Slightly smaller title */
    }

    .hero-description {
        font-size: 1.1rem; /* Slightly smaller description */
    }

    .hero-button {
        font-size: 1.1rem; /* Adjust button size */
        padding: 12px 35px; /* Adjust padding */
    }

    .hero-graphic img {
        max-width: 320px; /* Adjust image size */
    }

    .prev, .next {
        width: 35px; /* Moderate button size */
        height: 35px;
        font-size: 1.4rem;
    }
}






/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}



/* Section Header */
.section-header h2 {
    font-size: 3rem;
    color: #b4133c; /* Bright Yellow */
    text-transform: uppercase;
    margin-bottom: 10px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* Reduced shadow for slight depth */
}

.section-header p {
    color: #d32f2f; /* Purple tone inspired by the favicon */
    font-size: 1.2rem;
    margin-top: 5px;
}

/* Section Divider */
.section-header::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #FFD700, #d32f2f, #FFD700); /* Yellow, Purple, and Blue from the favicon */
    margin: 20px auto 0;
    border-radius: 2px;
}


/* Amenities Section */
.amenities-section {
    padding: 80px 20px;
    /* Warm gradient */
    color: #FAFAFA;
    position: relative;
    overflow: hidden;
}

/* Pattern Overlay */
.amenities-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('assets/images/pattern.svg') repeat; /* Subtle pattern */
    opacity: 0.1;
    z-index: 0;
}

/* Amenities Container */
.amenities-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Responsive grid */
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Amenity Cards */
.amenity {
    background: linear-gradient(357deg, #ffffff, #ffffff);
    padding: 40px 20px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Icon Styles */
.amenity em {
    font-size: 3.5rem;
    color: #b4133c; /* Warm Brown for contrast */
    margin-bottom: 20px;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Amenity Text */
.amenity p {
    font-size: 1.3rem;
    font-weight: bold;
    color: #4A3627; /* Warm Brown */
}

/* Hover Effects */
.amenity:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(255, 127, 80, 0.4); /* Stronger shadow */
}

.amenity:hover i {
    transform: scale(1.2); /* Slight bounce effect on icons */
    color: #FFD700; /* Bright Gold */
}

/* Responsive Design */
@media (max-width: 768px) {
    .amenities-container {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjust grid for smaller screens */
        gap: 30px;
    }

    .amenity i {
        font-size: 3rem; /* Adjust icon size */
    }

    .amenity p {
        font-size: 1.1rem; /* Adjust text size */
    }
}
/* Keyframes for Animations */
@keyframes slideFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideFromRight {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideFromUp {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideFromDown {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animate Amenities */
.amenity {
    opacity: 0; /* Start invisible */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Classes to Trigger Animations */
.animate-left {
    animation: slideFromLeft 0.8s ease forwards;
}

.animate-right {
    animation: slideFromRight 0.8s ease forwards;
}

.animate-up {
    animation: slideFromUp 0.8s ease forwards;
}

.animate-down {
    animation: slideFromDown 0.8s ease forwards;
}

/* Welcome Section */
.welcome-section {
    padding: 50px 20px;
   /* Warm gradient background */
    color: #FAFAFA; /* Soft white text */
}

/* Content Container */
.welcome-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 30px;
    flex-wrap: wrap;
}

/* Welcome Text */
.welcome-text {
    flex: 1;
    max-width: 60%; /* Limit text width */
}

.welcome-title {
    font-size: 3rem;
    font-weight: bold;
    color: #b4133c; /* Bright Yellow */
    margin-bottom: 20px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* Subtle shadow for slight depth */
    text-decoration: none;
}

.highlight {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: black; /* Vibrant Red from favicon/logo */
}

.description {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
    color: black; /* Blue from favicon/logo */
}

/* Read More Button */
.read-more-btn {
    display: inline-block;
    background-color: #b4133c; /* Bold Red from logo */
    color: #FAFAFA; /* Soft White */
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

.read-more-btn:hover {
    background-color: #FFD700; /* Bright Gold */
    color: #4A3627; /* Warm Brown for contrast */
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
}

/* Read More Content */
.read-more-content {
    display: none;
    margin-top: 20px;
    background-color: #b4133c; /* Purple from favicon/logo */
    color: #FAFAFA; /* Soft White text */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.read-more-content h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #FFD700; /* Bright Gold */
}

.read-more-content ul {
    list-style-type: disc;
    padding-left: 20px;
    color: #FAFAFA; /* Soft White */
}

.read-more-content ul li {
    margin-bottom: 10px;
}

/* Welcome Image */
.welcome-image {
    flex: 1;
    text-align: center;
}

.welcome-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    border: 5px solid #FFD700; /* Bright Gold border */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.welcome-image img:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
}


/* Responsive Design */
@media (max-width: 768px) {
    .welcome-content {
        flex-direction: column; /* Stack items vertically */
        text-align: center;
    }

    .welcome-text {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .welcome-image img {
        max-width: 100%;
    }
}



/* Section Styling */
.luxury-rooms-section {
    padding: 10px 20px;
    /* Red to Gold gradient */
    color: #FAFAFA; /* Soft White */
    text-align: center;
}

/* Section Header */
.section-header h2 {
    font-size: 3rem;
    color: #b4133c; /* Bright Yellow */
    text-transform: uppercase;
    margin-bottom: 10px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* Reduced shadow for slight depth */
}

.section-header p {
    font-size: 1.2rem;
    color: black; /* Blue for contrast */
    margin-bottom: 40px;
}

/* Room Cards Container */
.rooms-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Room Cards */
.room-card {
    position: relative;
    height: 400px;
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    opacity: 0; /* Hidden initially */
    transform: translateX(100px); /* Start off-screen */
    transition: transform 0.8s ease, opacity 0.8s ease;
    transition-delay: var(--delay, 0s); /* Domino effect delay */
}

/* Active State for Animation */
.room-card.active {
    opacity: 1;
    transform: translateX(0); /* Move into view */
}

/* Exit Animation */
.room-card.exit {
    transform: translateX(-100px); /* Exit to the left */
    opacity: 0;
}

/* Overlay Styling */
.room-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3)); /* Subtle dark overlay */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.room-card:hover .room-overlay {
    opacity: 1;
}

.room-overlay h3 {
    font-size: 1.8rem;
    color: #FFD700; /* Bright Gold */
    margin-bottom: 15px;
    text-transform: uppercase;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.6); /* Subtle shadow */
}

.room-overlay p {
    font-size: 1rem;
    color: #FAFAFA; /* Soft White */
    margin-bottom: 20px;
    text-align: center;
    line-height: 1.6;
}

/* Button Styling */
.room-btn {
    display: inline-block;
    padding: 12px 30px;
    background: #b4133c; /* Bright Red from logo */
    color: #FAFAFA; /* Soft White */
    border-radius: 50px;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease;
    box-shadow: 0 5px 15px rgba(255, 69, 0, 0.5); /* Vibrant red shadow */
}

.room-btn:hover {
    background: #FFD700; /* Bright Gold */
    transform: translateY(-5px);
    color: #4A3627; /* Warm Brown for contrast */
}




/* Updated CSS for Futuristic Nearby Attractions Section */
.futuristic-attractions-section {
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(46, 43, 40, 0.9), rgba(74, 54, 39, 0.9)), 
                url('../images/fishing.jpg');/* Rustic Brown Gradient */
     background-size: cover; /* Cover the entire screen */
    background-repeat: no-repeat;
    background-attachment: fixed;
	color: #FAFAF0; /* Ivory Text */
    text-align: center;
}

.futuristic-header h2 {
    font-size: 2.8rem;
    color: #FFD700; /* Bright Gold */
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.futuristic-header p {
    font-size: 1.2rem;
    color: ; /* Rustic Orange */
    margin-bottom: 40px;
}

.futuristic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    perspective: 1500px; /* Perspective for 3D effect */
}

/* Attraction Card */
.attraction-card {
    position: relative;
    width: 100%;
    height: 300px;
    transform-style: preserve-3d;
    transition: transform 0.8s ease;
    cursor: pointer;
}

.attraction-card:hover {
    transform: rotateY(180deg); /* Flip effect */
}

/* Card Front and Back */
.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* Card Front */
.card-front {
    background-size: cover; /* Ensure the image covers the box */
    background-position: center; /* Center the image */
    display: flex;
    align-items: flex-end; /* Position text at the bottom */
    justify-content: center;
    padding: 15px;
    color: #FAFAF0;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); /* Subtle shadow for text visibility */
    font-size: 1.2rem; /* Adjust font size */
}


/* Card Back */
.card-back {
    background: #2E2B28; /* Charcoal Brown */
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #FAFAF0;
    font-size: 1rem;
    line-height: 1.6;
    text-align: center;
}

.card-back a {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background: #FF7F50; /* Rustic Orange */
    color: #FAFAF0; /* Ivory Text */
    border-radius: 50px;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease;
}

.card-back a:hover {
    background: #FFD700; /* Bright Gold Hover */
    transform: scale(1.1);
}
/* More Attractions Button */
.more-attractions {
    text-align: center;
    margin-top: 40px;
}

.more-attractions-btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: #FFD700; /* Bright Gold */
    color: #2E2B28; /* Dark Brown */
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 50px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.more-attractions-btn:hover {
    background-color:#b4133c; /* Rustic Orange */
    color: #FAFAF0; /* Ivory */
    transform: scale(1.1);
}



/* Futuristic Photo Gallery */
.futuristic-photo-gallery {
    padding: 80px 20px;
   
    color: #fff;
    text-align: center;
    overflow: hidden;
}

.gallery-header h2 {
    font-size: 3rem;
    color: #FFD700; /* Bright Gold */
    text-transform: uppercase;
    margin-bottom: 10px;
    text-shadow: 0 4px 10px rgba(255, 215, 0, 0.6);
}

.gallery-header p {
    font-size: 1.2rem;
    color: #FF7F50; /* Vibrant Orange */
    margin-bottom: 40px;
}

.carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1500px;
    position: relative;
    transform-style: preserve-3d;
    height: 300px;
    margin-top: 50px;
    animation: spin 15s infinite linear;
    cursor: grab; /* Default cursor style */
}

.carousel:active {
    cursor: grabbing; /* Style when dragging */
}

.carousel:hover {
    animation-play-state: paused; /* Pause spin animation on hover */
}

.carousel-item {
    position: absolute;
    width: 280px;
    height: 180px;
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    transform-origin: center;
    transform: rotateY(calc(var(--i) * 60deg)) translateZ(600px);
    transition: transform 1s ease, opacity 1s ease;
    opacity: 0.8;
}

.carousel-item:hover {
    opacity: 1;
    transform: scale(1.2) rotateY(calc(var(--i) * 60deg)) translateZ(600px);
    box-shadow: 0 15px 30px rgba(255, 127, 80, 0.7);
}

/* Title Overlay for Carousel Items */
.carousel-item::after {
    content: attr(data-title);
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #FFD700; /* Bright Gold */
    text-align: center;
    padding: 10px;
    font-size: 1rem;
    border-radius: 5px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.carousel-item:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* Lightbox Modal */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn 0.6s ease-out;
}

.lightbox-image {
    max-width: 80%;
    max-height: 80%;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    animation: zoomIn 0.6s ease-out;
}

.lightbox-title {
    margin-top: 20px;
    font-size: 1.5rem;
    color: #FFD700; /* Bright Gold */
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
    text-align: center;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2rem;
    color: #FFD700;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.lightbox-close:hover {
    transform: scale(1.2);
    color: #FF7F50;
}

/* Keyframes for 3D Carousel */
@keyframes spin {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

/* Lightbox Fade-In */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Lightbox Zoom-In */
@keyframes zoomIn {
    from {
        transform: scale(0.8);
    }
    to {
        transform: scale(1);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .carousel-item {
        width: 200px;
        height: 120px;
    }

    .gallery-header h2 {
        font-size: 2.5rem;
    }

    .gallery-header p {
        font-size: 1rem;
    }
}

/* Lightbox Navigation Buttons */
.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #FFD700; /* Bright Gold */
    border: none;
    font-size: 2rem;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
    transition: background-color 0.3s ease, transform 0.3s ease;
    z-index: 10;
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 127, 80, 0.8); /* Vibrant Orange */
    transform: scale(1.2);
}


/* Footer Section */
.footer-section {
    background-color:#b4133c; /* Solid color - deep reddish pink */
    color: #FAFAFA; /* Soft White for Text */
    padding: 60px 20px;
    font-family: 'Poppins', sans-serif;
}

/* Top Section: Logo and Social Media */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #FFD700; /* Bright Gold Divider */
}

.footer-logo-area {
    text-align: center;
}

.footer-logo {
    font-size: 50px;
    font-weight: 700;
    color: #FFD700; /* Bright Gold for Logo Text */
    text-shadow: 2px 2px 8px rgba(255, 215, 0, 0.6); /* Gold Glow Effect */
}

.footer-social a {
    margin: 0 10px;
    color: #FFD700; /* Bright Gold for Social Icons */
    font-size: 1.8rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

.footer-social a:hover {
    color: #FAFAFA; /* White Hover Effect */
    transform: scale(1.2);
}

/* Middle Section: Address, Quick Links, and Map */
.footer-middle {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 40px 0;
    gap: 20px;
}

.footer-address,
.footer-links {
    flex: 1;
    padding: 0 20px;
}

.footer-address h3,
.footer-links h3 {
    color: #FFD700; /* Bright Gold for Headings */
    font-size: 1.8rem;
    text-transform: uppercase;
    margin-bottom: 15px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}

.footer-address p,
.footer-links ul li a {
    font-size: 1rem;
    color: #FAFAFA; /* Soft White for Text */
    text-decoration: none;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    columns: 2;
    gap: 10px;
}

.footer-links ul li {
    margin-bottom: 10px;
}

.footer-links ul li a:hover {
    color: #FFD700; /* Gold on Hover */
}

/* Map Section */
.footer-map {
    margin-top: 40px;
    text-align: center;
}

.footer-map h3 {
    font-size: 1.8rem;
    color: #FFD700; /* Bright Gold */
    margin-bottom: 20px;
    text-transform: uppercase;
}

.map-container iframe {
    width: 100%;
    height: 300px;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
    border: 2px solid #FFD700; /* Gold Border */
}

/* Bottom Section */
.footer-bottom {
    text-align: center;
    margin-top: 30px;
}

.divider {
    height: 1px;
    background: #FFD700; /* Gold Divider */
    margin: 15px auto;
    width: 80%;
}

.credits a {
    color: #FFD700;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
}

.credits a:hover {
    color: #FAFAFA;
    text-shadow: 0 0 10px #FFD700;
}
/* Address Section */
.footer-address p {
    font-size: 1rem;
    color: #EDEDED;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Icons */
.footer-address .address-icon,
.footer-address .phone-icon,
.footer-address .email-icon {
    color: #FF7F50; /* Warm orange */
    font-size: 1.2rem;
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-address .address-icon:hover,
.footer-address .phone-icon:hover,
.footer-address .email-icon:hover {
    color: #FF4500; /* Deep orange */
    transform: scale(1.1);
}

/* Phone Link */
.footer-address .phone-link {
    color: #FFD700; /* Gold */
    text-decoration: none;
    font-weight: 600; /* Bold for emphasis */
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.footer-address .phone-link:hover {
    color: #FF7F50; /* Warm orange */
    text-shadow: 0 0 10px rgba(255, 127, 80, 0.7); /* Glow effect */
}

/* Email Link */
.footer-address .email-link {
    color: #FFD700; /* Gold */
    text-decoration: none;
    font-weight: 600; /* Bold for emphasis */
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.footer-address .email-link:hover {
    color: #FF7F50; /* Warm orange */
    text-shadow: 0 0 10px rgba(255, 127, 80, 0.7); /* Glow effect */
}

/* Responsive Design for Footer */
@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
        text-align: center;
        margin-bottom: 20px;
    }

    .footer-logo-area {
        margin-bottom: 20px;
    }

    .footer-social {
        margin-bottom: 20px;
    }

    .footer-middle {
        flex-direction: column;
        text-align: left;
        gap: 30px; /* Adds space between sections */
    }

    .footer-address,
    .footer-links,
    .footer-map {
        margin-bottom: 20px; /* Space between each section */
    }

    .footer-map iframe {
        width: 100%; /* Full width for mobile */
        height: 250px; /* Smaller height for mobile */
    }

    .footer-bottom {
        margin-top: 30px;
    }

    .credits {
        font-size: 0.85rem; /* Smaller font for mobile */
    }
}
.footer-links ul {
    list-style: disc; /* Add bullets */
    padding-left: 20px; /* Indentation for bullets */
    columns: 2; /* Display in two columns */
    column-gap: 30px; /* Space between the columns */
}

.back-to-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: #FFD700; /* Yellow background for visibility */
        color: #000; /* Black icon color */
        padding: 10px 15px;
        border-radius: 50%;
        font-size: 24px; /* Size of the icon */
        z-index: 1000;
        display: none; /* Hidden by default */
        cursor: pointer;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease;
    }

    /* Hover effect */
    /* Hover effect */
    .back-to-top:hover {
        background-color: #b4133c; /* Red background on hover */
        color: #fff; /* White icon color on hover */
    }

    /* Optional animation for smooth scrolling */
    html {
        scroll-behavior: smooth;
    }
	
	
/* Inner Page Hero Section */
.inner-hero {
    width: 100vw; /* Full viewport width */
    min-height: 300px; /* Minimum height for smaller screens */
    height: 500px; /* Default height for larger screens */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    color: #FAFAF0; /* Light text */
    padding: 50px 20px;
    background-size: cover;
    background-position: center;
    overflow: hidden; /* Prevents any extra content from overflowing */
}

/* Prevents any unwanted horizontal scrolling */
html, body {
    overflow-x: hidden;
    width: 100%;
}

/* Hero Content Wrapper */
.inner-hero-content {
    width: 100%;
    max-width: 1200px; /* Set max width to avoid full-width stretching */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Hero Title */
.inner-hero-title {
    font-size: 42px;
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
}

/* Hero Description */
.inner-hero-description {
    font-size: 18px;
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto;
    display: block;
}

/* ✅ Responsive Adjustments for Mobile & Tablets */
@media (max-width: 1024px) {
    .inner-hero {
        height: 400px; /* Reduce height for tablets */
        padding: 40px 20px;
    }
    
    .inner-hero-title {
        font-size: 36px; /* Reduce title size */
    }

    .inner-hero-description {
        font-size: 16px; /* Reduce description size */
    }
}

@media (max-width: 768px) {
    .inner-hero {
        height: 420px; /* Reduce height for mobile */
        padding: 30px 15px;
    }

    .inner-hero-title {
        font-size: 30px;
    }

    .inner-hero-description {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .inner-hero {
        height: 420px; /* Adjust height for small screens */
        padding: 20px 10px;
    }

    .inner-hero-title {
        font-size: 24px; /* Smaller font for title */
    }

    .inner-hero-description {
        font-size: 12px; /* Smaller font for description */
    }
}

/* Hotel Facilities Section */
.hotel-facilities {
    padding: 30px 20px;
    /* Dark theme with gradient */
    text-align: center;
    overflow: hidden;
}

/* Title Centering */
.facilities-header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 40px;
}

/* Section Title */
.facilities-title {
    font-size: 38px;
    font-weight: 400;
    color: #FFD700; /* Gold color for a luxury feel */
    text-transform: uppercase;
    text-align: center;
    position: relative;
    opacity: 0;
    transform: translateY(-20px);
    animation: fadeInTitle 1s ease-in-out forwards;
}

/* Title Underline */
.facilities-title::after {
    content: "";
    width: 120px;
    height: 5px;
    background: #FF4500; /* Bright orange underline */
    display: block;
    margin: 10px auto;
    border-radius: 3px;
}

/* Facilities Grid */
.facilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    justify-items: center;
}

/* Facility Box */
.facility-box {
    background: rgba(255, 255, 255, 0.15); /* Slightly transparent white */
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    width: 100%;
    max-width: 320px;
    backdrop-filter: blur(5px); /* Glass effect */
    border: 1px solid rgba(255, 255, 255, 0.3);
    
    /* Animation */
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInBox 1s ease-in-out forwards;
}

/* Staggered Animations */
.facility-box:nth-child(1) { animation-delay: 0.2s; }
.facility-box:nth-child(2) { animation-delay: 0.4s; }
.facility-box:nth-child(3) { animation-delay: 0.6s; }
.facility-box:nth-child(4) { animation-delay: 0.8s; }
.facility-box:nth-child(5) { animation-delay: 1s; }
.facility-box:nth-child(6) { animation-delay: 1.2s; }
.facility-box:nth-child(7) { animation-delay: 1.4s; }
.facility-box:nth-child(8) { animation-delay: 1.6s; }

/* Hover Effect */
.facility-box:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 8px 18px rgba(255, 215, 0, 0.4);
    background: rgba(255, 255, 255, 0.25);
}

/* Icons */
.facility-box em {
    font-size: 50px;
    color: #FF4500; /* Bright orange icons */
    margin-bottom: 15px;
}

/* Facility Title */
.facility-box h3 {
    font-size: 22px;
    font-weight: 600;
    color: #FFD700; /* Gold text for better contrast */
    margin-bottom: 8px;
}

/* Facility Description */
.facility-box p {
    font-size: 16px;
    color: #fff;
    max-width: 85%;
    margin: 0 auto;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .facilities-title {
        font-size: 32px;
    }

    .facility-box {
        padding: 25px;
    }

    .facility-box em {
        font-size: 40px;
    }

    .facility-box h3 {
        font-size: 20px;
    }

    .facility-box p {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .facilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .facilities-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .facilities-title {
        font-size: 28px;
    }

    .facility-box {
        padding: 20px;
    }

    .facility-box em {
        font-size: 35px;
    }

    .facility-box h3 {
        font-size: 18px;
    }

    .facility-box p {
        font-size: 12px;
    }
}

/* Animations */
@keyframes fadeInTitle {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInBox {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Extra Amenities Section */
.extra-amenities {
    padding: 80px 20px;
    background: linear-gradient(135deg, #222, #333); /* Dark gradient for luxury look */
    color: #FAFAFA;
    position: relative;
    overflow: hidden;
}

/* Title Styling */
.extra-amenities-header {
    text-align: center;
    margin-bottom: 40px;
}

.extra-amenities-title {
    font-size: 38px;
    font-weight: 500;
    color: #FFD700; /* Gold color for premium feel */
    text-transform: uppercase;
}

/* Extra Amenities Container */
.extra-amenities-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Extra Amenity Category */
.extra-amenity-category {
    background: rgba(255, 255, 255, 0.1); /* Light transparent background */
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Extra Amenity Category Title */
.extra-amenity-category h3 {
    font-size: 22px;
    font-weight: bold;
    color: #FFD700;
    margin-bottom: 15px;
}

/* Amenity List */
.extra-amenity-category ul {
    list-style: none;
    padding: 0;
}

.extra-amenity-category ul li {
    font-size: 18px;
    color: #FAFAFA;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

/* Icons */
.extra-amenity-category em {
    font-size: 22px;
    color: #FFD700; /* Gold for premium feel */
}

/* Hover Effect */
.extra-amenity-category:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 18px rgba(255, 215, 0, 0.3); /* Gold shadow */
}

/* Responsive Design */
@media (max-width: 768px) {
    .extra-amenities-container {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 30px;
    }

    .extra-amenities-title {
        font-size: 32px;
    }

    .extra-amenity-category h3 {
        font-size: 20px;
    }

    .extra-amenity-category ul li {
        font-size: 16px;
    }

    .extra-amenity-category em {
        font-size: 20px;
    }
}
/* Things to Do Section */
.explore-section {
    padding: 80px 20px;
   /* Dark gradient */
    text-align: center;
    color: #FAFAFA;
}

/* Section Header */
.explore-header {
    margin-bottom: 40px;
}

.explore-title {
    font-size: 36px;
    font-weight: 600;
    color: #FFD700; /* Gold for luxury */
    text-transform: uppercase;
    text-decoration: none;
}

.explore-subtitle {
    font-size: 18px;
    font-weight: 300;
    max-width: 700px;
    margin: 0 auto;
    color: #DDD;
}

/* Grid Layout */
.explore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Individual Explore Boxes */
.explore-box {
    background: rgba(255, 255, 255, 0.15); /* Slightly transparent */
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.explore-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(255, 215, 0, 0.4); /* Gold hover effect */
}

/* Icons */
.explore-box em {
    font-size: 50px;
    color: #FFD700; /* Gold icons */
    margin-bottom: 15px;
}

/* Explore Titles */
.explore-box h3 {
    font-size: 22px;
    font-weight: 600;
    color: #FFF;
    margin-bottom: 10px;
}

/* Explore Descriptions */
.explore-box p {
    font-size: 16px;
    color: #DDD;
    max-width: 85%;
    margin: 0 auto;
}

/* Distance Tag */
.distance {
    display: block;
    font-size: 14px;
    color: #FFD700;
    margin-top: 8px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .explore-title {
        font-size: 32px;
    }
    .explore-box {
        padding: 25px;
    }
    .explore-box em {
        font-size: 40px;
    }
    .explore-box h3 {
        font-size: 20px;
    }
    .explore-box p {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .explore-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .explore-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .explore-title {
        font-size: 28px;
    }
    .explore-box {
        padding: 20px;
    }
    .explore-box em {
        font-size: 35px;
    }
    .explore-box h3 {
        font-size: 18px;
    }
    .explore-box p {
        font-size: 12px;
    }
}

/* Contact Section */
.futuristic-contact-section {
    padding: 40px 20px;
    /* Dark brown background to match the layout */
    color: #FAFAF0; /* Soft ivory for readability */
}

.futuristic-contact-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
}

/* Left Side: Contact Info */
.futuristic-contact-info {
    flex: 1;
    color: #FFD700; /* Gold for contrast */
}

.futuristic-contact-title {
    font-size: 2.8rem;
    margin-bottom: 20px;
    color: #FFB000; /* Warm gold for titles */
    text-decoration: none;
}

.futuristic-info-block {
    margin-bottom: 30px;
}

.futuristic-info-block h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: #FFD700; /* Gold headings */
}

.futuristic-info-block p {
    font-size: 1.2rem;
    margin: 5px 0;
    color: #FAFAF0; /* Light ivory for better contrast */
}

.futuristic-info-block a {
    color: #FF7F50; /* Rustic orange for links */
    text-decoration: none;
}

.futuristic-info-block a:hover {
    color: #FFD700; /* Gold hover effect */
}

/* Right Side: Image Styling */
.futuristic-image-block {
    flex: 1;
}

.contact-image {
    width: 100%;
    max-width: 500px;
    border-radius: 15px;
    box-shadow: 0 8px 30px rgba(255, 176, 0, 0.3); /* Soft gold glow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-image:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 35px rgba(255, 176, 0, 0.5); /* Stronger gold shadow on hover */
}

/* Responsive Design */
@media (max-width: 768px) {
    .futuristic-contact-container {
        flex-direction: column;
    }

    .contact-image {
        margin-top: 30px;
    }

    .futuristic-contact-title {
        font-size: 2.5rem;
    }

    .futuristic-info-block h2 {
        font-size: 1.6rem;
    }

    .futuristic-info-block p {
        font-size: 1rem;
    }
}




/* Modern Location Section */
.modern-location-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 20px;
    /* Dark brown background from layout */
    color: #FFD700; /* Gold for premium contrast */
}

.modern-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 50px;
    width: 100%;
    max-width: 1200px;
    background-color: rgba(47, 39, 31, 0.9); /* Dark brownish-gray with transparency */
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); /* Deep shadow for depth */
}

/* Left Side: Location Info */
.location-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.location-title {
    font-size: 2.8rem;
    color: #FFB000; /* Warm gold for the title */
    margin-bottom: 20px;
    text-transform: uppercase;
    text-decoration: none;
}

.location-description {
    font-size: 1.3rem;
    margin-bottom: 30px;
    color: #FAFAF0; /* Light ivory for readability */
}

/* Coordinates Box */
.coordinates-box {
    background-color: rgba(255, 176, 0, 0.1); /* Light gold transparency */
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: 0 8px 20px rgba(255, 176, 0, 0.15); /* Subtle gold shadow */
}

.coordinates-title {
    font-size: 1.8rem;
    color: #FFD700; /* Gold for heading */
    margin-bottom: 15px;
}

.coordinate {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: #FF7F50; /* Rustic orange for visibility */
}

.coordinate em {
    font-size: 24px;
    margin-right: 10px;
    color: #FF7F50; /* Orange for icons */
}

/* Directions Form */
.directions-form {
    margin-top: 20px;
}

.input-field {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    border: 2px solid #FFD700; /* Gold border */
    background-color: rgba(47, 39, 31, 0.5); /* Transparent dark brown */
    color: #FFD700; /* Gold text */
    font-size: 1rem;
}

.input-field::placeholder {
    color: rgba(255, 176, 0, 0.6); /* Light gold placeholder text */
}

.directions-btn {
    width: 100%;
    padding: 15px;
    background-color: #FF7F50; /* Vibrant orange for CTA */
    border: none;
    color: #ffffff;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.directions-btn:hover {
    background-color: #FFD700; /* Gold hover effect */
    color: #000000;
}

/* Right Side: Image */
.location-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.location-image .image {
    width: 100%;
    max-width: 500px;
    border-radius: 15px;
    box-shadow: 0 8px 30px rgba(255, 176, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.location-image .image:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 50px rgba(255, 176, 0, 0.25);
}

/* Responsive Design */
@media (max-width: 768px) {
    .modern-container {
        flex-direction: column;
        padding: 30px;
    }

    .location-image {
        margin-top: 30px;
    }
}


/* Link Style */
.cgsl {
    color: #FFD700; /* Gold */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

.cgsl:hover {
    color: #FF5733; /* Bright orange */
    text-decoration: none;
}
/* Sitemap Section */
.sitemap-section {
    padding: 80px 20px;
   /* Dark brown background */
    color: #FFD700; /* Gold text for contrast */
    text-align: center;
}

.sitemap-container {
    max-width: 1200px;
    margin: 0 auto;
}

.sitemap-title {
    font-size: 3rem;
    color: #FFB000; /* Warm gold for a premium look */
    margin-bottom: 20px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.sitemap-subtitle {
    font-size: 1.5rem;
    color: #E89B41; /* Orange-gold for contrast */
    margin-bottom: 50px;
}

.sitemap-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* Sitemap Block Styling */
.sitemap-block {
    background-color: #3F3B35; /* Dark brownish-gray for depth */
    padding: 40px;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.sitemap-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(255, 176, 0, 0.4); /* Gold glow effect */
}

.sitemap-block h2 {
    font-size: 1.8rem;
    color: #FFD700; /* Gold for section headers */
    margin-bottom: 15px;
    text-transform: uppercase;
}

.sitemap-block ul {
    list-style: none;
    padding: 0;
}

.sitemap-block ul li {
    margin-bottom: 15px;
}

.sitemap-block ul li a {
    font-size: 1.2rem;
    color: #FFF5D1; /* Soft ivory text */
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

.sitemap-block ul li a i {
    margin-right: 10px;
    font-size: 1rem;
    color: #FFB000; /* Gold chevron icon */
}

.sitemap-block ul li a:hover {
    color: #FF7F50; /* Rustic orange 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;
    }
}
 
 
 
/* FAQ Section with Custom Layout Colors */
.faq-section {
    padding: 100px 20px;
     /* Dark brown gradient */
    color: #FFD700; /* Gold text */
    text-align: center;
    position: relative;
    overflow: hidden;
}



.faq-section::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    background: #FFD700; /* Gold */
    border-radius: 50%;
    opacity: 0.1;
    z-index: 0;
}

.faq-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.faq-title {
    font-size: 3rem;
    font-weight: bold;
    color: #FFD700; /* Gold */
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.faq-subtitle {
    font-size: 1.4rem;
    color: #FFA500; /* Warm Orange */
    margin-bottom: 50px;
    text-decoration: none;
}

.faq-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: left;
}

.faq-item {
    background: #4A2E17; /* Rich Brown */
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid #FFD700; /* Gold border */
}

.faq-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(255, 69, 0, 0.3); /* Subtle glow */
}

.faq-item h2 {
    font-size: 1.8rem;
    color: #FFD700; /* Gold */
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 10px;
    border-bottom: 2px solid #FF4500; /* Orange underline */
}

.faq-item p {
    font-size: 1.1rem;
    color: #F5DEB3; /* Soft Beige */
    line-height: 1.8;
    margin-bottom: 15px;
}

.faq-item a {
    color: #FFD700; /* Gold */
    text-decoration: none;
    font-weight: bold;
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
}

.faq-item a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #FF4500; /* Orange underline */
    transition: width 0.3s ease;
}

.faq-item a:hover {
    color: #FF4500; /* Orange */
}

.faq-item a:hover::after {
    width: 100%;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .faq-list {
        grid-template-columns: 1fr;
    }

    .faq-title {
        font-size: 2.5rem;
    }

    .faq-item h2 {
        font-size: 1.6rem;
    }

    .faq-item p {
        font-size: 1rem;
    }
}


/* Accessibility Assistance Section */
.accessibility-assistance {
    background: #b4133c; /* Solid Red Color */
    color: #fff; /* White text */
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 15px;
    border-top: 2px solid #fff; /* Thin white top border */
}

.accessibility-assistance a {
    color: #FFD700; /* Gold for contact number */
    text-decoration: none;
    font-weight: bold;
}

.accessibility-assistance a:hover {
    color: #FFA500; /* Bright Orange on hover */
    text-decoration: underline;
}





/* Laurel River Lake Intro Section */
.river-container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    gap: 50px;
    align-items: center;
    flex-wrap: wrap;
    text-align: left;
	margin-top:10%;
}

.river-text {
    flex: 1;
    font-size: 1.2rem;
    line-height: 1.8;
    color: #EDEDED; /* Light Gray for readability */
}

.river-text h2 {
    font-size: 2.5rem;
    color: #FFD700; /* Gold Accent for consistency */
    margin-bottom: 15px;
}

.river-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.river-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 15px;
    box-shadow: 0px 4px 10px rgba(255, 215, 0, 0.4);
}

/* Activities Section */
.river-activities {
    background: #3B2F27; /* Dark Brown with a warm feel */
    color: #ffffff;
    padding: 80px 20px;
}

.river-activities h2 {
    font-size: 2.5rem;
    color: #FFD700; /* Gold Accent */
    margin-bottom: 30px;
	text-align: center;
}

.activities-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.activity-card {
    background: #4B3A2D; /* Warm earthy brown for contrast */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s ease;
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.1);
}

.activity-card:hover {
    transform: scale(1.05);
}

.activity-card img {
    width: 100%;
    max-width: 200px;
    border-radius: 10px;
}

.activity-info h3 {
    font-size: 1.5rem;
    color: #FFD700; /* Gold for text contrast */
    margin-top: 15px;
}

.activity-info p {
    font-size: 1rem;
    color: #DDDDDD; /* Soft white for better readability */
}

/* Stay Nearby Section */
.stay-nearby {
    background: #2E1F14; /* Deep Dark Brown for a premium feel */
    color: #ffffff;
    padding: 80px 20px;
}

.stay-container {
    max-width: 800px;
    margin: 0 auto;
}

.stay-container h2 {
    font-size: 2.5rem;
    color: #FFD700; /* Gold heading */
    margin-bottom: 20px;
}

.stay-container p {
    font-size: 1.2rem;
    color: #CCCCCC;
    margin-bottom: 20px;
}

.stay-btn {
    display: inline-block;
    padding: 15px 30px;
    background: #FFD700; /* Gold CTA */
    color: #111;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease;
}

.stay-btn:hover {
    background: #FFA500; /* Bright orange hover effect */
    transform: scale(1.05);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .river-container {
        flex-direction: column;
        text-align: center;
		margin-top:30%;
    }
    
    .river-image img {
        max-width: 100%;
    }

    .activities-container {
        grid-template-columns: 1fr;
    }
}




/* University Information Section */
.university-info {
    background: #2E1F14;
    color: #FAFAFA;
    padding: 80px 20px;
	margin-top:10%;
}

.university-wrapper {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
    align-items: center;
    flex-wrap: wrap;
}

.university-left {
    flex: 1;
    text-align: left;
}

.university-left h2 {
    font-size: 2.5rem;
    color: #FFD700;
    margin-bottom: 15px;
}

.university-left p {
    font-size: 1.2rem;
    line-height: 1.8;
}

.university-right {
    flex: 1;
}

.university-right img {
    width: 100%;
    max-width: 500px;
    border-radius: 15px;
    box-shadow: 0px 4px 10px rgba(255, 215, 0, 0.4);
}

/* University Highlights Section */
.university-highlights {
    background: #3B2F27;
    padding: 80px 20px;
    text-align: center;
}

.highlights-wrapper h2 {
    font-size: 2.5rem;
    color: #FFD700;
    margin-bottom: 30px;
}

.highlight-boxes {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.highlight-box {
    background: #4B3A2D;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    max-width: 300px;
    transition: transform 0.3s ease;
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.1);
}

.highlight-box:hover {
    transform: scale(1.05);
}

/* University Attractions Section */
.university-attractions {
    background: #3B2F27;
    padding: 80px 20px;
    text-align: center;
    color: #FAFAFA;
}

.university-attractions h2 {
    font-size: 2.5rem;
    color: #FFD700;
    margin-bottom: 30px;
}

.attractions-wrapper {
    display: flex;
    gap: 40px;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.attractions-text {
    flex: 1;
    text-align: left;
}

.attractions-text p {
    font-size: 1.2rem;
    color: #DDDDDD;
    line-height: 1.8;
}

.attractions-image {
    flex: 1;
}

.attractions-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 15px;
    box-shadow: 0px 4px 10px rgba(255, 215, 0, 0.4);
}

/* Stay Near University Section */
.university-stay {
    background: #2E1F14;
    padding: 80px 20px;
    text-align: center;
}

.stay-content h2 {
    font-size: 2.5rem;
    color: #FFD700;
    margin-bottom: 20px;
}

.stay-content p {
    font-size: 1.2rem;
    color: #CCCCCC;
    margin-bottom: 20px;
}

.stay-btn {
    display: inline-block;
    padding: 15px 30px;
    background: #FFD700;
    color: #111;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease;
}

.stay-btn:hover {
    background: #FFA500;
    transform: scale(1.05);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .university-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .attractions-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .highlight-boxes {
        flex-direction: column;
        align-items: center;
    }
}



/* Music Hall of Fame Page Styling */

/* Music Info Section */
.music-info {
    background: #1E130C;
    color: #FAFAFA;
    padding: 80px 20px;
	margin-top:10%;
}

.music-wrapper {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    gap: 50px;
    align-items: center;
    flex-wrap: wrap;
}

.music-left {
    flex: 1;
    text-align: left;
}

.music-left h2 {
    font-size: 2.5rem;
    color: #FFD700;
    margin-bottom: 15px;
}

.music-left p {
    font-size: 1.2rem;
    line-height: 1.8;
}

.music-right {
    flex: 1;
}

.music-right img {
    width: 100%;
    max-width: 500px;
    border-radius: 15px;
    box-shadow: 0px 4px 10px rgba(255, 215, 0, 0.4);
}

/* Music Experience Section */
.music-experience {
    background: #2D1B10;
    padding: 80px 20px;
    text-align: center;
    color: #FAFAFA;
}

.experience-container h2 {
    font-size: 2.5rem;
    color: #FFD700;
    margin-bottom: 30px;
}

.experience-boxes {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.experience-box {
    background: #3B2618;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    max-width: 300px;
    transition: transform 0.3s ease;
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.1);
}

.experience-box:hover {
    transform: scale(1.05);
}

/* Stay Near the Music Hall Section */
.music-stay {
    background: #1E130C;
    padding: 80px 20px;
    text-align: center;
    color: #FAFAFA;
}

.stay-wrapper {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    gap: 50px;
    align-items: center;
    flex-wrap: wrap;
}

.stay-text {
    flex: 1;
    text-align: left;
}

.stay-text h2 {
    font-size: 2.5rem;
    color: #FFD700;
    margin-bottom: 15px;
}

.stay-text p {
    font-size: 1.2rem;
    line-height: 1.8;
}

.stay-image {
    flex: 1;
}

.stay-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 15px;
    box-shadow: 0px 4px 10px rgba(255, 215, 0, 0.4);
}

.stay-btn {
    display: inline-block;
    padding: 15px 30px;
    background: #FFD700;
    color: #111;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease;
}

.stay-btn:hover {
    background: #FFA500;
    transform: scale(1.05);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .music-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .stay-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .experience-boxes {
        flex-direction: column;
        align-items: center;
    }
}





/* Dining Page Styling */

/* Dining Info Section */
.dining-info {
    background: #251A0F;
    color: #FAFAFA;
    padding: 80px 20px;
	margin-top:10%;
}

.dining-container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    gap: 50px;
    align-items: center;
    flex-wrap: wrap;
}

.dining-text {
    flex: 1;
    text-align: left;
}

.dining-text h2 {
    font-size: 2.5rem;
    color: #FFD700;
    margin-bottom: 15px;
    text-decoration: none;
}

.dining-text p {
    font-size: 1.2rem;
    line-height: 1.8;
}

.dining-image {
    flex: 1;
}

.dining-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 15px;
    box-shadow: 0px 4px 10px rgba(255, 215, 0, 0.4);
}

/* Dining Options Section */
.dining-options {
    background: #2D2117;
    padding: 80px 20px;
    text-align: center;
    color: #FAFAFA;
}

.options-container h2 {
    font-size: 2.5rem;
    color: #FFD700;
    margin-bottom: 30px;
}

.restaurant-boxes {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.restaurant-box {
    background: #3B2A1F;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    max-width: 250px;
    transition: transform 0.3s ease;
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.1);
}

.restaurant-box:hover {
    transform: scale(1.05);
}

/* Stay Near the Best Dining Section */
.stay-dining {
    background: #1E130C;
    padding: 80px 20px;
    text-align: center;
    color: #FAFAFA;
}

.stay-dining-container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    gap: 50px;
    align-items: center;
    flex-wrap: wrap;
}

.stay-dining-text {
    flex: 1;
    text-align: left;
}

.stay-dining-text h2 {
    font-size: 2.5rem;
    color: #FFD700;
    margin-bottom: 15px;
}

.stay-dining-text p {
    font-size: 1.2rem;
    line-height: 1.8;
}

.stay-dining-image {
    flex: 1;
}

.stay-dining-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 15px;
    box-shadow: 0px 4px 10px rgba(255, 215, 0, 0.4);
}

.stay-btn {
    display: inline-block;
    padding: 15px 30px;
    background: #FFD700;
    color: #111;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease;
}

.stay-btn:hover {
    background: #FFA500;
    transform: scale(1.05);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .dining-container {
        flex-direction: column;
        text-align: center;
    }

    .stay-dining-container {
        flex-direction: column;
        text-align: center;
    }

    .restaurant-boxes {
        flex-direction: column;
        align-items: center;
    }
}






/* General Section Styling */
.linville-section, 
.linville-activities, 
.linville-stay {
    padding: 70px 20px;
    text-align: center;
}

/* Lake Linville Park Section */
.linville-section {
    background: #1A1A1A;
    color: #FAFAFA;
    padding: 80px 20px;
	margin-top:10%;
}

.linville-wrapper {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    gap: 50px;
    align-items: center;
    flex-wrap: wrap;
}

.linville-content {
    flex: 1;
    text-align: left;
}

.linville-title {
    font-size: 2.5rem;
    color: #FFD700;
    margin-bottom: 15px;
}

.linville-content p {
    font-size: 1.2rem;
    line-height: 1.8;
}

.linville-image {
    flex: 1;
}

.linville-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 15px;
    box-shadow: 0px 4px 10px rgba(255, 215, 0, 0.4);
}

/* Activities Section */
.linville-activities {
    background: #222;
    color: #ffffff;
    padding: 80px 20px;
}

.linville-section-title {
    font-size: 2.5rem;
    color: #FFD700;
    margin-bottom: 30px;
}

.linville-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.linville-box {
    background: #333;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s ease;
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.1);
}

.linville-box:hover {
    transform: scale(1.05);
}

/* Stay Section */
.linville-stay {
    background: #181818;
    padding: 80px 40px;
    text-align: center;
    color: #FAFAFA;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 50px;
    max-width: 1600px;
    margin: 0 auto;
}

.linville-stay-content {
    flex: 1;
    text-align: left;
}

.linville-stay-content h2 {
    font-size: 2.5rem;
    color: #FFD700;
    margin-bottom: 20px;
}

.linville-stay-content p {
    font-size: 1.2rem;
    color: #CCCCCC;
    margin-bottom: 20px;
}

.linville-btn {
    display: inline-block;
    padding: 15px 30px;
    background: #FFD700;
    color: #111;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease;
}

.linville-btn:hover {
    background: #FFA500;
    transform: scale(1.05);
}

.linville-stay-image {
    flex: 1;
}

.linville-stay-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(255, 215, 0, 0.4);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .linville-wrapper,
    .linville-stay {
        flex-direction: column;
        text-align: center;
    }

    .linville-grid {
        grid-template-columns: 1fr;
    }
}


.well10 {
    color:#ffd700;
    text-decoration: none;
}
.well1 {
    color:#ffd700;
    text-decoration: none;
    font-size: 25px;
}
.well3 {
font-size: 2.5rem;
color: #FFD700;
margin-bottom: 15px;
text-decoration: none;
}

/* Reservation Section Styling */
.reservation-section {
    padding: 50px 0;
    
    text-align: center;
}

.reservation-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 1400px;
    padding: 20px;
    background: #726868ed;
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
}

/* Reservation Row Container */
.reservation-row-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    align-items: center;
}

/* Title */
.reservation-title {
    text-align: center;
    margin-bottom: 20px;
    color: #FFD700;
    font-size: 24px;
    font-weight: bold;
    border-bottom: 2px solid #FFD700;
    padding-bottom: 10px;
}

/* Input and Select Fields */
.reservation-row {
    flex: 1;
    min-width: 180px;
}

.reservation-input {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.reservation-input:focus {
    border-color: #FFD700;
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    outline: none;
}

/* Booking Button */
.reservation-btn {
    padding: 12px 20px;
    background: linear-gradient(45deg, #FFD700, #FF5733);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.3s ease;
	margin-top:20px;
}

.reservation-btn:hover {
    background: linear-gradient(45deg, #FF5733, #FFD700);
}

/* Responsive Design */
@media (max-width: 768px) {
    .reservation-row-container {
        flex-direction: column;
        gap: 10px;
    }

    .reservation-row {
        min-width: 100%;
    }

    .reservation-btn {
        width: 100%;
    }
}



:root {
    --primary-color: #7a1018; /* Bright Red (dominant color from the logo) */
    --accent-color: #FFD700; /* Bright Yellow (logo text highlight) */
    --text-light: #FAFAFA; /* Ivory for light text */
    --btn-hover-color: #000000; /* Black (contrast and sleek hover effect) */
    --overlay-gradient: linear-gradient(135deg, rgba(204, 0, 0, 0.6), rgba(0, 0, 0, 0.8)); /* Red to Black gradient overlay */
}




.sitemap-section {
    padding: 50px 20px;
    background: #fafafa;
    text-align: center;
    font-family: 'Poppins', sans-serif;
}

.sitemap-section .section-header h2 {
    font-size: 28px;
    margin-bottom: 10px;
    color: #222;
    font-weight: 700;
}

.sitemap-section .section-header p {
    color: #555;
    margin-bottom: 30px;
}

/* ✅ 4 Boxes per Row on Desktop */
.sitemap-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    justify-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

/* ✅ Box Style */
.sitemap-box {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    text-align: center;
}

.sitemap-box:hover {
    transform: translateY(-5px);
    box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.15);
}

/* ✅ Link Styling */
.sitemap-box a {
    text-decoration: none;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sitemap-box em {
    font-size: 30px;
    color: #555;
    transition: color 0.3s ease;
}

.sitemap-box p {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

.sitemap-box:hover em {
    color: #d92332;
}

.sitemap-box:hover p {
    color: #d92332;
}

/* ✅ Responsive Breakpoints */
@media (max-width: 992px) {
    .sitemap-container {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .sitemap-container {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .sitemap-container {
        grid-template-columns: 1fr;
    }
}




















/* 🌍 FORM + IMAGE SECTION */
.form-image-section {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  max-width: 1200px;
  margin: 50px auto;
  align-items: stretch;
  padding: 20px;
}

/* ✅ Left Green Info Card */
.form-container {
  flex: 1;
  min-width: 320px;
}

.info-card {
  background: #666; /* ✅ Nice green card background */
  color: #fff;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}

.info-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 10px;
}

.info-subtitle {
  font-size: 16px;
  margin-bottom: 20px;
  color: #e8e8e8;
}

/* 📍 Address Info Styling */
.coordinates {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.coordinate-item {
  display: flex;
  align-items: center;
}

.coordinate-item .icon {
  background: #fff;
  color: #006b52;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin-right: 12px;
  font-size: 18px;
}

.coordinate-details .label {
  font-weight: 600;
  font-size: 15px;
}

.coordinate-details .value {
  display: block;
  font-size: 15px;
  color: #fff;
}

/* 📝 Directions Form */
.direction-form .form-group {
  margin-bottom: 12px;
}

.direction-form .form-control {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: none;
  font-size: 15px;
  margin-top: 4px;
}

.get-directions-btn {
  background: #f4a300;
  color: #fff;
  padding: 14px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  width: 100%;
  cursor: pointer;
  transition: 0.3s ease;
}

.get-directions-btn:hover {
  background: #d98a00;
}

/* ✅ Right Image */
.image-container {
  flex: 1;
  text-align: center;
  min-width: 320px;
}

.responsive-image {
  max-width: 100%;
  border-radius: 15px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
}

/* 📱 Responsive Fix for Mobile */
@media (max-width: 768px) {
  .form-image-section {
    flex-direction: column;
  }
}




/* 📞 Contact Section */
.contact-section {
  background: #f9f9f9;
  padding: 60px 20px;
  font-family: 'Poppins', sans-serif;
}

.contact-container {
  max-width: 900px;
  margin: auto;
  text-align: center;
}

.contact-header h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #222;
}

.contact-header p {
  font-size: 16px;
  color: #555;
  margin-bottom: 40px;
}

/* 📍 Contact Info Items */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.contact-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.05);
  text-align: left;
}

.contact-item em {
  font-size: 28px;
  color: #0073e6;
}

.contact-item h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #222;
}

.contact-item p, 
.contact-item a {
  font-size: 15px;
  color: #444;
  text-decoration: none;
}

.contact-item a:hover {
  color: #0073e6;
}

/* 📱 Responsive */
@media (max-width: 600px) {
  .contact-info {
    gap: 15px;
  }
}





/* 📘 FAQ Section Styling */
.faq-section {
  background: #f9f9f9;
  padding: 60px 20px;
  font-family: 'Poppins', sans-serif;
}

.faq-container {
  max-width: 1000px;
  margin: auto;
}

.faq-header {
  text-align: center;
  margin-bottom: 40px;
}

.faq-header h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #222;
}

.faq-header p {
  font-size: 16px;
  color: #555;
}

/* 🔽 FAQ Items */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.faq-item {
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.faq-item:hover {
  transform: translateY(-3px);
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.08);
}

.faq-item h3 {
  font-size: 18px;
  color: #0073e6;
  margin-bottom: 8px;
}

.faq-item p {
  font-size: 15px;
  color: #444;
  line-height: 1.6;
}

/* 🌐 Links in FAQ */
.faq-item a {
  color: #0073e6;
  text-decoration: none;
  font-weight: 500;
}

.faq-item a:hover {
  color: #005bb5;
  text-decoration: underline;
}

/* 📞 Footer Line */
.faq-footer {
  margin-top: 30px;
  text-align: center;
}

.faq-footer p {
  font-size: 16px;
  color: #333;
}

.faq-footer a {
  color: #0073e6;
  font-weight: 600;
  text-decoration: none;
}

.faq-footer a:hover {
  color: #005bb5;
  text-decoration: underline;
}
