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

@media (max-width:1400px){

.container{

width:min(94%,1280px);

}

.hero h1{

font-size:64px;

}

.section-header h2{

font-size:48px;

}

}

/*==================================================
DESKTOP
==================================================*/

@media (max-width:1200px){

.hero-content{

grid-template-columns:1fr;

gap:70px;

}

.hero-left{

max-width:100%;

}

.hero-right{

justify-content:center;

}

.hero-right img{

max-width:700px;

}

.project-grid{

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

}

.phase .hero-content{

grid-template-columns:1fr;

}

.phase img{

max-width:760px;

margin:auto;

display:block;

}

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

@media (max-width:992px){

.navbar{

display:none;

}

.btn-header{

display:none;

}

.menu-toggle{

display:block;

}

.hero{

padding-top:150px;

}

.hero h1{

font-size:54px;

}

.hero p{

font-size:22px;

}

.section-header h2{

font-size:40px;

}

.project-grid{

grid-template-columns:1fr;

}

.phase h2{

font-size:42px;

}

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

@media (max-width:768px){

.container{

width:92%;

}

section{

padding:80px 0;

}

.hero{

padding-top:120px;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:19px;

line-height:1.7;

}

.hero-buttons{

flex-direction:column;

align-items:flex-start;

}

.btn-primary,
.btn-secondary{

width:100%;

justify-content:center;

}

.section-header{

margin-bottom:45px;

}

.section-header h2{

font-size:34px;

}

.project-card{

padding:30px;

}

.phase{

padding:90px 0;

}

.phase h2{

font-size:34px;

}

.phase p{

font-size:18px;

}

footer{

padding:50px 0;

}

}

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

@media (max-width:480px){

.hero h1{

font-size:34px;

}

.section-header h2{

font-size:30px;

}

.hero-right img{

border-radius:16px;

}

}