/*=========================================
        PANTALLAS GRANDES
=========================================*/

@media (max-width:1400px){

    .navbar{

        width:min(95%,1200px);

    }

}

/*=========================================
        PORTÁTILES
=========================================*/

@media (max-width:1200px){

    .hero-content h2{

        font-size:58px;

    }

    .hero-content p{

        font-size:22px;

    }

}

/*=========================================
        TABLETS
=========================================*/

@media (max-width:992px){

    .navbar{

        flex-direction:column;

        gap:20px;

    }

    nav{

        margin-left:0;

    }

    nav ul{

        justify-content:center;

        flex-wrap:wrap;

        gap:25px;

    }

    .hero{

        min-height:80vh;

    }

    .hero-content h2{

        font-size:48px;

    }

    .hero-content p{

        font-size:20px;

    }

    #chatbot{

        bottom:15px;

        right:15px;

    }

}

/*=========================================
        MÓVILES
=========================================*/

@media (max-width:768px){

    .logo a{

        font-size:30px;

    }

    nav ul{

        gap:18px;

    }

    nav ul li a{

        font-size:18px;

    }

    .hero{

        min-height:75vh;

    }

    .hero-content h2{

        font-size:38px;

    }

    .hero-content p{

        font-size:18px;

    }

    .avatar{

        width:100px;

    }

}

/*=========================================
        MÓVILES PEQUEÑOS
=========================================*/

@media (max-width:576px){

    .hero{

        min-height:70vh;

    }

    .hero-content{

        width:92%;

    }

}

/*=========================================
        MÓVILES MUY PEQUEÑOS
=========================================*/

@media (max-width:400px){

    .logo a{

        font-size:26px;

    }

    nav ul{

        flex-direction:column;

        gap:15px;

    }

    .hero-content h2{

        font-size:30px;

    }

    .hero-content p{

        font-size:16px;

    }

    .avatar{

        width:85px;

    }

}