.training-with-schedules {
  .training-with-schedules__card {
    ul {
      list-style: inherit;
      padding-left: 3rem;

      li {
        padding: 0.5rem 0;
      }
    }

    .uk-card {
      color: white !important;
      border-radius: 20px;
    }

    .bg-uk-card-red {
      background: linear-gradient(80deg, #250E45 0%, #E5052C 100%) !important;
      padding: 15px 15px !important;
    }

    .bg-uk-card-blue {
      background: linear-gradient(250deg, #250D46CC 0%, #250D46 100%) !important;
      padding: 15px 15px !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
      color: white !important;
    }

    .button-order-training {
      background-color: rgb(255 255 255 / 0%);
      border-color: white;
    }

    .strong-white {
      color: white !important;
    }

    .header-card {
      display: flex;
      padding-bottom: 10px;

      .training-card__logo {
        background-color: white;
        border-radius: 10px;
        padding: 0rem !important;
        width: 40px;
        height: 40px;

        img {
          with: 35px;
          height: 35px;
        }
      }
    }

    .common-title {
      line-height: 1.5;
      font-family: var(--font-semplicita) !important;
    }

    .training-with-schedules__timeline {
      .uk-tab>*>a {
        font-size: var(--font-size-18);
        font-weight: var(--font-bold);
        color: var(--text-black);
      }

      .uk-tab>.uk-active>a {
        color: var(--info-color);
      }
    }

    .package-content ul li {
      padding: 0.7rem 0;
    }

    .buton-detail-dates {
      font-size: 18px !important;
    }
  }

  .trung-schedule {
    .schedule-event-card {
      background: white;
      border-radius: 16px;
      width: 100%;
      padding: 10px;
      transition: transform 0.3s ease;
      border: #e5e5e5 1px solid;
    }

    .schedule-event-date {
      font-size: 18px;
      font-weight: 700;
    }

    .schedule-event-title {
      font-size: 28px;
      font-weight: 700;
      color: #1a202c;
      letter-spacing: -1px;
    }

    .schedule-event-meta {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px;
      margin-top: 5px;
    }

    .schedule-event-footer {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 5px 0;
      align-items: flex-start;
    }

    .schedule-event-footer .schedule-meta-item {
      flex: 2;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      font-size: 16px;
      color: #4a5568;
    }

    .schedule-event-footer .schedule-meta-button {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .schedule-event-footer .schedule-meta-button button {
      width: 100%;
    }

    .schedule-meta-item {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 15px;
      color: #4a5568;
    }


    .schedule-icon {
      width: 20px;
      height: 20px;
      color: #4a5568;
    }

    .schedule-event-description {
      font-size: 1.25rem;
      line-height: 1.75rem;
      color: #1F2937;
      padding-top: 10px;
      border-bottom: #e5e5e5 1px solid;
    }

    .schedule-price {
      font-size: 24px;
      font-weight: 700;
    }


    @media (max-width: 768px) {
      .schedule-event-title {
        font-size: 36px;
      }

      .schedule-event-meta {
        grid-template-columns: 1fr;
      }

      .schedule-event-actions {
        flex-direction: column;
      }
    }

    @media (max-width: 768px) {
      .schedule-event-footer {
        flex-direction: column;
      }

      .schedule-event-footer .schedule-meta-item,
      .schedule-event-footer .schedule-meta-button {
        width: 100%;
        flex: 1 1 100%;
      }
    }

  }
}