/* ===== MOBILE MENU & CALL BUTTON FIXES ===== */
@media (max-width: 768px) {

    /* Mobile Controls Container */
    .mobile-controls {
        display: flex;
        align-items: center;
        gap: 15px;
        position: relative;
        z-index: 1001;
        /* Ensure controls are above the menu */
    }

    /* Mobile Call Button */
    .mobile-call-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        background: var(--dark-bg-tertiary);
        color: var(--primary-gold);
        border-radius: 12px;
        font-size: 18px;
        border: 1px solid rgba(212, 168, 75, 0.3);
        transition: var(--transition);
        text-decoration: none;
    }

    .mobile-call-btn:hover {
        background: var(--primary-gold);
        color: var(--white);
        transform: scale(1.05);
    }

    /* REMOVED PULSE ANIMATION AS REQUESTED */
    .mobile-call-btn i {
        animation: none;
    }

    /* Sliding Side Menu (Not Full Screen) */
    .nav {
        display: flex !important;
        /* Force flex but hidden by position */
        position: fixed;
        top: 0;
        left: -100%;
        /* Hidden initially */
        width: 80%;
        /* Reduced from 100% to 80% to show it's a drawer */
        max-width: 350px;
        /* Max width constraint */
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 5px 0 25px rgba(0, 0, 0, 0.15);
        /* Stronger shadow for depth */
        flex-direction: column;
        justify-content: flex-start;
        /* Start from top instead of center */
        align-items: flex-start;
        /* Align text to left */
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 998;
        /* Behind controls but covering content */
        padding: 100px 40px 100px;
        /* Bottom padding increased for footer */
        overflow-y: auto;
        /* Allow scrolling if screen is short */
    }

    .nav.active {
        left: 0;
        /* Slide in */
    }

    /* Overlay when menu is open */
    .nav.active::before {
        content: '';
        position: fixed;
        top: 0;
        left: 100%;
        width: 200vw;
        /* Cover the rest of the screen */
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        animation: fadeInOverlay 0.4s forwards;
        cursor: pointer;
    }

    @keyframes fadeInOverlay {
        to {
            opacity: 1;
        }
    }

    .nav-list {
        flex-direction: column;
        gap: 15px;
        /* Reduced from 30px */
        text-align: left;
        /* Align text to left */
        width: 100%;
    }

    .nav-link {
        font-size: 22px;
        /* Slightly smaller for cleaner look */
        font-weight: 600;
        display: block;
        padding: 5px 0;
        opacity: 0;
        transform: translateX(-20px);
        /* Slide in from left */
        transition: all 0.4s ease;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        /* Subtle separator */
    }

    .nav-link:last-child {
        border-bottom: none;
    }

    /* Staggered animation for links when active */
    .nav.active .nav-link {
        opacity: 1;
        transform: translateX(0);
    }

    .nav.active li:nth-child(1) .nav-link {
        transition-delay: 0.1s;
    }

    .nav.active li:nth-child(2) .nav-link {
        transition-delay: 0.15s;
    }

    .nav.active li:nth-child(3) .nav-link {
        transition-delay: 0.2s;
    }

    .nav.active li:nth-child(4) .nav-link {
        transition-delay: 0.25s;
    }

    .nav.active li:nth-child(5) .nav-link {
        transition-delay: 0.3s;
    }

    /* Header Right (Socials) in Menu - Fixed at bottom */
    .header-right {
        display: flex !important;
        /* Force flex */
        position: fixed;
        bottom: 30px;
        left: 40px;
        /* Align with nav padding */
        width: auto;
        justify-content: flex-start;
        gap: 15px;
        z-index: 1002;
        /* Above the nav background */
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.4s ease;
        pointer-events: none;
    }

    .header-right.active {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.3s;
        pointer-events: auto;
    }

    .header-phone {
        display: none;
        /* Hide the top phone number description */
    }

    /* Ensure Header stays on top */
    .header {
        z-index: 1000;
    }
}

/* Default state for mobile controls on bigger screens */
@media (min-width: 769px) {
    .mobile-controls {
        display: none;
    }
}