.endless-possibilities {
    position: relative;
}

  .endless-possibilities .bg-box {
    height: calc(100% + 40px);
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
  }

  .endless-possibilities .bg-box img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

  .endless-possibilities .v3-twm-container {
    position: relative;
}

section h2 {
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 1.375rem;
    font-weight: 500;
    letter-spacing: 1.54px;
    --tw-text-opacity: 1;
    color: rgb(14 170 125 / var(--tw-text-opacity, 1));
}

@media (min-width: 700px) {

    section h2 {
        margin-bottom: 2.5rem;
        font-size: 2.125rem;
        line-height: 1.5;
        font-weight: 500;
        letter-spacing: 2.38px;
    }
}

section .sec-text {
    font-size: 0.9375rem;
    line-height: 1.5;
    letter-spacing: 1.5px;
    --tw-text-opacity: 1;
    color: rgb(81 90 104 / var(--tw-text-opacity, 1));
}

@media (min-width: 700px) {

    section .sec-text {
        font-size: 1.125rem;
        line-height: 1.5;
        letter-spacing: 1.8px;
    }
}

.endless-possibilities p {
    text-align: center;
}

.endless-possibilities #course-swiper {
    margin-top: 1.5rem;
    width: 100%;
}

@media (min-width: 700px) {

    .endless-possibilities #course-swiper {
        margin-top: 2.5rem;
    }
}

.endless-possibilities #course-swiper .course {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

.endless-possibilities #course-swiper .course h3 {
        color: #2d2d6c;
        margin-bottom: 0.5rem;
        text-align: center;
        font-size: 1.0625rem;
        line-height: 1.5;
        font-weight: 500;
        letter-spacing: 1.02px;
      }

@media (min-width: 700px) {

    .endless-possibilities #course-swiper .course h3 {
        font-size: 1.3125rem;
        line-height: 1.5;
        font-weight: 500;
        letter-spacing: 1.26px;
    }
}

.endless-possibilities #course-swiper .course p {
    margin-bottom: 0.25rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    letter-spacing: 1.5px;
    --tw-text-opacity: 1;
    color: rgb(81 90 104 / var(--tw-text-opacity, 1));
}

@media (min-width: 700px) {

    .endless-possibilities #course-swiper .course p {
        font-size: 1.125rem;
        line-height: 1.5;
        letter-spacing: 1.8px;
    }
}

.endless-possibilities #course-swiper .course p:last-of-type {
    margin-bottom: 1.5rem;
}

.ai-button {
  background: #2d2d6c;
  height: 44px;
  min-width: 136px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.52px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 700px) {

    .ai-button {
        font-size: 0.9375rem;
        line-height: 1.5;
        letter-spacing: 1.2px;
    }
}

.ai-button svg {
    margin-right: -12px;
    margin-left: 0.5rem;
    height: 1.5rem;
    width: 1.5rem;
  }

.ai-button.disabled {
    --tw-bg-opacity: 1;
    background-color: rgb(233 235 239 / var(--tw-bg-opacity, 1));
}

.course-outline {
  background: rgba(41, 176, 225, 0.12);
}

.course-outline::before {
    background-color: rgba(41, 176, 225, 0.12);
  }

.course-outline::after {
    background-color: #fff;
    content: '';
    height: 40px;
    z-index: -2;
    transform: translateY(-100%);
    border-radius: 40px 40px 0 0;
    position: absolute;
    left: 0px;
    top: 0px;
    display: block;
    width: 100%;
  }

.course-outline .content {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 2.5rem;
}

@media (min-width: 700px) {

    .course-outline .content {
        margin-bottom: 5rem;
    }
}

@media (min-width: 1024px) {

    .course-outline .content {
        flex-direction: row;
        gap: 5rem;
    }
}

.course-outline .content img {
      width: 295px;
    }

