/* Targeting the navbar links more specifically */
nav .component a {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Apply hover styles with !important to avoid conflicts */
nav .component a:hover {
    background-color: #FF5733 !important; /* Hover color */
    color: rgb(196, 8, 234) !important; /* Text color change on hover */
}

/* Additionally, you can target the navbar items if they have a specific class for active states */
nav .component .text-t-primary:hover {
    background-color: #FF5733 !important;
    color: rgb(179, 4, 248) !important;
}
header a.px-4.py-2,
header button.px-4.py-2 {
 color: rgba(255, 255, 255, 0.6); /* Very light gray text */
  background-color: #171717;       /* Changed from transparent */
  border: 1px solid rgba(60, 60, 60, 0.3); /* Light gray border */
  outline: none;
  transition: outline 0.4s ease, box-shadow 0.4s ease, color 0.4s ease, background-color 0.4s ease;
}

header a.px-4.py-2:hover,
header button.px-4.py-2:hover {
  color: #ffffff;
  background-color: #3b82f6
}
.btn-custom { 
  color: rgba(255, 255, 255, 0.6); /* Very light gray text /
  background-color: rgb(23, 23, 23);       / Changed from transparent /
  border: 1px solid rgba(255, 255, 255, 0.3); / Light gray border */
  outline: none;
  transition: outline 0.4s ease, box-shadow 0.4s ease, color 0.4s ease, background-color 0.4s ease;
}

.btn-custom:hover {
  color: #ffffff;
  background-color: #3b82f6
}

img.logo-fixed-size {
  width: 160px;      /* 16 units */
  height: 90px;      /* 9 units */
  object-fit: contain;
  display: block;
}

/* Force icon color in header buttons */
header a.px-4.py-2 i,
header button.px-4.py-2 i {
  color: #0b6ab3 !important;
}
element.style {
}
.gap-8 {
    gap: 2rem;
}
.justify-between {
    justify-content: space-between;
}
.items-start {
    align-items: flex-start;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex {
    display: flex
;
}