/*=========================================
RESPONSIVE
=========================================*/

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

@media (max-width:1200px){

.container{

width:92%;

}

.hero-content h1{

font-size:56px;

}

.hero-wrapper{

gap:50px;

}

.services-grid,
.portfolio-grid,
.pricing-grid,
.testimonial-grid{

gap:24px;

}

}

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

@media (max-width:992px){

section{

padding:80px 0;

}

/* NAVBAR */

.nav-menu{

display:none;

}

.btn-nav{

display:none;

}

.hamburger{

display:flex;

}

/* HERO */

.hero{

padding-top:140px;

}

.hero-wrapper{

grid-template-columns:1fr;

text-align:center;

}

.hero-content{

order:2;

}

.hero-image{

order:1;

max-width:650px;

margin:auto;

}

.hero-content p{

margin:auto;

margin-bottom:35px;

}

.hero-button{

justify-content:center;

flex-wrap:wrap;

}

.hero-counter{

justify-content:center;

margin-top:20px;

}

.card-one{

left:10px;

top:20px;

}

.card-two{

right:10px;

top:140px;

}

.card-three{

left:20px;

bottom:20px;

}

/* SERVICES */

.services-grid{

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

}

/* WHY */

.why-container{

grid-template-columns:1fr;

}

.why-image{

max-width:650px;

margin:auto;

}

.why-content{

text-align:center;

}

.why-grid{

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

text-align:left;

}

/* STATS */

.stats-grid{

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

}

/* PORTFOLIO */

.portfolio-grid{

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

}

/* PROCESS */

.process-grid{

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

}

/* PRICING */

.pricing-grid{

grid-template-columns:1fr;

max-width:550px;

margin:auto;

}

.price-card.active{

transform:none;

}

/* TESTIMONIAL */

.testimonial-grid{

grid-template-columns:1fr;

}

/* FOOTER */

.footer-grid{

grid-template-columns:1fr 1fr;

gap:40px;

}

}

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

@media (max-width:768px){

.hero-content h1{

font-size:42px;

line-height:1.2;

}

.section-title h2{

font-size:34px;

}

.hero-counter{

flex-direction:column;

gap:25px;

}

.hero-button{

flex-direction:column;

}

.btn-primary,
.btn-outline{

width:100%;

}

.services-grid,
.portfolio-grid,
.process-grid,
.stats-grid,
.why-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-logo{

margin:auto;

margin-bottom:20px;

}

.floating-card{

display:none;

}

.cta h2{

font-size:36px;

}

.cta p{

font-size:16px;

}

.whatsapp{

width:58px;

height:58px;

font-size:26px;

right:18px;

bottom:18px;

}

#topBtn{

width:52px;

height:52px;

left:18px;

bottom:18px;

}

}

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

@media (max-width:480px){

.hero{

padding-top:120px;

}

.hero-content h1{

font-size:34px;

}

.hero-content p{

font-size:16px;

line-height:30px;

}

.section-title h2{

font-size:28px;

}

.price{

font-size:42px;

}

.process-item,
.service-card,
.price-card,
.testimonial-card{

padding:28px;

}

}