/* style.css */
:root {
    --primary-font: 'Playfair Display', serif;
    --secondary-font: 'Lato', sans-serif;
    --text-dark: #333;
    --text-light: #f8f5f0;
    --bg-light: #f8f5f0; 
    --bg-awards: #a68963; /* Brownish background for awards */
    --gold-accent: #B08D57;
    --dark-overlay: rgba(0, 0, 0, 0.5);
    --header-height: 80px; /* Adjust as needed */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--secondary-font);
    line-height: 1.6;
    color: var(--text-dark);
    background-color: #fff; 
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--primary-font);
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
h3 {
    font-size: 1.5rem;
}

p {
    margin-bottom: 1rem;
    color: #555;
}

.section-padding {
    padding: 10px 0;
}

.bg-beige {
    background-color: var(--bg-light);
}

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

.star-rating {
    color: var(--gold-accent);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}
.star-rating.light-stars {
    color: var(--text-light);
}

.light-text {
    color: var(--text-light) !important;
}


	/* Header */
header {
    background-color: #fff;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--header-height);
    display: flex;
    align-items: center;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 50px; 
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
}

.nav-links li {
    margin-left: 20px;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-dark);
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 0;
    transition: color 0.3s ease;
    position: relative;
}

.nav-links a:not(.nav-button)::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 2px;
    right: 0;
    background: var(--gold-accent);
    transition: width 0.3s ease;
    -webkit-transition: width 0.3s ease;
}
.nav-links a:not(.nav-button):hover::after {
    width: 100%;
    left: 0;
    right: auto;
}
.nav-links a:not(.nav-button):hover, 
.nav-links a.active:not(.nav-button) {
    color: var(--gold-accent);
}

.nav-button {
    background-color: #fff;
    color: var(--text-dark);
    padding: 8px 15px !important; /* Important to override general padding */
    border: 1px solid var(--text-dark);
    border-radius: 3px;
    font-weight: bold;
}
.nav-button:hover {
    background-color: var(--text-dark);
    color: #fff;
    border-color: var(--text-dark);
}


.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001; /* Above nav links when open */
}

.hamburger {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-dark);
    position: relative;
    transition: background-color 0.3s ease-in-out;
}
.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 3px;
    background-color: var(--text-dark);
    left: 0;
    transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
}
.hamburger::before { top: -8px; }
.hamburger::after { top: 8px; }

/* Hero Section */
.hero-section {
    /* Remove direct background image from here */
    /* background-image: linear-gradient(var(--dark-overlay), var(--dark-overlay)), url('hero-background.jpg'); */
    /* background-size: cover; */
    /* background-position: center; */
    height: calc(100vh - var(--header-height));
    min-height: 550px; /* Or adjust as needed */
    color: var(--text-light);
    display: flex; /* Keep this for alignment if needed, but slides are absolute */
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative; /* Crucial for absolute positioning of slides and nav */
    overflow: hidden; /* Prevent content spill from hidden slides */
}

.hero-slider-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Behind reservation, indicators, nav buttons */
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
    display: flex; /* To center hero-content within the slide */
    align-items: center;
    justify-content: center;
    z-index: 1; /* Base z-index for slides */
}

.hero-slide::before { /* Dark overlay for each slide */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--dark-overlay);
    z-index: 1; /* Below slide content */
}

.hero-slide.active {
    opacity: 1;
    z-index: 2; /* Active slide on top */
}

/* Ensure hero-content is above the slide's ::before overlay */
.hero-slide .hero-content {
    position: relative;
    z-index: 2; /* Above the ::before pseudo-element */
    color: var(--text-light); /* Ensure text is light by default */
}

/* Styling for content within each slide, ensuring it's light */
.hero-slide .hero-content .hero-subtitle,
.hero-slide .hero-content .hero-title,
.hero-slide .hero-content .ministry-logo p {
    color: var(--text-light);
}

.hero-slide .hero-content .ministry-logo img {
    filter: brightness(0) invert(1); /* Keep emblem white */
}

.hero-slide .hero-content .btn-primary {
    background-color: var(--text-light); /* Light button */
    color: var(--text-dark); /* Dark text on button */
}
.hero-slide .hero-content .btn-primary:hover {
    background-color: var(--gold-accent);
    color: var(--text-light);
}

.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10; /* Ensure they are on top */
    transition: background-color 0.3s ease;
}
.slider-nav:hover {
    background-color: rgba(0, 0, 0, 0.6);
}
.slider-nav.prev {
    left: 20px;
}
.slider-nav.next {
    right: 20px;
}




.hero-reservation {
    position: absolute;
    left: 30px; 
    top: 75%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left top;
	 z-index: 10;
}
.hero-reservation .reservation-content {
    display: flex;
    flex-direction: row-reverse; 
    align-items: center;
    gap: 15px;
}
.hero-reservation .reservation-text {
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.hero-reservation .phone-number {
    font-size: 1.1rem;
    font-weight: bold;
}
.hero-reservation .phone-icon-container {
    border: 1px solid var(--text-light);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(90deg);
}
.hero-reservation .phone-icon-container i { font-size: 1rem; }

.hero-content { z-index: 2; }
.hero-subtitle {
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    color: var(--text-light);
}
.hero-title {
    font-size: 3.2rem;
    line-height: 1.2;
    margin-bottom: 2rem;
    color: var(--text-light);
    font-weight: normal;
	margin-bottom: 310px;
}
.ministry-logo { margin: 0 auto 2rem auto; }
.ministry-logo img {
    height: 60px;
    margin-bottom: 0.5rem;
    filter: brightness(0) invert(1);
}
.ministry-logo p { font-size: 0.8rem; line-height: 1.3; margin: 0; color: var(--text-light); }

.btn {
    padding: 12px 30px;
    border: none;
    border-radius: 0;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    letter-spacing: 1px;
    font-family: var(--secondary-font);
}
.btn-primary {
    background-color: var(--text-light);
    color: var(--text-dark);
    font-size: 0.9rem;
}
.btn-primary:hover {
    background-color: var(--gold-accent);
    color: var(--text-light);
}

.hero-carousel-indicators {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
	z-index: 10;
}


.hero-carousel-indicators span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    margin: 8px 0;
    cursor: pointer;
}


.hero-carousel-indicators span.active { background-color: var(--text-light); }



/* Two Column Layout (About, Founders) */
.two-column-layout {
    display: flex;
    align-items: center;
    gap: 40px;
}
.two-column-layout .column-image,
.two-column-layout .column-text { flex: 1; }
.column-text .section-tagline {
    font-size: 0.8rem;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.2rem;
}
.column-text h2 { font-size: 2.8rem; }
.link-styled {
    display: inline-block;
    text-decoration: none;
    color: var(--text-dark);
    font-weight: bold;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--gold-accent);
    margin-right: 20px;
    margin-top: 10px;
    transition: color 0.3s, border-color 0.3s;
}
.link-styled:hover { color: var(--gold-accent); }
.link-styled.link-subtle {
    border-bottom: none;
    color: #777;
    font-weight: normal;
}
.link-styled.link-subtle:hover { color: var(--gold-accent); text-decoration: underline; }

/* Quote Section */
.quote-text {
    font-family: var(--primary-font);
    font-size: 1.2rem;
    font-style: italic;
    text-align: center;
    color: #555;
    line-height: 1.8;
    /*max-width: 800px;*/
    margin: 0 auto;
}
.quote-text strong { color: var(--text-dark); }

