.icp-scroller-section {
  overflow: unset !important;
}

.module-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: start;
}

@media(max-width: 767px){
  .module-container {
    display: none;
  }
}

.triangle-container{
  display:  flex;
  position: sticky;
  position: -webkit-sticky;
  top: 200px;
  width: 33.875rem;
  gap: 2rem;
  align-items: center;
  height: 34rem;
}

.image-container {
  position: absolute;
  top: 0;
  left: 2rem;
  width: 26.875rem; 
  height: 26.875rem; 
  z-index: 1;
  transition: clip-path 1s ease;
  transition: -webkit-clip-path 1s ease;
  clip-path: polygon(0 0, 50% 86.6%, 100% 0);
  -webkit-clip-path: polygon(0 0, 50% 86.6%, 100% 0);
}

.background-shapes-container {
  position: absolute;
  width: 26.875rem;
  height: 26.875rem;
}

.background-shape {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 26.875rem; 
  height: 26.875rem; 
  z-index: -1; /* Ensure it is behind the images */
  transition: opacity 1s ease;
  opacity: 0;
}

@keyframes example-animation {
  0% { height: 0; }
  100% { height: 86.6%; }
}


#background_shape_1 {
  height: 0;
  animation: example-animation 1s ease forwards;
  animation-iteration-count: 1;
}

.rotate-down #background_shape_1 {
  animation: example-animation 1s ease forwards;
  animation-iteration-count: 1;
  opacity: 1;
}

.rotate-left #background_shape_2 {
  opacity: 1;
}
.rotate-up #background_shape_3 {
  opacity: 1;
}
.rotate-right #background_shape_4 {
  opacity: 1;
}

#background_shape_1 img {
  height: -webkit-fill-available;
  object-fit: contain;
}

.image-container img {
  width: 100%;
  height: 100%;
}

.side-bar-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.side-bar {
  width: 3px;
  height: 2rem;
/*   background: linear-gradient(to bottom, #fe4497 0%, #fe4497 0%, #222222 0%, #222222 100%); */
/*   background: linear-gradient(to bottom, #fe4497 50%, #222222 50%); */
  background-color: #222222;
/*   background-size: 100% 200%; */
  opacity: 0.2;
  transition: opacity 1s ease, background-color 1s ease;
/*   background-position: bottom; /* Start at the top */ */
}

.side-bar.active {
/*   animation: colorRunDown 1s forwards;
  animation-iteration-count: 1; */
  background-color: #fe4497;
  opacity: 1;
  transition: opacity 1s ease, background-color 1s ease;
}

@keyframes colorRunDown {
  to {
    background-position: top; /* Animate the background to the bottom */
  }
}



.text-container{
  width: 50%;
  z-index: 10;
}

.section-wrapper {
  height: 50rem;
}

.section {
  display: flex;
  flex-direction: column;
  align-items: start;
}


@media(min-width: 2400px){
  .section-wrapper {
    height: 40rem;
  }
}


.section-wrapper:last-child{
  height: 0;
  overflow: hidden;
  opacity: 0;
}


.section .content{
  margin-bottom: 4rem;
}

/* Updating clip-path on scroll */
.image-container.rotate-up { clip-path: polygon(0 0, 50% 86.6%, 100% 0) !important; -webkit-clip-path: polygon(0 0, 50% 86.6%, 100% 0) !important; }
.image-container.rotate-right { clip-path: polygon(100% 0, 13.4% 50%, 100% 100%) !important; -webkit-clip-path: polygon(100% 0, 13.4% 50%, 100% 100%) !important; }
/* .image-container.rotate-down { clip-path: polygon(100% 0, 0 0, 50% 86.6%) !important; } */
.image-container.rotate-down { clip-path: polygon(50% 13.4%, 0% 100%, 100% 100%); !important; -webkit-clip-path: polygon(50% 13.4%, 0% 100%, 100% 100%); !important; }


.image-container.rotate-left { clip-path: polygon(86.6% 50%, 0 0, 0 100%) !important; -webkit-clip-path: polygon(86.6% 50%, 0 0, 0 100%) !important; }
.image-container.rotate-out { clip-path: polygon(0 0, 0 0, 0 0) !important; -webkit-clip-path: polygon(0 0, 0 0, 0 0) !important; }

.masked-image {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 1s ease;
  transform: translateY(100%);
}

.masked-image::first-child {
  transform: translateY(0);
}

#masked_image_1{
  z-index: 1;
}
#masked_image_2{
  z-index: 2;
}
#masked_image_3{
  z-index: 3;
}
#masked_image_4{
  z-index: 4;
}

.translate_image_above {
  transform: translateY(-100%);
}

.translate_image {
  transform: translateY(0);
}

.translate_image_below {
  transform: translateY(100%);
}