/* Global Styles */

.emphasize-text {
    color: var(--emphasis-color);
    /* Use the variable */
    font-weight: 600;
    /* Make it slightly bolder (optional) */
    /* font-style: italic; */
    /* Keep if you also want italics (optional) */
    text-decoration: underline;
    /* Optional: Adjust underline style */
    /* text-decoration-thickness: 1px; */
    /* Example: make underline thinner */
    text-underline-offset: 3px;
    /* Example: add space between text and line */
    text-decoration-color: var(--gold);
    /* Example: use main gold for underline */
}

.gold-text {
    color: var(--gold);
    /* Use your defined gold color variable */
    /* Inherit other font styles like weight, size from parent */
}

.semibold {
    font-weight: 600;
}

.subtitle {
    font-size: 70%;
    font-style: italic;
}

.tight-spacing+.italic-subtitle {
    margin-top: -30px;
}

.content-wrapper {
    background-color: rgba(32, 29, 26, 0.6);
    padding: 30px;
    border-radius: 10px;
    max-width: 800px;
    margin: 60px auto;
    overflow-wrap: break-word;
    word-wrap: break-word; /* fallback for older browsers */
}
/* === ADD THESE RULES for the Mini Spa Box === */

.mini-spa-box {
    border: 1px solid var(--gold);
.content-wrapper a {
    word-break: break-all;
}
    /* Your nice gold border */
    padding: 15px;
    /* Inner spacing */
    margin-top: 15px;
    /* Space above this box */
    text-align: center;
    /* Center the text inside */
    background-color: rgba(0, 0, 0, 0.2);
    /* Optional: Slight dark background tint */
    border-radius: 5px;
    /* Optional: Slightly rounded corners */
}

.mini-spa-box p {
    margin-bottom: 5px;
    /* Reduce bottom margin for paragraphs inside */
    line-height: 1.4;
    /* Adjust line spacing */
    /* color: var(--text-light); Ensure text is light */
}

.mini-spa-box p:last-child {
    margin-bottom: 0;
    /* Remove margin from the last paragraph */
}

.mini-spa-title {
    font-weight: 600;
    /* Make the title slightly bolder */
    color: var(--gold);
    /* Use gold color for the title */
    font-size: 1.1em;
    /* Slightly larger font size for title */
    font-style: italic;
    /* <<< ADD THIS LINE */

}

.mini-spa-details {
    font-size: 1em;
    /* Standard font size for details */
    opacity: 0.9;
    /* Slightly less prominent */
}

.summary-box {
    border: 1px solid rgba(201, 169, 92, 0.4);
    padding: 25px;
    margin: 30px 0;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.2);
}
.summary-box strong {
    color: var(--light-gold);
    font-size: 1.2em;
    margin-bottom: 15px;
    display: block;
    font-weight: 600;
    border-bottom: 1px solid rgba(201, 169, 92, 0.2);
    padding-bottom: 10px;
}
/* === END ADDED RULES === */

.footer-design-credit {
    margin-top: 15px;
    /* Add some space above the credit line */
    font-size: 0.8em;
    /* Make it slightly smaller */
    opacity: 0.6;
    /* Make it slightly less prominent */
    color: var(--gold);
    /* Inherit the footer text color */
}

.video-sound-button {
    position: absolute;
    bottom: 9px;
    left: 9px;
    z-index: 10;
    /* Ensure it's above the video */
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent background */
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    /* Circular button */
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
    /* Adjust icon size */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
    outline: none;
    opacity: 0.6;
}

.video-sound-button:hover {
    background-color: rgba(0, 0, 0, 0.7);
    transform: scale(1.1);
}

.video-sound-button:active {
    transform: scale(0.95);
}

/* Base styles for containers holding rotating media */
.rotating-image-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    /* Removed vertical margin for uniform section spacing */
    overflow: hidden;
    position: relative;
    border: 1px solid var(--gold);
    background-color: #111;
    transform: translateZ(0);
    /* Keep rendering hints */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Watermark Overlay for Media Containers */
.rotating-image-container::after {
    /* Use ::after to overlay on top */
    content: '';
    /* Required for pseudo-elements */
    display: block;
    /* Treat it like a block element */
    position: absolute;
    /* Position relative to .rotating-image-container */

    /* Positioning in Bottom-Right Corner */
    right: 0px;
    /* Adjust horizontal distance from right edge */
    bottom: 0px;
    /* Adjust vertical distance from bottom edge */

    /* Size of the Square Overlay */
    width: 175px;
    /* Adjust desired width */
    height: 175px;
    /* Adjust desired height (make equal to width for square) */

    /* Background Watermark Image */
    background-image: url('assets/watermark/watermark.png');
    /* <<< EDIT THIS PATH LATER */
    background-size: contain;
    /* Fit the watermark inside the square */
    background-repeat: no-repeat;
    background-position: center;

    /* Transparency */
    opacity: 0.4;
    /* Adjust opacity (0=invisible, 1=fully opaque) */

    /* Ensure it's visually above the main content */
    z-index: 5;

    /* Optional: Prevent the watermark from interfering with mouse events */
    pointer-events: none;
}

.about-image::after {
    /* Target the static image container */
    content: '';
    display: block;
    position: absolute;

    /* Positioning */
    right: 0px;
    /* Base position */
    bottom: 0px;
    /* Base position */

    /* Size */
    width: 175px;
    /* Base size */
    height: 175px;
    /* Base size */

    /* Background */
    background-image: url('assets/watermark/watermark.png');
    /* Use the same path */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    /* Transparency */
    opacity: 0.4;
    /* Use same opacity */

    /* Stacking & Interaction */
    z-index: 5;
    pointer-events: none;
}

