/* ================================
   LARGE DEVICES
================================ */

@media(max-width:1200px){

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

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

    .hero-content h1{
        font-size:56px;
    }

}

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

@media(max-width:992px){

    .section-padding{
        padding:80px 0;
    }

    .header{
        padding:18px 5%;
    }

    .navbar{
        position:fixed;
        top:0;
        right:-100%;
        width:300px;
        height:100vh;
        background:#081c3a;
        display:flex;
        justify-content:center;
        align-items:center;
        transition:0.5s ease;
        z-index:1000;
    }

    .navbar.active{
        right:0;
    }

    .navbar ul{
        flex-direction:column;
        text-align:center;
        gap:35px;
    }

    .navbar ul li a{
        font-size:18px;
    }

    .menu-toggle{
        display:block;
        z-index:1100;
    }

    .header-actions{
        display:none;
    }

    .hero{
        padding:0 20px;
        text-align:center;
    }

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

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

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

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

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

    .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:40px;
    }

    .cta-content h2{
        font-size:42px;
    }

}

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

@media(max-width:768px){

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

    .hero{
        height:100vh;
    }

    .hero-content h1{
        font-size:38px;
        line-height:1.3;
    }

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

    .hero-buttons{
        flex-direction:column;
        align-items:center;
    }

    .primary-btn,
    .secondary-btn,
    .contact-btn{
        width:220px;
        text-align:center;
    }

    .stats{
        flex-direction:column;
    }

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

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

    .service-card img{
        height:380px;
    }

    .cta-content h2{
        font-size:34px;
        line-height:1.4;
    }

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

    .footer{
        text-align:center;
    }

    .footer-contact i{
        margin-right:6px;
    }

    .whatsapp-btn{
        width:55px;
        height:55px;
        font-size:24px;
    }

}

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

@media(max-width:576px){

    .header{
        padding:16px 20px;
    }

    .logo img{
        width:130px;
    }

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

    .hero-content p{
        font-size:14px;
    }

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

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

    .service-overlay h3{
        font-size:22px;
    }

    .service-overlay p{
        font-size:13px;
    }

    .why-card{
        padding:35px 25px;
    }

    .why-card i{
        font-size:38px;
    }

    .cta-section{
        padding:90px 20px;
    }

    .cta-content h2{
        font-size:28px;
    }

    .footer{
        padding-top:70px;
    }

    .footer-about img{
        margin:auto auto 20px;
    }

}

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

@media(max-width:400px){

    .hero-content h1{
        font-size:26px;
    }

    .primary-btn,
    .secondary-btn{
        width:100%;
    }

    .navbar{
        width:100%;
    }

}