.fixed-banner {
    position: relative; /* İçindeki elemanların doğru konumlanması için */
    width: 100%; /* Ekranın tamamını kaplaması için */
    height: 240px; /* Sabit yükseklik */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.fixed-banner::before {
    content: ""; /* İçeriği boş bırak */
    position: absolute; /* Arka planı banner'ın üstüne yerleştirmek için */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.137); /* Şeffaf siyah arka plan rengi */
    z-index: 1; /* Arka plan renginin resmin üstünde olması için */
}

.fixed-banner img {
    position: relative; /* Resmin arka plan renginin üstünde yer alması için */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Banner boyutuna uygun şekilde yerleştirir */
    z-index: 0; /* Resmin arka plan renginin altında yer alması için */
}

.banner-text {
    position: absolute;
    top: 50%; /* Yatay ortalama */
    left: 75%; /* Dikey ortalama */
    transform: translate(-50%, -50%); /* Tam ortalamak için */
    color: #fff; /* Yazı rengini beyaz olarak ayarlar */
    font-size: 45px; /* Yazı boyutu */
    font-weight: bold; /* Yazı kalınlığı */
    z-index: 2; /* Arka plan renginin üstünde olması için */
    
}


/* Sağ Panel (Kart) */
.options-card {
    width: 22%; /* Kartın genişliği %22 olarak ayarlandı */
    padding: 20px; /* Kartın iç boşluğu */
    box-sizing: border-box; /* Padding ve border'ı genişliğe dahil et */
    background-color: #fff; /* Kartın arka plan rengi beyaz */
    border: 2px solid #f4c542; /* Hafif sarı bir sınır */
    border-radius: 8px; /* Kartın köşelerini yuvarlat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.774); /* Hafif gölge efekti */
    position: absolute; /* Kartın konumunu sabit tut */
    top: 260px; /* Kartın üst kısmı, üstten 260px uzaklıkta */
    right: 20px; /* Kartın sağ kenarı, sağdan 20px uzaklıkta */
    margin-right: 200px; /* Kartın sağındaki boşluk */
    margin-top: 210px; /* Kartın üstündeki boşluk */
    z-index: 1000; /* Kartın diğer içeriklerin üstünde görünmesi için */
}

/* Hizmetler Başlığı */
.services-title {
    background-color: #f4c542; /* Sarı arka plan */
    color: #ffffff; /* Beyaz yazı rengi */
    padding: 10px; /* Başlığın iç boşluğu */
    margin: 0; /* Dış boşluğu sıfırla */
    text-align: center; /* Yazıyı ortala */
    border-radius: 8px; /* Başlığın köşelerini yuvarlat */
}

/* Hizmetler Listesi */
.services-list {
    list-style: none; /* Liste işaretlerini kaldır */
    padding: 0; /* İç boşluğu sıfırla */
    margin: 0; /* Dış boşluğu sıfırla */
}

/* Liste Elemanları */
.services-list li {
    margin: 10px 0; /* Liste elemanları arasında dikey boşluk */
}

/* Liste Elemanları İçindeki Bağlantılar */
.services-list li a {
    text-decoration: none; /* Alt çizgiyi kaldır */
    color: #000; /* Yazı rengi siyah */
    display: block; /* Tam genişlikte göster */
    padding: 10px; /* İç boşluk */
    border-radius: 4px; /* Kenarları yuvarlat */
    transition: background-color 0.3s, transform 0.3s; /* Hover efektleri için geçiş süresi */
}

/* Bağlantıların Hover Durumu */
.services-list li a:hover {
    background-color: #f4c542; /* Hover sırasında arka plan rengi sarı */
    color: #fff; /* Yazı rengi beyaz */
    transform: translateX(10px); /* Hover sırasında hafif sağa kaydırma efekti */
}


/* Sol Panel */
.left-panel {
    width: 75%; /* Sol panelin genişliği */
    height: 50%;
    padding: 20px;
    box-sizing: border-box;
    margin-left: 100px; /* Sağ panelden ayrılmasını sağlar */
    margin-top: 20px; /* Üstten boşluk */
}

/* Resim konteyneri */
.image-container {
    margin-bottom: 20px;
    
}

/* Resim boyutunu ayarlayabilmek için */
.image-container img {
    width: 70%; /* Genişlik sabit */
    height: 400px; /* Sabit yükseklik */
    display: block;
    object-fit: fill; /* Kapsayıcıyı doldurur, görüntüdeki bozulmaları engeller */
}