.service-image::after {
    /* Existing watermark on the bottom right */
    content: '';
    display: block;
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 100px;
    height: 100px;
    background-image: url('assets/watermark/watermark.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    z-index: 5;
    pointer-events: none;
    
}

.service-image::before {
    /* New decoration on the bottom left */
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100px; /* Matching size */
    height: 100px; /* Matching size */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8; /* Slightly more visible */
    z-index: 5;
    pointer-events: none;
}


/* Specific rule for the container INSIDE the video section (#rotating-gallery) */
#rotating-gallery .rotating-image-container {
    aspect-ratio: 16 / 9;
    /* Enforces the 16:9 box shape for video */
    background-color: #000;
    /* Background for video letterboxing */
    /* Inherits other styles from base .rotating-image-container */
}

/* === Styles for NEW Image Gallery === */
#new-rotating-gallery-image {
    display: block;
    width: 100%;
    height: auto;
    /* --- Ensure this is 1 or removed --- */
    opacity: 1;
    /* Base state should be visible */
    /* --- End Ensure --- */
    transform: scale(1);
    transition: opacity 2s ease-in-out;
    /* Your fade duration */
}

#new-rotating-gallery-image.fade-out-new-image {
    opacity: 0;
    /* Fade-out state */
}

@keyframes newImageZoomEffect {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.05);
    }

    /* 10% Zoom */
}

#new-rotating-gallery-image.apply-new-image-zoom {
    animation-name: newImageZoomEffect;
    animation-duration: 7s;
    /* Zoom duration */
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

/* === End Styles for NEW Image Gallery === */


/* === Styles for Video Element === */
.rotating-media {
    /* Targeting the class applied to your video */
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Fill the container width */
    /* height: 100%; */
    /* Fill the container height */
    object-fit: contain;
    /* Fit video without cropping */
    background-color: #000;
    /* Background for letterboxing */
}

/* === End Styles for Video Element === */


:root {
    --dark-bg: #1a1a1a;
    --gold: #c9a95c;
    --light-gold: #d4b978;
    --text-light: #f5f5f5;
    --text-dark: #333;
    --section-padding: 30px 20px;

    /* === ADD THIS VARIABLE === */
    /* Choose ONE color value below, comment out others */
    --emphasis-color: var(--light-gold);
    /* Option 1: Use existing light gold */
    /* --emphasis-color: #ffffff; */
    /* Option 2: Pure White */
    /* --emphasis-color: #EAC14D; */
    /* Option 3: Brighter Gold Example */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

body {
    background-color: var(--dark-bg);
    color: var(--text-light);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
    font-weight: 300;
    margin-bottom: 20px;
    color: var(--gold);
}

h1 {
    font-size: 2.5rem;
    /* text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); x-offset, y-offset, blur, color(with alpha) */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7), 2px 3px 6px rgba(0, 0, 0, 0.4);
    /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), 0 0 10px rgba(50, 40, 10, 0.3); */
    /* Dark goldish aura */
    /* text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); */
    /* text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.45); */

}

h2 {
    font-size: 2rem;
}

p {
    margin-bottom: 30px;
}

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

a:hover {
    color: var(--light-gold);
}

.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* .btn {
    display: inline-block;
    background-color: var(--gold);
    color: var(--dark-bg);
    padding: 12px 30px;
    border: none;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn:hover {
    background-color: var(--light-gold);
    color: var(--dark-bg);
} */

/* --- Button Styles --- */
.btn {
    display: inline-block;
    background: linear-gradient(145deg, var(--light-gold), var(--gold));
    color: var(--text-dark);
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
        /* Base bottom shadow */
        0 1px 2px rgba(0, 0, 0, 0.1) inset,
        /* Base inner top highlight */
        0 -1px 1px rgba(255, 255, 255, 0.05) inset;
    /* Base inner bottom shadow */
    /* Ensure ALL transitioned properties are listed or use 'all' */
    transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
        color 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
        box-shadow 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
        transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    outline: none;
    /* Explicitly remove default outline for mouse users */
}

/* Hover State */
.btn:hover {
    background: linear-gradient(145deg, hsl(44, 58%, 65%), hsl(44, 58%, 55%));
    color: #000;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25),
        /* Hover bottom shadow */
        0 2px 4px rgba(0, 0, 0, 0.15) inset,
        /* Hover inner top highlight */
        0 1px 2px rgba(0, 0, 0, 0.1);
    /* Hover stronger bottom outer shadow (new) */
    transform: translateY(-2px) scale(1.02);
}

/* Active/Pressed State */
.btn:active {
    background: linear-gradient(145deg, hsl(44, 58%, 50%), hsl(44, 58%, 60%));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) inset,
        /* <<<< THIS IS THE INSET SHADOW FOR PRESSED EFFECT */
        0 1px 2px rgba(0, 0, 0, 0.1);
    /* <<<< Reduced outer shadow when pressed */
    transform: translateY(1px) scale(0.98);
    /* The transition back to normal state will use the .btn's main transition duration (0.25s)
       unless overridden, which is generally fine.
       The quick 0.1s transition-duration on :active was for the press *action*, not release.
       Let's remove the explicit transition-duration from :active to rely on the base transition.
    */
    /* transition-duration: 0.1s; */
    /* REMOVE THIS OR ENSURE IT'S ONLY FOR THE PRESS */
}

/* Focus State - Important for Accessibility */
/* Using :focus-visible to only show for keyboard users, not on mouse click */
.btn:focus-visible {
    /* This outline should appear for keyboard navigation and disappear when focus moves away */
    outline: 2px solid var(--light-gold);
    outline-offset: 3px;
    /* Increased offset slightly for more separation */
    /* Optional: You can add a box-shadow here too, but ensure it doesn't look like the :active state */
    /* box-shadow: 0 0 0 3px rgba(201, 169, 92, 0.4), /* Focus glow */
    /* 0 4px 8px rgba(0, 0, 0, 0.2),       /* Re-apply base outer shadow */
    /* 0 1px 2px rgba(0,0,0,0.1) inset;   /* Re-apply base inner top highlight */
}

