/*=========================================
RESPONSIVE
Large Screen
=========================================*/

@media (max-width:1400px){

.container{

    width:94%;

}

.hero-grid{

    gap:50px;

}

}


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

@media (max-width:1200px){

.hero h1{

    font-size:60px;

}

.hero h2{

    font-size:30px;

}

.stats-grid{

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

}

.features-grid{

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

}

.footer-grid{

    grid-template-columns:1fr 1fr;

}

}


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

@media (max-width:992px){

.header{

    padding:15px 0;

}

.menu{

    display:none;

}

.menu-toggle{

    display:block;

}

.hero{

    padding-top:140px;

}

.hero-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-buttons{

    justify-content:center;

}

.hero-features{

    justify-content:center;

}

.hero-image{

    order:-1;

}

.hero-image img{

    max-width:500px;

    margin:auto;

}

.about-grid{

    grid-template-columns:1fr;

}

.contact-grid{

    grid-template-columns:1fr;

}

.footer-grid{

    grid-template-columns:1fr;

}

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

@media (max-width:768px){

section{

    padding:70px 0;

}

.section-header{

    margin-bottom:45px;

}

.section-header h2{

    font-size:32px;

}

.hero{

    min-height:auto;

    padding:130px 0 70px;

}

.hero h1{

    font-size:46px;

}

.hero h2{

    font-size:24px;

}

.hero p{

    font-size:16px;

}

.hero-buttons{

    flex-direction:column;

    gap:15px;

}

.hero-buttons a{

    width:100%;

}

.hero-features{

    flex-direction:column;

    gap:12px;

    align-items:center;

}

.hero-image img{

    max-width:350px;

}

.stats-grid{

    grid-template-columns:1fr;

}

.about-items{

    gap:18px;

}

.products-grid{

    grid-template-columns:1fr;

}

.features-grid{

    grid-template-columns:1fr;

}

.projects-grid{

    grid-template-columns:1fr;

}

.form-group{

    grid-template-columns:1fr;

}

.contact-map iframe{

    height:320px;

}

.logo img{

    height:55px;

}

.call-btn{

    display:none;

}

.quote-btn{

    display:none;

}

.header-actions{

    gap:10px;

}

}
/*=========================================
Mobile Menu
=========================================*/

@media (max-width:992px){

.navbar{

    position:fixed;

    top:0;

    right:-100%;

    width:300px;

    max-width:85%;

    height:100vh;

    background:#0B1F3A;

    display:flex;

    align-items:flex-start;

    justify-content:flex-start;

    padding:100px 30px;

    transition:.4s;

    box-shadow:-10px 0 35px rgba(0,0,0,.25);

    z-index:1000;

}

.navbar.active{

    right:0;

}

.menu{

    display:flex;

    flex-direction:column;

    width:100%;

    gap:25px;

}

.menu li{

    width:100%;

}

.menu a{

    display:block;

    width:100%;

    font-size:18px;

    color:#fff;

    padding:12px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.menu a::after{

    display:none;

}

}

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

@media (max-width:576px){

.container{

    width:94%;

}

.hero h1{

    font-size:38px;

}

.hero h2{

    font-size:20px;

}

.hero p{

    font-size:15px;

}

.btn-primary,

.btn-secondary{

    width:100%;

    justify-content:center;

}

.experience-box{

    width:130px;

    height:130px;

    left:10px;

    bottom:-20px;

}

.experience-box h2{

    font-size:34px;

}

.stat-box{

    padding:30px 15px;

}

.stat-box h3{

    font-size:36px;

}

.feature-card{

    padding:35px 20px;

}

.product-body{

    padding:20px;

}

.contact-item{

    gap:12px;

}

.contact-item i{

    width:50px;

    height:50px;

    font-size:18px;

}

.footer{

    text-align:center;

}

.footer-logo{

    margin:0 auto 20px;

}

.whatsapp-btn{

    width:55px;

    height:55px;

    font-size:28px;

    right:15px;

    bottom:15px;

}

#backToTop{

    width:50px;

    height:50px;

    left:15px;

    bottom:15px;

    font-size:18px;

}

}

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

@media (max-height:650px){

.hero{

    min-height:auto;

    padding-top:120px;

    padding-bottom:60px;

}

.navbar{

    overflow-y:auto;

}

}