/* --- 🎨 Design System: Colors & Typography --- */
    :root {
        --color-dark: #1A1A1A; /* Primary Text & Dark Backgrounds */
        --color-white: #FFFFFF; /* Clean Backgrounds */
        --color-accent: #B8860B; /* Deep Gold/Ochre (CTAs & Highlights) */
        --color-light-grey: #F8F8F8; /* Subtle Section Backgrounds */
        --font-primary: 'Inter', sans-serif;
        --font-secondary: 'Playfair Display', serif;
    }
/* styles.css */


    html {
        /* Enables smooth scrolling for all anchor links (e.g., <a href="#section-id">) */
        scroll-behavior: smooth;
    }
    /* Base Styles & Global Reset */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: var(--font-primary);
        color: var(--color-dark);
        line-height: 1.6;
        background-color: var(--color-white);
    }
    .hidden {
        display: none !important;
    }
    /* Global scroll lock for when mobile menu is open (requires JS to toggle) */
    body.no-scroll {
        overflow: hidden;
    }

    h1, h2, h3 {
        font-family: var(--font-secondary);
        font-weight: 700;
        line-height: 1.2;
        color: var(--color-dark);
    }

    a {
        text-decoration: none;
        color: var(--color-dark);
        transition: color 0.3s ease;
    }

    /* General Layout */
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    section {
        padding: 40px 0;
    }

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

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

    /* CTA Button Styling */
    .btn {
        display: inline-block;
        padding: 14px 30px;
        border: 2px solid var(--color-accent);
        background-color: var(--color-accent);
        color: var(--color-white);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.3s ease;
        cursor: pointer;
        border-radius: 4px;
        margin-bottom: 5px;
    }

    .btn:hover {
        background-color: var(--color-dark);
        border-color: var(--color-dark);
        transform: translateY(-2px); 
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    }

    .btn-ghost {
        background-color: transparent;
        color: var(--color-white);
        border-color: var(--color-white);
    }

    .btn-ghost:hover {
        background-color: var(--color-white);
        color: var(--color-dark);
        border-color: var(--color-white);
        transform: translateY(-2px); 
    }

     .btn-ghost-offer {
        background-color:var(--color-accent);
        color: var(--color-white);
        border-color: var(--color-accent);
    }

    .btn-ghost-offer:hover {
        background-color: var(--color-white);
        color: var(--color-dark);
        border-color: var(--color-white);
        transform: translateY(-2px); 
    }

    /* avatar image in header */

    .user-avatar {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 10px;
        vertical-align: middle;
    }  
    
    /* user email in header */

    
    /* --- 1. HEADER & NAVIGATION (Desktop Default) --- */
    #main-header {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        background: transparent;
        transition: background 0.3s ease, padding 0.3s ease;
    }

    .nav-scrolled {
        background: var(--color-dark) !important;
        padding: 5px 0;
    }

    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        /*padding: 15px 20px;*/
    }
  .package-price {
    font-size: 1.2rem;
    font-weight: 700;
    /*margin-bottom: 10px;*/
    text-decoration: line-through;
  }
  .package-offer {
    font-size: 2.2rem;
    font-weight: 700;
    color: #B8860B !important;
   /*margin-bottom: 10px;*/
  }
    .logo a {
        font-family: var(--font-secondary);
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--color-white);
    }

    /* Desktop Navigation Links */
    .nav-bar #main-nav-menu ul {
        list-style: none;
        display: flex;
        gap: 25px;
    }

    .nav-bar #main-nav-menu a {
        color: var(--color-white);
        font-weight: 600;
        position: relative;
        padding: 5px 0;
        transition: color 0.3s ease;
    }

    /* Link Hover Effect */
    .nav-bar #main-nav-menu a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background-color: var(--color-accent);
        transform: translateX(-50%);
        transition: width 0.3s ease;
    }

    .nav-bar #main-nav-menu a:hover::after {
        width: 100%;
    }
    .nav-bar #main-nav-menu a:hover {
        color: var(--color-accent);
    }

    /* --- MOBILE MENU ICON STYLING (Hidden on Desktop) --- */
    .menu-toggle {
        display: none; 
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 25px;
        cursor: pointer;
        z-index: 1001; 
        position: relative;
    }

    .menu-toggle .bar {
        width: 100%;
        height: 3px;
        background-color: var(--color-white); 
        transition: all 0.3s ease;
        border-radius: 2px;
    }

    /* Hamburger to 'X' (Close Icon) Animation */
    .menu-toggle.is-active .bar:nth-child(2) {
        opacity: 0; 
    }

    .menu-toggle.is-active .bar:nth-child(1) {
        transform: translateY(11px) rotate(45deg); 
    }

    .menu-toggle.is-active .bar:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg); 
    }

    /* --- 2. HERO SECTION --- */
    #hero {
        position: relative;
        height: 80vh;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.4); 
    }

    .hero-content {
        color: var(--color-white);
        max-width: 800px;
    }

    .hero-content h1 {
        font-size: 4rem;
        margin-bottom: 20px;
        color: var(--color-white);
    }

    .hero-content p {
        font-size: 1.25rem;
        margin-bottom: 40px;
    }

    /* --- ABOUT SECTION STYLES (New Section 9) --- */

