/* How It Works */
.how-it-works
{
  width: 100%;
  height: auto;
  flex-direction: column;
  background-color: var(--white-color);
  text-align: center;
  gap: 1em;
  padding-left: clamp(1rem, 10%, 10rem);
  padding-right: clamp(1rem, 10%, 10rem);
}

.title-span
{
  color: var(--accent-color)
}

.how-it-works-group
{
  width: 100%;
  gap: 3em;
  align-items: end;
}
 
.how-it-works-container
{
  position: relative;
  width: 50%;
  height: 100%;
}

.how-it-works-container-lg
{
  width: 100%;
  height: 100%;
}


.how-it-works-img-container
{
  flex-direction: column;
  width: 100%;
  background-color: var(--light-grey);
  border-radius: var(--border-radius);
  gap: 2em;
  padding: 3em;
  text-align: center;
}

.how-it-works-img-container-md
{
  position: relative;
  width: 100%;
  flex-direction: column;
  aspect-ratio: 1;
  background-color: var(--accent-light-color);
  border-radius: var(--border-radius);
  padding:2em;
  padding-top: 4em;
  gap: 2em;
  text-align: center;
  align-items: flex-start;
  justify-content: start;
  border: 1px solid transparent;

}

.how-it-works-img-container-lg
{
  position: relative;
  width: 100%;
  aspect-ratio: 2;
  background-color: var(--accent-light-color);
  border-radius: var(--border-radius);
  padding: 2em;
  text-align: center;
  gap: 2em;
  padding-top: 4em;
  align-items: flex-start;
  justify-content: center;
  border: 1px solid transparent;

}

.how-it-works-img-container-middle
{
  position: relative;
  flex-direction: column;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  background-color: var(--accent-light-color);
  border-radius: var(--border-radius);
  padding: 2em;
  gap: 2em;
  text-align: center;
  padding-top: 4em;
  align-items: flex-start;
  justify-content: start;
  border: 1px solid transparent;

}

.how-it-works-number
{
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  font-size: small;
  padding: 0.5em 1em;
  border-radius: 60% 20%;
}


.how-it-works-container img, .how-it-works-container-md img, .how-it-works-container-lg img
{
  border-radius: var(--border-radius);
}

.how-it-works-container-lg img
{
  width:30%;
  height: auto;
}

.how-it-works-img-container-md:hover, .how-it-works-img-container:hover, .how-it-works-img-container-lg:hover, .how-it-works-img-container-middle:hover
{
  border: 1px solid rgb(233, 229, 229);
  box-shadow: -3px -3px 10px -15px inset ;
}

.how-it-works-text
{
  flex-direction: column;
  width: 100%;
  gap: 1em;
}

.how-it-works-title
{
  font-size: var(--fs-works-title);
  line-height: var(--lh-works-title);
  color: var(--accent-color);
  font-family: 'Satoshi-Medium';

}

.how-it-works-explanation
{
  font-size: var(--fs-works-explain);
  line-height: var(--lh-works-explain);
  color: var(--primary-color);
}

.how-it-works-video-container
{
  position: relative;
  width: 100%;
  height:30dvh;
}

.how-it-works video
{
  width: clamp(22rem, 110%, 50rem);
  position: absolute;
  top: 15%;
  right: -2em;
  height: auto;
  border-top-left-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}

.how-it-works img
{
  width: clamp(22rem, 110%, 50rem);
  position: absolute;
  top: 15%;
  right: -2em;
  height: auto;
  border-top-left-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}

@media only screen and (max-width: 1024px)
{
  .how-it-works-group
  {
  flex-direction: column;
  align-items: center;
  }

  .how-it-works-container, .how-it-works-container-lg
  {
    width: clamp(10rem,100%,30rem);
  }

  .how-it-works-img-container,
  .how-it-works-img-container-md,
  .how-it-works-img-container-lg,
  .how-it-works-img-container-middle
  {
    aspect-ratio: 1;
  }

  .how-it-works-img-container-lg
  {
    flex-direction: column;
  }

  .how-it-works-container-lg img
  {
    width: clamp(22rem, 110%, 50rem);
    top: 15%;
    right: -2em;
    height: auto;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
  }

} 

.scroll-reveal
{
  color: hsla(0, 100%, 2%, 0.2);
  background-clip: text;
  background-image: linear-gradient(90deg, var(--accent-color), var(--primary-color));
  background-repeat: no-repeat;
  background-size: 50% 100%;
  transition: background-size 1s linear;
  line-height: 55px;
}

.reveal-white
{
  background-image: linear-gradient(90deg, var(--white-color), rgb(234, 234, 253));
}