html, body {
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
}

body {
    overflow-x: hidden;
    position: relative;
}


body::-webkit-scrollbar {
    display: none;
}

.hero-banner {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

.product-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
}

.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.pagination-button {
  transition: background-color 0.3s ease, color 0.3s ease;
  border: 2px solid #1d4ed8;
}

.pagination-button:hover {
  background-color: #1d4ed8;
  color: #ffffff;
}

.modal-overlay {
  background: rgba(0, 0, 0, 0.8);
}

.modal-content {
  animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Diğer kategori */

  /* Hover Effect for Gradient Background */
  .group:hover .group-hover\:opacity-60 {
    opacity: 0.6;
  }

  /* Hover Effect for Text and Buttons */
  .group:hover .group-hover\:text-white {
    color: white;
  }

  .group:hover .group-hover\:text-gray-200 {
    color: #e5e7eb;
  }