.about-grid {
    display: grid;
    /* 3 columns: 1fr for text, small middle for image, 1fr for philosophy */
    grid-template-columns: 1.2fr 0.8fr 1.2fr; 
    gap: 50px;
    align-items: flex-start; /* Align content to the top */
}

.about-story h3, .about-philosophy h3 {
    font-size: 2rem;
    margin-bottom: 25px;
    color: var(--color-accent); /* Highlighted gold heading */
}

/* Image Styling */
.about-image {
    text-align: center;
}
.about-image img {
    width: 100%;
    /* Ensure the image is visually distinct with a border/shadow */
    border: 4px solid var(--color-white); 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    object-fit: cover;
    height: 100%; /* Fill the space given by the grid, adjusts with content */
}

/* Philosophy List Styling */
.philosophy-list {
    list-style: none;
    padding: 0;
}
.philosophy-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
}
.philosophy-list .icon {
    font-size: 1.5rem;
    color: var(--color-accent);
    margin-right: 15px;
    padding-top: 5px; /* Visual alignment with text */
}

.philosophy-list h4 {
    font-family: var(--font-primary);
    font-size: 1.15rem;
    margin-bottom: 5px;
    font-weight: 700;
}
.philosophy-list p {
    font-size: 0.95rem;
    color: #666;
}
/* ========================================
BLOG SECTION STYLES (NEW)
======================================== */
#blog {
    padding: 80px 0;
    /* Uses your defined variable for the subtle background color */
    background-color: var(--color-light-grey); 
}

.blog-grid {
    display: grid;
    gap: 30px;
    /* Responsive grid: 3 columns on large screens, adapting down to 1 column */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    margin-top: 50px;
}

.blog-post {
    background-color: var(--color-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* Adds a slight lift and shadow change on hover for interactivity */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    border: 1px solid #eee; /* Subtle border for definition */
}

.blog-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.blog-post img {
    width: 100%;
    height: 220px;
    object-fit: cover;
   
}

.post-content {
    padding: 25px;
}

.post-category {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    /* Uses your accent color for the category tag */
    color: var(--color-accent); 
    letter-spacing: 1px;
    margin-bottom: 10px;
    padding: 3px 8px;
    border: 1px solid var(--color-accent);
    border-radius: 4px;
}

.blog-post h3 {
    font-family: var(--font-secondary);
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--color-dark);
}

.blog-post p {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 20px;
}

.read-more-link {
    color: var(--color-dark);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s ease;
}

.read-more-link:hover {
    color: var(--color-accent);
}

.read-more-link i {
    margin-left: 8px;
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.read-more-link:hover i {
    transform: translateX(3px);
}

/* Ensures blog posts participate in the scroll animation */
.blog-post.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
}

.blog-post.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}
/* --- BLOG PAGE SPECIFIC STYLES --- */

/* Defines the two-column layout for the blog page */
.blog-page-layout {
    display: grid;
    grid-template-columns:minmax(0, 2fr) 300px; /* Main content (flexible) and sidebar (fixed width) */
    gap: 60px; /* Space between content and sidebar */
    align-items: start; /* Aligns content to the top */
}



/* --- SIDEBAR STYLES --- */
.blog-sidebar {
    position: sticky; /* Makes the sidebar stick as the user scrolls */
    top: 120px; /* Adjusted to sit nicely below the sticky header */
}

.sidebar-widget {
    background-color: var(--color-light); /* Assuming --color-light is a subtle background */
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

/* --- ARTICLE HEADER & META --- */

.article-header {
    margin-bottom: 30px;
}

.article-title {
    font-size: 2.8rem;
    margin-top: 5px;
    margin-bottom: 15px;
    line-height: 1.1;
    color: var(--color-dark);
}

.article-meta {
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    color: #888;
}

.article-meta i {
    color: var(--color-accent);
    margin-right: 5px;
}

.article-featured-image img {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    border-radius: 8px;
}

/* --- ARTICLE BODY (READABILITY) --- */

.article-body {
    font-size: 1.15rem; /* Larger font for easier reading */
    line-height: 1.8; /* Increased line height for vertical flow */
    color: #333;
}

/* Style for elements inside the dynamic content */
.article-body h2 {
    font-size: 2rem;
    margin-top: 30px;
    margin-bottom: 15px;
    border-left: 4px solid var(--color-accent);
    padding-left: 15px;
}

.article-body p {
    margin-bottom: 20px;
}

.article-body ul, 
.article-body ol {
    margin: 20px 0;
    padding-left: 40px;
}

/* --- FOOTER META (Tags and Sharing) --- */

.article-footer-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-color: #eee !important;
}

.article-tags .tag-link {
    display: inline-block;
    background-color: var(--color-light-grey);
    color: var(--color-dark);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.9rem;
    margin-left: 10px;
    transition: background-color 0.3s;
}

.article-tags .tag-link:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
}

/* Social Share Buttons */
.social-share-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-share-buttons strong {
    margin-right: 5px;
}

.share-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
    transition: transform 0.2s;
}

.share-btn:hover {
    transform: translateY(-2px);
}

