.ticketing_hero {
  height: 525px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-top: 20px !important;

  @media screen and (max-width: 980px) {
    height: fit-content;
    height: 850px;
  }

  @media screen and (max-width: 630px) {
    height: 700px;
  }

  @media screen and (max-width: 480px) {
    gap: 0;
  }

  .tick_header {
    font-size: 36px;
    font-weight: 500;
    color: #fff;
    padding-top: 50px;

    @media screen and (max-width: 980px) {
      font-size: 30px;
    }

    @media screen and (max-width: 768px) {
      font-size: 20px;
    }
  }

  .tick_hero {
    height: fit-content;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;

    .tick_hero_title {
      height: 100%;
      width: 100%;
      padding: 20px 0;
      font-size: 20px;
      font-weight: 400;
      color: #fff;
      display: flex;
      flex-direction: column;
      gap: 70px;

      .tick_title {
        color: var(--accent-color);
        font-size: 26px;

        @media screen and (max-width: 480px) {
          padding-top: 20px;
        }

        span {
          font-weight: 600;
          font-style: italic;
        }
      }

      @media screen and (max-width: 480px) {
        gap: 0;
      }
    }

    .tick_hero_image {
      height: 373px;
      width: fit-content;
      position: absolute;
      bottom: 0;
      right: 0;

      @media screen and (max-width: 630px) {
        height: fit-content;
        width: 300px;
        left: 0;
        margin: auto;
      }

      img {
        height: 100%;
        width: 100%;
        object-fit: contain;
        float: right;
      }
    }
  }
}

.ticketing_content {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
  display: flex;
  flex-direction: column;
  gap: 30px;

  .recomendation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    a {
      height: fit-content;
      width: 25%;
      min-width: 170px;
      padding: 15px 0;
      text-decoration: none;
      color: var(--primary-color);
      font-weight: 500;
      flex: 0 0 25%;

      @media screen and (max-width: 480px) {
        min-width: unset;
        font-size: 13px;
        flex: 0 0 50%;
      }

      &:hover {
        color: var(--secondary-color);
      }
    }
  }
}