/* Default header styles */
.header-color {
  background-color: white !important;
  color: blue !important;
}

#header .header-nav-main nav > ul > li > a {
  color: black !important; /* Default black color for inactive links */
}

#header .header-nav-main nav > ul > li > a:hover {
  color: blue !important; /* Active link color */
}
#header .header-logo img {
  left: 50px;
}
.image-gallery-item img {
  margin-top: 100px;
  height: 700px;
  object-fit: cover; /* Ensures the image maintains aspect ratio while filling the area */
  width: 100%;
}

/* Prevent the lightbox from capturing clicks */
.thumb-info-wrapper {
  pointer-events: auto; /* Keep default behavior */
}

/* Disable pointer events for links inside the lightbox */
.thumb-info-wrapper a {
  pointer-events: none;
}

/* Allow clicking the "View Website" button */
.thumb-info-wrapper .view-website-btn {
  pointer-events: auto;
  z-index: 10;
  position: relative;
  display: none; /* Initially hidden */
  margin-top: 10px;
}

/* Show button on hover */
.thumb-info-wrapper:hover .view-website-btn {
  display: inline-block;
}

/* Card styling */
.portfolio-carousel .card {
  height: 100%;
  border-radius: 0.75rem;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  background: #fff;
  border: none;
}

/* Hover animation */
.portfolio-carousel .card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  z-index: 2;
}

/* Card body spacing */
.portfolio-carousel .card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

/* Custom image wrapper for fixed height */
.custom-portfolio-img {
  height: 900px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Image with modern transition */
.custom-portfolio-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
  transition: transform 0.6s ease;
}

/* Zoom-in image on card hover */
.portfolio-carousel .card:hover .custom-portfolio-img img {
  transform: scale(1.05);
}

/* Remove duplication if this rule already exists */
.portfolio-carousel .card img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}