header {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: fixed; /* Menüyü sabitlemek için */
    width: 100%; /* Genişliği ekran genişliğiyle eşitle */
    top: 0; /* Üst kenara yerleştir */
    z-index: 1000; /* Menünün diğer öğelerin üzerinde kalmasını sağlar */
}

body {
    margin-top: 60px; /* Sabit menü için boşluk */
    font-family: 'Calibri', sans-serif;
    /* Diğer body stilleri... */
}

/* Diğer stiller aynı kalır */


nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

.hero {
    background: url('background.png') no-repeat center center / cover;
    background-attachment: fixed;
    text-align: center;
    position: relative;
    color: black;
    padding-top: 30px; /* Üst kısımda daha az boşluk */
    padding-bottom: 20px; /* Alt kısımda boşluk */
}

.logo {
    animation: fadeIn 2s;
    position: relative; /* Pozisyonu relative olarak değiştirildi */
    width: 100%; /* Logoyu sınırlar içinde tutar */
    display: block;
    margin: 0 auto 30px; /* Logo altında boşluk bırakın */
}

.logo img {
    height: 200px; /* Logo boyutu */
    width: auto;
}

.hero h1 {
    font-size: 32px; /* Artırılmış başlık font boyutu */
    margin-bottom: 20px;
    color: black; /* Başlık rengi */
}

.hero p {
    font-size: 28px; /* Artırılmış açıklama font boyutu */
    margin-bottom: 30px;
    color: black; /* Açıklama rengi */
}

.services {
    text-align: center;
    padding: 20px;
}

.section-title {
    font-size: 28px; /* Başlık font boyutu */
    margin-bottom: 30px; /* Başlık ile servisler arasında boşluk */
    text-align: left; /* Başlığı sola hizala */

}

.service {
    display: flex;
    justify-content: center; /* Servisleri merkeze hizala */
    align-items: center; /* Resim ve metin dikey olarak hizalanır */
    margin-bottom: 40px; /* Her servis arasında boşluk */
}

.service img {
    width: 50%; /* Görsel genişliği, ihtiyaca göre ayarlayın */
    max-width: 300px; /* En fazla genişlik */
    height: auto; /* Yükseklik, genişliğe göre otomatik ayarlanır */
    margin-right: 20px; /* Görsel ile metin arasında boşluk */
}

.service-info {
    text-align: left;
    width: 50%; /* Metin alanı genişliği */
}

.service h3 {
    color: #333; /* Başlık rengi */
    margin-bottom: 10px; /* Başlık ile açıklama arasında boşluk */
}

.service p {
    color: #555; /* Açıklama metni rengi */
}

.about {
    text-align: left;
    padding: 20px;
}

.section-title {
    font-size: 28px; /* Başlık font boyutu */
    margin-bottom: 30px; /* Başlık ile servisler arasında boşluk */
    text-align: left; /* Başlığı sola hizala */

}

.seperator {
    background: url('background.png') no-repeat center center / cover;
    background-attachment: fixed;
    text-align: center;
    position: relative;
    color: black;
    padding-top: 30px; /* Üst kısımda daha az boşluk */
    padding-bottom: 20px; /* Alt kısımda boşluk */
}


footer {
    background-color: #333;
    color: white;
    text-align: center;
    font-size: 20px;
    padding: 10px;
}

footer a {
    color: white; /* Link rengi beyaz */
    text-decoration: none; /* Altı çizili metni kaldır */
}

footer a:hover {
    text-decoration: underline; /* Üzerine gelindiğinde altını çiz */
}
.email-link {
    color: white; /* Link rengini beyaz yapar */
    text-decoration: none; /* Alt çizgiyi kaldırır */
}

.email-link:hover {
    text-decoration: underline; /* Fare üzerine gelindiğinde alt çizgi ekler */
}

/* Tablet ve Mobil Cihazlar için Medya Sorguları - Önceki CSS kodlarınıza ekleyin */
/* Tablet */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 28px; /* Tablet için başlık font boyutu */
    }
    .hero p {
        font-size: 18px; /* Tablet için açıklama font boyutu */
    }
}

/* Mobil Cihazlar */
@media (max-width: 480px) {
    .hero h1 {
        font-size: 24px; /* Mobil cihaz için başlık font boyutu */
    }
    .hero p {
        font-size: 16px; /* Mobil cihaz için açıklama font boyutu */
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}