/* AP Slideshow styles */
.ap-slideshow {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  /*background: #000;*/
}
/* New style for the slide container */
.ap-slideshow .ap-slideshow-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Removed opacity: 0; from here */
  z-index: 1;
  /* Ensure slide container itself doesn't animate, only its child img */
  transition: none;
}

.ap-slideshow .ap-slideshow-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0; /* Initial opacity for the image */
  z-index: 1;
  /* Added default transform for consistency */
  transform: translateX(0) scale(1);
}
.ap-slideshow .ap-slideshow-slide img.active {
  opacity: 1;
  z-index: 2;
}
/* Styles for FADE effect - Apply transition only when slideshow is set to fade */
.ap-slideshow[data-effect="fade"] .ap-slideshow-slide img {
    transition: opacity var(--ap-slideshow-transition-duration, 1s) ease-in-out; /* Apply opacity transition only for fade effect */
}
/* Removed redundant .ap-slideshow[data-effect="fade"] img.active rule */

/* SLIDE EFFECT */
/* Apply transform and opacity transition to ALL images within a slide effect slideshow */
.ap-slideshow[data-effect="slide"] .ap-slideshow-slide img {
    transition: transform var(--ap-slideshow-transition-duration, 1s) ease-in-out, opacity var(--ap-slideshow-transition-duration, 1s) ease-in-out;
}

/* Initial (for incoming) / Outgoing (for departing) states for slide */
.ap-slideshow[data-effect="slide"] .ap-slideshow-slide img.slide-left { /* Slides from right to left, or moves out to left */
    transform: translateX(-100%); /* Starts off-screen left / Ends off-screen left */
    opacity: 0;
}
.ap-slideshow[data-effect="slide"] .ap-slideshow-slide img.slide-right { /* Slides from left to right, or moves out to right */
    transform: translateX(100%); /* Starts off-screen right / Ends off-screen right */
    opacity: 0;
}

/* Active state for slide - transitions to center and visible */
.ap-slideshow[data-effect="slide"] .ap-slideshow-slide img.active {
    transform: translateX(0); /* Moves to center */
    opacity: 1; /* Becomes visible */
}


/* ZOOM EFFECT */
/* Apply transform and opacity transition to ALL images within a zoom effect slideshow */
.ap-slideshow[data-effect="zoom"] .ap-slideshow-slide img {
    transition: transform var(--ap-slideshow-transition-duration, 1s) ease-in-out, opacity var(--ap-slideshow-transition-duration, 1s) ease-in-out;
}

/* Initial (for incoming) / Outgoing (for departing) states for zoom */
.ap-slideshow[data-effect="zoom"] .ap-slideshow-slide img.zoom-in { /* Zooms in from slightly larger, or zooms out to slightly larger */
    transform: scale(1.1); /* Starts slightly larger / Ends slightly larger */
    opacity: 0;
}

/* Active state for zoom - transitions to normal size and visible */
.ap-slideshow[data-effect="zoom"] .ap-slideshow-slide img.active {
    transform: scale(1); /* Zooms to normal size */
    opacity: 1;
}

/* Arrows */
.ap-slideshow .ap-slideshow-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  box-shadow: none;
  font-size: 2rem;
  z-index: 21;
  cursor: pointer;
  padding: 0;
  border-radius: 0;
  user-select: none;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.4s;
}
.ap-slideshow .ap-slideshow-arrow.edge-active {
  opacity: 1;
}
.ap-slideshow .ap-slideshow-arrow.left {
  left: 10px;
}
.ap-slideshow .ap-slideshow-arrow.right {
  right: 10px;
}
.ap-slideshow .ap-slideshow-arrow:hover .ap-slideshow-arrow-svg {
  stroke: #23282d;
}
.ap-slideshow-arrow-svg {
  width: 45px;
  height: 45px;
  display: block;
  stroke: #AEACA6;
  transition: stroke 0.2s;
}
.ap-slideshow .ap-slideshow-arrow:focus {
  outline: none;
  box-shadow: none;
}
.ap-slideshow .ap-slideshow-arrow.edge-active:hover .ap-slideshow-arrow-svg {
  animation: fade-arrow-bounce 2s linear infinite alternate;
}
@keyframes fade-arrow-bounce {
  0%   {transform: scale(1);}
  50%  {transform: scale(1.2);}
  100% {transform: scale(1);}
}
.ap-slideshow .ap-slideshow-edge {
  position: absolute;
  top: 0;
  width: 20%;
  height: 100% !important;
  z-index: 20;
  cursor: pointer;
  background: transparent;
  display: block;
  pointer-events: auto;
}
.ap-slideshow .ap-slideshow-edge-left {
  left: 0;
}
.ap-slideshow .ap-slideshow-edge-right {
  right: 0;
}

/* Dots */
.ap-slideshow-dots {
    position: absolute;
    bottom: 20px;/*
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 15px;*/
    left: 0; /* Cover the whole width from the left */
    width: 100%; /* Cover the whole width */
    z-index: 20;
    display: flex;
    justify-content: space-around; /* Distribute dots evenly */
    align-items: center; /* Vertically center dots on the line */
    height: 1px; /* Height to contain the dots and the line */
    background: #AEACA6; /* Thin line background */
}
.ap-slideshow-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #23282d; /* Set background to transparent for inactive state */
    border: 1px solid #AEACA6; /* White/grey contour */
    cursor: pointer;
    transition: background 0.7s, border-color 0.7s;
    flex-shrink: 0; /* Prevent dots from shrinking */
}
.ap-slideshow-dot.active {
    background: #AEACA6; /* Filled white/grey when active */
    border-color: #AEACA6; /* Ensure border matches fill color when active */
}

/* Caption */
.ap-slideshow-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    color: #fff;
    background: rgba(0,0,0,0.5);
    padding: 8px 16px;
    font-size: 1.1em;
    z-index: 30;
    border-radius: 4px;
    pointer-events: none;
}
.ap-slideshow-link {
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    z-index: 30;
    display: none;
    pointer-events: auto;
}
.ap-slideshow-link-inner {
    display: inline-block;
    background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 0px 25px;
    border-radius: 12px;
    font-size: 1.1em;
    text-decoration: none;
    transition: background 1s;
}
.ap-slideshow-link-inner:hover {
    background: rgba(0,0,0,0.9);
    text-decoration: underline;
}