@media (max-width:768px){

    html,
    body{
        overflow-x:hidden;
    }

    section{
        padding:80px 24px;
    }


    nav{
        padding:15px 24px;
        flex-direction:column;
        gap:15px;
    }

    nav ul{
        gap:18px;
        flex-wrap:wrap;
        justify-content:center;
    }


    .hero{
        min-height:auto;
        padding-top:140px;
    }

    .hero-content{
        flex-direction:column;
        text-align:center;
        gap:40px;
    }

    .hero-text{
        width:100%;
    }

    .hero-text h1{
        font-size:42px;
    }

    .hero-text p{
        max-width:100%;
        font-size:16px;
        line-height:30px;
    }

    .btn{
        margin-top:25px;
    }


    #matrix{
        width:100%;
        opacity:.18;
    }


    .about p{
        line-height:28px;
    }


    .cards{
        grid-template-columns:1fr;
    }

    .card{
        max-width:320px;
    }


    .popup-content{
        width:92%;
        padding:20px;
    }

    .popup-content img{
        width:170px;
        height:170px;
    }

    .popup-contact h4{
        font-size:20px;
    }


    .marquee-group span{
        font-size:40px;
        white-space:normal;
    }

}


@media (max-width:480px){

    .hero-text h1{
        font-size:34px;
    }

    .hero-text p{
        font-size:15px;
    }

    .card{
        max-width:100%;
    }

    .popup-content img{
        width:140px;
        height:140px;
    }

}

@media (max-width:768px){

    ::-webkit-scrollbar{
        display:none;
    }

    html{
        scrollbar-width:none;
    }

    body{
        -ms-overflow-style:none;
    }

}