.three-text-field-section {
    display: flex;
    align-items: center; /* Metin ve resmin üstten hizalanmasını sağlar */
    justify-content: flex-start;
    margin: 40px;
    font-family: 'Urbanist', sans-serif;
}

/* Resmi solda hizalar */
.three-text-field-section img {
    max-width: 50%; /* Resim genişliğini ayarlar */
    height: auto; /* Resmin orantılı şekilde yeniden boyutlandırılmasını sağlar */
    margin-right: 5%; /* Resim ile metin arasında boşluk bırakır */
}

/* Metin alanını hizalar */
.three-text-field-text {
    flex: 1; /* Metin alanının kalan alanı kaplamasını sağlar */
    display: flex; /* Flexbox kullanarak içeriği hizalar */
    flex-direction: column; /* Metinleri dikey olarak düzenler */
    align-items: left; /* Metinleri ortalar */
    text-align: left; /* Metinleri ortalar */
}

.three-text-field-text h4 {
    font-size: 1.8rem;
    max-width: 70%;
    font-weight: 600;
    color: #12022F; /* Başlık rengi */
    margin-bottom: 5px; /* Başlıklar arasında küçük boşluk */
}

.three-text-field-text p {
    font-size: 1.2rem;
    max-width: 75%;
    font-weight: 400;
    color: #594D6D; /* Alt başlık rengi */
    margin-bottom: 15px; /* Alt başlıklar arasında boşluk */
}

/* Tablet ve mobil cihazlar için stil */
@media (max-width: 1024px) {
    .three-text-field-section {
        flex-direction: column; /* Dikey hizalama */
        text-align: center; /* Metinleri ortalar */
    }

    .three-text-field-section img {
        max-width: 80%; /* Resmin genişliğini %80'e ayarla */
        margin-bottom: 20px;
        margin-right: 0; /* Resim ile metin arasında boşluk bırakma */
    }

    .three-text-field-text {
        align-items: center; /* Metinleri ortalar */
        text-align: center; /* Metinleri ortalar */
    }

    .three-text-field-text h4 {
        font-size: 1.6rem; /* Başlık boyutunu küçült */
    }

    .three-text-field-text p {
        font-size: 1.1rem; /* Alt başlık boyutunu küçült */
    }
}

@media (max-width: 768px) {
    .three-text-field-section {
        flex-direction: column; /* Dikey hizalama */
        text-align: center; /* Metinleri ortalar */
    }

    .three-text-field-section img {
        max-width: 100%; /* Resmi genişliğe yay */
        margin-bottom: 20px; /* Resim ile metinler arasında boşluk */
        margin-right: 0; /* Resim ile metin arasında boşluk bırakma */
    }

    .three-text-field-text h4 {
        font-size: 1.5rem; /* Başlık boyutunu küçült */
    }

    .three-text-field-text p {
        font-size: 1rem; /* Alt başlık boyutunu küçült */
    }
}

@media (max-width: 480px) {
    .three-text-field-text h4 {
        font-size: 1.2rem; /* Başlık boyutunu küçült */
    }

    .three-text-field-text p {
        font-size: 1rem; /* Alt başlık boyutunu küçült */
    }
}