/* Основной стиль для текста */
.text-prof {
    background-color: rgba(255, 255, 255, 0.15);
    border: 2px solid #ffffffcc; /* рамка со всех сторон */
    padding: 20px 25px;
    border-radius: 12px;
    color: #fff;
    font-size: 18px;
    line-height: 1.6;
    text-align: left;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    position: absolute;
    width: 35%;                     /* Текст занимает до 35% ширины экрана */                /* Отступ от левого края */
    margin-top: 20%;
    left: 20px;
}

.Gallery {
    width: 45%;                           /* Галерея занимает 45% ширины экрана */
    height: 500px;                        /* Фиксированная высота галереи */
    margin-right: 5%;                     /* Отступ справа 5% */
    position: absolute;
    top: 60%;                             /* Центрируем по вертикали */
    transform: translateY(-50%);          /* Центрируем по вертикали */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;                     /* Чтобы изображения не выходили за пределы */
    right: 0;                             /* Расположим галерею справа */
}

/* Слайды */
.mySlides {
    display: none;
    position: absolute;
    width: 100%;                          /* Слайды занимают всю ширину галереи */
    height: 100%;                         /* Слайды заполняют всю высоту галереи */
    display: flex;
    justify-content: center;              /* Центрируем изображения по горизонтали */
    align-items: center;                  /* Центрируем изображения по вертикали */
}

/* Изображения */
.mySlides img {
    max-width: 100%;                      /* Изображения не выходят за границы */
    height: auto;                         /* Пропорциональная высота */
    object-fit: contain;                  /* Сохранение пропорций */
    max-height: 100%;                     /* Изображения будут растягиваться по высоте */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
    transition: transform 0.3s ease;
}

/* Кнопки переключения */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);         /* Центрируем кнопки по вертикали */
    font-size: 28px;
    color: white;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    padding: 12px;
    cursor: pointer;
    z-index: 10;                         /* Устанавливаем высокий z-index */
    user-select: none;
}

.prev:hover, .next:hover {
    background: rgba(0,0,0,0.8);
}

.prev {
    left: 10px;                          /* Располагаем кнопку "Назад" слева */
}

.next {
    right: 10px;                         /* Располагаем кнопку "Вперед" справа */
}


.numbertext {
    color: #000000;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 10px;
    left: 10px;
  }