/*==========================================
            MENU TABLET
==========================================*/

@media(max-width:1100px){

    .nav-links{
        position:fixed;
        top:90px;
        right:-100%;
        width:80%;
        max-width:400px;
        height:calc(100vh - 90px);
        background:white;
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        padding-top:50px;
        gap:25px;
        box-shadow:-10px 0 30px rgba(0,0,0,.12);
        transition:.4s;
        overflow-y:auto;
    }

    .nav-links.active{
        right:0;
    }

    .btn-nav{
        display:none;
    }

    .menu-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
    }

}

/*==========================================
        SERVICIOS LAPTOP PEQUEÑA
==========================================*/

@media(max-width:1050px){

    .services .services-grid{
        grid-template-columns:1fr;
        gap:26px;
    }

}

/*==========================================
            TABLET
==========================================*/

@media(max-width:992px){

    .navbar{
        padding:20px 30px;
    }

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

    .hero-content,
    .hero-image{
        width:100%;
    }

    .hero-buttons,
    .hero-data{
        justify-content:center;
        flex-wrap:wrap;
    }

    .about-row{
        grid-template-columns:1fr;
        gap:50px;
    }

    .about-row.reverse{
        direction:ltr;
    }

    .team-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .stats-container{
        grid-template-columns:repeat(4,1fr);
        gap:20px;
    }

    .stat-box h3{
        font-size:36px;
    }

    .stat-box p{
        font-size:13px;
    }

    .footer-container{
        grid-template-columns:1fr 1fr;
    }

}

/*==========================================
            CELULAR
==========================================*/

@media(max-width:768px){

    .navbar{
        padding:18px 20px;
    }

    .logo img{
        width:50px;
    }

    .logo-text h2{
        font-size:28px;
    }

    .logo-text p{
        font-size:8px;
        letter-spacing:2px;
    }

    .nav-links{
        top:85px;
        width:85%;
        height:calc(100vh - 85px);
        padding-top:40px;
        gap:22px;
    }

    .hero{
        padding:120px 7% 80px;
    }

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

    .hero p{
        font-size:16px;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .data-card{
        width:150px;
    }

    .about{
        padding:90px 7%;
    }

    .about-info h3{
        font-size:30px;
    }

    .number{
        font-size:70px;
    }

    .services,
    .team{
        padding:90px 7%;
    }

    /* SERVICIOS EN CELULAR */

    .services .services-grid{
        grid-template-columns:1fr;
        gap:22px;
        margin-top:42px;
    }

    .services .service-card{
        padding:27px 23px;
        border-radius:22px;
    }

    .services .service-top{
        margin-bottom:21px;
    }

    .services .service-icon{
        width:58px;
        height:58px;
        border-radius:16px;
    }

    .services .service-icon i{
        font-size:23px;
    }

    .services .service-code{
        padding:6px 11px;
        font-size:0.68rem;
    }

    .services .service-card h3{
        font-size:1.3rem;
    }

    .services .service-card h4{
        padding:12px 14px;
        font-size:0.92rem;
        line-height:1.55;
    }

    .services .service-card p{
        font-size:0.9rem;
        line-height:1.75;
    }

    .team-grid,
    .clients-container,
    .footer-container{
        grid-template-columns:1fr;
    }

    .stats{
        padding:60px 5%;
    }

    .stats-container{
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

    .stat-box{
        padding:15px 5px;
    }

    .stat-box h3{
        font-size:32px;
    }

    .stat-box p{
        font-size:12px;
    }

    .contact{
        padding:100px 7%;
    }

    .contact-content h2{
        font-size:34px;
    }

    .contact-buttons{
        flex-direction:column;
        align-items:center;
    }

    .footer-container{
        text-align:center;
    }

    .footer-logo{
        justify-content:center;
    }

    .whatsapp-float{
        width:55px;
        height:55px;
        font-size:29px;
        right:20px;
        bottom:20px;
    }

    .scroll-top{
        width:50px;
        height:50px;
        right:20px;
        bottom:90px;
    }

}