/* ===========================
   Large Tablets & Small Laptops
=========================== */
@media (max-width: 992px) {

    .navbar{
        padding:15px 20px;
    }

    .nav-links{
        display:none;
    }

    .hamburger{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .hero{
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
        gap:50px;
        padding:60px 20px;
    }

    .hero-left{
        width:100%;
    }

    .hero-right{
        width:100%;
        display:flex;
        justify-content:center;
    }

    .hero-right img{
        width:350px;
        max-width:90%;
        height:auto;
        margin-top:20px;
    }

    .hero h1{
        font-size:3rem;
        line-height:1.2;
    }

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

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

/* ===========================
   Tablets
=========================== */
@media (max-width:768px){

    .hero{
        padding:50px 20px;
        gap:40px;
    }

    .hero h1{
        font-size:2.6rem;
    }

    .hero p{
        font-size:1rem;
    }

    .hero-right img{
        width:300px;
    }

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

/* ===========================
   Mobile Phones
=========================== */
@media (max-width:576px){

    .hero{
        padding:40px 15px;
    }

    .hero h1{
        font-size:2.2rem;
        line-height:1.3;
    }

    .hero p{
        font-size:1rem;
        line-height:1.8;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
        width:100%;
        gap:15px;
    }

    .hero-buttons a,
    .hero-buttons button{
        width:100%;
        max-width:280px;
    }

    .hero-right img{
        width:250px;
        max-width:90%;
    }
}

/* ===========================
   Small Mobile Phones
=========================== */
@media (max-width:400px){

    .hero{
        padding:30px 15px;
    }

    .hero h1{
        font-size:1.8rem;
    }

    .hero p{
        font-size:.95rem;
    }

    .hero-right img{
        width:210px;
    }

    .hero-buttons a,
    .hero-buttons button{
        max-width:240px;
        padding:12px 18px;
        font-size:.9rem;
    }
}

/* ===========================
   Extra Small Devices
=========================== */
@media (max-width:320px){

    .hero h1{
        font-size:1.6rem;
    }

    .hero p{
        font-size:.9rem;
    }

    .hero-right img{
        width:180px;
    }

    .hero-buttons a,
    .hero-buttons button{
        width:100%;
        max-width:100%;
    }
}