/* Pattern: 1st orange, 2nd red, 3rd teal, 4th blue */
.step:nth-child(4n + 1) .circle {
  background: #ff9100; /* orange */
  border-color: #ff9100;
}
.step:nth-child(4n + 2) .circle {
  background: #e03336; /* red */
  border-color: #e03336;
}
.step:nth-child(4n + 3) .circle {
  background: #009688; /* teal */
  border-color: #009688;
}
.step:nth-child(4n + 4) .circle {
  background: #0072ce; /* blue */
  border-color: #0072ce;
}

/* Make icons white so they show up on colored circles */
.step .circle img {
  filter: brightness(0) invert(1);
}







.step.active .circle img {
  filter: brightness(0) invert(1);
}
.step .circle img {
    max-width: 20px;
}
/* the right column should clip its contents */
.accordion-right {
  position: relative;
  overflow: hidden;        /* <— Stops the bleed */
  border-radius: 8px;
  display: flex;
}

/* pick one of these height strategies */

/* A) Aspect ratio (nice and responsive) */
@media (min-width: 768px) {
  .accordion-right {
    aspect-ratio: 16 / 9;  /* or 4/3, 21/9, etc. */
  }
}

/* B) Or a fixed height on desktop */
@media (min-width: 768px) {
  .accordion-right {
    height: 420px;         /* pick a value that fits your design */
  }
}

/* Make the image fill and crop */
.accordion-right img {
  display: block;
  width: 100%;
  height: 100%;            /* <— key: fill the container’s height */
  object-fit: cover;       /* crop instead of stretching */
  max-width: 100%;
  transition: opacity 0.3s ease;
}

.accordion-container {
  display: flex;
  gap: 40px;
  position: relative;
  height: auto;
  align-items: flex-start;
}

.accordion-left,
.accordion-right {
  width: 50%;
}
.accordion-left {
  transition: all 0.3s ease;
}


.accordion-right {
  display: flex;
  align-items: stretch;
}

.accordion-right img {
  width: 100%;
  height: auto;
  object-fit: cover;


  max-width: 100%;
  border-radius: 8px;
  transition: opacity 0.3s ease;
  opacity: 1;
}

.vertical-line {
background: #ececec;
    height: 100%;
    left: 20px;
    position: absolute;
    top: 0;
    width: 2px;
  z-index: 0;}

.step {
  position: relative;
  margin-bottom: 20px;
  cursor: pointer;
  z-index: 1;
  padding-left: 40px;
}

.step-header {
  padding-top: 4px;
  display: flex;
  align-items: center;
}

.circle {
  background: #fff;
  border: 3px solid #fff;

  color: #E03336;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;

  margin-right: 15px;
  position: absolute;
  left: 0;
  top: 0;
}

.step-title {

  padding-left: 25px;
  margin-bottom: 0px;
  font-size:22px;
}

.step-content {
  margin-top: 10px;
  padding-left: 25px;
  color: #333;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease;
}

.step.active .step-content {
  max-height: 500px; /* high enough to fit your content */
  opacity: 1;
}
/*
.step.active .circle {
  border: 3px solid #0072ce;
  background: #0072ce;
  color: #fff;
  transition: background 0.3s, color 0.3s;
}
*/
.accordion-right img {
  max-width: 100%;
  border-radius: 8px;
}

@media (max-width:767px) {
  .accordion-right img {
    z-index: 2;
  }

  .accordion-container {
    align-items: stretch;
    display: grid;}
  .accordion-left, .accordion-right {
    width: 100%;
  }

}






/* Base confetti styles */
.confetti-container {
  position: relative;
}

.confetti {
  position: absolute;
  height: auto;
  z-index: 3;
  opacity: 1;
  transition: transform 0.3s ease;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

/* Top-right positioning for accordion image */
/* Update positioning to be relative to the whole accordion container */
.confetti.pos-top-right-1 {
  top: -30px;
  right: -40px; /* Position relative to the accordion-container */
  transform: rotate(15deg);
  width: 120px;
}

.confetti.pos-top-right-2 {
  top: 60px;
  right: -60px;
  transform: rotate(110deg);
  width: 100px;
}

.confetti.pos-top-right-3 {
  top: 400px;
  right: -50px;
  transform: rotate(5deg);
  width: 80px;
  z-index:-1;
}

/* Animations for top-right confetti */
@keyframes confetti-top-right-1 {
  0% { 
    transform: rotate(15deg) scale(1);
    top: -30px;
    right: -40px;
  }
  100% { 
    transform: rotate(35deg) scale(1.1);
    top: -80px;
    right: -10px;
  }
}

@keyframes confetti-top-right-2 {
  0% { 
    transform: rotate(110deg) scale(1);
    top: 60px;
    right: -60px;
  }
  100% { 
    transform: rotate(140deg) scale(1.05);
    top: 0px;
    right: -30px;
  }
}

@keyframes confetti-top-right-3 {
  0% { 
    transform: rotate(5deg) scale(1);
    top: 400px;
    right: -50px;
  }
  100% { 
    transform: rotate(65deg) scale(1.08);
    top: 350px;
    right: 10px;
  }
}

.confetti.pos-top-right-1 { animation: confetti-top-right-1 1s linear; }
.confetti.pos-top-right-2 { animation: confetti-top-right-2 1s linear; }
.confetti.pos-top-right-3 { animation: confetti-top-right-3 1s linear; }

/* Modern scroll-driven animations */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .confetti.pos-top-right-1 {
      animation: confetti-top-right-1 linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    .confetti.pos-top-right-2 {
      animation: confetti-top-right-2 linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    .confetti.pos-top-right-3 {
      animation: confetti-top-right-3 linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}

/* Hide on mobile */
@media (max-width: 767px) {
  .confetti {
    display: none;
  }
}