/*==================================================
LARGE LAPTOPS
==================================================*/

@media (max-width:1400px){

.container{

width:94%;

}

.hero h1{

font-size:58px;

}

}

/*==================================================
LAPTOP
==================================================*/

@media (max-width:1200px){

section{

padding:90px 0;

}

.hero h1{

font-size:52px;

}

.hero p{

font-size:18px;

}

.about-grid,
.solution-grid,
.industry-grid,
.partner-grid{

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

}

.timeline{

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

}

.impact-grid{

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

}

.footer-grid{

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

gap:40px;

}

.founder-grid{

grid-template-columns:1fr;

gap:60px;

}

.founder-image{

max-width:420px;

margin:auto;

}

.contact-grid{

grid-template-columns:1fr;

}

}

/*==================================================
TABLET
==================================================*/

@media (max-width:992px){

#header{

padding:15px 0;

}

.logo img{

height:52px;

}

.mobile-toggle{

display:block;

position:relative;

z-index:1002;

}

.nav-menu{

position:fixed;

left:-100%;

top:0;

width:300px;

height:100vh;

background:#08111F;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:35px;

transition:.4s;

z-index:1000;

}

.nav-menu.active{

left:0;

}

.hero{

min-height:100vh;

height:auto;

padding:160px 0 120px;

}

.hero-content{

max-width:100%;

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero h1{

font-size:46px;

}

.hero p{

font-size:18px;

}

.about-grid,
.solution-grid,
.partner-grid,
.industry-grid,
.impact-grid{

grid-template-columns:1fr 1fr;

gap:25px;

}

.timeline{

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

}

.contact-form form{

grid-template-columns:1fr;

}

.contact-form textarea,

.contact-form button{

grid-column:auto;

}

.cta-content h2{

font-size:42px;

}

}

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

@media (max-width:768px){

section{

padding:75px 0;

}

.section-header{

margin-bottom:50px;

}

.section-header h2{

font-size:34px;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:17px;

}

.hero-buttons{

flex-direction:column;

width:100%;

}

.hero-buttons .btn{

width:100%;

}

.about-grid,
.solution-grid,
.partner-grid,
.industry-grid,
.timeline,
.impact-grid{

grid-template-columns:1fr;

}

.step{

padding:30px;

}

.step span{

width:60px;

height:60px;

font-size:20px;

}

.founder-grid{

gap:40px;

}

.founder-image{

max-width:320px;

}

.founder-buttons{

flex-direction:column;

}

.founder-buttons .btn{

width:100%;

}

/* CONTACT */

@media (max-width:992px){

.contact-grid{

grid-template-columns:1fr;

gap:40px;

}

}

@media (max-width:768px){

.form-grid{

grid-template-columns:1fr;

}

.full-width{

grid-column:auto;

}

.contact-form{

padding:28px;

}

.consultation-btn{

font-size:15px;

}

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.socials{

justify-content:center;

}

.cta-content h2{

font-size:34px;

}

.cta-content p{

font-size:17px;

}

.whatsapp-float{

width:60px;

height:60px;

font-size:28px;

right:18px;

bottom:18px;

}

}

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

@media (max-width:480px){

.hero{

padding-top:140px;

}

.hero-tag{

font-size:13px;

padding:10px 18px;

}

.hero h1{

font-size:32px;

}

.hero p{

font-size:16px;

}

.btn{

padding:15px 22px;

font-size:15px;

}

h2{

font-size:30px;

}

.about-card,
.partner-card,
.solution-content{

padding:28px;

}

.solution-image{

height:210px;

}

.industry-card{

height:220px;

}

.contact-form{

padding:22px;

}

.footer-logo{

margin:auto auto 20px;

}

.copyright{

font-size:14px;

}

}

/*==================================================
EXTRA SMALL DEVICES
==================================================*/

@media (max-width:360px){

.hero h1{

font-size:28px;

}

.hero p{

font-size:15px;

}

.section-header h2{

font-size:26px;

}

.logo img{

height:46px;

}

.nav-menu{

width:260px;

}

}