/* Suites Section 
.suites-section h2 { margin-bottom: 0.5rem; }
.suites-description { max-width: 600px; margin: 0 auto 30px auto; }*/

.suites-carousel-container {
    position: relative; /* For positioning nav buttons */
    margin: 0 auto;
    max-width: 100%; /* Or specific max-width if needed */
}

.suites-carousel-viewport {
    overflow: hidden;
    width: 100%; /* Adjust if you want padding on sides of viewport */
}



.suites-grid {
    /* Remove grid-template-columns and gap from grid setup */
    /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
    /* gap: 30px; */

    display: flex; /* Key for horizontal layout */
    transition: transform 0.5s ease-in-out; /* Animation for sliding */
    /* No wrap, all cards in one line */
}

.suite-card {
    position: relative;
    overflow: visible; /* CHANGE: Allow hover details to overflow if absolutely necessary, but try to avoid it */
    flex: 0 0 100%; 
    max-width: 100%;
    padding: 0 10px; 
    box-sizing: border-box;
    display: flex; /* ADD: To help with aspect ratio container */
    flex-direction: column; /* ADD */
}

.suite-card-image-container {
    position: relative;
    width: 100%;
    /* OLD VALUE: padding-top: 75%; Example: 4:3 aspect ratio */
    padding-top: 100%; /* NEW VALUE: Example for a square image (1:1 ratio). Adjust this! */
    overflow: hidden;
    border-radius: 3px;
	height:470px;
}

.suite-card img {
    position: absolute; /* Position image within the aspect ratio container */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;   /* Make image fill the container */
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
}


/* Carousel Navigation Buttons */
.suite-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    padding: 10px;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}
.suite-carousel-nav:hover {
    background-color: rgba(0, 0, 0, 0.7);
}
.suite-carousel-nav.prev {
    left: -15px; /* Adjust position */
}
.suite-carousel-nav.next {
    right: -15px; /* Adjust position */
}


/* Hide nav buttons if they go outside the main page container on smaller screens */
@media (max-width: 400px) { /* Example breakpoint */
    .suite-carousel-nav.prev { left: 5px; }
    .suite-carousel-nav.next { right: 5px; }
}


/* Carousel Dots */
.suites-carousel-dots {
    text-align: center;
    margin-top: 25px;
}
.suites-carousel-dots .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.suites-carousel-dots .dot.active {
    background-color: var(--gold-accent);
}

/* Adjustments for larger screens to show more cards (Optional) */
@media (min-width: 768px) {
    .suite-card {
        /* Show 2 cards */
        /* flex: 0 0 50%; */
        /* max-width: 50%; */
    }
}
@media (min-width: 1024px) {
    .suite-card {
        /* Show 3 cards, this makes it look like the original static grid but now it's a carousel if there are more */
         flex: 0 0 calc(100% / 3);
         max-width: calc(100% / 3);
		 height:470px;
    }
    /* If showing 3 cards, adjust nav button positions if they look off */
    .suite-carousel-nav.prev {
        left: -20px;
    }
    .suite-carousel-nav.next {
        right: -20px;
    }
}


@media (max-width: 768px) {
    .suite-card-info-overlay h3 {
        font-size: 1.4rem;
    }
    .suite-hover-details li {
        font-size: 0.65rem;
        padding: 2px 6px;
    }
    .suite-card:hover .suite-hover-details {
        max-height: 120px; /* Adjust for smaller screens */
    }
}

.suite-card:hover img {
    transform: scale(1.05);
}

/* Overlay for Title and Hover Details */
.suite-card-info-overlay {
    position: absolute;
    bottom: 0; /* Anchor to the bottom of the image container */
    left: 0;
    right: 0;
    color: white;
    z-index: 2;
    pointer-events: none;
    padding: 15px; /* Add some padding inside the overlay */
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0) 100%); /* Gradient for readability */
    border-bottom-left-radius: 3px; /* Match image container radius */
    border-bottom-right-radius: 3px; /* Match image container radius */
}

.suite-card-info-overlay h3 {
    font-family: var(--primary-font);
    font-size: 1.6rem; /* Slightly adjust */
    font-weight: bold;
    color: white;
    /* text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); Removed, using gradient instead */
    margin-bottom: 8px;
    line-height: 1.2;
    pointer-events: auto;
}


.suite-hover-details {
    opacity: 0;
    max-height: 0;
    overflow: hidden; /* Keep this for the animation itself */
    transition: opacity 0.4s ease, max-height 0.4s ease, transform 0.4s ease;
    transform: translateY(5px);
    pointer-events: auto;
    margin-top: 5px; /* Space between title and details */
}

.suite-card:hover .suite-hover-details {
    opacity: 1;
    max-height: 150px; /* Adjust based on how much content you expect. Needs to fit */
    transform: translateY(0);
}

.suite-hover-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Allow wrapping of tags */
    flex-wrap: wrap; /* Allow tags to wrap */
    gap: 5px; /* Space between tags */
}

.suite-hover-details li {
    font-family: var(--secondary-font);
    font-size: 0.7rem;
    color: white;
    background-color: rgba(0, 0, 0, 0.65);
    padding: 3px 8px;
    margin-bottom: 0; /* Handled by gap */
    border-radius: 3px;
    /* display: inline-block; -- Replaced by flex */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* MODIFIED: Book Now Button Styling - Ensure it's top right */
.suite-card-book-now {
    position: absolute;
    top: 15px; /* Position from the top */
    right: 0;  /* Align to the right */
    
    /* NEW: Always visible style */
    background-color: rgba(176, 141, 87, 0.35); /* Gold accent: #B08D57 with alpha for transparency */
    border: 1px solid rgba(255, 255, 255, 0.5); /* Subtle light border */
    transform: skew(-25deg) translateX(-10px); /* Positioned correctly and skewed */
    opacity: 1; /* Always visible */
    
    transform-origin: top right; /* Skew from top right */
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out; /* Smooth transition for hover */
    z-index: 3; /* Above info overlay if they overlap */
    /* padding: 1px 0; Remove if btn-book-now-text padding is enough */
}

/* Optional: Subtle hover effect for the always-visible button */
.suite-card:hover .suite-card-book-now {
    background-color: rgba(176, 141, 87, 0.55); /* Slightly more opaque on hover */
    border-color: rgba(255, 255, 255, 0.8);
    /* The transform and opacity no longer need to change on hover for visibility */
}

.btn-book-now-text { /* Text within the skewed button */
    display: block;
    color: white;
    font-family: var(--secondary-font);
    font-weight: bold;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    padding: 6px 18px; /* Adjusted padding for better look */
    transform: skew(25deg); /* Counter-skew the text */
    white-space: nowrap;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* Subtle shadow for readability */
}

.carousel-dot { margin-top: 20px; text-align: center; }
.carousel-dot span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    margin: 0 5px;
}
.carousel-dot span.active { background-color: var(--gold-accent); }

/* Awards Section */
.awards-section {
    background-color: var(--bg-awards);
    color: var(--text-light);
}
.awards-section p {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 1.5rem;
}

.awards-grid {
    display: flex; /* Default for desktop: side-by-side */
    gap: 40px;
    align-items: flex-start; /* Or 'center' if you want columns to vertically align based on their center */
}

