@import url(../templates/banner_page.css);
@import url(../templates/ruler_benefits.css);
@import url(../templates/taking_care_your_team.css);
@import url(../templates/today_taking_care.css);
@import url(../templates/banner_risomed.css);
@import url(../templates/faq.css);
@import url(../templates/banner_investiment.css);

.videos_testimonials {
  padding-top: 6.875rem;

  & h2 {
    font-weight: 500;
    font-size: 2.125rem;
    color: var(--gray-500);
    text-align: center;
    margin-bottom: 4.875rem;
  }

  & .card_video {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;

    width: 100%;
    height: 33.5rem;

    background-color: #969595;

    position: relative;
    z-index: 1;

    color: var(--gray-100);

    &::before {
      content: "";

      position: absolute;
      top: 0;
      left: 0;

      width: 100%;
      height: 100%;

      background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));

      transition: all 0.5s ease;

      z-index: -1;
    }

    &:hover {
      cursor: pointer;

      &::before {
        background: linear-gradient(
          0deg,
          rgba(0, 0, 0, 0.2),
          rgba(0, 0, 0, 0.2)
        );
      }
    }

    & .card_content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2.625rem;

      max-width: 20.25rem;

      & i {
        font-size: 2rem;
      }

      & h4 {
        text-align: center;
      }
    }
  }
}