/*==================================================
EARTHCONNECT

RESPONSIVE.CSS
==================================================*/

/*==============================
Large Desktop
==============================*/

@media (max-width:1400px){

.container{

max-width:1140px;

}

.hero-slide h1{

font-size:58px;

}

.section-heading{

font-size:38px;

}

}

/*==============================
Laptop
==============================*/

@media (max-width:1200px){

.hero-slide h1{

font-size:50px;

}

.hero-slide p{

font-size:18px;

}

.navbar-brand img{

height:55px;

}

.section-heading{

font-size:34px;

}

.counter-box h2{

font-size:48px;

}

}

/*==============================
Tablet
==============================*/

@media (max-width:992px){

section{

padding:80px 0;

}

.navbar{

background:#111827;

padding:15px 0;

}

.navbar-collapse{

margin-top:20px;

padding:20px;

background:#111827;

border-radius:16px;

}

.nav-link{

margin-left:0;

padding:12px 0;

}

.hero-slide{

text-align:center;

}

.hero-slide h1{

font-size:44px;

}

.hero-slide p{

margin:auto auto 35px;

}

.hero-buttons{

justify-content:center;

}

.about-preview{

text-align:center;

}

.about-preview img{

margin-top:50px;

}

.feature-list{

text-align:left;

display:inline-block;

}

.contact-item{

justify-content:center;

text-align:left;

}

.footer-bottom{

text-align:center;

justify-content:center;

gap:15px;

}

.cta-section{

text-align:center;

}

.cta-section .text-lg-end{

text-align:center!important;

margin-top:30px;

}

.process-box{

margin-bottom:40px;

}

}

/*==============================
Mobile Landscape
==============================*/

@media (max-width:768px){

.hero-slide{

height:90vh;

}

.hero-slide h1{

font-size:36px;

line-height:1.2;

}

.hero-slide p{

font-size:17px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.hero-buttons .btn{

width:260px;

}

.section-heading{

font-size:30px;

}

.service-card{

padding:35px;

}

.feature-box{

padding:35px 25px;

}

.quote-card{

padding:35px;

}

.newsletter{

text-align:center;

}

.newsletter-form{

margin-top:25px;

}

.social-links{

justify-content:center;

}

.footer-logo{

margin:auto auto 25px;

}

footer{

text-align:center;

}

}

/*==============================
Small Phones
==============================*/

@media (max-width:576px){

.hero-slide{

height:85vh;

}

.hero-slide h1{

font-size:30px;

}

.hero-slide p{

font-size:16px;

}

.hero-badge{

font-size:13px;

padding:8px 18px;

}

.section-heading{

font-size:28px;

}

.counter-box h2{

font-size:42px;

}

.service-card{

padding:28px;

}

.service-icon{

width:70px;

height:70px;

}

.service-icon i{

font-size:28px;

}

.feature-box i{

font-size:38px;

}

.industry-card{

padding:25px;

}

.brand-card{

height:110px;

padding:20px;

}

.process-box{

padding:10px;

}

.step{

width:60px;

height:60px;

font-size:24px;

}

.contact-item{

flex-direction:column;

text-align:center;

}

.contact-item .icon{

margin:0 auto 20px;

}

.quote-card{

padding:25px;

}

.form-control,

.form-select{

height:50px;

}

.map-section iframe{

height:350px;

}

.whatsapp-btn{

width:58px;

height:58px;

font-size:28px;

right:20px;

bottom:20px;

}

.btn-earth{

padding:12px 28px;

}

}

/*==============================
Extra Small
==============================*/

@media (max-width:400px){

.hero-slide h1{

font-size:26px;

}

.hero-buttons .btn{

width:100%;

}

.navbar-brand img{

height:45px;

}

.section-heading{

font-size:24px;

}

.counter-box h2{

font-size:34px;

}

.cta-section h2{

font-size:30px;

}

.footer-bottom{

font-size:13px;

}

}

/*==============================
Print
==============================*/

@media print{

.navbar,

footer,

.whatsapp-btn,

#loader,

.newsletter,

.cta-section{

display:none!important;

}

body{

background:#fff;

color:#000;

}

section{

padding:20px 0;

}

a{

text-decoration:none;

color:#000;

}

img{

max-width:100%;

}

}