/*==================================================
ESBC 2.0
RESPONSIVE DESIGN
==================================================*/

/*==============================
Large Screens (1400px+)
==============================*/

@media (min-width:1400px){

.container{

max-width:1320px;

margin:auto;

}

.hero-content h1{

font-size:4.8rem;

}

section{

padding:120px 0;

}

}

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

@media (max-width:1200px){

.container{

padding:0 40px;

}

.hero-content h1{

font-size:3.6rem;

}

.footer-grid{

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

gap:40px;

}

}

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

@media (max-width:992px){

.container{

padding:0 30px;

}

section{

padding:90px 0;

}

.hero-content{

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.about-grid,

.contact-wrapper{

grid-template-columns:1fr;

gap:50px;

}

.company-stats{

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

}

.services-grid,

.why-grid,

.gallery-grid,

.testimonial-grid{

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

}

}

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

@media (max-width:768px){

.container{

padding:0 20px;

}

section{

padding:80px 0;

}

.hero{

min-height:90vh;

}

.hero-content h1{

font-size:2.4rem;

line-height:1.2;

}

.hero-content p{

font-size:1rem;

}

.hero-buttons{

flex-direction:column;

align-items:center;

gap:15px;

}

.btn{

width:100%;

max-width:280px;

text-align:center;

}

.services-grid,

.gallery-grid,

.why-grid,

.testimonial-grid{

grid-template-columns:1fr;

}

.company-stats{

grid-template-columns:1fr;

}

.footer-grid,
.footer-top{

grid-template-columns:1fr;

text-align:center;

gap:32px;

}

.footer-column,
.footer-contact,
.footer-social,
.footer-bottom-links{

align-items:center;

justify-content:center;

}

.social-links{

justify-content:center;

}

}

/*==============================
Large Phones
==============================*/

@media (max-width:576px){

.container{

padding:0 18px;

}

.hero-content h1{

font-size:2rem;

}

.hero-content p{

font-size:.96rem;

}

.section-title h2{

font-size:2rem;

}

.card,

.service-card,

.about-card,

.why-card,

.testimonial-card,

.contact-card{

padding:22px;

}

.contact-form{

padding:22px;

}

.cta-content h2{

font-size:2rem;

}

.footer h4,
.footer h3,
.footer h2{

font-size:1.1rem;

}

}

/*==============================
Small Phones
==============================*/

@media (max-width:400px){

.hero-content h1{

font-size:1.8rem;

}

.hero-content p{

font-size:.92rem;

}

.btn{

font-size:.95rem;

padding:14px 22px;

}

.whatsapp-float{

width:50px;

height:50px;

font-size:1.5rem;

right:12px;

bottom:12px;

}

.scroll-top{

width:48px;

height:48px;

font-size:1rem;

left:12px;

bottom:12px;

}

.footer-bottom p,
.footer-links a,
.footer-column li a{

font-size:.95rem;

}

}

/*==============================
Landscape Phones
==============================*/

@media (max-height:600px) and (orientation:landscape){

.hero{

min-height:100vh;

}

.hero-content{

padding-top:80px;

padding-bottom:80px;

}

}