/*==========================================
Responsive CSS
==========================================*/

/* ===========================
Large Laptop
=========================== */

@media (max-width:1200px){

.container{

    width:95%;

}

.hero h1{

    font-size:52px;

}

.section-title h2{

    font-size:38px;

}

}


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

@media (max-width:991px){

.section{

    padding:80px 0;

}

/* Header */

.menu-btn{

    display:block;

}

.call-btn{

    display:none;

}

.navbar{

    position:fixed;

    top:75px;

    left:-100%;

    width:280px;

    height:calc(100vh - 85px);

    background:#111;

    transition:.35s;

    padding:40px 25px;

}

.navbar.active{

    left:0;

}

.navbar ul{

    flex-direction:column;

    gap:25px;

}

.navbar ul li{

    border-bottom:1px solid rgba(255,255,255,.08);

    padding-bottom:15px;

}

.navbar a{

    font-size:18px;

}

/* Hero */

.hero{

    padding-top:150px;

}

.hero-container{

    grid-template-columns:1fr;

    text-align:center;

}

.hero p{

    margin:auto auto 30px;

}

.hero-btns{

    justify-content:center;

}

.hero-feature{

    justify-content:center;

}

.hero-image{

    margin-top:50px;

}

.hero-image img{

    max-width:600px;

    margin:auto;

}

/* About */

.about-grid{

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

}

/* Products */

.product-grid{

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

}

/* Services */

.service-grid{

    grid-template-columns:1fr;

}

/* Process */

.process-grid{

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

}

.step::after{

    display:none;

}

/* Gallery */

.gallery-grid{

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

}

/* Contact */

.contact-grid{

    grid-template-columns:1fr;

}

.contact-form{

    margin-top:40px;

}

}


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

@media (max-width:768px){

.hero h1{

    font-size:42px;

}

.section-title h2{

    font-size:34px;

}

.hero-btns{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.primary-btn,

.secondary-btn{

    width:100%;

}

.hero-feature{

    flex-direction:column;

}

.about-grid,

.product-grid,

.process-grid,

.gallery-grid{

    grid-template-columns:1fr;

}

.contact-info h2{

    font-size:34px;

}

.contact-form{

    padding:30px;

}

footer h3{

    font-size:28px;

}

}


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

@media (max-width:576px){

.header{

    padding:0;

}

.nav-container{

    height:75px;

}

.logo h2{

    font-size:24px;

}

.logo span{

    font-size:11px;

}

.hero{

    padding-top:130px;

}

.hero h1{

    font-size:34px;

    line-height:1.3;

}

.hero p{

    font-size:16px;

}

.tag{

    font-size:13px;

}

.section{

    padding:70px 0;

}

.section-title{

    margin-bottom:45px;

}

.section-title h2{

    font-size:30px;

}

.about-card,

.product-card,

.service-card,

.step{

    padding:30px 20px;

}

.about-card i{

    width:70px;

    height:70px;

    line-height:70px;

    font-size:26px;

}

.product-card img{

    height:220px;

}

.gallery-grid img{

    height:220px;

}

.contact-form{

    padding:25px;

}

.contact-form input,

.contact-form textarea{

    padding:15px;

}

.whatsapp{

    width:55px;

    height:55px;

    font-size:28px;

    right:15px;

    bottom:15px;

}

.top-btn{

    width:50px;

    height:50px;

    left:15px;

    bottom:15px;

}

footer{

    padding:45px 15px;

}

.footer-social{

    gap:12px;

}

.footer-social a{

    width:42px;

    height:42px;

    font-size:16px;

}

}