.course-info::before {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.course-info::after {
    content: '';
    height: 40px;
    transform: translateY(-100%);
    z-index: -2;
    background: rgba(41, 176, 225, 0.12);
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    width: 100%;
  }

.course-info .v3-twm-tabs .v3-twm-tab.active {
      background: #2d2d6c;
    }

.course-info h3,
  .course-info h4 {
    font-size: 1.0625rem;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: 1.02px;
    --tw-text-opacity: 1;
    color: rgb(45 48 51 / var(--tw-text-opacity, 1));
}

@media (min-width: 700px) {

    .course-info h3,
  .course-info h4 {
        font-size: 1.3125rem;
        line-height: 1.5;
        font-weight: 500;
        letter-spacing: 1.26px;
    }
}

.course-info h3:not(:first-child) {
    margin-top: 1.5rem;
}

.course-info .info-grid {
    margin-top: 1.5rem;
    display: grid;
    width: 100%;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 700px) {

    .course-info .info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {

    .course-info .info-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

.course-info .info-grid .item {
    display: flex;
    gap: 1rem;
}

.course-info .info-grid .item .icon-box {
        border: 1px solid #b1b1d7;
        background: #2d2d6c;
        width: 40px;
        height: 40px;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
      }

.course-info .info-grid .item .icon-box svg {
    height: 1.5rem;
    width: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.course-info .info-grid .item .text {
    width: 100%;
}

.course-info .info-grid .item .text h4 {
          height: 40px;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

.course-info .info-grid .item .text p {
    margin-top: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    letter-spacing: 1.5px;
    --tw-text-opacity: 1;
    color: rgb(81 90 104 / var(--tw-text-opacity, 1));
}

@media (min-width: 700px) {

    .course-info .info-grid .item .text p {
        font-size: 1.125rem;
        line-height: 1.5;
        letter-spacing: 1.8px;
    }
}

.course-info .button-section {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

@media (min-width: 1024px) {

    .course-info .button-section {
        margin-top: 1.5rem;
        gap: 1.5rem;
    }
}

.faq {
    --tw-bg-opacity: 1;
    background-color: rgb(245 247 248 / var(--tw-bg-opacity, 1));
}

.faq .drawer-box {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.faq .drawer-box .drawer-head .number {
        color: #2d2d6c;
        font-size: 1.125rem;
        line-height: 1.5;
        font-weight: 500;
        letter-spacing: 1.5px;
      }

@media (min-width: 700px) {

    .faq .drawer-box .drawer-head .number {
        font-size: 1.5625rem;
        line-height: 1.5;
        font-weight: 500;
        letter-spacing: 1.8px;
    }
}

.faq .drawer-box p {
    font-size: 0.9375rem;
    line-height: 1.5;
    letter-spacing: 1.5px;
    --tw-text-opacity: 1;
    color: rgb(81 90 104 / var(--tw-text-opacity, 1));
}

@media (min-width: 700px) {

    .faq .drawer-box p {
        font-size: 1.125rem;
        line-height: 1.5;
        letter-spacing: 1.8px;
    }
}

.preview {
  background: linear-gradient(270deg, #87e0ca 0%, #25aee2 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (min-width: 700px) {

    .preview {
        flex-direction: row;
        justify-content: center;
        gap: 4rem;
    }
}

.preview h3 {
    font-size: 1.125rem;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: 1.8px;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 700px) {

    .preview h3 {
        font-size: 1.5625rem;
        line-height: 1.5;
        font-weight: 500;
        letter-spacing: 2.5px;
    }
}

.preview p {
    font-size: 0.9375rem;
    line-height: 1.5;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 576px) {

    .preview p {
        letter-spacing: 1.5px;
    }
}

@media (min-width: 700px) {

    .preview p {
        font-size: 1.125rem;
        line-height: 1.5;
        letter-spacing: 1.8px;
    }
}

.course-outline,
.course-info {
    position: relative;
    z-index: 10;
    margin-top: 2.5rem;
    padding-top: 0px !important;
}

.course-outline::before, .course-info::before {
    content: '';
    height: 40px;
    z-index: -1;
    transform: translateY(-100%);
    border-radius: 40px 40px 0 0;
    position: absolute;
    left: 0px;
    top: 0px;
    display: block;
    width: 100%;
  }

.ai-event-card {
    border-radius: 12px;
    --tw-bg-opacity: 1;
    background-color: rgb(245 247 248 / var(--tw-bg-opacity, 1));
    padding: 1rem;
}

.ai-event-card .card-title {
    margin-bottom: 0.75rem;
    text-align: center;
}

.ai-event-card table {
    margin-left: auto;
    margin-right: auto;

    border-collapse: separate;
    border-spacing: 0rem 0.5rem;
}

.ai-event-card table .info-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    padding: 0px;
    padding-right: 0.75rem;
}

@media (min-width: 1024px) {

    .ai-event-card table .info-title {
        padding-right: 1.5rem;
    }
}

.ai-event-card table .info-text {
    padding: 0px;
      word-break: break-word;
}

/*# sourceMappingURL=p4-ai-life.css.map */