/*Параметри для головної стоірнки та для хедара*/
/* Скидання відступів та налаштування коробкової моделі для всіх елементів */
* {
    margin: 0; /* Скидаємо маргін (відступи) */
    padding: 0; /* Скидаємо паддінги (внутрішні відступи) */
    box-sizing: border-box; /* Встановлюємо коробкову модель для правильного врахування ширини і висоти елементів */
}

/* Загальні стилі для тіла сторінки */
body {
    font-family: Arial, sans-serif; /* Встановлюємо шрифт для всього тіла */
    padding-top: 20px; /* Додаємо верхній відступ для тіла */
    overflow-x: hidden; /* Приховуємо горизонтальний скрол */
}

/* Стилі для навігаційної панелі */
.navbar {
    background-color: #007bff; /* Колір фону навігації */
    padding: 10px 20px; /* Внутрішні відступи навігації */
    display: flex; /* Використовуємо флекс-контейнер */
    align-items: center; /* Вирівнюємо елементи по вертикалі */
    justify-content: space-between; /* Розподіляємо елементи навігації між собою */
}

/* Контейнер для навігаційних елементів */
.container {
    display: flex; /* Використовуємо флекс-контейнер */
    align-items: center; /* Вирівнюємо елементи по вертикалі */
    width: 100%; /* Ширина контейнера на всю ширину */
    justify-content: space-between; /* Розподіляємо елементи контейнера */
}

/* Стилі для бренду в навігації */
.navbar-brand {
    color: white; /* Колір тексту бренду */
    font-size: 24px; /* Розмір шрифта */
    font-weight: bold; /* Жирний шрифт */
    text-decoration: none; /* Відключаємо підкреслення */
    margin-right: 20px; /* Відступ праворуч */
}

/* Форма пошуку */
.search-form {
    display: flex; /* Використовуємо флекс-контейнер */
    align-items: center; /* Вирівнюємо елементи по вертикалі */
    justify-content: center; /* Вирівнюємо по центру */
    flex-grow: 1; /* Форма займає всю доступну ширину */
    max-width: 500px; /* Максимальна ширина форми */
    margin: 0 20px; /* Відступи з боків */
}

/* Поле введення для пошуку */
.search-input {
    padding: 5px 10px; /* Внутрішні відступи */
    font-size: 16px; /* Розмір шрифта */
    border-radius: 5px 0 0 5px; /* Заокруглені кути */
    border: none; /* Без обводки */
    outline: none; /* Відключаємо обводку при фокусі */
    width: 100%; /* Ширина поля 100% */
}

/* Кнопка пошуку */
.search-button {
    padding: 5px 15px; /* Внутрішні відступи */
    font-size: 16px; /* Розмір шрифта */
    border: none; /* Без обводки */
    border-radius: 0 5px 5px 0; /* Заокруглені кути */
    background-color: #ff8c00; /* Колір фону кнопки */
    color: white; /* Колір тексту кнопки */
    cursor: pointer; /* Вказівник на кнопці */
}

/* Стиль для кнопки при наведенні */
.search-button:hover {
    background-color: #e07b00; /* Зміна кольору фону при наведенні */
}

/* Список навігаційних посилань */
.navbar-nav {
    list-style-type: none; /* Відключаємо маркери списку */
    display: flex; /* Використовуємо флекс-контейнер */
    gap: 15px; /* Проміжок між елементами */
}

/* Стиль для навігаційних посилань */
.nav-link {
    color: white; /* Колір тексту посилань */
    font-size: 20px; /* Розмір шрифта */
    text-decoration: none; /* Відключаємо підкреслення */
}

/* Стиль для посилань при наведенні */
.nav-link:hover {
    color: #d1d1d1; /* Зміна кольору тексту при наведенні */
}






/* Стилі для контейнера Swiper з рекламою*/
.swiper-container {
    width: 100%; /* Ширина контейнера на всю ширину */
    height: 72vh; /* Висота контейнера 72% від висоти екрану */
    margin: 20px auto; /* Відступи зверху/знизу та автоматичний центр */
    position: relative; /* Встановлюємо відносне позиціонування */
    overflow: hidden; /* Приховуємо зайве за межами контейнера */
}

/* Стилі для кожного слайду */
.swiper-slide {
    text-align: center; /* Вирівнюємо текст по центру */
    background: #fff; /* Білий фон */
    display: flex; /* Використовуємо флекс-контейнер */
    justify-content: center; /* Вирівнюємо по горизонталі */
    align-items: center; /* Вирівнюємо по вертикалі */
}

