.cont_hero {
  position: relative;

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

.hero {
  /* position: sticky;
  top: 0; */

  display: grid;
  align-items: center;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;

  padding-inline: 4rem;

  width: 100%;
  height: 100vh;
}

.hero_text {
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;

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

.hero_text .heading h1 {
  font-size: 60px;
  font-weight: 600;
  color: var(--dark);
}

.hero_text p {
  font-size: 20px;
  font-weight: 300;
  color: var(--paragraph);
}

.hero_text .description {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}

.hero_text .description .btn_action-spanner {
  padding: 0.3rem 0.75rem;

  width: fit-content;
  height: fit-content;
  background-color: var(--light);

  font-size: 20px;
  color: var(--accent);

  border: 0.25px solid #73737372;
  border-radius: 0.75rem;

  box-shadow: 0px 8px 20px -4px #e01f7672;
}

.hero_text .action {
  display: flex;
  align-items: center;
  column-gap: 1rem;

  margin-top: 1.5rem;
}

.hero_text .action button {
  cursor: pointer;

  padding: 0.75rem 1.25rem;

  width: fit-content;
  height: fit-content;

  font-size: 20px;

  border: none;
  border-radius: 0.5rem;
}
.hero_text .action button#explore {
  background-color: var(--accent);

  color: var(--light);
}
.hero_text .action button#watch {
  background-color: var(--dark);

  color: var(--light);
}

.lottie_hero {
  width: 100%;
  height: auto;
}