/* ===========================
   TABLET (992px)
=========================== */

@media (max-width:992px){

    .hero-grid,
    .about-grid,
    .contact-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

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

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

    .hero{
        text-align:center;
    }

    .hero-left{
        text-align:center;
    }

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

    .hero-right{
        order:-1;
    }

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

    .section-title{
        font-size:38px;
    }
}

/* ===========================
   MOBILE (768px)
=========================== */

@media (max-width:768px){

    .navbar{
        padding:15px 0;
    }

    .nav-menu{
    display:block;
}

.nav-links{
    display:none;
}

.nav-links.active{
    display:flex !important;
    flex-direction:column;
    position:fixed;
    top:70px;
    right:0;
    width:260px;
    height:calc(100vh - 70px);
    background:#fff;
    z-index:9999;
    padding:30px;
}
    .nav-btn{
        display:none;
    }

    .hamburger{
        display:flex;
    }

    .hero{
        padding:30px 0 50px;
    }

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

    .hero-grid{
    display:flex;
    flex-direction:column;
}

.hero-left{
    order:1;
}

.hero-right{
    order:2;
}

.hero-right img{
    max-width:100%;
    margin:auto;
}

.hero-stats{
    justify-content:center;
    margin-top:20px;
}

    .hero p{
        font-size:16px;
    }

    .hero-buttons{
        flex-direction:column;
        width:100%;
    }

    .hero-btn,
    .btn{
        width:100%;
    }

    .hero-stats{
        flex-direction:column;
        align-items:center;
        gap:20px;
    }

    .services-grid,
    .portfolio-grid,
    .industry-grid,
    .footer-grid{
        grid-template-columns:1fr;
    }

    .trust-container{
        flex-direction:column;
        gap:30px;
    }

    .contact-form{
        padding:25px;
    }

    .about-content h2{
        font-size:36px;
    }

    .section-title{
        font-size:34px;
    }
}

/* ===========================
   SMALL MOBILE (480px)
=========================== */

@media (max-width:480px){

    .container{
        width:92%;
    }

    .logo{
        font-size:26px;
    }

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

    .hero-tag{
        font-size:12px;
    }

    .hero-btn,
    .btn{
        font-size:15px;
        padding:15px;
    }

    .section-title{
        font-size:28px;
    }

    .about-content h2{
        font-size:30px;
    }

    .contact h2{
        font-size:30px;
    }

    .whatsapp-float{
        width:55px;
        height:55px;
    }

    .whatsapp-float i{
        font-size:30px;
    }
}