/* Fallback for older browsers that don't support :focus-visible */
/* This might cause the "ring" on mouse click in those browsers, but :focus-visible handles modern ones. */
/* .btn:focus:not(:focus-visible) { */
/* If you want to specifically remove the outline for mouse clicks in browsers that
       don't support :focus-visible but still apply :focus on click, you could try: */
/* outline: none; */
/* This is tricky because it impacts keyboard accessibility if :focus-visible isn't supported */
/* Generally, it's better to let :focus apply if :focus-visible is not supported */
/* } */

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

.section {
    padding: var(--section-padding);
    /* Controlled by variable */
}

/* Header Styles */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(26, 26, 26, 1);
    padding: 5px 0;
    transition: all 0.3s ease;
}

header.scrolled {
    padding: 10px 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

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

/* Styles for the center logo link and image */
#center-logo-link {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
    position: relative;
    /* Needed for potential pseudo-elements if you add more complex glows */
    transition: transform 0.3s ease, filter 0.3s ease;
    /* Add filter for glow, transform for scale */
    outline: none;
    /* Removes default focus outline if not desired, or style it better */
}

#center-logo-link img {
    display: block;
    border: none;
    height: 60px;
    /* Your existing height for the logo */
    width: auto;
    max-width: 100%;
    opacity: 0.6;
    /* Your existing opacity */
    transition: opacity 0.3s ease;
    /* Keep this transition if you want opacity change too */
}

/* --- HOVER EFFECT FOR CENTER LOGO --- */
#center-logo-link:hover {
    transform: scale(1.05);
    /* Slight zoom for the link container */
}

#center-logo-link:hover img {
    opacity: 1;
    /* Make image fully opaque on hover */
    /* Glow effect using filter: drop-shadow() for images */
    /* Adjust color (var(--gold)), x-offset, y-offset, blur-radius */
    filter: drop-shadow(0 0 4px var(--gold));
    /* Example with a slightly more diffused glow: */
    /* filter: drop-shadow(0 0 3px rgba(201, 169, 92, 0.7)) drop-shadow(0 0 8px rgba(201, 169, 92, 0.5)); */
}

/* --- Styles for .logo-center (parent) --- */
.logo-center {
    flex-grow: 0;
    flex-shrink: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    /* opacity: 0.6; --- This was on .logo-center, but should primarily be on the image itself for hover effects */
    /* Or, if you want the whole area to have a base opacity, you can keep it */
    /* but the image's opacity: 1 on hover will override its parent's opacity for itself */
}

#center-header-logo {
    display: block;
    /* Remove extra space below image */
    height: 74px;
    /* <<< Adjust desired height */
    width: auto;
    /* Width adjusts automatically */
    max-width: 100%;
    /* Prevent overflow */
}

/* --- End ADD Center Logo Styles --- */

/* --- Logo Styles --- */
.logo img {
    height: 75px;
    /* width: auto; */
    display: block;
    vertical-align: middle;
    opacity: 0.6;
    transition: opacity 3s ease-in-out;
}

.logo img.fade-out {
    opacity: 0;
}

/* --- Nav Menu Styles --- */
/* .nav-menu {
    display: flex;
    list-style: none;
} */

/* .nav-menu li {
    margin-left: 30px;
} */

.nav-menu {
    position: fixed;
    top: 85px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 440px);
    background-color: rgba(26, 26, 26, 0.98);
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* padding-top: 50px; */
    transition: left 0.3s ease;
    overflow-y: auto;
    opacity: 0.95;
}

.nav-menu.active {
    left: 0;
}

.nav-menu li {
    margin: 0;
    /* Remove default li margin */
    width: 80%;
    /* Optional: Give list items a max-width for a cleaner look, they will be centered by align-items on .nav-menu */
    /* If you remove this, 'a' tags will stretch full width if display:block */
}

.nav-menu a {
    display: block;
    /* Makes the whole area clickable and helps with centering */
    padding: 18px 20px;
    /* Increased padding for better touch targets and visual spacing */
    color: var(--text-light);
    /* Ensure this is active */
    font-weight: 500;
    /* Slightly bolder for menu items */
    font-size: 1.1rem;
    /* Slightly larger font for menu items */
    text-decoration: none;
    text-align: center;
    /* <<< THIS CENTERS THE TEXT WITHIN THE LINK */
    position: relative;
    transition: color 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
    /* Add all transitionable properties */
}

/* Underline Animation (Existing - modified for better centering) */
.nav-menu a:after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background-color: var(--gold);
    bottom: 8px;
    /* Adjusted: Puts underline a bit below the text, within padding */
    left: 50%;
    transform: translateX(-50%);
    /* Keeps underline centered as it grows from the middle */
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Smoother transition */
}

/* --- HOVER EFFECTS --- */
.nav-menu a:hover {
    color: var(--gold);
    /* Change text color to gold */
    background-color: rgba(40, 40, 40, 0.7);
    /* Subtle dark background tint on hover */
    transform: scale(1.05);
    /* Slight zoom effect */
}

.nav-menu a:hover:after {
    width: 70%;
    /* Underline grows to 70% of the link's width */
}

/* Menu Toggle */
.menu-toggle {
    display: block;
    cursor: pointer;
    font-size: 2.5rem;
    color: var(--gold);
    opacity: 0.8;
    /* Initial opacity */
    transition: opacity 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
    /* Add properties to transition */
    padding: 10px;
    /* Add some padding to make the hover area a bit larger and for visual balance */
    line-height: 1;
    /* Helps prevent padding from adding too much vertical space if font-size is large */
    /* Ensure it's positioned correctly within the header if needed */
    /* For example, if it's a direct child of a flex container and needs specific alignment */
    /* align-self: center; */
}

