.app-bar {
  background-color: white !important;
  height: 100px !important;
  position: absolute !important;
  top: 0 !important;
  color: black !important;
  border-bottom: 1px solid gray !important;
}

.app-bar-links {
  top: 100px !important;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 100;
  color: black;
  border-bottom: 1px solid gray;
}
.app-bar-links .app-bar-links-color {
  background-color: rgba(30, 36, 44, 0.25) !important;
  transition: 0.5s;
}

.app-bar-fixed {
  position: fixed;
  top: 0 !important;
}
.app-bar-fixed .app-bar-links-color {
  background-color: #1E242C !important;
}

.primary-text {
  color: #0e1726;
}

.bg-primary {
  background-color: #F4A850;
}

.bg-pink {
  background-color: #FFEEE8;
}

.v-input__append-outer {
  margin-left: 20px !important;
  margin-top: 0 !important;
}

.status-paid {
  color: #00D388;
  background-color: rgba(0, 211, 136, 0.1019607843);
  border: 1px solid #00D388;
  border-radius: 8px;
  display: block;
  padding: 4px;
  text-align: center;
}

.status-cancelled {
  color: #FF0900;
  background-color: rgba(255, 9, 0, 0.1019607843);
  border: 1px solid #FF0900;
  border-radius: 8px;
  display: block;
  padding: 4px;
  text-align: center;
}

.status-pending {
  color: #F4A850;
  background-color: rgba(244, 168, 80, 0.2);
  border: 1px solid #F4A850;
  border-radius: 8px;
  display: block;
  padding: 4px;
  text-align: center;
}