.share-btn.facebook { background-color: #3b5998; }
.share-btn.twitter { background-color: #00acee; }
.share-btn.pinterest { background-color: #E60023; }

/* --- BACK TO BLOGS LINK STYLING --- */

.back-to-blogs-container {
    text-align: left; /* Aligns the link to the left side of the article container */
    margin-top: 40px;
    padding-top: 25px;
    border-color: #eee !important;
}

.back-to-blogs-link {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: var(--color-dark); /* Use your primary text color */
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 50px; /* Pill shape for a modern look */
    transition: all 0.3s ease;
}

.back-to-blogs-link i {
    margin-right: 8px;
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.back-to-blogs-link:hover {
    color: var(--color-white);
    background-color: var(--color-accent); /* Highlights with your accent color */
    border-color: var(--color-accent);
}

.back-to-blogs-link:hover i {
    /* Subtle movement on hover */
    transform: translateX(-3px); 
}


/* Highlight the active link text with the accent color */
.category-list a.active-category {
    color: var(--color-accent) !important;
    font-weight: 700; /* Make it bold */
}

/* Give the active link a background highlight or border for stronger emphasis */
.category-list li:has(> a.active-category) {
    background-color: rgba(184, 134, 11, 0.05); /* Very light accent background */
    border-radius: 4px;
    padding: 0 10px; /* Add some padding around it */
    margin: 0 -10px; /* Ensure padding doesn't push the surrounding elements */
}

/* Ensure the count for the active category is also highlighted */
.category-list a.active-category .count {
    color: var(--color-accent);
}
/* --- PAGINATION STYLING --- */

/* Wrapper for the entire pagination component (from $allBlogs->links()) */
.pagination {
    display: flex;
    justify-content: center; /* Center the whole navigation block */
    align-items: center;
    list-style: none;
    padding: 0;
    margin-top: 50px; /* Space above the footer */
}

/* Individual list item (container for each link/number) */
.page-item {
    margin: 0 5px;
}

/* Base style for all links and spans (numbers) */
.page-link {
    display: block;
    padding: 8px 14px;
    font-size: 1rem;
    color: var(--color-dark);
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-decoration: none;
    font-weight: 500;
}

/* Hover and Focus States */
.page-item:not(.active) .page-link:hover {
    background-color: var(--color-light-grey);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* Active Page Number */
.page-item.active .page-link {
    background-color: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
    font-weight: 700;
    /* Remove hover effect from the active link */
    cursor: pointer;
}
/* Style for Previous and Next links (Bootstrap classes .prev and .next) */
.page-item .page-link[rel="prev"],
.page-item .page-link[rel="next"] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-dark);
    /* Make arrows slightly more prominent */
    padding: 8px 18px; 
}


/* Hover State */
.page-item:not(.active) .page-link:hover {
    background-color: var(--color-light-grey);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* Active Page Number (Key to the professional look) */
.page-item.active .page-link {
    /* Targets the <span> inside the <li> with class 'active' */
    background-color: var(--color-accent); 
    color: var(--color-white);
    border-color: var(--color-accent);
    font-weight: 700;
    cursor: default;
    /* Ensure the active span element is styled */
    border: 1px solid var(--color-accent); 
}

/* Disabled (Previous/Next) Links */
.page-item.disabled .page-link {
    color: #999;
    border-color: #eee;
    background-color: #f7f7f7;
    cursor: not-allowed;
}

/* Fix for the focus outline issue often seen with Bootstrap */
.page-link:focus {
    box-shadow: 0 0 0 0.25rem rgba(184, 134, 11, 0.25); /* Uses a transparent gold shadow */
}

/* Disabled (Previous/Next) Links */
.page-item.disabled .page-link {
    color: #999;
    border-color: #eee;
    background-color: #f7f7f7;
    cursor: not-allowed;
}

/* Style for Previous and Next arrows/text (Optional: Makes them larger) */
.page-item:first-child .page-link,
.page-item:last-child .page-link {
    font-size: 1.1rem;
    padding: 8px 18px;
}

/* Adjust margin when centered using the parent text-center class */
.main-blog-content > .mt-12 {
    text-align: center; /* Ensures the pagination wrapper is centered */
}
.widget-title {
    font-family: var(--font-secondary);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--color-dark);
    border-bottom: 2px solid var(--color-accent); /* Accent underline for titles */
    display: inline-block;
    padding-bottom: 5px;
}

/* Search Widget Styling */
.search-box {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 5px;
    /*overflow: hidden;*/
}

.search-box input {
    flex-grow: 1;
    border: none;
    padding: 10px 15px;
    font-size: 1rem;
    outline: none;
}

.search-btn {
    background-color: var(--color-accent);
    color: var(--color-white);
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.search-btn:hover {
    background-color: var(--color-dark);
}

/* Categories Widget Styling */
.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-list li a {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
    color: var(--color-dark);
    text-decoration: none;
    transition: color 0.3s;
}

.category-list li:last-child a {
    border-bottom: none;
}

.category-list li a:hover {
    color: var(--color-accent);
}

.category-list .count {
    font-size: 0.9rem;
    color: #888;
}

/* Latest/Featured Posts Widget Styling */
.latest-posts-list .post-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee;
}

.latest-posts-list .post-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.post-item img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 15px;
}

.post-item-content h5 {
    font-size: 1rem;
    line-height: 1.4;
    margin: 0;
}

.post-item-content h5 a {
    color: var(--color-dark);
    text-decoration: none;
    transition: color 0.3s;
}

.post-item-content h5 a:hover {
    color: var(--color-accent);
}

.post-date {
    display: block;
    font-size: 0.8rem;
    color: #999;
    margin-bottom: 3px;
}

/* --- RESPONSIVENESS --- */
@media (max-width: 1024px) {
    .blog-page-layout {
        /* On tablets/smaller screens, stack the main content and sidebar */
        grid-template-columns: 1fr;
        
    }
    
    .blog-sidebar {
        /* Remove sticky behavior on small screens to prevent issues */
        position: static;
        top: auto;
    }
}
/* Section Headings */
    .section-title {
        text-align: center;
        font-size: 2.5rem;
        margin-bottom: 10px;
        color: var(--color-dark);
    }

    .section-subtitle {
        text-align: center;
        font-size: 1.1rem;
        color: #777;
        margin-bottom: 50px;
    }
/* CTA Buttons (Shared Styles) */
    .cta-button {
        display: inline-block;
        padding: 12px 30px;
        border-radius: 4px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.3s ease;
        border: 2px solid transparent;
        cursor: pointer;
    }

    .primary-cta {
        background-color: var(--color-accent);
        color: var(--color-white);
        border-color: var(--color-accent);
    }

    .primary-cta:hover {
        background-color: darken(var(--color-accent), 10%); /* conceptual darken */
        background-color: #a3790a; 
        box-shadow: 0 4px 10px rgba(184, 134, 11, 0.4);
    }
/* --- CONTACT SECTION STYLES (New Section 10) --- */

.contact-grid {
    display: grid;
    /* Two equal columns: Form on the left, Info/Map on the right */
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: flex-start;
}

/* Form Styling */
.contact-form {
    padding: 30px;
    background-color: var(--color-light); /* Light background for the form itself */
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-dark);
    font-size: 0.9rem;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: var(--color-white);
    transition: border-color 0.3s;
    font-size: 1rem;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--color-accent);
    outline: none;
}

