/* ==========================================================================
   Responsive Design - Media Queries
   ========================================================================== */

/* For tablets and smaller desktops */
@media (max-width: 992px) {
    .logo-container img {
        width: 100px; /* Slightly smaller logo */
    }
}

/* For mobile phones */
@media (max-width: 768px) {
    .top-flex-container {
        padding: 12px 16px; /* Reduce padding for smaller screens */
    }

    /* --- Mobile Navigation Styles --- */
    .nav-links {
        position: fixed;
        top: 0;
        left: 0; /* Change to slide in from the left */
        width: 70%;
        max-width: 300px;
        height: 100vh;
        background: #fefdfe;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        transform: translateX(-100%); /* Hide menu off-screen to the left */
        transition: transform 0.3s ease-in-out;
        box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1); /* Adjust shadow direction */
    }

    body.nav-open .nav-links {
        transform: translateX(0); /* Slide menu into view */
    }

    .nav-links a {
        /* Make fonts larger for mobile menu */
        font-size: clamp(1.2rem, 1.5vw, 1.5rem) !important;
    }

    .mobile-nav-toggle {
        display: block; /* Show the hamburger button */
    }

    /* Animate hamburger to an "X" when menu is active */
    body.nav-open .mobile-nav-toggle span {
        opacity: 0; /* Hide middle line */
    }
    body.nav-open .mobile-nav-toggle::before {
        transform: rotate(45deg) translate(6px, 6px);
    }
    body.nav-open .mobile-nav-toggle::after {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    .logo-container img {
        width: 90px; /* Even smaller logo */
    }

    .services-container {
        flex-direction: column; /* Stack cards vertically on mobile */
    }
}