/* ========================================
   MARAGAMO Tech Solutions
   CSS: responsive.css
   Version: 2.0
======================================== */

/* ========================================
   LARGE DESKTOP
======================================== */

@media (max-width:1400px){

    /* GLOBAL */
    .container{
        width:95%;
    }

}

/* ========================================
   LARGE LAPTOP
======================================== */

@media (max-width:1200px){

    /* GLOBAL */
    .container{
        width:92%;
    }

    /* HERO */
    .hero h1{
        font-size:60px;
    }

    .hero-content{
        width:65%;
    }

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

    /* SERVICES */
    .service-grid{
        grid-template-columns:repeat(2,1fr);
    }

    /* STATS */
    .stats-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

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

@media (max-width:992px){

    /* HERO */

    .hero{
        padding:140px 0 80px;
        min-height:auto;
        text-align:center;
        padding:160px 0 100px;
    }

    .hero-container{
        flex-direction:column;
        text-align:center;
    }

    .hero-content{
        max-width:100%;
        width:100%;
    }

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

    .hero p{
        max-width:700px;
        margin:auto;
    }

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

    /* SERVICES */

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

    /* STATS */

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

}

/* ========================================
   MOBILE
======================================== */

/* ========================================
   MOBILE
======================================== */

@media (max-width:768px){

    /* ===============================
       BUTTONS
    =============================== */

    .btn-primary{

        margin-top:20px;
        width:240px;
        text-align:center;

    }

    .btn-outline{

        width:240px;
        text-align:center;

    }

    /* ===============================
       HERO
    =============================== */

    .hero{

        padding:180px 20px 70px;
        min-height:auto;

    }

    .hero h1{

        font-size:42px;
        line-height:1.2;
        text-align:center;

    }

    .hero p{

        font-size:16px;
        text-align:center;

    }

    .hero-buttons{

        flex-direction:column;
        align-items:center;
        width:100%;

    }

    .hero-buttons a{

        width:100%;
        max-width:240px;

    }

    /* ===============================
       TRUSTED
    =============================== */

    .trusted-logos{

        gap:25px;

    }

    /* ===============================
       SERVICES
    =============================== */

    .service-grid{

        grid-template-columns:1fr;

    }

    /* ===============================
       STATS
    =============================== */

    .stats-grid{

        grid-template-columns:1fr;

    }

    .section-title{

        font-size:40px;

    }

}


/* ========================================
   SMALL MOBILE
======================================== */

@media (max-width:576px){

    body{
        font-size:14px;
    }

    .navbar{
        padding:15px 0;
    }

    .logo a{
        font-size:24px;
    }

    .logo span{
        letter-spacing:2px;
    }

    .nav-links{
        gap:12px;
    }

    .btn-primary{
        width:100%;
        padding:14px;
    }

    .hero{
        padding-top:190px;
    }

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

    .hero-tag{
        font-size:13px;
        letter-spacing:2px;
    }

    .hero p{
        font-size:15px;
        line-height:1.7;
    }

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

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

    .stats h2{
        font-size:48px;
    }

}