/* ===========================================
   BAŞARAN YAPI
   responsive.css
=========================================== */

/* Tablet */

@media (max-width:992px){

.container{
    width:92%;
}

header .container{
    height:75px;
}

.hero h1{
    font-size:52px;
}

.hero p{
    font-size:19px;
}

.about .container{
    grid-template-columns:1fr;
}

.contact .container{
    grid-template-columns:1fr;
}

.footer-grid{
    grid-template-columns:1fr;
}

nav{
    position:fixed;
    top:75px;
    right:-100%;
    width:300px;
    height:100vh;
    background:#111;
    transition:.35s;
    padding-top:40px;
}

nav.active{
    right:0;
}

nav ul{
    flex-direction:column;
    align-items:center;
    gap:30px;
}

.menu-toggle{
    display:block;
}

.btn-header{
    display:none;
}

}

/* Büyük Telefon */

@media (max-width:768px){

section{
    padding:70px 0;
}

.logo h2{
    font-size:26px;
}

.hero{
    height:90vh;
}

.hero h1{
    font-size:38px;
}

.hero p{
    font-size:17px;
}

.hero-buttons{
    flex-direction:column;
    gap:15px;
}

.btn-gold,
.btn-dark{
    width:100%;
    max-width:280px;
    margin:0;
    text-align:center;
}

.about-left h2,
.services h2,
.projects h2,
.contact h2{
    font-size:32px;
}

.service-grid,
.project-grid,
.reference-grid{
    grid-template-columns:1fr;
}

.project-grid img{
    height:240px;
}

.contact input,
.contact textarea{
    font-size:15px;
}

.contact button{
    width:100%;
}

.footer-logo,
.footer-links,
.footer-contact{
    text-align:center;
}

.footer-contact p{
    justify-content:center;
}

.social-icons{
    justify-content:center;
}

.whatsapp{
    width:58px;
    height:58px;
    font-size:30px;
}

}

/* Küçük Telefon */

@media (max-width:576px){

.container{
    width:94%;
}

header .container{
    height:70px;
}

.logo h2{
    font-size:22px;
}

.hero{
    min-height:85vh;
}

.hero h1{
    font-size:30px;
    line-height:1.3;
}

.hero p{
    font-size:15px;
}

section h2{
    font-size:28px;
}

.card{
    padding:25px 20px;
}

.card i{
    width:70px;
    height:70px;
    font-size:30px;
}

.card h3{
    font-size:20px;
}

.about-left ul li{
    font-size:16px;
}

.contact-info{
    padding:25px;
}

.footer{
    text-align:center;
}

.footer-grid{
    gap:30px;
}

.whatsapp{
    right:18px;
    bottom:18px;
    width:55px;
    height:55px;
    font-size:28px;
}

}

/* Çok Küçük Telefon */

@media (max-width:360px){

.hero h1{
    font-size:26px;
}

.hero p{
    font-size:14px;
}

.btn-gold,
.btn-dark{
    font-size:15px;
    padding:14px 20px;
}

.logo h2{
    font-size:20px;
}

nav{
    width:100%;
}

}