/* ===============================
   Tablet (992px)
================================== */

@media (max-width:992px){

.navbar{

flex-direction:column;
gap:20px;

}

.navbar ul{

gap:18px;
flex-wrap:wrap;
justify-content:center;

}

.hero h1{

font-size:52px;

}

.about .container{

grid-template-columns:1fr;

}

.cards{

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

}

.project-grid{

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

}

.counter{

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

}

.footer{

grid-template-columns:1fr;

}

}


/* ===============================
   Telefon (768px)
================================== */

@media (max-width:768px){

.hero{

text-align:center;

}

.hero h1{

font-size:40px;

}

.hero p{

font-size:16px;

}

.hero-buttons{

justify-content:center;
flex-wrap:wrap;

}

.cards{

grid-template-columns:1fr;

}

.project-grid{

grid-template-columns:1fr;

}

.counter{

grid-template-columns:1fr;

}

.about h2{

font-size:34px;

}

.services h2,
.projects h2,
.contact-box h2{

font-size:34px;

}

}


/* ===============================
   Küçük Telefon
================================== */

@media(max-width:480px){

.logo h2{

font-size:24px;

}

.hero h1{

font-size:30px;

}

.hero p{

font-size:15px;

}

.btn,
.btn-outline{

display:block;
width:100%;
text-align:center;

}

.navbar ul{

display:none;

}

}