.award-column {
    flex: 1; /* Each column takes equal space on desktop */
    display: flex; /* Enable flex for centering items within the column */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    text-align: center; /* Ensures text is centered if not already by parent */
}

/* This rule ensures images within the column are also centered if they have margins */
.award-column img.award-logo {
    margin-left: auto;
    margin-right: auto;
    /* max-height and margin-bottom are already set, which is good */
}

@media (max-width: 992px) { /* Adjust breakpoint as needed, 768px might be more common for stacking */
    .awards-grid {
        flex-direction: column; /* Stack columns vertically */
        align-items: center;    /* Center the columns themselves if they don't take full width */
        gap: 30px; /* Adjust gap for vertical stacking */
    }
	
	.award-column {
        /* flex: 1; might not be needed if they stack and take full width or are centered */
        width: 100%; /* Optional: make each column take full width of its container */
        max-width: 500px; /* Optional: constrain width of stacked columns for better readability */
        /* display: flex, flex-direction: column, align-items: center are already set and are good for stacked view too */
    }
    .award-column.award-column-left,
    .award-column.award-column-right {
         margin-bottom: 20px; /* Add some space between stacked columns */
    }
    .award-column:last-child {
        margin-bottom: 0; /* No margin for the last stacked column */
    }
}

.et-logo { max-height: 40px; }
.outlook-award { margin-top: 20px; } /* Space above this specific award */
.outlook-logo { max-height: 80px; }
.ministry-logo-color { max-height: 70px; }
.tripadvisor-logo { max-height: 100px; margin-top: 20px; }
.award-logo { max-height: 100px; margin-bottom: 10px; object-fit: contain; }
.et-logo { max-height: 100px; }
.outlook-award { margin-top: 20px; }
.outlook-logo { max-height: 100px; }
.ministry-logo-color { max-height: 100px; } /* Assumes color version needs no filter */
.tripadvisor-logo { max-height: 100px; margin-top: 20px; }

/* Media Section */
.media-section h2 { margin-bottom: 30px; }
.media-logos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 30px;
    align-items: center;
}
.media-logos-grid img {
    max-height: 70px;
    width: 105px;
    margin: 0 auto;
    object-fit: contain;
    filter: grayscale(1) contrast(0%) brightness(0.5); /* Dark grey logos */
    opacity: 0.8;
}

/* Instagram Section */
.instagram-section h2 { margin-bottom: 30px; text-align: center;}

.instagram-carousel-viewport {
    overflow: hidden !important; /* Ensure overflow is hidden */
    width: 100%;
    margin: 0 auto; /* Center the viewport if its parent .container doesn't do it fully */
    /* max-width: 1200px; /* Or whatever your main content max-width is, if needed here */
}
/* Optional fade effect for edges:
.instagram-carousel-viewport::before,
.instagram-carousel-viewport::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50px; // Adjust width of fade
    z-index: 2;
}
.instagram-carousel-viewport::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-light), transparent); // Assuming --bg-light is section bg
}
.instagram-carousel-viewport::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-light), transparent);
}
*/
.instagram-grid {
    display: grid;
	 width: fit-content;
	  animation: instagramSlide 30s linear infinite;
    will-change: transform;
	  display: flex !important; 
	  flex-direction: row !important;
	  flex-wrap: nowrap !important;
	   list-style: none;
      padding: 0;
      margin: 0;
}

.insta-post {
    /* --- CRUCIAL FOR ITEM SIZING AND SPACING --- */
    flex-shrink: 0;   /* Prevent items from shrinking: shorthand for flex: 0 0 auto; */
    flex-grow: 0;     /* Prevent items from growing */
    flex-basis: auto;   /* Let width property define size */

    width: 300px;       /* Fixed width for each Instagram post image */
    height: 325px;      /* Fixed height */
    margin-right: 15px; /* Space between images */
    box-sizing: border-box; /* Include padding/border in width/height */

    overflow: hidden;
    border-radius: 5px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; /* For potential absolute positioned elements inside if any */
}

.instagram-grid .insta-post:last-child {
    margin-right: 0;
}
.insta-post img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.insta-post:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.instagram-carousel-viewport:hover .instagram-grid {
    animation-play-state: paused;
}

/* Keyframes for the sliding animation */
@keyframes instagramSlide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Assumes duplicated content */
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .insta-post {
        width: 160px;
        height: 160px;
        margin-right: 10px;
    }
}


@media (max-width: 480px) {
    .insta-post {
        width: 120px;
        height: 120px;
        margin-right: 8px;
    }
}


.insta-post:hover img { opacity: 0.8; }

/* Footer */
footer {
    background-color: var(--text-dark);
    color: #ccc;
    padding: 30px 0;
}
footer p { margin: 0; font-size: 0.9rem; color: #ccc;}


/* --- Responsive --- */
@media (max-width: 992px) { /* Tablet */
    .nav-toggle { display: block; }
    .nav-links {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        width: 100%;
        background-color: #fff;
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        border-top: 1px solid #eee;
        box-shadow: 0 3px 5px rgba(0,0,0,0.1);
    }
    .nav-links.active { display: flex; }
    .nav-links li { margin: 10px 0; width: 100%; text-align: center; }
    .nav-links a { font-size: 1rem; display: block; padding: 10px 0;}
    .nav-button { display: inline-block; width: auto; padding: 8px 20px !important; }
    
    .nav-toggle.active .hamburger { background-color: transparent; }
    .nav-toggle.active .hamburger::before { transform: rotate(45deg); top: 0; }
    .nav-toggle.active .hamburger::after { transform: rotate(-45deg); top: 0; }

    .hero-title { font-size: 2.5rem; }
    .hero-reservation { left: 10px; }
    .hero-reservation .phone-number { font-size: 0.9rem; }
    .hero-reservation .phone-icon-container { width: 30px; height: 30px;}
    .hero-reservation .phone-icon-container i { font-size: 0.9rem; }

    .column-text h2 { font-size: 2.2rem; }
}

@media (max-width: 768px) { /* Mobile */
    .hero-section { padding: 20px; min-height: 450px; }
    .hero-title { font-size: 2rem; }
    .hero-subtitle { font-size: 0.8rem; }
    .hero-reservation { display: none; } /* Hide for simplicity on small mobile */
    .hero-carousel-indicators {
        bottom: 20px; top: auto; left: 50%;
        transform: translateX(-50%);
        flex-direction: row;
    }
    .hero-carousel-indicators span { margin: 0 8px; }
	
	


    .two-column-layout { flex-direction: column; text-align: center; }
    .two-column-layout.reverse-columns-on-mobile { flex-direction: column-reverse; }
    .two-column-layout .column-image { margin-bottom: 20px; }
    .two-column-layout.reverse-columns-on-mobile .column-image { margin-bottom: 0; margin-top: 20px; }
    
    .quote-text { font-size: 1.2rem; }
    .suites-grid { grid-template-columns: 1fr; }
    .suite-card img { height: 470px; }
    .suite-card-overlay { transform: skew(-25deg) translateX(-10px); opacity: 1;} /* Always visible on mobile, or adjust */


    .awards-grid { flex-direction: column; gap: 30px; }
    .media-logos-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 20px; }
    .media-logos-grid img { max-height: 30px; }
}

