.gradient-overlay {
      background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
  }

  .card-hover {
      transition: all 0.3s ease;
  }

  .card-hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  }

  .btn-primary {
      background: linear-gradient(135deg, #FF6B35 0%, #FF8C00 100%);
      transition: all 0.3s ease;
  }

  .btn-primary:hover {
      background: linear-gradient(135deg, #FF8C00 0%, #FF6B35 100%);
      transform: translateY(-1px);
  }

  .product-image {
      object-fit: cover;
      object-position: center;
  }


  ::ng-deep{
  .swiper-pagination-bullet{
    border-radius: 8px !important;
    background: transparent !important;
    border: 1px solid black;
  }
  .swiper-pagination-bullet-active{
    width: 32px !important;
    border-radius: 8px !important;
    background: rgb(243, 212, 73) !important;
    border: 1px solid rgb(243, 212, 73);
  }

}



.oil-splash {
    background: linear-gradient(45deg, #FFC107, #FF8F00, #FFD54F);
    border-radius: 50% 30% 70% 40%;
    animation: float 3s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}
.whatsapp-icon {
    background: #25D366;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}