/* Refined 3D Carousel CSS with Enhanced Navigation */

.carousel-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
  background: transparent;
}

.carousel-container {
  position: relative;
  width: 100%;
  height: 500px; /* Adjusted for laptop screens */
  margin: 0 auto;
  background: transparent;
  overflow: visible; /* Allow navigation buttons to be visible outside container */
}

#carousel {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
}

/* Base slide styling for all figures */
#carousel figure {
  position: absolute;
  margin: 0;
  border-radius: 0px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
  transition: all 0.3s ease-out; /* Smooth transitions for both auto and manual modes */
  opacity: 0;
  background: #fff;
  /* Force all slides to be visible */
  visibility: visible !important;
}

#carousel figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Initially position slides correctly */
#carousel figure:nth-child(1) { /* Center slide */
  z-index: 5;
  opacity: 1;
  width: 70%;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

#carousel figure:nth-child(2) { /* Right slide */
  z-index: 2;
  opacity: 0.9;
  width: 40%;
  height: 80%;
  top: 10%; /* Vertically centered (100% - 80% = 20%, half is 10%) */
  left: 65%; /* Position closer to center slide (no gap) */
  transform: translateX(0);
}

#carousel figure:nth-child(3) { /* Far right slide */
  z-index: 1;
  opacity: 0;
  width: 40%;
  height: 80%;
  top: 10%;
  left: 100%;
  transform: translateX(0);
}

#carousel figure:nth-child(4) { /* Far left slide */
  z-index: 1;
  opacity: 0;
  width: 40%;
  height: 80%;
  top: 10%;
  left: -100%;
  transform: translateX(0);
}

#carousel figure:nth-child(5) { /* Left slide */
  z-index: 2;
  opacity: 0.9;
  width: 40%;
  height: 80%;
  top: 10%; /* Vertically centered (100% - 80% = 20%, half is 10%) */
  left: -5%; /* Position closer to center slide (no gap) */
  transform: translateX(0);
}