.menu-toggle:hover {
    opacity: 1;
    /* Make it fully opaque on hover */
    transform: scale(1.1);
    /* Slightly enlarge the icon */
    /* Optional: Add a subtle glow */
    text-shadow: 0 0 6px var(--gold);
    /* Adjust color and blur radius as needed */
}

/* Hero Section */
.hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* --- ADD THIS LINE --- */
    padding-top: 100px;
    /* Adjust value (e.g., 80px, 120px) as needed */
    /* --- End Add --- */
}

.hero::before {
    content: '';
    position: fixed;
    /* Keeps it fixed during scroll */
    top: 0;
    left: 0;
    width: 100vw;
    /* Takes full viewport width */
    height: 100vh;
    /* Takes full viewport height */
    background-image: url('assets/img/imageback.webp');

    /* --- CHANGE THIS LINE --- */
    background-size: 100% auto;
    /* Set width to 100%, height adjusts proportionally */
    /* Was: background-size: cover; */
    /* --- End Change --- */

    background-position: top;
    /* Center the image within the viewport */
    /* Optional: You might prefer 'top center' if the image becomes taller than the viewport */
    /* background-position: top center; */

    background-repeat: no-repeat;
    /* Prevent tiling if image becomes smaller than container */
    z-index: -2;
}

.hero::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.0);
    z-index: -1;
}

.hero-content {
    position: relative;
    z-index: 1;
    top: 200px;
    max-width: 800px;
    padding: 0 20px;
    text-align: center;
    /* Added text-align for centering */

}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 30px;
    line-height: 1.2;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 40px;
}
/* About Section (Text Content Area) */
.about {
    background-color: #222;
}

.about-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.about-text {
    flex: 1;
    min-width: 300px;
    padding-right: 40px;
    /* Keep padding for text block */
}

/* Container potentially holding static image or OTHER content */
/* Kept this rule as it defines layout structure */
.about-image {
    overflow: hidden;
    flex: 1;
    min-width: 300px;
    margin: 0 auto;
    border: 1px solid var(--gold);
    /* Keep border */
    position: relative;
    /* <<< ADD THIS LINE */
}

/* General rule for images inside .about-image */
/* Kept this rule as it's standard practice */
.about-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Services Section --- */
.services {
    background-color: var(--dark-bg);
}

.service-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0;
    /* Removed vertical margin for uniform section spacing */
}

.service-image {
    flex: 0 0 calc(25% - 20px);
    margin-bottom: 30px;
    /* Keep bottom margin for spacing between rows */
    position: relative;
    overflow: hidden;
    border: 1px solid var(--gold);
}

.service-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.service-image:hover img {
    transform: scale(1.05);
}

/* --- Pricing Section --- */
.pricing {
    background-color: #222;
}

.pricing-container {
    display: flex;
    flex-wrap: wrap;
    /* REMOVE justify-content: space-between; */
    /* --- ADD gap property --- */
    gap: 30px;
    /* Adjust base gap (e.g., 30px) between boxes */
    /* --- End Add --- */
    margin-top: 0;
    /* Removed top margin for uniform section spacing */
}

.pricing-box {
    /* CHANGE flex-basis calculation - we just need width now */
    /* Remove the fixed pixel subtraction */
    flex-basis: calc(25% - (3 * 30px / 4));
    /* 4 columns, 3 gaps */
    /* Adjust calculation based on desired # columns and gap */
    /* Alternatively, for simplicity with gap, often use: */
    /* flex-grow: 1; */
    /* flex-basis: 200px; /* Example minimum width */
    /* We will override this in media queries anyway */

    background-color: var(--dark-bg);
    border: 1px solid var(--gold);
    padding: 48px 30px;
    margin-bottom: 0;
    /* Gap handles vertical spacing too */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    /* Keep for watermark */
}

/* Example */
.pricing-price {
    font-size: 1.2rem;
    color: var(--gold);
    text-align: center;
    margin: 0px 0px 8px;
}

.pricing-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.pricing-title {
    font-size: 1.8rem;
    margin-bottom: 26px;
    text-align: center;
    margin-top: 6px;
}

.pricing-features {
    list-style: none;
    margin-bottom: 30px;
    flex-grow: 1;
}

.pricing-features li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(201, 169, 92, 0.2);
}

.pricing-features li:last-child {
    border-bottom: none;
}

.pricing-features li:before {
    content: '✓';
    color: var(--gold);
    margin-right: 10px;
}

.pricing-duration {
    margin-bottom: 20px;
    text-align: center;
    opacity: 0.8;
}

.pricing-btn {
    text-align: center;
    margin-top: auto;
}

.pricing-note {
    text-align: center;
    margin-top: 40px;
    font-size: 0.9rem;
    color: var(--text-light);
    opacity: 0.8;
    font-style: italic;
}

/* Make the specific pricing box a positioning context */
.pricing-box.recommended-plan {
    position: relative;
    /* Your existing .pricing-box styles like padding: 40px 30px; are important here */
}

