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

@media (max-width:1100px){

    .hero-grid,
    .about-grid,
    .contact-grid{

        grid-template-columns:1fr;
        gap:60px;

    }

    .hero{

        padding-top:120px;

    }

    .hero-content{

        text-align:center;

    }

    .hero p{

        margin:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-stats{

        justify-content:center;

    }

    .hero-image{

        max-width:700px;
        margin:auto;

    }

    .services-grid{

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

    }

    .timeline{

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

    }

    .tech-grid{

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

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

}

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

@media (max-width:768px){

    .navbar .container{

        flex-direction:column;

        height:auto;

        padding:20px 0;

    }

    .nav-links{

        flex-wrap:wrap;

        justify-content:center;

        gap:18px;

        margin:20px 0;

    }

    .btn-nav{

        width:100%;

        text-align:center;

    }

    section{

        padding:80px 0;

    }

    .hero h1{

        font-size:2.5rem;

    }

    .hero p{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

        text-align:center;

    }

    .hero-stats{

        flex-direction:column;

        gap:20px;

        text-align:center;

    }

    .about-content h2{

        font-size:2rem;

    }

    .section-header h2{

        font-size:2rem;

    }

    .services-grid{

        grid-template-columns:1fr;

    }

    .timeline{

        grid-template-columns:1fr;

    }

    .tech-grid{

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

    }

    .cta-box{

        padding:50px 30px;

    }

    .cta-box h2{

        font-size:2rem;

    }

    input,
    textarea{

        width:100%;

    }

}

/* ===========================
   SMALL DEVICES
=========================== */

@media (max-width:480px){

    .container{

        width:92%;

    }

    .hero{

        min-height:auto;

        padding-top:150px;

        padding-bottom:80px;

    }

    .hero h1{

        font-size:2rem;

    }

    .badge{

        font-size:.7rem;

    }

    .hero-image{

        margin-top:30px;

    }

    .tech-grid{

        grid-template-columns:1fr;

    }

}