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

@media (max-width:992px){

    /* HERO */

    .hero{

        height:80vh;

    }

    .hero h1{

        font-size:60px;

    }

    .hero p{

        font-size:18px;

    }

    /* HISTORIA */

    .history{

        padding:80px 0;

    }

    .history .container{

        grid-template-columns:1fr;

        gap:50px;

    }

    .history-content{

        text-align:center;

    }

    /* TITULOS */

    .section-title h2{

        font-size:38px;

    }

    /* PROYECTOS */

    .project{

        grid-template-columns:1fr;

        gap:40px;

        margin-bottom:80px;

    }

    .project.reverse .project-image{

        order:0;

    }

    .project.reverse .project-content{

        order:0;

    }

    .project-content{

        text-align:center;

    }

}

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

@media (max-width:768px){

    .container{

        width:92%;

    }

    /* HERO */

    .hero{

        height:70vh;

        text-align:center;

    }

    .hero-content{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

    .developer{

        letter-spacing:3px;

        font-size:.8rem;

    }

    .hero h1{

        font-size:42px;

        line-height:1.1;

    }

    .hero p{

        font-size:16px;

        line-height:1.7;

    }

    .btn{

        width:100%;

        max-width:280px;

        text-align:center;

    }

    /* HISTORIA */

    .history{

        padding:70px 0;

    }

    .history-image{

        border-radius:18px;

    }

    .history-content h2{

        font-size:32px;

    }

    .history-content p{

        font-size:15px;

    }

    /* TITULOS */

    .section-title{

        margin-bottom:50px;

    }

    .section-title h2{

        font-size:30px;

    }

    /* PROYECTOS */

    .projects{

        padding:70px 0;

    }

    .project{

        gap:30px;

        margin-bottom:60px;

    }

    .project-image{

        border-radius:18px;

    }

    .project-content h3{

        font-size:30px;

    }

    .project-content p{

        font-size:15px;

    }

}