/* Responsive Styles for Navigation and Footer */
.m-version { display:none; }

@media (max-width: 1280px) {
    .footer-logo { font-size:1.2rem; }
    .footer-logo > img { width:100px !important; height:auto; }

}


@media (max-width: 1024px) {

    
    main { width:100%; overflow-x:hidden; }

    main > .hero {
        padding-top:100px !important; 
    }

    .m-version { display:block; }
    .dt-version, .hero-visual { display:none !important; }
    
    .hero-container {
        display:block;
        padding-bottom:50px;
    }

    .hero h1 {
        font-size:2.4rem;
        margin-top:10px;
    }

    .data-dashboard {
        transform-origin:top right;
        transform:scale(.5);
        top:10px;
        right:10px;
    }

    .interactive-elements {
        left:10px; 
        bottom:15px;
        transform-origin:bottom left;
        transform:scale(.5);
    }

    .digital-twin-container { 
        margin:50px 0 25px;
    }

    .floating-data { 
        transform-origin:top left;
        transform:scale(.5);
    }

    .data-point:nth-child(1){
        left:40%;
        top:60%;
    }

    .data-point:nth-child(2){
        left:90%;
        top:110%;
    }

    .data-point:nth-child(3){
        left:60%;
        top:120%;
    }

    .data-point:nth-child(4){
        left:120%;
        top:100%;
    }

    .project-cards {
        scroll-snap-type: none;     
        scroll-snap-stop: normal;
        display:block;
    }

    .project-cards { padding-top:0 !important; }
    .project-cards > .project-card { width:100%; max-width:100%; height:auto; margin:25px 0; }


    .contact-form {
        padding:1.5rem;
    }

    input, select, textarea { -webkit-appearance:none !important; }

    .hamburger {
        display: none;
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 4rem;
        flex-direction: column;
        background: var(--nav-background);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: var(--shadow-lg);
        padding: 2rem 0;
        gap: 1rem;
    }

    .nav-menu.active {
        left: 0;
    }

    .contact-content { display:block; }
    .contact-content > div:nth-child(1) { margin-bottom:75px; }

    .footer-logo > img { width:70px !important; height:auto; }

    .footer-logo > span { font-size:1.3rem; }

    .footer-content {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }



    .footer-links {
        flex-direction: column;
        gap: 1rem;
    }
}