.design {
    background-color: rgb(60, 104, 197); /* RGB color 60, 104, 197 */
}

/* Основные стили */
body {
    font-family: 'Arial', sans-serif;
}

/* Top Header Styling */
#top-header {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
    font-size: 14px;
    z-index: 100; /* Ensure it appears above other elements */
    transition: top 0.3s;
    height: 40px;
}

header {
    margin-top: 40px;
}

.contact-info {
    font-size: 14px;
}

/* Dropdown Styles */
.language-selector {
    position: relative; /* Position for dropdown */
}

.dropdown-toggle {
    background: none; /* No background */
    border: none; /* No border */
    color: white; /* Text color */
    cursor: pointer; /* Pointer on hover */
    font-size: 14px; /* Font size */
}

/* Dropdown Menu */
.dropdown-menu {
    display: none; /* Initially hidden */
    position: absolute; /* Position below the toggle */
    top: 100%; /* Below the button */
    right: 0; /* Align to the right */
    background-color: white; /* Background color of the dropdown */
    color: black; /* Text color in dropdown */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Shadow for dropdown */
    z-index: 100; /* Ensure it stays above other elements */
    border-radius: 5px; /* Rounded corners */
    width: 150px; /* Fixed width for dropdown */
}

.dropdown-menu.show {
    display: block; /* Show dropdown when active */
}

.dropdown-item {
    padding: 10px; /* Padding for each item */
    text-decoration: none; /* No underline */
    color: black; /* Item text color */
    display: block; /* Block display */
}

.dropdown-item:hover {
    background-color: #f1f1f1; /* Background on hover */
}

/* Scroll Hide */
.hidden-header {
    top: -50px;
    transition: top 0.3s;
}

/* Hidden class to toggle dropdown visibility */
.hidden {
    display: none;
}


* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
        }

        .slider-container {
            position: relative;
            width: 100%;
            height: 100vh; /* Full-screen height */
            overflow: hidden;
        }

        .slide {
            position: absolute;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
            z-index: 0;
        }

        /* Fade background */
        .slide::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); /* Dark overlay to make text readable */
        }

        .active {
            opacity: 1;
            z-index: 1;
        }

        .slide-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: white;
            z-index: 2;
        }

        .slide-text h2 {
            font-size: 3rem;
            text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
        }

        .slide-text p {
            font-size: 1.5rem;
            margin-top: 10px;
            text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
        }

        /* Pagination */
        .pagination {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 10;
        }

        .pagination-dot {
            width: 15px;
            height: 15px;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .pagination-dot.active-dot {
            background-color: rgba(255, 255, 255, 1);
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .slide-text h2 {
                font-size: 2rem;
            }

            .slide-text p {
                font-size: 1rem;
            }
        }
/* Сетка с идентичными плитками */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Равномерное распределение плиток */
    gap: 16px;
}

/* Плитки изображения */
.gallery-item {
    width: 100%; /* Ширина элемента занимает 100% от родительского контейнера */
    position: relative;
}

/* Контейнер изображения с фиксированным соотношением сторон */
.image-container {
    width: 100%; /* Ширина контейнера равна 100% */
    padding-top: 100%; /* Создаем контейнер с соотношением сторон 1:1 */
    position: relative;
    overflow: hidden; /* Скрываем часть изображения, выходящую за границы */
}

/* Изображение */
.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Ширина равна 100% */
    height: 100%; /* Высота равна 100% */
    object-fit: cover; /* Масштабируем изображение, чтобы оно заполнило контейнер */
    transition: transform 0.3s ease;
}

/* Эффект при наведении */
.image-container img:hover {
    transform: scale(1.05); /* Увеличиваем изображение при наведении */
}

/* Модальное окно для увеличенных изображений */
#lightbox-modal {
    display: none; /* Модальное окно скрыто по умолчанию */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
/* Фиксированные размеры контейнера */
#lightbox-content {
    width: 80vw;
    height: 80vh;
    max-width: 1200px; /* Максимальная ширина окна */
    max-height: 900px;  /* Максимальная высота окна */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Изображение всегда подстраивается под размер контейнера, сохраняя пропорции */
#lightbox-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Изображение вписывается в контейнер */
    border-radius: 10px;
}


/* Кнопки навигации */
#prev-button, #next-button {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    color: white;
    border: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
#prev-button:hover, #next-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

