/*==========================================
LARGE SCREEN
==========================================*/

@media(max-width:1400px){

.container{

width:min(95%,1200px);

}

.hero h1{

font-size:60px;

}

}

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

@media(max-width:1200px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-image{

order:-1;

}

.hero-buttons{

justify-content:center;

}

.hero-badges{

justify-content:center;

}

.socials{

justify-content:center;

}

.counter{

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

}

.projects-grid{

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

}

.skills-grid{

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

}

.services{

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

}

.certificates{

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

}

}

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

@media(max-width:992px){

.header .container{

height:75px;

}

#menu-btn{

display:flex;

}

.navbar{

position:fixed;

top:75px;

right:-100%;

width:280px;

height:calc(100vh - 75px);

background:#111827;

display:flex;

flex-direction:column;

padding:40px;

gap:25px;

transition:.35s;

}

.navbar.active{

right:0;

}

.section-title{

font-size:38px;

}

.hero h1{

font-size:50px;

}

.hero h2{

font-size:28px;

}

.hero-image img{

width:340px;

}

.timeline::before{

left:15px;

}

.timeline-item{

padding-left:60px;

}

.timeline-item::before{

left:4px;

}

}

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

@media(max-width:768px){

section{

padding:90px 0;

}

.hero{

padding-top:100px;

}

.hero h1{

font-size:42px;

}

.hero h2{

font-size:24px;

}

.hero-text{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn{

width:100%;

}

.hero-image img{

width:280px;

}

.counter{

grid-template-columns:1fr;

}

.skills-grid{

grid-template-columns:1fr;

}

.projects-grid{

grid-template-columns:1fr;

}

.services{

grid-template-columns:1fr;

}

.certificates{

grid-template-columns:1fr;

}

.project-links{

flex-direction:column;

}

#contact button{

width:100%;

}

}

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

@media(max-width:576px){

.logo{

font-size:26px;

}

.section-title{

font-size:32px;

}

.hero h1{

font-size:36px;

}

.hero h2{

font-size:20px;

}

.hero-badges span{

font-size:13px;

padding:10px 16px;

}

.counter-box h2{

font-size:40px;

}

.timeline-item{

padding:25px 20px 25px 55px;

}

.project-content{

padding:20px;

}

}

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

@media(max-width:400px){

.hero h1{

font-size:30px;

}

.hero-image img{

width:230px;

}

.btn{

padding:12px 22px;

font-size:14px;

}

.hero-badges{

gap:10px;

}

.hero-badges span{

padding:8px 12px;

}

.socials a{

width:42px;

height:42px;

font-size:16px;

}

}