/* Cards ------------------------- */
.card-link {
  text-decoration: none;
  color: inherit;
}

.custom-card {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.card-link:hover .custom-card {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Ensuring cards have the same height */
.row {
  display: flex;
  flex-wrap: wrap;
}
.col-md-4 {
  display: flex;
}
/* End Cards ------------------------- */

/* Divider --------------------------- */
.hr-primary {
  border-top-color: var(--bs-primary); /* Set the top border color to Bootstrap's primary color */
  border-top-width: 1px; /* Set the desired thickness of the <hr> */
}
.hr-secondary {
  border-top-color: var(--bs-secondary); /* Set the top border color to Bootstrap's primary color */
  border-top-width: 2px; /* Set the desired thickness of the <hr> */
}
.hr-danger {
  border-top-color: var(--bs-danger); /* Set the top border color to Bootstrap's primary color */
  border-top-width: 2px; /* Set the desired thickness of the <hr> */
}

/* Divider --------------------------- */

 /* Nav Bar -------------------------- */

.navbar-custom {
  background-color: #fff; /* Custom background color */
}

.navbar-nav .nav-item + .nav-item {
  margin-right: 1rem; /* Adds space between links */
}
.navbar-nav .btn {
  margin-left: 2rem; /* Adds space between the last link and the button */
}
/* Adjusting the logo size for better appearance */
/* .navbar-brand img {
  height: 80px; 
  width: auto;
} */

.custom-link {
  background-color: transparent; /* Transparent background */
  padding: 8px 15px; /* Spacing around text for a larger clickable area */
  transition: color 0.3s ease-in-out, border-bottom-color 0.3s ease-in-out; /* Smooth transition for color and underline */
  border-bottom: 2px solid transparent; /* Initial border for a smooth transition into underlined text */
  text-decoration: none; /* Remove default underline */
}

.custom-link:hover, .custom-link:focus {
  color: #0056b3; /* Darker blue on hover/focus */
  border-bottom-color: var(--secondary) !important; /* Match border color with text on hover/focus */
  text-decoration: none; /* Ensure underline doesn't appear alongside border */
}
/* Style the dropdown menu background and border */
.navbar .dropdown-menu {
  background-color: #ffffff; /* Light background for the dropdown */
  border-radius: 0.25rem; /* Slightly rounded corners for the dropdown menu */
  border: 1px solid #dddddd; /* Light border for the dropdown */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Style individual dropdown items */
.navbar .dropdown-item {
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth transition for background and text color */
}

/* Hover and focus states for dropdown items */
.navbar .dropdown-item:hover, .navbar .dropdown-item:focus {
  background-color: #f8f9fa; /* Light background color on hover/focus */
  color: #0056b3; /* Darker text color on hover/focus */
}

/* Optional: Adjust padding for dropdown items for consistency */
.navbar .dropdown-item {
  padding: 0.5rem 1rem; /* Adjust padding to your liking */
}


 /* End Nav Bar -------------------------- */

/* image header */
.rounded-left {
  border-top-left-radius: 1rem; // Adjust the radius as needed
}
.rounded-right {
  border-top-right-radius: 1rem; // Adjust the radius as needed
}