@charset "UTF-8";

:root {
  --text-orange: #f7941d !important;
  --back-orange: #fff9e2 !important;
  --orange-btn-bg-gradiant: linear-gradient(24.12deg,
      #f7941d 31.88%,
      #f8a948 105.22%);
  --orange-btn-bg-hover: linear-gradient(24.12deg,
      #f7941d 31.88%,
      #f8a948 105.22%);
}

.chip {
  border: 1.2px solid !important;
  border-radius: 100px !important;
  /* border-color: var(--text-white-color) !important;
    cursor: pointer; */
  font-weight: 600 !important;
  font-size: 13px;
  padding: 0.1rem 1rem;
}

.chip-warning {
  color: var(--text-orange) !important;
  box-shadow: none;
  background: var(--back-orange) !important;
  border: 2px solid transparent !important;
  transition: background 0.6s ease, box-shadow 0.6s ease, border 0.6s ease;
  /* Smooth transitions */
}

.btn-orange {
  color: var(--text-white-color) !important;
  border-radius: 100rem !important;
  box-shadow: none;
  background: var(--orange-btn-bg-gradiant) padding-box,
    var(--orange-btn-bg-hover) border-box !important;
  white-space: nowrap;
  box-shadow: -3px 7px 0px 0px #cb7712, -2px 11px 9px 1px #0c0b1024 !important;
  transform: translate(0, -2px) !important;
  transition: 0.1s all ease;
  /* transition: background 0.6s ease, box-shadow 0.6s ease, border 0.6s ease; */
}

.btn-orange:hover {
  transform: translate(0px, 0px) !important;
  box-shadow: 0px 0px 0px 0px #cb7712 !important;
}

.materials-icon {
  position: relative;
  margin-top: -50px !important;
  margin-bottom: 0px !important;
  width: 80px;
  height: 80px;
  padding: 10px;
  background-color: #7869aa;
  border-radius: 50%;
  z-index: 9999;
  margin: auto;
}

.learn_col_title {
  padding-right: 50px;
  padding-left: 20px;
}

.font-28 {
  font-size: 28px !important;
}

.video_orange_block1 {
  position: absolute;
  top: -10px;
  background-color: #f7941d;
  width: 250px;
  height: 120px;
  left: 6px;
  border-radius: 12px;
}

.video_orange_block2 {
  position: absolute;
  bottom: -10px;
  background-color: #f7941d;
  width: 250px;
  height: 120px;
  border-radius: 12px;
  right: 6px;
}

.customer-reviews-swiper .swiper-slide {
  padding: 20px;
  position: relative;
  min-height: 200px;
  margin-bottom: 40px !important;
  text-align: center;
}

.customer_review_container .quote-icon img {
  position: absolute !important;
  top: 50px !important;
  left: 50px;
  width: 80px !important;
}

.customer_review_container .end-quote img {
  position: absolute !important;
  top: 140px !important;
  right: 50px !important;
  width: 80px !important;
}

.customer-reviews-swiper .swiper-pagination-bullet {
  background: #6c63ff;
  opacity: 1;
}

.customer-reviews-swiper .swiper-pagination-bullet-active {
  background: #ff7f50;
}

.faq_card {
  background-color: #f5f5f5 !important;
  border-radius: 12px !important;
}

.swiper-pagination .swiper-pagination-bullet,
.swiper-pagination .swiper-pagination-bullet-active {
  display: inline-block !important;
}

/* Navigation Buttons */
.swiper-button-prev,
.swiper-button-next {
  background-color: rgba(0, 0, 0, 0.5) !important;
  color: white !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.3s ease !important;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 14px !important;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

.video_demo_container {
  position: relative;
  width: 100%;
  height: 480px;
}

@media (max-width: 1010px) {
  .learn_col_title {
    padding-right: 16px;
    padding-left: 16px;
  }

}

@media (max-width: 990px) {
  .font-28 {
    font-size: 20px !important;
  }
}

@media (max-width: 768px) {
  .mobile-page-cover {
    width: 100%;
    height: auto;
    display: block !important;
  }

  .video_demo_container {
    height: 340px;
  }

  .big_hero_section {
    background: #fff !important;
    height: auto !important;
    /* margin-bottom: 100px !important; */
    min-height: unset;
  }

  .hero_section {
    padding-top: 0 !important;
    margin-top: -10px;
  }

  .video_orange_block1,
  .video_orange_block2 {
    width: 140px;
    height: 60px;
  }

  .webinar-card .course_desc_card,
  .webinar-card p {
    font-size: 14px !important;
  }

  .learn_col_title {
    text-align: center;
  }

  .inperson-body .learn_features-col ul {
    padding: 0px 25px;
    padding-left: 5px !important;
  }

  .learnExtra_section {
    height: 340px !important;
    background-image: url(../../../store/1/mobtopics_back.png) !important;
    background-size: 100% 100% !important;
    margin-bottom: 190px !important;
  }

  .learnExtra_section .swiper .swiper-pagination {
    position: relative;
  }

  .customer_review_container {
    padding-top: 0px !important;
  }

  .customer_review_container .quote-icon img {
    position: absolute !important;
    top: 190px !important;
    left: 20px;
    width: 60px !important;
  }

  .customer_review_container .end-quote img {
    position: absolute !important;
    top: 60px !important;
    right: 20px !important;
    width: 60px !important;
  }

  .customer-reviews-swiper p {
    text-align: start !important;
  }

  .photo-gallery-container {
    padding-top: 0px !important;
  }
}

@media (max-width: 490px) {
  .font-28 {
    font-size: 18px !important;
  }

  .video_demo_container {
    height: 240px;
  }
}

@media screen and (max-width: 1220px) {
  .right-new-content {
    width: 75% !important;
  }

  .course-content-new-sidebar {
    width: 40% !important;
  }
}

.course-content-sidebar-header {
  width: 33%;
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 50;
}

.title-info-new {
  font-size: 22px !important
}

.span-info-new {
  font-size: 16px !important
}

.title-n {
  font-size: 18px !important;
  font-weight: bold;
}

@media screen and (max-width: 994px) {
  .courses-in-recorded {
    width: 92% !important;
  }

  .space-info {
    margin-top: 0px !important;
  }

  .course-description p, .span-info-new {
    font-size: 14px !important;
  }

  .nav-item-a, .title-info-new {
    font-size: 16px !important;
  }

  .title-n {
    font-size: 18px !important;
  }

  .right-new-content {
    width: 100% !important;
  }

  .recorded-title {
    font-size: 20px !important;
    text-align: center;
    margin-top: 25px !important;
  }

  .recorded-desc {
    font-size: 14px !important;
    text-align: center;
    width: 100% !important;
  }

  .course-content-sidebar-large {
    display: none !important;
  }

  .course-content-sidebar-header {
    position: relative;
    width: 80%;
    display: block;
    margin: -20px auto 40px auto;
    top: 0;
    left: 0;
  }

  .recorded-classification {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .recorded-bg-header {
    height: auto !important;
  }

  .image-container img {
    height: 200px !important;
    object-position: top;
  }

  .image-container {
    aspect-ratio: 0 !important;
  }
}

@media screen and (max-width: 725px) {
  .course-content-sidebar-header {
    width: 100% !important;
  }

  .inner-course-content-new-sidebar {
    padding: 10px 10px 20px 10px !important;
  }
}

.title-gift-new {
  font-size: 19px !important;
}

@media screen and (max-width: 511px) {
  .comment-with-stars {
    flex-direction: column;
    flex-wrap: wrap;
  }

  .rate-starr {
    width: 15px !important;
    height: 15px !important;
  }

  .one-info-course, .title-gift-new {
    font-size: 14px !important;
  }

  .btn-gift-new {
    margin-top: 15px !important;
  }

  .one-info-course_1 {
    font-size: 12px !important;
  }
}

@media screen and (max-width: 406px) {
  .one-info-course, .title-gift-new {
    font-size: 12px !important;
  }

  .one-info-course_1 {
    font-size: 10px !important;
  }
}