@media (max-width: 768px) {
    .navbar {
        position: relative; /* Or fixed if you want it to stay at the top */
        z-index: 1002;
    }
    /* Hide the auth button on mobile to save space */
    .nav-auth { display: none; }

    /* Style the Hamburger Icon */
    .menu-toggle {
        display: block;
        cursor: pointer;
        position: relative; /* Essential for z-index */
        z-index: 2500 !important; /* Higher than the .nav-links z-index */
    }

    .menu-toggle .bar {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px auto;
        background-color: #004E64; /* Your theme dark blue */
        transition: all 0.3s ease-in-out;
    }

    .menu-toggle.is-active .bar {
        background-color: #004E64; /* Or any color that stands out against white */
    }

    .nav-links {
        display: flex; 
        position: fixed;
        left: -100%; /* Sits off-screen to the left */
        top: 0;
        flex-direction: column;
        background-color: #ffffff;
        width: 100%; /* Full width makes it easier to see if it's working */
        height: 100vh;
        text-align: center;
        transition: 0.3s ease-in-out;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.1);
        padding-top: 100px;
        z-index: 2000; /* Extremely high to stay above EVERYTHING */
    }

    /* THIS IS THE CRITICAL PART */
    .nav-links.active {
        left: 0 !important; /* Forces the menu to slide in */
        display: flex !important;
    }

    .nav-links li {
        margin: 20px 0;
    }

    .nav-links a {
        font-size: 1.5rem;
        color: #004E64; /* Use your dark blue theme color */
    }

    /* Animate Hamburger to "X" when active */
    .menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .hero-container {
        display: flex;
        flex-direction: column-reverse; /* Keeps image on top */
        align-items: center; /* Centers items horizontally */
        justify-content: center;
        text-align: center;
        padding: 40px 5%;
        width: 100%;
        box-sizing: border-box;
    }

    .hero-text, .hero-image {
        width: 100% !important; /* Overrides the 450px from style.css */
        max-width: 100%;
        padding: 0;
        margin: 0 auto;
    }

    .hero-image img {
        width: 90%; /* Scale the image to fit nicely */
        height: auto;
        margin-bottom: 20px;
    }

    .hero-text h1 {
        font-size: 1.8rem; /* Shrink text slightly for small screens */
        margin-bottom: 15px;
    }

    /* Footer */
    .footer-container {
        flex-direction: column;
        text-align: center;
    }

    .footer-left, .footer-middle, .footer-right {
        width: 100%;
        align-items: center;
    }

    .contact-info {
        justify-content: center;
    }

    .social-icons {
        justify-content: center;
    }
    
    .footer-left img {
        margin: 0 auto 20px;
    }
}
/*=======================================================================================================*/

/* --- ABOUT PAGE RESPONSIVE --- */

@media (max-width: 992px) {
    /* Stack the "Why Velvet" section */
    .about-flex {
        flex-direction: column;
        padding: 50px 5%;
        text-align: center;
    }

    .about-image {
        width: 100%;
        max-width: 500px; /* Keeps the dog image from getting too huge */
        margin-bottom: 30px;
    }

    .about-text {
        width: 100%;
    }

    .why-list {
        display: inline-block;
        text-align: left; /* Keeps list items aligned left even if parent is centered */
    }
}

@media (max-width: 768px) {
    /* Banner Adjustment */
    .inner-banner {
        padding: 60px 5%;
    }

    .inner-banner h1 {
        font-size: 2.2rem;
    }

    /* Gallery Grid: 2 columns on mobile */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .gallery-item img {
        height: 180px; /* Shorter height for mobile screens */
    }

    /* Enquiry Form */
    .enquiry-section {
        padding: 40px 5%;
    }

    .enquiry-card {
        padding: 25px;
    }

    .form-group {
        flex-direction: column; /* Stack Name and Email inputs */
        gap: 15px;
    }
    
    .enquiry-form input {
        margin-bottom: 0; /* Handled by gap now */
    }
    .form-button{
        width: 100%;
    }
    .enquiry-form input, .enquiry-form textarea{
        width: 90%;
    }
}
/*================================================================================================================*/

@media (max-width: 992px) {
    .flex-row, .flex-row-reverse {
        flex-direction: column !important; /* Force stack on mobile */
        text-align: center;
        gap: 30px;
    }

    .service-img img {
        box-shadow: 10px 10px 0px #d6a69d;
    }
    
    .service-info h2 {
        font-size: 2rem;
    }
}

@media (max-width: 992px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for tablets */
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: 1fr; /* 1 column for mobile phones */
    }
}