/* ==========================================================
   TRINITY ECUADOR
   RESPONSIVE.CSS
==========================================================*/

/*==========================================================
  1400px
==========================================================*/

@media (max-width:1400px){

    .container{

        max-width:1200px;

    }

    .hero-content h1{

        font-size:60px;

    }

}

/*==========================================================
  1200px
==========================================================*/

@media (max-width:1200px){

    .container{

        padding-left:30px;

        padding-right:30px;

    }

    .hero-container{

        gap:50px;

    }

    .hero-content h1{

        font-size:52px;

    }

    .section-header h2{

        font-size:42px;

    }

    .services-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .why-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .software-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .process-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .stats-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .testimonial-slider{

        grid-template-columns:repeat(2,1fr);

    }

    .footer-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

/*==========================================================
  992px
==========================================================*/

@media (max-width:992px){

    .section{

        padding:90px 0;

    }

    .hero{

        min-height:auto;

        padding:170px 0 100px;

    }

    .hero-container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-content p{

        margin-left:auto;

        margin-right:auto;

    }

    .hero-buttons{

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero-stats{

        justify-content:center;

        flex-wrap:wrap;

        gap:40px;

    }

    .hero-image{

        margin-top:60px;

    }

    .about-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .academy-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .academy-content{

        text-align:center;

    }

    .academy-list{

        grid-template-columns:repeat(2,1fr);

    }

    .section-header h2{

        font-size:38px;

    }

}

/*==========================================================
  768px
==========================================================*/

@media (max-width:768px){

    .container{

        padding-left:20px;

        padding-right:20px;

    }

    .section{

        padding:80px 0;

    }

    .section-header{

        margin-bottom:50px;

    }

    .section-header h2{

        font-size:34px;

    }

    .hero{

        padding-top:140px;

    }

    .hero-content h1{

        font-size:42px;

    }

    .hero-content p{

        font-size:17px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .hero-buttons .btn{

        width:100%;

        max-width:340px;

    }

    .hero-stats{

        flex-direction:column;

        gap:30px;

    }

    .stat::after{

        display:none;

    }

    .services-grid{

        grid-template-columns:1fr;

    }

    .why-grid{

        grid-template-columns:1fr;

    }

    .software-grid{

        grid-template-columns:1fr;

    }

    .process-grid{

        grid-template-columns:1fr;

    }

    .testimonial-slider{

        grid-template-columns:1fr;

    }

    .stats-grid{

        grid-template-columns:repeat(2,1fr);

        gap:30px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

    .cta-box{

        padding:60px 35px;

    }

    .cta-box h2{

        font-size:34px;

    }

}

/*==========================================================
  576px
==========================================================*/

@media (max-width:576px){

    .hero-content h1{

        font-size:34px;

    }

    .section-header h2{

        font-size:30px;

    }

    .hero-label{

        font-size:12px;

    }

    .about-list{

        margin:30px 0;

    }

    .academy-list{

        grid-template-columns:1fr;

    }

    .stats-grid{

        grid-template-columns:1fr;

    }

    .stats h2{

        font-size:46px;

    }

    .software-card img{

        height:220px;

    }

}

/*==========================================================
  420px
==========================================================*/

@media (max-width:420px){

    .container{

        padding-left:16px;

        padding-right:16px;

    }

    .section{

        padding:70px 0;

    }

    .hero{

        padding-top:120px;

    }

    .hero-content h1{

        font-size:30px;

        line-height:1.2;

    }

    .hero-content p{

        font-size:16px;

    }

    .btn{

        height:54px;

        font-size:14px;

        padding:0 22px;

    }

    .service-card{

        padding:35px 25px;

    }

    .why-card{

        padding:35px 25px;

    }

    .process-card{

        padding:35px 25px;

    }

    .testimonial-card{

        padding:35px 25px;

    }

    .cta-box{

        padding:45px 25px;

    }

    .cta-box h2{

        font-size:28px;

    }

}

/*==========================================================
  LANDSCAPE
==========================================================*/

@media (max-height:700px){

    .hero{

        min-height:auto;

        padding:180px 0 120px;

    }

}

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

@media (min-width:1800px){

    .container{

        max-width:1450px;

    }

    .hero-content h1{

        font-size:74px;

    }

    .section-header h2{

        font-size:56px;

    }

}