/* Custom animations */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    
    @keyframes float {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-20px);
      }
    }
    
    @keyframes drift {
      0% {
        transform: translateX(-100px);
      }
      100% {
        transform: translateX(100px);
      }
    }
    
    @keyframes pulse {
      0%, 100% {
        opacity: 0.5;
        transform: scale(1);
      }
      50% {
        opacity: 0.8;
        transform: scale(1.05);
      }
    }
    
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    
    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-15px);
      }
    }
        /* Custom animations */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    
    @keyframes float-slow {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-10px);
      }
    }
    
    @keyframes glowPulse {
      0%, 100% {
        opacity: 0.6;
        transform: scale(1);
      }
      50% {
        opacity: 1;
        transform: scale(1.05);
      }
    }
    
    @keyframes bgZoom {
      0%, 100% {
        transform: scale(1.05);
      }
      50% {
        transform: scale(1.1);
      }
    }

    .animate-fadeUp {
      animation: fadeUp 1s ease forwards;
    }

    .animate-fadeIn {
      animation: fadeIn 1s ease forwards;
    }

    .animate-float-slow {
      animation: float-slow 5s ease-in-out infinite;
    }

    .animate-glowPulse {
      animation: glowPulse 6s ease-in-out infinite;
    }

    .animate-bgZoom {
      animation: bgZoom 15s ease-in-out infinite;
    }

    /* Delay utility */
    .delay-\[0\.4s\] { animation-delay: 0.4s; }
    .delay-\[0\.8s\] { animation-delay: 0.8s; }
    .delay-\[1\.2s\] { animation-delay: 1.2s; }
    .delay-\[1\.6s\] { animation-delay: 1.6s; }

    /* Mobile menu transitions */
    .mobile-menu-enter {
      transform: translateX(100%);
    }
    
    .mobile-menu-enter-active {
      transform: translateX(0);
      transition: transform 0.3s ease-out;
    }
    
    .animate-fadeUp {
      animation: fadeUp 1s ease-out;
    }
    
    .animate-fadeUp-delay {
      animation: fadeUp 1s ease-out 0.3s both;
    }
    
    .animate-fadeIn-btn {
      animation: fadeIn 1s ease-out 0.6s both;
    }
    
    .animate-fadeIn-icons {
      animation: fadeIn 1s ease-out 0.9s both;
    }
    
    .animate-float-slow {
      animation: float 6s ease-in-out infinite;
    }
    
    .animate-drift {
      animation: drift 15s linear infinite;
    }
    
    .animate-pulse-slow {
      animation: pulse 4s ease-in-out infinite;
    }
    
    .animate-rotate {
      animation: rotate 20s linear infinite;
    }
    
    .animate-bounce-slow {
      animation: bounce 3s ease-in-out infinite;
    }

    /* Custom Swiper Styles */
    .swiper {
      padding: 40px 60px !important;
    }

    .swiper-slide {
      transition: all 0.4s ease;
    }

    .swiper-slide:hover {
      transform: translateY(-10px);
    }

    .swiper-button-next,
    .swiper-button-prev {
      background: white;
      width: 50px !important;
      height: 50px !important;
      border-radius: 50%;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
      font-size: 20px !important;
      color: #FF6B35;
      font-weight: bold;
    }

    .swiper-button-next:hover,
    .swiper-button-prev:hover {
      background: #FF6B35;
      transform: scale(1.1);
    }

    .swiper-button-next:hover:after,
    .swiper-button-prev:hover:after {
      color: white;
    }

    .swiper-button-next {
      right: 10px !important;
    }

    .swiper-button-prev {
      left: 10px !important;
    }

    /* Brand card glow effect */
    .brand-card {
      position: relative;
      overflow: hidden;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
       cursor: pointer;
      transition: all 0.3s ease;
    }

    .brand-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 16px;
      padding: 2px;
      background: linear-gradient(45deg, #FF6B35, #FF8E53, #FF6B35);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .brand-card:hover::before {
      opacity: 1;
    }

    .brand-card:hover {
       transform: translateY(-5px);
      box-shadow: 0 15px 40px rgba(255, 107, 53, 0.2);
    }

    /* Enhanced background elements */
    .floating-icon {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
      backdrop-filter: blur(10px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      color: #FF6B35;
      z-index: 1;
    }

    .gradient-circle {
      position: absolute;
      border-radius: 50%;
      filter: blur(40px);
      opacity: 0.6;
      z-index: 0;
    }

     /* Scroll Animation Styles */
  .animate-on-scroll {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease-out;
  }
  
  .animate-on-scroll-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s ease-out;
  }
  
  .animate-on-scroll.animated,
  .animate-on-scroll-right.animated {
    opacity: 1;
    transform: translateX(0);
  }
  
  /* Enhanced image styling */
  .mix-blend-soft-light {
    mix-blend-mode: soft-light;
  }
  
  .mix-blend-multiply {
    mix-blend-mode: multiply;
  }
  @keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}
@keyframes float-delayed {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  50% { transform: translateY(15px) translateX(-10px); }
}
@keyframes pulse-slow {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.7; }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideDots {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-20px); }
}