@media (max-width: 480px) {
    h2 { font-size: 1.8rem; }
    .column-text h2 { font-size: 2rem; }
    .hero-title { font-size: 1.8rem; }
    .media-logos-grid { grid-template-columns: repeat(2, 1fr); }
    .instagram-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .insta-post img { height: 180px; }
}




/* style.css */

/* ========= STYLES FOR NEW SECTIONS ========= */

/* General Helper Classes (if not already defined) */
.section-padding-small {
    padding: 30px 0;
}
.bg-brown-light {
    background-color: #A68963; /* Example light brown from image - var(--bg-awards) */
    color: #f8f5f0; /* Light text on this background */
}
.bg-brown-light .section-tagline,
.bg-brown-light h2,
.bg-brown-light h4,
.bg-brown-light p,
.bg-brown-light .link-styled {
    color: #f8f5f0;
}
.bg-brown-light .link-styled.link-subtle {
    color: #e0d8cc; /* Slightly different for subtlety */
}
.bg-brown-light .star-rating {
    color: #f8f5f0; /* White stars on brown */
}


.section-main-title {
    font-family: var(--primary-font);
    font-size: 2.8rem;
    font-weight: normal;
    color: var(--text-dark);
    margin-bottom: 10px;
}
.bg-brown-light .section-main-title { /* If title is on dark bg */
    color: var(--text-light);
}

/* Taglines should be consistent */
.section-tagline {
    font-size: 0.8rem;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.text-gold {
    color: var(--gold-accent) !important; /* Example: #B08D57 */
}

/* Star ratings if gold color desired */
.star-rating.gold-stars i {
    color: var(--gold-accent); /* Or specific gold hex */
}


/* --- Events Title Section --- */
.events-title-section .section-main-title {
    font-size: 2rem; /* Smaller than typical hero titles */
    color: #555;
}

/* --- Foundation Hero Section --- */



/* Example if you want a slight overlay on each sub-banner item for text
.sub-banner-item::before {
    content: '';
    position: absolute;
    top:0; left:0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.2);
}
.sub-banner-item span { position: relative; z-index: 1; }
*/


/* --- Testimonial Section --- */
/* bg-brown-light defined in helpers */
.testimonial-main-title {
    font-family: var(--primary-font);
    font-size: 1.5rem;
    color: var(--text-light); /* Assuming bg-brown-light has light text */
    font-weight: normal;
    margin-bottom: 40px;
}

.testimonial-slider-viewport {
    max-width: 750px; /* Or desired width for a single testimonial */
    margin: 0 auto;
    overflow: hidden; /* For slider effect */
    position: relative;
}

.testimonial-slider-track {
    display: flex; /* For horizontal layout of testimonials */
    /* JS will handle transform for sliding */
    /* For CSS animation, width: fit-content and animation here */
}

.testimonial-item {
    flex: 0 0 100%; /* Each testimonial takes full width of the viewport */
    padding: 20px; /* Padding inside each testimonial slide */
    box-sizing: border-box;
    text-align: center;
}

.testimonial-text {
    font-family: var(--secondary-font); /* Or primary if it's more quote-like */
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-light); /* Assuming bg-brown-light */
    margin-bottom: 25px;
    font-style: italic;
}

.testimonial-author-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.testimonial-author {
    font-weight: bold;
    font-size: 1rem;
    color: var(--text-light);
}

.testimonial-source-logo {
    max-height: 25px;
    width: auto;
}

.testimonial-dots {
    margin-top: 30px;
}
.testimonial-dots .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.4); /* Lighter dots on dark bg */
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.testimonial-dots .dot.active {
    background-color: var(--text-light); /* Or var(--gold-accent) */
}



/* style.css */
/* (Continued from PART 3A) */

/* --- Project Priceless Section --- */
/* Uses .two-column-layout, .column-image, .column-text, .section-tagline, .star-rating, .link-styled
   which are assumed to be defined from previous website parts or a global stylesheet.
   If not, here are basic versions:
*/
.two-column-layout {
    display: flex;
    align-items: center;
    gap: 40px;
}
.two-column-layout .column-image,
.two-column-layout .column-text {
    flex: 1;
}
.column-text h2 { /* Assuming h2 is used for section titles within column-text */
    font-size: 2.5rem; /* Or your standard h2 size */
    margin-bottom: 1rem;
    font-family: var(--primary-font);
}
.link-styled {
    display: inline-block;
    text-decoration: none;
    color: var(--text-dark);
    font-weight: bold;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--gold-accent);
    margin-right: 20px;
    margin-top: 10px;
    transition: color 0.3s, border-color 0.3s;
}
.link-styled:hover { color: var(--gold-accent); }
.link-styled.link-subtle {
    border-bottom: none;
    color: #777;
    font-weight: normal;
}
.link-styled.link-subtle:hover { color: var(--gold-accent); text-decoration: underline; }

/* Responsive for two-column */
@media (max-width: 768px) {
    .two-column-layout {
        flex-direction: column;
        text-align: center;
    }
    .two-column-layout.reverse-columns-on-mobile {
        flex-direction: column-reverse;
    }
    .two-column-layout .column-image {
        margin-bottom: 30px;
    }
    .two-column-layout.reverse-columns-on-mobile .column-image {
        margin-bottom: 0;
        margin-top: 30px;
    }
    .column-text h2 {
        font-size: 2rem;
    }
}
/* End of assumed global styles for two-column */


/* --- Quote Section Alt --- */
.quote-section-alt { /* Assuming bg-beige is defined for background */
    /* padding from .section-padding */
}
.quote-text-alt {
    font-family: var(--primary-font);
    font-size: 1.6rem;
    font-style: italic;
    color: #555; /* Darker text on beige */
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto;
}
.quote-text-alt strong {
    color: var(--text-dark);
    font-weight: bold; /* Ensure strong is bold */
}
@media (max-width: 768px) {
    .quote-text-alt {
        font-size: 1.3rem;
    }
}


/* --- Responsible Tourism Section --- */
/* Uses existing .two-column-layout styles */


/* --- Experiences Section --- */
    .experiences {
      display: flex;
      padding: 30px;
      box-sizing: border-box;
      gap: 20px;
    }

    .experiences-content-column {
      width: 40%;
      padding: 20px;
      box-sizing: border-box;
    }

    .experiences-slider-column {
      width: 60%;
      position: relative;
    }

    .slider-wrapper {
      overflow: hidden;
      width: 100%;
    }

    .slider-track {
      display: flex;
      transition: transform 0.6s ease-in-out;
    }

    .slide {
      background: #fff;
      color: #000;
      border-radius: 10px;
      margin: 10px;
      flex: 0 0 calc(50% - 20px);
      box-sizing: border-box;
      padding: 15px;
    }

    .slide img {
      width: 100%;
      height: 300px;
      object-fit: cover;
      border-radius: 6px;
    }

    .slider-dots {
      text-align: center;
      margin-top: 15px;
    }

    .slider-dots span {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin: 4px;
      background: #efe7add9;
      border-radius: 50%;
      cursor: pointer;
    }

    .slider-dots span.active {
      background: #cfbd2cd9;
    }

    /* Responsive for Mobile & Tablet */
    @media (max-width: 768px) {
      .experiences {
        flex-direction: column;
        padding: 20px;
      }

      .experiences-content-column,
      .experiences-slider-column {
        width: 100%;
        max-width: 100%;
        padding: 0;
      }

      .experiences-content-column {
        margin-bottom: 30px;
      }

      .slider-track {
        flex-wrap: nowrap;
      }

      .slide {
        flex: 0 0 100% !important;
        margin: 10px 0;
      }

      .slider-wrapper {
        overflow: hidden;
      }
    }



