/* ============ Tablet ============ */

/* ============ Mobile ============ */

@media (max-width:768px){

.container{
width:92%;
}

nav ul{
flex-direction:column;
text-align:center;
gap:15px;
}

.logo{
text-align:center;
margin-bottom:10px;
}

.hero{
height:85vh;
padding:20px;
}

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

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

.btn{
padding:14px 28px;
font-size:15px;
}

section{
padding:60px 0;
}

section h2{
font-size:30px;
}

.service-box{
grid-template-columns:1fr;
}

.card{
padding:25px;
}

.call-btn{
display:none;
}

}

/* ============ Small Mobile ============ */

@media (max-width:480px){

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

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

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

section h2{
font-size:26px;
}

}

/*================ RESPONSIVE =================*/

@media (max-width:992px){

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

.hero-left,
.hero-right{
    width:100%;
}

.hero-right img{
    max-width:380px;
    width:100%;
}

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

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

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

.search-box{
    max-width:100%;
}

}

@media (max-width:768px){

.hero{
    padding:120px 20px 60px;
}

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

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

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

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

.search-box input{
    font-size:15px;
}

}

@media (max-width:480px){

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

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

.hero-right img{
    max-width:280px;
}

}

@media (max-width:768px){

    .hero{
        padding:115px 18px 45px;
    }

    .hero-content{
        gap:20px;
    }

    .hero h1{
        font-size:34px;
        line-height:1.2;
    }

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

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

    .hero-buttons{
        gap:12px;
    }

    .btn-primary,
    .btn-secondary{
        width:100%;
        padding:13px 20px;
        font-size:14px;
    }

    .service-categories{
        padding:55px 0;
    }

    .service-grid{
        grid-template-columns:1fr 1fr;
        gap:14px;
    }

    .service-card{
        padding:20px 10px;
    }

    .service-card img{
        width:65px;
        height:65px;
    }

    .service-card h3{
        font-size:16px;
    }

    .service-card p{
        font-size:11px;
    }

    .service-card a{
        padding:9px 17px;
        font-size:11px;
    }
}

@media (max-width: 768px){

    header .container{
        padding:10px 0;
    }

    .nav-container{
        flex-wrap:wrap;
    }

    .nav-links{
        width:100%;
        justify-content:center;
        gap:15px;
        order:3;
        flex-wrap:wrap;
    }

    .nav-links a{
        font-size:13px;
    }

    .nav-buttons{
        gap:6px;
    }

    .call-btn{
        display:none;
    }

    .whatsapp-btn{
        width:38px;
        height:38px;
    }

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

    .logo span{
        font-size:11px;
    }
}

@media (max-width:768px){

    .navbar{
        width:100%;
        padding:12px 10px;
    }

    .nav-container{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
    }

    .logo{
        width:100%;
        justify-content:center;
        margin-bottom:10px;
    }

    .nav-links{
        display:flex !important;
        width:100%;
        justify-content:center;
        align-items:center;
        gap:14px;
        flex-wrap:wrap;
        order:2;
    }

    .nav-links a{
        font-size:13px;
        white-space:nowrap;
    }

    .nav-buttons{
        display:none !important;
    }

    .menu-toggle{
        display:none !important;
    }
}