/* =================== СТИЛІ ДЛЯ СЕКЦІЇ "ПРО МЕНЕ" (ABOUT) =================== */

.about-section {
    padding: 40px 20px;
    background-color: #ffffff;
    /* Чистий білий фон */
}

.underline {
    display: block;
    width: 100%;
    height: 3px;
    background: linear-gradient(45deg, #007bff, #0056b3);
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.35);
    border-radius: 50px;
}

/* * СТИЛІ ЗАГОЛОВКІВ СЕКЦІЇ
 * (Вони вже мають бути у тебе, але про всяк випадок дублюю)
 */
.about-section .section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #333;
}

.about-section .section-subtitle {
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 40px;
    /* Більший відступ до контенту */
    color: #666;
}

/* * Головний контейнер
 * Використовуємо Flexbox для створення 2-х колонок 
 */
.about-wrapper {
    display: flex;
    flex-wrap: wrap;
    /* Для мобільної адаптації */
    align-items: center;
    /* Вертикальне вирівнювання по центру */
    justify-content: center;
    gap: 50px;
    /* Простір між фото та текстом */

    max-width: 1100px;
    /* Обмежуємо ширину для читабельності */
    margin: 0 auto;
}

/* --- Колонка 1: Фото --- */
.about-image {
    flex: 1;
    /* Дозволяє колонці рости/стискатися */
    min-width: 300px;
    /* Мінімальна ширина колонки */
    text-align: center;
}

.about-image img {
    width: 100%;
    max-width: 500px;
    /* Обмежуємо макс. розмір фото */
    height: auto;

    /* Робимо фото круглим - це виглядає стильно */
    border-radius: 50%;

    border: 7px solid #ffffff;
    /* Біла рамка */
    /* Тінь, щоб "відірвати" фото від фону */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* --- Колонка 2: Текст --- */
.about-text {
    flex: 1.5;
    /* Робимо колонку з текстом трохи ширшою (1.5 до 1) */
    min-width: 300px;
    text-align: left;
    /* Текст для читання має бути зліва */
}

.about-text h3 {
    font-size: 2.2rem;
    /* Велике ім'я */
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}

.about-text .about-tagline {
    display: block;
    font-size: 1.2rem;
    font-weight: 500;
    color: #007bff;
    /* Використовуємо наш синій акцентний колір */
    margin-bottom: 25px;
    font-style: italic;
}

/* * СТИЛІ ДЛЯ ЧИТАБЕЛЬНОГО ТЕКСТУ (Дуже важливо!) 
 */
.about-text p {
    font-size: 1.05rem;
    /* Трохи більший шрифт */
    line-height: 1.7;
    /* Збільшений міжрядковий інтервал */
    color: #555;
    /* Не чисто чорний, а темно-сірий (легше для очей) */
    margin-bottom: 20px;
}

/* --- Список переваг --- */
.about-principles {
    list-style: none;
    /* Прибираємо стандартні крапки */
    padding-left: 0;
    margin-top: 30px;
}

.about-principles li {
    position: relative;
    /* Потрібно для позиціонування іконки */
    padding-left: 35px;
    /* Залишаємо місце для іконки */
    margin-bottom: 15px;
    font-size: 1rem;
    line-height: 1.6;
}

/* Іконка-галочка */
.about-principles .icon {
    position: absolute;
    left: 0;
    top: 2px;
    color: #007bff;
    /* Синій акцент */
    font-weight: 700;
    font-size: 1.2rem;
}

/* --- АДАПТАЦІЯ ДЛЯ МОБІЛЬНИХ --- */
@media (max-width: 768px) {
    .about-wrapper {
        /* На мобільних ставимо колонки одну під одною */
        flex-direction: column;
        gap: 30px;
        /* Зменшуємо відступ */
    }
    .about-section .section-title {
        font-size: 2rem;
    }
    .about-section .section-subtitle {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }
    .about-image {
        min-width: auto;
        /* Скидаємо мін. ширину */
    }

    .about-image img {
        max-width: 280px;
        /* Робимо фото меншим на мобільних */
    }

    /* На мобільних центруємо текст */
    .about-text {
        text-align: center;
    }

    .about-text p,
    .about-principles li {
        text-align: left;
        /* ...але самі параграфи вирівнюємо по лівому краю */
    }
}