/* Açıklama Paragrafı */
.description {
    font-size: 16px;
    color: #333;
    margin-top: 10px;
    width: 70%; /* Paragraf genişliği resmin genişliği ile uyumlu olacak şekilde */
    box-sizing: border-box; /* Padding ve border'ı genişliğe dahil eder */
    text-align: justify;
    line-height: 1.8;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.hakkimizda-p{
    font-size: 30px;
    margin: 10px;
    font-style: italic;
    font-weight: bold;
}
/* Genel Mobil Düzenlemeler */
@media only screen and (min-width: 481px) and (max-width: 768px) {
    .left-panel {
        width: 80%; /* Tablet için %80 genişlik */
        margin-left: 10%; /* Ortalanması için sol boşluk */
        padding: 15px; /* Daha fazla iç boşluk */
        justify-content: center;
        align-items: center;
    }

    .options-card {
        width: 100%; /* Kart genişliğini %25 yapalım */
        position: relative; /* Banner'ın altında sabit kalsın */
        top: 50px; /* Kartın üst kısmı, üstten 200px uzaklıkta */
        right: 0; /* Sağdan 20px uzaklık */
        margin-top: 0; /* Kartın üstündeki boşluğu sıfırla */
        margin-right: 0; /* Kart sağda sabit kalsın */
        padding: 15px; /* İç boşluğu biraz daha artırdık */
        z-index: 1000; /* Kartın diğer içeriklerin üstünde görünmesi için */
    }

    .services-title {
        font-size: 22px; /* Başlık boyutunu ayarla */
    }

    .services-list li a {
        font-size: 18px; /* Liste elemanlarının yazı boyutunu ayarla */
    }

    .image-container img, .description {
        width: 100%; /* Resim ve paragraf genişlikleri yine %100 */
    }

    .fixed-banner {
        height: 150px; /* Tablet için banner yüksekliği */
    }

    .banner-text {
        font-size: 28px; /* Tablet için yazı boyutu */
    }
}

@media only screen and (max-width: 480px){
    .left-panel {
        width: 80%; /* Tablet için %80 genişlik */
        margin-left: 10%; /* Ortalanması için sol boşluk */
        padding: 15px; /* Daha fazla iç boşluk */
        justify-content: center;
        align-items: center;
    }

    .options-card {
        width: 100%; /* Kart genişliğini %25 yapalım */
        position: relative; /* Banner'ın altında sabit kalsın */
        top: 50px; /* Kartın üst kısmı, üstten 200px uzaklıkta */
        right: 0; /* Sağdan 20px uzaklık */
        margin-top: 0; /* Kartın üstündeki boşluğu sıfırla */
        margin-right: 0; /* Kart sağda sabit kalsın */
        padding: 15px; /* İç boşluğu biraz daha artırdık */
        z-index: 1000; /* Kartın diğer içeriklerin üstünde görünmesi için */
    }

    .services-title {
        font-size: 22px; /* Başlık boyutunu ayarla */
    }

    .services-list li a {
        font-size: 18px; /* Liste elemanlarının yazı boyutunu ayarla */
    }

    .image-container img, .description {
        width: 100%; /* Resim ve paragraf genişlikleri yine %100 */
    }

    .fixed-banner {
        height: 150px; /* Tablet için banner yüksekliği */
    }

    .banner-text {
        font-size: 28px; /* Tablet için yazı boyutu */
    }
}


/* Tablet Düzenlemeleri */
@media only screen and (min-width: 769px) and (max-width: 1024px)  {
    .left-panel {
        width: 80%; /* Tablet için %80 genişlik */
        margin-left: 10%; /* Ortalanması için sol boşluk */
        padding: 15px; /* Daha fazla iç boşluk */
        justify-content: center;
        align-items: center;
    }

    .options-card {
        width: 100%; /* Kart genişliğini %25 yapalım */
        position: relative; /* Banner'ın altında sabit kalsın */
        top: 50px; /* Kartın üst kısmı, üstten 200px uzaklıkta */
        right: 0; /* Sağdan 20px uzaklık */
        margin-top: 0; /* Kartın üstündeki boşluğu sıfırla */
        margin-right: 0; /* Kart sağda sabit kalsın */
        padding: 15px; /* İç boşluğu biraz daha artırdık */
        z-index: 1000; /* Kartın diğer içeriklerin üstünde görünmesi için */
    }

    .services-title {
        font-size: 22px; /* Başlık boyutunu ayarla */
    }

    .services-list li a {
        font-size: 18px; /* Liste elemanlarının yazı boyutunu ayarla */
    }

    .image-container img, .description {
        width: 100%; /* Resim ve paragraf genişlikleri yine %100 */
    }

    .fixed-banner {
        height: 150px; /* Tablet için banner yüksekliği */
    }

    .banner-text {
        font-size: 28px; /* Tablet için yazı boyutu */
    }
}