/*==================================================
RESPONSIVE.CSS
Part 1
Large Desktop • Laptop • Tablet
==================================================*/

/*=============================
1400px
=============================*/

@media (max-width:1400px){

.container{

max-width:1200px;

}

.hero h1{

font-size:52px;

}

.section-title{

font-size:40px;

}

.cta-box{

padding:50px;

}

}

/*=============================
1200px
=============================*/

@media (max-width:1200px){

.hero{

padding:100px 0;

}

.hero h1{

font-size:46px;

}

.hero p{

font-size:17px;

}

.quote-box{

padding:30px;

}

.navbar-brand img{

height:60px;

}

.service-card img{

height:220px;

}

.section-title{

font-size:36px;

}

.about h2{

font-size:36px;

}

.process-card{

padding:35px 20px;

}

.counter-box h2{

font-size:44px;

}

.google-review h2{

font-size:34px;

}

.cta-box h2{

font-size:36px;

}

}

/*=============================
992px
=============================*/

@media (max-width:992px){

.topbar{

display:none;

}

.header{

position:relative;

}

.navbar{

padding:15px 0;

}

.navbar-collapse{

background:#fff;

margin-top:20px;

padding:20px;

border-radius:12px;

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

}

.navbar-nav{

text-align:center;

}

.navbar-nav .nav-link{

margin:12px 0;

}

.navbar .btn{

width:100%;

margin-top:15px;

}

.hero{

text-align:center;

padding:90px 0;

}

.hero h1{

font-size:40px;

}

.hero-buttons{

justify-content:center;

}

.hero-features{

justify-content:center;

margin-bottom:50px;

}

.quote-box{

margin-top:40px;

}

.about{

text-align:center;

}

.about img{

margin-bottom:40px;

}

.about .btn{

margin-top:30px;

}

.counter-box{

margin-bottom:30px;

}

.process-card{

margin-bottom:30px;

}

.service-card{

margin-bottom:30px;

}

.why-card{

margin-bottom:30px;

}

.cta-box{

text-align:center;

padding:45px 30px;

}

.cta-box .btn{

margin-top:15px;

}

.footer{

text-align:center;

}

.footer-logo{

margin:auto auto 25px;

}

.footer-social{

justify-content:center;

margin-bottom:30px;

}

.footer-links{

margin-bottom:30px;

}

.google-review{

text-align:center;

}

.google-review .btn{

margin-top:25px;

}

}

/*=============================
991px & UP
=============================*/

@media (min-width:991px){

.navbar-expand-lg .navbar-nav{

align-items:center;

}

.quote-box{

margin-left:25px;

}

}

/*==================================================
END OF PART 1
==================================================*/
/*==================================================
RESPONSIVE.CSS
Part 2
Tablet (768px)
==================================================*/

/*=============================
768px
=============================*/

@media (max-width:768px){

.container{

padding-left:20px;

padding-right:20px;

}

.hero{

padding:70px 0;

}

.hero h1{

font-size:34px;

line-height:1.3;

}

.hero p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

gap:15px;

}

.hero-buttons .btn{

width:100%;

max-width:320px;

}

.hero-features{

flex-direction:column;

align-items:center;

gap:15px;

}

.quote-box{

padding:25px;

}

.quote-box h3{

font-size:26px;

}

.section-title{

font-size:30px;

}

.section-subtitle{

font-size:14px;

}

.service-card img{

height:210px;

}

.service-content{

padding:25px;

}

.service-content h4{

font-size:22px;

}

.about{

padding:70px 0;

}

.about h2{

font-size:30px;

}

.about .row h3{

font-size:34px;

}

.why-card{

padding:30px 20px;

}

.why-card h5{

font-size:20px;

}

.counter-section{

padding:70px 0;

}

.counter-box i{

font-size:45px;

}

.counter-box h2{

font-size:38px;

}

.process{

padding:70px 0;

}

.process-card{

padding:35px 20px;

}

.process-card i{

width:75px;

height:75px;

font-size:28px;

}

.process-card h4{

font-size:20px;

}

.testimonials{

padding:70px 0;

}

.testimonial-card{

padding:30px 20px;

margin:10px;

}

.google-review{

padding:60px 0;

}

.google-review h2{

font-size:28px;

}

.google-review p{

font-size:16px;

}

.cta-section{

padding:70px 0;

}

.cta-box{

padding:35px 25px;

}

.cta-box h2{

font-size:30px;

}

.cta-box p{

font-size:16px;

}

.faq{

padding:70px 0;

}

.accordion-button{

font-size:16px;

padding:18px 20px;

}

.footer{

padding:60px 0 20px;

}

.footer h5{

margin-top:25px;

}

