.section {
  display: flex;
  width: 100%;
  padding: 50px 20px;
  min-height: 600px; /* Ensure minimum height for sections */
}

.section:nth-child(odd) {
  background-color: #fff;
}

.section:nth-child(even) {
  background-color: #f0f0f0;
}

/* Column styling */
.text-column {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slider-column {
  flex: 2;
  padding: 20px;
  overflow: hidden; /* Ensure overflow is hidden */
}

/* Reverse order for second section */
.section.reverse {
  flex-direction: row-reverse;
}

/* Direction indicator */
.direction-indicator {
  display: inline-block;
  padding: 5px 10px;
  margin-top: 10px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-weight: bold;
}

.carousel-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 50px 0;
}

.carousel {
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
}

/* Container for the flip effect */
.flip-container {
  perspective: 1000px; /* Ensures 3D effect */
  width: 300px;
  height: 450px;
  margin-right: 20px;
}

.image-container{
  width: 300px;
  height: 450px; 
}

.flip-card {
  width: 300px;
  height: 450px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s ease-in-out;
}

/* Pop-out effect on hover */
.flip-container:hover .flip-card {
  transform: scale(1.1) rotateY(180deg); /* Pop-out and flip together */
  transition: transform 0.6s ease-in-out; /* Apply both the pop-out and flip at once */
}

/* Flip-container itself stays at scale */
.flip-container {
  transition: transform 0.6s ease-in-out; /* Smooth transition for flip-container */
}

/* Front and back side of the image */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* Hide the back side when flipped */
  background-color: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #555;
}

/* Front side with the first image */
.flip-card-front {
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Back side with the second image */
.flip-card-back {
  background-size: cover;
  background-position: center;
  transform: rotateY(180deg);
}

/* Pop-out effect on hover */
.flip-container:hover .flip-card-front {
  transform: scale(1.1);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Adds a shadow for the pop-out effect */
}

/* Pause the animation of the carousel when hovering the wrapper */
.carousel-wrapper:hover .carousel {
  animation-play-state: paused;
}

/* Normal Slider with Popup */
.carousel-wrapper-2 {
  width: 100%;
  overflow: hidden;
  position: relative;
  /* padding: 50px 0; */
}

.carousel-2 {
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
}

.carousel-2 img {
  width: 300px;
  height: 450px; /* Full viewport height */
  margin-right: 20px;
  object-fit: cover;
}

/* Pop-out effect on hover */
.carousel-2 img:hover {
  transform: scale(1.1); /* Makes the image "pop out" */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Adds a shadow for the pop-out effect */
}

/* Pause the animation of the carousel when hovering the wrapper */
.carousel-wrapper-2:hover .carousel-2 {
  animation-play-state: paused;
}
/* Regular image container for second slider */
.image-container {
  flex-shrink: 0;
  width: 300px; /* Adjusted width as requested */
  height: 450px; /* Adjusted height as requested */
  margin-right: 20px;
  overflow: hidden;
  position: relative;
  background-color: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #555;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
/* Mobile-specific styles */
@media (max-width: 992px) {
  .section {
    flex-direction: column;
    padding: 20px 10px;
    min-height: auto;
  }

  .section.reverse {
    flex-direction: column;
  }

  .text-column {
    width: 100%;
    order: 1;
    padding: 10px;
  }

  .slider-column h2 {
    font-size: 22px;
    margin-bottom: 10px;
  }

  p {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .direction-indicator {
    font-size: 12px;
    padding: 4px 8px;
  }

  /* Adjust card sizes for mobile */

  .flip-container,
  .image-container {
    width: 220px;
    height: 330px;
    margin-right: 15px;
  }

  .flip-card-front,
  .flip-card-back,
  .image-container {
    font-size: 18px;
  }
}

/* Small mobile devices */
@media (max-width: 576px) {
  .flip-container,
  .image-container {
    width: 180px;
    height: 270px;
    margin-right: 10px;
  }

  .flip-card-front,
  .flip-card-back,
  .image-container {
    font-size: 16px;
  }
}
/* ====== Default styles ====== */

/* Show desktop carousel by default */
.carousel-wrapper.carousel-wrapper-1.desktop-only {
  display: block;
}

/* Hide mobile content by default */
.mobile-only {
  display: none;
}

/* Flip cards hidden by default */
.mobile-flip-cards .flip-container {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show only selected flip card */
.mobile-flip-cards .flip-container.show {
  display: block;
  opacity: 1;
}


/* ====== Mobile-specific overrides ====== */
@media (max-width: 768px) {
  /* Hide desktop carousel */
  .carousel-wrapper.carousel-wrapper-1.desktop-only {
    display: none !important;
  }

  /* Show mobile block */
  .mobile-only {
    display: block !important;
  }

  /* Mobile flip cards wrapper styling */
  .mobile-flip-cards {
    height: 450px;
    position: relative;
  }

  /* Flip container layout */
  .mobile-flip-cards .flip-container {
    width: 300px;
    height: 450px;
    margin: 0 auto;
    position: relative;
  }

  .mobile-flip-cards video,
  .mobile-flip-cards img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Optional small badge */
  .mobile-only small {
    z-index: 3;
    position: fixed;
    padding: 10px;
    width: 300px;
    text-align: center;
    background: white;
  }
}