/* Стилі для зображень в слайдах */
.swiper-slide img {
    max-width: 80%; /* Максимальна ширина 80% від контейнера */
    max-height: 80%; /* Максимальна висота 80% від контейнера */
    object-fit: cover; /* Зберігаємо пропорції зображення */
    border-radius: 10px; /* Заокруглені кути */
}

/* Стилі для кнопок навігації слайдів */
.swiper-button-next, .swiper-button-prev {
    color: #333; /* Колір кнопок */
    top: 50%; /* Вирівнюємо по вертикалі */
    transform: translateY(-50%); /* Вирівнюємо по вертикалі */
    width: 30px; /* Ширина кнопки */
    height: 30px; /* Висота кнопки */
    background-color: rgba(255, 255, 255, 0.7); /* Напівпрозорий білий фон */
    border-radius: 50%; /* Кругла форма кнопок */
    margin: 0 10px; /* Відступи по боках */
    z-index: 10; /* Встановлюємо високий індекс шару для кнопок */
}

/* Стилі для пагінації слайдів */
.swiper-pagination {
    position: absolute; /* Абсолютне позиціонування */
    bottom: 20px; /* Відстань від низу */
    left: 50%; /* Центруємо по горизонталі */
    transform: translateX(-50%); /* Коригуємо позицію */
    color: #333; /* Колір тексту */
    font-weight: bold; /* Жирний шрифт */
    z-index: 10; /* Встановлюємо високий індекс шару для пагінації */
}






/* Стилі для секції категорій */
.categories {
    padding: 20px; /* Внутрішні відступи */
    display: flex; /* Використовуємо флекс-контейнер */
    flex-direction: column; /* Вертикальне вирівнювання */
    align-items: center; /* Вирівнюємо по центру */
}

/* Заголовок категорій */
.category-title {
    text-align: center; /* Вирівнюємо текст по центру */
    font-size: 2rem; /* Розмір шрифта */
    margin: 20px 0; /* Відступи зверху та знизу */
}

/* Контейнер для категорій */
.category-container {
    display: flex; /* Використовуємо флекс-контейнер */
    flex-wrap: wrap; /* Переломлюємо елементи на новий рядок */
    gap: 60px; /* Проміжок між елементами */
    justify-content: center; /* Вирівнюємо по центру */
}

/* Стилі для елементів категорій */
.category-item {
    width: 120px; /* Ширина елемента */
    height: 150px; /* Висота елемента */
    display: flex; /* Використовуємо флекс-контейнер */
    flex-direction: column; /* Вертикальне вирівнювання */
    align-items: center; /* Вирівнюємо по центру */
    justify-content: center; /* Вирівнюємо по центру */
    background-color: #f5f5f5; /* Світло-сірий фон */
    border-radius: 10px; /* Заокруглені кути */
    padding: 15px; /* Внутрішні відступи */
    transition: transform 0.3s ease; /* Анімація при наведенні */
    text-align: center; /* Вирівнюємо текст по центру */
}

/* Стиль для елементів категорій при наведенні */
.category-item:hover {
    transform: scale(1.05); /* Збільшуємо елемент при наведенні */
}

/* Стилі для іконок категорій */
.category-icon {
    font-size: 48px; /* Розмір іконки */
    margin-bottom: 10px; /* Відступ знизу */
    color: inherit; /* Спадкуємо колір з батьківського елемента */
}

/* Стилі для тексту категорій */
.category-item p {
    font-size: 16px; /* Розмір шрифта */
    font-weight: bold; /* Жирний шрифт */
    text-align: center; /* Вирівнюємо текст по центру */
}





/* Стилі для футера */
.footer {
    background-color: #007bff; /* Фоновий колір футера */
    padding: 10px 0; /* Зменшено padding для зменшення висоти футера */
    display: flex; /* Використовуємо флекс-контейнер */
    justify-content: center; /* Вирівнюємо по центру */
}

/* Контейнер для футера */
.footer .container {
    display: flex; /* Використовуємо флекс-контейнер */
    justify-content: center; /* Вирівнюємо по центру */
    align-items: center; /* Вирівнюємо по вертикалі */
}

/* Список соціальних іконок */
.footer-social {
    list-style: none; /* Відключаємо маркери списку */
    display: flex; /* Використовуємо флекс-контейнер */
    gap: 15px; /* Проміжок між іконками */
}

