body {
    font-family: 'body', sans-serif;
    background-color: theme('colors.primary-blue.extra-light');
    color: theme('colors.text-dark');
}
h1, h2, h3 {
    font-family: 'heading', sans-serif;
}
/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: theme('colors.primary-blue.light');
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: theme('colors.primary-blue.dark');
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: theme('colors.primary-blue.DEFAULT');
}

/* Hero image background effect */
.hero-bg-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.6));
    z-index: 1; /* Ensure overlay is above image but below text */
}
.hero-carousel-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This makes the image cover the area, potentially cropping */
    transition: opacity 1s ease-in-out; /* Smooth transition for images */
    opacity: 0; /* Hidden by default, JavaScript will manage opacity */
}
.hero-carousel-img.active {
    opacity: 1;
}
.carousel-nav-btn {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 0.5rem;
    border-radius: 50%;
    transition: background-color 0.3s;
    z-index: 2; /* Ensure buttons are above overlay and image */
}
.carousel-nav-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Mobile menu specific styles */
#mobile-nav-links.hidden {
    display: none;
}

/* Google Translate specific styling to make it less intrusive */
.goog-te-gadget-simple {
    font-family: 'Roboto', sans-serif !important;
    border: none !important;
    background-color: transparent !important;
    padding: 0 !important;
}
.goog-te-gadget-simple .goog-te-menu-value {
    color: theme('colors.text-dark') !important;
    font-weight: 500;
    padding: 0 !important;
}
.goog-te-gadget-simple .goog-te-menu-value span {
    display: none; /* Hide default Google Translate text */
}
.goog-te-gadget-simple .goog-te-menu-value span:first-child {
    display: inline !important; /* Show only the selected language */
}
.goog-te-gadget-simple .goog-te-menu-value img {
    display: none !important; /* Hide Google Translate icon */
}
.goog-te-tooltip-menu-frame {
    border-radius: 0.5rem; /* Match site's rounded corners */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
body > .skiptranslate {
    display: none !important; /* Hide the Google Translate banner at the top */
}

/* New styles for hero carousel buttons on hover */
#hero-section .carousel-nav-btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

#hero-section:hover .carousel-nav-btn {
    opacity: 1;
    pointer-events: auto;
}

/* Image Modal Styles */
.image-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.image-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}
.image-modal-content {
    position: relative;
    max-width: 90%; /* Limits the content width to 90% of modal */
    max-height: 90%; /* Limits the content height to 90% of modal */
    overflow: hidden; /* Ensures content stays within bounds */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
}
/* Critical change: Removed object-fit: contain; to allow original size display */
.image-modal-content img, .image-modal-content video {
    max-width: 100%; /* Ensures it doesn't exceed 100% of its parent's width */
    max-height: 100%; /* Ensures it doesn't exceed 100% of its parent's height */
    /* object-fit: contain; -- REMOVED this line */
    border-radius: 0.5rem;
}
.image-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    border-radius: 50%;
    padding: 0.5rem 0.75rem;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background-color 0.3s;
    z-index: 1001;
}
.image-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

/* Loading Overlay Styles */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: theme('colors.primary-blue.dark'); /* Dark blue background */
    background-image: url('images/loading-background.jpg'); /* New background image */
    background-size: cover; /* Ensures the image covers the entire overlay */
    background-position: center;
    background-repeat: no-repeat; /* Prevents tiling */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure it's on top of everything */
    opacity: 1;
    transition: opacity 0.5s ease-out;
    /* Important: Ensure visibility is hidden AFTER transition */
    visibility: visible; /* Default to visible */
}
#loading-overlay.hidden {
    opacity: 0;
    /* CRITICAL FIX: Visibility hides after opacity transition completes */
    transition: opacity 0.5s ease-out, visibility 0s 0.5s;
    visibility: hidden;
}
#loading-overlay img {
    max-width: 200px; /* Increased logo size */
    height: auto;
    margin-bottom: 2rem;
    animation: pulse 2s infinite ease-in-out; /* Simple pulse animation */
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
/* Optional: A simple spinner or progress indicator */
#loading-spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Force display of native video controls */
video::-webkit-media-controls {
    display: flex !important;
}
video::-webkit-media-controls-enclosure {
    display: flex !important;
}
video::-moz-range-track {
    background-color: transparent !important;
}
video::-ms-fill-lower {
    background-color: transparent !important;
}
/* Ensure the video element itself has enough space for controls on smaller sizes */
video[controls] {
    min-height: 50px; /* Adjust as needed, prevents controls from being squished */
}

.tour-card-button,
#contact-form button {
    color: white !important; /* Ensure white text color */
}