/* Существующие стили */
.header {margin-top: 0vw;}

.submain .gen_cm{
    background-color:rgb(255, 255, 255);
    min-height: 70vh;
    height: auto;
}
.submain .gen_cm .title{
height:auto;
width: 100%;

}


.submain .gen_cm .photo{
display: flex;
height:auto; /* Изменено с 45vw на auto для адаптивности */
width: 100%;
background-color: rgb(255, 255, 255);
position: relative;
align-items: flex-start;
flex-wrap: wrap; /* Добавлено для переноса на мобильных */
}

.submain .gen_cm .photo .picture{
height:40vw;
width: 45%;
margin-left: 4vw;
margin-top: 3vw;
background-position: center center;
background-size: 100% auto;
background-repeat: no-repeat;
}

.submain .gen_cm .photo .maininfo{
    height: auto; /* Изменено с 40vw на auto */

    width: 30vw;
    margin-left: 3vw;
    margin-top: 3vw;
    margin-bottom: 15vw;
}

.submain .gen_cm .photo .maininfo h3{
    padding-top:2vw;
}

.submain .gen_cm .photo .address{
float: right;

width: 30vw;
background-color: rgb(255, 255, 255);
}

/* Адаптация для разных экранов */

@media (max-width: 1440px) {
    /* Стили для 1440px уже заданы в основном блоке */
}

@media (max-width: 992px) {
    .submain .gen_cm .photo .picture {
        width: 90%; /* 90% от ширины родительского блока gen_c */
        height: 50vw; /* Увеличиваем высоту для пропорций */
        margin-left: 5%; /* Центрирование */
        margin-right: 5%;
    }
    
    .submain .gen_cm .photo .maininfo {
        width: 90%; /* Занимает всю ширину */
        margin-left: 5%;
        margin-right: 5%;
        margin-top: 4vw;
    }
}

@media (max-width: 768px) {
    .submain .gen_cm .photo {
        flex-direction: column; /* Вертикальное расположение */
    }
    
    .submain .gen_cm .photo .picture {
        width: 90%;
        height: 60vw;
        margin-left: 5%;
        margin-right: 5%;
        margin-top: 4vw;
    }
    
    .submain .gen_cm .photo .maininfo {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        margin-top: 4vw;
        margin-bottom: 4vw;
    }
    

    
    .submain .gen_cm .photo .maininfo h3 {
        padding-top: 3vw;
        font-size: 1.2em;
    }
    
    .submain .gen_cm .photo .maininfo p {
        font-size: 0.95em;
        line-height: 1.4;
    }
}

@media (max-width: 576px) {
    .submain .gen_cm .title h1{ font-size: 7.5vw;}
    .submain .gen_cm .photo .picture {
        width: 92%;
        height: 65vw;
        margin-left: 4%;
        margin-right: 4%;
    }
    
    .submain .gen_cm .photo .maininfo {
        width: 92%;
        margin-left: 4%;
        margin-right: 4%;
    }
    

    .submain .gen_cm .photo .maininfo h3 {
        font-size: 1.1em;
        padding-top: 4vw;
    }
    
    .submain .gen_cm .photo .maininfo p {
        font-size: 0.9em;
        line-height: 1.5;
        margin-bottom: 2vw;
    }
}

@media (max-width: 400px) {
    .submain .gen_cm .title h1{ font-size: 10vw;}
    .submain .gen_cm .photo .picture {
        width: 90vw;
        height: 70vw;
        margin-left: 5vw;
        margin-top: 5vw;
    }
    
    .submain .gen_cm .photo .maininfo {
        width: 94%;
        margin-left: 3%;
        margin-right: 3%;
        margin-top: 5vw;
        margin-bottom: 5vw;
    }
    
   
    
    .submain .gen_cm .photo .maininfo h3 {
        font-size: 1em;
        padding-top: 5vw;
    }
    
    .submain .gen_cm .photo .maininfo p {
        font-size: 0.85em;
        line-height: 1.6;
        margin-bottom: 3vw;
    }
}

@media (max-width: 350px) {
    .submain .gen_cm .title h1{ font-size: 10vw;}
    .submain .gen_cm .photo .picture {
        width: 85vw;
        height: 75vw;
        margin-left: 5vw;

    }
    
    .submain .gen_cm .photo .maininfo {
        width: 85vw;
        margin-left: 5vw;

    }
    

    
    .submain .gen_cm .photo .maininfo h3 {
              padding-top: 10vw;
        font-size: 0.95em;
    }
    
    .submain .gen_cm .photo .maininfo p {
        font-size: 0.8em;
        line-height: 1.7;
    }
}

/* --- Улучшение читаемости текста в блоке "maininfo" --- */

.submain .gen .maininfo {
    /* Добавляем внутренние отступы, чтобы текст не прилегал вплотную к краям */
    padding: 5px 25px;
    /* Увеличиваем межстрочный интервал для лучшей читаемости */
    line-height: 1.6;

}

.submain .gen .maininfo p {
    /* Добавляем отступ между абзацами */
    margin-bottom: 15px;
    /* Увеличиваем размер шрифта для основного текста */
    font-size: 18px;
}

.submain .gen .maininfo h3 {
    /* Увеличиваем размер и меняем цвет заголовков, чтобы они выделялись */
    font-size: 24px;

    /* Добавляем отступы сверху и снизу */
    margin: 0px 0 10px 0;
    /* Убираем стандартное жирное начертание и добавляем свое */
    font-weight: 600;
}

.submain .gen .maininfo ul {
    /* Убираем стандартные отступы и маркеры у списка */
    list-style: none;
    padding-left: 0;
}

.submain .gen .maininfo li {
    /* Добавляем свой красивый маркер перед каждым пунктом списка */
    list-style-type: none;
    padding-left: 25px;
    position: relative;
    margin-bottom: 12px;
    font-size: 18px;
    line-height: 1.5;
}

/* Создаем кастомный маркер для списка */
.submain .gen .maininfo li::before {
    content: "•"; /* Символ маркера */
    color: rgb(0, 70, 155);
    font-size: 22px;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: -2px;
}

/* Медиа-запрос для адаптивности на мобильных устройствах */
@media (max-width: 768px) {
    .submain .gen .maininfo {
        padding: 15px;
    }
    .submain .gen .maininfo p,
    .submain .gen .maininfo li {
        font-size: 16px;
    }
    .submain .gen .maininfo h3 {
        font-size: 20px;
    }
}