 /* Define custom colors */
 :root {
    --main-blue: #29337D;
    --main-red: #E8302E;
    --white: #FFFFFF;
    --dark-gray: #333333;
    --light-gray: #F2F2F2;
  }

  /* Tailwind custom classes for using the colors */
  .bg-main-blue { background-color: var(--main-blue); }
  .bg-main-red { background-color: var(--main-red); }
  .bg-light-gray { background-color: var(--light-gray); }
  .text-main-blue { color: var(--main-blue); }
  .text-main-red { color: var(--main-red); }
  .text-dark-gray { color: var(--dark-gray); }
  .text-white { color: var(--white); }
  .bg-primary500 { background-color: var(--deep-blue); }
  .bg-primary400 { background-color: var(--bright-blue); }

  @keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fadeInUp {
    animation: fadeInUp 0.8s ease-out forwards;
}
.card-hover:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
    z-index: 1;
}
.bg-image {
  background-image: url('./assets/22682.jpg'); /* Replace with your image URL */
  background-size: cover;
  background-position: center;
}

.bg-gradient {
  background: linear-gradient(to bottom, #29337D, #E8302E);
}
.product-card {
  transition: all 0.3s ease;
  transform-style: preserve-3d;
}
.product-card:hover {
  transform: translateY(-5px);
}
.product-number {
  transition: all 0.3s ease;
}
.product-card:hover .product-number {
  background-color: #E8302E;
}
.gradient-bg {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}
.glass-header {
  background: #fff;
  color: #111;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10);
}