/* ==========================
   MOBILE.CSS
   ========================== */


body{
    overflow-x:hidden;
}









/* ==========================
   NAVBAR MOBILE HAMBURGER
   ========================== */


.hamburger{

    display:none;

    flex-direction:column;

    justify-content:space-between;

    width:32px;

    height:24px;

    background:none;

    border:none;

    cursor:pointer;

    z-index:1100;

}


.hamburger span{

    width:100%;

    height:3px;

    background:#fff;

    border-radius:2px;

    transition:.3s ease;

}





@media(max-width:900px){


    .nav-container{

        justify-content:space-between;

        padding:20px 5%;

    }



    .logo{

        margin-right:0;

        min-width:auto;

    }



    .hamburger{

        display:flex;

    }



    .nav-links{

        position:fixed;

        top:0;

        right:-100%;

        width:280px;

        height:100vh;

        background:rgba(8,8,8,.95);

        backdrop-filter:blur(15px);

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:35px;

        transition:.35s ease;

        z-index:1000;

    }



    .nav-links.active{

        right:0;

    }



    .nav-links a{

        color:#fff;

        font-size:18px;

    }



    .hamburger.active span:nth-child(1){

        transform:rotate(45deg) translateY(10px);

    }



    .hamburger.active span:nth-child(2){

        opacity:0;

    }



    .hamburger.active span:nth-child(3){

        transform:rotate(-45deg) translateY(-10px);

    }



}






/* ==========================
   HERO
   ========================== */


.hero{

    padding:90px 20px 0;

    min-height:auto;

    background-position:center;

}


.hero-title-card{

    display:none;

}


.hero h1{

    font-size:34px;

    line-height:1.2;

    max-width:100%;

}


.hero h1 span{

    margin-top:8px;

}


.hero-subtitle{

    margin-top:30px;

    font-size:16px;

    line-height:1.6;

}






/* ==========================
   BOTTONI
   ========================== */


.hero-buttons{

    flex-direction:column;

    gap:16px;

    margin:30px 0;

}



.btn-primary,
.btn-secondary{

    width:100%;

    max-width:320px;

    margin:0;

}







/* ==========================
   CONTATTI HERO
   ========================== */


.hero-contacts{

    flex-direction:column;

    gap:14px;

    margin:20px 0;

    margin-left:0;

}



.hero-contacts a,
.hero-contacts a:first-child,
.hero-contacts a:last-child{

    width:100%;

    max-width:320px;

    margin:0;

    justify-content:center;

}






/* ==========================
   TECNOLOGIE
   ========================== */


.hero-tech-wrap{

    margin-top:40px;

}


.hero-tech-strip{

    padding:14px 0;

}


.hero-tech-track{

    gap:28px;

}


.hero-tech-item img{

    width:50px;

    height:50px;

}







/* ==========================
   SERVIZI
   ========================== */


.services-showcase{

    padding:70px 20px;

}



.section-title{

    text-align:center;

}



.section-title h2{

    font-size:30px;

}



.section-title p{

    font-size:15px;

}




.service-row{

    display:flex;

    flex-direction:column;

    gap:20px;

}



.service-copy{

    text-align:center;

}



.service-copy h3{

    font-size:26px;

}



.service-copy p{

    font-size:15px;

}



.service-visual img{

    border-radius:14px;

}







/* ==========================
   CONTATTI
   ========================== */


.contact-section{

    padding:70px 20px;

}



.form-grid{

    display:flex;

    flex-direction:column;

}



.contact-form .btn-primary{

    width:100%;

}







/* ==========================
   SCHERMI FINO A 480PX
   ========================== */


@media(max-width:480px){


    .hero{

        padding-top:80px;

    }


    .hero h1{

        font-size:30px;

    }



    .hero-subtitle{

        font-size:15px;

    }



    .section-title h2{

        font-size:26px;

    }



    .service-copy h3{

        font-size:22px;

    }



    .hero-tech-item img{

        width:42px;

        height:42px;

    }


}