.whatsapp-btn{

width:55px;

height:55px;

font-size:26px;

right:20px;

bottom:20px;

}

.call-btn{

width:55px;

height:55px;

font-size:22px;

right:20px;

bottom:90px;

}

#backToTop{

width:50px;

height:50px;

left:20px;

bottom:20px;

font-size:18px;

}

}
/*==================================================
RESPONSIVE.CSS
Part 3
Mobile (576px & Below)
==================================================*/

@media (max-width:576px){

/* Container */

.container{

padding-left:15px;

padding-right:15px;

}

/* Typography */

.section-title{

font-size:26px;

line-height:1.3;

}

.section-subtitle{

font-size:13px;

letter-spacing:1px;

}

body{

font-size:15px;

}

/* Hero */

.hero{

padding:60px 0;

}

.hero-tag{

font-size:13px;

padding:8px 18px;

}

.hero h1{

font-size:30px;

line-height:1.25;

margin-bottom:20px;

}

.hero p{

font-size:15px;

margin-bottom:25px;

}

.hero-buttons{

gap:12px;

}

.hero-buttons .btn{

width:100%;

font-size:15px;

padding:14px;

}

.hero-features{

gap:12px;

font-size:14px;

}

/* Quote Form */

.quote-box{

padding:20px;

margin-top:30px;

}

.quote-box h3{

font-size:22px;

}

.quote-box .form-control,

.quote-box .form-select{

padding:12px;

font-size:14px;

}

.quote-box button{

padding:14px;

font-size:16px;

}

/* Services */

.services{

padding:60px 0;

}

.service-card{

margin-bottom:25px;

}

.service-card img{

height:190px;

}

.service-content{

padding:22px;

}

.service-content i{

width:65px;

height:65px;

font-size:24px;

margin-top:-55px;

}

.service-content h4{

font-size:20px;

}

/* About */

.about{

padding:60px 0;

}

.about h2{

font-size:28px;

}

.about .row h3{

font-size:28px;

}

.about img{

margin-bottom:30px;

}

/* Why Choose */

.why-us{

padding:60px 0;

}

.why-card{

padding:25px 18px;

}

.why-card i{

width:70px;

height:70px;

font-size:28px;

}

.why-card h5{

font-size:18px;

}

/* Counter */

.counter-section{

padding:60px 0;

}

.counter-box{

margin-bottom:25px;

}

.counter-box i{

font-size:42px;

}

.counter-box h2{

font-size:34px;

}

.counter-box p{

font-size:15px;

}

/* Process */

.process{

padding:60px 0;

}

.process-card{

padding:30px 20px;

margin-bottom:25px;

}

.step-number{

font-size:30px;

}

.process-card i{

width:70px;

height:70px;

font-size:26px;

}

.process-card h4{

font-size:18px;

}

/* Testimonials */

.testimonials{

padding:60px 0;

}

.testimonial-card{

padding:25px 18px;

}

.testimonial-card p{

font-size:15px;

}

/* Google Review */

.google-review{

padding:50px 0;

text-align:center;

}

.google-review h2{

font-size:24px;

}

.google-review p{

font-size:15px;

}

/* CTA */

.cta-section{

padding:60px 0;

}

.cta-box{

padding:30px 20px;

text-align:center;

}

.cta-box h2{

font-size:26px;

}

.cta-box p{

font-size:15px;

}

.cta-box .btn{

width:100%;

margin-top:12px;

}

/* FAQ */

.faq{

padding:60px 0;

}

.accordion-button{

font-size:15px;

padding:16px;

}

.accordion-body{

font-size:14px;

padding:16px;

}

/* Footer */

.footer{

padding:50px 0 20px;

text-align:center;

}

.footer-logo{

max-width:150px;

margin:0 auto 20px;

}

.footer-social{

justify-content:center;

}

/* Floating Buttons */

.whatsapp-btn,

.call-btn{

width:50px;

height:50px;

font-size:22px;

right:15px;

}

.call-btn{

bottom:80px;

}

.whatsapp-btn{

bottom:15px;

}

#backToTop{

width:45px;

height:45px;

left:15px;

bottom:15px;

font-size:16px;

}

}

/*==================================================
EXTRA SMALL DEVICES
360px & BELOW
==================================================*/

@media (max-width:360px){

.hero h1{

font-size:26px;

}

.section-title{

font-size:22px;

}

.quote-box{

padding:18px;

}

.service-content{

padding:18px;

}

.cta-box{

padding:22px 16px;

}

.navbar-brand img{

height:50px;

}

.top-contact{

flex-direction:column;

gap:8px;

}

}

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

@media (max-height:500px){

.hero{

padding:40px 0;

}

}

/*==================================================
END OF responsive.css
==================================================*/