/* ==========================================
RESPONSIVE.CSS
Roxan Airconditioning Services v2
========================================== */

/* ==========================================
LARGE DEVICES
========================================== */

@media (max-width:1200px){

.container{
    width:92%;
}

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

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

}


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

@media (max-width:992px){

header .container{
    height:75px;
}

.hero{
    min-height:auto;
    padding:160px 0 100px;
}

.hero .container{
    grid-template-columns:1fr;
    text-align:center;
    gap:50px;
}

.hero-content p{
    margin:auto auto 35px;
}

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

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

.hero-image img{
    max-width:450px;
}

.page-hero{
    padding:150px 0 80px;
}

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

.services-grid,
.features-grid,
.stats-grid,
.gallery-grid,
.process-grid,
.testimonial-grid{

    grid-template-columns:repeat(2,1fr);

}

.footer-grid{

    grid-template-columns:repeat(2,1fr);

}

}


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

@media (max-width:768px){

.menu-toggle{

    display:block;

}

nav{

    position:fixed;

    top:80px;

    left:-100%;

    width:100%;

    background:#fff;

    transition:.35s;

    box-shadow:0 15px 30px rgba(0,0,0,.08);

}

nav.active{

    left:0;

}

.nav-links{

    flex-direction:column;

    padding:30px;

    gap:25px;

}

.header-actions .call-btn-header{

    display:none;

}

section{

    padding:80px 0;

}

.section-title{

    margin-bottom:50px;

}

.section-title h2{

    font-size:34px;

}

.hero-content h1{

    font-size:42px;

}

.hero-content p{

    font-size:18px;

}

.cta h2{

    font-size:38px;

}

.services-grid,
.features-grid,
.stats-grid,
.gallery-grid,
.process-grid,
.testimonial-grid,
.footer-grid{

    grid-template-columns:1fr;

}

.page-hero h1{

    font-size:36px;

}

}


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

@media (max-width:576px){

.container{

    width:94%;

}

.hero{

    padding:140px 0 80px;

}

.hero-content h1{

    font-size:34px;

    line-height:1.25;

}

.hero-content p{

    font-size:16px;

}

.hero-buttons{

    flex-direction:column;

}

.hero-buttons .btn{

    width:100%;

}

.hero-features{

    flex-direction:column;

    gap:20px;

    align-items:flex-start;

}

.section-title h2{

    font-size:28px;

}

.page-hero h1{

    font-size:30px;

}

.page-hero p{

    font-size:16px;

}

.cta h2{

    font-size:30px;

}

.cta p{

    font-size:16px;

}

.call-btn,
.messenger-btn{

    width:55px;

    height:55px;

    font-size:22px;

}

.back-to-top{

    width:50px;

    height:50px;

}

.logo img{

    width:55px;

    height:55px;

}

.logo-text h2{

    font-size:20px;

}

.logo-text span{

    font-size:12px;

}

}


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

@media (max-width:400px){

.hero-content h1{

    font-size:30px;

}

.section-title h2{

    font-size:26px;

}

.btn{

    padding:14px 24px;

    font-size:15px;

}

}