.recommendation-badge {
    position: absolute;
    /* Lifts the image out of normal flow, overlays it */
    top: -9px;
    /* This places it within the box's top padding area. */
    left: 50%;
    /* Center horizontally */
    transform: translateX(-50%);
    /* Fine-tune horizontal centering */
    height: auto;
    /* Maintain aspect ratio based on width */
    width: 60%;
    /* Set width relative to the parent pricing box */
    max-width: 160px;
    /* Max pixel width to prevent it from getting too large on wide boxes */
    /* Adjust this based on your image's ideal size */
    max-height: 87px;
    /* Max pixel height to ensure it fits in the top "red box" area.
                           Your .pricing-box has top padding of 40px.
                           top: 10px + max-height: 35px means it uses up to 45px, slightly more if image is wide.
                           Adjust this and 'top' to fit perfectly. If top padding is 40px,
                           and you want 5px space above and below image, set top: 5px and max-height: 30px */


    object-fit: contain;
    /* Ensures the image scales down nicely within its bounds without cropping */
    z-index: 5;
    /* Ensures it's above the box background but can be below other interactive elements if needed */
}

.star-badge {
    position: absolute;
    /* Lifts the image out of normal flow, overlays it */
    top: 28px;
    /* This places it within the box's top padding area. */
    left: 50%;
    /* Center horizontally */
    transform: translateX(-50%);
    /* Fine-tune horizontal centering */
    height: auto;
    /* Maintain aspect ratio based on width */
    width: 60%;
    /* Set width relative to the parent pricing box */
    max-width: 110px;
    /* Max pixel width to prevent it from getting too large on wide boxes */
    /* Adjust this based on your image's ideal size */
    max-height: 13px;
    /* Max pixel height to ensure it fits in the top "red box" area.
                           Your .pricing-box has top padding of 40px.
                           top: 10px + max-height: 35px means it uses up to 45px, slightly more if image is wide.
                           Adjust this and 'top' to fit perfectly. If top padding is 40px,
                           and you want 5px space above and below image, set top: 5px and max-height: 30px */


    object-fit: contain;
    /* Ensures the image scales down nicely within its bounds without cropping */
    z-index: 5;
    /* Ensures it's above the box background but can be below other interactive elements if needed */
}

/* --- Benefits Section --- */
.narrow-section {
    background-color: #222;
}

.narrow-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.narrow-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.narrow-content h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: var(--gold);
    border-left: 5px solid var(--gold);
    padding-left: 15px;
}

.narrow-content p {
    margin-bottom: 25px;
}

/* --- FAQ Section --- */
.faq {
    background-color: var(--dark-bg);
}

.accordion {
    margin-top: 0;
    /* Removed top margin for uniform section spacing */
}

.accordion-item {
    margin-bottom: 10px;
    border: 1px solid rgba(201, 169, 92, 0.3);
}

.accordion-header {
    padding: 20px;
    background-color: #222;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-light);
    font-weight: 400;
}

.accordion-icon {
    color: var(--gold);
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.accordion-content {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    background-color: #2a2a2a;
}

.accordion-content p {
    padding: 20px 0;
    margin-bottom: 0;
}

.accordion-item.active .accordion-icon {
    transform: rotate(45deg);
}

.accordion-item.active .accordion-content {
    max-height: fit-content;
}
.accordion-content p {
    font-size: 0.9rem; /* Reduce font size for mobile */
}

/* Contact Section */
.contact {
    background-color: var(--dark-bg);
}

.divider-custom {
    width: 100%;
    height: 1px;
    background-color: rgba(201, 169, 92, 0.3);
    margin: 40px 0;
}

.divider-thin {
    /* width: 30%; */    /* Remove or comment out the percentage width */
    width: 80px;       /* <<< SET A FIXED WIDTH: Example: 80px is roughly 2.1cm. Adjust as needed.
                           For "a few cm", you might try values between 80px and 150px. */
    height: 1px;
    background-color: rgba(201, 169, 92, 0.3);
    margin-top: 20px;    /* Your desired space above the divider */
    margin-bottom: 20px; /* Your desired space below the divider */
    margin-left: auto;   /* <<< ADDED: This, along with margin-right: auto, centers it */
    margin-right: auto;  /* <<< ADDED: This, along with margin-left: auto, centers it */
}

.contact-container {
    display: flex;
    margin-top: 0;
    /* Removed top margin for uniform section spacing */
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
}

.contact-info {
    flex: 0 0 auto;
    max-width: 500px;
    text-align: center;
}

.contact-info p {
    margin-bottom: 15px;
    font-size: 0.95rem;
    opacity: 0.8;
}

.contact p.text-center {
    font-size: 0.95rem;
    opacity: 0.8;
}

.contact-info i {
    color: var(--gold);
    margin-right: 10px;
    font-size: 1.2rem;
}

.contact-info h3 {
    margin-top: 30px;
}

/* Footer */
footer {
    background-color: #111;
    padding: 40px 0;
    text-align: center;
}

.footer-links-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 15px; /* Spacing between links horizontally */
    margin-bottom: 20px;
}

.footer-links {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0; /* Reset margin */
    padding: 0; /* Reset padding */
    flex-wrap: wrap;
}

.footer-links li {
    margin: 5px 15px;
}

.footer-social {
    margin-bottom: 20px;
}

.footer-social a {
    display: inline-block;
    margin: 0 10px;
    font-size: 1.5rem;
    color: var(--gold);
}

.footer-social a:hover {
    color: var(--light-gold);
}

.footer-text {
    opacity: 0.7;
    font-size: 0.9rem;
}
.footer-consent-management {
    margin-top: 20px;
}

.footer-consent-management a {
    font-size: 0.9rem;
    color: var(--gold);
    opacity: 0.7;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: opacity 0.3s ease;
}

.footer-consent-management a:hover {
    opacity: 1;
}