#prev-button {
    left: 10px;
}

#next-button {
    right: 10px;
}

#close-lightbox {
    position: absolute;
    top: 40px;
    right: 30px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.7);
    padding: 8px;
    border-radius: 50%;
    color: white;
    border: none;
}

#close-lightbox:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Стиль для активной ссылки с нижней границей и изменением цвета текста */
.nav-active {
    font-weight: bold;
    color: #000000; /* Цвет текста, чтобы выделить ссылку */
    border-bottom: 3px solid #000000; /* Цветная нижняя граница */
}

.content {
    transition: opacity 0.5s ease;
    opacity: 1;
}

.content.fade-out {
    opacity: 0;
}

.content.fade-in {
    opacity: 0;
}

.content.fade-in-active {
    opacity: 1;
    transition: opacity 0.5s ease;
}


/* General header styles */
header h1 {
    font-size: 2rem; /* Default for larger screens */
    white-space: nowrap;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    /* Smaller text for mobile */
    header h1 {
        font-size: 1.20rem !important; /* Force smaller text size */
    }

    /* Adjusting spacing between logo and cart icon */
    .cart-icon {
        margin-left: 8px; /* Spacing between text and cart */
    }

    /* Adjust cart icon size on mobile */
    .cart-icon img {
        width: 24px; /* Smaller cart icon */
        height: 24px;
    }
}

/* General styles for the cart icon */
.cart-icon {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.cart-icon img {
    width: 24px;
    height: 24px;
}

/* Adjust the cart count bubble */
.cart-count {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: red;
    color: white;
    font-size: 12px;
    border-radius: 50%;
    padding: 2px 6px;
    font-weight: bold;
}



/* Стили для блока со списком продуктов */
.product-list {
    display: grid;
    gap: 1.5rem;
    padding: 2rem;
}


.product-card {
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-card img {
    width: 100%;
    height: 15rem; /* Высота изображения */
    object-fit: contain;
    border-radius: 0.5rem;
}

.product-card h2 {
    font-size: 1.25rem;
    margin-top: 1rem;
}

.product-card p {
    font-size: 1rem;
    color: #6b7280; /* Цвет цены */
    margin-top: 0.5rem;
}

/* Fade-in effect styles */
.product-fade-in {
    opacity: 0; /* Start hidden */
    transition: opacity 0.5s ease; /* Transition for fade effect */
}

.product-fade-in.visible {
    opacity: 1; /* Fully visible */
}

.add-to-cart {
    background-color: #3b82f6; /* Синий цвет кнопки */
    color: #fff;
    padding: 0.5rem 1.25rem;
    border-radius: 0.375rem;
    margin-top: 1rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.add-to-cart:hover {
    background-color: #2563eb; /* Более тёмный синий при наведении */
}

#toast-container {
    position: fixed;
    top: 100px; /* Position from the top */
    right: 20px; /* Position from the right */
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between toasts */
}

.toast {
    background-color: #4caf50; /* Green color */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    opacity: 1;
    transition: opacity 0.5s ease, transform 0.5s ease;
    max-width: 300px; /* Limit the width */
    width: auto;
    text-align: center;
    transform: translateY(0); /* Ensure it's positioned normally */
}

/*.toast.opacity-0 {*/
/*    opacity: 0;*/
/*    transform: translateY(-20px); !* Slide up before disappearing *!*/
/*}*/





#goTopButton {
    display: none; /* Initially hidden */
    position: fixed;
    bottom: 20px; /* Position from bottom */
    right: 20px; /* Position from right */
    z-index: 100; /* Ensure it stays above other elements */
    background-color: transparent; /* No background */
    color: #3b82f6; /* Arrow color */
    border: none; /* Remove default border */
    font-size: 48px; /* Font size for the arrow */
    cursor: pointer; /* Change cursor to pointer */
    opacity: 0.8; /* Slight transparency */
    transition: opacity 0.3s ease; /* Smooth transitions */
}

#goTopButton:hover {
    opacity: 1; /* Full opacity on hover */
}

@media (max-width: 768px) {
    #goTopButton {
        font-size: 36px; /* Adjust font size for mobile */
        bottom: 15px; /* Adjust position for smaller screens */
        right: 15px; /* Adjust position for smaller screens */
    }
}
button#goTopButton {
    color: #3b82f6 !important;
}