.video {
  height: 80vh !important;
  overflow: hidden;
  position: relative;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  justify-items: center;
}
.video .video-overlay {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.25);
}
.video .video-text {
  font-weight: 700;
  font-size: 48px;
  line-height: 48px;
  text-transform: uppercase;
  width: 800px;
  margin: auto;
  color: #fff;
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.video .book-now {
  position: absolute;
  top: calc(50% + 124px);
  left: 50%;
  transform: translate(-50%, -50%);
}

.video video {
  position: absolute;
  object-fit: contain;
  width: 100vw;
}

.main-title {
  font-size: 50px;
  line-height: 100%;
  font-weight: 600;
}

.service-card {
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 25px;
  text-decoration: none;
  border: 1px solid rgba(82, 95, 225, 0.1607843137);
  height: 100%;
  transition: 200ms;
}
.service-card .icon-service {
  border-radius: 12px;
  padding: 16px;
  background-color: #F4A850;
  display: block;
  width: 64px;
  height: 64px;
}
.service-card .label {
  color: #1C1C1C;
  font-weight: 600;
  font-size: 22px;
  text-align: center;
}
.service-card .desc {
  color: #4D4D4D;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}

.service-card:hover {
  border: 1px solid transparent;
  box-shadow: 0px 13px 28px 0px rgba(0, 0, 0, 0.0588235294);
}

.bg-dark {
  background-color: #14182D;
}

.counter-title {
  font-size: 36px;
  font-weight: 600;
}

.counter-desc {
  font-weight: 400;
  font-size: 20px;
}

.advantage-card {
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 220px;
  transition: transform 0.4s;
  background-color: #2B2B2B;
  transform-style: preserve-3d;
  /* This container is needed to position the front and back side */
  /* Do an horizontal flip when you move the mouse over the flip box container */
  /* Position the front and back side */
}
.advantage-card .icon {
  margin: auto;
  height: 60px;
  width: 60px;
}
.advantage-card .label {
  margin-top: 12px;
  color: white;
  font-size: 24px;
  font-weight: 700;
  line-height: 100%;
  text-align: center;
}
.advantage-card .desc {
  font-weight: 400;
  font-size: 16px;
  color: white;
  text-align: center;
}
.advantage-card .bg-img {
  position: absolute;
  height: 100%;
}
.advantage-card .bg-overlay {
  position: absolute;
  opacity: 0.8;
  background-color: #2B2B2B;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.advantage-card .flip-card {
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  min-height: 250px;
  transition: 0.4s;
}
.advantage-card .flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.4s;
  transform-style: preserve-3d;
}
.advantage-card .flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.advantage-card .flip-card-front, .advantage-card .flip-card-back {
  position: absolute;
  left: 5%;
  right: 5%;
  height: 220px;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.advantage-card input {
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
}
.advantage-card .flip-card-back {
  transform: rotateY(180deg);
  /*height: 100%;*/
}
.advantage-card .drug-card-title2 {
  color: rgb(141, 92, 246);
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
  height: 48px;
}

.news-card .news-card-image {
  height: 200px;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}
.news-card .news-card-image img {
  transition: 200ms;
  object-fit: cover;
}
.news-card .title {
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
}
.news-card .text {
  font-weight: 400;
  font-size: 16px;
  margin-top: 10px;
  color: #525560;
}
.news-card .more-btn {
  color: rgba(29, 33, 48, 0.5019607843);
  border: 1px solid #D5D5D5;
  padding: 16px 60px;
  display: inline-flex;
  border-radius: 4px;
  margin-top: 20px;
  text-decoration: none;
  font-weight: 600;
  transition: 400ms;
}
.news-card .more-btn:hover {
  color: white;
  background-color: #1D2130;
  border: 1px solid transparent;
}
.news-card .transform {
  transform: scale(1.1);
}

.education-card {
  border: 1px solid rgb(233, 234, 240);
}
.education-card .category-chip {
  background-color: #FFF0F0;
  color: #882929;
  padding: 4px 6px;
  display: inline-block;
}
.education-card .education-card-image {
  height: 200px;
  width: 100%;
  overflow: hidden;
}
.education-card .education-card-image img {
  transition: 200ms;
  object-fit: cover;
}
.education-card .title {
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
}
.education-card .text {
  font-weight: 400;
  font-size: 16px;
  margin-top: 10px;
  color: #525560;
}
.education-card .more-btn {
  color: rgba(29, 33, 48, 0.5019607843);
  border: 1px solid #D5D5D5;
  padding: 16px 60px;
  display: block;
  text-align: center;
  border-radius: 4px;
  margin-top: 20px;
  text-decoration: none;
  font-weight: 600;
  transition: 400ms;
}
.education-card .more-btn:hover {
  color: white;
  background-color: #1D2130;
  border: 1px solid transparent;
}
.education-card .transform {
  transform: scale(1.1);
}

.question-card {
  gap: 52px;
  transition: 400ms;
}
.question-card .number {
  font-size: 48px;
  font-weight: 700;
  color: #9D96A8;
}
.question-card .question {
  font-weight: 700;
  font-size: 32px;
}
.question-card .question-transform {
  transform: rotate(-135deg);
}
.question-card .answer {
  color: #5A5365;
  font-weight: 400;
  font-size: 20px;
}

.text-primary {
  color: #F4A850;
}

.question-opened {
  background-color: #FDF8EE;
}

.footer-title {
  font-size: 40px;
  font-weight: 600;
  text-align: center;
}

.footer-text {
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  color: white;
  opacity: 70%;
}

.contact-input .v-input__slot {
  background-color: white !important;
}

.footer-link-title {
  font-weight: 600;
  font-size: 16px;
  color: white;
  text-transform: uppercase;
}

.footer-link {
  color: #929FA5 !important;
  text-decoration: none;
}

.trust-text {
  font-size: 26px;
  font-weight: 600;
}

.banner {
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  height: 380px;
}
.banner .banner-content {
  z-index: 50;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translateX(50%) translateY(-50%);
}
.banner .banner-title {
  text-align: center;
  font-weight: 700;
  font-size: 44px;
  color: white;
}
.banner .banner-img {
  position: absolute;
  top: 0;
  z-index: 0;
}
.banner .banner-overlay {
  background-color: rgba(30, 36, 44, 0.8);
  backdrop-filter: blur(4px);
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.page-img {
  height: 500px;
  position: relative;
  overflow: hidden;
}
.page-img img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  z-index: 0;
}
.page-img .page-title {
  font-size: 50px;
  color: white;
  text-align: center;
  font-weight: 700;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  text-transform: uppercase;
  position: absolute;
}
.page-img .page-img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1E242C;
  opacity: 70%;
}

p {
  font-size: 18px;
  font-weight: 400;
  color: #1C1D20;
}

.icon {
  background-color: #F4A850;
  border-radius: 4px;
  padding: 6px;
  height: 28px;
  width: 28px;
}
.icon img {
  display: block;
  margin: 0;
  height: 16px;
}

.item-title {
  font-size: 24px;
  font-weight: 700;
}

.about-item-title-2 {
  color: #282B4C;
  font-size: 40px;
  font-weight: 700;
}

.about-item-text-2 {
  font-size: 18px;
}

.service-pre-header {
  font-size: 18px;
  font-weight: 600;
}

.service-header {
  font-size: 38px;
  line-height: 56px;
  font-weight: 600;
}

.service-sub-header {
  font-size: 16px;
  font-weight: 400;
  color: #1C1D20;
}

.list-title {
  font-size: 28px;
  font-weight: 600;
  line-height: 32px;
  padding: 28px 0;
}

.step-card .bg-img {
  width: 100%;
}
.step-card .flip-card-front, .step-card .flip-card-back {
  right: 2%;
  left: 2%;
}
.step-card .desc {
  font-size: 14px;
  font-weight: 400;
}

.block-header {
  width: 100%;
  background-color: #F5F7FA;
  padding: 12px 24px;
  margin-top: 60px;
  display: block;
  height: 60px;
  text-align: center;
  font-size: 20px;
  color: #4E5566;
}

.lesson-collapse .lesson-collapse-header {
  height: 60px;
  padding: 20px;
  font-size: 16px;
  transition: 200ms;
  border: 1px solid #E9EAF0;
  cursor: pointer;
}
.lesson-collapse .lesson-collapse-header-active {
  color: #F4A850;
  background-color: #F5F7FA;
  border: 1px solid #F5F7FA;
}
.lesson-collapse .lesson-collapse-body {
  border-bottom: 1px solid #E9EAF0;
  border-left: 1px solid #E9EAF0;
  border-right: 1px solid #E9EAF0;
  transition: 400ms ease;
  overflow: hidden;
}

.lesson-part-item {
  padding: 12px 24px;
  font-size: 16px;
  display: flex;
  align-items: center;
  transition: 200ms;
}

.lesson-part-item-active {
  background-color: rgba(244, 168, 80, 0.2);
}

.bg-color {
  position: absolute;
  top: 100px;
  height: 280px;
  left: 0;
  right: 0;
  background-color: rgba(244, 168, 80, 0.2);
}

.my-course-card {
  border-radius: 16px;
  overflow: hidden;
  background-color: white;
}
.my-course-card .my-course-card-thumbnail {
  height: 160px;
}
.my-course-card .my-course-title {
  font-size: 16px;
  color: black;
}
.my-course-card .property {
  font-size: 14px;
  color: #646464;
  display: flex;
  margin-top: 12px;
}

.course-price {
  border: 1px solid #E9EAF0;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.06);
}
.course-price .course-price-title {
  color: #1D2026;
}
.course-price .course-price-title .price {
  font-size: 24px;
  font-weight: 600;
}
.course-price .course-price-title .original-price {
  font-size: 16px;
  color: #8C94A3;
  text-decoration: line-through;
}
.course-price .course-price-title .discount-percent {
  padding: 8px 12px;
  color: #F4A850;
  background-color: #FFEEE8;
  font-size: 14px;
}
.course-price .property {
  font-size: 14px;
}

.course-buy .label {
  color: #6E7485;
  font-weight: 400;
}
.course-buy .value {
  font-weight: 600;
}
.course-buy .payment-method {
  width: 100%;
  padding: 18px;
  border: 1px solid #FDEEDC;
  cursor: pointer;
  transition: 200ms;
  border-radius: 15px;
}
.course-buy .payment-method img {
  display: block;
  margin: auto;
}
.course-buy .payment-method:hover {
  background-color: #FDEEDC;
}
.course-buy .payment-method-active {
  background-color: #FDEEDC;
}

@media only screen and (max-width: 600px) {
  .bg-color {
    background-color: white;
  }
  .col-12 {
    padding: 20px !important;
  }
  .container {
    padding: 20px !important;
  }
  .more-btn {
    padding: 16px !important;
    display: block !important;
    text-align: center;
  }
  .about-item-title-2 {
    font-size: 20px;
    text-align: center;
  }
  .service-header {
    font-size: 20px;
    line-height: 25px;
  }
  .list-title {
    font-size: 20px;
    line-height: 32px;
  }
  .about-page .icon {
    width: 40px;
    height: 40px;
    padding: 8px;
  }
  .about-page .icon img {
    height: 24px;
  }
  .about-page .title-col {
    padding: 4px !important;
  }
  .page-img {
    height: 220px;
  }
  .page-img img {
    width: inherit;
    height: 100%;
  }
  .page-img .page-title {
    font-size: 24px;
  }
  .app-bar {
    height: 60px !important;
  }
  .app-bar .v-toolbar__content {
    padding: 0 !important;
    height: 60px !important;
  }
  .video {
    height: 300px !important;
  }
  .video video {
    height: 100% !important;
    width: inherit !important;
  }
  .video-text {
    top: calc(50% - 20px) !important;
  }
  .main-title {
    width: 100%;
    font-size: 26px;
  }
  .video-text {
    font-size: 24px !important;
    width: 70% !important;
    line-height: 30px !important;
  }
  .book-now {
    top: calc(50% + 60px) !important;
    width: 100%;
    text-align: center;
  }
  .contact-link {
    padding: 10px 14px;
    border-radius: 8px;
    background-color: #F7F7F7;
    text-decoration: none;
    color: black !important;
    display: inline-block;
  }
  .contact-links {
    overflow: auto;
    white-space: nowrap;
    display: flex;
    padding: 20px 20px 0 20px !important;
    gap: 8px;
  }
  .contact-links::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Edge */
  }
  .links {
    gap: 48px;
  }
  .application-banner {
    padding: 0 !important;
  }
  .application-banner .banner {
    border-radius: 0 !important;
  }
  .application-banner .banner .banner-img {
    position: absolute;
    top: 0;
    z-index: 0;
    height: 100%;
    width: inherit;
  }
  .application-banner .banner .banner-title {
    font-size: 24px;
  }
}

/*# sourceMappingURL=main.css.map */