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

@media (max-width: 768px) {
    /* Reduce hero height */
    .hero {
        height: 70vh; /* smaller than desktop */
        padding: 1rem; /* optional padding */
    }
    /* Adjust overlay */
    .hero-overlay {
        background: rgba(0, 0, 0, 0.5); /* keep overlay visible */
    }
    /* Hero content text adjustments */
    .hero-content {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        text-align: center;
        padding: 1rem;
    }
    .hero-title {
        font-size: 1.8rem; /* smaller title */
        letter-spacing: 0.05em; /* Added letter spacing */
        margin-bottom: 1rem; /* Adjusted margin */
    }
    .hero-description {
        font-size: 0.9rem; /* smaller description */
        line-height: 1.3rem;
        margin-bottom: 1rem; /* Adjusted margin */
    }
    /* Hero stats: hide on mobile */
    .hero-stats {
        display: none;
    }
    .hero-buttons {
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 1rem; /* Adjusted margin */
        align-items: center; /* Centering the buttons */
    }
    /* Adjust arrow buttons */
    .hero-arrow {
        top: 90%;
        transform: translateY(-50%);
        font-size: 1.5rem;
    }
    /* Make images responsive */
    .hero-slide img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
    
    /* Navbar Responsive Styles */
    .nav-links {
        position: fixed;
        top: var(--navbar-height); /* Positioned below the main navbar */
        left: 0;
        width: 100%;
        max-height: 0; /* Initially hidden */
        background: rgba(10, 10, 10, 0.95); /* Dark overlay */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 1001;
        overflow: hidden; /* Hide overflow content */

        opacity: 0; /* Still use for fading */
        visibility: hidden; /* Still use for screen readers */
        /* Default transition for when it becomes inactive (closing) */
        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0s 0.3s; /* visibility hides after 0.3s */
    }

    .nav-links.active {
        top: var(--navbar-height); /* Remains positioned below the main navbar */
        max-height: calc(50vh - var(--navbar-height)); /* Expands to 50vh minus navbar height */
        opacity: 1; /* Becomes fully visible */
        visibility: visible; /* Becomes visible to screen readers/interaction */
        /* No delay when opening */
        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0s 0s;
    }

    .nav-links li {
        margin: 0.5rem 0; /* Decreased gap between links */
    }

    .nav-links li:first-child {
        margin-top: 1.2rem; /* Added padding above Home */
    }

    .nav-links li:last-child {
        margin-bottom: 2.1rem; /* Added padding below Contact Us */
    }

    .nav-links a {
        font-size: 1rem; /* Reduced font size */
    }

    .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);
    }
    
    .vm-container {
        flex-direction: column;
    }

    .testimonials-grid {
        gap: 5rem;
    }
    .stat-item .stat-label {
        max-width: 100px; /* Set max-width to force line break for wider mobile screens */
        text-align: center; /* Center the text within its max-width */
        margin: 0 auto; /* Center the block itself if it's smaller than its parent */
    }
}

@media (max-width: 480px) {
    /* General adjustments for very small screens */
    .section-title, .subsection-title {
        font-size: 1.8rem;
    }

    /* Hero section adjustments */
    .hero {
        height: 100vh; /* Set to 100vh as requested */
        padding: 0.5rem; /* Reduced padding for very small screens */
    }
    .hero-content {
        padding: 0 0.5rem; /* Reduced padding for very small screens */
    }
    .hero-title {
        font-size: 1.9rem !important; /* Slightly increased hero title size */
        margin-bottom: 1rem !important; /* Adjusted margin */
        letter-spacing: 0.05em !important;
    }
    .hero-subtitle {
        font-size: 0.7rem !important; /* Slightly increased subtitle size for better readability */
    }
    .hero-description {
        font-size: 0.6rem !important; /* Reduced subtext font size */
        line-height: 1rem; /* Adjusted line height */
        margin-bottom: 1rem !important; /* Adjusted margin */
        max-width: 90% !important; /* Setting a specific width to promote 2 lines */
    }
    .hero-stats {
        display: none;
    }
    .stat-item .stat-number {
        font-size: 1.2rem; /* Reduced stat number size */
    }
    .stat-item .stat-label {
        font-size: 0.5rem; /* Reduced stat label size */
        max-width: 80px; /* Set max-width to force line break */
        text-align: center; /* Center the text within its max-width */
        margin: 0 auto; /* Center the block itself if it's smaller than its parent */
    }
    .hero-buttons {
        flex-direction: column;
        gap: 0.5rem; /* Slightly increased gap between buttons */
        margin-top: 1.5rem; /* Adjusted margin */
        align-items: center;
    }
    .hero-buttons .btn {
        width: 85%; /* Increased width */
        max-width: 220px; /* Increased max-width */
        padding: 0.7rem 1.2rem; /* Increased padding */
        font-size: 0.8rem; /* Increased font size */
    }
    .hero-arrow {
        top: 90%;
        transform: translateY(-50%);
        font-size: 1.2rem; /* Even smaller arrows */
    }

    /* Get Started section adjustments */
    .get-started-content {
        flex-direction: column;
    }
    .get-started-image, .get-started-text {
        width: 100%;
    }
    .get-started-text {
        text-align: center;
    }
    .get-started-text .btn {
        width: 80%;
        margin: 0 auto;
    }
    .price-line .stat-number {
        font-size: 3rem;
    }

    /* Why Choose Us section adjustments */
    .why-choose-us {
        flex-direction: column;
    }
    .why-choose-us-text, .why-choose-us-image {
        width: 100%;
    }
    .why-choose-us-list {
        padding-left: 1.5rem;
    }

    /* Projects section adjustments */
    .projects-cards {
        flex-direction: column;
        gap: 1.5rem;
    }
    .project-card {
        width: 90%;
        margin: 0 auto;
    }

    /* Experts section adjustments */
    .experts-container {
        flex-direction: column;
    }
    .experts-text-content, .experts-image {
        width: 100%;
    }
    .experts-text-content {
        text-align: center;
    }
    .experts-text-content .btn {
        width: 80%;
        margin: 0 auto;
    }

    /* Reviews section adjustments */
    .carousel-container {
        padding: 0 1rem;
    }
    .testimonial-card {
        min-width: 90%; /* Adjust card width */
        margin: 0 0.5rem;
    }

    /* Subscribe section adjustments */
    .subscribe-form {
        flex-direction: column;
        gap: 1rem;
        max-width: 90%;
        margin: 0 auto;
    }
    .subscribe-form input, .subscribe-form button {
        width: 100%;
    }

    /* Footer adjustments */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .footer-section h4 {
        margin-bottom: 0.8rem;
    }
    .footer-bottom {
        padding-top: 1.5rem;
    }
    .footer-bottom .btn {
        margin-bottom: 1.5rem;
    }
}