:root {
    --background: 0 0% 100%;
    --foreground: 220 13% 18%;
    --primary: 213 94% 32%;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 213 94% 28%;
    --secondary: 213 27% 84%;
    --secondary-foreground: 213 94% 32%;
    --accent: 43 100% 50%;
    --accent-foreground: 220 13% 18%;
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;
    --border: 214 32% 91%;
    --nav-background: 213deg 24.06% 41.1%;
    --nav-foreground: 0 0% 100%;
    --success: 142 71% 45%;
    --price-color: 0 84% 45%;
    --discount-color: 142 71% 45%;
}

body {
    background-color: smokewhite;
}

.bg-primary {
    background-color: hsl(var(--primary));
}
.bg-nav {
    background-color: hsl(var(--nav-background));
}
.text-nav-foreground {
    color: hsl(var(--nav-foreground));
}
.text-primary {
    color: hsl(var(--primary));
}
.text-primary-foreground {
    color: hsl(var(--primary-foreground));
}
.bg-accent {
    background-color: hsl(var(--accent));
}
.text-accent-foreground {
    color: hsl(var(--accent-foreground));
}
.text-price {
    color: hsl(var(--price-color));
}
.text-discount {
    color: hsl(var(--discount-color));
}
.bg-success {
    background-color: hsl(var(--success));
}
.hover\:bg-primary-hover:hover {
    background-color: hsl(var(--primary-hover));
}

.slide-animation {
    animation: slide 20s infinite linear;
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
.small-container {
    max-width: 1430px;
}

.heading {
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 700;
    color: hsl(var(--foreground));
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.brand-logo {
    transition: transform 0.3s ease;
}

.brand-logo:hover {
    transform: scale(1.1);
}