.about-us-page {
    font-family: 'Urbanist', sans-serif;
}

.about-us-header {
    position: relative;
    width: 100%; 
    background-size: cover;
    background-position: center;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: 'Urbanist', sans-serif;
}

.about-us-title {
    font-size: 4em;
    color: #FFF; /* Title color */
    margin: 0;
    text-align: center; /* Align title to the left */
}

.about-us-description {
    padding-top: 30px;
    font-family: 'Urbanist', sans-serif;
    font-size: 1.2em;
    text-align: center;
    padding-left: 20%;
    line-height: 2;
    padding-right: 20%;
}

.about-us-piece-container {
    display: flex;
    justify-content: center; /* Yatayda ortalama */
    align-items: center; /* Düşeyde ortalama */
    flex-wrap: wrap; /* İçerikleri satırlara sarmak için */
    gap: 20px; /* Ögeler arasındaki boşluk */
}

.piece-item {
    color: #6F6F6F;
    height: 140px;
    text-align: center; /* Yazıları ortalamak için */
    border-radius: 8px; /* Köşe yuvarlatma */
    padding: 30px; /* İç boşluk */
    margin-top: 20px;
    width: 150px; /* Genişlik */
    position: relative; /* İçerikleri doğru hizalamak için */
}

.piece-number {
    font-size: 2rem; /* Sayı font boyutu */
    color: #101010; /* Yazı rengi */
    font-weight: bold;
    position: relative; /* İçerikleri doğru hizalamak için */
}

.plus-sign {
    color: #389EBC; /* + işaretinin rengi */
    font-size: 2rem; /* + işaretinin font boyutu */
    position: absolute;
    left: 2rem; /* + işaretini sayının soluna yerleştirir */
    top: 0; /* Dikey konumlandırma */
}

.video-field {
    display: flex;
    flex-direction: column; /* İçerikleri dikey olarak hizalamak için */
    align-items: center; /* Yatayda ortalama */
    justify-content: center; /* Düşeyde ortalama */
    text-align: center; /* Yazıların ortalanması */
    padding: 20px; /* İç boşluk */
    margin: 0 auto; /* Sayfa içinde ortalama (opsiyonel) */
    max-width: 800px; /* İçeriğin genişliğini sınırlama (isteğe bağlı) */
}

.video-field-header {
    margin-bottom: 20px; /* Başlık ve açıklama arasına boşluk bırakma */
}

.video-field-header h4 {
    font-size: 2em; /* Başlık font boyutu */
    margin: 10px; /* Varsayılan margin'i kaldırma */
    color: #090208;
}

.video-field-header p {
    font-size: 1.2em; /* Açıklama font boyutu */
    margin: 0px; /* Varsayılan margin'i kaldırma */
    color: #6F6F6F;
}

iframe {
    max-width: 100%; /* Video genişliği, ekran boyutuna uyumlu */
}

.companies-section-header {
    margin-bottom: 20px; /* Başlık ve açıklama arasına boşluk bırakma */
}

.companies-section-header h4 {
    font-size: 2em; /* Başlık font boyutu */
    margin: 10px; /* Varsayılan margin'i kaldırma */
    color: #090208;
}

.companies-section-header p {
    font-size: 1.1em; /* Açıklama font boyutu */
    margin: 0px; /* Varsayılan margin'i kaldırma */
    color: #6F6F6F;
}

.companies-section {
    display: flex;
    flex-direction: column; /* İçerikleri dikey olarak hizalamak için */
    align-items: center; /* Yatayda ortalama */
    justify-content: center; /* Düşeyde ortalama */
    text-align: center; /* Yazıların ortalanması */
    padding: 20px; /* İç boşluk */
    margin: 0 auto; /* Sayfa içinde ortalama (opsiyonel) */
    margin-left: 5%;
    margin-right: 5%;
}

.reference-logos {
    padding-right: 4%;
    padding-left: 4%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 2rem 0;
    margin-bottom: 0px;
    gap: 50px;
}



.reference-logo {
    margin: 0 1rem;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.reference-logo:hover {
    filter: grayscale(0);
}

.our-story-container {
    gap: 20px; /* Space between image and text */
    padding: 8%;
}

.our-story-image-text-container {
    display: flex;
    width: 100%;
    align-items: flex-start; /* Align items to the top of the container */
    padding: 20px;
}

.our-story-image {
    width: 318px; 
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; 
    flex: 0.75;
}

.our-story-text {
    flex: 2;
    color: #6F6F6F;
    line-height: 2;
    padding-left: 10%;
    font-size: 18px;
}

.our-story-title {
    font-size: 2em; /* Başlık font boyutu */
    margin: 10px; /* Varsayılan margin'i kaldırma */
    color: #090208;
    text-align: center;
}

/* Responsive Styles */
@media (max-width: 768px) {

    .about-us-header{
        height: 200px;
    }

    .about-us-title {
        font-size: 2em;
    }

    .about-us-description {
        padding-left: 10%;
        padding-right: 10%;
        font-size: 1em;
    }

    

    .our-story-image-text-container {
        flex-direction: column;
        /* align-items: left; */
        
    }

    .our-story-image {
        all: unset;
        width: 70%;
        margin-left: -20px;
        margin-bottom: 20px;
        align-self: center;
    }

    .our-story-title{
        text-align: center;
        
        margin-left: 0px;
    }

    .our-story-text {
        padding-left: 0;
        font-size: 1em;
        margin-left: -10px!important;
        text-align: left;
    }

    .piece-item{
        margin: 0;
        padding: 5px;
    }

    
    .video-field-header p,
    
    .companies-section-header p {
        text-align: center;
        font-size: 1em;
    }

    .companies-section-header h4,
    .video-field-header h4{
        font-size: 1.2em;
    }

    .reference-logos {
        
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* İki sütunlu düzen */
        gap: 20px;
    }
    
    .reference-logo {
        margin: 0; /* Varsayılan margin'i kaldırma */
        padding: 0
        ;
        width: 100%!important; /* Logoların genişliğini kapsar */
    }
   
}