/* Add your custom styles here */
@font-face {
    font-family: 'Opun Bold';
    src: url('./fonts/Opun-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

.hero-title,h1,h2,h3,h4,h5 {
    font-family: 'Opun Bold', sans-serif;
}

.service-card {
  border: 2px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
  
.service-card:hover {
  border: 3px solid #fcb300; /* Thicker yellow border */
  box-shadow: 0 0 10px #fcb300, 0 1rem 2rem rgba(0, 0, 0, 0.2); /* yellow glow + soft lift */
  transform: translateY(-5px);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.roboto {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: bold;
    font-variation-settings:
      "wdth" 100;
  }

  p,body,a {
    font-family: "Roboto", sans-serif;
    color: #19204e;
  }
  .text-secondary {
    color: #19204e !important;
}
.primary-btn-shadow {
  background-color: #fcb300;
  color: #19204e; 
  font-family: 'Roboto', sans-serif;         
  border: none;
  box-shadow: 0 1.25rem 2.1875rem 0 rgba(241, 165, 1, 0.15); /* keep existing shadow */
}
.primary-btn-shadow:hover {
  background-color: #9dcd5a;
  color:#19204e;
  cursor: pointer;
}

.btn-danger {
  background-color: #fcb300; /* Yellow */
  color: #19204e;
  border: none;
  transition: background-color 0.3s ease;
}

.btn-danger:hover {
  background-color: #9dcd5a; /* Green on hover */
  color: #19204e;
}
.navbar-light .navbar-nav .nav-link:hover {
  color: #9dcd5a !important;
}
#navbarDropdown:hover {
  color: #9dcd5a !important;
}

/* Make all navbar links and dropdown items bold using Roboto */
.navbar-nav .nav-link,
.navbar-nav .dropdown-toggle,
.navbar-nav .dropdown-item {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700 !important;
}

/* Match dropdown items hover effect with main navbar links */
.dropdown-item:hover {
  color: #9dcd5a !important;
  background-color: transparent !important;
}

/* Make the RecruitHER logo larger */
.navbar-brand img {
  width: 300px !important;  /* Set the logo width to 300px */
  height: auto !important;  /* Maintain aspect ratio */
  max-width: none !important;  /* Remove the 100% max-width restriction */
}

/* Adjust the navbar padding to align logo and links */
.navbar {
  padding-top: 10px !important;  /* Adjust top padding */
  padding-bottom: 10px !important;  /* Adjust bottom padding */
}

/* Adjust the navbar brand (logo) to align with links */
.navbar-brand {
  padding-top: 0 !important;  /* Remove any additional padding from the logo */
  padding-bottom: 0 !important;  /* Remove any additional padding from the logo */
}

/* Make the 'Learn more' button text bold */
a.btn.btn-primary {
  font-weight: bold;
}

/* Make sure icons are red and centered */
.service-card img {
  display: block;
  margin: 0 auto 1rem auto;
  filter: brightness(0) saturate(100%) invert(18%) sepia(83%) saturate(3637%) hue-rotate(339deg) brightness(86%) contrast(96%);
}

/* Even out title height if needed */
.service-card h4 {
  min-height: 3em; /* Adjust as needed for consistency */
}

/* Ensure consistent paragraph line count and spacing */
.service-card p {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
  min-height: 6em; /* Enough space for ~4 lines */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 0;
}

/* Optional: tighten space under section title if it's too large */
#details .text-center.mb-7 {
  margin-bottom: 2rem !important; /* Closer spacing to cards */
}

/* Remove any unwanted pseudo-elements that may be causing the protrusion */
.service-card::after,
.service-card::before {
  content: none !important;
  display: none !important;
}

/* Remove any strange overflow or shadow that’s protruding on hover */
.service-card:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* subtle lift */
  overflow: hidden;
}

/* Ensure no child elements are spilling out */
.service-card * {
  overflow: hidden;
}

#details img[src*="shape.svg"] {
  display: none !important;
}