/* Custom Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px; /* Set the width of the scrollbar */
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: #4a90e2; /* Set the color of the scrollbar thumb */
    border-radius: 10px; /* Rounded corners for the thumb */
  }
  
  ::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Set the track color */
    border-radius: 10px; /* Rounded corners for the track */
  }
  /* Custom CSS for the card */
  .card {
    display: none;
    text-align: center;
    margin: 50px auto;
    padding: 20px;
    border-radius: 10px;
    background: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 500px; /* Set a max width for the card */
    width: 100%; /* Card is responsive */
  }
  .card.active {
    display: block;
  }
  body {
    background: rgb(2, 0, 36);
    background: linear-gradient(
      90deg,
      rgba(2, 0, 36, 1) 0%,
      rgba(9, 9, 121, 1) 35%,
      rgba(0, 212, 255, 1) 100%
    );
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.1s ease; /* Smooth fade-in animation */
  }
  
  body.loaded {
    visibility: visible;
  }
  span.green {
    color: green;
  }
  /* Default (LTR) */
  .mt-6.space-y-6 {
    text-align: left;
  }
  
  /* RTL specific styles */
  html[dir="rtl"] .mt-6.space-y-6 {
    text-align: right;
  }