/* Стиль для соціальних посилань */
.social-link {
    color: white; /* Колір тексту (іконок) */
    font-size: 24px; /* Розмір шрифта для іконок */
    text-decoration: none; /* Відключаємо підкреслення */
    transition: color 0.3s; /* Анімація зміни кольору при наведенні */
}

/* Стиль для соціальних посилань при наведенні */
.social-link:hover {
    color: #d1d1d1; /* Зміна кольору при наведенні */
}

/* Стилі для навігаційних посилань у футері */
.navbar-nav .nav-link {
    color: white; /* Колір тексту посилань */
    font-size: 20px; /* Розмір шрифта */
    text-decoration: none; /* Відключаємо підкреслення */
}

/* Стиль для навігаційних посилань у футері при наведенні */
.navbar-nav .nav-link:hover {
    color: #d1d1d1; /* Зміна кольору при наведенні */
}





/*Стилі для слайдера годинників*/
/* Контейнер для слайдера */
#custom-slider {
    height: 100vh; /* Висота контейнера слайдера на всю висоту екрана */
    display: flex; /* Використовуємо флекс-контейнер */
    flex-direction: column; /* Розміщуємо елементи по вертикалі */
    align-items: center; /* Вирівнюємо елементи по центру по горизонталі */
    justify-content: flex-start; /* Вирівнюємо елементи з верхньої частини */
    margin: 0 52px; /* Відступи з боків */
    padding-top: 5%; /* Зменшення відступу для підняття слайдера */
}

/* Назва секції */
.popular-title {
    text-align: center; /* Вирівнюємо текст по центру */
    font-size: 2rem; /* Розмір шрифта */
    margin: 0; /* Відключаємо зовнішні відступи */
    padding-bottom: 20px; /* Відступ знизу, щоб назва не злипалася з слайдером */
    position: relative; /* Встановлюємо позицію для можливого абсолютного позиціонування елементів */
}

/* Слайдер тільки для .spring-slider */
.spring-slider {
    width: 100%; /* Слайдер займає 100% ширини контейнера */
    max-width: 1200px; /* Максимальна ширина слайдера */
    position: relative; /* Позиціонування для дочірніх елементів */
}

/* Властивості слайдера */
.spring-slider .swiper {
    width: 100%; /* Ширина слайдера */
}

/* Властивості кожного слайду */
.spring-slider .swiper-slide {
    position: relative; /* Позиціонування для внутрішніх елементів */
    display: flex; /* Використовуємо флекс-контейнер для вирівнювання */
    justify-content: center; /* Вирівнюємо по горизонталі */
    align-items: center; /* Вирівнюємо по вертикалі */
    background-color: #fff; /* Білий фон слайду */
    border-radius: 10px; /* Заокруглення кутів слайду */
    overflow: hidden; /* Випадкові елементи, що виходять за межі слайду, будуть приховані */
}

/* Зображення всередині слайдера */
.spring-slider .swiper-slide img {
    width: 100%; /* Зображення займає 100% ширини контейнера */
    height: 280px; /* Фіксована висота зображення */
    object-fit: cover; /* Масштабування зображення з заповненням без спотворень */
    border-radius: 10px; /* Заокруглення кутів зображення */
    transition: transform 0.3s ease; /* Анімація для трансформації зображення */
}

/* Масштабування зображення при наведенні */
.spring-slider .swiper-slide:hover img {
    transform: scale(0.95); /* Масштабування зображення при наведенні */
}

/* Назва товару */
.spring-slider .product-name {
    position: absolute; /* Абсолютне позиціонування */
    top: 50%; /* Центруємо по вертикалі */
    left: 50%; /* Центруємо по горизонталі */
    transform: translate(-50%, -50%); /* Переміщаємо елемент так, щоб він був точно по центру */
    background: rgba(0, 0, 0, 0.75); /* Напівпрозорий чорний фон */
    color: #fff; /* Білий текст */
    padding: 8px 15px; /* Внутрішні відступи */
    border-radius: 5px; /* Заокруглені краї */
    font-size: 1.2em; /* Розмір шрифта */
    text-align: center; /* Вирівнюємо текст по центру */
    opacity: 0; /* Спочатку текст прозорий */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Анімація для зміни прозорості та трансформації */
    pointer-events: none; /* Відключаємо взаємодію з елементом */
}

/* Показ назви товару при наведенні */
.spring-slider .swiper-slide:hover .product-name {
    opacity: 1; /* Змінюємо прозорість на 1 */
    transform: translate(-50%, -50%) scale(1); /* Центрування і повернення до нормального масштабу */
}