.contact-form textarea {
    resize: vertical;
}

/* Contact Info Styling */
.contact-info-wrapper {
    color: var(--color-light); /* Text color for the right column */
}

.contact-details h3, .social-links h3 {
    color: var(--color-white);
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 15px;
}

.contact-details p {
    margin-bottom: 10px;
    font-size: 1rem;
}

.contact-details a {
    color: var(--color-light);
    text-decoration: none;
    transition: color 0.3s;
}

.contact-details a:hover {
    color: var(--color-accent);
}

/* --- NEW MOBILE BOOKING PANEL BASE STYLES --- */
.mobile-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-dark); 
    padding-top: 80px; 
    z-index: 999; 
    
    /* Hiding mechanism: Slide off-screen to the right */
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1);
    overflow-y: auto;
    
    /* Ensure it's hidden on Desktop, always */
    display: none; 
}
@media (min-width:600px)
{
    .user-email {
        vertical-align: middle;
        font-size: 12px;
        color: #cacaca;
    }
}

/* Only show the panel container on mobile */
@media (max-width: 600px) {
    .mobile-panel {
        display: block; 
    }
    .user-email {
       display: none !important;
    }
}

.mobile-panel.is-open {
    transform: translateX(0); /* Slide into view */
}

/* Style the close button */
.mobile-panel-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 2rem;
    cursor: pointer;
    z-index: 1010;
    line-height: 1;
    padding: 5px;
}

/* Style the content area */
.mobile-panel-content {
    padding: 20px;
    color: var(--color-white);
}

/* (Re-use your previous .mobile-notification-summary styles here for the content) */

/* Social Links */
.social-links {
    margin-top: 40px;
    margin-bottom: 40px;
}
.social-links a {
    color: var(--color-white);
    font-size: 1.5rem;
    margin-right: 20px;
    transition: color 0.3s;
}

.social-links a:hover {
    color: var(--color-accent);
}