/* --- Read Our Blog Bar --- */
.read-blog-bar {
    /* bg-brown-light assumed */
    padding: 20px 0;
}
.read-blog-bar .container {
    display: flex;
    justify-content: flex-end; /* Align button to the right */
}
.read-blog-bar .btn-dark { /* Assuming .btn.btn-dark exists */
    background-color: var(--text-dark);
    color: var(--text-light);
    border: 1px solid var(--text-dark);
    padding: 10px 25px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5px;
    border-radius: 0;
}
.read-blog-bar .btn-dark:hover {
    background-color: var(--gold-accent);
    border-color: var(--gold-accent);
    color: var(--text-light);
}

@media (max-width: 768px) {
    .read-blog-bar .container {
        justify-content: center; /* Center button on mobile */
    }
}



/* style.css */
/* (Continued from PART 3B) */

/* --- Heritage Section --- */
/* Uses existing .two-column-layout styles */
/* Any specific overrides or additional styling for this section's content can go here if needed */


/* --- Itineraries Section --- */
/* Uses existing .two-column-layout styles and .bg-beige */
/* Any specific overrides or additional styling for this section's content can go here if needed */


/* --- Video Section --- */
.video-section {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 70vh; /* Adjust height as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    color: white; /* Default text color over video background */
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
    z-index: 1;
}

.video-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
}

.video-section-tagline {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
}

.video-title {
    font-family: var(--primary-font);
    font-size: 3rem; /* Adjust as needed */
    font-weight: bold;
    color: white;
    margin-bottom: 30px;
}

.play-button-link {
    display: inline-block; /* So it doesn't take full width */
    text-decoration: none;
}

