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

@media (max-width:1200px){

    .container{
        padding:0 24px;
    }

    .nav-content{
        gap:30px;
    }

    .menu{
        gap:35px;
    }

    .hero-content{
        gap:40px;
    }

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

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

    .hero-right img{
        height:480px;
    }

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

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

@media (max-width:992px){

    .contact-btn{
        display:none;
    }

    .nav-content{
        justify-content:space-between;
    }

    .menu{
        gap:25px;
    }

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

    .hero-right img{
        height:400px;
    }
}

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

@media (max-width:768px){

    .nav-content{
        flex-direction:column;
        gap:20px;
        padding:20px 0;
    }

    .menu{
        display:flex;
        gap:20px;
        flex-wrap:wrap;
        justify-content:center;
    }

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

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

    .hero-right img{
        width:100%;
        max-width:500px;
        height:auto;
    }

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

    .footer-content{
        flex-direction:column;
        gap:20px;
        text-align:center;
    }
}

/* =========================
   480px
========================= */

@media (max-width:480px){

    .container{
        padding:0 16px;
    }

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

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

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

    .hero-buttons{
        flex-direction:column;
    }

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