/* --- Global & Layout --- */
body {
    /* We don't need padding on body anymore if we spacing the header directly */
    margin: 0; 
}

.navbar {
    opacity: .9;
}
/* --- Hero / Header Section --- */
.hero-header {
    /* FIX: This pushes the header down below the fixed navbar */
    margin-top: 75px; 
    
    /* Layout */
    height: 85vh;
    display: flex;
    align-items: center;
    
    /* Text styling */
    color: white;
    text-align: center;
    
    /* Parallax Background Defaults */
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-color: #333; 
}

/* --- Service Cards --- */
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 0;
}

.service-card:hover {
    transform: translateY(10px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}

.option-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 0;
}

.option-card:hover {
    transform: translateY(5px) translateX(2px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.05) !important;
}

/* --- Icon Circles --- */
.icon-box {
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    border-radius: 50%;
}

/* --- Modal & Iframe --- */
.booking-container {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
}

.booking-iframe {
    width: 100% !important;
    height: 80vh !important;
    border: 0;
}

.social-link {
    text-decoration: none;
}

.social-icon {
    height: 50px;
    width: 50px;
}

.social-icon-contact {
    height: 30px;
    width: 30px;
}

/* 1. The Container (The white box) */
.navbar .dropdown-menu {
    border: none !important; /* Forces removal of the ugly grey border */
    border-radius: 12px !important; /* Smooths the sharp corners */
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important; /* deep, soft shadow */
    padding: 10px !important; /* Adds breathing room inside the box */
    margin-top: 12px !important; /* Pushes the menu down slightly */
    background-color: rgb(246, 252, 255);
    animation: fadeIn 0.3s ease; /* Adds a small fade-in effect */
}

/* 2. The Links (The text items) */
.navbar .dropdown-item {
    border-radius: 8px; /* Rounds the hover highlight */
    padding: 10px 20px; /* Bigger clickable area */
    font-weight: 500; /* Slightly bolder text */
    color: #555; /* Softer black */
    transition: all 0.2s ease-in-out; /* Smooth transition for hover */
}

/* 3. The Hover Effect (When you mouse over) */
.navbar .dropdown-item:hover, 
.navbar .dropdown-item:focus {
    background-color: #f8f9fa; /* Very light grey background */
    color: #0dcaf0; /* Matches your 'btn-warning' gold color */
    transform: translateX(5px); /* Subtly slides the text to the right */
}

/* Optional: Small arrow on top of the menu */
.navbar .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 20px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
    filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.05));
}

/* Animation Keyframes */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.navbar .login-link:hover {
    cursor: pointer;
}