/* Animation for each slide */
@keyframes slide1 {
  0% {
    z-index: 5;
    opacity: 1;
    width: 70%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  18% {
    z-index: 5;
    opacity: 1;
    width: 70%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  20% {
    z-index: 2;
    opacity: 0.9;
    width: 40%;
    height: 80%;
    top: 10%;
    left: -5%;
    transform: translateX(0);
  }
  
  38% {
    z-index: 2;
    opacity: 0.9;
    width: 40%;
    height: 80%;
    top: 10%;
    left: -5%;
    transform: translateX(0);
  }
  
  40% {
    z-index: 1;
    opacity: 0;
    width: 40%;
    height: 80%;
    top: 10%;
    left: -100%;
    transform: translateX(0);
  }
  
  58% {
    z-index: 1;
    opacity: 0;
    width: 40%;
    height: 80%;
    top: 10%;
    left: -100%;
    transform: translateX(0);
  }
  
  60% {
    z-index: 1;
    opacity: 0;
    width: 40%;
    height: 80%;
    top: 10%;
    left: 100%;
    transform: translateX(0);
  }
  
  78% {
    z-index: 1;
    opacity: 0;
    width: 40%;
    height: 80%;
    top: 10%;
    left: 100%;
    transform: translateX(0);
  }
  
  80% {
    z-index: 2;
    opacity: 0.9;
    width: 40%;
    height: 80%;
    top: 10%;
    left: 65%;
    transform: translateX(0);
  }
  
  98% {
    z-index: 2;
    opacity: 0.9;
    width: 40%;
    height: 80%;
    top: 10%;
    left: 65%;
    transform: translateX(0);
  }
  
  100% {
    z-index: 5;
    opacity: 1;
    width: 70%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

@keyframes slide2 {
  0% {
    z-index: 2;
    opacity: 0.9;
    width: 40%;
    height: 80%;
    top: 10%;
    left: 65%;
    transform: translateX(0);
  }
  
  18% {
    z-index: 2;
    opacity: 0.9;
    width: 40%;
    height: 80%;
    top: 10%;
    left: 65%;
    transform: translateX(0);
  }
  
  20% {
    z-index: 5;
    opacity: 1;
    width: 70%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  38% {
    z-index: 5;
    opacity: 1;
    width: 70%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  40% {
    z-index: 2;
    opacity: 0.9;
    width: 40%;
    height: 80%;
    top: 10%;
    left: -5%;
    transform: translateX(0);
  }
  
  58% {
    z-index: 2;
    opacity: 0.9;
    width: 40%;
    height: 80%;
    top: 10%;
    left: -5%;
    transform: translateX(0);
  }
  
  60% {
    z-index: 1;
    opacity: 0;
    width: 40%;
    height: 80%;
    top: 10%;
    left: -100%;
    transform: translateX(0);
  }
  
  78% {
    z-index: 1;
    opacity: 0;
    width: 40%;
    height: 80%;
    top: 10%;
    left: -100%;
    transform: translateX(0);
  }
  
  80% {
    z-index: 1;
    opacity: 0;
    width: 40%;
    height: 80%;
    top: 10%;
    left: 100%;
    transform: translateX(0);
  }
  
  98% {
    z-index: 1;
    opacity: 0;
    width: 40%;
    height: 80%;
    top: 10%;
    left: 100%;
    transform: translateX(0);
  }
  
  100% {
    z-index: 2;
    opacity: 0.9;
    width: 40%;
    height: 80%;
    top: 10%;
    left: 65%;
    transform: translateX(0);
  }
}

@keyframes slide3 {
  0% {
    z-index: 1;
    opacity: 0;
    width: 40%;
    height: 80%;
    top: 10%;
    left: 100%;
    transform: translateX(0);
  }
  
  18% {
    z-index: 1;
    opacity: 0;
    width: 40%;
    height: 80%;
    top: 10%;
    left: 100%;
    transform: translateX(0);
  }
  
  20% {
    z-index: 2;
    opacity: 0.9;
    width: 40%;
    height: 80%;
    top: 10%;
    left: 65%;
    transform: translateX(0);
  }
  
  38% {
    z-index: 2;
    opacity: 0.9;
    width: 40%;
    height: 80%;
    top: 10%;
    left: 65%;
    transform: translateX(0);
  }
  
  40% {
    z-index: 5;
    opacity: 1;
    width: 70%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  58% {
    z-index: 5;
    opacity: 1;
    width: 70%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  60% {
    z-index: 2;
    opacity: 0.9;
    width: 40%;
    height: 80%;
    top: 10%;
    left: -5%;
    transform: translateX(0);
  }
  
  78% {
    z-index: 2;
    opacity: 0.9;
    width: 40%;
    height: 80%;
    top: 10%;
    left: -5%;
    transform: translateX(0);
  }
  
  80% {
    z-index: 1;
    opacity: 0;
    width: 40%;
    height: 80%;
    top: 10%;
    left: -100%;
    transform: translateX(0);
  }
  
  98% {
    z-index: 1;
    opacity: 0;
    width: 40%;
    height: 80%;
    top: 10%;
    left: -100%;
    transform: translateX(0);
  }
  
  100% {
    z-index: 1;
    opacity: 0;
    width: 40%;
    height: 80%;
    top: 10%;
    left: 100%;
    transform: translateX(0);
  }
}

@keyframes slide4 {
  0% {
    z-index: 1;
    opacity: 0;
    width: 40%;
    height: 80%;
    top: 10%;
    left: -100%;
    transform: translateX(0);
  }
  
  18% {
    z-index: 1;
    opacity: 0;
    width: 40%;
    height: 80%;
    top: 10%;
    left: -100%;
    transform: translateX(0);
  }
  
  20% {
    z-index: 1;
    opacity: 0;
    width: 40%;
    height: 80%;
    top: 10%;
    left: 100%;
    transform: translateX(0);
  }
  
  38% {
    z-index: 1;
    opacity: 0;
    width: 40%;
    height: 80%;
    top: 10%;
    left: 100%;
    transform: translateX(0);
  }
  
  40% {
    z-index: 2;
    opacity: 0.9;
    width: 40%;
    height: 80%;
    top: 10%;
    left: 65%;
    transform: translateX(0);
  }
  
  58% {
    z-index: 2;
    opacity: 0.9;
    width: 40%;
    height: 80%;
    top: 10%;
    left: 65%;
    transform: translateX(0);
  }
  
  60% {
    z-index: 5;
    opacity: 1;
    width: 70%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  78% {
    z-index: 5;
    opacity: 1;
    width: 70%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  80% {
    z-index: 2;
    opacity: 0.9;
    width: 40%;
    height: 80%;
    top: 10%;
    left: -5%;
    transform: translateX(0);
  }
  
  98% {
    z-index: 2;
    opacity: 0.9;
    width: 40%;
    height: 80%;
    top: 10%;
    left: -5%;
    transform: translateX(0);
  }
  
  100% {
    z-index: 1;
    opacity: 0;
    width: 40%;
    height: 80%;
    top: 10%;
    left: -100%;
    transform: translateX(0);
  }
}

@keyframes slide5 {
  0% {
    z-index: 2;
    opacity: 0.9;
    width: 40%;
    height: 80%;
    top: 10%;
    left: -5%;
    transform: translateX(0);
  }
  
  18% {
    z-index: 2;
    opacity: 0.9;
    width: 40%;
    height: 80%;
    top: 10%;
    left: -5%;
    transform: translateX(0);
  }
  
  20% {
    z-index: 1;
    opacity: 0;
    width: 40%;
    height: 80%;
    top: 10%;
    left: -100%;
    transform: translateX(0);
  }
  
  38% {
    z-index: 1;
    opacity: 0;
    width: 40%;
    height: 80%;
    top: 10%;
    left: -100%;
    transform: translateX(0);
  }
  
  40% {
    z-index: 1;
    opacity: 0;
    width: 40%;
    height: 80%;
    top: 10%;
    left: 100%;
    transform: translateX(0);
  }
  
  58% {
    z-index: 1;
    opacity: 0;
    width: 40%;
    height: 80%;
    top: 10%;
    left: 100%;
    transform: translateX(0);
  }
  
  60% {
    z-index: 2;
    opacity: 0.9;
    width: 40%;
    height: 80%;
    top: 10%;
    left: 65%;
    transform: translateX(0);
  }
  
  78% {
    z-index: 2;
    opacity: 0.9;
    width: 40%;
    height: 80%;
    top: 10%;
    left: 65%;
    transform: translateX(0);
  }
  
  80% {
    z-index: 5;
    opacity: 1;
    width: 70%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  98% {
    z-index: 5;
    opacity: 1;
    width: 70%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  100% {
    z-index: 2;
    opacity: 0.9;
    width: 40%;
    height: 80%;
    top: 10%;
    left: -5%;
    transform: translateX(0);
  }
}

/* Apply the animations to each slide - only active when not in manual-nav mode */
#carousel:not(.manual-nav) figure:nth-child(1) {
  animation: slide1 10s infinite;
}

#carousel:not(.manual-nav) figure:nth-child(2) {
  animation: slide2 10s infinite;
}

#carousel:not(.manual-nav) figure:nth-child(3) {
  animation: slide3 10s infinite;
}

#carousel:not(.manual-nav) figure:nth-child(4) {
  animation: slide4 10s infinite;
}

#carousel:not(.manual-nav) figure:nth-child(5) {
  animation: slide5 10s infinite;
}

/* Pause animation on hover */
#carousel:hover figure {
  animation-play-state: paused;
}

/* Media query for larger screens */
@media (min-width: 1600px) {
  .carousel-container {
    height: 600px;
  }
}

/* Media query for smaller screens */
@media (max-width: 768px) {
  .carousel-container {
    height: 300px;
  }
}

/* Navigation Buttons Styling with !important to override Elementor */
.carousel-nav-button {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 100 !important;
  background-color: #000000 !important;
  border-radius: 50px !important;
  padding: 15px !important;
  cursor: pointer !important;
  color: #ffffff !important;
  border: none !important;
  outline: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
  opacity: 0.9 !important;
  visibility: visible !important;
}

.carousel-nav-button:hover {
  background-color: #333333 !important;
  opacity: 1 !important;
}

.carousel-button-prev {
  left: 20px !important;
}

.carousel-button-next {
  right: 20px !important;
}

/* Icon styling with !important */
.carousel-nav-button i {
  font-style: normal !important;
  font-size: 18px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  color: #ffffff !important;
  display: block !important;
}

/* Ensure all buttons and controls are visible */
.carousel-container .carousel-nav-button {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  pointer-events: auto !important;
}



/* Add these styles to carousel.css */

/* Manual navigation mode (autoplay disabled) */
#carousel.manual-nav figure {
  animation: none !important; /* Disable all animations */
  transition: all 0.3s ease-out; /* Keep transitions smooth */
}

/* Add an indicator for autoplay status (optional) */
.carousel-wrapper::after {
  content: attr(data-autoplay-status);
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 12px;
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 5px 10px;
  border-radius: 3px;
  z-index: 100;
  display: none; /* Hidden by default, enable for debugging */
}