/* Responsive Styles */
@media (max-width: 992px) {

    .about-content {
        /* Ensure you have a rule targeting this */
        display: flex;
        /* Should already be there */
        flex-wrap: wrap;
        /* Should already be there */
        justify-content: center;
        /* <<< ADD THIS LINE */
        /* align-items: center; */
        /* You might already have this */
    }

    .service-image {
        flex: 0 0 calc(50% - 15px);
        /* Changes to 2 columns */
    }

    .service-image::after {
        /* Target ONLY service images */
        content: '';
        display: block;
        position: absolute;
        /* Positioning (Adjust as desired for these smaller boxes) */
        right: 0px;
        bottom: 0px;
        /* Size (Start with a smaller size, adjust as needed) */
        width: 100px;
        height: 100px;
    }

    .pricing-container {
        gap: 20px;
        /* Adjust gap for this breakpoint */
    }

    .pricing-box {
        /* 2 columns: 50% width minus half the gap */
        flex-basis: calc(50% - (1 * 20px / 2));
        /* flex-basis: calc(50% - 10px); // Simpler if gap is 20px */
    }

    .about-text,
    .about-image {
        flex: 0 0 100%;
        margin-top: 30px;
    }

    @media (max-width: 991px) {

        /* Or 768px */
        .nav-menu {
            top: 71px;
            opacity: 1;
        }
    }

    /* Watermark Overlay for Media Containers */
    .rotating-image-container::after {
        /* Use ::after to overlay on top */
        /* Positioning in Bottom-Right Corner */
        right: 0px;
        /* Adjust horizontal distance from right edge */
        bottom: 0px;
        /* Adjust vertical distance from bottom edge */
        /* Size of the Square Overlay */
        width: 100px;
        /* Adjust desired width */
        height: 100px;
        /* Adjust desired height (make equal to width for square) */
    }

    .about-image::after {
        /* Target the static image container */
        content: '';
        display: block;
        position: absolute;
        /* Positioning */
        right: 0px;
        /* Base position */
        bottom: 0px;
        /* Base position */
        /* Size */
        width: 100px;
        /* Base size */
        height: 100px;
        /* Base size */
        /* Background */
        background-image: url('assets/watermark/watermark.png');
        /* Use the same path */
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        /* Transparency */
        opacity: 0.4;
        /* Use same opacity */
        /* Stacking & Interaction */
        z-index: 5;
        pointer-events: none;
    }


}

/* ---------------------------------------- */

@media (max-width: 768px) {

    .fa-solid,
    .fas {
        font-weight: 900;
    }

    .video-sound-button {
        position: absolute;
        bottom: 8px;
        left: 10px;
        z-index: 10;
        /* Ensure it's above the video */
        background-color: rgba(0, 0, 0, 0.5);
        /* Semi-transparent background */
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.7);
        border-radius: 50%;
        /* Circular button */
        width: 30px;
        height: 30px;
        font-size: 1.1rem;
        /* Adjust icon size */
        opacity: 0.6;

    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.2rem;
    }

    .hero p {
        font-size: 1.1rem;
    }

    .hero h1 {
        font-size: 2.5rem;
        /* margin-bottom: 20px; */
    }

    .hero {
        /* min-height: 100vh; */
        /* REMOVE or COMMENT OUT this line */
        min-height: auto;
        /* <<< ADDED: Allows the hero section to shrink to its content height + padding */
        position: relative;
        display: flex;
        flex-direction: column;
        /* <<< ADDED: Stack children vertically */
        align-items: center;
        /* <<< ADDED/MODIFIED: Center hero-content horizontally */
        justify-content: flex-start;
        /* <<< ADDED/MODIFIED: Align hero-content to the top (after padding) */
        overflow: hidden;
        padding-top: 230px;
        /* This was from your previous fix, helps position green box top */
        padding-bottom: 30px;
        /* <<< ADDED: This will be the space AFTER your button, effectively the new 'red box' height. Adjust as needed (e.g., 20px, 40px, 50px). */
        /* This replaces the large implicit bottom space from 100vh */
    }

    .hero-content {
        position: relative;
        z-index: 1;
        top: 20px;
        /* This was from your previous fix, helps position green box top */
        max-width: 800px;
        width: 100%;
        /* Ensures proper centering if max-width is not met */
        padding-left: 20px;
        padding-right: 20px;
        /* padding-bottom: 10px; */
        /* Optional: if you want a tiny bit of space *inside* hero-content after button. The main control is hero's padding-bottom now. */
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
    }

    .hero-content h1 {
        margin-top: 0;
        /* Ensure no extra space above H1 */
        margin-bottom: 8px;
        /* Space between H1 and button area */
    }

    .hero-buttons {
        /* You might want to ensure there's no large default margin-bottom here if you rely on .hero's padding-bottom */
        margin-bottom: 0;
        /* Example */
    }

    .menu-toggle {
        display: block;
    }

    header {
        padding: 5px 0;
    }

    header.scrolled {
        padding: 10px 0;
    }

    /* --- ADD/MODIFY Center Logo Styles for Mobile --- */
    .logo-center {
        position: absolute;
        /* Take out of flex flow */
        left: 50%;
        /* Move left edge to the horizontal center */
        top: 52%;
        /* Move top edge to the vertical center */
        transform: translate(-50%, -50%);
        /* Shift back by half its own width/height */
        width: auto;
        /* Let image define width based on height */
        /* flex-grow, flex-shrink are irrelevant now */
    }

    #center-header-logo {
        height: 60px;
        /* <<< Adjust height specifically for mobile if needed */
        /* width: auto; is inherited */
    }

    .logo img {
        height: 60px;
        /* width: auto; */
        vertical-align: middle;
        flex-shrink: 1;
    }

    .pricing-container {
        gap: 15px;
        /* Adjust gap */
    }

    .pricing-box {
        /* Still 2 columns */
        flex-basis: calc(50% - (1 * 15px / 2));
        /* flex-basis: calc(50% - 7.5px); // Simpler if gap is 15px */
    }

    .service-image {
        flex: 0 0 calc(50% - 10px);
        /* Still 2 columns, adjusted spacing */
    }

    .service-image::after {
        /* Target ONLY service images */
        content: '';
        display: block;
        position: absolute;
        /* Positioning (Adjust as desired for these smaller boxes) */
        right: 0px;
        bottom: 0px;
        /* Size (Start with a smaller size, adjust as needed) */
        width: 70px;
        height: 70px;
    }

    .section {
        padding: 60px 20px;
    }

    .btn {
        padding: 4px 10px;
        font-size: 0.7rem;
    }

    .hero::before {
        content: '';
        position: fixed;
        /* Keeps it fixed during scroll */
        top: 60px;
        left: 0;
        width: 100vw;
        /* Takes full viewport width */
        height: 100vh;
        /* Takes full viewport height */
        background-image: url('assets/img/imageback.webp');

        /* --- CHANGE THIS LINE --- */
        background-size: 100% auto;
        /* Set width to 100%, height adjusts proportionally */
        /* Was: background-size: cover; */
        /* --- End Change --- */

        background-position: top;
        /* Center the image within the viewport */
        /* Optional: You might prefer 'top center' if the image becomes taller than the viewport */
        /* background-position: top center; */

        background-repeat: no-repeat;
        /* Prevent tiling if image becomes smaller than container */
        z-index: -2;
    }


    /* Watermark Overlay for Media Containers */
    .rotating-image-container::after {
        /* Use ::after to overlay on top */

        /* Positioning in Bottom-Right Corner */
        right: 0px;
        /* Adjust horizontal distance from right edge */
        bottom: 0px;
        /* Adjust vertical distance from bottom edge */

        /* Size of the Square Overlay */
        width: 100px;
        /* Adjust desired width */
        height: 100px;
        /* Adjust desired height (make equal to width for square) */
    }

    /* Watermark Overlay for Media Containers */
    .rotating-image-container::after {
        /* Use ::after to overlay on top */

        /* Positioning in Bottom-Right Corner */
        right: 0px;
        /* Adjust horizontal distance from right edge */
        bottom: 0px;
        /* Adjust vertical distance from bottom edge */

        /* Size of the Square Overlay */
        width: 70px;
        /* Adjust desired width */
        height: 70px;
        /* Adjust desired height (make equal to width for square) */
    }

    .about-image::after {
        /* Target the static image container */
        content: '';
        display: block;
        position: absolute;

        /* Positioning */
        right: 0px;
        /* Base position */
        bottom: 0px;
        /* Base position */

        /* Size */
        width: 100px;
        /* Base size */
        height: 100px;
        /* Base size */

        /* Background */
        background-image: url('assets/watermark/watermark.png');
        /* Use the same path */
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;

        /* Transparency */
        opacity: 0.4;
        /* Use same opacity */

        /* Stacking & Interaction */
        z-index: 5;
        pointer-events: none;
    }

    h1.adsimple-312542335 {
        font-size: 1.8rem;
    }
}

