/*====================================

Responsive CSS
Version 1.0

====================================*/

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

@media(max-width:1400px){

.container{

max-width:1140px;

}

.hero-left h1{

font-size:52px;

}

.section-title h2{

font-size:40px;

}

}

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

@media(max-width:1200px){

.container{

max-width:960px;

}

.hero-wrapper{

grid-template-columns:1fr;

gap:50px;

}

.hero-left{

text-align:center;

}

.hero-left p{

margin:auto;

margin-bottom:30px;

}

.hero-buttons{

justify-content:center;

}

.hero-points{

max-width:700px;

margin:auto;

margin-bottom:40px;

}

.lead-card{

max-width:600px;

margin:auto;

}

.about-wrapper{

grid-template-columns:1fr;

}

.about-image{

text-align:center;

}

.about-image img{

width:90%;

margin:auto;

}

.services-grid{

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

}

.why-grid{

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

}

.process-grid{

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

}

.counter-grid{

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

}

.contact-wrapper{

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

}

.footer-grid{

grid-template-columns:1fr 1fr;

gap:40px;

}

}

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

@media(max-width:992px){

.top-ribbon{

flex-direction:column;

gap:10px;

font-size:13px;

text-align:center;

padding:15px;

}

.navbar{

height:auto;

padding:20px 0;

flex-wrap:wrap;

justify-content:center;

gap:25px;

}

nav{

width:100%;

}

nav ul{

justify-content:center;

flex-wrap:wrap;

gap:20px;

}

.header-btn{

margin-top:10px;

}

.hero{

padding:70px 0;

}

.hero-left h1{

font-size:42px;

}

.hero-left p{

font-size:16px;

}

.section-title h2{

font-size:34px;

}

.cta-wrapper{

flex-direction:column;

text-align:center;

}

.cta-wrapper h2{

font-size:34px;

}

}

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

@media(max-width:768px){

.container{

padding:0 18px;

}

.hero{

padding:60px 0;

}

.hero-left h1{

font-size:36px;

line-height:1.3;

}

.hero-left p{

font-size:15px;

}

.hero-badge{

font-size:13px;

padding:9px 16px;

}

.hero-buttons{

flex-direction:column;

gap:15px;

}

.btn-primary,
.btn-secondary{

width:100%;

text-align:center;

justify-content:center;

}

.hero-points{

grid-template-columns:1fr;

gap:15px;

}

.lead-card{

padding:28px;

}

.section-title{

margin-bottom:40px;

}

.section-title h2{

font-size:30px;

}

.about-wrapper{

gap:40px;

}

.about-card{

padding:25px;

}

.services-grid{

grid-template-columns:1fr;

}

.service-card{

padding:30px;

}

.why-grid{

grid-template-columns:1fr;

}

.counter-grid{

grid-template-columns:1fr;

}

.process-grid{

grid-template-columns:1fr;

}

.contact-wrapper{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-column{

margin-bottom:20px;

}

}

/*=============================
576px
=============================*/

@media(max-width:576px){

.top-ribbon{

font-size:12px;

padding:12px;

}

.logo img{

height:50px;

}

nav ul{

flex-direction:column;

gap:15px;

}

.hero{

padding:50px 0;

}

.hero-left h1{

font-size:30px;

}

.hero-left p{

font-size:14px;

}

.hero-badge{

width:100%;

justify-content:center;

}

.hero-points div{

font-size:14px;

padding:12px;

}

.lead-card{

padding:22px;

}

.lead-card h2{

font-size:24px;

}

.lead-card input,

.lead-card select{

height:52px;

font-size:14px;

}

.submit-btn{

height:54px;

font-size:15px;

}

.section-title h2{

font-size:28px;

}

.section-title p{

font-size:14px;

}

.about-card h3,

.service-card h3,

.why-card h3,

.process-card h3,

.contact-card h3{

font-size:20px;

}

.counter-box h2{

font-size:40px;

}

.cta-wrapper{

padding:30px;

}

.cta-wrapper h2{

font-size:28px;

}

.cta-btn{

width:100%;

text-align:center;

}

.disclaimer-box{

padding:28px;

}

.disclaimer-box h2{

font-size:26px;

}

}

/*=============================
420px
=============================*/

@media(max-width:420px){

.container{

padding:0 15px;

}

.hero-left h1{

font-size:26px;

}

.section-title h2{

font-size:24px;

}

.lead-card{

padding:18px;

border-radius:16px;

}

.about-card,

.service-card,

.why-card,

.process-card,

.contact-card{

padding:22px;

}

.counter-box{

padding:25px;

}

.contact-icon,

.why-icon,

.service-card .icon{

width:65px;

height:65px;

font-size:28px;

}

.footer-column h3{

font-size:22px;

}

.footer-column p,

.footer-column li{

font-size:14px;

}

.floating-btn{

right:15px;

bottom:15px;

padding:14px 20px;

font-size:14px;

}

.scroll-top{

left:15px;

bottom:15px;

width:48px;

height:48px;

font-size:18px;

}

}

/*=============================
360px
=============================*/

@media(max-width:360px){

.hero-left h1{

font-size:22px;

}

.hero-left p{

font-size:13px;

}

.section-title h2{

font-size:22px;

}

.btn-primary,

.btn-secondary{

padding:14px 18px;

font-size:14px;

}

.submit-btn{

font-size:14px;

}

.lead-card input,

.lead-card select{

padding:0 14px;

font-size:13px;

}

}

/*====================================

End of responsive.css

====================================*/