.play-button {
    width: 90px;
    height: 90px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem; /* Size of the play icon */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.play-button-link:hover .play-button {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}
.play-button i {
    margin-left: 5px; /* Nudge play icon slightly to the right for visual centering */
}

/* Responsive for Video Section */
@media (max-width: 768px) {
    .video-section {
        min-height: 50vh;
    }
    .video-title {
        font-size: 2.2rem;
    }
    .play-button {
        width: 70px;
        height: 70px;
        font-size: 1.5rem;
    }
}


/* --- Hotel Facilities Section --- */
/* section-padding is assumed for overall padding */
.hotel-facilities-section .section-tagline {
    /* Uses global .section-tagline */
}
.hotel-facilities-section .section-title-dark { /* If you need a specific title style for this section */
    font-family: var(--primary-font);
    font-size: 2.5rem;
    color: var(--text-dark);
    margin-bottom: 40px;
}

.facilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.facility-item {
    background-color: #f9f9f9; /* Light background for each item */
    padding: 30px 25px;
    border: 1px solid #eee;
    border-radius: 5px;
    text-align: center;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.facility-item:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transform: translateY(-5px);
}

.facility-icon {
    font-size: 2.5rem; /* Icon size */
    color: var(--gold-accent); /* Icon color */
    margin-bottom: 20px;
    line-height: 1; /* Ensure icon doesn't add extra space */
}
/* If using img for icons:
.facility-icon img {
    max-height: 50px;
    width: auto;
}
*/

.facility-item h3 {
    font-family: var(--primary-font);
    font-size: 1.4rem;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.facility-item p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Responsive for Facilities */
@media (max-width: 767px) {
    .facilities-grid {
        /* Show 2 items side-by-side */
        grid-template-columns: repeat(2, 1fr); /* This creates two equal-width columns */
        gap: 15px; /* Reduce gap for smaller screens if desired */
    }

    .facility-item {
        padding: 20px 15px; /* Slightly reduce padding inside items on mobile */
    }

    .facility-icon {
        font-size: 2rem; /* Slightly smaller icon on mobile */
        margin-bottom: 15px;
    }

    .facility-item h3 {
        font-size: 1.15rem; /* Adjust heading size for mobile */
    }

    .facility-item p {
        font-size: 0.85rem; /* Adjust paragraph size for mobile */
    }
}

/* Optional: Very small screens (e.g., below 480px) - revert to 1 column if 2 looks too cramped */
@media (max-width: 420px) { /* Adjust this breakpoint as needed */
    .facilities-grid {
        grid-template-columns: 1fr; /* Stack items into a single column */
        gap: 20px;
    }
    /* You might not need to re-adjust inner .facility-item padding/font-sizes here
       if the 767px breakpoint settings are acceptable for single column too. */
}

/* Ensure Font Awesome icons are displayed correctly if used globally */
.fas {
    /* Default Font Awesome styling should handle it, but you can add specifics if needed */
}


/* style.css (Testimonial Slider Track & Dots) */

.testimonial-slider-track {
    display: flex;
    /* width will be set by JS */
    transition: transform 0.6s ease-in-out; /* Smooth slide animation, slightly slower for content */
    will-change: transform;
}

.testimonial-item {
    flex-shrink: 0;
    /* width will be set by JS */
    /* ... other styles for testimonial-item ... */
}

.testimonial-dots {
    margin-top: 30px;
    text-align: center; /* Ensure dots are centered */
    /* display: none; by default if no items or handled by JS */
}

.testimonial-dots .dot {
    display: inline-block;
    width: 10px;    /* Or 12px */
    height: 10px;   /* Or 12px */
    background-color: rgba(255, 255, 255, 0.4); /* Assuming light dots on a darker bg (bg-brown-light) */
    border-radius: 50%;
    margin: 0 5px;  /* Or 0 7px */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.testimonial-dots .dot.active {
    background-color: var(--text-light); /* Or var(--gold-accent) */
    transform: scale(1.2); /* Make active dot slightly larger */
}

.slider-dots {
    margin-top: 15px; /* Adjust as needed */
    /* text-align: center; is already on the div */
}

/* Styling for individual dots (can be shared) */
.slider-dots .dot {
    display: inline-block;
    width: 8px;   /* Slightly smaller for sub-banners perhaps */
    height: 8px;
    background-color: rgba(255, 255, 255, 0.5); /* Assuming white/light dots for foundation hero */
    border-radius: 50%;
    margin: 0 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.slider-dots .dot.active {
    background-color: white; /* Active dot color */
    transform: scale(1.25);
}



/* style.css (Experiences Slider Track & Dots) */


/* ========= CORE VALUES SECTION STYLES ========= */

.core-values-section {
    /* Uses .section-padding for overall spacing */
    /* background-color: #fff; /* Or whatever your page default is */
}

.core-values-header {
    margin-bottom: 50px;
}

.core-values-header .star-rating {
    /* Assuming global .star-rating styles for color (e.g., var(--gold-accent)) */
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.core-values-header .section-tagline {
    /* Uses global .section-tagline styles */
    color: #888; /* Slightly muted tagline */
    margin-bottom: 5px;
}

.core-values-header .section-main-title {
    /* Uses global .section-main-title styles */
    color: var(--text-dark);
}

.core-value-item {
    display: flex;
    align-items: stretch; /* Make text and image columns of equal height */
    /* margin-bottom: 40px; */ /* REMOVED this line to make items flush */
    background-color: var(--bg-beige); /* This now effectively becomes the background for text columns only if image is full height */
}

.core-value-item:last-child {
    margin-bottom: 0;
}

.core-value-text-content {
    flex: 1 1 55%; /* Text content takes slightly more space */
    padding: 40px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center text if image is taller */
    box-sizing: border-box;
}

.core-value-image-content {
    flex: 1 1 56%; /* Image content */
    min-height: 300px; /* Minimum height for the image area */
    overflow: hidden; /* To ensure image covers well if using object-fit */
}

.core-value-image-content img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area, cropping if necessary */
    display: block;
}

/* Reversed layout for items with image on the left */
.core-value-item.item-layout-reverse {
    flex-direction: row-reverse;
}

.core-value-subtitle {
    font-size: 0.8rem;
    color: #777; /* Subtitle color */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    font-weight: 600;
}

.core-value-text-content h3 {
    font-family: var(--primary-font);
    font-size: 2rem; /* Or your standard h3 size */
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.3;
}

.core-value-text-content p {
    font-family: var(--secondary-font);
    color: #555; /* Paragraph text color */
    line-height: 1.7;
    margin-bottom: 25px;
}
.core-value-text-content p:last-of-type {
    margin-bottom: 30px; /* More space before button */
}


.btn-brown { /* New button style */
    background-color: #a88864; /* Brownish color from image */
    color: white;
    padding: 12px 25px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5px;
    border-radius: 0; /* Square buttons as per image */
    border: none;
    align-self: flex-start; /* Align button to the start of the flex container (text content) */
    transition: background-color 0.3s ease;
}

.btn-brown:hover {
    background-color: #8e7354; /* Darker brown on hover */
}


/* --- Responsive for Core Values Section --- */
@media (max-width: 991px) { /* Tablet */
    .core-value-text-content {
        padding: 30px 35px;
        flex-basis: 50%;
    }
    .core-value-image-content {
        flex-basis: 50%;
    }
    .core-value-text-content h3 {
        font-size: 1.8rem;
    }
}

@media (max-width: 767px) { /* Mobile */
    .core-value-item,
    .core-value-item.item-layout-reverse {
        flex-direction: column; /* Stack text and image vertically */
    }

    .core-value-text-content {
        padding: 30px 20px;
        order: 2; /* Text content appears below image on mobile */
    }
    .core-value-item.item-layout-reverse .core-value-text-content {
        order: 2; /* Consistent order: image always first on mobile */
    }


    .core-value-image-content {
        min-height: 250px; /* Adjust image height for mobile */
        order: 1; /* Image content appears first on mobile */
    }

    .core-value-text-content h3 {
        font-size: 1.6rem;
    }

    .btn-brown {
        align-self: center; /* Center button on mobile */
    }
}

/* ========= CHECK AVAILABILITY SECTION STYLES ========= */
/* ========= CHECK AVAILABILITY SECTION STYLES - BACKGROUND REVISION ========= */

.check-availability-section {
    display: flex;
    min-height: 70vh;
    background-image: url('img/2_11zon.jpg'); /* << APPLY MAIN BACKGROUND IMAGE HERE */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Optional: for a parallax-like effect */
    position: relative; /* For a potential overall overlay if needed */
}

/* Optional: If you want an overlay over the ENTIRE section background image */
/*
.check-availability-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Adjust overlay darkness */
/*    z-index: 0; /* Behind column content */
/*}
*/

.availability-left-column {
    flex-basis: 55%;
    color: white; /* Text on this side is over the main bg image */
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    position: relative; /* To contain its own overlay and content */
    z-index: 1; /* Ensure content is above section's ::before overlay if used */
}

.availability-left-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Adjust this overlay: make it more transparent or remove if not needed
       if the main section background has sufficient contrast or its own overlay. */
    background-color: rgba(0, 0, 0, 0.25); /* SUBTLE overlay just for left text area */
    z-index: 1; /* Behind .availability-left-content */
}

.availability-left-content {
    position: relative;
    z-index: 2; /* Above .availability-left-overlay */
    max-width: 450px;
    /* ... (rest of .availability-left-content inner styles remain the same) ... */
}
/* ... (.star-rating, h2, .reservation-info, .toll-free-note, .award-badge-booking styles remain same) ... */
.availability-left-content .star-rating { color: var(--gold-accent); margin-bottom: 15px; font-size: 1.2rem; }
.availability-left-content h2 { font-family: var(--primary-font); font-size: 1.5rem; line-height: 1.4; margin-bottom: 30px; color: white; }
.reservation-info { display: flex; align-items: center; margin-bottom: 15px; }
.reservation-info i { font-size: 2.5rem; margin-right: 15px; color: white; }
.reservation-info div span { display: block; font-size: 0.9rem; color: rgba(255,255,255,0.8); margin-bottom: 2px; }
.reservation-info div p { font-size: 1.3rem; font-weight: bold; color: white; margin: 0; line-height: 1; }
.toll-free-note { font-size: 0.85rem; color: rgba(255,255,255,0.9); margin-bottom: 40px; }
.toll-free-note i { margin-right: 8px; color: #77dd77; }
.award-badge-booking { max-width: 120px; height: auto; }


.availability-right-column {
    flex-basis: 35%;
    padding: 50px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    background-color: var(--bg-beige); /* << FORM SIDE MUST HAVE ITS OWN SOLID/SEMI-TRANSPARENT BG */
                                     /* Or use rgba for semi-transparent: e.g., rgba(245, 240, 233, 0.95) */
    position: relative; /* Ensure it's above section's ::before overlay if used */
    z-index: 1;
}
/* ... (.booking-form-container, .form-section-tagline, h3, .booking-form, etc. styles remain same) ... */
.booking-form-container { max-width: 450px; width: 100%; margin: 0 auto; }
.form-section-tagline { font-size: 0.8rem; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; font-weight: 600; }
.booking-form-container h3 { font-family: var(--primary-font); font-size: 2rem; color: var(--text-dark); margin-bottom: 30px; }
.booking-form .form-group { margin-bottom: 20px; }
.booking-form label { display: block; font-size: 0.85rem; color: #555; margin-bottom: 6px; font-weight: 500; }
.booking-form input[type="text"], .booking-form input[type="email"], .booking-form input[type="tel"], .booking-form input[type="number"], .booking-form select { width: 100%; padding: 12px 15px; border: 1px solid #ddd; background-color: white; border-radius: 3px; box-sizing: border-box; font-family: var(--secondary-font); font-size: 0.95rem; color: var(--text-dark); }
.booking-form .datepicker-input { background-image: url('img/calendar-icon.svg'); background-repeat: no-repeat; background-position: right 15px center; background-size: 16px; padding-right: 40px; }
.form-group-row { display: flex; gap: 20px; margin-bottom: 20px; }
.form-group-row .form-group { flex: 1; margin-bottom: 0; }
.form-group-row:last-of-type { margin-bottom: 30px; }
.btn-full-width { width: 100%; padding: 15px 20px !important; font-size: 0.9rem !important; }


/* --- Responsive for Check Availability Section --- */
@media (max-width: 991px) { /* Tablet and below */
    .check-availability-section {
        flex-direction: column;
        background-attachment: scroll; /* Parallax might not work well when stacked */
    }

    .availability-left-column,
    .availability-right-column {
        flex-basis: auto;
        width: 100%;
    }

    .availability-left-column {
        padding: 80px 30px; /* More vertical padding if it's full width now */
        min-height: 450px;
        text-align: center;
    }

    .availability-right-column {
        padding: 40px 20px;
    }
}

/* @media (max-width: 480px) { ... (existing mobile form input stacking if needed) ... } */
@media (max-width: 480px) { 
    .form-group-row { flex-direction: column; gap: 20px; }
    .availability-left-content h2 { font-size: 1.6rem; }
    .reservation-info div p { font-size: 1.1rem; }
}



/* --- Suites Hero Section  Suite page start--- */
/* --- Suites Hero Section --- */
.suites-hero-section {
    position: relative;
    background-size: cover;
    background-position: center center; /* Ensure center focus */
    min-height: 55vh; /* Adjust height to your liking */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.suites-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.50); /* Slightly increased overlay for better contrast */
    z-index: 1;
}

.suites-hero-content {
    position: relative;
    z-index: 2;
    padding: 30px 0;
}

.suites-hero-content .star-rating {
    color: var(--gold-accent);
    font-size: 1.2rem; /* Slightly smaller stars if needed */
    margin-bottom: 8px;
}

.suites-hero-tagline {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 5px;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}

.suites-hero-title {
    font-family: var(--primary-font);
    font-size: 3.5rem; /* Adjust title size */
    font-weight: 700; /* Bolder title */
    color: white;
    line-height: 1.1;
    margin: 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2); /* Subtle shadow for depth */
}

/* --- Suite Detail Section --- */
.suite-detail-section {
    background-color: #ffffff; /* White background for content area */
}

.suite-item {
    display: flex;
    align-items: center;
    gap: 50px; /* Increased gap between text and image */
    margin-bottom: 2px; /* Increased space between suite items */
}
.suite-item:last-child {
    margin-bottom: 0;
}

.suite-item-text {
    flex: 1 1 48%; /* Adjust flex-basis if needed */
    box-sizing: border-box;
}

.suite-item-text h2 {
    font-family: var(--primary-font);
    font-size: 1.2rem; /* Suite name size */
    color: var(--text-dark);
    margin-bottom: 15px;
    font-weight: 700; /* Bolder suite name */
}


.suite-item-text > p { /* The main description paragraph */
    font-family: var(--secondary-font);
    color: #555;
    line-height: 1.7;
    margin-bottom: 30px;
    font-size: 0.95rem;
}

.suite-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); /* Adjust minmax for feature width */
    gap: 15px 12px; /* Row and column gap */
    margin-bottom: 35px;
}

.suite-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--secondary-font);
    font-size: 0.9rem;
    color: #444;
}

