body { /* Или другой элемент, который вы используете как фон */
    background: linear-gradient(to right,
            #D8BFD8, /* Фиолетовый цвет слева */
            lightgrey 50%, /* Светло-серый цвет в центре (50% от ширины) */
            #D8BFD8); /* Фиолетовый цвет справа */
    margin: 0; /* Убираем стандартные отступы body */
}

.header {
    background-color: #f0f0f0; /* Цвет фона для шапки (можете изменить) */
    padding: 10px 20px; /* Отступы сверху и снизу, слева и справа */
    background-image: url('img/hed1.jpg'); /* Укажите путь к вашему изображению */
    background-size: cover; /* Масштабирование изображения для покрытия всей области */
    background-position: center; /* Центровка изображения */
    background-repeat: no-repeat; /* Отключает повторение изображения */
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo {
    width: 75px; /* Установите желаемую ширину */
    height: auto; /* Автоматическая высота для сохранения пропорций */
    border-radius: 10px; /* Значение радиуса закругления */
}

.language-button {
    margin-left: 35px; /* Отступ слева от кнопки */
    padding: 8px 12px; /* Внутренние отступы для текста кнопки */
    cursor: pointer; /* Изменение курсора при наведении */
    border: none; /* Убираем стандартную границу кнопки */
    background-color: #E6E6FA; /* Задаем серый цвет фона (можете изменить на любой другой) */
    color: #333; /* Задаем темный цвет текста (можете изменить) */
    border-radius: 8px; /* Задаем радиус скругления углов */
    font-size: 16px; /* Размер шрифта */
    transition: background-color 0.3s ease; /* Плавный переход цвета фона при наведении */
}

.language-button:hover {
    background-color: #D8BFD8; /* Цвет фона при наведении */
}

.main-content {
    display: flex;
    justify-content: center; /* Размещаем элементы по центру горизонтали */
    align-items: center; /* Выравнивание по вертикали по центру */
    padding: 20px; /* Отступы вокруг основного контента */
    margin-top: 20px; /* Отступ сверху от шапки */
}

.a {
    background: linear-gradient(135deg, #6F4E8B, #E6A2F2); /* Цвет фона */
    border-radius: 40px; /* Скругление углов */
    border: 2px solid silver; /* Серебряная обводка */
    padding: 60px;
    text-align: center;
    box-sizing: border-box;
    margin-right: 75px; /* Отступ справа от текстового блока */
}

.a1 {
    font-weight: 600;
    font-size: 64px;
    line-height: 150%;
    color: #E6E6FA;
    margin-top: 0;
    margin-bottom: 60px;
}

.a2 {
    font-weight: 600;
    font-size: 24px;
    line-height: 112%;
    color: #E6E6FA;
    margin-top: 0;
    margin-bottom: 24px;
}

.a3 {
    font-weight: 600;
    font-size: 32px;
    line-height: 112%;
    color: #E6E6FA;
    margin-top: 0;
    margin-bottom: 24px;
}


.my-image {
    border-radius: 40px; /* Задайте желаемый радиус скругления */
    width: 600px;
    height: 500px;
    object-fit: cover; /* Чтобы изображение корректно заполняло контейнер */
}

.main-contentA {
	background: linear-gradient(135deg, #6F4E8B, #E6A2F2);
	display: flex;
    justify-content: center; /* Размещаем элементы по центру горизонтали */
    align-items: center; /* Выравнивание по вертикали по центру */
    padding: 20px; /* Отступы вокруг основного контента */
    margin-top: 20px; /* Отступ сверху от шапки */
}

.main-contentA > div {
  margin-right: 50px; /* Отступ справа */
  margin-left: 40px; /* Отступ слева */
}

.slider-container {
  position: relative; /* Чтобы позиционировать кнопки относительно контейнера */
  width: 100%; /* Или задайте нужную ширину */
  overflow: hidden; /* Скрывает контент, выходящий за границы */
}

.slider-wrapper {
  display: flex; /* Размещает слайды в одну строку */
  transition: transform 0.3s ease; /* Плавная анимация при прокрутке */
}

.slide {
  flex: 0 0 auto; /* Не сжиматься, не расти, занимать свою ширину */
  width: calc(100% / 3); /* Показываем по 3 слайда (подстройте под себя) */
  padding: 10px; /* Отступы внутри слайда */
  box-sizing: border-box; /* Чтобы padding не увеличивал ширину */
  text-align: center;
}

.slider-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 1px solid #ccc;
  padding: 15px 10px;
  cursor: pointer;
  z-index: 10; /* Чтобы кнопки были поверх слайдов */
}

.slider-button.prev {
  left: 10px;
  background-color: #D8BFD8; /* Задаем серый цвет фона (можете изменить на любой другой) */
  color: #333; /* Задаем темный цвет текста (можете изменить) */
  border-radius: 25px; /* Задаем радиус скругления углов */
  font-size: 16px; /* Размер шрифта */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.slider-button.prev:hover {
  background-color: #6F4E8B; /* Колір фону при наведенні (можете змінити) */
}

.slider-button.next {
  right: 10px;
  background-color: #D8BFD8; /* Задаем серый цвет фона (можете изменить на любой другой) */
  color: #333; /* Задаем темный цвет текста (можете изменить) */
  border-radius: 25px; /* Задаем радиус скругления углов */
  font-size: 16px; /* Размер шрифта */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.slider-button.next:hover {
  background-color: #6F4E8B; /* Колір фону при наведенні (можете змінити) */
}

/* Стили для ваших карточек (дивов) внутри .slide */
.slide > img {
  max-width: 100%;
  height: auto;
}

.pict{
  border-radius: 40px;
}

.main-contentB {
	margin-top: 30px;
}

.main-contentC {
	background: linear-gradient(135deg, #6F4E8B, #E6A2F2);
	display: flex;
    justify-content: center; /* Размещаем элементы по центру горизонтали */
    align-items: center; /* Выравнивание по вертикали по центру */
    padding: 20px; /* Отступы вокруг основного контента */
    margin-top: 20px; /* Отступ сверху от шапки */
	margin-top: 30px;
	gap: 200px; /* Отступ между элементами */
}

.pictC {
	width: 150px;
	height: auto;
	border-radius: 10px;
}
.footer {
	background-color: #f0f0f0; /* Цвет фона для шапки (можете изменить) */
    padding: 30px 50px; /* Отступы сверху и снизу, слева и справа */
    background-image: url('img/hed1.jpg'); /* Укажите путь к вашему изображению */
    background-size: cover; /* Масштабирование изображения для покрытия всей области */
    background-position: center; /* Центровка изображения */
}