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

@media(max-width:1000px){

.hero{

grid-template-columns:1fr;

text-align:center;

}

.about-grid{

grid-template-columns:1fr;

}

.stats{

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

}

.portfolio{

grid-template-columns:1fr;

}

}

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

@media(max-width:768px){

header{

padding:18px;

}

.logo{

font-size:26px;

}

#menuBtn{

display:block;

}

nav ul{

display:none;

position:absolute;

top:85px;

left:0;

width:100%;

background:#090909;

flex-direction:column;

text-align:center;

padding:30px;

}

nav ul.show{

display:flex;

}

.hero{

padding-top:130px;

}

.hero h1{

font-size:42px;

}

.title h2{

font-size:34px;

}

.buttons{

flex-direction:column;

}

.stats{

grid-template-columns:1fr;

}

.services{

grid-template-columns:1fr;

}

input,
textarea,
button{

font-size:16px;

}

}