/* Кнопки навігації */
.spring-slider .swiper-button-next,
.spring-slider .swiper-button-prev {
    color: #333; /* Колір кнопок */
    background-color: rgba(255, 255, 255, 0.8); /* Напівпрозорий білий фон */
    border-radius: 50%; /* Заокруглення кнопок */
    width: 35px; /* Ширина кнопки */
    height: 35px; /* Висота кнопки */
    display: flex; /* Використовуємо флекс-контейнер для вирівнювання іконок всередині кнопок */
    justify-content: center; /* Вирівнюємо по горизонталі */
    align-items: center; /* Вирівнюємо по вертикалі */
    top: 50%; /* Центруємо по вертикалі */
    transform: translateY(-50%); /* Центруємо по вертикалі */
    transition: background-color 0.3s ease; /* Анімація для зміни фону */
    position: absolute; /* Абсолютне позиціонування кнопок */
    z-index: 10; /* Забезпечуємо, щоб кнопки були зверху інших елементів */
}

/* Позиціонування кнопок */
.spring-slider .swiper-button-prev {
    left: -15px; /* Відступ зліва */
}

.spring-slider .swiper-button-next {
    right: -15px; /* Відступ справа */
}

/* Зміна кольору кнопок при наведенні */
.spring-slider .swiper-button-next:hover,
.spring-slider .swiper-button-prev:hover {
    background-color: rgba(0, 0, 0, 0.1); /* Зміна фону при наведенні */
}

/* Пагінація */
.spring-slider .swiper-pagination {
    position: absolute; /* Абсолютне позиціонування пагінації */
    bottom: 15px; /* Відступ знизу */
    left: 50%; /* Центруємо по горизонталі */
    transform: translateX(-50%); /* Центруємо по горизонталі */
    display: flex; /* Використовуємо флекс-контейнер для пагінації */
    gap: 10px; /* Проміжок між елементами пагінації */
}

/* Стиль для кожного елементу пагінації */
.spring-slider .swiper-pagination-bullet {
    width: 10px; /* Ширина елемента пагінації */
    height: 10px; /* Висота елемента пагінації */
    background-color: #333; /* Колір елемента пагінації */
    opacity: 0.5; /* Прозорість елемента пагінації */
    border-radius: 50%; /* Заокруглені краї */
    transition: opacity 0.3s ease; /* Анімація для зміни прозорості */
}

/* Активний елемент пагінації */
.spring-slider .swiper-pagination-bullet-active {
    opacity: 1; /* Повна непрозорість для активного елемента */
}





/*Секція відгуків*/
.testimonials-section {
    text-align: center; /* Вирівнюємо текст по центру */
    padding: 40px 20px; /* Відступи зверху/знизу та з боків */
    background-color: #f9f9f9; /* Легкий сірий фон секції */
    font-family: 'Roboto', sans-serif; /* Використовуємо Google шрифт Roboto */
}

.testimonials-section h2 {
    font-size: 2rem; /* Розмір шрифта для заголовка */
    color: #333; /* Темно-сірий колір тексту */
    margin-bottom: 30px; /* Відступ знизу заголовка */
}

.testimonial-card {
    display: inline-block; /* Відображення картки в рядку */
    width: 280px; /* Ширина картки */
    margin: 20px; /* Відступи між картками */
    padding: 20px; /* Внутрішні відступи всередині картки */
    background-color: #fff; /* Білий фон картки */
    border-radius: 20px 0 20px 0; /* Заокруглені дві сторони картки, одна гостра */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Легка тінь для картки */
    text-align: left; /* Вирівнюємо текст в картці по лівому краю */
    position: relative; /* Позиціонування картки для можливості розміщення елементів */
    transition: transform 0.3s, background-color 0.3s; /* Анімація при наведенні для трансформації та зміни фону */
}

.testimonial-card:hover {
    background-color: #e0f7fa; /* Зміна фону на блакитний при наведенні */
    transform: translateY(-5px); /* Плавне підняття картки при наведенні */
}

.testimonial-image {
    width: 50px; /* Ширина зображення */
    height: 50px; /* Висота зображення */
    border-radius: 50%; /* Заокруглені краї для створення кола */
    object-fit: cover; /* Зберігає пропорції зображення і заповнює контейнер */
    margin-right: 10px; /* Відступ праворуч від зображення */
    vertical-align: middle; /* Вирівнювання зображення по вертикалі по центру тексту */
}

