.coach-card {
    position: relative; /* Устанавливает контекст позиционирования для абсолютно позиционированных элементов внутри карточки */
    margin: 25px;
    width: 500px;
    height: 300px;
    border-radius: 8px;
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 1.2); /* Shadow effect */
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    z-index: 5;
    transition: transform 0.2s; /* Smooth transition for hover effect */
    overflow: visible; /* Позволяет содержимому выходить за пределы границ карточки */
    background-color: #fff; /* Set background color to white */
}

.coach-card:hover {
    transform: scale(1.05); /* Легкое увеличение карточки при наведении курсора */
}

.coach-card img {
    width: 50%; /* Устанавливает ширину изображения на половину ширины карточки */
    height: 100%; /* Устанавливает высоту изображения на полную высоту карточки */
    object-fit: cover; /* Обеспечивает полное покрытие области изображения, сохраняя пропорции */
    border-radius: 8px 0 0 8px; /* Закругляет верхний левый и нижний левый углы изображения */
    overflow: hidden; /* Ограничивает содержимое границами изображения */
}

.coach-card div {
    width: 50%; /* Устанавливает ширину текстового блока на половину карточки */
    padding: 10px; /* Добавляет отступы внутри текстового блока */
    display: flex; /* Устанавливает флексбокс для текстового блока */
    flex-direction: column; /* Размещает элементы флексбокса вертикально */
    justify-content: center; /* Центрирует содержимое по вертикали */
    color: #000; /* Устанавливает черный цвет текста */
}

.coach-card h2 {
    position: absolute; /* Абсолютное позиционирование для точного управления местоположением */
    bottom: 0; /* Размещает элемент по нижнему краю карточки */
    left: 0; /* Размещает элемент по левому краю карточки */
    transform: translate(-14%, -60%); /* Сдвигает элемент немного за пределы карточки влево и поднимает вверх */
    background-color: white; /* Устанавливает белый фон для текста ФИО */
    color: black; /* Устанавливает черный цвет текста */
    margin: 0; /* Убирает внешние отступы */
    padding: 10px 20px; /* Добавляет внутренние отступы для создания визуального прямоугольника */
    font-size: 1.1em; /* Устанавливает размер шрифта */
    text-align: center; /* Центрирует текст по горизонтали */
    box-shadow: 0px 3px 8px rgba(0,0,0,1.1); /* Добавляет легкую тень для улучшения видимости */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Добавляет тень к тексту */
    z-index: 1; /* Устанавливает элемент выше других элементов на странице */
    font-weight: 700;
}

.coach-card p {
    margin: 0; /* Убирает внешние отступы */
    color: #000; /* Устанавливает черный цвет текста */
    font-size: 0.8em; /* Устанавливает размер шрифта */
    line-height: 1.8; /* Устанавливает межстрочный интервал */
    font-weight: bold; /* Устанавливает жирное начертание шрифта */
    text-align: left;
}

.row {
    display: flex; /* Устанавливает флексбокс для строки */
    justify-content: center; /* Распределяет элементы внутри строки равномерно */
    width: 100%; /* Устанавливает ширину строки на 100% */
    margin-bottom: 20px; /* Добавляет нижний отступ */
}

.row:last-child {
    justify-content: center; /* Центрирует содержимое последней строки */
}

a {
    text-decoration: none; /* Убирает подчеркивание у ссылок */
    color: inherit; /* Наследует цвет текста */
}

a:hover, a:focus, a:active {
    text-decoration: none; /* Убирает подчеркивание при наведении, фокусе и активации */
    color: inherit; /* Сохраняет наследуемый цвет текста */
}

@media (max-width: 550px) {
    .row {
        flex-direction: column; /* Изменяем направление flex на вертикальное для мобильных устройств */
        align-items: center; /* Центрируем карточки по горизонтали */
        margin-bottom: 0px; /* Добавляет нижний отступ */
    }

    .coach-card {
        width: 95%;
        height: 250px;
        margin: 15px;
}

.coach-card:hover {
    transform: none; /* Легкое увеличение карточки при наведении курсора */
}


.coach-card h2 {
    transform: translate(-10%, -60%);
    padding: 7px 0px; /* Добавляет внутренние отступы для создания визуального прямоугольника */
    width: 195px;
    font-size: 0.79em; /* Устанавливает размер шрифта */
    bottom: 5px; /* Размещает элемент по нижнему краю карточки */
    left: 0px; /* Размещает элемент по левому краю карточки */
    border-radius: 1px;
}

.coach-card p {
    font-size: 0.7em; /* Устанавливает размер шрифта */
    line-height: 1.5; /* Устанавливает межстрочный интервал */
}


}
@media (min-width: 2000px) {
.coach-card {
    width: 650px;
    height: 400px;
    border-radius: 10px;
}




.coach-card h2 {
    font-size: 1.4em; /* Устанавливает размер шрифта */
}

.coach-card p {
    font-size: 1.1em; /* Устанавливает размер шрифта */
}

.row {
    margin-bottom: 30px; /* Добавляет нижний отступ */
}

}
@media (min-width: 4000px) {
.coach-card {
    margin: 50px;
    width: 900px;
    height: 600px;
    border-radius: 16px;
}


.coach-card img {
    border-radius: 16px 0 0 16px; /* Закругляет верхний левый и нижний левый углы изображения */
}

.coach-card div {
    padding: 20px; /* Добавляет отступы внутри текстового блока */
}

.coach-card h2 {
    padding: 20px 40px; /* Добавляет внутренние отступы для создания визуального прямоугольника */
}


.row {
    margin-bottom: 40px; /* Добавляет нижний отступ */
}
}