@import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');
@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400..800&display=swap');

:root {
    --max-width : 1320px;
    --primary-color : #00527e;
    --secondary-color : #f7a252;
    --light-text-color : #f6e6d4;
    --dark-text-color : #293036;
    --footer-color : #eeeeee;
    --wp-color : #25D366;
    --wp-hover-color : #075E54;
}

@media (max-width: 1400px) {
    :root {
        --max-width: 1140px;
    }
}

@media (max-width: 1200px) {
    :root {
        --max-width: 960px;
    }
}

@media (max-width: 992px) {
    :root {
        --max-width: 720px;
    }
}

@media (max-width: 768px) {
    :root {
        --max-width:540px;
    }
}

@media (max-width: 576px) {
    :root {
        --max-width: 100%;
    }

    .container {
        margin: 0 1rem;
    }
}

body {
    background-color: #fff;
    color: #666;
    font-family: "Sen", sans-serif;
}

.bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--secondary-color); }
.bg-light-text-color { background-color: var(--light-text-color); }
.bg-dark-text-color { background-color: var(--dark-text-color); }
.bg-footer-color { background-color: var(--footer-color); }
.bg-wp-color { background-color: var(--wp-color); }
.bg-wp-hover-color { background-color: var(--wp-hover-color); }

.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-light-text-color { color: var(--light-text-color); }
.text-dark-text-color { color: var(--dark-text-color); }
.text-footer-color { color: var(--footer-color); }
.text-wp-color { color: var(--wp-color); }
.text-wp-hover-color { color: var(--wp-hover-color); }

.border-primary { border-color: var(--primary-color); }
.border-secondary { border-color: var(--secondary-color); }
.border-light-text-color { border-color: var(--light-text-color); }
.border-dark-text-color { border-color: var(--dark-text-color); }
.border-footer-color { border-color: var(--footer-color); }
.border-wp-color { border-color: var(--wp-color); }
.border-wp-hover-color { border-color: var(--wp-hover-color); }

.btn-primary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--primary-color);
    border: 1px solid #fff;
    border-radius: 0.25rem;
    color: #fff;
    transition: all 0.3s ease-in-out;
}

.btn-primary:hover {
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    background-color: #fff;
}

.btn-secondary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--secondary-color);
    border: 1px solid #fff;
    border-radius: 0.25rem;
    color: #fff;
    transition: all 0.3s ease-in-out;
}

.btn-secondary:hover {
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    background-color: #fff;
}

.btn-outline-primary {
    padding: 0.25rem .5rem;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid var(--primary-color);
    border-radius: 0.25rem;
    color: var(--primary-color);
    transition: all 0.3s ease-in-out;
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--primary-color);
}

.btn-outline-secondary {
    padding: 0.25rem .5rem;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid var(--secondary-color);
    border-radius: 0.25rem;
    color: var(--secondary-color);
    transition: all 0.3s ease-in-out;
}

.btn-outline-secondary:hover {
    color: #fff;
    background-color: var(--secondary-color);
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
}

.sidebar-dropdown:hover .sidebar-dropdown-menu {
    display: block;
}

.glide__bullet--active {
    background-color: transparent;
}

.home-product-tabs:hover, .home-product-tabs.active {
    color: var(--secondary-color);
}

.product-filters-year-item:hover {
    color: var(--secondary-color);
}

.product-filters-item:hover, .product-filters-item.active {
    background-color: var(--primary-color);
    color: #fff;
    border-color: #fff;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.blink-text {
    animation: blink 1.5s infinite;
}