/* Map Placeholder */
.map-placeholder {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.map-placeholder iframe {
    /* Ensures the iframe is responsive */
    display: block;
    border: none !important;
}
/* --- TESTIMONIALS SECTION STYLES (New Section 11) --- */

.section-heading {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: var(--color-dark);
}

.section-subheading {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 50px;
}
/* --- FLYOUT PANEL BASE STYLES --- */

/* Wrapper to manage icon and panel position */
.booking-flyout-container {
    position: relative;
    /* Ensure the container is aligned correctly with the nav bar */
    display: inline-block; 
    z-index: 1000; /* Must be above everything else in the header */
}

/* The Panel itself */
.booking-flyout-panel {
    position: absolute;
    top: calc(100% + 15px); /* Position 15px below the icon */
    right: 0;
    width: 300px;
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    pointer-events: none;
    /* Hiding mechanism */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px); /* Starts slightly above final position */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

/* State when the panel is open */
.booking-flyout-panel.is-open {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Panel Content Styling */
.flyout-header {
    background-color: var(--color-dark);
    color: var(--color-white);
    padding: 12px 15px;
}
.flyout-header h4 {
    margin: 0;
    font-size: 1rem;
}

.flyout-body {
    padding: 15px;
    color: var(--color-dark);
    font-size: 0.95rem;
}
.flyout-body .package-name {
    margin-top: 5px;
    font-weight: 600;
    color: var(--color-accent);
}

.flyout-footer {
    padding: 10px 15px 15px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.flyout-footer .btn {
    flex-grow: 1;
    font-size: 0.9rem;
}
.login-register-mobile-block {
    display: none;
}
/* Hide on Mobile (so it doesn't conflict with the full-screen menu) */
@media (max-width: 600px) {
    .booking-flyout-panel {
        display: none !important; 
    }
    .login-register-mobile-block {
        display: block; /* Overrides the 'display: none' from the desktop rule */
    }
    /* Hides the flyout panels (as intended for mobile UX) */
    .booking-flyout-panel,
    .user-flyout-panel {
        display: none !important;
    }
    
    /* 1. CONTAINER STYLING: Make the form stand out on the contact page */
    .login-register-mobile-block {
        display: block; /* Overrides desktop 'display: none' */
        background-color: #f8f8f8; /* Light gray background to separate from contact area */
        padding: 30px 20px;
        border-radius: 12px; /* Nicely rounded corners */
        margin-bottom: 40px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    }

    /* 2. TYPOGRAPHY */
    .login-register-mobile-block h2 {
        font-size: 1.8rem; /* Slightly larger title */
        color: var(--color-accent);
        text-align: center;
        margin-bottom: 10px;
        font-weight: 700;
    }
    .login-register-mobile-block .description {
        text-align: center;
        margin-bottom: 30px;
        color: #666;
        font-size: 0.95rem;
    }
    
    /* 3. INPUTS (Making inputs even taller for better touch targets) */
    .login-register-mobile-block input {
        padding: 14px 15px; /* Taller padding */
        margin-bottom: 15px;
        border-radius: 8px; /* Slightly more rounded */
        border: 1px solid #ccc;
    }

    /* 4. BUTTONS (Ensure standard login button is strong) */
    .login-register-mobile-block .btn-accent {
        padding: 15px;
        font-size: 1.1rem;
        font-weight: 700;
        margin-top: 5px; /* Reduce gap before button */
    }

    /* 5. SOCIAL LOGIN SEPARATOR */
    .social-login-separator {
        margin: 30px 0 25px; /* Increased vertical spacing */
    }
    
    /* 6. SOCIAL BUTTONS (Larger touch target and clear branding) */
    .login-register-mobile-block .btn-social {
        padding: 14px 10px;
        font-size: 1rem;
        border-radius: 8px;
         margin-bottom: 10px;
    }

    /* 7. REGISTER TEXT */
    .login-register-mobile-block .register-text {
        margin-top: 25px;
        font-size: 1rem;
    }

    /* Logged In Welcome State */
    .logged-in-state-mobile {
        text-align: center;
    }
    .logged-in-state-mobile h4 {
        color: var(--color-dark);
        font-size: 1.2rem;
        margin-bottom: 25px;
    }
}
/* --- LOGIN/REGISTER FLYOUT PANEL STYLES --- */

/* Reuse the general flyout styles but rename for user access */
.user-flyout-panel {
    position: absolute;
    top: calc(100% + 15px);
    right: 0;
    width: 280px; /* Slightly smaller than booking panel */
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 20px;
    pointer-events: none;
    /* Hiding mechanism */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.user-flyout-panel.is-open {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-flyout-panel h4 {
    color: var(--color-dark);
    font-size: 1.2rem;
    margin-bottom: 20px;
    text-align: center;
}

/* Form Input Styling */
.user-flyout-panel input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.user-flyout-panel .btn-full {
    width: 100%;
    margin-top: 10px;
}

.register-text {
    text-align: center;
    font-size: 0.9rem;
    margin-top: 15px;
}
.register-text a {
    color: var(--color-accent);
}

.logged-in-state {
    text-align: center;
}
.mt-10 { margin-top: 10px; }
.hidden { display: none !important; }

/* Hide on Mobile */
@media (max-width: 600px) {
    .user-flyout-panel {
        display: none !important; 
    }
}
/* --- MOBILE DEVICES (max-width: 600px) --- */
@media (max-width: 600px) {

    /* 1. Header Layout: Ensures even spacing for Logo, Icons, and Toggle */
    .nav-bar {
        /* Change from 'space-between' to 'flex-start' or similar if icons are too close to the edge */
        justify-content: space-between;
        /*padding: 15px 20px;*/
    }
    
    /* 2. Positioning the Icon Containers */
    /* Group the icons together visually on the left/center */
    .user-access-container {
        /* Reset absolute positioning from desktop */
        position: static; 
        order: 1; /* Place User Icon after Logo */
        margin-left: auto; /* Push the group towards the center */
        margin-right: 5px; /* Spacing between the icons */
    }
    
    .booking-flyout-container {
        /* Reset absolute positioning from desktop */
        position: static; 
        order: 2; /* Place Calendar Icon next */
        margin-right: 20px; /* Space before the Hamburger Toggle */
    }
    
    /* 3. Hamburger Menu Toggle */
    .menu-toggle {
        display: flex;
        order: 3; /* Place Toggle last */
        z-index: 1001; /* Ensure it's above the icons */
    }
    
    /* 4. Icon Visual Styling Adjustments (Making them smaller/cleaner) */
    .nav-icon.user-link, 
    .nav-icon.booking-link {
        /* Reduced size on mobile */
        font-size: 1.1rem; 
        /* Ensure icons are dark/white based on header state */
        color: var(--color-white) !important; 
        margin-right: 0; 
        padding-left: 0;
    }
    
    /* 5. Ensure the Unicode icons are visible and correctly sized */
    .icon-user-fix::before,
    .icon-calendar-fix::before {
        font-size: 1.3rem !important; /* Slightly larger for touch target */
        color: var(--color-white) !important;
        position: static; /* Let them flow normally */
        transform: none;
    }

    /* Resetting the absolute positioning used in the Unicode fix */
    .nav-icon.user-link {
        padding-left: 0;
    }
    .nav-icon .icon-user-fix::before {
        position: static !important;
        transform: none !important;
    }
    
    /* 6. Hide the Flyout Panels on Mobile */
    .booking-flyout-panel,
    .user-flyout-panel {
        display: none !important; 
    }
    
    /* 7. Hide the Social Sticky Bar */
    .sticky-social-bar {
        display: none;
    }
    
    /* ... (Other existing mobile rules remain) ... */
    
    /* Example adjustment for the Logo if needed */
    .logo a {
        font-size: 1.4rem;
    }
}
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.testimonial-card {
    background-color: var(--color-white);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    height: 100%; /* Ensures cards are same height */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
}

.testimonial-card .quote {
    font-style: italic;
    color: var(--color-dark);
    line-height: 1.6;
    margin-bottom: 20px;
}

.testimonial-card .client-name {
    font-weight: 700;
    color: var(--color-accent);
    margin-top: auto; /* Pushes the name to the bottom */
}

@media (max-width: 600px) {
    .testimonial-grid {
        grid-template-columns: 1fr;
    }
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .contact-grid {
        /* Stack columns vertically on tablets/mobiles */
        grid-template-columns: 1fr;
    }
    .contact-info-wrapper {
        order: -1; /* Place contact info above the form on small screens */
    }
}

/* --- BOOKING ICON STYLES --- */

/* Basic Icon Styling */
.nav-icon {
    /* Ensures it aligns correctly with other nav items */
    display: flex;
    align-items: center;
    position: relative;
     z-index: 1001; /* Set high, above the flyout panels (z-index: 1000) */
    text-decoration: none;
    color: var(--color-white); /* Use your primary text color */
    font-size: 1.25rem;
    transition: color 0.3s;
    margin-right: 20px; /* Space between icon and menu toggle on desktop */

   
}

.nav-icon:hover {
    color: var(--color-accent); /* Highlight on hover */
}
/* Color when header is scrolled (dark background) */
.nav-scrolled .nav-icon {
    color: var(--color-white); /* Keep white on dark scrolled background */
}

/* --- FINAL ICON FIX: Targetting the Anchor BEFORE Element --- */

/* 1. Ensure the icon space is created for the link */
.nav-icon.notification-link {
    /* ... Keep your existing styles for positioning and margins ... */
    position: relative; 
    padding-left: 1.5rem; /* Make space for the icon */
    font-size: 1.25rem;
}

/* 2. Create and position the icon using ::before */
.nav-icon.notification-link::before {
    /* 💥 CRITICAL FIX: Ensure this is NOT being overridden */
    font-family: 'Font Awesome 6 Solid' !important; 
    font-weight: 900 !important; 
    
    /* Unicode for fa-bell */
    content: '\f0f3'; 
    
    /* Positioning */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    
    /* Color and Size */
    font-size: 1.25rem; 
    color: var(--color-white) !important;
}

/* 3. Social Media Icons (Just to be safe, if they also aren't showing) */
.sticky-social-bar i {
    font-family: 'Font Awesome 6 Brands' !important;
    font-weight: 400 !important; 
    /* The brands are usually font-weight 400 */
}
/* Notification Badge Styling */
.booking-count {
    position: absolute;
    top: -5px;
    right: -10px;
    background-color: var(--color-accent); /* Your accent color for visibility */
    color: var(--color-white);
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    min-width: 15px;
    text-align: center;
}

/* --- STICKY SOCIAL MEDIA BAR STYLES --- */

.sticky-social-bar {
    position: fixed;
    /* Position on the left side, slightly down from the top */
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    
    /* Ensure it stays above content, but below the full-screen mobile menu */
    z-index: 900; 
    
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 0 5px 5px 0; /* Rounded edges on the right side */
    overflow: hidden;
}

.sticky-social-bar a {
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Styling */
    width: 45px;
    height: 45px;
    font-size: 1.15rem;
    color: var(--color-white); /* White icons by default */
    background-color: rgba(0, 0, 0, 0.7); /* Subtle dark background */
    transition: background-color 0.3s ease, transform 0.3s ease;
    
    /* Separator line between icons */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
}

/* Specific Hover Effects (Professional Look) */
.sticky-social-bar a:hover {
    transform: translateX(5px); /* Subtle slide effect */
    color: var(--color-white);
}

/* Color overrides for branding (Optional but professional) */
.sticky-social-bar a:nth-child(1):hover { /* Facebook */
    background-color: #3b5998;
}
.sticky-social-bar a:nth-child(2):hover { /* Instagram */
    background-color: #C13584; 
}
.sticky-social-bar a:nth-child(3):hover { /* WhatsApp */
    background-color: #25D366; 
}

/* --- RESPONSIVENESS (Mobile Adjustment) --- */

@media (max-width: 992px) {
    /* Hide the bar on smaller tablets/mobile devices 
       because fixed elements often clutter the screen */
    .sticky-social-bar {
        display: none;
    }
}

/* Mobile Adjustments (Inside the @media (max-width: 600px) block) */
@media (max-width: 600px) {
    
    /* Ensure the icon is visible and correctly ordered on mobile */
    .nav-icon {
        color: var(--color-dark); /* Default color for mobile header */
        font-size: 1.35rem;
        /* Put the icon between the logo and the menu toggle */
        order: 1; 
        margin-right: 15px; /* Adjust spacing */
         z-index: 1001; /* Set high, above the flyout panels (z-index: 1000) */
    }

    /* If using a sticky header with a light background on scroll */
    .nav-scrolled .nav-icon {
        color: var(--color-dark);
    }
    
    /* If your mobile menu is dark, ensure the badge stands out */
    #main-nav-menu.is-open .nav-icon {
        display: none; /* Hide the icon inside the slide-out menu */
    }
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .about-grid {
        /* On tablet, stack into two columns: Story/Image in row 1, Philosophy in row 2 */
        grid-template-columns: 1fr 1fr; 
        gap: 40px;
    }
    .about-philosophy {
        grid-column: 1 / -1; /* Make philosophy span full width */
    }
}

@media (max-width: 600px) {
    .about-grid {
        /* On mobile, stack everything vertically */
        grid-template-columns: 1fr;
    }
    .about-story, .about-image, .about-philosophy {
        grid-column: auto; /* Reset column spanning */
    }
    .about-image {
        order: -1; /* Place the image first on mobile */
    }
}
    
    /* --- 3. ANIMATION DEFINITIONS --- */
    @keyframes slideUpFadeIn {
        from {
            opacity: 0;
            transform: translateY(50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-on-scroll {
        opacity: 0;
    }

    .animated {
        animation: slideUpFadeIn 0.8s ease-out forwards;
    }

    .card-hover {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .card-hover:hover {
        transform: translateY(-5px); 
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2); 
    }
    
    /* --- 4. WHY CHOOSE SECTION --- */
    .why-choose-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin-top: 40px;
    }
    .card {
        text-align: center;
        padding: 30px;
        background: var(--color-white);
        border-radius: 8px;
    }
    .card .icon {
        font-size: 2.5rem;
        color: var(--color-accent);
        margin-bottom: 15px;
        display: block;
    }

    /* --- 5. SERVICES SECTION --- */
    .services-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin-top: 40px;
    }
    .service-card {
        text-align: center;
        overflow: hidden;
        border-radius: 4px;
    }
    .service-card img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        transition: transform 0.4s ease;
    }
    .service-card:hover img {
        transform: scale(1.05);
    }
    .service-card h3 {
        font-size: 1.35rem;
        margin: 15px 0 5px;
    }

    .service-card p {
        font-size: 0.95rem;
       
        padding: 25px;
        text-align: start;
    }

    /* --- 6. PACKAGES SECTION --- */
    .pricing-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin: 40px auto 60px;
        max-width: 1000px;
    }
    .package-card {
        display: flex;
        flex-direction: column;
        /*justify-content: space-between;*/ /* pushes button to bottom */
        height: 100%; /* make all cards same height */
        padding: 30px 20px;
        border: 1px solid #E0E0E0;
        border-radius: 8px;
        text-align: center;
        position: relative;
        background: var(--color-white);
    }
    
    .package-premium {
        background-color: var(--color-accent);
        color: var(--color-white);
        border-color: var(--color-accent);
        transform: scale(1.05);
    }
    .package-premium h4, .package-premium p, .package-premium a {
        color: var(--color-white);
    }
    .package-premium .price {
        color: var(--color-dark);
    }
    .recommended-tag {
        position: absolute;
        top: 0;
        right: 0;
        background: var(--color-dark);
        color: var(--color-white) !important;
        padding: 4px 12px;
        font-size: 0.8rem;
        font-weight: 600;
        border-radius: 0 8px 0 8px;
    }
    .recommended-tag p{
        color: var(--color-white);
    }
    .package-card h4 {
        font-family: var(--font-primary);
        font-size: 1.5rem;
        font-weight: 700;
    }
    .package-card .price {
        font-size: 2.5rem;
        font-weight: 700;
        /*margin: 10px 0 20px;*/
        color: var(--color-accent); 
    }
    .features {
        list-style: none;
        text-align: left;
        margin-bottom: 25px;
    }
    .features li {
        padding: 8px 0;
        border-bottom: 1px solid #eee;
        font-size: 1rem;
    }
    .features .check {
        color: var(--color-accent);
        margin-right: 10px;
    }

    /* --- 7. FOOTER --- */
    #main-footer {
        background-color: var(--color-dark);
        color: var(--color-light-grey);
        padding: 50px 0;
        font-size: 0.9rem;
    }
    .footer-content {
        display: flex;
        justify-content: space-between;
        gap: 40px;
    }
    #main-footer h4 {
        color: var(--color-white);
        margin-bottom: 15px;
        font-family: var(--font-primary);
        font-weight: 600;
    }
    #main-footer a {
        color: var(--color-light-grey);
        display: block;
        padding: 4px 0;
        transition: color 0.3s ease;
    }
    #main-footer a:hover {
        color: var(--color-accent);
    }
    .footer-col.social a {
        display: inline-block;
        margin-right: 15px;
        font-size: 1rem;
    }
    .footer-col  li{
        list-style: none;
    }
    .footer-col.social .icon {
        font-size: 1.2rem;
        margin-right: 5px;
        vertical-align: middle;
    }

    /* --- Gallery Filters --- */
    .filter-controls {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-bottom: 50px;
    }

    .filter-btn {
        padding: 10px 20px;
        border: 1px solid #ccc;
        background-color: var(--color-white);
        color: var(--color-dark);
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        border-radius: 4px;
    }

    .filter-btn:hover {
        background-color: var(--color-light-grey);
        border-color: var(--color-dark);
    }

    .filter-btn.active {
        background-color: var(--color-accent);
        color: var(--color-white);
        border-color: var(--color-accent);
    }

    /* --- Gallery Grid (True Flexible Masonry) --- */
    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
        grid-auto-rows: 5px; 
        gap: 10px;
        margin-top: 40px;
    }

    .gallery-item {
        position: relative;
        overflow: hidden;
        cursor: pointer;
        border-radius: 4px;
        height: auto; 
        opacity: 0;
    }

    .gallery-item img {
        width: 100%;
        height: auto; 
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;
    }

    /* Gallery Hover Effects */
    .gallery-item:hover img {
        transform: scale(1.03); 
    }
    .image-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(26, 26, 26, 0.7); 
        color: var(--color-white);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0; 
        transition: opacity 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 600;
        text-align: center;
        padding: 10px;
    }
    .image-overlay::before {
        /* This pseudo-element holds the caption text */
        content: attr(data-caption); 
        transform: translateY(20px);
        opacity: 0;
        transition: transform 0.4s ease, opacity 0.4s ease;
    }
    .gallery-item:hover .image-overlay {
        opacity: 1; 
    }
    .gallery-item:hover .image-overlay::before {
        transform: translateY(0); 
        opacity: 1; 
    }

    /* --- 8. RESPONSIVENESS (Media Queries) --- */

    /* Tablet & Smaller Desktops (max-width 992px) */
    @media (max-width: 992px) {
        .hero-content h1 {
            font-size: 3rem;
        }
        .why-choose-grid, 
        .services-grid, 
        .pricing-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        .footer-content {
            flex-wrap: wrap; 
        }
    }

    /* --- MOBILE DEVICES (max-width 600px) --- */
