.image-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 700px;
    height: auto;
    aspect-ratio: 1/1;
    margin: 0 auto;
}

.image-wrapper img {
    position: absolute;
    width: 70%;
    height: auto;
    object-fit: cover;
    border-radius: 50%;
    z-index: -1;
}

.image-wrapper::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 1;
}

.link-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    pointer-events: none;
    z-index: 2;
}



    .link-wrapper::before {
        content: "";
        position: absolute;
        width: 700px;
        /* Çevreleyen çemberin çapını 700px yaptık */
        height: 700px;
        background-color: #1f05e62e;
        /* Siyah, transparan çember */
        border-radius: 50%;
        z-index: -1;
        /* Çevreleyen çemberi linklerin arkasına yerleştiriyoruz */
    }

    .link-wrapper a {
        position: absolute;
        pointer-events: auto;
        width: 20%;
        max-width: 140px;
        height: 10%;
        max-height: 60px;
        background: #e5d0dc;
        text-align: center;
        line-height: normal;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        color: white;
        text-decoration: none;
        font-size: 12px;
        font-weight: bold;
        font-family: Arial, sans-serif;
        z-index: 3;
        transition: all 0.3s ease;
        padding: 5px;
        text-align: center;
    }

/* Noktaları gizle */
/* Noktaları belirginleştirme ve büyütme */
/* Noktaları belirginleştirme ve büyütme */
/* Noktaları belirginleştirme ve içe siyah daire ekleme */
.points .point {
    position: absolute;
    width: 25px;
    /* Beyaz daire boyutu */
    height: 25px;
    background-color: #fff;
    /* Beyaz renk */
    border-radius: 50%;
    border: 2.5px solid black;
    /* Siyah daire */
    padding: 2.5px;
    /* Siyah dairenin boyutunu büyütme */
    display: none;
    z-index: 5;
    /* Noktalar linklerin üstünde olacak */
}

    .points .point::before {
        content: "";
        position: absolute;
        width: 10px;
        /* İçteki siyah daire boyutu */
        height: 10px;
        background-color: black;
        /* Siyah renk */
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.link-wrapper a:hover {
    transform: scale(1.2);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 14px;
}

    .link-wrapper a:hover .point {
        display: block;
        /* Hover durumunda ilgili noktayı göster */
    }

/* Dairesel düzeni rotate ile sağlama */
.link-wrapper a:nth-child(1) {
    transform: rotate(0deg) translateY(-300px);
}

.link-wrapper a:nth-child(2) {
    transform: rotate(36deg) translateY(-300px);
}

.link-wrapper a:nth-child(3) {
    transform: rotate(72deg) translateY(-300px);
}

.link-wrapper a:nth-child(4) {
    transform: rotate(108deg) translateY(-300px);
}

.link-wrapper a:nth-child(5) {
    transform: rotate(144deg) translateY(-300px);
}

.link-wrapper a:nth-child(6) {
    transform: rotate(180deg) translateY(-300px);
}

.link-wrapper a:nth-child(7) {
    transform: rotate(216deg) translateY(-300px);
}

.link-wrapper a:nth-child(8) {
    transform: rotate(252deg) translateY(-300px);
}

.link-wrapper a:nth-child(9) {
    transform: rotate(288deg) translateY(-300px);
}

.link-wrapper a:nth-child(10) {
    transform: rotate(324deg) translateY(-300px);
}

@media (max-width: 768px) {
    .image-wrapper {
        max-width: 90%;
    }

        .image-wrapper img {
            width: 60%;
        }

    .link-wrapper::before {
        width: 350px;
        /* Çemberin çapını küçült */
        height: 350px;
    }

    .link-wrapper a {
        width: 15%;
        max-width: 80px;
        height: 8%;
        max-height: 40px;
        font-size: 10px;
    }

        /* Linklerin mobil için daha yakın konumlanması */
        .link-wrapper a:nth-child(1) {
            transform: rotate(0deg) translateY(-150px);
        }

        .link-wrapper a:nth-child(2) {
            transform: rotate(36deg) translateY(-150px);
        }

        .link-wrapper a:nth-child(3) {
            transform: rotate(72deg) translateY(-150px);
        }

        .link-wrapper a:nth-child(4) {
            transform: rotate(108deg) translateY(-150px);
        }

        .link-wrapper a:nth-child(5) {
            transform: rotate(144deg) translateY(-150px);
        }

        .link-wrapper a:nth-child(6) {
            transform: rotate(180deg) translateY(-150px);
        }

        .link-wrapper a:nth-child(7) {
            transform: rotate(216deg) translateY(-150px);
        }

        .link-wrapper a:nth-child(8) {
            transform: rotate(252deg) translateY(-150px);
        }

        .link-wrapper a:nth-child(9) {
            transform: rotate(288deg) translateY(-150px);
        }

        .link-wrapper a:nth-child(10) {
            transform: rotate(324deg) translateY(-150px);
        }
}



.left-columns {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Sütunlar arasına boşluk koyar */
    justify-content: center;
    /* İçeriği dikeyde ortalar */
    align-items: center;
    /* İçeriği yatayda ortalar */
    height: 100vh;
    /* Sayfa yüksekliği kadar alır */
    padding: 20px;
    /* Sayfa kenarlarından biraz boşluk bırakır */
    box-sizing: border-box;
    /* Padding'in box modeline dahil olmasını sağlar */
}

.right-columns {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Butonlar arasındaki boşluk */
    justify-content: center;
    /* İçeriği dikeyde ortalar */
    align-items: center;
    /* İçeriği yatayda ortalar */
    height: 100vh;
    /* Sayfa yüksekliği kadar alır */
    padding: 20px;
    /* Sayfa kenarlarından biraz boşluk bırakır */
    box-sizing: border-box;
    /* Padding'in box modeline dahil olmasını sağlar */
}

.column {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.left-columns .column img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.left-columns .column {
    margin-bottom: 10px;
    /* Her resim arasında 10px boşluk bırakır */
}

.right-columns {
    display: flex;
    flex-direction: column;
    /* Stack the items vertically */
    gap: 20px;
    /* Adjust this value to control the space between each column */
}

.column {
    width: 100%;
    /* Ensure each column takes full width */
}

/* Sol ve Sağ Sütunlar */
.left-columns,
.right-columns {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Butonları Ortala */
.column {
    display: flex;
    justify-content: center;
}

/* Buton Tasarımı */
.btn-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 20px;
    background: #c59fb5;
    border-radius: 10px;
    text-decoration: none;
    color: #fff;
    /* Yazıları beyaz yap */
    font-weight: 500;
    transition: 0.3s ease;
    width: 220px;
    height: 50px;
    backdrop-filter: blur(10px);
    /* Arka planı bulanık yap */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    /* Hafif gölge efekti */
}

    /* Buton Hover Efekti */
    .btn-link:hover {
        background: rgba(0, 0, 0, 0.7);
        color: #00c3ff;
        /* Hover olduğunda mavi renk ver */
    }

/* İkon Stili (Tam Sola Yaslı) */
.icon {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain;
    margin-left: 10px;
}

.text {
    font-size: 16px;
    color: white;
    font-weight: 500;
}

/* Set background image */
.about {
    background-image: url('/img/carousel-1.jpg');
    /* Replace with your background image URL */
    background-size: cover;
    /* Ensures the image covers the entire area */
    background-position: center center;
    /* Center the background image */
    background-attachment: fixed;
    /* Keeps the background image fixed during scrolling */
    z-index: -1;
    /* Keeps it behind all other elements */
}

/* To make sure other elements stay above the background */
.container-fluid.about {
    position: relative;
    z-index: 1;
}

.image-wrapper,
.left-columns,
.right-columns {
    position: relative;
    z-index: 2;
    /* Ensures these elements are above the background */
}

/* Optional: To make sure content is readable if the background is dark */
.container-fluid.about {
    color: white;
}

@media (max-width: 1024px) {

    /* Sol Kolon */
    .left-columns {
        display: none;
        /* Sol kolonu gizler */
    }

    /* Sağ Kolon */
    .right-columns {
        display: none;
        /* Sağ kolonu gizler */
    }

    /* Diğer ayarlamalar... */
}

@media (max-width: 767px) {

    .left-columns,
    .right-columns {
        display: none;
        /* Mobilde sol ve sağ sütunları gizle */
    }
}