.feature-icon { /* Styling for Font Awesome <i> tags */
    font-size: 1.5rem;  /* Font Awesome icon size */
    color: var(--gold-accent); /* Icon color */
    width: 28px;        /* Fixed width for alignment */
    text-align: center; /* Center icon */
    line-height: 1;
}

.suite-item-image {
    flex: 1 1 52%; /* Adjust flex-basis if needed */
    min-height: 400px; /* Ensure image area has good height */
    max-height: 500px; /* Max height to prevent overly tall images */
    overflow: hidden;
    border-radius: 3px; /* Optional slight rounding */
}

.suite-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area well */
    display: block;
    transition: transform 0.4s ease-out;
}
.suite-item-image:hover img {
    transform: scale(1.03); /* Subtle zoom on image hover */
}


/* For alternating layout */
.suite-item.suite-item-reverse {
    flex-direction: row-reverse;
}
/* No specific padding adjustments needed for reversed text if gap handles it */


.suite-book-button {
    /* Uses .btn and .btn-brown from global styles */
    margin-top: 15px; /* Space above the button */
    padding: 12px 30px; /* Make button slightly larger */
    font-size: 0.9rem;
}


/* --- Responsive for Suites Page --- */
@media (max-width: 991px) { /* Tablet */
    .suites-hero-title {
        font-size: 2.8rem;
    }
    .suite-item {
        gap: 30px; /* Reduced gap for tablet */
    }
    .suite-item-text h2 {
        font-size: 1.9rem;
    }
    .suite-features-grid {
        grid-template-columns: repeat(2, 1fr); /* Force 2 columns for features on tablet */
    }
    .suite-item-image {
        min-height: 350px;
    }
}

@media (max-width: 767px) { /* Mobile */
    .suites-hero-section {
        min-height: 45vh;
    }
    .suites-hero-title {
        font-size: 2.2rem;
    }

    .suite-item,
    .suite-item.suite-item-reverse { /* Apply to both normal and reversed items */
        flex-direction: column !important; /* Force stacking */
        gap: 0; /* Remove gap if image and text should touch or have specific margins */
        margin-bottom: 40px; /* Adjust space between stacked suite items */
    }

    .suite-item-text {
        order: 2; /* Text content comes AFTER the image */
        padding: 25px 15px; /* Adjust padding for text block on mobile */
        text-align: center; /* Center text content if desired */
        /* background-color: var(--bg-beige); /* If you want a distinct bg for text on mobile */
    }
    /* No need for specific .suite-item.suite-item-reverse .suite-item-text adjustments here
       as 'order' will handle it for both. */


    .suite-item-text h2 {
        font-size: 1.7rem;
        /* text-align: center; /* Already centered by parent if that's the style */
    }
    .suite-item-text > p {
        text-align: left; /* Or 'center' or 'justify' as preferred */
        font-size: 0.9rem;
        margin-bottom: 25px;
    }

    .suite-features-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* More flexible for features on mobile */
        /* Or keep repeat(2, 1fr) if you prefer strict 2 columns */
        gap: 15px 10px;
        margin-bottom: 25px;
        /* justify-items: center; /* If you want features centered in their grid cells */
    }
     .suite-feature {
        /* justify-content: center; /* If feature content should be centered */
    }

    .suite-item-image {
        order: 1; /* Image content comes BEFORE the text */
        min-height: 250px; /* Adjust image height for mobile */
        max-height: 320px;
        width: 100%; /* Ensure image takes full width of the stacked column */
        /* border-radius: 0; /* Remove radius if it's part of a continuous block */
    }
    .suite-item-image img {
        /* border-top-left-radius: 3px; /* Example if item has radius */
        /* border-top-right-radius: 3px; */
        /* border-bottom-left-radius: 0; /* No bottom radius if text below */
        /* border-bottom-right-radius: 0; */
    }


    .suite-book-button {
        display: block;
        width: fit-content;
        margin: 0 auto; /* Center the button */
        text-align: center;
    }
}

/* ========= RESTAURANT SECTION STYLES ========= */

.restaurant-section {
    background-color: #fff; /* Or your desired background, e.g., var(--bg-beige) */
    /* Uses .section-padding for overall spacing */
}

.restaurant-content {
    max-width: 700px; /* Constrain the width of the content for readability */
    margin: 0 auto; /* Center the content block if it's narrower than .container */
    /* text-align: center; /* Uncomment if you want all content in this block centered */
}

