/* ===========================
   TABLET
=========================== */
@media (max-width:992px){
    .hero-content,
    .about-content{
        flex-direction:column;
        text-align:center;
    }
    .hero h1{
        font-size:42px;
    }
    .hero-button{
        justify-content:center;
    }
    .product-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .contact-box{
        grid-template-columns:1fr;
    }
}
/* ===========================
   MOBILE
=========================== */
@media (max-width:768px){
    .header .container{
        flex-direction:column;
        height:auto;
        padding:15px 0;
    }
    .menu-toggle{
        display:block;
    }
    .navbar{
    position:absolute;
    top:85px;
    right:0;
    left:auto;
    width:280px;
    background:#fff;
    display:none;
    flex-direction:column;
    padding:20px;
    border-radius:0 0 0 12px;
    box-shadow:0 10px 20px rgba(0,0,0,.15);
}
    .navbar.active{
        display:flex;
    }
    .navbar a{
        margin:10px 0;
    }
    .hero{
        padding:140px 0 60px;
    }
    .hero h1{
        font-size:32px;
    }
    .hero p{
        font-size:16px;
    }
    .hero-counter{
        flex-direction:column;
        gap:20px;
    }
    .about h2,
    .section-heading h2{
        font-size:30px;
    }
    .product-grid{
        grid-template-columns:1fr;
    }
    .contact-box{
        grid-template-columns:1fr;
    }
    .footer-grid{
        grid-template-columns:1fr;
        text-align:center;
    }
    .footer-logo{
        margin:auto auto 20px;
    }
}   
/* =========================
   MOBILE TYPOGRAPHY FIX
========================= */
@media (max-width: 768px) {
    h1 {
        font-size: 26px;
        line-height: 1.3;
    }
    h2 {
        font-size: 22px;
    }
    p {
        font-size: 14px;
    }
    section {
        padding: 60px 15px;
    }
}