/* ===========================================
RESPONSIVE PREMIUM V3
=========================================== */

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

@media (max-width:1200px){

.hero h1{
font-size:52px;
}

.section-title h2{
font-size:38px;
}

.container{
width:94%;
}

}

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

@media (max-width:992px){

section{
padding:80px 0;
}

.hero{
height:auto;
min-height:100vh;
padding:150px 0 80px;
}

.hero h1{
font-size:42px;
}

.hero p{
font-size:16px;
}

.hero-info{
grid-template-columns:1fr;
gap:20px;
margin-top:40px;
}

.about-grid,
.promo-box{

grid-template-columns:1fr;

gap:45px;

}

.services-grid,
.product-grid,
.testimonial-grid,
.simulation-grid{

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

}

.stats-grid{

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

}

.footer-grid{

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

gap:35px;

}

.map-box iframe{

height:420px;

}

}

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

@media (max-width:768px){

.header{

padding:15px 0;

}

.logo img{

width:45px;

}

.logo h2{

font-size:16px;

}

.logo span{

font-size:12px;

}

#navbar{

position:fixed;

top:0;

right:-100%;

width:280px;

height:100vh;

background:#111;

display:flex;

flex-direction:column;

padding:100px 30px;

gap:25px;

transition:.35s;

z-index:999;

}

#navbar.active{

right:0;

}

#navbar a{

color:#fff !important;

font-size:17px;

}

#menu-toggle{

display:block;

}

.call,
.wa{

display:none;

}

.hero{

text-align:center;

}

.hero h1{

font-size:36px;

}

.hero p{

font-size:15px;

}

.hero-button{

justify-content:center;

}

.section-title{

margin-bottom:50px;

}

.section-title h2{

font-size:34px;

}

.about-content h2{

font-size:34px;

}

.promo-content h2{

font-size:34px;

}

.cta-box h2{

font-size:36px;

}

.product-grid,
.services-grid,
.testimonial-grid,
.simulation-grid,
.stats-grid{

grid-template-columns:1fr;

}

.about-feature{

grid-template-columns:1fr;

}

.promo-list{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.social{

justify-content:center;

}

.map-box iframe{

height:360px;

}

}

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

@media (max-width:576px){

section{

padding:70px 0;

}

.hero{

padding:130px 0 70px;

}

.hero h1{

font-size:30px;

line-height:1.25;

}

.hero p{

font-size:15px;

}

.hero-badge{

font-size:12px;

padding:7px 16px;

}

.hero-button{

flex-direction:column;

gap:15px;

}

.btn,
.btn-outline{

width:100%;

}

.hero-info{

grid-template-columns:1fr;

}

.hero-info div{

padding:18px;

}

.hero-info h3{

font-size:28px;

}

.section-title h2{

font-size:28px;

}

.section-title p{

font-size:15px;

}

.about-content h2{

font-size:30px;

}

.promo-content h2{

font-size:30px;

}

.cta-box h2{

font-size:30px;

}

.stats-card,
.service-card,
.simulation-card,
.product-card,
.testimonial-card{

padding:25px;

}

.product-content{

padding:22px;

}

.product-content h3{

font-size:22px;

}

.product-content h4{

font-size:24px;

}

.product-button{

flex-direction:column;

}

.btn-small,
.btn-wa{

width:100%;

}

.faq-item{

padding:20px;

}

.footer{

padding:60px 0 20px;

}

.footer h3{

font-size:20px;

}

.footer-bottom{

font-size:13px;

}

.floating-wa{

width:58px;

height:58px;

font-size:30px;

right:18px;

bottom:18px;

}

#backToTop{

width:48px;

height:48px;

right:18px;

bottom:88px;

font-size:18px;

}

}

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

@media (max-width:380px){

.hero h1{

font-size:26px;

}

.section-title h2{

font-size:24px;

}

.logo h2{

font-size:14px;

}

.logo span{

display:none;

}

.hero-button .btn,
.hero-button .btn-outline{

padding:14px 18px;

font-size:15px;

}

.btn,
.btn-outline{

font-size:15px;

}

.product-content h3{

font-size:20px;

}

.product-content h4{

font-size:22px;

}

.cta-box h2{

font-size:26px;

}

}