* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;

   }

   body {
       font-family: 'Poppins', sans-serif;
       background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
       min-height: 100vh;
   }

   .anime-card {
       transition: all 0.3s ease;
       transform: translateY(0);
   }

   .anime-card:hover {
       transform: translateY(-5px);
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
   }

   /* Card image container styles */
   .card-image-container {
       position: relative;
       overflow: hidden;
       border-radius: 0.5rem;
       height: 220px;
   }

   /* Desktop styles */
   @media (min-width: 1024px) {
       .card-image-container {
           height: 300px;
       }
   }

   /* Card image styles */
   .card-image-container img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.5s;
   }

   .anime-card:hover .card-image-container img {
       transform: scale(1.05);
   }

   .top-anime-item {
       transition: all 0.2s ease;
   }

   .top-anime-item:hover {
       background-color: #2a3a57;
   }

   .gradient-text {
       background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
   }

   .search-input:focus {
       box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
   }
  /* Custom styles */
    .backdrop, .mobile-menu {
      transition: all 0.3s ease;
    }
    
    .backdrop {
      opacity: 0;
      pointer-events: none;
    }
    
    .mobile-menu {
      transform: translateX(100%);
    }
    
    .backdrop.active {
      opacity: 1;
      pointer-events: all;
    }
    
    .mobile-menu.active {
      transform: translateX(0);
    }
    
    /* Logo styling */
    .logo-img {
      height: 75px;
      object-fit: contain;
    }
    
    .mobile-logo-img {
      height: 70px;
      object-fit: contain;
    }
   @media (max-width: 640px) {
       .filter-form {
           display: none;
       }

       .filter-form.active {
           display: flex;
       }
   }

   .loading-spinner {
       display: inline-block;
       width: 20px;
       height: 20px;
       border: 3px solid rgba(255, 255, 255, .3);
       border-radius: 50%;
       border-top-color: #fff;
       animation: spin 1s ease-in-out infinite;
   }

   @keyframes spin {
       to {
           transform: rotate(360deg);
       }
   }

   /* Searcing System Css */
   .search-container {
       position: relative;
   }

   .suggestions-dropdown {
       position: absolute;
       top: 100%;
       left: 0;
       right: 0;
       max-height: 300px;
       overflow-y: scroll;
       /* Changed from auto to scroll to ensure scrollbar is always hidden */
       background: #1e293b;
       border-radius: 0 0 0.5rem 0.5rem;
       border-top-left-radius: 0;
       border-top-left-radius: 0;
       z-index: 50;
       box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
       display: none;
       /* Hide scrollbar for Chrome, Safari and Opera */
       scrollbar-width: none;
       /* Firefox */
       -ms-overflow-style: none;
       /* IE and Edge */
   }

   /* Hide scrollbar for Chrome, Safari and Opera */
   .suggestions-dropdown::-webkit-scrollbar {
       display: none;
   }

   .suggestion-item {
       padding: 0.75rem 1rem;
       cursor: pointer;
       border-bottom: 1px solid #334155;
       transition: background-color 0.2s;
   }

   .suggestion-item:hover {
       background-color: #334155;
   }

   .search-results {
       display: none;
       margin-top: 2rem;
   }

   .search-results.active {
       display: block;
   }