/* ------------------------------------- */


@media (max-width: 576px) {
    .section {
        padding: 40px 15px;
    }

    .pricing-price {
        font-size: 1.0rem;
        text-align: center;
        /* margin: 0px 0px 8px; */
    }

    .pricing-container {
        gap: 8px; /* Further reduce gap */
    }

    .pricing-box {
        flex-basis: calc(50% - 4px); /* Enforce 2-column layout */
        width: calc(50% - 4px);      /* Add explicit width */
        padding: 15px 8px;           /* Further reduce padding */
        min-width: 0;                /* Override any minimum width */
    }

    .pricing-title {
        font-size: 0.9rem; /* Further reduce title font size */
        margin-bottom: 10px;
    }

    .pricing-features li {
        font-size: 0.75rem; /* Further reduce features font size */
        padding: 3px 0;
        line-height: 1.3;   /* Adjust line height */
        overflow-wrap: break-word; /* Force long words to wrap */
    }

    .container {
        padding: 0 15px;
        top: 23px
    }

    .hero h1 {
        font-size: 1.3rem;
    }

    .hero p {
        font-size: 1rem;
    }

    /* .hero-content {
        top: 0px;
    } */

    .about-text {
        padding-right: 0;
    }

    .narrow-container {
        padding: 20px;
    }

    .footer-links li {
        margin: 5px 10px;
    }

    .footer-links-container {
        flex-direction: column;
        gap: 5px; /* Spacing between the two rows of links */
        align-items: center;
    }

    .pricing-title {
        font-size: 1.2rem;
        margin-top: 22px;
        margin-bottom: 20px;
        text-align: center;

        line-height: 1;
        /* Example: No extra spacing, lines will be tight */
        /* OR */
        /* line-height: 0.9; */
        /* Example: Lines will be closer than default */
        /* OR */
        /* line-height: 1.1; */
        /* Example: Slightly more than default, if needed for readability with certain fonts */
    }

    .recommendation-badge {
        /* You might want it to be slightly smaller or positioned differently */
        top: -7px;
        max-width: 120px;
        max-height: 60px;
    }

    .star-badge {
        position: absolute;
        /* Lifts the image out of normal flow, overlays it */
        top: 18px;
        /* This places it within the box's top padding area. */
        left: 50%;
        /* Center horizontally */
        transform: translateX(-50%);
        /* Fine-tune horizontal centering */
        height: auto;
        /* Maintain aspect ratio based on width */
        width: 60%;
        /* Set width relative to the parent pricing box */
        max-width: 80px;
        /* Max pixel width to prevent it from getting too large on wide boxes */
        /* Adjust this based on your image's ideal size */
        max-height: 9px;
    }

    /* Watermark Overlay for Media Containers */
    .rotating-image-container::after {
        /* Use ::after to overlay on top */

        /* Positioning in Bottom-Right Corner */
        right: 0px;
        /* Adjust horizontal distance from right edge */
        bottom: 0px;
        /* Adjust vertical distance from bottom edge */

        /* Size of the Square Overlay */
        width: 50px;
        /* Adjust desired width */
        height: 50px;
        /* Adjust desired height (make equal to width for square) */
    }

    .about-image::after {
        /* Target the static image container */
        content: '';
        display: block;
        position: absolute;

        /* Positioning */
        right: 0px;
        /* Base position */
        bottom: 0px;
        /* Base position */

        /* Size */
        width: 50px;
        /* Base size */
        height: 50px;
        /* Base size */

        /* Background */
        background-image: url('assets/watermark/watermark.png');
        /* Use the same path */
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;

        /* Transparency */
        opacity: 0.4;
        /* Use same opacity */

        /* Stacking & Interaction */
        z-index: 5;
        pointer-events: none;
    }

    .service-image::after {
        /* Target ONLY service images */
        content: '';
        display: block;
        position: absolute;
        /* Positioning (Adjust as desired for these smaller boxes) */
        right: 0px;
        bottom: 0px;
        /* Size (Start with a smaller size, adjust as needed) */
        width: 50px;
        height: 50px;
    }

    /* --- ADD Padding Reduction --- */
    .pricing-box {
        padding: 20px 20px;
        /* Reduce padding significantly (e.g., from 40px 30px) */
        /* Consider reducing font sizes inside too */
    }

    .pricing-features li {
        padding: 5px 0;
        /* Reduce list item padding */
    }

    .pricing-features li::before {
        margin-right: 5px;
        /* Reduce checkmark margin */
    }

    .service-image {
        /* Service images might not have internal padding, but ensure */
        /* margin-bottom is appropriate if they stack weirdly */
        margin-bottom: 15px;
        /* Adjust gap between rows */
    }

    /* Reduce font sizes generally if needed */
    h3 {
        font-size: 1.3rem;
    }



    /* Example */
    /* --- End Padding Reduction --- */

    /* ... other 576px rules ... */

    .pricing-note {
        font-size: 0.75rem; /* Reduce font size for the pricing note */
        white-space: nowrap; /* Encourage it to stay on one line */
    }
}

