.cont_research {
  position: relative;

  padding-block: 5rem;
  padding-inline: 2.5rem;

  width: 100%;
  height: 150vh;
  /* background-color: var(--light); */
}

.research {
  position: sticky;
  top: 40px;

  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}

.cont_research-text {
  display: flex;
  justify-content: space-between;
}

.research-text {
  display: flex;
  flex-direction: column;
  align-items: end;
  row-gap: 0.25rem;

  width: max-content;
}

.research .sub-heading {
  padding: 0.25rem 0.75rem;

  font-size: 24px;
  color: var(--dark);

  border-right: 4px solid var(--accent);
}

.research h1 {
  font-size: 48px;
  font-weight: 600;
  color: var(--dark);
}

.lottie_icon-research {
  display: flex;
  justify-content: end;

  width: calc(30% + 180px);
}

.lottie_icon-research svg {
  width: 180px !important;
}

.research_demo {
  display: flex;
  align-items: center;
  column-gap: 2.5rem;

  width: 100%;
  height: fit-content;
}

.research-card {
  position: relative;

  width: 30%;
  height: 700px;
}

.research-card .card {
  pointer-events: none;
  cursor: pointer;

  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  padding: 1.5rem;

  width: 80%;
  height: 60%;

  font-size: 16px;
  color: var(--dark);

  border: 1px solid var(--paragraph);
  border-radius: 1rem;
  box-shadow: 0px 8px 20px 2px #e01f763a;

  transition: all 0.5s ease, background-color 0s, transform 0s, opacity 0s;
}
.research-card .card:nth-child(1) {
  z-index: 3;
  bottom: 0;
}
.research-card .card:nth-child(2) {
  z-index: 2;
  bottom: 20%;
}
.research-card .card:nth-child(3) {
  z-index: 1;
  bottom: 40%;
}
.card-hover {
  background-color: var(--light);
}
.card-hover:hover {
  rotate: 6deg !important;
  scale: 1.05 !important;
  translate: 0 -75px !important;
}
.card-active {
  background-color: #fce8ef;
}

.card-animation-1 {
  pointer-events: none;

  animation: card-animation 1s ease-in-out;
}
.card-animation-2 {
  pointer-events: none;

  animation: card-animation 1s ease-in-out 1s;
}

@keyframes card-animation {
  0%,
  100% {
    rotate: 0deg;
    scale: 1;
    translate: 0 0px;
  }
  50% {
    rotate: 6deg;
    scale: 1.05;
    translate: 0 -75px;
  }
}

.research-demo-video {
  overflow: clip;

  width: 70%;
  background-color: var(--light);

  border-radius: 1rem;
  box-shadow: 0px 8px 20px 2px #e01f763a;
}

.demo-video {
  width: 100%;
  height: auto;
  object-fit: contain;
}