* {
  padding: 0;
  margin: 0;
}
@font-face {
  font-family: "Norsal";
  src: url("../font/Norsal-Regular.woff2") format("woff2"),
    url("../font/Norsal-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Norsal";
  src: url("../font/Norsal-Medium.woff2") format("woff2"),
    url("../font/Norsal-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Norsal";
  src: url("../font/Norsal-Bold.woff2") format("woff2"),
    url("../font/Norsal-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Norsal";
  src: url("../font/Norsal-Black.woff2") format("woff2"),
    url("../font/Norsal-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Norsal";
  src: url("../font/Norsal-SemiBold.woff2") format("woff2"),
    url("../font/Norsal-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
:root {
  --primary-50: rgba(242, 229, 243, 0.8);
  --primary-100: #f2e5f3;
  --primary-300: #a34fac;
  --primary-500: #93359e;
  --primary-700: #863198;
  --primary-900: #4a1e75;
  --primary-white: #ffffff;
  --primary-radius: 16px;
  --pgray:#f7f7f7;
  --text-2: #666;
  --text-3:#848484;
  --primary-white:#ffffff;
  --primary-dark:#222124;
}
body {
  font-family: "Norsal";
  direction: rtl;
  text-align: right;
  font-size: 16px;
  line-height: 2;
  color: #333;
  overflow-x: hidden;
  background-color: var(--primary-white);
}
/* theme css */
a{color: #333;}
a:hover {
  color: var(--primary-700);
}
.btn {
  border-radius: var(--primary-radius);
  padding: 0.75rem 1rem;
  font-weight: 700;
  &:focus{
    box-shadow: none;
  }
}
.btn-icon{
  width: 30px;height: 30px; line-height: 30px;text-align: center;
}
.btn-theme {
  color: #fff;
  background-color: var(--primary-700);
  border-color: var(--primary-700);
}
.btn-theme:hover {
  color: #fff;
  background-color: var(--primary-300);
  border-color: var(--primary-300);
}
.btn-theme:focus {
  color: #fff;
  background-color: var(--primary-500);
  border-color: var(--primary-500);
  box-shadow: 0 0 0 0.25rem r gba(127, 60, 153, 0.5);
}
.btn-theme:active,
.btn-theme.active {
  color: #fff;
  background-color: var(--primary-500);
  border-color: #13653f;
}
.btn-theme:disabled {
  color: #fff;
  background-color: var(--primary-700);
  border-color: var(--primary-700);
  opacity: 0.65;
}
.btn-theme-light {
  color: var(--primary-700);
  background-color: var(--primary-50);
  border-color: var(--primary-50);
}
.btn-theme-light:hover {
  color: var(--primary-500);
  background-color: var(--primary-100);
  border-color: var(--primary-100);
}
.btn-theme-light:focus {
    color: var(--primary-500);
  background-color: var(--primary-100);
  border-color: var(--primary-100);
  box-shadow: 0 0 0 0.25rem r gba(127, 60, 153, 0.5);
}
.btn-theme-light:active,
.btn-theme-light.active {
    color: var(--primary-500);
  background-color: var(--primary-500);
  border-color: var(--primary-300);
}
.btn-theme-light:disabled {
    color: var(--primary-500);
  background-color: var(--primary-700);
  border-color: var(--primary-700);
  opacity: 0.65;
}
.btn-outline-theme {
  color: var(--primary-700);
  background-color: #ffffff;
  background-image: none;
  border-color: var(--primary-700);
}
.btn-outline-theme:hover {
  color: #fff;
  background-color: var(--primary-300);
  border-color: var(--primary-300);
}
.btn-outline-theme:focus {
  color: #fff;
  background-color: var(--primary-700);
  border-color: var(--primary-700);
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5);
}
.btn-outline-theme:active,
.btn-outline-theme.active {
  color: #fff;
  background-color: var(--primary-500);
  border-color: var(var(--primary-500));
}
.btn-outline-theme:disabled {
  color: var(--primary-700);
  background-color: transparent;
  border-color: var(--primary-700);
  opacity: 0.65;
}
.form-check-input:checked {
  background-color: var(--primary-700);
  border-color: var(--primary-700);
}
.theme-txt-gray {
  color: var(--text-2);
}
.text-gray3{color:var(--text-3)}
.theme-txt {color: var(--primary-700);}
.theme-bg {background-color: var(--primary-700);}
.theme-bg-gray{background-color: var(--pgray);}
.theme-radius{border-radius: var(--primary-radius);}
/* table resetcss */
.table-bordered>:not(caption)>*>*{
  color: var(--text-2);
  padding: 1.1rem;
}
tbody, td, tfoot, th, thead, tr{
  border-color: #ededed;
}
.table th{font-weight: normal; color: #333;}
.table>thead, .table>tfoot{background-color: #f2f2f2;}
/* input reseting */
.form-control {
  border: 1px solid #ededed;
  border-radius: 16px;
  height: 56px;
  padding: 0.375rem 1rem;
}
.form-control:focus {
  border-color: var(--primary-700);
  color: var(--primary-700);
  box-shadow: none;
}
label {
  color: var(--text-2);
  margin-bottom: 0.75rem;
}
.form-control::placeholder {
  color: #b3b3b3;
}
/* Auth pages */
.authcontainer {
  background-image: url(../images/backgrounds/pattern-bg.svg);
  background-position: top left;
  background-repeat: repeat;
  background-color: rgba(134, 49, 152, 0.25);
  min-height: 100vh;
  padding: 10.5rem 20px 20px;
  position: relative;
}

.authcontainer::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 300px;
  background-image: url(../images/backgrounds/auth-bottom-shape.svg);
  background-size: cover;
  background-repeat: no-repeat;
}
.authbox {
  border-radius: 40px;
  border: 1px solid #ededed;
  background: #fff;
  box-shadow: 0 0 20.2px 0 rgba(0, 0, 0, 0.07);
  padding: 30px 40px;
  position: relative;
}
.authforms .form-control {
  border: 1px solid #ededed;
  border-radius: 16px;
  height: 56px;
  padding: 0.375rem 1rem;
}
.authforms .form-control:focus {
  border-color: var(--primary-700);
  color: var(--primary-700);
  box-shadow: none;
}
.authforms label {
  color: var(--text-2);
  margin-bottom: 0.75rem;
}
.authbox a {
  color: var(--primary-900);
}
.authforms .form-control::placeholder {
  color: #b3b3b3;
}
.auth-arrow {
  background-color: var(--primary-300);
  display: inline-block;
  width: 28px;
  height: 28px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
}
.otpbox .form-control {
  font-size: 42px;
  font-weight: bold;
  text-align: center;
  color: var(--primary-700);
  font-family: Cairo;
  padding: 0;
}
.otpbox .form-control:focus {
  border: 1px dashed var(--primary-700);
  color: var(--primary-700);
}
.checkbox-container {
  border-radius: 16px;
  border: 1px solid #ededed;
  padding: 0.65rem 1rem;
}
.checkbox-container.checked {
  background-color: var(--primary-100);
}

/* Navbar */
.navbar-tafawuq {
  background-color: var(--primary-white);
  border-radius: var(--primary-radius);
  padding: 20px;
  position: absolute;
  top: 1.45rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 1;
}
.navbar-tafawuq .navbar-brand {
  display: flex;
  align-items: center;
  gap: 6px;
}
.navbar-tafawuq .navbar-brand span {
  color: var(--primary-500);
  font-size: 24px;
  display: inline-block;
  font-weight: 700;
}
.navbar-tafawuq .navbar-nav {
	 padding: 0 2rem;
	 gap: 2.25rem;
}
 .navbar-tafawuq .navbar-nav .nav-link {
	 color: var(--text-2);
	 padding: 0;
}
 .navbar-tafawuq .navbar-nav .nav-link:hover {
	 color: var(--primary-700);
}
 .navbar-tafawuq .navbar-nav .nav-link.active {
	 position: relative;
	 color: var(--primary-500);
}
 .navbar-tafawuq .navbar-nav .nav-link.active::after {
	 content: "";
	 background-image: url(../images/icons/nav-active.svg);
	 background-position: right bottom;
	 position: absolute;
	 right: 8px;
	 bottom: -5px;
	 width: 37px;
	 height: 5px;
}
 
.navbar-tafawuq .nav-search {
  position: relative;
}
.navbar-tafawuq .nav-search input {
  background-color: #f5eaf5;
  border-radius: var(--primary-radius);
  height: 44px;
}
.navbar-tafawuq .nav-search input::placeholder {
  color: var(--primary-500);
}
.navbar-tafawuq .nav-search i {
  display: inline-block;
  color: var(--primary-500);
  position: absolute;
  top: 8px;
  right: 15px;
}

/* header */
.header {
  background-color: var(--primary-50);
  padding: 8rem 0 0;
}
.header-content-box {
  position: relative;
  padding: 4rem 0;
}
.header-content-box h1 {
  font-size: 44px;
  line-height: 55px;
  position: relative;
}
.header-content-box h1 .heading-icon {
  position: absolute;
  right: 0;
}
.open-book, .close-book, .honeybee{
  display: inline-block;
  position: absolute;
  animation: float 3s ease-in-out infinite;
}
.open-book{
  top: 40px;
  left: -100px;
}
.close-book{
  top: 30%;
  transform: translateY(-50%);
  right: -100px;
}
.honeybee{
  bottom: 30%;
  transform: translateY(-50%);
  left: -100px;
}
@keyframes float {
  0% {
    transform: translateY(0px); /* Starting position */
  }
  50% {
    transform: translateY(-20px); /* Move up by 20px */
  }
  100% {
    transform: translateY(0px); /* Return to original position */
  }
}
/* Count sections */
.count-sec {
  position: relative;
  padding: 200px 0 80px;
  overflow: hidden;
}
.count-pattern {
	 background-image: url(../images/backgrounds/count-patter.svg);
	 background-size: cover;
	 background-repeat: no-repeat;
	 width: 100%;
	 height: 155px;
	 display: block;
	 position: absolute;
	 top: -5px;
	 left: 0;
	 right: 0;
}
 .count-pattern svg {
	 width: 100%;
}
 .count-pattern svg path {
	 width: 100%;
}
 
.count-box {
  text-align: center;
  padding: 1.75rem 1.5rem;
}
.count-box h2 {
  display: inline-block;
  width: 100%;
  height: 60;
  color: var(--primary-700);
  font-size: 44px;
  line-height: 55px;
  font-weight: 600;
  position: relative;
}
.count-box h2 span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.count-box p {
  color: #333;
}
/* intro section */
.intro-sec {
  padding: 2rem 0;
  position: relative;
}
.intro-content-box {
  position: relative;
}
.intro-content-box h2 {
  font-size: 34px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}
.intro-content-box h2 span {
  color: var(--primary-700);
}
.intro-shape {
  position: absolute;
  right: -40px;
  top: -30px;
  z-index: -1;
  display: inline-block;
}
/* why tafawug */
.why-sec {
	 position: relative;
	 padding: 5rem 0;
}
 .why-sec .sec-ellipse {
	 position: absolute;
	 top: -100px;
	 right: 0;
	 width: 750px;
	 height: 1080px;
	 border-radius: 1080.671px;
	 background: radial-gradient(65.16% 65.16% at 37.89% 35.98%, rgba(255, 201, 201, 0.2) 0%, rgba(217, 217, 217, 0) 100%);
	 filter: blur(12px);
	 z-index: -1;
}
 .why-sec h2 {
	 font-size: 34px;
	 font-style: normal;
	 font-weight: 600;
	 line-height: 150%;
}
 .why-sec h2 span {
	 color: var(--primary-700);
}
.why-cards {
	 border-radius: 40px;
	 background: #fff;
	 box-shadow: 0 0 20.2px 0 rgba(0, 0, 0, 0.07);
	 padding: 2.75rem 1.25rem;
	 text-align: center;
	 position: relative;
}
 .why-cards .icon-box {
	 position: absolute;
	 top: -40px;
	 left: 50%;
	 transform: translateX(-50%);
	 width: 75px;
	 height: 75px;
	 border-radius: 50%;
	 background-color: var(--primary-50);
	 line-height: 70px;
	 text-align: center;
}
 .why-cards h4 {
	 font-size: 24px;
	 font-style: normal;
	 font-weight: 600;
	 line-height: normal;
}
 

/* course cards */
.title-shape {
  position: absolute;
  top: -15px;
}
.course-card {
	 display: flex;
	 flex-direction: column;
	 align-items: flex-start;
	 border-radius: 16px;
	 font-size: 12px;
	 background-color: #fff;
	 color: #b3b3b3;
	 box-shadow: 0 0 21px 4px rgba(0, 0, 0, 0.08);
	 overflow: hidden;
}
 .course-card h5 {
	 font-size: 20px;
}
 .course-card .course-img {
	 width: 100%;
	 height: 235px;
	 overflow: hidden;
   flex-shrink: 0;
}
 .course-card .course-img img {
	 width: 100%;
	 height: 100%;
}
 .course-card .course-body {
	 padding: 1rem 1.25rem;
   flex-grow: 1;
   width: 100%;
}
 .course-card .course-body .badge {
	 font-size: 12px;
}
 .course-card .course-body p {
	 margin-bottom: 0.5rem;
}
 .course-card .course-body h6 {
	 font-weight: normal;
	 margin-bottom: 0;
}
 /* trial section */
.trial-sec {
	 padding: 8rem 0;
}
 .trial-sec .container {
	 position: relative;
}
 .trial-sec .container .trial-ellipse {
	 position: absolute;
	 bottom: 0px;
	 right: 0;
	 width: 470px;
	 height: 760px;
	 border-radius: 763px;
	 background: radial-gradient(65.16% 65.16% at 37.89% 35.98%, rgba(255, 201, 201, 0.2) 0%, rgba(217, 217, 217, 0) 100%);
	 filter: blur(12px);
	 z-index: -1;
}
 .trial-sec .lesson-list {
	 display: flex;
	 gap: 0.5rem;
	 padding: 1rem;
	 border-radius: 16px;
	 background-color: var(--primary-100);
	 margin-bottom: 1.5rem;
	 cursor: pointer;
}
 .trial-sec .lesson-list h5 {
	 color: #000;
}
 .trial-sec .lesson-list p {
	 color: #838383;
}
 .trial-sec .lesson-list .list-icon svg path {
	 fill: #000;
}
 .trial-sec .lesson-list .lock-icon svg path {
	 fill: var(--primary-700);
}
 .trial-sec .lesson-list.active, .trial-sec .lesson-list:hover {
	 background-color: var(--primary-700);
}
 .trial-sec .lesson-list.active h5, 
 .trial-sec .lesson-list:hover h5 {
	 color: #fff;
}
 .trial-sec .lesson-list.active p, 
 .trial-sec .lesson-list:hover p {
	 color: #fff;
}
 .trial-sec .lesson-list.active .list-icon svg path, 
 .trial-sec .lesson-list:hover .list-icon svg path, 
 .trial-sec .lesson-list.active .lock-icon svg path, 
 .trial-sec .lesson-list:hover .lock-icon svg path {
	 fill: #fff;
}
 
.mySwiper {
	 padding: 1rem !important;
}
 .mySwiper .testimonial-card {
	 border-radius: 16px;
	 background: #fff;
	 box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.08);
	 padding: 1.5rem;
}
 .mySwiper .testimonial-card .rating i {
	 color: #ffcd0f;
}
 .mySwiper .testimonial-card .user-avatar {
	 width: 72px;
	 height: 72px;
	 line-height: 72px;
	 text-align: center;
	 border-radius: 50%;
	 background-color: rgba(255, 0, 0, 0.15);
	 color: #f00;
	 font-weight: 600;
}
 
.swiper-nav {
	 padding-top: 60px;
}
 .swiper-nav .swiper-button-prev {
	 right: 80px;
}
 .swiper-nav .swiper-button-next, .swiper-nav .swiper-button-prev {
	 width: 44px;
	 height: 44px;
	 line-height: 44px;
	 border-radius: 50%;
	 background-color: var(--primary-700);
	 color: #fff;
	 font-size: 1rem;
}
 .swiper-nav .swiper-button-next::after, .swiper-nav .swiper-button-prev::after {
	 content: none;
}
 .swiper-nav .swiper-button-prev.swiper-button-disabled, .swiper-nav .swiper-button-next.swiper-button-disabled {
	 opacity: 1;
	 color: var(--text-2);
	 background-color: #fff;
}
 
.faq-accordion .accordion-item {
	 border-radius: 16px !important;
	 background: #fff;
	 box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.08);
}
 .faq-accordion .accordion-item .accordion-button {
	 border-radius: 16px !important;
	 background: #fff;
	 padding: 1.5rem;
	 border-bottom: 1px solid red;
	 justify-content: space-between;
	 gap: 0.5rem;
	 text-align: right;
}
 .faq-accordion .accordion-item .accordion-button .collapse-icon {
	 width: 2.25rem;
	 height: 2.25rem;
	 line-height: 2.25rem;
	 font-size: 1.5rem;
	 text-align: center;
	 display: inline-block;
	 border-radius: 50%;
	 background-color: #f9f9f9;
	 color: var(--text-2);
	 flex-shrink: 0;
}
 .faq-accordion .accordion-item .accordion-button:not(.collapsed) {
	 color: var(--primary-700);
	 padding-bottom: 1rem;
}
 .faq-accordion .accordion-item .accordion-button:not(.collapsed) .collapse-icon {
	 background-color: var(--primary-700);
	 color: #fff;
}
 .faq-accordion .accordion-item .accordion-button::after {
	 content: none;
}
 .faq-accordion .accordion-item .accordion-button:focus {
	 box-shadow: none;
}
 .faq-accordion .accordion-item .accordion-body {
	 border-top: 1px solid #e3e4e5;
	 margin-inline: 1rem;
	 color: var(--text-2);
}
 
footer {
  padding: 3.5rem 0 0;
  border-radius: 40px;
  background: rgba(243, 232, 243, 0.4);
}

/* Courses page */
.sub-header {
  background-image: url(../images/backgrounds/pattern-bg.svg);
  background-position: top left;
  background-repeat: repeat;
  background-color: rgba(134, 49, 152, 0.25);
  padding: 8rem 0 0;
  position: relative;
}
.sub-header-content-box{
  padding: 4rem 0;
}
.course-search {
  position: relative;
}
.course-search input {
  border-radius: var(--primary-radius);
  height: 52px;
}
.course-search input::placeholder {
  color: var(--text-2);
}
.course-search i {
  display: inline-block;
  width: 44px;height: 44px; line-height: 44px;
  text-align: center;
  color: #ffffff;
  background-color: var(--primary-700);
  border-radius: var(--primary-radius);
  position: absolute;
  top: 5px;
  left: 5px;
}
.courses-tabs {
	display: flex;
	 gap: var(--primary-radius);
   flex-wrap: nowrap;
	 overflow-x: auto;
	 overflow-y: hidden;
}
 .courses-tabs .nav-item .nav-link {
	 border-radius: var(--primary-radius);
	 border: 1px solid #f9f9f9;
	 background: #f9f9f9;
	 color: #848484;
   white-space: nowrap;
}
 .courses-tabs .nav-item .nav-link:hover {
	 background-color: var(--primary-700);
	 color: #fff;
	 border-color: var(--primary-700);
}
 .courses-tabs .nav-item .nav-link.active {
	 background-color: var(--primary-700);
	 color: #fff;
	 border-color: var(--primary-700);
}

.courses-tabs input[type="checkbox"] {
  display: none; /* hide real checkbox */
}

.courses-tabs .tutor-list-item {
	margin: 0px !important;
}

.courses-tabs .tutor-list-item label {
	padding: .5rem 1rem !important;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
	border-radius: var(--primary-radius);
	border: 1px solid #f9f9f9;
	background: #f9f9f9;
	color: #848484;
	white-space: nowrap;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 2 !important;
	font-family: "Norsal";
}

.courses-tabs .tutor-list-item label:hover {
	background-color: var(--primary-700);
	color: #fff;
	border-color: var(--primary-700);
}

.courses-tabs .tutor-list-item label.active-btn {
	background: #863198;
	color: #fff;
	border-color: #863198;
}
 
.course-dropwdown .btn{
  background-color: var(--primary-100);
  color: var(--primary-700);
  font-weight: normal;
}
.tafawuq-pagination {
	 gap: 12px;
	width: 100%;
	margin-bottom: 1rem;
}
.tafawuq-pagination .page-numbers {
	
}

.tafawuq-pagination .page-numbers {
  padding: .375rem .75rem;
  position: relative;
  display: block;
  text-decoration: none;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}


.tafawuq-pagination .page-item .page-link,
.tafawuq-pagination .page-numbers{
	 width: 44px;
	 height: 44px;
	 border-radius: var(--primary-radius);
	 text-align: center;
	 background-color: #f9f9f9;
	 color: #848484;
	 border: 0;
}
.tafawuq-pagination .page-item .page-link:hover,
.tafawuq-pagination .page-numbers:hover {
	 background-color: var(--primary-700);
	 border-color: var(--primary-700);
	 color: #fff;
}
 .tafawuq-pagination .page-item.active .page-link,
 .tafawuq-pagination .page-numbers.current {
	 background-color: var(--primary-700);
	 color: #fff;
}
 
.lesson-tabs-container {
	 background-color: #f2f2f2;
}
 .lesson-tabs-container .lesson-tabs {
	 gap: 3rem;
}
 .lesson-tabs-container .lesson-tabs .nav-item .nav-link {
	 padding: 1.5rem 0;
	 background-color: transparent;
}
 .lesson-tabs-container .lesson-tabs .nav-item .nav-link.active {
	 color: var(--primary-700);
	 font-weight: bold;
	 position: relative;
}
 .lesson-tabs-container .lesson-tabs .nav-item .nav-link.active::after {
	 content: '';
	 width: 100%;
	 height: 2px;
	 background-color: var(--primary-700);
	 position: absolute;
	 bottom: 0;
	 left: 0;
}
 
.lesson-summary-box{
  position: relative;
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 0 4px 0 rgba(147, 53, 158, 0.06), 0 8px 16px 0 rgba(147, 53, 158, 0.08);
}
.lesson-content-box .tab-check-icon i {
	 color: var(--primary-700);
	 border: 1px solid #000;
	 box-shadow: 4px 4px 0 0 #000;
}
 .lesson-content-box .lesson-accordion .accordion-item {
	 background: #fff;
}
 .lesson-content-box .lesson-accordion .accordion-item .accordion-button {
	 border: 1px solid #fde7ff;
	 background: #fdf4ff;
	 padding: 1.5rem;
	 font-weight: bold;
}
 .lesson-content-box .lesson-accordion .accordion-item .accordion-button .collapse-icon {
	 width: 2.25rem;
	 height: 2.25rem;
	 line-height: 2.25rem;
	 font-size: 1.5rem;
	 text-align: center;
	 display: inline-block;
	 margin-right: auto;
	 border-radius: 50%;
	 background-color: #fff;
	 color: var(--text-2);
}
 .lesson-content-box .lesson-accordion .accordion-item .accordion-button:not(.collapsed) {
	 color: #000;
	 padding-bottom: 1rem;
}
 .lesson-content-box .lesson-accordion .accordion-item .accordion-button:not(.collapsed) .collapse-icon {
	 background-color: var(--primary-700);
	 color: #fff;
	 transform: rotate(180deg);
}
 .lesson-content-box .lesson-accordion .accordion-item .accordion-button::after {
	 content: none;
}
 .lesson-content-box .lesson-accordion .accordion-item .accordion-button:focus {
	 box-shadow: none;
}
 .lesson-content-box .lesson-accordion .accordion-item .accordion-collapse {
	 border: solid #fde7ff;
}
 .lesson-content-box .lesson-accordion .accordion-item .accordion-body {
	 color: var(--text-2);
}
 
.user-avatar-img {
	 width: 120px;
	 height: 120px;
	 border-radius: 50%;
	 overflow: hidden;
	 box-shadow: 4px 4px 0 0.5px #93359e;
}
 .user-avatar-img img {
	 width: 100%;
	 height: 100%;
}
 
.lesson-detail-box{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  border-radius: var(--primary-radius);
  padding: 1rem;
}
.lesson-detail-box.box-light-blue{background: rgba(0, 132, 189, 0.10);}
.lesson-detail-box.box-light-green{background: rgba(0, 169, 143, 0.13);}
.lesson-detail-box.box-light-pink{background: rgba(156, 77, 244, 0.10);}
.lesson-detail-box.box-light-yellow{background: rgba(255, 192, 0, 0.10);}

/* payment page */
.payment-content{
  background-color: #f7f7f7;
  border-radius: var(--primary-radius);
  padding: 3rem;
}
.req-content{
  border-radius: var(--primary-radius);
  background: #FEF7FF;
  padding: 2.5rem;
}
.payment-tabs {
	 gap: 12px;
}
 .payment-tabs .nav-item .nav-link {
	 background-color: #f7f7f7;
	 height: 100%;
}
 .payment-tabs .nav-item .nav-link svg {
	 fill: #d9d9d9;
}
 .payment-tabs .nav-item .nav-link.active {
	 border: 1px solid var(--primary-700);
	 background-color: transparent;
	 position: relative;
}
 .payment-tabs .nav-item .nav-link.active svg {
	 fill: var(--primary-700);
}
 .payment-tabs .nav-item .nav-link.active::after {
	 content: '';
	 position: absolute;
	 left: 50%;
	 bottom: -30px;
	 transform: translateX(-50%);
	 width: 0;
	 height: 0;
	 border-left: 12.5px solid transparent;
	 border-right: 12.5px solid transparent;
	 border-bottom: 25px solid #f7f7f7;
}
 
.profile-tabs {
	display: flex;
	padding-left: 0;
	list-style: none;
	gap: 1rem;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
}
 .profile-tabs .znav_item .znav_link {
	color: #333;
	background-color: transparent;
	position: relative;
	border-radius: 0;
	border-bottom: 1px solid #e2e2e2;
	width: 100%;
	text-align: right;
	white-space: nowrap;
	display: block;
	padding: .5rem 1rem 1rem .5rem;
	text-decoration: none;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
 .profile-tabs .znav_item .znav_link svg path {
	 fill: none;
	 stroke: var(--text-2);
}
 .profile-tabs .znav_item .znav_link.active {
	 color: var(--primary-700);
	 border-bottom: 1px solid var(--primary-700);
}
 .profile-tabs .znav_item .znav_link.active svg path {
	 stroke: var(--primary-700);
}
 .profile-tabs .znav_item:last-child .znav_link {
	 color: #ed1c24;
}
 .profile-tabs .znav_item:last-child .znav_link svg path {
	 fill: #ed1c24;
	 stroke: #ed1c24;
}
 
.profile-tab-container,.profile-link-container{
  border-radius: 1.5rem;
  border: 1px solid #EDEDED;
  background: #F9F9F9;
  box-shadow: 0 0 27px 7px rgba(0, 0, 0, 0.02);
  padding: 2.5rem;
}
.profile-content-card {
	 border-radius: 24px;
	 background: #fff;
	 box-shadow: 0 0 21px 4px rgba(0, 0, 0, 0.08);
	 padding: 1rem 0;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
	 gap: 0.75rem;
	 overflow: hidden;
}
 .profile-content-card .icon-box {
	 width: 80px;
	 height: 80px;
	 line-height: 80px;
	 text-align: center;
	 border-radius: 50%;
	 background-color: var(--primary-50);
}
 .profile-content-card h3 {
	 color: #333;
}
 .profile-content-card p {
	 color: var(--text-3);
	 margin-bottom: 0;
	 font-size: 14px;
}
 
.profile-inner-tabs {
	 background-color: #fff;
	 border-radius: 100px;
	 padding: 0.5rem;
	 flex-wrap: nowrap;
	 overflow-x: auto;
	 overflow-y: hidden;
}
 .profile-inner-tabs .nav-item .nav-link {
	 background-color: transparent;
	 border-radius: 100px;
	 color: var(--text-2);
	 font-weight: 500;
	 width: 100%;
	 white-space: nowrap;
}
 .profile-inner-tabs .nav-item .nav-link.active {
	 background: #f2e5f3;
	 color: var(--primary-700);
	 font-weight: bold;
}
 
.profile-card .profile-header {
	 border-radius: var(--primary-radius);
	 height: 160px;
	 position: relative;
}

 .profile-card .profile-header .btn-profile {
	 background-color: rgba(255, 255, 255, 0.2);
	 color: #fff;
}
 .profile-card .profile-header .btn-profile:hover {
	 background-color: #863198;
}
 
.profile-body{
  margin-top: -40px;
}
.privacy-sec h4{
  background-color: var(--primary-50);
  color: var(--primary-700);
  padding: 1.5rem 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}
.goal-card {
	 border-radius: var(--primary-radius);
	 background: #f9f3f9;
	 backdrop-filter: blur(8px);
	 padding: 2.5rem 1.25rem;
}
 .goal-card h3 {
	 font-size: 2rem;
	 line-height: 1.5;
	 font-weight: bold;
	 margin-bottom: 0;
}
 .goal-card hr {
	 width: 32px;
	 height: 5px;
	 background-color: #b36cbb !important;
	 opacity: 1;
	 border-radius: 100px;
	 margin: 0.5rem 0 1.75rem !important;
}
 .goal-card h4 {
	 font-size: 1.75rem;
	 font-weight: bold;
	 margin-bottom: 1rem;
}
 .goal-card h4 span {
	 display: inline-block;
	 padding: 2px 5px;
	 background-color: var(--primary-700);
	 color: #fff;
	 margin-right: 5px;
}
 .goal-card p {
	 font-size: 1.25rem;
	 line-height: 1.5;
	 color: var(--text-2);
	 margin-bottom: 0;
}