/* Responsive typography and spacing */
@media (max-width: 1050px) {
    .navbar-list li a {
        font-size: 1.75rem;
    }

    .navbar-list li {
        padding: 1rem;
    }
}

@media (max-width: 1024px) {
    .hero-text-main {
        font-size: 6rem;
        padding: 0 2rem;
    }

    .hero-text-sub {
        font-size: 1.8rem;
        padding: 1rem 2rem 0;
    }

    /* .hero-section {
        padding: 16rem 2rem 3rem;
    } */
}

/* Media Query for Smaller Screens */
@media (max-width: 1000px) {

    /* MOBILE */

    /* .navbar-section {
        flex-direction: column;
        padding: 0;
    } */

    .logo {
        height: 3rem;
    }

    .btn-mobile-nav {
        display: flex;
        /* Use flexbox */
        justify-content: center;
        /* Center horizontally */
        align-items: center;
        /* Center vertically */
        height: 4rem;
        z-index: 99;
    }

    .dropdown-back {
        display: flex;
        /* Use flexbox */
        justify-content: center;
        /* Center horizontally */
        align-items: center;
        /* Center vertically */
        height: 4rem;
        z-index: 99;
    }

    .main-nav {
        /* Taking it out of the flow */
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;

        width: 100%;
        height: 100vh;
        transform: translateX(100%);
        /* Brings the navbar from right to left */

        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.5s ease-in;

        /* 1) Hide it visually */
        opacity: 0;

        /* 2) Make it unaccessible to mouse and keyboard */
        pointer-events: none;

        /* 3) Hide it from screen readers */
        visibility: hidden;
    }

    .nav-open .main-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;

        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: translateX(0);
        z-index: 99;
    }

    .nav-open .icon-mobile-nav[name="close-outline"] {
        display: block;
    }

    .nav-open .icon-mobile-nav[name="menu-outline"] {
        display: none;
    }

    .navbar-list {
        flex-direction: column;
        gap: 3rem;
        align-items: center;
    }

    .navbar-list li.dropdown {
        width: 100%;
    }

    .dropdown-content {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        /* full viewport width */
        height: 100vh;
        /* full viewport height */
        box-shadow: none;
        border-radius: 0;
        background: #fff;
        /* padding-top: 5rem; */
        /* space for navbar/header */
        display: none;
        z-index: 9999;
        flex-direction: column;
        overflow-y: auto;
    }

    .dropdown.open .dropdown-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    /* New: back navigation row visible only on submenu view */
    .dropdown-content.child-menu {
        justify-content: flex-start;
    }

    .dropdown-content.child-menu .dropdown-back {
        display: block;
        padding: 1rem 2rem;
        /* border-bottom: 1px solid #ccc; */
        width: 100%;
        font-size: 1.8rem;
        font-weight: 600;
        cursor: pointer;
        /* background: #f7f7f7; */
        color: #414A7C;
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin-bottom: 2rem;
    }

    .dropdown-content.child-menu li:not(.dropdown-back) {
        padding-left: 2rem;
    }

    /* Hide back button if not in child menu */
    .dropdown-back {
        display: none;
    }

    .dropdown-content li a {
        font-size: 1.75rem;
        padding: 1rem 2rem;
        width: 100%;
        display: block;
        color: #414A7C;
        text-decoration: none;
    }

    /* Hover/focus styles */
    .dropdown-content li a:hover,
    .dropdown-content li a:focus {
        background-color: #DB9F6B;
        color: white;
    }

    .mobile-nav:link,
    .mobile-nav:visited {
        font-size: 2.5rem;
    }

    /* Bootstrap */
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 110rem;
    }

    .projects-images {
        gap: 3rem;
    }


    .hero-text-main {
        font-size: 4.4rem;
        /* Shrinks headline on mobile */
        margin-bottom: 1.2rem;
        /* padding-top: 12rem; */
    }

    .hero-text-sub {
        font-size: 2.3rem;
        margin-bottom: 1.5rem;
    }

    /* .hero-section {
        padding: 1rem;
    } */

    .tech-list {
        gap: 1.5rem;
        /* Reduce gap between items (15px) for smaller screens */
    }

    .hero-section-sub {
        flex-direction: column;
        margin: 2rem 1rem;
        height: auto;
        /* Let height adjust to content */
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
        /* Space between stacked blocks */
    }

    .hero-section-sub-block {
        max-width: 90vw;
        /* Full width with some margin */
        flex: none;
        /* Disable flex grow/shrink on small screens */
        margin: 0 auto 1.5rem auto;
        padding: 1rem;
    }

    .sub-block-image {
        height: auto;
        /* Let image scale naturally */
        max-height: 30rem;
        /* Optional max height for phone screens */
        object-fit: contain;
        /* Avoid cutting off image */
        width: 100%;
    }

    .samples-section {
        padding: 0 1rem;
    }

    .samples-main-title {
        font-size: 3rem;
    }

    .samples-intro {
        max-width: 100%;
    }

    .sample-box {
        padding: 2rem 1rem;
    }

    .sample-main-text {
        font-size: 4rem;
        padding-top: 6rem;
    }

    .carousel-container {
        flex-direction: column;
        height: auto;
        /* Let height adjust */
        margin: 2rem 0;
        gap: 1.5rem;
        /* Space between stacked carousels */
        justify-content: center;
        align-items: center;
    }

    .carousel-item {
        max-width: 90vw;
        flex: none;
        /* Turn off flex grow/shrink */
        margin: 0 auto 1.5rem auto;
        padding: 1rem;
    }

    .carousel-item-image {
        height: auto;
        max-height: 30rem;
        object-fit: contain;
        width: 100%;
    }

    .form-title {
        font-size: 4rem;
    }

    .footer-section {
        padding: 8rem 1.5rem 3rem;
        text-align: center;
    }

    .navbar-logo-2 {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        padding: 1rem 0;
    }

    .logo-footer {
        height: 8rem;
        margin-bottom: 1.5rem;
    }

    .footer-column {
        flex: none;
        min-width: auto;
        width: 100%;
        gap: 1rem;
    }

    .footer-link {
        font-size: 1.6rem;
        display: block;
        margin: 0.3rem 0;
    }

}

@media (max-width: 465px) {

    .hero-section {
        /* gap: 1.5rem; */
        padding: 10rem 3rem 4rem;
        /* min-height: 70vh; */
    }

    /* .hero-text-main {
        font-size: 3.6rem;
        padding: 0 1.2rem;
    }

    .hero-text-sub {
        font-size: 1.4rem;
        padding: 1rem 1.2rem 0;
    }

    .cta-button-header {
        font-size: 1.6rem;
        padding: 0.8rem 1.6rem;
        border-radius: 2rem;
    } */
}

@media (max-width: 375px) {

    .hero-section {
        /* gap: 1.5rem; */
        padding: 5rem 0rem 2rem;
        /* min-height: 70vh; */
    }
}