#directory-content {
  font-family: var(--font-work-sans) !important;
}

#company-title {
  font-weight: 700 !important;
}

#share-button {
  transform: scaleX(1);
}

#social-media {
  border-color: rgb(39, 65, 230) !important;
}

.social-media-borders {
  border-color: rgb(39, 65, 230) !important;
}

input::placeholder {
  color: grey !important;
}

input[type="text"] {
  padding-inline: 45px;
}

.hero {
  position: relative;
  overflow: hidden;
}

.custom-shadow {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.hero>.d-flex {
  position: relative;
  z-index: 2;
}

.fs-7 {
  font-size: .90rem;
}


.fs-8 {
  font-size: .80rem;
}

a.anchor-1 {
  font-family: var(--font-work-sans), sans-serif !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 24px !important;
  color: inherit !important;
  text-decoration: none !important;
  position: relative !important;
  display: inline-block !important;
}

a.anchor-1:hover {
  color: rgb(39, 65, 230) !important;
}

a.anchor-1::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -2px !important;
  width: 0 !important;
  height: 2px !important;
  background-color: rgb(39, 65, 230) !important;
  transition: width 0.3s ease, left 0.3s ease !important;
}

a.anchor-1:hover::after {
  width: 100% !important;
  left: 0 !important;
}

.category-badge {
  font-size: 0.875rem;
  font-weight: 500;
  color: white !important;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 16px 16px 0 0 !important;
  background-color: var(--category-spotlight) !important;
}

.category-events {
  background-color: var(--category-events) !important;
}

.category-getting-work {
  background-color: var(--category-getting-work) !important;
}

.category-lifestyle-wellbeing {
  background-color: var(--category-lifestyle-wellbeing) !important;
}

.category-self-employment {
  background-color: var(--category-self-employment) !important;
}

.category-making-work {
  background-color: var(--category-making-work) !important;
}

.category-the-essentials {
  background-color: var(--category-the-essentials) !important;
}

.category-the-industry {
  background-color: var(--category-the-industry) !important;
}

.category-training {
  background-color: var(--category-training) !important;
}

.category-creative-development {
  background-color: var(--category-creative-development) !important;
}

.category-community-engagement {
  background-color: var(--category-community-engagement) !important;
}

.category-professional-growth {
  background-color: var(--category-professional-growth) !important;
}

.category-performance-arts {
  background-color: var(--category-performance-arts) !important;
}

.category-young-performers {
  background-color: var(--category-young-performers) !important;
}

.category-spotlight {
  background-color: var(--category-spotlight) !important;
}

.category-actors {
  background-color: var(--category-actors) !important;
}

.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card {
  overflow: hidden;
  border-radius: 16px !important;
}

.card-body {
  padding: 0;
}

.card-content {
  margin-top: 0.5rem;
}

/* Dropdown styles */
.custom-dropdown {
  position: relative;
  width: 100%;
}

.custom-dropdown button {
  color: #808080!important;
}

.custom-dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  z-index: 1000;
  width: max-content;
  min-width: 100%;
  height: auto;
  max-height: 450px;
  overflow-y: auto;
}

.custom-dropdown.active .dropdown-menu {
  display: block;
  z-index: 1050;
  max-height: 450px;
  overflow-y: auto;
  border-radius: 0.375rem;
  border: 5px;
  border-top: 0px !important;
  border-color: rgb(39, 65, 230) !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.custom-dropdown.active .dropdown-arrow {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
  color: #222121 !important;
}

.custom-dropdown .dropdown-arrow {
  color: #222121 !important;
}
.custom-dropdown.active .form-control {
  border-bottom: 0 !important;
}

.input-search {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding-left: 20px !important;
  font-size: 18px !important;
}

.text-secondary-custom {
  font-size: 26px !important;
  font-family: var(--font-work-sans);
  font-weight: 500 !important;
  color: var(--light-gray-5) !important;
}