/* ===================================
Large Desktop
=================================== */

@media(max-width:1400px){

.hero h1{

font-size:60px;

}

.dashboard{

height:600px;

}

}

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

@media(max-width:1200px){

.hero-grid{

grid-template-columns:1fr;

}

.hero-left{

text-align:center;

}

.hero p{

margin:auto;

margin-bottom:35px;

}

.lead-form{

justify-content:center;

}

.dashboard{

margin-top:60px;

}

.feature-grid{

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

}

.pricing-grid{

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

}

.footer-grid{

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

}

}

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

@media(max-width:992px){

.header{

position:relative;

}

.nav{

flex-direction:column;

height:auto;

padding:25px 0;

}

nav ul{

flex-wrap:wrap;

justify-content:center;

gap:18px;

margin:20px 0;

}

.hero{

padding-top:80px;

}

.hero h1{

font-size:48px;

}

.hero-grid{

gap:50px;

}

.dashboard{

height:auto;

flex-direction:column;

}

.sidebar{

width:100%;

}

.top-cards{

grid-template-columns:1fr;

}

.chart{

height:280px;

}

.feature-grid{

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

}

.cta-box{

flex-direction:column;

text-align:center;

gap:35px;

padding:50px;

}

.cta-left{

flex-direction:column;

}

.pricing-grid{

grid-template-columns:1fr;

}

.featured{

transform:none;

}

.contact-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

}

/* ===================================
Tablet / Small Laptop
=================================== */

@media(max-width:1024px){

.hero-grid{

gap:50px;

}

.feature-grid{

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

}

.cta-box{

padding:56px 40px;

}

}

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

@media(max-width:768px){

.container{

width:94%;

}

.nav{

position:relative;

padding:18px 0;

}

.nav-links{

display:none;

position:absolute;

top:calc(100% + 10px);

left:0;

right:0;

background:rgba(255,255,255,.98);

border:1px solid #ececec;

border-radius:20px;

padding:20px;

box-shadow:0 20px 40px rgba(0,0,0,.08);

z-index:1000;

margin-left:0;

}

.nav-links.open{

display:block;

}

.nav-links ul{

flex-direction:column;

align-items:flex-start;

gap:12px;

}

.menu-toggle{

display:inline-block;

margin-left:auto;

}

.header-cta{

display:none;

}

.hero{

padding-top:90px;

}

.hero h1{

font-size:36px;

line-height:1.15;

}

.hero p{

font-size:16px;

}

.lead-form{

flex-direction:column;

}

.lead-form input{

width:100%;

}

.lead-form button{

width:100%;

justify-content:center;

}

.dashboard{

border-radius:20px;

}

.section-title h2{

font-size:34px;

}

.cta-box,

.price-card,

.contact-form input,

.contact-form textarea{

border-radius:20px;

}

.cta-box{

padding:40px 28px;

}

.cta h2{

font-size:30px;

}

.cta h3{

font-size:22px;

}

.feature-grid{

grid-template-columns:1fr;

}

.price-card{

padding:30px 24px;

}

.faq-question{

padding:20px 22px;

font-size:16px;

}

.contact-grid{

gap:36px;

}

.contact-form input,

.contact-form textarea{

padding:15px;

}

.footer-grid{

gap:24px;

}

.whatsapp{

width:60px;

height:60px;

font-size:28px;

right:18px;

bottom:18px;

}

}

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

@media(max-width:600px){

.hero{

padding-top:100px;

}

.hero-left,

.hero-right{

min-width:0;

}

.lead-form input,

.lead-form button,

.contact-form input,

.contact-form textarea,

.btn{

width:100%;

justify-content:center;

}

.top-cards,

.bottom-stats{

grid-template-columns:1fr;

}

.cta-left{

flex-direction:column;

align-items:flex-start;

}

.cta-box{

padding:32px 22px;

}

.price-card,

.feature-card{

padding:24px 20px;

}

.faq-question{

font-size:16px;

padding:18px 20px;

}

.footer-grid{

grid-template-columns:1fr;

}

}

@media(max-width:480px){

.logo{

font-size:20px;

}

.hero h1{

font-size:28px;

}

.phase{

font-size:11px;

padding:7px 14px;

}

.badge{

font-size:12px;

padding:8px 14px;

}

.card h2{

font-size:24px;

}

.price{

font-size:40px;

}

.price-card{

padding:24px 18px;

}

.whatsapp{

width:56px;

height:56px;

font-size:24px;

right:14px;

bottom:14px;

}

}