:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    color: black;
  }

  a:focus {
    outline: 2px solid #00b894; /* Or whatever your highlight color is */
    outline-offset: 2px;
    background-color: #2d3748;  /* dark bg to contrast */
  }

  input:focus, button:focus {
    outline: 2px solid #00b894; /* Green-teal highlight */
    outline-offset: 2px;
    background-color: #f0fdf4;  /* Optional: light green for focus */
    box-shadow: 0 0 0 3px rgba(0, 184, 148, 0.3); /* Soft glow */
  } 

  html {
    scroll-behavior: smooth;
  }
  
 
  .Alertcountdown { top: 0; }
 
  /* Hide the alert on small tablets/phones if desired by design */
  @media (max-width: 768px) {
    .Alertcountdown { visibility: hidden; }
  }

  #faq
  {
    margin-top: 5rem;
  }
  
  #menuToggle:focus i {
    color: black;
  }

  /* Add to your stylesheet */
#menuItems {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #ffffff #212b36;
}

#menuItems::-webkit-scrollbar { 
  width: 8px;
}

#menuItems::-webkit-scrollbar-track {
  background: #212b36;
}

#menuItems::-webkit-scrollbar-thumb {
  background-color: #ffffff;
  border-radius: 4px;
}

/* Updated responsive breakpoints for better laptop support */
@media (max-width: 1023px) {
  #mainMenu {
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
} 


/* Focus states for menu items */
#menuItems a:focus,
#menuItems button:focus {
  color: white !important;
  background-color: #4a5568 !important; /* Slightly lighter than main bg */
  outline: 2px solid #ffffff !important;
  outline-offset: 2px !important;
}

/* Hover states */
#menuItems a:hover,
#menuItems button:hover {
  color: white !important;
  background-color: #4a5568 !important;
}

/* Active states */
#menuItems a:active,
#menuItems button:active {
  color: white !important;
  background-color: #3c4656 !important;
}

/* Ensure all interactive elements maintain contrast - Updated breakpoint */
@media (max-width: 1023px) {
  #menuItems a,
  #menuItems button {
    color: white;
  }
}

/* Fix for button active states - ensure content remains visible */
.group:active img,
.group.active img {
  filter: brightness(0) !important;
}

.group:active span,
.group.active span {
  color: inherit !important;
}

/* Specific fixes for primary buttons (purple background) */
button.group:active,
a.group:active {
  background-color: white !important;
  color: black !important;
  border-color: #624BFF !important;
}

/* Specific fixes for outline buttons (transparent background) */
button.group:active[class*="bg-transparent"],
button.group.active[class*="bg-transparent"] {
  background-color: #624BFF !important;
  color: white !important;
  border-color: #624BFF !important;
}

button.group:active[class*="bg-transparent"] img,
button.group.active[class*="bg-transparent"] img {
  filter: brightness(0) invert(1) !important;
}

/* Focus states for buttons - ensure proper contrast */
button:focus,
a:focus {
  outline: 2px solid #00b894 !important;
  outline-offset: 2px !important;
}

/* Specific focus styles for primary buttons (purple background) */
button.group:focus,
a.group:focus {
  background-color: white !important;
  color: black !important;
  border-color: #624BFF !important;
}

button.group:focus img {
  filter: brightness(0) !important;
}

button.group:focus span {
  color: black !important;
}

/* Specific focus styles for outline buttons (transparent background) */
button.group:focus[class*="bg-transparent"] {
  background-color: #624BFF !important;
  color: white !important;
  border-color: #624BFF !important;
}

button.group:focus[class*="bg-transparent"] img {
  filter: brightness(0) invert(1) !important;
}

button.group:focus[class*="bg-transparent"] span {
  color: white !important;
}

/* Responsive improvements for smaller laptops */
@media (min-width: 1024px) and (max-width: 1279px) {
  /* Better text scaling for laptop screens */
  .laptop-text-sm {
    font-size: 0.875rem !important;
  }
  
  .laptop-padding-sm {
    padding: 0.5rem !important;
  }
  
  /* Better grid spacing for laptops */
  .laptop-gap-sm {
    gap: 1rem !important;
  }
  
  /* Improved hero section for laptops */
  .laptop-hero-padding {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}
.quoted:first-of-type::before {
  content: '"';
}
.quoted:last-of-type::after {
  content: '"';
}

ol {
  list-style-type: decimal;
}