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

@media (max-width:992px){

.hero h1{

font-size:54px;

}

.hero h2{

font-size:20px;

}

.navbar{

padding:20px 30px;

}

section{

padding:100px 25px;

}

#stats{

grid-template-columns:1fr;

}

}


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

@media (max-width:768px){

.menu-btn{

display:block;

z-index:999;

}

.navbar ul{

position:fixed;

top:80px;

right:-100%;

width:260px;

height:100vh;

background:#050505;

display:flex;

flex-direction:column;

padding:40px;

gap:30px;

transition:.45s;

}

.navbar ul.active{

right:0;

}

.hero h1{

font-size:42px;

}

.hero h2{

font-size:17px;

}

.hero-image{

width:300px;

}

.buttons{

display:flex;

flex-direction:column;

gap:20px;

}

.btn,

.btn-outline{

width:100%;

text-align:center;

margin:0;

}

.tech-grid{

grid-template-columns:1fr;

}

.project-grid{

grid-template-columns:1fr;

}

.skills{

justify-content:center;

}

.social{

flex-wrap:wrap;

}

}


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

@media(max-width:480px){

.hero{

padding:0 20px;

}

.hero h1{

font-size:34px;

}

section h2{

font-size:32px;

}

}