/* --- MOBILE DEVICES (max-width: 600px) --- */
@media (max-width: 600px) {
    
    /* 1. Header Layout: Ensures Logo and Icon are spaced */
    .nav-bar {
        justify-content: space-between;
        /*padding: 15px 20px;*/
    }
    
    /* 2. Show the Hamburger Icon */
    .menu-toggle {
        display: flex;
        order: 2;
    }
    
    /* 3. INITIAL MENU STATE: Hides the desktop menu links */
    .nav-bar #main-nav-menu {
        display: none; 
    }

    /* 4. MOBILE MENU SETUP (The Sliding Panel) */
    #main-nav-menu {
        display: flex !important; 
        
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        /* Adjusted background for a deep, modern look */
        background-color: rgba(10, 10, 10, 0.98); /* Near black with slight transparency */
        
        padding-top: 100px;
        transform: translateX(100%); 
        z-index: 999;
        
        /* Set transition for a more professional, *cubic-bezier* easing */
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0); 
        
        /* Centering the entire menu content */
        flex-direction: column;
        align-items: center;
        justify-content: flex-start; /* Center links vertically in the remaining space */
    }

    /* 5. OPEN MENU STATE (Triggered by JS) */
    #main-nav-menu.is-open {
        transform: translateX(0); /* Slides the menu into view */
    }

    /* 6. Mobile Link Layout and Styling */
    #main-nav-menu ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Increased gap for visual breathing room */
        gap: 35px; 
        width: 100%;
        padding: 0;
    }
    
    #main-nav-menu li {
        display: block; 
        text-align: center;
        /* Optional: Add a subtle hover state to links */
        transition: transform 0.2s ease-out;
    }

    #main-nav-menu li:hover {
        transform: scale(1.05);
    }
    
    #main-nav-menu a {
        color: var(--color-white) !important;
        /* Larger font size for better mobile interaction */
        font-size: 1.4rem; 
        font-weight: 500; /* Slightly lighter weight */
        text-transform: uppercase;
        letter-spacing: 2px; /* Professional spacing */
        position: relative;
        padding: 10px 0;
    }
    
    /* Add Active Link Indicator (Gold dot/line) */
    #main-nav-menu a.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 10px;
        height: 3px;
        background-color: var(--color-accent);
        transform: translateX(-50%);
        border-radius: 2px;
    }

    /* ... (Remaining Mobile Layout Adjustments) ... */
    .why-choose-grid, 
    .services-grid, 
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    .package-premium {
        transform: none;
    }
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    .filter-controls {
        flex-wrap: wrap;
        gap: 8px;
    }
    .filter-btn {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
}