/* =========================================
   RESPONSIVE DESIGN
   STAYMAXIMO PREMIUM
========================================= */


/* ==========================
   TABLETS
========================== */


@media(max-width:1024px){



.container{

    width:92%;

}



.navbar ul{

    gap:18px;

}



.hero h1{

    font-size:50px;

}



.services-grid{

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

}



.features-grid{

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

}



.process-grid{

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

}



.gallery-grid{

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

}



.contact-wrapper{

    gap:35px;

}



.footer-grid{

    grid-template-columns:1fr 1fr;

}



}





/* ==========================
   MOBILE
========================== */


@media(max-width:768px){



.section{

    padding:70px 0;

}





/* ==========================
   HEADER MOBILE
========================== */



.nav-container{

    height:75px;

}



.logo img{

    width:145px;

}



.navbar{

    position:fixed;

    top:0;

    right:-100%;

    width:80%;

    height:100vh;

    background:#06182C;

    padding:100px 40px;

    transition:.4s;

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

}



.navbar.active{

    right:0;

}



.navbar ul{

    display:flex;

    flex-direction:column;

    gap:25px;

}



.navbar a{

    color:white;

    font-size:18px;

}



.navbar a:hover{

    color:#00B8D9;

}



.language-selector{

    display:none;

}



.mobile-menu{

    display:block;

    z-index:1100;

    color:white;

    cursor:pointer;

}





/* ==========================
   HERO MOBILE
========================== */


.hero{

    min-height:700px;

    height:auto;

    padding:150px 0 80px;

}



.hero-text{

    text-align:center;

}



.subtitle{

    font-size:14px;

}



.hero h1{

    font-size:38px;

}



.hero p{

    font-size:16px;

}



.hero-buttons{

    flex-direction:column;

    gap:15px;

}



.btn-primary,
.btn-whatsapp{

    width:100%;

    justify-content:center;

}





/* ==========================
   ABOUT MOBILE
========================== */


.about-grid{

    grid-template-columns:1fr;

}



.about-image{

    height:350px;

}



.section-header h2{

    font-size:34px;

}





/* ==========================
   SERVICES MOBILE
========================== */


.services-grid{

    grid-template-columns:1fr;

}





/* ==========================
   FEATURES MOBILE
========================== */


.features-grid{

    grid-template-columns:1fr;

}





/* ==========================
   PROCESS MOBILE
========================== */


.process-grid{

    grid-template-columns:1fr;

}





/* ==========================
   GALLERY MOBILE
========================== */


.gallery-grid{

    grid-template-columns:1fr;

}



.gallery-item{

    height:260px;

}





/* ==========================
   CONTACT MOBILE
========================== */


.contact-wrapper{

    grid-template-columns:1fr;

}



.contact-form{

    padding:25px;

}





/* ==========================
   CTA MOBILE
========================== */


.cta h2{

    font-size:34px;

}


.cta p{

    font-size:16px;

}





/* ==========================
   FOOTER MOBILE
========================== */


.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}



.footer-brand img{

    margin:auto;

    margin-bottom:20px;

}


}

/* ==========================
   SMALL PHONES
========================== */


@media(max-width:400px){



.hero h1{

    font-size:32px;

}



.hero p{

    font-size:15px;

}



.subtitle{

    font-size:13px;

}



.section-header h2{

    font-size:29px;

}



.service-card{

    padding:30px 20px;

}



.contact-form{

    padding:20px;

}



.btn-primary,
.btn-whatsapp{

    padding:14px 20px;

}



.footer{

    padding-top:50px;

}



}





/* ==========================
   EXTRA MOBILE FIXES
========================== */


@media(max-width:768px){



body{

    overflow-x:hidden;

}



.hero{

    background-position:center;

}



.hero-content{

    width:100%;

}



.contact-details div{

    align-items:flex-start;

}



.contact-details span{

    font-size:14px;

}



.whatsapp-float{

    width:55px;

    height:55px;

    font-size:26px;

    right:20px;

    bottom:20px;

}



}



/* ==========================
   LARGE SCREENS
========================== */


@media(min-width:1400px){



.container{

    max-width:1300px;

}



.hero h1{

    font-size:68px;

}



.section{

    padding:120px 0;

}



}

@media(min-width:1400px){


.container{

    max-width:1300px;

}



.hero h1{

    font-size:68px;

}



.section{

    padding:120px 0;

}



}