.testimonial-card h3 {
    font-size: 1.2rem; /* Розмір шрифта для імені */
    color: #333; /* Темно-сірий колір тексту */
    margin: 10px 0 5px; /* Відступи для імені: зверху та знизу */
}

.position {
    font-size: 0.9rem; /* Розмір шрифта для посади */
    color: #888; /* Світло-сірий колір для посади */
    margin: 0 0 10px; /* Відступ знизу для відділення від тексту відгуку */
}

.testimonial-text {
    font-size: 1rem; /* Розмір шрифта для тексту відгуку */
    color: #555; /* Трохи світліший сірий колір для тексту */
    line-height: 1.5; /* Міжрядковий інтервал для зручності читання */
}





/*Стилі для слайдера партнерів*/
.partners-section {
    text-align: center; /* Вирівнюємо текст по центру */
    padding: 50px 20px; /* Відступи зверху/знизу та з боків */
    background-color: #ffffff; /* Білий фон секції */
    font-family: 'Roboto', sans-serif; /* Використовуємо шрифт Roboto */
}

.partners-section h2 {
    font-size: 2rem; /* Розмір шрифта для заголовка */
    color: #333; /* Темно-сірий колір тексту */
    margin-bottom: 30px; /* Відступ знизу заголовка */
}

.carousel-wrapper {
    --width: 100px; /* Ширина одного елементу в каруселі */
    --gap: 0; /* Проміжок між елементами */
    --num-items: 10; /* Кількість елементів для прокрутки */
    --ani-offset: calc(var(--width) * var(--num-items) * -1); /* Обчислюємо відстань прокрутки */
    --ani-speed: 10s; /* Швидкість анімації прокручування */
    --bg-clr: #ffffff; /* Колір фону для градієнта */
    
    width: 400px; /* Ширина каруселі */
    overflow: hidden; /* Приховуємо елементи, що виходять за межі */
    position: relative; /* Позиціонування контейнера для каруселі */
    margin: 0 auto; /* Центрування каруселі по горизонталі */
}

.carousel-wrapper::before,
.carousel-wrapper::after {
    content: ''; /* Створюємо візуальні елементи до і після каруселі */
    position: absolute; /* Позиціонуємо відносно контейнера */
    width: 20%; /* Ширина градієнта з обох боків */
    height: 100%; /* Висота таких елементів дорівнює висоті контейнера */
    z-index: 1; /* Встановлюємо вищий порядок відображення для накладання */
    top: 0; /* Встановлюємо їх у верхній частині контейнера */
}

.carousel-wrapper::before {
    left: 0; /* Встановлюємо на ліву сторону */
    background-image: linear-gradient(to right, var(--bg-clr) 0%, transparent 50%); /* Лінійний градієнт від білого до прозорого */
}

.carousel-wrapper::after {
    right: 0; /* Встановлюємо на праву сторону */
    background-image: linear-gradient(to left, var(--bg-clr) 0%, transparent 50%); /* Лінійний градієнт від білого до прозорого */
}

.carousel {
    display: flex; /* Використовуємо flex для горизонтального розташування елементів */
    align-items: center; /* Вирівнюємо елементи по вертикалі по центру */
    animation: slide var(--ani-speed) linear infinite; /* Додаємо анімацію прокрутки */
}

.carousel-inner {
    display: flex; /* Відображаємо елементи каруселі в ряд */
    gap: var(--gap); /* Проміжок між елементами */
}

.item {
    flex: 1 0 var(--width); /* Кожен елемент каруселі має ширину визначену змінною */
    display: flex; /* Відображаємо елементи всередині по flex */
    align-items: center; /* Вирівнюємо елементи по вертикалі по центру */
    justify-content: center; /* Вирівнюємо елементи по горизонталі по центру */
    padding: 1rem; /* Внутрішні відступи для елементів */
    text-align: center; /* Вирівнюємо текст по центру всередині елементів */
}

.item:last-child {
    background: red; /* Тло останнього елементу каруселі */
}

.item > img {
    max-width: 100%; /* Максимальна ширина зображення не перевищує ширину контейнера */
    max-height: 100%; /* Максимальна висота зображення не перевищує висоту контейнера */
    object-fit: contain; /* Зберігаємо пропорції зображення, щоб воно вписувалося */
    display: block; /* Відображаємо зображення як блок, щоб запобігти зайвим відступам */
}

@keyframes slide {
    100% {
        transform: translateX(var(--ani-offset)); /* Остання позиція після анімації */
    }
}