.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-delayed { animation: float-delayed 7s ease-in-out infinite; }
.animate-pulse-slow { animation: pulse-slow 8s ease-in-out infinite; }
.animate-fadeIn { animation: fadeIn 1s ease forwards; }
.animate-slideUp { animation: slideUp 1.2s ease forwards; }
.animate-slideDots { animation: slideDots 5s ease-in-out infinite; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
  .animate-on-load {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Disable animation if user prefers reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .animate-on-load {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }
   /* Enhanced animations for the newsletter section */
  @keyframes float-enhanced {
    0%, 100% { 
      transform: translateY(0px) rotate(0deg); 
    }
    50% { 
      transform: translateY(-15px) rotate(5deg); 
    }
  }

  @keyframes float-delayed-enhanced {
    0%, 100% { 
      transform: translateY(0px) rotate(0deg); 
    }
    50% { 
      transform: translateY(10px) rotate(-3deg); 
    }
  }

  @keyframes bounce-slow-enhanced {
    0%, 100% { 
      transform: translateY(0) scale(1); 
    }
    50% { 
      transform: translateY(-8px) scale(1.05); 
    }
  }

  .animate-float {
    animation: float-enhanced 4s ease-in-out infinite;
  }

  .animate-float-delayed {
    animation: float-delayed-enhanced 5s ease-in-out infinite;
  }

  .animate-bounce-slow {
    animation: bounce-slow-enhanced 3s ease-in-out infinite;
  }

  /* Input focus effects */
  input:focus {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(255, 107, 53, 0.15);
  }
 footer a {
    transition: all 0.3s ease;
  }

  footer .group:hover .group-hover\:translate-x-1 {
    transform: translateX(4px);
  }

  /* Initial state for scroll to top button */
  button[onclick="scrollToTop()"] {
    transform: scale(0);
    opacity: 0;
    transition: all 0.3s ease;
  }

  button[onclick="scrollToTop()"].scale-100 {
    transform: scale(1);
    opacity: 1;
  }
  @keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fadeUp {
  animation: fadeUp 1s ease forwards;
}

/* Fade In (for subtle fade only) */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animate-fadeIn {
  animation: fadeIn 1s ease forwards;
}

/* Glow Pulse */
@keyframes glowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
.animate-glowPulse {
  animation: glowPulse 6s ease-in-out infinite;
}

/* Background slow zoom */
@keyframes bgZoom {
  0%, 100% { transform: scale(1.05); }
  50% { transform: scale(1.1); }
}
.animate-bgZoom {
  animation: bgZoom 15s ease-in-out infinite;
}

/* Floating effect */
@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.animate-float-slow {
  animation: float-slow 5s ease-in-out infinite;
}

/* Delay utility (custom small CSS helper) */
.delay-\[0\.4s\] { animation-delay: 0.4s; }
.delay-\[0\.8s\] { animation-delay: 0.8s; }
.delay-\[1\.2s\] { animation-delay: 1.2s; }
.delay-\[1\.6s\] { animation-delay: 1.6s; }
/* Custom styles for product modal */
.size-option.active {
  border-color: #f97316;
  background-color: #fff7ed;
  color: #ea580c;
}

.productSwiper .swiper-button-next,
.productSwiper .swiper-button-prev {
  background: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.productSwiper .swiper-button-next:after,
.productSwiper .swiper-button-prev:after {
  font-size: 16px;
  color: #f97316;
  font-weight: bold;
}

.productSwiper .swiper-button-next:hover,
.productSwiper .swiper-button-prev:hover {
  background: #f97316;
  transform: scale(1.1);
}

.productSwiper .swiper-button-next:hover:after,
.productSwiper .swiper-button-prev:hover:after {
  color: white;
}

.productSwiper .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #d1d5db;
  opacity: 0.7;
}

.productSwiper .swiper-pagination-bullet-active {
  background: #f97316;
  opacity: 1;
}

/* Smooth modal transitions */
#productModal {
  transition: opacity 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .grid.grid-cols-6.gap-2 {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Cart Icon Animations */
#cartCount {
    transition: all 0.3s ease;
}

.fa-shopping-cart {
    transition: transform 0.3s ease;
}

.group:hover .fa-shopping-cart {
    transform: scale(1.1);
}

/* Button Styles */
.btn-primary {
    background: linear-gradient(135deg, #f97316, #ea580c);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(249, 115, 22, 0.3);
}
/* Ensure parallax background works properly */
.bg-fixed {
  background-attachment: fixed;
}

/* Smooth transitions */
.transition-colors {
  transition: background-color 0.3s ease;
}

/* Backdrop blur support */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}
/* Progress bar animation */
.progress-bar {
  width: 0%;
  transition: width 5s linear;
}

/* Smooth image transitions */
#currentProductImage,
#nextProductImage {
  transition: opacity 0.5s ease-in-out;
}

/* Enhanced button animations */
.size-option {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Backdrop blur for modern look */
.backdrop-blur-sm {
  backdrop-filter: blur(8px);
}

/* Gradient text effects */
.gradient-text {
  background: linear-gradient(135deg, #f97316, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Enhanced shadow effects */
.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Smooth scale transitions */
.hover-scale-105:hover {
  transform: scale(1.05);
}
/* Light theme specific styles */
.bg-orange-50 { background-color: #fff7ed; }
.bg-orange-100 { background-color: #ffedd5; }
.bg-orange-200 { background-color: #fed7aa; }

/* Text colors for light theme */
.text-gray-900 { color: #1f2937; }
.text-gray-700 { color: #374151; }
.text-gray-600 { color: #4b5563; }

/* Border colors */
.border-orange-200 { border-color: #fed7aa; }
.border-orange-300 { border-color: #fdba74; }

/* Shadow colors */
.shadow-orange-200 { box-shadow: 0 10px 15px -3px rgba(254, 215, 170, 0.4); }
.shadow-orange-300 { box-shadow: 0 10px 15px -3px rgba(253, 186, 116, 0.4); }

/* Backdrop blur background */
.bg-white\/80 { background-color: rgba(255, 255, 255, 0.8); }