/* NAV BASE */
.navbar {
  padding: 0.6rem 0;
}

/* BRAND */
.navbar-brand span {
  font-size: 14px;
  font-weight: 700;
}

/* LINKS */
.nav-link {
  position: relative;
  font-weight: 600;
  color: #333 !important;
  transition: all 0.25s ease;
}

/* HOVER EFFECT (underline animation) */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background: #dc3545;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link:hover {
  color: #dc3545 !important;
  transform: translateY(-1px);
}

/* ACTIVE LINK */
.active-link {
  color: #dc3545 !important;
}

.active-link::after {
  width: 100%;
}

/* LOGIN BUTTON */
.btn-danger {
  border-radius: 25px;
  transition: all 0.3s ease;
}

.btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(220, 53, 69, 0.25);
}

/* MOBILE CLEANUP */
@media (max-width: 991px) {
  .nav-link::after {
    display: none;
  }
}

/* REMOVE DEFAULT ARROW */
.navbar .dropdown-toggle::after {
  display: none;
  margin-left: 8px; /* controls space */
  vertical-align: middle;
}

/* ADD NICE SVG ARROW */
.navbar .dropdown-toggle {
  position: relative;
  padding-right: 18px;
}

.navbar .dropdown-toggle::before {
  content: "▾";
  position: absolute;
  right: -5px; /* move it slightly to the right */
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  opacity: 0.7;
}
/* Mobile fix */
@media (max-width: 768px) {
  .navbar .dropdown-toggle::before {
    right: 2px; /* pull it back inside on small screens */
  }
}
a.text-dark {
  transition: color 0.2s ease;
}

a.text-dark:hover {
  color: #d62828 !important;
}
.hero-img {
  height: 420px;
  object-fit: cover;
}

/* MOBILE FIX */
@media (max-width: 768px) {
  .hero-img {
    height: 220px;
  }
}

/* STRONGER OVERLAY (FIX VISIBILITY) */
.hero-overlay {
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.9),   /* darker bottom */
    rgba(0,0,0,1.6),
    rgba(0,0,0,0.2),
    transparent
  );
  color: #fff;
}
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}