/* ==========================================
RESPONSIVE CSS
Mahesh Dada Landge Website
========================================== */

/* ==========================================
LARGE DESKTOP
========================================== */

@media (max-width:1400px){

.container{
    width:92%;
}

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

}

/* ==========================================
LAPTOP
========================================== */

@media (max-width:1200px){

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

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

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

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

}

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

@media (max-width:992px){

.desktop-menu,
.nav-actions{
    display:none;
}

.menu-toggle{
    display:block;
}

.navbar-container{
    height:75px;
}

.logo img{
    width:100px;
}

.hero{
    min-height:auto;
    padding:100px 0;
    background-position:center;
}

.hero-grid{
    display:block;
    text-align:center;
}

.hero-content{
    max-width:100%;
}

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

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

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

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

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

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

.project-grid,
.testimonial-grid,
.media-grid,
.about-grid{
    grid-template-columns:1fr;
}

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

}

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

@media (max-width:768px){

.container{
    width:94%;
}

.topbar{
    padding:8px 0;
    font-size:12px;
}

.topbar .container{
    flex-direction:column;
    gap:8px;
}

.topbar-left,
.topbar-right{
    justify-content:center;
    flex-wrap:wrap;
}

.navbar-container{
    height:70px;
}

.logo img{
    width:85px;
}

.hero{
    min-height:650px;
    padding:80px 0;
    background-position:65% center;
}

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

.hero h2{
    font-size:20px;
}

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

.hero-badge{
    font-size:13px;
    padding:8px 14px;
}

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

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

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

.service-grid,
.services-grid,
.department-grid,
.project-grid,
.testimonial-grid,
.media-grid{
    grid-template-columns:1fr;
}

.section-title{
    margin-bottom:40px;
}

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

.about-grid h2{
    font-size:32px;
}

.project-card img,
.media-card img{
    height:220px;
}

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

.social-icons{
    justify-content:center;
}

.appointment,
.services,
.projects,
.media-home,
.about-home,
.testimonials,
.quick-services{
    padding:70px 0;
}

}

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

@media (max-width:576px){

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

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

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

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

.project-card img,
.media-card img{
    height:200px;
}

.whatsapp-float{
    width:55px;
    height:55px;
    font-size:28px;
}

}

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

@media (max-width:400px){

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

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

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

.about-grid h2{
    font-size:24px;
}

.department-card,
.service-card{
    padding:20px;
}

}