/* === ADD THESE RULES to your CSS file === */

/* Style the paragraph holding the WhatsApp link */
.whatsapp-link {
    margin-bottom: 20px;
    /* Add space below the WhatsApp line */
}

/* Style the WhatsApp link itself */
.whatsapp-link a {
    color: var(--gold);
    /* Match other text/icons */
    text-decoration: none;
    display: inline-flex;
    /* Align icon and text */
    align-items: center;
    /* Vertically center icon/text */
    gap: 8px;
    /* Space between icon and text */
    transition: color 0.3s ease;
}

.whatsapp-link a:hover {
    color: var(--light-gold);
    /* Hover color */
}

/* Style the WhatsApp icon */
.whatsapp-link a .fab.fa-whatsapp {
    font-size: 1.3em;
    /* Make icon slightly larger than text */
    /* color: #25D366; */
    /* Optional: Uncomment to force WhatsApp green */
}

/* Optional: Adjust existing icon styles if needed */
.contact-info p i {
    /* Targets existing phone/location icons */
    color: var(--gold);
    margin-right: 10px;
    font-size: 1.2rem;
    /* Ensure consistent size */
    vertical-align: middle;
    /* Helps alignment if not using flex */
}

/* === END ADDED RULES === */

/* Style links within the contact info paragraphs */
.contact-info p a,
.contact-info p a:visited {
    /* Style visited links too */
    color: inherit;
    /* Inherit color (should be --text-light or --gold based on parent) */
    text-decoration: none;
    /* Remove underline */
    transition: color 0.3s ease;
    /* Optional: add transition */
}

/* Optional: Add hover effect */
.contact-info p a:hover {
    color: var(--light-gold);
    /* Example hover color */
    /* text-decoration: underline; */
    /* Optional: Add underline on hover */
}

/* Ensure icon alignment is good (especially if not using flex on the parent P) */
.contact-info p a i {
    vertical-align: middle;
    /* Helps align icon with text */
    margin-right: 8px;
    /* Adjust space */
    font-size: 1.1em;
    /* Adjust size */
}
/* New Cookie Consent Banner Styles */
.cookie-consent-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 550px;
    background: linear-gradient(145deg, #2b2b2b, #1a1a1a);
    color: var(--text-light);
    padding: 25px;
    border-radius: 15px;
    border: 1px solid var(--gold);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: none; /* Initially hidden */
    font-size: 0.95rem;
}

.cookie-consent-banner.show {
    display: block;
    animation: fadeInFromBottom 0.5s ease-out forwards;
}

@keyframes fadeInFromBottom {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%);
    }
}

.cookie-consent-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
}

.cookie-consent-text h3 {
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.cookie-consent-text p {
    margin-bottom: 0;
    line-height: 1.6;
}

.cookie-link {
    color: var(--light-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cookie-link:hover {
    color: #fff;
}

.cookie-consent-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

.cookie-btn {
    padding: 10px 25px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-grow: 1;
    max-width: 200px;
}

.cookie-accept {
    background: var(--gold);
    color: var(--text-dark);
}

.cookie-accept:hover {
    background: var(--light-gold);
    transform: translateY(-2px);
}

.cookie-reject {
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold);
}

.cookie-reject:hover {
    background: var(--gold);
    color: var(--text-dark);
    transform: translateY(-2px);
}

@media (max-width: 576px) {
    .cookie-consent-banner {
        width: 90%;
        bottom: 10px;
        padding: 20px;
    }

    .cookie-consent-buttons {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .cookie-btn {
        width: 100%;
    }
}