.restaurant-content .star-rating {
    /* Uses global .star-rating styles */
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.restaurant-content .section-tagline {
    /* Uses global .section-tagline styles */
    color: #888;
    margin-bottom: 5px;
}

.restaurant-content .section-main-title {
    /* Uses global .section-main-title styles */
    color: var(--text-dark);
    margin-bottom: 30px; /* Space after main title */
}

.restaurant-timings-title {
    font-family: var(--secondary-font); /* Or var(--primary-font) if you prefer */
    font-size: 1.3rem;
    color: var(--text-dark);
    font-weight: 600; /* Bolder for this subtitle */
    margin-bottom: 20px;
}

.restaurant-timings-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.restaurant-timings-list li {
    display: flex;
    align-items: center; /* Vertically align icon and text */
    margin-bottom: 15px; /* Space between timing items */
    font-family: var(--secondary-font);
    font-size: 1rem;
    color: #555; /* Text color for timings */
}

.timing-icon {
    font-size: 1.1rem; /* Clock icon size */
    color: #777;    /* Clock icon color, can be var(--gold-accent) too */
    margin-right: 12px; /* Space between icon and text */
    width: 20px; /* Give icon a fixed width for alignment */
    text-align: center; /* Center icon if it has fixed width */
}

.restaurant-timings-list li span {
    flex-grow: 1; /* Allow text to take remaining space */
}

/* Optional styles for added description or button */
.restaurant-description {
    margin-top: 30px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
}
/* .restaurant-content .btn-brown { margin-top: 25px; } /* If you add a button */


/* --- Responsive for Restaurant Section --- */
@media (max-width: 767px) { /* Mobile */
    .restaurant-content .section-main-title {
        font-size: 2.2rem; /* Adjust title size for mobile */
    }
    .restaurant-timings-title {
        font-size: 1.15rem;
    }
    .restaurant-timings-list li {
        font-size: 0.9rem; /* Adjust timing text size */
    }
    .timing-icon {
        font-size: 1rem;
    }
}


/* --- Itinerary Hero Slider Section --- */
.itinerary-hero-slider-section {
    position: relative;
    height: 50vh; /* Slider height is half the viewport height */
    /* Or slightly less: height: calc(50vh - 40px); /* If header is approx 80px, this gives space */
    min-height: 300px; /* Minimum height for smaller screens */
    max-height: 450px; /* Maximum height to prevent it from becoming too tall on large screens */
    overflow: hidden;
    background-color: #f0f0f0; /* Fallback background if images are loading */
}

.itinerary-hero-slider-viewport {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.itinerary-hero-slider-track {
    display: flex;
    height: 100%;
    transition: transform 0.7s ease-in-out;
    will-change: transform;
    /* Width set by JS */
}

.itinerary-hero-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    background-size: cover; /* Cover the area */
    background-position: center center;
    background-repeat: no-repeat;
}

.itinerary-hero-slider-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    /* Uses global .slider-dots .dot styles for appearance */
}
/* Ensure .slider-dots .dot and .dot.active are defined globally or copy them here */
/* Example if not global:
.slider-dots .dot { display: inline-block; width: 10px; height: 10px; background-color: rgba(255,255,255,0.5); border-radius: 50%; margin: 0 5px; cursor: pointer; transition: background-color 0.3s ease; }
.slider-dots .dot.active { background-color: white; }
*/


/* --- Itinerary Accordion Section --- */
.itinerary-accordion-section {
    background-color: var(--bg-beige); /* Light beige background */
}

.itinerary-header-content {
    max-width: 800px;
    margin: 0 auto 50px auto; /* Center header content and add space below */
    text-align: left; /* As per image */
}

.itinerary-header-content .star-rating {
    margin-bottom: 10px;
    font-size: 1.2rem;
    /* text-align: left; /* If container is centered but stars need left align */
}

.itinerary-header-content .section-main-title {
    font-size: 2.8rem; /* "Itinerary" title */
    margin-bottom: 15px;
    color: var(--text-dark);
}

.itinerary-intro-text {
    font-size: 1rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 25px;
}

.itinerary-know-more {
    font-family: var(--secondary-font);
    font-size: 0.9rem;
    color: #444;
}
.itinerary-know-more span {
    display: block;
    font-weight: 600;
    margin-bottom: 3px;
    border-bottom: 1px solid #ccc; /* Underline for "Know More" */
    padding-bottom: 3px;
    width: fit-content; /* Underline only under text */
}
.itinerary-know-more a {
    color: #444;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}
.itinerary-know-more a:hover {
    color: var(--gold-accent);
}
.itinerary-know-more i {
    margin-right: 8px;
    color: var(--gold-accent); /* Phone icon color */
}


.itinerary-accordion {
    max-width: 800px; /* Match header content width */
    margin: 0 auto;
}

.accordion-item {
    background-color: #ffffff; /* White background for each accordion item */
    margin-bottom: 10px; /* Space between accordion items */
    border: 1px solid #eaeaea;
    border-radius: 3px;
    overflow: hidden; /* To contain content nicely */
}
.accordion-item:last-child {
    margin-bottom: 0;
}

.accordion-header {
    background-color: transparent; /* Or #f9f9f9 for a very slight off-white */
    border: none;
    /* border-bottom: 1px solid #eaeaea; /* Separator line if content is directly below */
    padding: 18px 25px;
    width: 100%;
    text-align: left;
    font-family: var(--primary-font); /* Or secondary for a less decorative look */
    font-size: 1.25rem;
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600; /* Slightly bolder header */
}
.accordion-item.active .accordion-header {
    /* Optional: style for active header */
    /* background-color: #f0f0f0; */
}


.accordion-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: relative;
    transition: transform 0.3s ease;
}
.accordion-icon::before,
.accordion-icon::after {
    content: '';
    position: absolute;
    background-color: #777; /* Icon color */
    transition: background-color 0.3s ease;
}
.accordion-icon::before { /* Horizontal line */
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px;
}
.accordion-icon::after { /* Vertical line (for plus) */
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    margin-left: -1px;
}
.accordion-item.active .accordion-icon::after {
    transform: rotate(90deg); /* Hides vertical line to form minus */
}
.accordion-item.active .accordion-icon::before,
.accordion-item.active .accordion-icon::after {
    /* background-color: var(--gold-accent); /* Optional: change icon color when active */
}


.accordion-content {
    padding: 0px 25px 20px 25px; /* Top padding is 0 if header has bottom border */
    /* display: none; /* Hidden by default - JS will handle this */
    background-color: #ffffff;
    font-family: var(--secondary-font);
    font-size: 0.95rem;
    color: #555;
    line-height: 1.7;
}
.accordion-content ul {
    list-style: disc;
    padding-left: 20px;
    margin-top: 15px;
    margin-bottom: 0;
}
.accordion-content li {
    margin-bottom: 10px;
}
.accordion-content p:first-child {
    margin-top: 15px; /* Space if content starts with a paragraph */
}


/* --- Responsive for Itinerary Page --- */
@media (max-width: 767px) { /* Mobile */
    .itinerary-hero-slider-section {
        height: 40vh; /* Adjust hero height for mobile */
        min-height: 250px;
        max-height: 350px;
    }
    .itinerary-header-content .section-main-title {
        font-size: 2.2rem;
    }
    .itinerary-intro-text {
        font-size: 0.9rem;
    }
    .accordion-header {
        font-size: 1.1rem;
        padding: 15px 20px;
    }
    .accordion-content {
        padding: 0px 20px 15px 20px;
        font-size: 0.9rem;
    }
}