/* Оголошення змінних для використання в стилях */ :root { --SlideHeight: 550px; /* Висота слайдів */ --BackgroundImgColor: #828074; /* Колір неактивних слайдів */ } /* Стилі для кожного слайду */ .custom-slider .item { width: 80% !important; /* Ширина слайду 80% від ширини контейнера */ margin: 0 auto; /* Центрування слайду по горизонталі */ } /* Стилі для картки слайду */ .custom-slider .card { display: flex; /* Використовуємо флексбокс для вирівнювання елементів */ align-items: center; /* Вертикальне вирівнювання елементів по центру */ justify-content: center; /* Горизонтальне вирівнювання елементів по центру */ height: var(--SlideHeight); /* Висота картки дорівнює змінній --SlideHeight */ background: #fff; /* Білий фон картки */ border-radius: 8px; /* Округлені кути картки */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Легка тінь для об'єму */ overflow: hidden; /* Приховує вміст, що виходить за межі картки */ } /* Стилі для контейнера зображення */ .custom-slider .img { width: 50%; /* Ширина контейнера зображення 50% від ширини картки */ padding: 10px; /* Внутрішні відступи навколо зображення */ position: relative; /* Встановлює позиціонування для дочірніх елементів */ overflow: hidden; /* Приховує частини зображення, що виходять за межі контейнера */ } /* Стилі для самого зображення */ .custom-slider .img img { width: 100%; /* Ширина зображення 100% від ширини контейнера */ height: auto; /* Автоматична висота для збереження пропорцій */ border-radius: 6px; /* Округлені кути зображення */ transition: transform 0.5s ease; /* Анімація для трансформацій з тривалістю 0.5 секунди */ } /* Стилі для контейнера з текстом */ .custom-slider .text { width: 50%; /* Ширина контейнера з текстом 50% від ширини картки */ padding: 20px; /* Внутрішні відступи навколо тексту */ text-align: left; /* Вирівнювання тексту по лівому краю */ } /* Стилі для заголовка */ .custom-slider .text h3 { font-size: 24px; /* Розмір шрифту заголовка */ margin-bottom: 10px; /* Відступ знизу заголовка */ } /* Стилі для абзацу тексту */ .custom-slider .text p { font-size: 16px; /* Розмір шрифту абзацу */ color: #555; /* Колір тексту (темно-сірий) */ margin-bottom: 15px; /* Відступ знизу абзацу */ } /* Стилі для кнопки */ .custom-slider .btn { padding: 10px 20px; /* Внутрішні відступи кнопки */ background: #2196F3; /* Синій фон кнопки */ color: #fff; /* Білий колір тексту кнопки */ text-decoration: none; /* Прибирає підкреслення з тексту кнопки */ border-radius: 4px; /* Округлені кути кнопки */ transition: background 0.3s ease; /* Анімація для зміни фону з тривалістю 0.3 секунди */ } /* Стилі для кнопки при наведенні */ .custom-slider .btn:hover { background: #1976D2; /* Темніший відтінок синього при наведенні */ } /* Стилі для точок навігації */ .custom-slider .owl-dot { width: 8px; /* Ширина точки */ height: 8px; /* Висота точки */ margin: 3px; /* Відступи між точками */ background: var(--BackgroundImgColor); /* Колір фону точки */ border-radius: 50%; /* Округлі точки */ opacity: 0.5; /* Прозорість точки */ } /* Стилі для активної точки навігації */ .custom-slider .owl-dot.active { background: #2196F3; /* Синій колір фону для активної точки */ } /* Адаптивні стилі для екранів шириною до 768px */ @media (max-width: 768px) { .custom-slider .item { width: 95% !important; /* Ширина слайду 95% від ширини контейнера */ } .custom-slider .card { flex-direction: column; /* Вертикальне розташування елементів всередині картки */ } .custom-slider .img, .custom-slider .text { width: 100%; /* Ширина зображення та тексту 100% від ширини картки */ } }