@media (max-width: 992px) {
    .hero h1 {
        font-size: 5rem !important; /* Larger hero text on tablets */
        margin-bottom: 2.5rem !important; /* Increased gap */
    }
    
    .hero p {
        font-size: 1.5rem !important; /* Larger subtext on tablets */
    }
}

@media (max-width: 768px) {                                                              
    .hero-title {                                                                        
        font-size: clamp(2rem, 8vw, 3.5rem) !important;                                  
        margin-bottom: 2rem !important;
        margin-top: 1rem !important; /* Adjust margin-top for mobile */
    }
    
    .hero-description {
        font-size: clamp(0.8rem, 3vw, 1rem) !important;
    }
    
    .hero-content {
        max-width: 90% !important;
        padding: 0 1rem !important;
    }
    
    .hero-btns {
        flex-direction: column;
        align-items: center;
    }
    
    .vm-container {
        flex-direction: column;
    }

    .testimonials-grid {
        gap: 5rem;
    }

    /* Navbar Responsive Styles */
    .nav-links {
        position: fixed;
        top: 0;
        left: 100%; /* Start off-screen to the right */
        width: 100%;
        height: 100%;
        background: rgba(10, 10, 10, 0.95); /* Dark overlay */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: left 0.3s ease-in-out;
        z-index: 1001; /* Ensure it's above other content */
    }

    .nav-links.active {
        left: 0; /* Slide in from the right */
    }

    .nav-links li {
        margin: 1rem 0;
    }

    .nav-links a {
        font-size: 1.5rem;
    }

    .hamburger {
        display: block; /* Show hamburger on mobile */
        z-index: 1002; /* Ensure it's above the nav-links overlay */
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}