.blog-header {
    font-size: 36px;
    margin-bottom: 20px;
    margin-left: 5%;
    font-family: 'Urbanist', sans-serif;
}

.labels-container {
    display: flex;
    justify-content: left; /* Labelları sola hizala */
    margin-left: 5%;
    margin-bottom: 2%; /* Etiketlerle içerik arasındaki boşluk */
    flex-wrap: wrap; /* Küçük ekranlarda etiketlerin alt alta gelmesini sağlar */
}

.labels-container button {
    color: #546166; /* Yazı rengi */
    border: none;
    padding: 10px 0px;
    font-size: 18px!important;
    margin-right: 20px; /* Etiketler arasındaki boşluk */
    cursor: pointer;
    background: none; /* Arka plan rengini kaldır */
    font-weight: 300;
}

.labels-container button.active {
    color: #000000; /* Seçili durum rengi */
    font-weight: 600;
}

.blog-cards-container {
    padding-right: 5%;
    padding-left: 5%;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, 1fr); /* Büyük ekranlarda dört sütun */
}

.blog-card {
    padding-bottom: 80px!important;
    font-family: 'Urbanist', sans-serif;
    background-color: #fff; /* Beyaz arka plan */
    overflow: hidden; /* Kenarlık dışına taşan içeriği gizle */
    display: flex;
    flex-direction: column; /* Kartın içeriğini dikey hizalayın */
    align-items: center; /* Kartın içeriğini yatayda ortalayın */
}

.blog-image {
    background-size: cover;
    background-position: center;
    width: 100%; /* Resim kartın genişliğine uyacak şekilde */
    height: 0;
    padding-top: 100%; /* Kare formunu koru */
    position: relative; /* Pozisyonlama için */
}

.blog-card-content {
    padding: 20px;
    text-align: center; /* Metin hizalaması */
    width: 100%; /* İçeriğin genişliğini kartla aynı yap */
}

.blog-card-date {
    text-align: left;
    font-size: 14px;
    font-family: 'Urbanist', sans-serif;
}

.blog-image-overlay {
    position: absolute;
    top: 10px; /* Üstten 10px uzaklık */
    right: 10px; /* Sağdan 10px uzaklık */
    background-color: rgba(255, 255, 255, 0.5); /* Yarı şeffaf arka plan rengi */
    color: white; /* Metin rengi */
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 14px; /* Metin boyutu */
    font-family: 'Urbanist', sans-serif;
}

.blog-card-title {
    font-size: 18px;
    color: #101010;
    margin: 10px 0;
    text-align: left;
}

.blog-card-description {
    font-size: 18px;
    text-align: left;
    color: #6F6F6F;
}

.blog-card-link {
    text-decoration: none; /* Bağlantı altını çizgi olmadan yap */
    color: inherit; /* Metin rengini miras al */
}


.slider-hero-section {
    position: relative;
    max-height: 450px; /* Yüksekliği başlangıç olarak ayarladım */
    overflow: hidden;
    
}

.hero-container {
    background-image: url('https://uniticmarketing.com/uploads/thumbnail_Image_11_bb7654f9ec.png');
    position: relative;
    height: 500px;
    font-family: 'Urbanist', sans-serif;
    width: 100%;
    background-size: cover;
    background-position: center;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex; /* İçeriği merkezde hizalamak için */
    flex-direction: column; /* Başlık ve açıklamanın dikeyde hizalanması için */
    align-items: center; /* Yatayda merkezde hizalamak için */
    justify-content: center; /* Dikeyde merkezde hizalamak için */
    padding: 20px;
    box-sizing: border-box; /* Padding'i toplam genişlik ve yüksekliğe dahil etmek için */
}

.hero-title {
    font-size: 3em; /* Başlık boyutu */
    margin-right: 20%;
    text-align: center;
    margin-left: 20%;
    width: 100%;
    font-weight: bold;
    color: #fff;
    margin-top: 10%;
}

.hero-description {
    text-align: center;
    margin-right: 35%;
    margin-left: 35%;

    width: 100%;
    line-height: 2;
    font-size:1.5em;;
    color: #fff;
    font-weight: 100;
    margin-bottom: 160px;
}

.custom-dots {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
  
  .custom-dot {
    background: none;
    border: none;
    color: #000;
    font-size: 1rem;
    margin: 0 5px;
    cursor: pointer;
  }
  
  .custom-dot.slick-active {
    font-weight: bold;
  }
  
  .slick-prev, .slick-next {
    z-index: 1000!important;  /* Ensure slider buttons are on top */
    display: block !important; /* Ensure they are displayed */
    opacity: 1 !important; /* Ensure they are fully visible */
  }
  

@media(min-width: 767px) {
    .blog-cards-slider{
        display: none;
    }
} 







@media (max-width: 600px) {
    .hero-title {
        font-size: 1.8rem; /* Mobil ekranlarda başlık boyutunu daha da küçült */
        text-align: center;
        margin-right: 10%;
        margin-top: 0px;
        margin-left: 10%;
    }

    .hero-description {
        font-size: 1rem; /* Mobil ekranlarda açıklama boyutunu daha da küçült */
        text-align: center;
        width: 100%;

    }

    .blog-card-title {
        font-size: 4.7vw;
        margin: 0;
        width: 90vw!important;
        color: #fff;
      }
    
      .blog-card-description {
        font-size: 3.7vw;
        margin: 5px 0 0;
        width: 90vw!important;
        color: #fff; /* Açıklama beyaz */
      }
    
      .blog-card-date {
        width: 90vw!important;
        font-size: 3.7vw;
        color: #fff; /* Tarih beyaz */
      }

    .blog-card {
        margin-left: 10px;
        width: 90vw; /* Mobilde genişliği biraz artır */
        height: 90vw; /* Mobilde yüksekliği biraz artır */
        max-width: none; /* Maksimum genişliği kaldır */
        max-height: none; /* Maksimum yüksekliği kaldır */
        border-radius: 8px!important; /* Köşeleri yuvarlat */
    }

    
    
    .blog-cards-container {
        display: none;
    }
    
    .blog-header {
        padding-left: 20px; /* Sol paddingi küçült */
    }

    .blog-image {
        background-size: cover;
        background-position: center;
        width: 100%;
        filter: brightness(50%); /* Resmi biraz karart */
        height: 200px; /* Küçük ekranlarda resim yüksekliğini ayarlayın */
        position: relative;
      }

    .labels-container {
        display: row;
        justify-content: left; /* Labelları sola hizala */
        padding-left: 0; /* Sol padding */
        font-size: 3.5vw!important;
        margin-bottom: 2%; /* Etiketlerle içerik arasındaki boşluk */
        flex-wrap:nowrap; /* Küçük ekranlarda etiketlerin alt alta gelmesini sağlar */
        padding-right: 0px!important;
        gap: 0px!important;
        margin-right: 10px!important;
        font-weight: lighter!important;
        margin-left: 10px!important;
    }

    .blog-card-content {
        margin-left: 50px;
        position: absolute;
        margin-top: 2.6%!important;
        color: #fff; /* Beyaz yazı */
        padding-left: 1.5%;
        padding-right: 1.5%;
      }





    .labels-container button {
        display: none;
        
    }

    .slider-hero-section {
        position: relative;
        height: 350px; /* Yüksekliği başlangıç olarak ayarladım */
        overflow: hidden;
        padding: 0px!important

        
    }


    

    
    
}