/* Fix for banner - remove white overlay on all screen sizes, but preserve black overlay */
.personal-portfolio-slider:not([data-black-overlay])::before {
  display: none !important;
  background: none !important;
}

.active-dark-mode .personal-portfolio-slider:not([data-black-overlay])::before {
  display: none !important;
  background: none !important;
}

.active-dark .personal-portfolio-slider:not([data-black-overlay])::before {
  display: none !important;
  background: none !important;
}

/* Override all media query specific white overlays for complete coverage, but preserve black overlay */
@media only screen and (max-width: 767px) {
  .personal-portfolio-slider:not([data-black-overlay])::before {
    display: none !important;
    background: none !important;
  }
  /* Force disable white background even for elements with data-black-overlay */
  .personal-portfolio-slider[data-black-overlay]::before {
    background: #00010c !important; /* Use theme's black overlay color */
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .personal-portfolio-slider:not([data-black-overlay])::before {
    display: none !important;
    background: none !important;
  }
  /* Force disable white background even for elements with data-black-overlay */
  .personal-portfolio-slider[data-black-overlay]::before {
    background: #00010c !important; /* Use theme's black overlay color */
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .personal-portfolio-slider:not([data-black-overlay])::before {
    display: none !important;
    background: none !important;
  }
  /* Force disable white background even for elements with data-black-overlay */
  .personal-portfolio-slider[data-black-overlay]::before {
    background: #00010c !important; /* Use theme's black overlay color */
  }
}

@media only screen and (min-width: 1200px) {
  .personal-portfolio-slider:not([data-black-overlay])::before {
    display: none !important;
    background: none !important;
  }
  /* Force disable white background even for elements with data-black-overlay */
  .personal-portfolio-slider[data-black-overlay]::before {
    background: #00010c !important; /* Use theme's black overlay color */
  }
}

/* Ensure background image is always visible */
.personal-portfolio-slider.bg_image {
  background-attachment: scroll !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Make sure the banner image has higher z-index than overlays */
.slide.personal-portfolio-slider.bg_image {
  z-index: 1;
  position: relative;
}

.slide.personal-portfolio-slider.bg_image .container {
  position: relative;
  z-index: 2;
}

/* Border is now added directly to the portrait image during generation */