@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* globals.css */
/* html[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

html[dir="ltr"] {
  direction: ltr;
  text-align: left;
} */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: 400;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

:focus {
  outline: none;
}

button:focus {
  outline: none;
}

svg {
  width: 100%;
  height: 100%;
}

a:hover {
  text-decoration: none;
}

a {
  text-decoration: none;
}

input,
select {
  box-shadow: none;
  outline: none;
}

.form-control:focus {
  outline: 0px;
  box-shadow: none;
}

.error-input {
  border: 1px solid #ea2a2a !important;
  color: #ea2a2a !important;
}

.error-input::placeholder {
  color: #ea2a2a !important;
  opacity: 0.7;
}

.error-text {
  color: #ea2a2a;
  font-size: 12px !important;
  margin-top: 4px;
  margin-bottom: 4px;
  font-weight: 400 !important;
}

.otp-input {
  width: 40px;
  height: 50px;
  font-size: 20px;
  text-align: center;
  border: 2px solid #ddd;
  border-radius: 5px;
}

body {
  font-family: "Poppins", serif;
}

.pirmaryBtn {
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  height: 42px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 0 12px;
  border-radius: 50px;
  line-height: 40px;
  text-decoration: none;
  text-align: center;
}

section {
  padding: 60px 0;
}

.Toastify__toast-container {
  padding: 0 !important;
}

.sectionTitle.left {
  text-align: left;
  margin: 0;
  max-width: 900px;
  z-index: 0;
}

.sectionTitle {
  padding-bottom: 30px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.sectionTitle .title {
  font-size: 40px;
  line-height: 48px;
  font-weight: 600;
  padding-bottom: 10px;
}

.sectionTitle .course_title {
  font-size: 32px;
  line-height: 48px;
  font-weight: 500;
  text-transform: capitalize;
  z-index: 0;
  /* padding-bottom: 10px; */
}

.headingTitle {
  font-size: 40px;
  line-height: 48px;
  font-weight: 600;
  padding-bottom: 10px;
}

.broadTitle.sectionTitle {
  max-width: 100%;
  padding-bottom: 10px;
}

.broadTitle span {
  display: block;
  font-weight: 600;
}

.globalFont {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  padding-bottom: 12px;
}

.topRated {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topRated span {
  display: block;
  font-weight: 600;
}

.topRated .topRated-right {
  max-width: 400px;
}

.btn {
  background-image: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%) !important;
  border-radius: 40px;
  box-sizing: border-box;
  display: block;
  margin: 0 auto;
  padding: 2px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  z-index: 2;
}

.btn:before {
  content: "";
  z-index: -1;
  top: 3px;
  border-radius: 20px;
  left: 3px;
  position: absolute;
  background: #fff;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
}

.cart-icon {
  background: url("/cart-icon.svg") no-repeat center center;
  background-size: 18px;
  height: 20px;
  width: 20px;
}

.wishlist-icon {
  background: url("/heart.svg") no-repeat center center;
  background-size: 18px;
  height: 20px;
  width: 20px;
}

.lang-icon {
  background: url("/lang.svg") no-repeat center center;
  background-size: 18px;
  height: 20px;
  width: 20px;
}

.search-icon {
  background: url("/search.svg") no-repeat center center;
  background-size: 18px;
  height: 20px;
  width: 20px;
}

.lang-icon {
  background: no-repeat center center;
  background-size: 18px;
  height: 20px;
  width: 20px;
  display: inline-block;
}

.bell-icon {
  background: url("/bell-icon.svg") no-repeat center center;
  background-size: 18px;
  height: 20px;
  width: 20px;
}

.exploreBtn a {
  text-transform: uppercase;
  background: url("/arrow-down.svg") no-repeat center right;
  padding-right: 24px !important;
}

/* Header start here */

header {
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  z-index: 1000 !important;
}

header .navbar-brand img {
  max-width: 100px;
  height: 60px;
}

.header-top {
  background: linear-gradient(90.2deg,
      #b0398d 0.18%,
      #af7ca0 88.72%,
      #b0398d 174.94%);
  text-align: center;
  padding: 10px 20px;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

.header-top span,
.header-top a {
  font-weight: 600;
  color: #fff;
}

.header-middle {
  padding: 0px 0px;
}

.middle-menu-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.middle-menu-wrap .logo img {
  max-width: 140px;
  max-height: 70px;
}

.header-middle .nav-item.dropdown.mini-cart-icon {
  position: relative;
}

.header-middle .nav-item.dropdown.langDropdown {
  position: relative;
}

.header-middle .dropdown-item.active,
.dropdown-item:active {
  color: #000000;
  text-decoration: none;
  background-color: transparent;
}

.menu-search-form {
  display: flex;
  width: 300px;
  border-radius: 100px;
  border: 1px solid #d3d2df;
}

.menu-search-form input {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 12px 50px 10px 50px;
  height: 50px;
  font-size: 15px;
  border-radius: 100px;
}

.input-grp {
  position: relative;
  width: 100%;
}

.menu-search-form [type="submit"] {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  transform: translateY(-50%);
  left: 16px;
  width: 44px;
  height: 44px;
  border: none;
  padding: 0 0;
  font-size: 20px;
  background: url("/search.svg") no-repeat center left;
}

.menu-search-form .customSearch [type="submit"] {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  transform: translateY(-50%);
  right: 3px;
  left: auto;
  width: 100px;
  height: 44px;
  border: none;
  padding: 0 0;
  font-size: 20px;
  /* background: url("/search.svg") no-repeat center left; */
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  color: #ffffff;
  border-radius: 20px;
  font-size: 1rem;
}



.menu-search-form .customSearch input {
  padding: 12px 110px 10px 20px;
}

.tgmenu-action>ul {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tgmenu-action>ul li:first-child {
  margin-left: 0;
}

.tgmenu-action>ul li {
  position: static;
  flex: 0 0 auto;
  color: #000000;
}

.tgmenu-action>ul li a {
  color: rgba(0, 0, 0, 1);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

/* .tgmenu-action > ul li a:hover {
  color: #bf2b91;
} */

.tgmenu-action>ul li .CartCount {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #dc3545;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  line-height: 20px;
  font-weight: 600;
  top: -7px;
  right: -4px;
  text-align: center;
}

.tgmenu-action>ul li .cart-count {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  color: #7f7e97;
  border-radius: 50%;
}

.tgmenu-action>ul li .cart-count img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.tgmenu-action>ul li.login-btn {
  padding: 0 0;
}

.tgmenu-action>ul li.header-btn a {
  display: block;
  border-radius: 50px;
  padding: 12px 26px;
  font-size: 15px;
  color: #b0398d;
  font-weight: 500;
  line-height: 18px;
}

.tgmenu-action>ul li.header-btn.signup-btn a {
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  color: #fff;
  border: 2px solid #fff;
}

.viewAllBtn a {
  display: block;
  border-radius: 50px;
  padding: 12px 26px;
  font-size: 15px;
  color: #b0398d;
  font-weight: 500;
  line-height: 18px;
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  color: #fff;
  border: 2px solid #fff;
  text-transform: uppercase;
}

.viewAllBtn a:hover {
  color: #b0398d;
  background: #fff;
  border: 2px solid #b0398d;
}

.tgmenu-action>ul li.header-btn.signup-btn a:hover {
  color: #b0398d;
  background: #fff;
  border: 2px solid #b0398d;
}

.pirmaryBtn:hover {
  color: #b0398d;
  background: #fff;
  border: 2px solid #b0398d;
}

.header-btns .btnBorder {
  height: 40px;
  line-height: 40px;
  padding: 0px 20px;
  color: #b0398d;
  text-wrap: nowrap;
}

.header-btns .btnGradient {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0px 20px;
}

.header-btns {
  margin-left: 5px;
}

/* .btnGradient:hover {
  color: #b0398d;
  background: #fff;
  border: 2px solid #b0398d;
} */

.tgmenu-action>ul li.login-btn .btn:hover {
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  color: #fff;
}

.tgmenu-action>ul li.login-btn .btn:hover::before {
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  color: #fff;
}

.header-bottom {
  background: rgba(11, 2, 8, 1);
}

.header-bottom .navbar {
  padding: 5px 0px;
}

.middle-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dropdown-menu.profileDropdown {
  position: absolute;
  right: 0;
  margin-top: 0px;
  min-width: 270px;
  max-width: 270px;
  box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.25);
}

.profileDropdown .dropdown-item:active {
  color: #000000;
  background-color: #f8f9fa;
}

.profileLink {
  padding: 0px;

}

.profileLink li a {
  padding: 12px 20px;
}

.userProfile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px 16px;
  border-bottom: 1px solid #ddd;
}

body:has(.suspense-loader-active) {
  overflow: hidden;
}

.userProfile .profileImg {
  width: 48px;
  height: 48px;
  background: #bf2b91;
  border-radius: 50%;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 48px;
  object-fit: cover;
}

.profile-avatar {
  width: 100%;
  height: 100%;
  background: #bf2b91;
  border-radius: 50%;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 40px;
  object-fit: cover;
}

.profileContant h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: initial;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.profileContant p {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: initial;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* Make dropdowns visible on hover */
.nav-item:hover .dropdown-menu {
  display: block;
}

.langDropdown .dropdown-menu,
.mini-cart-icon .dropdown-menu {
  overflow: hidden;
}

.langDropdown .dropdown-submenu button {
  padding: 10px 16px;
}

.langDropdown .dropdown-menu {
  right: 0;
}

/* Submenu dropdown */
.dropdown-submenu:hover>.dropdown-menu {
  display: block;
  left: 100%;
  top: 0;
}

/* Positioning for submenus */
.dropdown-submenu .dropdown-menu {
  left: 100%;
  top: 0;
  display: none;
  /* Hidden by default */
}

/* Optional: Add transitions for smooth hover effect */
.dropdown-menu {
  transition: all 0.3s ease-in-out;
}

.exlpreCourses {
  padding-top: 0;
  border-radius: 10px;
  min-width: 300px;
}

.exlpreCourses .dropdown-item {
  padding: 10px 16px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.exlpreCourses .dropdown-item .categoryIcon {
  width: 18px;
  height: 18px;
}

.exlpreCourses .dropdown-item:active {
  color: #212529;
  background-color: #f8f9fa;
}

.tgmenu-action li.nav-item.dropdown {
  position: relative;
}

.exlpreCourses .browseCourses {
  background: rgba(176, 57, 141, 1);
  padding: 10px 16px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border-radius: 10px 10px 0px 0px;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: 1em;
}

.dropdown-toggle::after {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-left: 0.3em solid transparent;
}

/* Position submenu */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
  display: none;
  visibility: hidden;
}

.dropdown-submenu:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  height: 100%;
}

.dropdown-submenu .dropdown-menu {
  opacity: 0;
}

.heroseSection {
  /* background: linear-gradient(0deg, #eaeaea, #eaeaea),
    linear-gradient(0deg, #fff3, #fff3); */
  padding-bottom: 0px;
  padding-top: 30px;
}

.hero-banner {
  position: relative;
}

.hero-banner .bannerContant {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 35px;
}

.hero-banner .bannerContant h2 {
  color: rgba(255, 254, 255, 1);
  font-size: 40px;
  line-height: 48px;
  font-weight: 800;
  max-width: 420px;
  text-transform: capitalize;
}

.hero-banner .bannerContant p {
  color: rgba(255, 254, 255, 1);
  font-size: 18px;
  line-height: 30px;
  font-weight: 700;
  padding-top: 10px;
}

.heroRight {
  background: linear-gradient(90deg, #000000 0%, #bf2b91 100%);
  border-radius: 18px;

}

.heroRight .btnBorder {
  background-color: #ffffff;
  border-radius: 24px;
}

.heroRightTop {
  padding: 5px 20px 0px;
}

.heroRightTop h3 {
  color: #ffffff;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-transform: capitalize;
}

.heroRightTop p {
  color: #ffffff;
  font-size: 12px;
  font-weight: 200;
  padding-top: 4px;
}

.heroRightTop hr {
  color: #fff;
  margin: 12px 0px;
}

.heroRightTop .hour-min {
  font-size: 18px;
  line-height: 20px;
  color: #fffefe;
  background: url("/clock-icon.svg") no-repeat;
  padding-left: 22px;
  background-size: 18px;
  background-position: 0;
  filter: brightness(0) invert(1);
  margin-top: 16px;
  font-weight: 500;
}

.heroRightTop .course-price {
  padding: 10px 0px;
  color: #ffffff;
  font-size: 20px;
}

.heroRightTop .course-price .current-price {
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
}

.heroRightBottom {
  text-align: center;
  padding: 0px 20px 12px;
}

.heroRightBottom .pirmaryBtn {
  background: #ffffff;
  display: inline-block;
  color: rgba(176, 57, 141, 1);
  font-size: 18px;
}

.features li {
  display: flex;
  font-size: 12px;
  margin-bottom: 12px;
  gap: 10px;
  color: #fff;
  text-align: left;
  font-weight: 200;
}

.features img {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* partner start here */
.our-partner {
  padding: 50px 0;
  width: 100%;
  overflow: hidden;
  /* Ensures no overflow */
}

.partnerWrapper {
  padding-bottom: 30px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
}

.trainerWrapper {
  padding-bottom: 30px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* Shared UL styles */
.partnerWrapper ul,
.trainerWrapper ul {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
  width: max-content;
}

/* Duplicate content using ::after if needed */
.partnerWrapper ul::after,
.trainerWrapper ul::after {
  content: attr(data-duplicate);
  display: flex;
}

/* Scroll animations */
@keyframes scroll-loop {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-10%);
  }
}

@keyframes scroll-loop-reverse {
  from {
    transform: translateX(-10%);
  }

  to {
    transform: translateX(0);
  }
}

/* Right to Left */
.partnerWrapper .ul1,
.trainerWrapper .ul1 {
  animation: scroll-loop 20s linear infinite;
}

/* Left to Right */
.partnerWrapper .ul2,
.trainerWrapper .ul2 {
  animation: scroll-loop-reverse 20s linear infinite;
}

/* Item style (can be scoped separately if trainers need different styling) */
.partnerWrapper li,
.trainerWrapper li {
  background: #b0398d33;
  padding: 20px;
  border-radius: 80px;
}

.moreCompany {
  text-align: right;
}

.moreCompany a {
  background: linear-gradient(to right,
      rgb(176, 57, 141) 0%,
      rgb(207, 147, 183) 100%);
  padding: 10px;
  text-align: center;
  border-radius: 10px;
  color: #fff !important;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}

.moreCompany a:hover {
  background: #ffffff;
  border: 2px solid #b0398d;
  color: rgb(176, 57, 141) !important;
}

.sup-form button:hover {
  background: #ffffff;
  border: 2px solid #b0398d;
  color: rgb(176, 57, 141) !important;
}

.courseSection {
  /* background: linear-gradient(0deg, #eaeaea, #eaeaea),
    linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)); */
  padding: 30px 0px;
}

.filter-tab.faqFilter {
  justify-content: center;
}

.filter-tab.faqFilter .nav-item a {
  color: #000000;
}

.filter-tab.faqFilter .nav-item:before {
  background-color: #ffffff;
}

.filter-tab {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* ✅ Fix */
  gap: 10px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  overflow-x: auto;
  /* ✅ Explicit horizontal scroll */
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #d48ab3 transparent;
}


.filter-tab::-webkit-scrollbar {
  height: 2px;
}

.filter-tab::-webkit-scrollbar-thumb {
  background: #d48ab3;
  border-radius: 10px;
  height: 2px;
}

.faq-filter-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
}

.filter-tab .nav-item {
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  position: relative;
  border-radius: 40px;
  z-index: 10;
  text-align: center;
}

.faq-filter-tab .nav-item {
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  position: relative;
  border-radius: 40px;
  z-index: 12;
  text-align: center;
  overflow: hidden;
}

.filter-tab .nav-item a {
  color: rgba(176, 57, 141, 1);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  padding: 15px 27px;
  display: inline-block;
  white-space: nowrap;
  transition: background-color 0.4s ease 0.4s;
}

.filter-tab .nav-item a.active {
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  color: white;
  border-radius: 40px;
}

.filter-tab .nav-item a:hover {
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  color: white;
  border-radius: 40px;
}

.faq-filter-tab .nav-item a.active {
  background: rgba(176, 57, 141, 1);
  color: white;
}

.faq-filter-tab .nav-item a {
  color: black;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 27px;
  display: inline-block;
}

.filter-tab .nav-item:before {
  content: "";
  z-index: -1;
  top: 3px;
  border-radius: 40px;
  left: 3px;
  position: absolute;
  background: #ffffff;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
}

.filter-tab .nav-item.active:before {
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
}

.filter-tab li.nav-item.active a {
  color: #ffffff;
}

.faq-filter-tab .nav-item:before {
  content: "";
  z-index: -1;
  top: 3px;
  border-radius: 40px;
  left: 3px;
  position: absolute;
  background: white;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
}

.recoCourses .couresCard {
  width: 100%;
}

.courseSearchTop {
  padding-bottom: 0;
}

.recoCourses .sectionTitle.left {
  padding-bottom: 0;
}

.recoCourses .course-card {
  display: flex;
}

.recoCourses .course-card-body {
  padding-left: 20px;
  width: 50%;

}

.recoCourses .course-img {
  width: 50%;
}

.recoCourses .course-img img {
  height: 100%;
}

.recoCourses .course-review {
  flex-wrap: wrap;
  gap: 10px 12px;
  border-bottom: 0.88px solid #0000001f;
  padding-bottom: 16px;
  padding-top: 0px;
}

.recoCourses .course-review li {
  width: 47%;
}

.recoCourses .course-card-bottom {
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.recoCourses .course-card-top {
  border: none;
}

.course-card {
  /* box-shadow: 0px 3.52px 20.16px 0px rgba(0, 0, 0, 0.25); */
  padding: 16px;
  border-radius: 6px;
  border: 1px solid #000000;
  background-color: #ffffff;
  margin-bottom: 20px;
  width: 100%;
  display: inline-block;
}

.course-card:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}

.course-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-bottom: 0.88px solid rgba(0, 0, 0, 0.12);
  padding: 8px 0px;
  gap: 16px;
}

.course-card-top .course-card-title {
  font-size: 18px;
  line-height: 24px;
  color: rgba(0, 0, 0, 1);
  font-weight: 500;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: initial;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.course-card-top p {
  font-size: 14px;
  line-height: 24px;
  color: rgba(0, 0, 0, 1);
  overflow: hidden;
  max-width: 200px;
  text-overflow: ellipsis;
  white-space: initial;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.course-card-top .hour-min {
  font-size: 13px;
  line-height: 20px;
  color: rgba(0, 0, 0, 1);
  background: url("/clock-icon.svg") no-repeat;
  padding-left: 22px;
  background-size: 18px;
  background-position: center left;
  white-space: nowrap;
}

.course-img {
  position: relative;
  overflow: hidden;
  border-radius: 8px;

  img {
    width: 100%;
    border-radius: 8px;
    transition: transform 0.3s ease;
    cursor: pointer;
    min-height: 255px;
    max-height: 255px;
  }
}

.course-img img:hover {
  transform: scale(1.1);
  /* Zoom by 10% */
}

.trendindCard .couresCard {
  width: 100%;
}

.relatedCard .couresCard {
  width: 100%;
}

.course-img .trend-certi {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  width: 94%;
}

.course-img .bottomleft {
  position: absolute;
  bottom: 20px;
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.course-img .bottomleft .cateName {
  background: linear-gradient(to right, #b0398d 0%, #cf93b7 100%);
  padding: 7px 14px;
  border-radius: 16px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  margin-right: 18px;
  font-weight: 500;
}

.course-img .trend-certi ul {
  display: flex;
  align-items: center;
  gap: 10px;
}

.course-img .trend-certi ul li a {
  background: linear-gradient(271.81deg, #857b86 1.53%, #b0398d 165.08%);
  height: 38px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 0 14px;
  border-radius: 16px;
  display: inline-block;
  line-height: 38px;
  text-decoration: none;
}

.course-img .trend-certi ul li .trending {
  background: rgba(176, 57, 141, 1);
}

.course-img .trend-certi ul li .certificate {
  background: rgba(255, 255, 255, 1);
  color: rgba(176, 57, 141, 1);
  display: flex;
  align-items: center;
  gap: 0px;
  font-size: 0px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.card-wishlist {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* force size */
.card-wishlist .wishlist-img {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain;
}


.course-img .bottomleft .language {
  background: rgba(255, 255, 255, 1);
  color: #000;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 16px;
  text-transform: uppercase;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.course-img .trend-certi ul li .certificate img {
  width: 16px;
  border-radius: 0px;
}

.course-review {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 8px;
  gap: 8px;

}

.course-review li {
  font-size: 14px;
  line-height: 15px;
  display: inline-block;
}

.course-review li span {
  font-weight: 600;
}

.course-review .creview {
  background: url("/tumb-icon.svg") no-repeat;
  padding-left: 25px;
  background-size: 20px;
  background-position: center left;
}

.course-review .creview-white {
  background: url("/reviews_white.svg") no-repeat;
  padding-left: 25px;
  background-size: 20px;
  background-position: center left;
}

.course-review .cview {
  background: url("/user-icons.svg") no-repeat;
  padding-left: 25px;
  background-size: 20px;
  background-position: center left;
}

.course-review .cview-white {
  background: url("/user_white.svg") no-repeat;
  padding-left: 25px;
  background-size: 20px;
  background-position: center left;
}

.cstar {
  display: flex;
  gap: 4px;
  align-items: center;
}

.cstar img {
  max-width: 80px;
}

.courseTabs .course-review .cstar img {
  max-width: 80px;
  min-width: 80px;
}

.mycart .course-review .cstar img {
  max-width: 80px;
  min-width: 80px;
}

.course-review .cstar img {
  max-width: 80px;
  /* min-width: 80px; */
}

.couresCard .cstar img {
  max-width: 80px;
  min-width: 80px;
}


.course-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  position: relative;
  z-index: 1;
}

.course-card-bottom .btnGradient {
  /* height: 44px; */
  padding: 9px 24px;
  white-space: nowrap;
}

.course-card-bottom .current-price {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: rgba(176, 57, 141, 1);
}

.course-price {
  display: flex;
  align-items: center;
  gap: 10px;
  direction: ltr;
}

.off-price {
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
}

.off-price span {
  text-decoration: line-through;
}

.startSubscribe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #be28901f;
  border: 1px solid #b0398d;
  padding: 16px;
  border-radius: 32px;
  margin-top: 20px;
  width: 500px;
  gap: 20px;
}

.startSubscribe .startLeft h4 {
  font-size: 16px;
  font-weight: 500;
  padding-top: 4px;
}

.startSubscribe .startLeft p {
  font-size: 12px;
  font-weight: 300;
}

.btnBorder.heartIcon:hover {
  background: #fff;
}

.heartIcon.btnBorder {
  min-width: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 8px;
  width: 48px;
  height: 48px;
}

.heartIcon.btnBorder:hover {
  background: linear-gradient(to right, #b0398d 0%, #cf93b7 100%);
}

.heartIcon.btnBorder:hover img {
  filter: grayscale(1) brightness(0) invert(1);
}

.heartIcon img {
  width: 32px;
  height: 32px;
}

.dividers {
  display: flex;
  align-items: center;
  color: #00000066 !important;
  max-width: 480px;
  margin-top: 10px;
}

.dividers:after,
.dividers:before {
  flex: 1 1 0%;
  border-top: 0.0625rem solid #00000066;
  content: "";
  margin-top: 0.0625rem;
}

.dividers::before {
  margin-right: 1rem;
}

.dividers::after {
  margin-left: 1rem;
}

.card {
  position: relative;
  background: white;
  border-radius: 15px;
  overflow: hidden;
}



.card img {
  width: 100%;
  height: auto;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.card-content {
  position: absolute;
  bottom: -125px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  color: white;
  padding: 20px;
  transition: bottom 0.4s ease-in-out;
  z-index: 2;
}

.title {
  font-size: 20px;
  font-weight: 500;
  margin: 5px 0;
}

.subtitle {
  background: rgba(176, 57, 141, 1);
  color: white;
  display: inline-block;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  max-width: 100px;
  text-align: center;
}

.card-content {
  position: absolute;
  bottom: -125px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  color: white;
  padding: 10px;
  font-size: 14px;
  border-radius: 5px;
  transition: bottom 0.4s ease-in-out;
}

.card-content .description {
  padding-top: 16px;
  line-height: 20px;
  height: 130px;
}

/* Hover Effect */
.card:hover .card-content {
  bottom: 20px;
  /* Moves up when hovered */
  opacity: 1;
}

.whySection {
  background: linear-gradient(0deg, #eaeaea, #eaeaea),
    linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
  box-shadow: 0px 17px 120px 0px rgba(0, 0, 0, 0.29);
}

.whySection .sectionTitle {
  text-align: left;
}

.whySection .sectionTitle span {
  color: rgba(176, 57, 141, 1);
  font-weight: 600;
}

.whySection .whyChoose {
  display: flex;
  align-items: center;
  gap: 30px;
  padding-top: 20px;
}

.whySection .whyChoose h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: rgba(176, 57, 141, 1);
}

.whySection .whyChoose p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(0, 0, 0, 1);
  padding-top: 8px;
}

.whySection .whyWrapper {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.impect-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.impect-item {
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  padding: 20px;
  position: relative;
  border-radius: 6px;
  z-index: 10;
  text-align: center;
  width: 100%;
  overflow: hidden;
}

.impect-item h4 {
  color: rgba(140, 5, 100, 1);
  font-size: 65px;
  font-weight: 700;
}

.impect-item p {
  color: rgba(33, 33, 33, 1);
  font-size: 20px;
  font-weight: 600;
}

.topSpace {
  margin-top: 70px;
}

.impectImg {
  width: 80px;
  margin: 0 auto;
}

.impectImg img {
  width: 100%;
}

.impect-item::before {
  content: "";
  z-index: -1;
  top: 3px;
  border-radius: 4px;
  left: 3px;
  position: absolute;
  background-color: #ffffff;
  /* background: rgba(209, 209, 209, 1); */
  width: calc(100% - 6px);
  height: calc(100% - 6px);
}

.success-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.sucessSection {
  position: relative;
}

.sucessSection::before {
  position: absolute;
  content: "";
  width: 60px;
  height: 120px;
  background: url("/effect-1.svg") no-repeat;
  top: -60px;
  z-index: 11;
  background-size: 60px;
}

.topRatedBg {
  position: relative;
}

.topRatedBg::before {
  position: absolute;
  content: "";
  width: 60px;
  height: 120px;
  background: url("/effect-1.svg") no-repeat;
  top: -50px;
  z-index: 11;
  background-size: 60px;
}

.topRatedBg::after {
  position: absolute;
  content: "";
  width: 60px;
  height: 120px;
  background: url("/effect-1.svg") no-repeat;
  bottom: -40px;
  z-index: 11;
  background-size: 60px;
  right: 0;
}

.faqAfterImage {
  position: relative;
}

.faqAfterImage::after {
  position: absolute;
  content: "";
  width: 60px;
  height: 120px;
  background: url("/effect-1.svg") no-repeat;
  bottom: -40px;
  z-index: 1111;
  background-size: 60px;
  left: 0;
}

/* .sucessSection::before {
  content: "";
  z-index: -1;
  top: 0px;
  border-radius: 4px;
  left: 0px;
  position: absolute;
  width: 100%;
  background: rgb(176, 57, 141);
  box-shadow: rgba(71, 71, 185, 0.2) 0px 17.26px 35.96px;
  height: calc(100% - 70px);
} */

/* 
.curveBg {
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 0px 0px 260px 250px;
    background: rgba(176, 57, 141, 1);
    box-shadow: 0px 17.26px 35.96px 0px rgba(71, 71, 185, 0.2);
    text-align: center;
} */
.curveBg {
  position: relative;
}

.curveBg:before {
  content: "";
  z-index: -1;
  top: 0px;
  border-radius: 4px;
  left: 0px;
  position: absolute;
  width: 100%;
  background: rgba(176, 57, 141, 1);
  box-shadow: 0px 17.26px 35.96px 0px rgba(71, 71, 185, 0.2);
  height: calc(100% - 70px);
}

.staarImg {
  width: 100%;
  padding-top: 20px;
  padding-bottom: 10px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.successContant {
  padding: 10px 20px 20px;
}

.success-item {
  box-shadow: 20px 24px 48px 0px rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  flex: 1 0 18%;
}

.success-item .learnerImg {
  max-width: 160px;
  margin: 0 auto;
  box-shadow: 0px 17.26px 35.96px 0px rgba(71, 71, 185, 0.2);
  border-radius: 50%;
  line-height: 0px;
}

.success-item .learnerImg img {
  max-width: 100%;
  /* height: 100%; */
  border-radius: 50%;
}

/* .success-item .curveBg {
    display: inline-block;
    width: 100%;
    border-radius: 0px 0px 260px 250px;
    background: rgba(176, 57, 141, 1);
    text-align: center;
} */
.successContant {
  padding: 20px;
}

.successContant .successTop h2 {
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
}

.successContant .successTop h4 {
  font-size: 10px;
  font-weight: 400;
}

.successTop {
  text-align: center;
  padding-bottom: 20px;
}

.successContant p {
  font-size: 14px;
  line-height: 22px;
}

/* .faqSection {
    padding-bottom: 170px;
} */

.faqBanner {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.faqBanner .sup-form input {
  background-image: url("/search.svg");
  background-repeat: no-repeat;
  background-position: center left 18px;
  padding-left: 50px;
}

.faqpage {
  padding: 0px;
}

.faqSection .accordion-button {
  background: rgba(239, 215, 232, 1);
  font-size: 20px;
  font-weight: 600;
  color: #000000;
  box-shadow: none;
  border: none;
}

.faqSection .accordion-item {
  margin-bottom: 20px;
  background: rgba(239, 215, 232, 1);
  border: none;
  overflow: hidden;
  border-radius: 8px;
}

.faqSection .view-all-section {
  margin-bottom: 20px;
  background: rgba(239, 215, 232, 1);
  border: none;
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  cursor: pointer;
}

.faqSection .view-all-text {
  background: rgba(239, 215, 232, 1);
  font-size: 20px;
  font-weight: 600;
  color: #000000;
  box-shadow: none;
  border: none;
}

.faqSection .view-all-icon {
  font-size: 20px;
  font-weight: 600;
  color: #000000;
}

.faqSection .accordion-button:not(.collapsed) {
  background-color: #efd7e8;
  box-shadow: none;
}

.faqSection .accordion-button:after {
  background: url("/plus-icon.svg") no-repeat;
  background-size: 20px;
}

.faqSection .accordion-button:not(.collapsed):after {
  background: url("/plus-red.svg") no-repeat;
  background-size: 20px;
}

.faqSection .accordion-body {
  padding-top: 0px;
}

.faqSection .accordion-body p {
  font-size: 18px;
}

.factLeft {
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  box-shadow: 23px 4px 50px 0px rgba(42, 42, 43, 1);
  padding: 160px 60px;
  min-height: 700px;
  display: flex;
  align-items: center;
  min-width: 1205px;
}

.factLeft .sectionTitle {
  padding-bottom: 30px;
  text-align: left;
  max-width: 520px;
  margin: 0;
}

@media only screen and (min-width: 1400px) {
  .factLeft .sectionTitle {
    max-width: 640px;
  }

  .course-card-bottom .current-price {
    font-size: 13px;
    line-height: 24px;
    font-weight: 600;
    color: rgba(176, 57, 141, 1);
  }
}

@media only screen and (max-width: 900px) {
  .factLeft .sectionTitle {
    max-width: 420px;
  }

}

.factLeft .sectionTitle .title {
  font-size: 60px;
  line-height: 80px;
  font-weight: 800;
  padding-bottom: 10px;
  color: #fff;
}

.factLeft p {
  font-size: 24px;
  line-height: 36px;
  color: #fff;
  padding-bottom: 20px;
}

.factRight {
  max-width: 710px;
  position: absolute;
  right: 90px;
}

.factRight .artLast {
  padding: 0px 40px;
  position: relative;
  top: 10px;
}

.factArtWrap {
  display: flex;
  align-items: center;
}

.footerSection {
  background: linear-gradient(90deg, #000000 0%, #be2890 100%);
  position: relative;
  margin-top: 100px;
}

.footerSection .logo {
  width: 160px;
  padding-bottom: 10px;
}

.footer-content p {
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  color: #ffffff;
  position: relative;
  text-decoration: none;
  max-width: 420px;
}

.footerSection .logo img {
  width: 100%;
}

.list-wrap {
  margin: 0px;
  padding: 0px;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-top: 26px;
}

.footer-title {
  margin-bottom: 0;
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
  position: relative;
  padding-bottom: 20px;
}

.list-wrap li {
  list-style: none;
}

.footer-link .list-wrap li a {
  font-size: 16px;
  line-height: 32px;
  font-weight: 400;
  color: #ffffff;
  position: relative;
  text-decoration: none;
  padding-bottom: 4px;
  display: inline-block;
}

.footer-link .list-wrap li a:hover {
  text-decoration: underline;
}

.footer-social li a img {
  max-width: 48px;
  transition: transform 0.3s;
  cursor: pointer;
}

.footer-social li a img:hover {
  transform: scale(1.1);
}

.footer__top {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 30px 0px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 10px 0px 10px;
  color: #fff;
}

.footer-bottom-menu .list-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
}

.footer-bottom-menu .list-wrap li a {
  color: #fff;
  text-decoration: none;
  position: relative;
}

.paymentImg {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cta-wrapper {
  position: relative;
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  border-radius: 10px;
  max-width: 1000px;
  margin: -100px auto 30px;
  padding: 30px 70px;
  box-shadow: 0px 40px 80px 0px rgba(11, 02, 55, 0.1);
  text-align: center;
}

.cta-wrapper h3 {
  color: #ffffff;
  font-size: 32px;
  font-weight: 700;
  position: relative;
  padding-bottom: 10px;
}

.cta-wrapper p {
  color: #ffffff;
  font-size: 18px;
  font-weight: 500;
}

form.sup-form {
  position: relative;
  max-width: 100%;
  margin: 40px auto 0px;
  z-index: 1;
}

.sup-form input {
  background: #ffffff;
  border: 0 none;
  height: 70px;
  font-size: 16px;
  line-height: 70px;
  padding: 0 20px;
  /* padding-right: 172px; */
  border-radius: 50px;
  box-shadow: none;
  outline: none;
}

.sup-form button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  height: 55px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  padding: 0 20px;
  border-radius: 50px;
  border: none;
}

.auth-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-bg {
  /* background: url('../assets/images/signup-bg.svg') no-repeat center center;
    background-size: cover; */
  height: 100vh;
  width: 50%;
}

.auth-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-right {
  width: 50%;
  height: 100vh;
  padding: 70px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #e2e2e2 -86.53%, #ffffff 100%);
}

/* .auth-right:before {
  content: "";
  z-index: 11;
  top: 0;
  border-radius: 16px;
  right: 0px;
  position: absolute;
  width: 297px;
  height: 89px;
  background: url("../assets/images/auth-graphic-top.svg");
  background-size: cover;
} */

/* .auth-right:after {
  content: "";
  z-index: 1;
  bottom: 50px;
  border-radius: 16px;
  left: -222px;
  position: absolute;
  width: 268px;
  height: 168px;
  background: url("../assets/images/auth-graphic-bottom.svg");
  background-size: cover;
} */
.log_wraps {
  width: 100%;
  scale: 0.8;
}

.log_wraps .form-control {
  background: transparent;
  transition: all 0.4s;
  height: 60px;
  border-radius: 40px;
  padding-left: 20px;
  border: 1px solid rgba(0, 0, 0, 0.4);
}

.log_wraps label {
  font-size: 16px;
  font-weight: 600;
  line-height: 28px;
  padding-bottom: 10px;
}

.log_wraps .form-group {
  margin-bottom: 1.5rem;
}

.log__heads {
  padding-bottom: 20px;
}

.log__heads_center {
  padding-bottom: 20px;
  text-align: center;
}

.log__heads_center .logs_title {
  font-size: 28px;
  line-height: 42px;
  font-weight: 700;
}

.log__heads .logs_title {
  font-size: 28px;
  line-height: 42px;
  font-weight: 700;
}

.log__heads h1 {
  font-weight: 700;
  font-size: 60px;
  line-height: 100%;
  text-align: center;
  color: #000000;
  margin-bottom: 60px;
}

.log__heads div {
  padding-left: 100px;
  padding-right: 100px;
}

.log__heads p,
#email {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  padding-top: 6px;
}

.terms-conditions-content p {
  font-family: Poppins;
  font-weight: 400;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0%;
  text-transform: capitalize;
  color: #000000;
}

.terms-conditions-content b {
  font-weight: 600;
  font-size: 36px;
}

.terms-conditions-content strong {
  font-weight: 600;
  line-height: 24px;
}

#email {
  font-weight: 600;
  color: #b0398d;
}

.btn_apply {
  background: linear-gradient(273.41deg, #cf93b7 2.82%, #b0398d 93.43%);
  color: #fff;
  display: inline-block;
  width: 100%;
  text-align: center;
  height: 56px;
  line-height: 56px;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  color: #fff !important;
  border-radius: 24px;
  border: none;
  position: relative;
  cursor: pointer;
  background-color: transparent;
}


.btn_apply::before {
  content: "";
  position: absolute;
  background: linear-gradient(to right, #b0398d 0%, #cf93b7 100%);
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
  z-index: -1;
  border-radius: 30px;
}

.btn_apply:hover {
  color: #b0398d !important;
  background: #ffffff;
  border-radius: 30px;
}

/* Disabled button override */
.btn_apply:disabled,
.btn_apply.btn-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Remove hover effect when disabled */
.btn_apply:disabled:hover {
  background: linear-gradient(273.41deg, #cf93b7 2.82%, #b0398d 93.43%);
  color: #fff !important;
}

/* Dim the gradient border */
.btn_apply:disabled::before {
  opacity: 0.5;
}


.log_wraps .form-group {
  position: relative;
  z-index: 1;
}

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

.social_logs ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.social_logs ul li {
  display: inline-block;
  padding: 5px;
}

.social_logs ul li a {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s;
  font-size: 16px;
  border-radius: 50%;
  font-weight: 600;
  color: #323a48 !important;
  background: rgba(236, 233, 236, 1);
  border: 0.4px solid rgba(176, 57, 141, 1);
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
}

.checkbox input[type="checkbox"] {
  position: relative;
  border: 2px solid #000;
  border-radius: 2px;
  background: none;
  cursor: pointer;
  line-height: 0;
  margin: 0;
  outline: 0;
  padding: 0 !important;
  vertical-align: text-top;
  height: 20px;
  min-width: 20px;
  -webkit-appearance: none;
  opacity: 0.5;
}

.checkbox input[type="checkbox"]:hover {
  opacity: 1;
}

.checkbox input[type="checkbox"]:checked {
  background-color: #000;
  opacity: 1;
}

.checkbox input[type="checkbox"]:before {
  content: "";
  position: absolute;
  right: 50%;
  top: 50%;
  width: 4px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  margin: -1px -1px 0 -1px;
  transform: rotate(45deg) translate(-50%, -50%);
  z-index: 2;
}

.checkbox label {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  padding-bottom: 0px !important;
}

.checkbox label a {
  color: rgba(71, 71, 185, 1);
}

.remember-password a {
  font-weight: 600;
  color: rgba(71, 71, 185, 1);
}

.allready-login a {
  font-weight: 600;
  color: rgba(71, 71, 185, 1);
}

.remember-password.form-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reset-password .auth-right {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
}

.reset-password .resetBox {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.5);
  padding: 24px;
  border-radius: 24px;
  min-width: 1000px;
  position: relative;
  z-index: 11;
}

/* .reset-password .resetBox:after {
  content: "";
  z-index: 1;
  bottom: -70px;
  left: 0;
  position: absolute;
  width: 268px;
  height: 168px;
  background: url("../assets/images/auth-graphic-bottom.svg");
  background-size: cover;
} */

/* .log_wraps {
  scale: 0.9;
} */

.reset-password .log_wraps {
  max-width: 450px;
  margin: 0 auto;
}

.reset-password .auth-right:after {
  display: none;
}

.reset-password .logoBox {
  width: 100%;
  text-align: center;
}

.back-login a {
  font-weight: 600;
  color: rgba(71, 71, 185, 1);
}

.resendCode {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  padding-top: 10px;
}

.resendCode a {
  font-weight: 600;
  color: rgba(71, 71, 185, 1);
}

.backLink {
  font-weight: 700;
  color: rgba(71, 71, 185, 1);
}

.otpWrap {
  width: 100%;
  display: flex;
  gap: 20px;
  align-items: center;
}

.otpWrap input {
  border: none;
  background-color: #ffffff;
  color: rgba(0, 0, 0, 1);
  font-size: 40px;
  font-weight: 600;
  text-align: center;
  padding: 10px;
  width: 100%;
  max-width: 70px;
  height: 70px;
  border-radius: 4px;
  border: 1px solid rgba(176, 57, 141, 1);
}

.password {
  position: relative;
}

.form-group.password .form-control {
  padding-right: 50px;
}

.password .eyeIcon {
  position: absolute;
  right: 10px;
  cursor: pointer;
  top: 30px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.log_wraps.successBox {
  text-align: center;
}

.successBox .sucessImg {
  padding: 20px;
}

/* trainerHeader start here */

.trainerHeader {
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  padding: 16px 0px;
  position: relative;
  z-index: 1;
}

.trainerHeader .logo {
  max-width: 100px;
}

.trainerHeader .logo img {
  width: 100%;
  height: 60px;
}

.trainerHeader .headerWrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.trainerHeader .headerWrap .CancelBtn {
  background: url("/close-icon.svg") no-repeat center right;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: #b0398d;
  padding-right: 26px;
  background-size: 24px;
  text-transform: uppercase;
}

.signupDetails {
  background: linear-gradient(360deg, #ffffff 0%, #f0f0f0 88.47%);
  padding: 30px 0px 20px;
  position: relative;
}

.signupDetails:before {
  content: "";
  z-index: 11;
  top: 0;
  border-radius: 16px;
  right: 0;
  position: absolute;
  width: 350px;
  height: 120px;
  background: url("/auth-graphic-top.svg");
  background-size: cover;
}

.signupDetails:after {
  content: "";
  z-index: 1;
  bottom: 30px;
  left: -120px;
  position: absolute;
  width: 258px;
  height: 168px;
  background: url("/auth-graphic-bottom.svg");
  background-size: cover;
}

.design-process-section .text-align-center {
  line-height: 25px;
  margin-bottom: 12px;
}

.design-process-content {
  border: 1px solid #e9e9e9;
  position: relative;
  padding: 16px 34% 30px 30px;
}

.design-process-content img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  max-height: 100%;
}

.design-process-content h3 {
  margin-bottom: 16px;
}

.design-process-content p {
  line-height: 26px;
  margin-bottom: 12px;
}

.application-review {
  padding-top: 60px;
  text-align: center;
  gap: 10px;
}

.application-review h4 {
  font-size: 32px;
  font-weight: 500;
}

.application-review p {
  line-height: 16px;
  padding-top: 12px;
  padding: 10px 0px;
}

.process-model {
  list-style: none;
  padding: 0;
  position: relative;
  max-width: 700px;
  margin: 0px auto 20px;
  border: none;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.process-model li::after {
  background: #e5e5e5 none repeat scroll 0 0;
  bottom: 0;
  content: "";
  display: block;
  height: 4px;
  margin: 0 auto;
  position: absolute;
  right: -96px;
  top: 33px;
  width: 100%;
  z-index: -1;
}

.process-model li.visited::after {
  background: #91288d;
}

.process-model li:last-child::after {
  width: 0;
  display: none;
}

.process-model li {
  display: inline-block;
  width: 33%;
  text-align: center;
  float: none;
  position: relative;
}

.nav-tabs.process-model>li.active>a,
.nav-tabs.process-model>li.active>a:hover,
.nav-tabs.process-model>li.active>a:focus,
.process-model li a:hover,
.process-model li a:focus {
  border: none;
  background: transparent;
}

.process-model li a {
  padding: 0;
  border: none;
  color: #606060;
}

.process-model li.active,
.process-model li.visited {
  color: #606060;
}

.process-model li.active a,
.process-model li.active a:hover,
.process-model li.active a:focus,
.process-model li.visited a,
.process-model li.visited a:hover,
.process-model li.visited a:focus {
  color: #606060;
}

.process-model li.active p,
.process-model li.visited p {
  font-weight: 600;
}

.process-model li .personalIcon {
  background-image: url("/person-detail-icon.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 32px;
}

.process-model li .detailIcon {
  background-image: url("/teaching-detail-icon.svg");
  background-size: 32px;
  background-repeat: no-repeat;
  background-position: center center;
}

.process-model li .statusIcon {
  background-image: url("/status-icon.svg");
  background-size: 32px;
  background-repeat: no-repeat;
  background-position: center center;
}

.process-model li .approvedIcon {
  background-image: url("/approved-icon.svg");
  background-size: 32px;
  background-repeat: no-repeat;
  background-position: center center;
}

.process-model li i {
  display: block;
  height: 68px;
  width: 68px;
  text-align: center;
  margin: 0 auto;
  background-color: #ffffff;
  border: 3px solid rgba(157, 157, 157, 1);
  line-height: 65px;
  font-size: 30px;
  border-radius: 50%;
}

.process-model li.active i,
.process-model li.visited i {
  border-color: #91288d;
}

.process-model li p {
  font-size: 14px;
  margin-top: 8px;
  color: rgba(0, 0, 0, 1);
  font-weight: 500;
}

.process-model.contact-us-tab li.visited a,
.process-model.contact-us-tab li.visited p {
  color: #606060 !important;
  font-weight: normal;
}

.process-model.contact-us-tab li::after {
  display: none;
}

.process-model.contact-us-tab li.visited i {
  border-color: #e5e5e5;
}

.process-content {
  max-width: 500px;
  margin: 0 auto;
}

.process-content .aboutDestail {
  text-align: center;
  padding-bottom: 24px;
}

.process-content .aboutDestail h3 {
  font-size: 32px;
  font-weight: 600;
}

.process-content .aboutDestail p {
  font-size: 16px;
  font-weight: 500;
}

.process-content .form-control {
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: none;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group button {
  border: none;
}

.form-group label {
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
  padding-bottom: 10px;
}

.btn-gradient {
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  border-radius: 40px;
  height: 48px;
  border: none;
  color: #fff;
  min-width: 130px;
  padding: 8px 20px;
  font-size: 16px;
  font-weight: 600;
}

.file-upload-wrapper {
  position: relative;
  width: 100%;
  height: 50px;
  overflow: hidden;
}

.file-upload-wrapper:after {
  content: attr(data-text);
  font-size: 16px;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  border: 1px solid #00000080;
  padding: 10px 15px;
  display: block;
  width: calc(100% - 0px);
  pointer-events: none;
  z-index: 20;
  height: 50px;
  line-height: 30px;
  color: #000;
  border-radius: 5px 10px 10px 5px;
  font-weight: 300;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-upload-wrapper:before {
  content: attr(data-browse);
  position: absolute;
  top: 5px;
  right: 5px;
  display: inline-block;
  /* height: 40px; */
  background: #b0398d33;
  color: #b0398d;
  font-weight: 500;
  z-index: 25;
  font-size: 16px;
  line-height: 40px;
  padding: 0 15px;
  text-transform: uppercase;
  pointer-events: none;
  border-radius: 6px;
}

.file-upload-wrapper:hover:before {
  background: #b0398d33;
}

.file-upload-wrapper input {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  height: 50px;
  margin: 0;
  padding: 0;
  display: block;
  cursor: pointer;
  width: 100%;
  pointer-events: auto;
}

@media screen and (max-width: 560px) {
  .more-icon-preocess.process-model li span {
    font-size: 23px;
    height: 50px;
    line-height: 46px;
    width: 50px;
  }

  .more-icon-preocess.process-model li::after {
    top: 24px;
  }
}

@media screen and (max-width: 380px) {
  .process-model.more-icon-preocess li {
    width: 16%;
  }

  .more-icon-preocess.process-model li span {
    font-size: 16px;
    height: 35px;
    line-height: 32px;
    width: 35px;
  }

  .more-icon-preocess.process-model li p {
    font-size: 8px;
  }

  .more-icon-preocess.process-model li::after {
    top: 18px;
  }

  .process-model.more-icon-preocess {
    text-align: center;
  }
}

/* facilityFilter */

.facilityFilter {
  padding: 40px 0 0;
}

.filter-wrapper {
  box-shadow: 0 4px 40px #00000040;
  padding: 24px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  gap: 16px;
  margin: 0 auto;
}

.filter-wrapper .select-item {
  border: 2px double #b0398d;
  border-radius: 24px;
  display: inline-block;
  background-image: linear-gradient(#fff, #fff),
    radial-gradient(circle at 0 0, #be2890, #cf93b7);
  background-origin: border-box;
  background-clip: content-box, border-box;
  width: 100%;
}

.filter-wrapper .select-item .form-control {
  border-radius: 50px;
  border: none;
  height: 40px;
}

.filter-left {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.search-btn {
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  width: 42px;
  height: 42px;
  display: inline-block;
  border-radius: 50%;
}

.search-btn i {
  background: url("/search.svg") no-repeat center;
  width: 42px;
  height: 42px;
  display: inline-block;
  background-size: 24px;
  filter: brightness(0) invert();
}

.facility-filter-btn {
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}

.facility-filter-btn i {
  background: url("/search.svg") no-repeat center;
  background-size: 24px 24px;
  width: 24px;
  height: 24px;
  display: inline-block;
  filter: brightness(0) invert();
}

.facility-filter-btn:disabled {
  background: #ccc;
  /* greyed out */
  cursor: not-allowed;
}

.facility-filter-btn:disabled i {
  filter: brightness(0.5) invert();
  /* icon looks disabled */
}

.facility-reset-btn {
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  color: white;
  font-size: 26px;
}

.facility-reset-btn:disabled {
  background: #ccc;
  color: #BDBDBD;
  /* greyed out */
  cursor: not-allowed;
}

.facility-reset-btn:disabled i {
  filter: brightness(0.5) invert();
  /* icon looks disabled */
}

.facilityContant {
  padding-top: 30px;
}

.facilityContant p {
  padding-bottom: 20px;
}

.facilityProduct {
  /* box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.25); */
  position: relative;
  border: 1.4px solid rgba(0, 0, 0, 1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
}

.facilityProduct:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}

.workshopProduct {
  /* box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.25); */
  position: relative;
  border: 1.4px solid rgba(0, 0, 0, 1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.facProductImg {
  max-width: 435px;
  min-width: 435px;
  /* box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.25); */
  border-radius: 12px;
  line-height: 0px;
}

.centerBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.facProductImg img {
  width: 100%;
  height: 100%;
  max-height: 350px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.workshopProductImg {
  display: flex;
  align-items: center;
}

.workshopProductImg img {
  width: 100%;
  height: 100%;
  max-height: 430px;
  min-height: 430px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.facProductContant {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
  padding: 20px;
  width: 100%;
}

.workshopProductContant {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
  padding: 20px 60px;
}

.ContantLeft {
  width: 100%;
}

.ContantLeft h3 {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  padding-bottom: 10px;
}

.workshopTitle {
  font-size: 36x;
  /* line-height: 36px; */
  font-weight: 700;
  color: #b0398d;
}

.ContantLeft p {
  font-size: 16px;
  line-height: 24px;
}

.ContantLeft .list {
  padding-top: 30px;
}

.imgBlogBanner {
  line-height: 0px;
}

.productPrice {
  font-size: 24px;
  line-height: 40px;
  font-weight: 600;
  color: #b0398d;
  padding: 8px 0px;
}

select.form-control {
  background: url("/dropdown-arrow.svg") no-repeat 94% 50%;
  -moz-appearance: none;
  -webkit-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
}

/* .header-adjust {
  scale: 0.95;
} */
.progressContainer {
  width: 100%;
  height: 5px;
  background: #e0e0e0;
}

.progressBar {
  height: 5px;
  background: #bf2b91;
  transition: width 0.5s ease-in-out;
}

.productPrice span {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #000000;
}

.priceOff {
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  padding-bottom: 10px;
}

.priceOff span {
  text-decoration: line-through;
}

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

.pagination li {
  padding: 7px;
}

.pagination li a {
  width: 46px;
  height: 46px;
  display: inline-block;
  line-height: 46px;
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: rgba(217, 217, 217, 1);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
  color: #101115;
  font-weight: 500;
  font-size: 14px;
}

.pagination li a:hover,
.pagination li a.active {
  background: rgba(191, 43, 145, 1);
  box-shadow: none;
  color: #fff;
}

.customSearch {
  border: 2px double #b0398d;
  border-radius: 20px;
  display: inline-block;
  background-image: linear-gradient(#fff, #fff),
    radial-gradient(circle at 0 0, red, #3020ff);
  background-origin: border-box;
  background-clip: content-box, border-box;
  width: 100%;
}

/* facProductDetails start here */

.facilityDetails {
  padding-top: 20px;
}

.capicityWrap.top-0 {
  padding-top: 0;
}

.facilityListing {
  position: relative;
  z-index: 1;
}

.amenitiesList.top-0 {
  padding-top: 0;
}

.facProductDetails {
  display: flex;
  align-items: center;
  border: 1.55px solid rgba(0, 0, 0, 0.7);
  border-radius: 16px;
  overflow: hidden;
}

.detailsContant h3 {
  font-size: 32px;
  line-height: 40px;
  color: rgba(176, 57, 141, 1);
  font-weight: 600;
  padding-bottom: 10px;
}

.detailsContant p {
  font-size: 16px;
  line-height: 24px;
}

.checkAvailable {
  padding-top: 16px;
}

.checkAvailable h4 {
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  padding-bottom: 10px;
}

.checkInput {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 400px;
  padding-bottom: 24px;
}

.availableList {
  padding-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  max-width: 50%;
}

.availableList li {
  background: url("/check-bullet.svg") no-repeat center left;
  padding-left: 26px;
  background-size: 20px;
  width: 50%;
  line-height: 29px;
}

.cateringService {
  background: linear-gradient(90deg,
      rgba(176, 57, 141, 0.8) 0%,
      rgba(0, 0, 0, 0.8) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 16px;
  margin: 10px 0px;
  gap: 40px;
  background: url("/faq-card-bg.png") no-repeat center center;
  background-size: cover;
  padding: 90px;
  position: relative;
  z-index: 1;
}

.cateringContant {
  max-width: 600px;
}

.avatar-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  margin-bottom: 40px;
  /* Space above the section */
}

.avatar {
  width: 48px;
  /* Adjust size as per your design */
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #fff;
  /* White border around avatars */
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  position: absolute;
}

.avatar-center {
  width: 56px;
  /* Adjust size as per your design */
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #fff;
  /* White border around avatars */
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  position: absolute;
}

.avatar-1 {
  left: 0;
  z-index: 1;
}

.avatar-2 {
  left: 30px;
  /* Adjust to overlap */
  z-index: 2;
}

.avatar-3 {
  left: 60px;
  /* Adjust to overlap */
  z-index: 1;
}

.cateringService h3 {
  font-size: 32px;
  line-height: 40px;
  font-weight: 600;
  padding-bottom: 10px;
  color: #ffffff;
}

.cateringService p {
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
  max-width: 500px;
}

.breadcrumbs-wrap {
  padding-top: 30px;
}

.breadcrumbs-wrap .breadcrumb-item a {
  font-weight: 600;
  color: #000000;
}

.breadcrumbs-wrap .breadcrumb-item {
  font-size: 18px;
  padding-right: 20px;
  position: relative;
}

.breadcrumb-item+.breadcrumb-item:before {
  background-image: url("/arrow-right.svg");
  background-repeat: no-repeat;
  background-position: center center;
  content: ".";
  color: white;
  position: absolute;
  left: -12px;
}

.classDetails {
  border: 1px solid #ddd;
  padding: 24px;
  border-radius: 12px;
  margin: 30px 0px;
}

.classDetailsTop {
  padding-bottom: 20px;
}

.classDetails label {
  display: block;
  padding-bottom: 4px;
  font-weight: 500;
}

.classDetails span {
  padding-bottom: 5px;
  display: inline-block;
  font-size: 14px;
  font-weight: 300;
}

.classDetailsTop h4 {
  font-size: 24px;
  font-weight: 500;
}

.classDetailsTop p {
  font-size: 15px;
}

.form-control {
  transition: all 0.4s;
  height: 50px;
  border-radius: 8px;
  padding-left: 20px;
  border: 1px solid #0006;
}

/* aboutTopBanner start here */

.aboutTopBanner {
  /* background: url(../assets/images/about-top-banner.png) no-repeat center center; */
  background-size: cover;
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
}

.aboutTopBanner .aboutConatnt {
  padding: 140px 0px 80px;
  max-width: 560px;
}

.aboutTopBanner .aboutConatnt h2 {
  font-size: 44px;
  line-height: 60px;
  color: #fff;
  font-weight: 600;
}

.aboutTopBanner .aboutConatnt p {
  font-size: 18px;
  line-height: 24px;
  color: #ffffff;
  padding-top: 10px;
}

/* OurMission section start here */

.MissionSection {
  padding: 0px 0px;
}

.MissionSection .nav-link.active {
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  color: #fff;
  border-radius: 20px;
}

.MissionSection .nav-link {
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  border-radius: 40px;
  box-sizing: border-box;
  display: block;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  z-index: 2;
  color: rgba(176, 57, 141, 1);
  border: none;
  font-size: 16px;
  font-weight: 600;
  height: 48px;
  line-height: 48px;
  padding: 0px 30px;
}

.MissionSection .nav-link.active:before {
  background: transparent;
}

.MissionSection .nav-link:before {
  content: "";
  z-index: -1;
  top: 2px;
  border-radius: 40px;
  left: 3px;
  position: absolute;
  background: #fff;
  width: calc(100% - 5px);
  height: calc(100% - 4px);
}

.ourMissionBg {
  /* background: url("../assets/images/our-mission-bg.png") no-repeat center center; */
  background-size: cover;
  color: #fff;
  border-radius: 20px;
  padding: 40px 120px;
  box-shadow: -1px 18px 40px 0px rgba(0, 0, 0, 0.4);
}

.ourMissionBg .nav-tabs {
  border: none;
  display: flex;
  gap: 20px;
}

.ourMissionBg .vissionRight {
  padding-top: 40px;
}

.ourMissionBg .vissionRight p {
  padding-bottom: 16px;
}

.vissionLeft h2 {
  font-weight: 700;
  font-size: 60px;
  line-height: 70px;
  text-align: right;
  max-width: 100px;
}

.workWithUs .headingTitle {
  font-size: 28px;
}

.workWithUs .globalFont {
  font-size: 16px;
}

.workWithUs .WorkConatnt {
  padding-top: 20px;
}

.workWithUs .WorkConatnt a {
  font-weight: 600;
  text-decoration: underline;
}

.workWithUs .WorkConatnt.bg-1 {
  border-top: 15px solid #b0398d;
}

.workWithUs .WorkConatnt.bg-1 a {
  color: #b0398d;
}

.workWithUs .WorkConatnt.bg-2 {
  border-top: 15px solid rgba(150, 86, 187, 1);
}

.workWithUs .WorkConatnt.bg-2 a {
  color: rgba(150, 86, 187, 1);
}

.workWithUs .WorkConatnt.bg-3 {
  border-top: 15px solid rgba(133, 123, 134, 1);
}

.workWithUs .WorkConatnt.bg-3 a {
  color: rgba(133, 123, 134, 1);
}

.platFeatSection {
  background: linear-gradient(0deg, #eaeaea, #eaeaea),
    linear-gradient(0deg, #fff3, #fff3);
  box-shadow: 0 17px 120px #0000004a;
}

.platFeatSection .topRated {
  padding-bottom: 60px;
}

.platformFeature h3 {
  color: rgba(176, 57, 141, 1);
  font-size: 24px;
  font-weight: 600;
  line-height: 34px;
  padding-bottom: 10px;
}

.platformFeature .imgwrap {
  padding-bottom: 20px;
  width: 180px;
}

.platformFeature .imgwrap img {
  width: 100%;
  height: 100%;
}

/* course listing start here  */

.courseSearchTop .searchWarap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.courseSearchTop .searchWarap .menu-search-form {
  width: 550px;
}

/* check box css start here */

.lms-check-group input {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

.lms-check-group label:before {
  content: "";
  width: 18px;
  height: 18px;
  background: url("/checkbox.svg") no-repeat;
  display: inline-block;
  margin-right: 16px;
  background-size: 18px;
  position: relative;
  top: 2px;
}

.lms-check-group input[type="checkbox"]:checked~label:before {
  background: url("/checkbox-check.svg") no-repeat;
  background-size: 18px;
  width: 18px;
  height: 18px;
  position: relative;
  top: 2px;
}

.lms-check-group input[type="checkbox"]:focus~label {
  color: rgba(0, 0, 0, 1);
  font-size: 16px;
  font-weight: 400;
}

.lms-sidebar {
  padding-right: 30px;
}

.filterRating {
  position: relative;
  top: 4px;
}

.filterRating img {
  margin-right: 2px;
}

.previewImg {
  padding-top: 24px;
}

.previewImg img {
  width: 100%;
}

.courseFilter {
  padding: 0px;
}

/* .filterCard .couresCard:has(+ div) {
  background-color: blue;
} */
/* .filterCard div {
  width: 900px;
} */

.blogSort {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
  padding-bottom: 20px;
}

.blogSort .title {
  font-size: 36px;
  font-weight: 600;
  white-space: nowrap;
}

.blogSort .sortFilter {
  padding-bottom: 0px;
}

.sortRight {
  width: 100%;
  display: flex;
  justify-content: right;
}

.sortFilter .sortIcon {
  color: rgba(191, 43, 145, 1);
  font-weight: 600;
  padding-left: 5px;
  background: url("/arrow-down.svg") no-repeat center right;
  padding-right: 28px;
}

/* Parent Container */
.sortFilter {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  padding: 20px 0px;
}

/* Sort By Link */
.sortIcon {
  color: #007bff;
  text-decoration: none;
  margin-left: 5px;
  font-weight: bold;
}

/* Dropdown Menu */
.sortDropdown {
  position: absolute;
  background-color: #fff;
  box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.4);
  border-radius: 24px;
  overflow: hidden;
  width: 200px;
  top: 50px;
  right: 0px;
  padding: 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Show Dropdown on Hover */
.sortFilter:hover .sortDropdown {
  opacity: 1;
  visibility: visible;
}

/* Dropdown Items */
.sortDropdown li {
  list-style: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

.sortDropdown li a {
  color: black;
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 12px 16px;
}

.sortDropdown li button {
  color: black;
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: none;
  text-align: left;
}

.sortDropdown li button:hover {
  background: rgba(176, 57, 141, 1);
  color: #ffffff;
}


/* Hover Effect */
.sortDropdown li a:hover {
  background: rgba(176, 57, 141, 1);
  color: #ffffff;
}


/* Active Link */
.sortDropdown li .active {
  background: rgba(176, 57, 141, 1);
  color: #ffffff;
}

.sortDorpdown {
  position: absolute;
  background-color: #fff;
  box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.4);
  border-radius: 24px;
  overflow: hidden;
  width: 200px;
  top: 30px;
  z-index: 11;
  display: none;
}

.sortFilter:hover .sortDropdown {
  opacity: 1;
  visibility: visible;
}

.sortDorpdown li {
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  display: inline-block;
  width: 100%;
}

.sortDorpdown li a {
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  display: inline-block;
  width: 100%;
  padding: 10px 20px;
}

.sortDorpdown li .active {
  background: rgba(176, 57, 141, 1);
  color: #ffffff;
}

.filterHeading {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filterHeading .clearBtn {
  color: rgba(176, 57, 141, 1);
  font-weight: 600;
  white-space: nowrap;
}

.filterHeading .filterIcon {
  background: url("/filter-icon.svg") no-repeat center left;
  padding-left: 34px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  background-size: 24px;
}

.arrow {
  transition: transform 0.3s ease;
}

.arrow.open {
  transform: rotate(90deg);
}

.lms-widget-title {
  font-size: 18px;
  padding-bottom: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lms-widget-title .arrow {
  background: url("/arrow-down.svg") no-repeat center center;
  width: 20px;
  display: inline-block;
  height: 20px;
}

.lmst-single-widget {
  padding-top: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.8);
}

.lms-list-wrapper {
  padding-bottom: 16px;
}

.lms-list-wrapper li {
  margin-top: 10px;
  margin-bottom: 10px;
  color: #000000;
}

/* course Detail start here */

.courseDetailWrap {
  display: flex;
  justify-content: space-between;
  border: 1px solid rgba(0, 0, 0, 1);
  padding: 0px;
  overflow: hidden;
  border-radius: 6px;
}

.courseDetailWrap .courseImg {
  width: 50%;
  position: relative;
}

.courseDetailWrap .courseConatnt {
  width: 50%;
  padding: 24px;
}

.courseDetailWrap .courseConatnt h2 {
  font-size: 28px;
  line-height: 34px;
  font-weight: 600;
  padding-bottom: 6px;
  color: rgba(176, 57, 141, 1);
}

.courseDetailWrap .courseConatnt .courseAuthor {
  font-size: 16px;
  line-height: 22px;
}

.courseDetailWrap .courseConatnt .coursetext {
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  padding-top: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: initial;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.playPauseBtn {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  margin-left: -25px;
  padding: 0;
  border: none;
  background: none;
}

.playPauseBtn img {
  max-width: 60px;
}

.courseDetailWrap .courseConatnt .hour-min {
  font-size: 13px;
  line-height: 20px;
  color: #000;
  background: url("/clock-icon.svg") no-repeat;
  padding-left: 22px;
  background-size: 18px;
  background-position: 0;
}

.courseDetailWrap .courseConatnt .lang {
  font-size: 13px;
  line-height: 20px;
  color: rgb(0, 0, 0);
  padding-left: 22px;
  background: url("/globe.svg") 0px center / 18px no-repeat;
  background-position: 0px center;
}

.courseDetailWrap .courseConatnt .diffi {
  font-size: 13px;
  line-height: 20px;
  color: rgb(0, 0, 0);
  padding-left: 22px;
  background: url("/diff-question.svg") 0px center / 18px no-repeat;
  background-position: 0px center;
}

.courseDetailWrap .courseConatnt .diffi span {
  font-weight: 300;
}

.courseDetailWrap .courseConatnt .course-review {
  justify-content: normal;
  padding-top: 12px;
  gap: 22px;
}

.courseDetailWrap .courseConatnt .course-card-bottom .current-price {
  font-size: 32px;
  line-height: 40px;
}

.courseDetailWrap .courseConatnt .course-card-bottom .off-price {
  font-size: 18px;
}

.courseDetailWrap .courseBtn {
  display: flex;
  gap: 16px;
  padding-top: 16px;
  position: relative;
  z-index: 1;
}

.resumeCard .btnGradient {
  height: 40px;
  padding: 6px 24px;
}

.resumeCard .btnBorder {
  height: 40px;
  line-height: 40px;
  padding: 0px 16px;
}

.resumeCard .btnBorder:hover img {
  filter: brightness(0) invert(1);
}

.uploadVideoWrap .btnBorder:hover img {
  filter: brightness(0) invert(1);
}

.uploadVideoWrap label.btnBorder.plusAdd {
  padding-bottom: 0px;
}

.resumeCard label.btnBorder.plusAdd {
  padding-bottom: 0px;
  cursor: pointer;
}

.addContentTypeWrapper {
  padding-top: 16px;
  position: relative;
  z-index: 1;
}

.viewUploadFile {
  position: relative;
}

.viewUploadFile .uploadFile {
  position: absolute;
  z-index: 11;
  background-color: #fffefe;
  padding: 10px;
  left: 10px;
  top: 8px;
}

.btnGradient {
  display: inline-block;
  color: #fff !important;
  /* height: 48px; */
  padding: 12px 24px;
  font-weight: 500;
  border-radius: 24px;
  border: none;
  position: relative;
  cursor: pointer;
  background-color: transparent;
}

.btnGradient::before {
  content: "";
  position: absolute;
  background: linear-gradient(to right, #b0398d 0%, #cf93b7 100%);
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
  z-index: -1;
  border-radius: 30px;
}

.btnGradient:hover {
  color: #b0398d !important;
  background: #ffffff;
  border-radius: 30px;
}

.submitButton {
  display: inline-block;
  color: #fff;
  height: 48px;
  padding: 12px 30px;
  font-weight: 500;
  border-radius: 24px;
  border: none;
  position: relative;
  cursor: pointer;
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
}

.submitButton::before {
  content: "";
  position: absolute;
  background: linear-gradient(to right, #b0398d 0%, #cf93b7 100%);
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
  z-index: -1;
  border-radius: 30px;
}

.submitButton:hover {
  color: #b0398d;
  background: #ffffff;
  border: 1px solid rgba(191, 43, 145, 1);
}

.btnBorder.book-now {
  border: 2px solid #ffffff;
}

.btnBorder.book-now:hover {
  border: 2px solid #ffffff;
}

.btnBorder {
  min-width: 100px;
  max-width: 100%;
  height: 48px;
  line-height: 48px;
  font-weight: 500;
  padding: 0 24px;
  border: none;
  /* color: #b0398d;
  outline: none;
  background: none;
  border: none;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  background-color: #ffffff;
  border-radius: 24px; */
  color: #b0398d;
  background-color: #fff;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
  border-radius: 30px;
  transition: background 0.5s, color 0.5s;
  text-align: center;
}

.btnBorder:hover {
  color: rgb(255, 255, 255) !important;
  background: linear-gradient(90deg,
      rgb(176, 57, 141) 0%,
      rgb(207, 147, 183) 100%);
}

.btnBorder::before {
  /* content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 300px;
  border: 3px solid transparent;
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude; */
  content: "";
  position: absolute;
  background: linear-gradient(to right, #b0398d 0%, #cf93b7 100%);
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
  z-index: -1;
  border-radius: 30px;
}

.courseDetailTabs {
  padding-top: 0px;
}

.courseTabs {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  overflow: hidden;
}

.courseTabs .nav-tabs {
  display: flex;
  align-items: center;
  position: relative;
  border: none;
  background-color: #ececec;
  padding: 0px 50px;
}

/* .courseTabs .nav-tabs::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 8px;
  background: rgba(157, 157, 157, 1);
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -o-border-radius: 30px;
  -ms-border-radius: 30px;
  border-radius: 30px;
  z-index: -1;
} */

.trendindCard .slick-track,
.slick-slide,
.slick-slide>div {
  width: 100%;
}

.courseTabs .nav-tabs li {
  position: relative;
  margin-right: 30px;
}

.courseTabs .nav-tabs li a {
  font-size: 20px;
  color: rgba(0, 0, 0, 1);
  font-weight: 400;
  line-height: 32px;
  padding: 20px 0px;
  display: inline-block;
  position: relative;
  border: none;
  background-color: transparent !important;
}

.courseTabs .nav-tabs a.nav-link.active {
  font-weight: 500;
  color: #000000;
}

.courseTabs .nav-tabs li .active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  right: 0;
  width: 100%;
  height: 8px;
  background: rgba(176, 57, 141, 1);
  border-radius: 30px;
  margin: 0 auto;
  z-index: 1;
  transition: all 0.3s ease-out 0s;
}

.tabInner {
  padding: 30px 50px;

}

.tabInner1 {
  padding: 30px 50px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
}

.tabInner .courseTitle {
  font-size: 28px;
  line-height: 36px;
  font-weight: 500;
  padding-bottom: 16px;
}

.aboutList li {
  position: relative;
  padding-left: 26px;
}

.aboutList li::before {
  content: "";
  position: absolute;
  top: 1px;
  width: 20px;
  height: 20px;
  left: 0;
  background-image: url('/check-bullet.svg');
  background-size: cover;
  background-position: center;
  z-index: -1;
  background-size: 20px;
}

.shareBtn {
  background: #b0398d33;
  min-width: 140px;
  display: inline-block;
  height: 48px;
  font-size: 18px;
  font-weight: 500;
  border-radius: 4px;
  color: #000;
  line-height: 48px;
  text-align: center;
  padding: 0px 20px;
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.shareBtn img {
  width: 20px;
}

.courseOverview .shareBtn {
  max-width: 140px;
  justify-content: center;
}

.instructorOverview {
  max-width: 500px;
  /* margin: 0 auto; */
}

.instructorTop {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-bottom: 14px;
}

.instructorTop li {
  font-size: 16px;
  margin-bottom: 12px;
  padding-left: 40px;
  background-size: 20px;
}

.instructorTop .instReview {
  background: url("/tumb-icon.svg") no-repeat;
  background-position: center left;
}

.instructorTop .instRating {
  background: url("/single-star.svg") no-repeat;
  background-position: center left;
}

.instructorTop .instStudent {
  background: url("/user-icons.svg") no-repeat;
  background-position: center left;
}

.instructorTop .instCourse {
  background: url("/course-icon.svg") no-repeat;
  background-position: center left;
}

.instDetails h2 {
  font-size: 24px;
  font-weight: 600;
  padding-bottom: 10px;
}

.instDetails p {
  font-size: 16px;
}

.instDetails h2 span {
  font-size: 24px;
  word-break: break-word;
}

.ratingOverview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 40px 0px;
}

.ratingOverview ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ratingOverview ul li {
  color: #000000;
  font-size: 60px;
  font-weight: 700;
  line-height: 50px;
  text-align: center;
  border-right: 2px solid #b0398d;
  padding: 10px 20px;
}

.ratingOverview ul li:last-child {
  border: none;
}

.ratingOverview ul li .ratingStar {
  color: #000000;
  font-size: 60px;
  font-weight: 700;
  line-height: 50px;
  display: flex;
  align-items: center;
}

.text-left {
  text-align: left;
}

.ratingOverview ul li span {
  color: #000000;
  font-size: 20px;
  display: inline-block;
  width: 100%;
}

.ratingOverview .showAllReview {
  background: #be28901f;
  border: 1px solid #00000066;
  padding: 12px 24px;
  border-radius: 12px;
  color: #000000;
  font-size: 16px;
}

.btn-close:focus {
  box-shadow: none;
}

.ratingCard {
  background-color: #f7e5f2;
  padding: 16px;
  border-radius: 10px;
  margin-top: 16px;
  font-size: 14px;
}

.showMoreReview {
  background-color: #f7e5f2;
  padding: 12px;
  border: 1px solid #00000066;
  font-size: 16x;
  font-weight: 400;
  width: 100%;
  display: inline-block;
  border-radius: 12px;
  margin-top: 20px;
  text-align: center;
  color: #000;
}

.ratingTop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 12px;
}

.ratingTop h2 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}

.ratingTop h2 span {
  font-size: 20px;
  line-height: 32px;
  font-weight: 400;
  padding-left: 10px;
}

.ratingCard .ratingHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 12px;
}

.ratingHead .ratingLeft {
  display: flex;
  align-items: center;
  gap: 16px;
}

.userContant h3 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
}

.userContant .weekAgo {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
}

.ratingHead .ratingLeft .userImg img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid #b0398d;
}

.btn-close {
  background: url("/modal-close.svg") no-repeat;
  position: absolute;
  z-index: 11;
  top: 16px;
  right: 16px;
  max-width: 32px;
  max-height: 32px;
  box-shadow: none;
  cursor: pointer;
  background-size: 32px;
  width: 32px;
  height: 32px;
  background-position: center center;
}

.socialShare .sup-form {
  margin-top: 20px;
}

.socialShare h3 {
  font-size: 24px;
  font-weight: 600;
}

.socialShare .sup-form input {
  background: #f7e5f2;
  border: 1px solid #000000;
}

.socialShare .shareIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
  gap: 12px;
}

.courseCards {
  border: 1px solid #00000080;
  padding: 10px 20px;
  width: 100%;
  border-radius: 4px;
  margin-bottom: 20px;
}

.courseCards .courseHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.courseIntro {
  background: url("/arrow-bottom.svg") no-repeat center left;
  padding-left: 30px;
  font-size: 18px;
  font-weight: 500;
  transition: all 200ms ease;
}

.courseIntro span {
  padding-right: 12px;
}

.courseImg {
  line-height: 0px;
  /* max-width: 250px; */
}

.courseCards.active .courseIntro {
  background: url("/arrow-top.svg") no-repeat center left;
}

.courseCards.active {
  background-color: #efd7e8;
}

.courseLession {
  border-bottom: 1px solid #0000001f;
  padding: 10px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.courseLession .btnGradient {
  height: 36px;
  padding: 7px 15px;
  font-size: 14px;
}

.courseLession .btnBorder {
  height: 36px;
  padding: 6px 15px;
  font-size: 13px;
  line-height: 26px;
  font-weight: 600;
}

.courseLession:last-child {
  border: none;
}

.courseCards .courseTime {
  font-size: 16px;
  font-weight: 300;
  display: flex;
  align-items: center;
  gap: 6px;
}

.courseCards .courseTime img {
  max-width: 20px;
}

.progress-circle {
  width: 32px;
  height: 32px;
  background: conic-gradient(#b23a84 0% 33%, #fff 33% 100%);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-inner {
  width: 24px;
  height: 24px;
  background-color: #f4d8e8;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 8px;
  font-weight: 500;
}

.earnComplete .progress-circle {
  width: 62px;
  height: 62px;
  background: conic-gradient(#b23a84 0% 33%, #DDAACE 33% 100%);
  border-radius: 50%;
}

.earnComplete .progress-circle img {
  width: 30px;
  height: 30px;
}

.earnComplete .progress-inner {
  width: 48px;
  height: 48px;
  background-color: #ffffff;
}

/* Base progress styling */
.earnContant progress {
  appearance: none;
  -webkit-appearance: none;
  height: 12px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #4747B933;
  border: none;
}

/* WebKit (Chrome, Safari) */
.earnContant progress::-webkit-progress-bar {
  background-color: #4747B933;
  border-radius: 10px;
}

.earnContant progress::-webkit-progress-value {
  background: linear-gradient(90deg, #4747B9, #4747B9);
  border-radius: 10px;
  transition: width 0.4s ease;
}

/* Firefox */
.earnContant progress::-moz-progress-bar {
  background: linear-gradient(90deg, #4747B9, #4747B9);
  border-radius: 10px;
  transition: width 0.4s ease;
}

.courseLession .courseName {
  font-size: 16px;
  font-weight: 300;
}

.courseLession .courseName.videoIcon {
  background: url("/video-icon.svg") no-repeat center left;
  padding-left: 30px;
  background-size: 24px;
}

.courseLession .courseName.fileIcon {
  background: url("/file-icon.svg") no-repeat center left;
  padding-left: 30px;
  background-size: 24px;
}

/* .profileSideBar  start here */

.studentProfile {
  padding: 0px;
}

.profileWraper {
  display: flex;
  position: relative;
}

.profileSideBar {
  border-right: 1px solid #0000003d;
  padding: 50px 10px 10px;
  width: 100px;
  position: sticky;
  /* or 'fixed' if you want it totally fixed */
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 20px 10px;
  overflow-x: hidden;

  background-color: #fff;
}

.profileSideBar li {
  display: inline-block;
  padding-left: 30px;
  background-size: 24px;
  padding: 8px;
  text-align: center;
  width: 100%;
}

.profileRight {
  padding: 34px 24px;
  width: 100%;
  margin-left: 282px;
  width: calc(100% - 282px);
  background-color: #f8f8f8;
  min-height: 100vh;
}

.profileRight.trainerProfiles {
  margin-left: 0px;
  width: 100%;
}

.profileTabs {
  padding-top: 12px;
}

.profileForm {
  padding-top: 24px;
}

.profileTabs .nav-tabs li .active:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  right: 0;
  width: 100%;
  height: 3px;
  background: #b0398d;
  border-radius: 4px;
  margin: 0 auto;
  z-index: 1;
  transition: all 0.3s ease-ou;
}

.profileTabs .nav-link.active {
  border: none;
  position: relative;
  color: #b0398d;
  background-color: transparent;
}

.profileTabs .nav-link {
  color: #000000;
  border: none;
}

.profileTabs .nav-tabs .nav-link:focus,
.profileTabs .nav-tabs .nav-link:hover {
  border: none;
  box-shadow: none;
}

.profileForm .form-control {
  transition: all 0.4s;
  height: 50px;
  border-radius: 8px;
  padding-left: 20px;
  border: 1px solid #0006;
}

.profileForm textarea {
  min-height: 120px;
  resize: none;
  overflow: auto;
}

.imagePreview {
  background: url("/user-avatar.png") no-repeat center center;
}

.avatar-upload {
  position: relative;
  max-width: 200px;
  margin-bottom: 24px;
}

.avatar-upload .avatar-edit {
  position: absolute;
  left: 90px;
  bottom: 10px;
  z-index: 11;
}

.avatar-upload .avatar-edit input {
  display: none;
}

.avatar-upload .avatar-edit input+label {
  display: inline-block;
  width: 34px;
  height: 34px;
  margin: 0px -10px -10px;
  background: url("/photo-camera.svg") no-repeat center center;
  background-size: 30px;
  cursor: pointer;
  font-weight: normal;
  transition: all 0.2s ease-in-out;
}

.avatar-upload .avatar-preview {
  width: 192px;
  height: 192px;
  position: relative;
  border-radius: 100%;
}

.avatar-upload .avatar-preview>div {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.profileRight .headingTitle {
  font-size: 28px;
  font-weight: 600;
  line-height: 32px;
  padding-bottom: 0px;
}

.dashTitle.conversationWrap .headingTitle {
  font-size: 20px;
  font-weight: 500;
}

.dashTitle.conversationWrap .headingTitle span {
  font-size: 18px;
}

.socialLink {
  font-size: 24px;
  line-height: 40px;
  font-weight: 400;
  padding-bottom: 20px;
}

.socialBox {
  max-width: 500px;
}

.facebook {
  background: url("/share-icon1.svg") no-repeat center left;
  padding-left: 45px;
  background-size: 32px;
}

.youtube {
  background: url("/share-icon2.svg") no-repeat center left;
  padding-left: 45px;
  background-size: 32px;
}

.twitter {
  background: url("/share-icon3.svg") no-repeat center left;
  padding-left: 45px;
  background-size: 32px;
}

.instaram {
  background: url("/share-icon4.svg") no-repeat center left;
  padding-left: 45px;
  background-size: 32px;
}

.profileTabs .nav-tabs {
  padding-bottom: 20px;
}

.playIcon {
  width: 64px !important;
  height: 64px !important;
  cursor: pointer;
}

/* what Need start here */

.whatNeed {
  padding-top: 0px;
}

.need-wrapper {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  gap: 24px;
}

.need-item {
  box-shadow: 0px 4px 22.4px 0px rgba(0, 0, 0, 0.25);
  background-color: #ffffff;
  padding: 20px 16px;
  position: relative;
  border-radius: 6px;
  z-index: 10;
  text-align: center;
  width: 100%;
  max-width: 25%;
  overflow: hidden;
  min-height: 172px;
}

.need-item h4 {
  color: rgba(140, 5, 100, 1);
  font-size: 65px;
  font-weight: 700;
}

.need-item p {
  color: #212121;
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
}

.topSpace {
  margin-top: 70px;
}

.needImg {
  width: 120px;
  margin: 0 auto;
}

.needImg img {
  width: 80px;
  height: 80px;
}

/* beCertificate start here*/

.beCertificate {
  background: url("/certificate-bg.png") no-repeat center center;
  padding: 0px;
  background-size: cover;
  margin: 60px 0px;
}

.beCertificate .becomeText h3 {
  font-size: 42px;
  color: #ffffff;
  line-height: 60px;
  font-weight: 600;
  padding-bottom: 10px;
}

.beCertificate .becomeText p {
  font-size: 16px;
  color: #ffffff;
  line-height: 28px;
  font-weight: 400;
}

.beCertificate .becomeImg {
  width: 100%;
  height: 16rem;
  position: relative;
  margin-top: -2rem;
  margin-bottom: -2rem;
  border-radius: 6px;
}

.mycart .courseDetailWrap {
  /* box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.25); */
  padding: 20px;
  position: relative;
  margin-bottom: 30px;
}

.courseDetailWrap .courseImg {
  width: 50%;
}

.courseDetailWrap .courseImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mycart .courseDetailWrap .courseConatnt {
  width: 60%;
  padding: 24px;
}

.mycart .courseDetailWrap .courseImg img {
  border-radius: 4px;
}

.mycart .courseDetailWrap .course-review {
  gap: 14px;
}

.mycart .courseDetailWrap .remove {
  position: absolute;
  bottom: 20px;
  top: auto;
  right: 20px;
}

.mycart .courseDetailWrap .remove .removeIcon {
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: rgba(176, 57, 141, 1);
  background: url("/trash-icon.svg") no-repeat;
  padding-left: 22px;
  background-size: 18px;
  background-position: 0;
}

.mycart .courseDetailWrap h3 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
}

.mycart .cartHeading {
  font-size: 32px;
  line-height: 36px;
  font-weight: 600;
  padding-bottom: 16px;
}

.mycart .courseCount {
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
  padding-bottom: 12px;
}

.mycart .cartRight {
  box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.25);
  padding: 25px;
  margin-top: 80px;
  border-radius: 8px;
}

.mycart .cartRight .coupanApply {
  position: relative;
  max-width: 100%;
  z-index: 1;
}

.mycart .cartRight .coupanHeading {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  padding-bottom: 8px;
}

.mycart .cartRight .courseDetailWrap .courseConatnt .courseAuthor {
  font-size: 16px;
  line-height: 24px;
}

.mycart .cartRight .coupanApply input {
  background: rgb(255, 255, 255);
  height: 60px;
  font-size: 18px;
  line-height: 60px;
  padding: 0px 100px 0px 20px;
  border-radius: 4px;
  box-shadow: none;
  color: rgba(76, 86, 87, 0.6);
  outline: none;
  border: 1px solid rgba(76, 86, 87, 0.6);
}

.mycart .cartRight .coupanApply button {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  background: #b0398d;
  height: 58px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  padding: 0 26px;
  border-radius: 0px 4px 4px 0px;
  border: none;
  box-shadow: none;
}

.mycart .cartRight .viewOffer {
  color: rgba(0, 111, 207, 1);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  padding-top: 10px;
  display: inline-block;
  text-decoration: underline;
}

.mycart .cartRight .courseDetailWrap {
  box-shadow: none;
  padding: 0px;
  position: relative;
  margin-bottom: 10px;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0px;
  padding-bottom: 10px;
}

.mycart .cartRight .courseDetailWrap .courseImg {
  width: 40%;
}

.mycart .cartRight .courseDetailWrap h3 {
  font-size: 16px;
  line-height: 26px;
  font-weight: 500;
}

.mycart .cartRight .courseDetailWrap .courseConatnt {
  width: 70%;
  padding: 0px 0px 0px 20px;
}

.mycart .cartRight .courseDetailWrap .courseConatnt .course-card-bottom .current-price {
  font-size: 18px;
  line-height: 24px;
}

.mycart .cartRight .course-card-bottom {
  padding-top: 8px;
}

.checkoutBtn {
  padding-top: 10px;
}

.checkoutBtn .btnGradient {
  width: 100%;
  text-align: center;
  font-weight: 600;
  font-size: 18px;
}

.checkOutTotal {
  border-top: 1px solid #0003;
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
}

.checkOutTotal span {
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
}

.checkOutTotal .totalAed {
  color: rgba(176, 57, 141, 1);
}

.checkouSubTotal {
  padding: 20px 0 0px;
  display: flex;
  justify-content: space-between;
}

.checkouSubTotal span {
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  color: rgba(0, 0, 0, 1);
}

.checkouSubTotal .subTotalAed {
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  color: rgba(176, 57, 141, 1);
}

.checkouSubTotal .subTotalAed .off-price {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(0, 0, 0, 1);
}

.checkouSubTotal .subTotalAed .off-price span {
  font-weight: 400;
}

.vatTotal {
  padding: 14px 0;
  display: flex;
  justify-content: space-between;
}

.vatTotal span {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.8);
}

.vatTotal .vat span {
  font-size: 14px;
  font-weight: 400;
}

.checkouSubTotal span {
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  color: rgba(0, 0, 0, 1);
}

.checkouSubTotal .subtotal {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.8);
}

/* colot: rgba(0, 0, 0, 0.8); */

.cartNote {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  padding-top: 12px;
  text-align: center;
}

.coupon-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.coupon-container .coupanTitle {
  font-size: 20px;
  font-weight: 600;
}

.coupon-container .coupon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px dashed #a64d79;
  border-radius: 20px;
  padding: 20px;
  position: relative;
}

.coupon-container .coupon::before,
.coupon-container .coupon::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 40px;
  background: #fff;
  border-left: 2px dashed #a64d79;
  border-radius: 50%;
}

.coupon-container .coupon::before {
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
}

.coupon-container .coupon::after {
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  border-right: 2px dashed #a64d79;
  border-left: 0;
}

.coupon-container .discount {
  font-size: 24px;
  line-height: 30px;
  font-weight: bold;
  color: #3ca23c;
  font-weight: 600;
  text-align: center;
  margin-right: 10px;
  min-width: 100px;
}

.coupon-container .discount span {
  display: block;
  font-weight: bold;
}

.coupon-container .details {
  flex-grow: 1;
  border-left: 2px dashed #a64d79;
  padding-left: 20px;
  max-width: 72%;
  padding-right: 20px;
}

.coupon-container .details h2 {
  margin: 0;
  color: #000000;
  font-weight: 500;
  font-size: 24px;
}

.coupon-container .details p {
  margin: 5px 0;
  color: #000000;
  font-size: 16px;
}

.coupon-container .apply {
  font-weight: bold;
  color: #5856d6;
  font-size: 20px;
  cursor: pointer;
}

.sucessModalBlock {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 20px;
  max-width: 400px;
  margin: auto;
}

.sucessModalBlock .modalContant {
  padding: 8px 0px 16px;
}

.successModal .modal-header {
  border: none;
}

.sucessModalBlock h2 {
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
}

.dashboard-heading-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-bottom: 20px;
}

/* checkoutForm  start here*/

.checkoutForm .form-control {
  background: none;
  transition: all 0.4s;
  height: 50px;
  border-radius: 8px;
  padding-left: 20px;
  border: 1px solid #0006;
}

.checkoutForm {
  max-width: 90%;
}

.checkoutHeading {
  font-size: 24px;
  line-height: 40px;
  font-weight: 500;
  padding-bottom: 12px;
}

.paymentMethod {
  border: 1.13px solid rgba(0, 0, 0, 0.5);
  padding: 16px 20px;
  border-radius: 10px;
  margin-bottom: 24px;
}

.cardImg {
  background: url("/credit-card.svg") no-repeat;
  font-size: 18px;
  font-weight: 500;
  background-size: 40px;
  background-position: center left;
  padding-left: 40px;
  width: 40px;
  height: 40px;
}

.appleImg {
  background: url("/apple-pay.svg") no-repeat;
  background-size: 40px;
}

.paymentInner {
  padding-top: 20px;
}

/* notFoundWrap start here */

.notFoundWrap {
  max-width: 500px;
  margin: 0px auto;
  text-align: center;
}

.notFoundWrap img {
  max-width: 400px;
  max-height: 400px;
}

.notFoundWrap h3 {
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  padding-top: 30px;
}

/* partner page start here */

.exploreAll {
  padding: 0px;
}

.partnerBanner {
  position: relative;
}

.partnerBanner .partnerContant {
  position: absolute;
  bottom: 20px;
  padding: 50px;
}

.partnerBanner .faq-partnerContant {
  position: absolute;
  bottom: 20px;
  right: 25%;
  left: 25%;
  padding: 50px;
}

.partnerBanner .faq-partnerContant h2 {
  font-size: 40px;
  line-height: 50px;
  font-weight: 700;
  padding-top: 30px;
  color: #fff;
  max-width: 610px;
}

.partnerBanner .partnerContant h2 {
  font-size: 40px;
  line-height: 50px;
  font-weight: 700;
  padding-top: 30px;
  color: #fff;
  max-width: 610px;
}

.partnerBanner img {
  width: 100%;
  max-height: 500px;
  border-radius: 16px;
}

.partnerBox {
  border: 0.96px solid rgba(0, 0, 0, 0.24);
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 4px 20px #00000040;
  text-align: center;
  margin-bottom: 48px;
}

.partnerBox .imgWrap {
  max-width: 200px;
  margin: 30px auto;
}

.linkText {
  color: #b0398d;
  font-size: 23px;
  font-weight: 500;
  /* text-decoration: underline; */
  margin-bottom: 20px;
  display: inline-block;
}

/* instructure page start here */

.exploreAll {
  padding: 0px;
}

.instuBanner {
  position: relative;
  display: flex;
  align-items: center;
}

.instuBanner .instuContant {
  position: absolute;
  padding: 50px;
  z-index: 1;
}

.instuBanner .instuContant h2 {
  font-size: 40px;
  line-height: 50px;
  font-weight: 700;
  padding-top: 30px;
  color: #fff;
  max-width: 640px;
}

.instuBanner .instuContant p {
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
  color: #fff;
  max-width: 700px;
  padding-bottom: 20px;
}

.instuBanner img {
  width: 100%;
  max-height: 550px;
  border-radius: 20px;
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
}

.partnerBox {
  border: 0.96px solid rgba(0, 0, 0, 0.24);
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 4px 20px #00000040;
  text-align: center;
  margin-bottom: 48px;
}

.partnerBox .imgWrap {
  max-width: 200px;
  margin: 30px auto;
}

.linkText {
  color: #b0398d;
  font-size: 23px;
  font-weight: 500;
  /* text-decoration: underline; */
  margin-bottom: 20px;
  display: inline-block;
}

.becomeBox {
  box-shadow: 0px 4px 22.4px 0px #00000040;
  padding: 20px 30px;
  border-radius: 12px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.becomeBox {
  box-shadow: 0px 4px 22.4px 0px #00000040;
  padding: 20px 30px;
  border-radius: 12px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.becomeBox h2 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: #b0398d;
}

.becomeBox p {
  font-size: 16px;
  line-height: 24px;
  padding-top: 10px;
  font-weight: 300;
}

.becomeTrainerRow {
  padding: 0px 40px;
}

/* buildTrust start here */

.buildTrust {
  /* background: url("../assets/images/faq-banner.png") no-repeat center center; */
  background-size: cover;
}

.buildTrust .sectionTitle {
  padding-bottom: 30px;
  text-align: left;
  max-width: 720px;
  margin: 0px auto;
  display: flex;
  gap: 50px;
  align-items: flex-end;
  max-width: 100%;
  justify-content: space-between;
  color: #ffffff;
}

.buildTrust .sectionTitle .title {
  color: #ffffff;
  padding-right: 60px;
}

.buildTrust .impect-item {
  background: none;
}

.buildTrust .impect-item:before {
  background-color: transparent;
}

.buildTrust .impect-item h4 {
  color: #ffffff;
}

.buildTrust .impect-item p {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
}

.startedContent p {
  font-size: 24px;
  line-height: 34px;
  padding-bottom: 24px;
}

.startedContent .aboutList li {
  margin-bottom: 10px;
}

.startprocess .getprocess {
  display: flex;
  align-items: center;
  padding-bottom: 30px;
  justify-content: center;
  gap: 40px;
}

.startprocess .getprocess li {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
}

.startprocess .getprocess li i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid #b0398d;
  color: #080809;
  border-radius: 50%;
  font-weight: 500;
}

.startprocess .getprocess li.active {
  color: #b0398d;
}

.startprocess .getprocess li.active i {
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  color: #ffffff;
  border: none;
}

.startprocess .getprocess li i:before {
  content: "";
  z-index: -1;
  top: 2px;
  border-radius: 20px;
  left: 3px;
  position: absolute;
  background: #fff;
  width: calc(100% - 5px);
  height: calc(100% - 4px);
}

.startprocess {
  padding-bottom: 30px;
}

/* Contact start here */

.ContactBanner {
  position: relative;
  padding-bottom: 0px;
}

.ContactBanner::after {
  content: "";
  background-image: url("/conatct-bg.png");
  width: 100%;
  height: 900px;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  z-index: 1;
}

.ContactBanner .sectionTitle {
  color: #ffffff;
  position: relative;
  z-index: 11;
}

.contactForm {
  background-color: #fff;
  padding: 40px;
  border-radius: 8px;
  max-width: 90%;
  margin: 50px auto;
  border: 1.5px solid rgba(0, 0, 0, 0.24);
  box-shadow: 0px 13.45px 47.08px 0px rgba(0, 0, 0, 0.03);
  position: relative;
  z-index: 11;
}

.contactForm .form-control {
  background: none;
  transition: all 0.4s;
  height: 50px;
  border-radius: 8px;
  padding-left: 20px;
  border: 1.35px solid rgba(0, 0, 0, 0.4);
}

.contactForm .form-group {
  margin-bottom: 1.5rem;
}

.contactForm textarea {
  min-height: 120px;
  resize: none;
}

.contactInfo {
  text-align: center;
}

.contactInfo span {
  display: block;
}

.contactInfo .image-div {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contactInfo .icon {
  padding-bottom: 16px;
}

.contactMap {
  padding-top: 0px;
}

.blogBannerBordr {
  box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 16px;
  overflow: hidden;
}

.blogConatnt .articleBtn {
  background: rgba(176, 57, 141, 1);
  padding: 10px 20px;
  display: inline-block;
  color: #fff;
  font-size: 16px;
  border-radius: 16px;
  font-weight: 500;
  margin-bottom: 30px;
}

.blogConatnt {
  padding: 24px;
}

.blogConatnt h3 {
  font-size: 24px;
  line-height: 36px;
  font-weight: 600;
}

.blogConatnt p {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  padding-top: 10px;
}

.autharwrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 40px;
}

.autharwrap .autharImg {
  display: flex;
  align-items: center;
  gap: 16px;
}

.autharwrap .autharImg img {
  max-width: 50px;
  max-height: 50px;
}

.autharwrap .autharImg h5 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
}

.autharwrap .createDate {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}

.allArticle {
  padding: 0px 0px 32px;
}

.articleBox {
  border: 2px solid rgba(0, 0, 0, 0.24);
  padding: 10px;
  border-radius: 10px;
  position: relative;
  margin-bottom: 24px;
  height: 450px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.articleBox:hover {
  background-color: #f0f0f0;
  cursor: pointer;
}

.imgWrap {
  position: relative;
}

.articleBox .articleBtn {
  background: rgba(176, 57, 141, 1);
  padding: 8px 20px;
  display: inline-block;
  color: #fff;
  font-size: 12px;
  border-radius: 12px;
  font-weight: 500;
  position: absolute;
  top: 10px;
  left: 10px;
}

.blogBannerBordr:hover {
  background-color: #f0f0f0;
  cursor: pointer;
}

.articleContant {
  padding-top: 12px;
}

.articleContant h3 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
}

.articleContant p {
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  padding-top: 6px;
}

.loadMore {
  padding: 20px 0px;
  text-align: center;
}

.detailContant {
  padding-bottom: 40px;
}

.detailContant h3 {
  font-size: 24px;
  line-height: 36px;
  font-weight: 600;
}

.detailContant p {
  font-size: 16px;
  line-height: 24px;
  padding-top: 10px;
}

.writeSection {
  padding-top: 0px;
}

.autharBoxBorder {
  border: 2px solid rgba(0, 0, 0, 0.24);
  padding: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  width: 100%;
}

.autharBoxBorder .autharImg {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 24px;
}

.autharBoxBorder .autharImg h5 {
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
}

.autharBoxBorder .writeText {
  max-width: 300px;
}

.autharBoxBorder .shareBtn {
  margin-top: 0px;
}

.recentArticle {
  padding: 30px;
}

.recentArticle h3 {
  font-size: 24px;
  line-height: 36px;
  font-weight: 600;
  padding-bottom: 10px;
}

.recentArticle ul li {
  line-height: 28px;
}

.recentArticle ul li a {
  color: rgba(29, 15, 191, 1);
}

.shareBlog {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 20px;
  padding-top: 30px;
}

.shareBlog .shareBtn {
  margin-top: 0px;
}

.shareBlog .shareIcon {
  display: flex;
  align-items: center;
  justify-content: right;
  gap: 10px;
}

.shareBlog .shareIcon li {
  line-height: 0px;
}

.shareBlog .shareIcon img {
  max-width: 48px;
  height: 48px;
}

/* student question */

.learnAbout {
  padding-top: 28px;
}

.questionBtn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
}

.subTitle {
  font-size: 18px;
  font-weight: 400;
  padding-bottom: 8px;
}

.questionImg img {
  max-width: 80%;
  float: right;
}

.learnAbout .radio-buttons {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.learnAbout .custom-radio {
  position: relative;
}

.learnAbout .custom-radio {
  display: block;
}

.learnAbout .custom-radio input {
  display: none;
}

.learnAbout .radio-btn {
  margin: 12px 0px;
  width: 100%;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  border: 1px solid #00000080;
  background-color: #e4ccdd33;
  padding: 12px;
  display: flex;
  align-items: center;
}

.learnAbout .radio-btn .hobbies-icon {
  display: flex;
  align-items: center;
  gap: 20px;
}

.learnAbout .radio-btn .hobbies-icon img {
  border: 1px solid #b0398d;
  padding: 6px;
  border-radius: 12px;
}

.learnAbout .radio-btn .hobbies-icon i {
  color: #ffdae9;
  line-height: 80px;
  font-size: 60px;
}

.learnAbout .radio-btn .hobbies-icon {
  color: #000000;
  font-size: 16px;
  font-weight: 500;
}

.learnAbout .radio-btn .hobbies-icon h3 {
  color: #000000;
  font-size: 16px;
  font-weight: 500;
}

.learnAbout .radio-btn>i {
  color: #ffffff;
  background: url("/radio-icon.svg") no-repeat center left;
  font-size: 20px;
  position: relative;
  top: 0px;
  left: 0;
  transform: translateX(-50%) scale(2);
  border-radius: 50px;
  padding: 3px;
  transition: 0.5s;
  pointer-events: none;
  width: 14px;
  height: 14px;
  background-size: 10px;
}

.learnAbout .custom-radio input:checked+.radio-btn {
  background-color: #f2d4e9;
}

.learnAbout .custom-radio input:checked+.radio-btn>i {
  opacity: 1;
  background: url("/radio-fill-icon.svg") no-repeat center left;
  width: 14px;
  height: 14px;
  background-size: 10px;
}

.learnAbout .student-radio .radio-btn {
  padding-left: 30px;
}

.quiz-question .learnAbout .student-radio {
  gap: 16px;
  margin-bottom: 0px;
}

.quiz-question .learnAbout .student-radio .radio-btn {
  top: auto;
  display: flex;
  align-items: center;
  padding: 10px 20px 10px 30px;
  justify-content: center;
  gap: 10px;
}

.quiz-question .learnAbout .student-radio {
  gap: 0 16px;
  flex-wrap: wrap;
}

.quiz-question {
  padding-top: 10px;
}

/* purchase Details section start here */

.description {
  padding-top: 24px;
}

.courseOverview .instructorOverview {
  background: #ffffff;
  box-shadow: 0px 4px 40px 0px #00000040;
  padding: 20px;
  border-radius: 12px;
}

.courseOverview .instuImg {
  max-width: 150px;
  min-height: 150px;
  min-width: 150px;
}


.courseOverview .instuImg img {
  width: 100%;
}

.courseOverview .courseItems {
  background: #ffffff;
  box-shadow: 0px 4px 40px 0px #00000040;
  padding: 20px;
  border-radius: 12px;
  margin-top: 24px;
}

.courseOverview .course-review {
  display: flex;
  align-items: center;
  padding-top: 6px;
  flex-wrap: wrap;
  gap: 14px 20px;
  justify-content: left;
}

.courseOverview .course-review li {
  min-width: 30%;
}

.hour-min {
  font-size: 13px;
  line-height: 20px;
  color: #000;
  background: url("/clock-icon.svg") no-repeat;
  padding-left: 22px;
  background-size: 18px;
  background-position: 0;
}

.lang {
  font-size: 13px;
  line-height: 20px;
  color: rgb(0, 0, 0);
  padding-left: 22px;
  background: url("/globe.svg") 0px center / 18px no-repeat;
  background-position: 0px center;
}

.diffi {
  font-size: 13px;
  line-height: 20px;
  color: rgb(0, 0, 0);
  padding-left: 22px;
  background: url("/diff-question.svg") 0px center / 18px no-repeat;
  background-position: 0px center;
}

ul.descList {
  list-style: disc;
  padding-left: 16px;
}

ul.descList {
  list-style: disc;
  padding-left: 16px;
}

ul.descList li {
  font-size: 14px;
  line-height: 24px;
  padding-bottom: 6px;
}

.purchaseReview {
  max-width: 1000px;
  margin: 0 auto;
}

.reviewFilter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.searchInput {
  position: relative;
  width: 100%;
  margin-top: 20px;
}

.searchInput input {
  display: block;
  width: 100%;
  background: none;
  border: 2px solid #b0398d;
  border-radius: 16px;
  padding: 12px 50px 10px;
  height: 50px;
  font-size: 15px;
}

.searchInput [type="submit"] {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  transform: translateY(-50%);
  left: 16px;
  width: 44px;
  height: 44px;
  border: none;
  padding: 0 0;
  font-size: 20px;
  background: url("/search.svg") no-repeat center left;
}

.sortBy select {
  display: block;
  width: 100%;
  background: none;
  border: 2px solid #b0398d;
  border-radius: 16px;
  padding: 12px 16px;
  height: 50px;
  font-size: 15px;
  background: url(/arrow-down.svg) no-repeat center right 10px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.sortBy {
  min-width: 160px;
}

.subHeading {
  font-size: 24px;
  font-weight: 500;
}

.purchaseDetailsTop {
  padding: 30px 0px;
}

.purchaseVidoo .courseName {
  padding-top: 10px;
}

.purchaseShedule {
  max-height: 475px;
  overflow: auto;
  padding-right: 16px;
  margin-bottom: 20px;
}

.newLession {
  padding-bottom: 12px;
  font-size: 20px;
  font-weight: 600;
}

.courseTabs {
  position: relative;
}

.saveShare {
  display: flex;
  align-items: center;
  gap: 10px;
  position: absolute;
  right: 12px;
  top: -14px;
}

.earnComplete {
  border: 1px solid #000000;
  padding: 10px 20px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.earnComplete label {
  font-size: 13px;
  padding-bottom: 8px;
}

.earnImg {
  max-width: 60px;
}

.earnComplete progress {
  vertical-align: baseline;
  width: 89%;
  margin-right: 10px;
}

.becomeToday {
  padding-top: 0px;
}

.timeline {
  position: relative;
  padding: 20px 0;
}

/* Circles for each year */
.circle {
  width: 70px;
  height: 70px;
  background-color: #9b1c75;
  /* Pink background */
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

/* Popover Customization */
.popover {
  background-color: #b13f98 !important;
  color: white !important;
  border-radius: 10px;
  max-width: 250px;
  text-align: center;
}

.popover-header {
  background-color: transparent !important;
  border-bottom: none;
  font-size: 18px;
  font-weight: bold;
}

.popover-body {
  font-size: 14px;
}

.bs-popover-auto[data-popper-placement^="top"]>.popover-arrow::before {
  border-top-color: #b13f98 !important;
}

/* Connectors between years */
.circle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 40px;
  height: 3px;
  background-color: black;
  transform: translateY(-50%);
}

.circle:last-child::before {
  display: none;
}

/* Lines for second row */
.row:nth-child(2) .circle::before {
  top: -25px;
  left: 50%;
  width: 3px;
  height: 25px;
}

.manual-box {
  display: flex;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px 16px;
  max-width: 100%;
  margin-top: 16px;
  margin-bottom: 16px;
}

.manual-box .pdf-icon {
  color: #f44336;
  font-size: 24px;
  margin-right: 12px;
}

.manual-box .manual-name {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  padding-left: 12px;
}

.manual-box .download-icon {
  font-size: 18px;
  color: #000;
  cursor: pointer;
}

.manual-box .download-icon:hover {
  opacity: 0.7;
}

.quiz-container {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  max-width: 100%;
  margin: auto;
  padding: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.quiz-container .question-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.quiz-container label {
  width: 100%;
}

.quiz-container .question-text {
  font-size: 18px;
  margin-bottom: 20px;
}

.quiz-container .option {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 2px solid #ccc;
  line-height: 20px;
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.quiz-container .option:hover {
  border-color: #b33a9b;
  background-color: #fbe9f3;
}

.quiz-container input[type="radio"] {
  display: none;
}

.quiz-container input[type="radio"]:checked+.option {
  border-color: #b33a9b;
  background-color: #fbe9f3;
}

.quiz-container .radio-custom {
  height: 20px;
  min-width: 20px;
  border: 3px solid #b33a9b;
  border-radius: 50%;
  margin-right: 15px;
  position: relative;
}

.quiz-container input[type="radio"]:checked+.option .radio-custom::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  background-color: #b33a9b;
  border-radius: 50%;
}

.answerLabel {
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
  padding-bottom: 10px;
}

.addFormBtn.quizBtn {
  margin-top: 20px;
  justify-content: flex-end;
}

.quiz-container .badge {
  padding: 6px 14px;
  font-size: 13px;
  position: relative;
  left: 10px;
}

.Selected {
  background-color: #81828433;
  color: #818284;
  border: 1px solid #818284;
}

.startQuiz {
  position: relative;
  z-index: 11;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.startQuiz .skipLectureText {
  font-size: 18px;
  font-weight: 600;
  line-height: 18px;
  padding-top: 16px;
}

/* quiz-results start here */

.quiz-results {
  max-width: 100%;
}

.quiz-results .quiz-header {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quiz-results .check-answer {
  float: right;
  color: #b03a8c;
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
}

.quiz-results .result-banner {
  background-color: #fbe6f4;
  color: #a13d91;
  padding: 15px;
  margin: 10px 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  font-weight: bold;
  width: 100%;
  gap: 10px;
}

.quiz-results .result-banner i {
  background-color: #4caf50;
  color: white;
  border-radius: 50%;
  padding: 0px;
  font-style: normal;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
}

.quiz-results .details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  margin-top: 10px;
}

.quiz-results .passed {
  color: #4caf50;
  border: 1px solid #4caf50;
  padding: 12px 16px;
  border-radius: 20px;
  font-weight: 500;
}



/* Custom Popover Styling */

.custom-popover {
  background-color: #9b288d !important;
  /* Purple background */
  color: #fff !important;
  border-radius: 3px;
  padding: 6px;
  max-width: 310px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
}

.custom-popover .popover-header {
  background: transparent;
  border-bottom: none;
  font-size: 18px;
  font-weight: bold;
}

/* For Bootstrap 5 Popover Arrow Background */
.custom-popover.bs-popover-top>.popover-arrow::before {
  border-top-color: #9b288d !important;
}

.custom-popover.bs-popover-bottom>.popover-arrow::before {
  border-bottom-color: #9b288d !important;
}

.custom-popover.bs-popover-start>.popover-arrow::before {
  border-left-color: #9b288d !important;
}

.custom-popover.bs-popover-end>.popover-arrow::before {
  border-right-color: #9b288d !important;
}

.custom-popover .popover-arrow::after {
  border-color: transparent !important;
}

.custom-popover .popover-body {
  font-size: 14px;
  font-weight: normal;
  color: #fff;
}

.popover-content {
  padding: 5px;
}

.popover-title {
  font-size: 16px;
  font-weight: 500;
  /* margin-bottom: 5px; */
  color: #fff;
}

.popover-description {
  font-size: 10px;
  font-weight: 500;
  color: #fff;
}

/* Timeline Container */
.timeline-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  margin: 25px auto;
  margin-top: 100px;
}

/* Timeline Items */
.timeline-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  /* Adjust for spacing */
  height: 70px;
}

/* Top Row Alignment */
.timeline-item.top {
  align-self: flex-start;
}

/* Bottom Row Alignment */
.timeline-item.bottom {
  align-self: flex-end;
  margin-top: 40px;
  /* Offset for Zig-Zag Effect */
}

.circle:hover {
  transform: scale(1.1);
}

/* Central Horizontal Line */
.timeline-horizontal-line {
  position: absolute;
  top: 50%;
  left: 12.5%;
  width: 75.2%;
  height: 1px;
  height: 0;
  /* Remove height */
  border-top: 1px dashed lightgrey;
  z-index: 1;
}

/* Top Circles */
.timeline-item.top {
  align-self: flex-start;
  padding-bottom: 90px;
}

/* Bottom Circles */
.timeline-item.bottom {
  align-self: flex-end;
  margin-top: 40px;
  padding-top: 90px;
}

/* Vertical Connecting Line */
.timeline-vertical-line {
  width: 0;
  /* Remove width */
  height: 40px;
  border-left: 1px dashed lightgrey;
  /* Dashed vertical line */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.testimonial-container {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  margin-top: -30px;
}

.testimonial-card {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  background: white;
  border-radius: 12px;
  overflow: hidden;
  max-width: 750px;
  height: 400px;
}

.testimonial-content {
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  color: white;
  padding: 40px;
  max-width: 50%;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 350px;
  width: 450px;
}

.testimonial-content p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 30px;
}

.quote-icon {
  margin-bottom: 10px;
}

.testimonial-content .author {
  font-weight: 700;
  margin-bottom: 5px;
}

.testimonial-content .designation {
  font-size: 14px;
  opacity: 0.8;
}

.testimonial-image {
  width: 300px;
  /* Fixed width */
  height: 400px;
  /* Fixed height */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  background-color: #f0f0f0;
  /* Optional: Background color */
}

.testimonial-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ensures the image fully covers the section */
  border-radius: 12px;
}

@media (max-width: 768px) {
  .testimonial-card {
    flex-direction: column;
    max-width: 90%;
  }

  .testimonial-content,
  .testimonial-image {
    width: 100%;
    border-radius: 0;
  }
}

.nav-buttons {
  display: flex;
  gap: 5px;
  margin: 20px;
  position: absolute;
  right: 50px;
}

.nav-buttons button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: white;
  cursor: pointer;
  transition: 0.3s;
  border: none;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.noRecordFound {
  text-align: center;
  padding: 20px;
  font-size: 19px;
}


/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 28px;
}

.slider::before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

/* Checked state */
input:checked+.slider {
  background: linear-gradient(135deg, #d47ab3, #b44694);
}

input:checked+.slider::before {
  transform: translateX(22px);
}

/* Optional: Rounded switch */
.slider.round {
  border-radius: 34px;
}

.slider.round::before {
  border-radius: 50%;
}

.left-btn {
  background: linear-gradient(135deg, #d47ab3, #b44694);
}

.right-btn {
  background: linear-gradient(135deg, #b44694, #8a1d74);
}

.dashBoardSideBar {
  border-right: 1px solid #0000003d;
  padding: 24px 10px 10px;
  width: 282px;
  background-color: #fff;
  position: fixed;
  top: 140px;
  left: 0;
  height: 100vh;
}

.dashBoardSideBar ul {
  overflow: auto;
  max-height: 74vh;
  scrollbar-width: thin;
  padding-bottom: 20px;
  /* For Firefox */
  scrollbar-color: #d48ab3 transparent;
}

.dashBoardSideBar ul::-webkit-scrollbar {
  height: 4px;
  /* ↓ reduced scrollbar height */
}

.dashBoardSideBar ul::-webkit-scrollbar-thumb {
  background: #d48ab3;
  border-radius: 10px;
}

.dashBoardSideBar ul li {
  padding-bottom: 20px;
  padding: 4px 8px;
}

.dashBoardSideBar ul li a.active {
  background: #efd7e8;
  border-radius: 10px;
}

.ticketCreate textarea {
  min-height: 150px;
  resize: none;
}

.ticketCreate .modal-body {
  padding: 20px 40px;
}

.ticketCreate .modal-header {
  padding: 16px 40px;
}

.ticketCreate .modal-header .btn-close {
  top: 20px;
  right: 15px;
  width: 24px;
  height: 24px;
}

.groupBtn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.modal-title {
  font-weight: 600;
}

.bagde.completed {
  background: #efd7e8;
  padding: 10px 20px;
  color: #1b1818;
  border-radius: 10px;
  font-size: 14px;
}

.bagde.completed strong {
  font-weight: 600;
}

.upload-wrapper {
  max-width: 100%;
}

.upload-label {
  display: block;
  font-weight: 500;
  margin-bottom: 8px;
  font-size: 16px;
}

.chat-input .upload-container {
  border: none;
}


.upload-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #0006;
  border-radius: 10px;
  padding: 8px 16px;
}

.file-name {
  flex-grow: 1;
  color: #333;
  font-size: 16px;
}

.browse-button {
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  color: #f1dced;
  padding: 12px 20px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 500;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.chatBtnWrap .file-name {
  display: none;
}

.upload-container input[type="file"] {
  display: none;
}

/* .dashBoardSideBar ul li a.active img{

} */

.dashBoardSideBar ul li a:hover {
  background: #efd7e8;
  border-radius: 10px;
}

.dashBoardSideBar ul li a img {
  max-width: 24px;
  max-height: 24px;
}

.dashBoardSideBar ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #000000;
  padding: 10px 10px;
}

.dashTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

.courseWrapper .courseDashCard {
  /* KEEP everything as-is */
  box-shadow: 0px 4px 24px 0px #00000040;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #00000080;
  text-align: center;
  width: 100%;
  height: 180px;
}


.courseWrapper .courseDashCard h3 {
  font-size: 24px;
  padding: 6px 0px;
  font-weight: 600;
  line-height: 1;
}


.courseWrapper .courseDashCard p {
  font-size: 16px;
  line-height: 22px;

  /* 🔒 Prevent overflow */
  max-height: 44px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}


.courseWrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 32px;
  margin-bottom: 32px;
}

.courseCard {
  display: flex;
  align-items: center;
  gap: 30px;
  border: 1px solid #000000;
  margin-bottom: 24px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}

.courseCard .courseImg img {
  border-radius: 24px 0px 0px 24px;
  max-width: 100%;
  object-fit: cover;
}

.courseCard ul {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.courseContant {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  padding-right: 20px;
  gap: 20px;
}

.facilityContant {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0px 20px 0px 0px;
}

.facilityContant ul {
  width: 100%;
}

.facilityContant ul li {
  width: 100%;
}

.facilityContant p {
  padding-bottom: 0px;
}

.courseContant .coursePrice,
.courseContant .courseDuration {
  max-width: 160px;
}

.courseCard .contantText h3 {
  font-size: 20px;
  line-height: 28px;
  color: #000000;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}

.courseCard .contantText p {
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  font-weight: 200;
  padding-top: 4px;
  min-width: 100px;
}

.courseDeleteIcon {
  background-color: rgb(247 247 247 / 76%);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 11;
  left: 0;
  right: 0;
  opacity: 0;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 20px;
  gap: 16px;
}

.courseCard:hover .courseDeleteIcon {
  opacity: 1;
  z-index: 2;
}

.removeBtnModal {
  position: relative;
  z-index: 11;
  justify-content: center;
  gap: 12px;
}

.removeBtn {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 8px;
  color: #000;
}

.preRecorded {
  display: inline-block;
  margin-top: 8px;
  border: 1px solid #ddd;
  font-size: 13px;
  padding: 4px 12px;
  background: #efd7e8;
  border-radius: 8px;
}

.status {
  padding: 4px 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  font-size: 12px;
  color: #fff;
  margin-top: 10px;
  font-weight: 500;
  gap: 7px;
  margin-left: 2px;
  margin-right: 2px;
}

.status span {
  width: 12px;
  height: 12px;
  background-color: #ffffff;
  border-radius: 50%;
  display: inline-block;
}

.status.active {
  background-color: #68dd0f;
}

.status.draft {
  background-color: #dda30f;
}

.status.pending {
  background-color: #78756e;
}

.status.reject {
  background-color: #ff3b30;
}

.status.rejected {
  background-color: #ff3b30;
}

.status.scheduled {
  background-color: #68dd0f;
}

.status.approved {
  background-color: #dda30f;
}

.status.completed {
  background-color: green;
}

.status.success {
  background-color: green;
}

.status.declined {
  background-color: #ff3b30;
}

.status.facility_approval_pending {
  background-color: #b0398d;
}

.status.pay_for_facility {
  background-color: #68dd0f;
}

.status.expired {
  background-color: black;
}

.status.removed {
  background-color: black;
}

.dashboardFilter {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 0px;
  justify-content: right;
}

.dashboardFilter .select-item {
  border: 2px double #b0398d;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;

  min-width: 120px;
  width: max-content;
  /* 👈 key */
  max-width: 100%;

  background-image: linear-gradient(#fff, #fff),
    radial-gradient(circle at 0 0, red, #3020ff);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

.select-item.sessionType {
  min-width: 170px;
}

.dashboardFilter .form-control {
  transition: all 0.4s;
  height: 50px;
  border-radius: 20px;
  padding-left: 10px;
  padding-right: 50px;
  border: none;
}

.dashboardFilter .menu-search-form {
  border: 2px double #b0398d;
  border-radius: 20px;
  display: inline-block;
  background-image: linear-gradient(#fff, #fff),
    radial-gradient(circle at 0 0, red, #3020ff);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

.courseTab li.nav-item {
  width: 100%;
  display: inline-block;
  padding: 6px 0px;
}

.courseTab li.nav-item .nav-link {
  color: #000 !important;
  border: none;
}

.courseTab .nav-tabs {
  border: none;
  padding: 24px 0px;
}

.courseTab li.nav-item .nav-link.active {
  background-color: #efd7e8 !important;
  color: #000 !important;
  border-radius: 4px;
  border: none;
}

.courseTab .nav-tabs li .active:after {
  border: none;
}

.teacherHelpCenter {
  box-shadow: 0px 4px 12px 0px #00000033;
  border: 1.9px solid #0000003d;
  border-radius: 24px;
  padding: 24px 40px;
  margin-bottom: 24px;
}

.helpCenterLeft h3 {
  font-size: 20px;
  font-weight: 400;
  background: url("/help-icon.svg") no-repeat center left;
  padding-left: 40px;
  background-size: 28px;
}

.helpCenterLeft p {
  font-size: 14px;
  line-height: 26px;
  color: #000000;
  padding-top: 12px;
  max-width: 500px;
}

.helpCenterRight ul li {
  padding: 4px 0px;
}

.helpCenterRight ul li a {
  font-size: 16px;
  background: url("/help-notes.svg") no-repeat center left;
  padding-left: 30px;
  background-size: 20px;
  color: #3949b0;
}

.helpBtnRight {
  text-align: right;
  padding-top: 24px;
}

.courseRight {
  padding: 50px 24px;
  width: 100%;
}

.courseRight .headingTitle {
  font-size: 22px;
  font-weight: 600;
  line-height: 32px;
  padding-bottom: 0;
}

.addCourseForm {
  box-shadow: 0 4px 12px #0003;
  border: 1.9px solid #0000003d;
  border-radius: 24px;
  padding: 24px 40px;
  margin-bottom: 30px;
}

.courseType {
  margin-bottom: 20px;
}

.addCourseForm label {
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
  padding-bottom: 10px;
  display: block;
}

.addCourseForm .form-group span {
  font-size: 13px;
  padding-bottom: 4px;
  /* display: inline-block; */
  position: relative;
  top: -5px;
}

.addCourseHeading {
  padding-bottom: 24px;
}

.courseType p {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  padding-bottom: 10px;
}

.profileForm .courseType .form-control {
  width: 250px;
}

.coursePreview {
  padding: 30px 18px;
}

.coursePreview p {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  padding-bottom: 10px;
}

.coursePreview ul {
  list-style: disc;
  padding-left: 17px;
}

.coursePreview ul li {
  color: #121417;
  line-height: 27px;
  font-size: 16px;
}

.addFormBtn {
  text-align: center;
}

.addFaqHead {
  display: flex;
  align-items: center;
  gap: 30px;
  justify-content: space-between;
  padding-bottom: 24px;
}

.addFaqHead .addFaqText {
  max-width: 760px;
}

.trashIcon {
  background: url("/trash.svg") no-repeat center;
  width: 20px;
  height: 20px;
  background-size: 20px;
  float: right;
  display: inline-block;
  font-size: 0px;
}

.addCourseForm .faqSection input {
  margin-bottom: 20px;
}

.form-group.faqSection {
  margin-bottom: 24px;
}

.profileForm .faqSection textarea {
  min-height: 90px;
}

.newAddDelete {
  position: relative;
  z-index: 1;
}

.courseRight .addFormBtn {
  padding-bottom: 3px;
}

.addFormBtn {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.addFormBtn .btnGradient {
  min-width: 116px;
}

.resumeCard {
  background: #efd7e8;
  border: 1px solid #00000080;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.resumeCard .form-control {
  background-color: #ffffff;
}

.formBtn .btnBorder {
  border-radius: 24px;
  background-color: #ffffff;
}

.newAddDelete {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-top: 16px;
}

.formBtn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.editIcon {
  background: url("/edit-icon.svg") no-repeat center;
  width: 16px;
  height: 16px;
  display: inline-block;
  background-size: 16px;
}

.deleteIcon {
  background: url("/trash.svg") no-repeat center;
  width: 16px;
  height: 16px;
  display: inline-block;
  background-size: 16px;
  margin-left: 10px;
}

.subItem {
  padding-top: 20px;
}

.closeIcon {
  background: url("/close-circle.svg") no-repeat center;
  width: 40px;
  height: 40px;
  display: inline-block;
  background-size: 40px;
}

.editDelete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 16px;
  padding-bottom: 16px;
  position: relative;
  z-index: 1;
}

.editDelete h3 {
  font-size: 20px;
  text-transform: capitalize;
}

.editDelete label {
  padding-bottom: 0px;
}

.addVideoWrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.UploadVideo {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.arrowBottom {
  background: url("/arrow-bottom.svg") no-repeat center center;
  width: 20px;
  height: 20px;
}

.uploadVideoWrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(0, 0, 0, 0.24);
  background-color: #ffffff;
  padding: 10px 20px;
  border-radius: 12px;
  margin-top: 16px;
  position: relative;
  z-index: 1;
}

.uploadVideoWrap .btnBorder {
  height: 40px;
  line-height: 40px;
  padding: 0px 16px;
}

.uploadTitle {
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 16px;
}

.uploadVideoBordr {
  border-top: 1px solid #0000003d;
  padding-top: 20px;
  margin-top: 20px;
}

.btnBorder.plusAdd {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #000000;
  background-color: #ffffff;
  border-radius: 24px;
}

.courseQuiz {
  border: 1px solid #00000080;
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.courseQuiz .editDelete {
  padding-bottom: 0px;
  padding-top: 0px;
}

.courseQuiz .learnAbout {
  padding-top: 0px;
  padding-bottom: 16px;
}

.courseQuiz .learnAbout label {
  padding-bottom: 0px;
}

.courseQuiz .learnAbout .radio-btn .hobbies-icon {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
}

.coursePreview input[type="file"] {
  margin: auto;
  padding: 2em;
  border: 2px dashed #bbb;
  background-color: #fff;
  min-height: 140px;
  transition: border-color 0.25s ease-in-out;
  margin-top: 20px;
}

.coursePreview input[type="file"]::file-selector-button {
  padding: 1em 1.5em;
  border-width: 0;
  border-radius: 2em;
  background-color: rgba(176, 57, 141, 1);
  color: #dbe6f0;
  transition: all 0.25s ease-in-out;
  cursor: pointer;
  margin-right: 1em;
}

.coursePreview input[type="file"]:hover {
  border-color: #888;
}

.coursePreview input[type="file"]:hover::file-selector-button {
  background-color: rgba(176, 57, 141, 1);
}

.bookFacility .filter-wrapper {
  box-shadow: none;
  width: 100%;
  padding: 16px 0px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 auto;
}

.bookHeading {
  font-size: 20px;
  font-weight: 600;
}

.sorryText {
  font-size: 28px;
  font-weight: 600;
  line-height: 40px;
  padding: 10px 0px;
}

.facilityList .facProductImg {
  max-width: 600px;
  min-width: 450px;
}

.facilityList .facilityProduct {
  border: 1.4px solid rgba(191, 43, 145, 1);
  padding: 20px;
}

.ContantLeft .list {
  padding-top: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.ContantLeft .list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.amenities {
  font-size: 20px;
  font-weight: 500;
}

.amenitiesList {
  padding-top: 20px;
}

.capicityWrap {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
  padding-top: 20px;
  text-transform: capitalize;
}

.capicity {
  background: rgba(190, 40, 144, 0.12);
  padding: 10px 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.facilityList .ContantLeft {
  width: 100%;
}

.facilityList {
  padding-top: 24px;
}

.roomHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
}

.roomHeader .roomTitle {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}

.roomHeader .shareBtn {
  margin-top: 0px;
}

.amenitiesList.ContantLeft {
  max-width: 500px;
}

.workShopBooking {
  max-width: 550px;
}

.roomBooking {
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  padding: 24px;
  border: 1px solid rgba(0, 0, 0, 0.28);
  border-radius: 12px;
}

.roomBooking .btnGradient {
  width: 100%;
  text-align: center;
}

.bookingForm {
  border: 1px solid rgba(0, 0, 0, 1);
  border-radius: 10px;
  margin: 20px 0px;
}

.bookingForm .dateDuration {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 1);
}

.bookingForm .maxCapicity .maxUser {
  background: url("/user-group.svg") no-repeat center left;
  padding-left: 26px;
  font-weight: 500;
  background-size: 20px;
}

.bookingForm .lms-check-group label:before {
  margin-right: 0px;
}

.bookingForm .duration:last-child {
  border: none;
}

.maxCapicity {
  padding: 20px 20px;
  border-bottom: 1px solid #000;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.maxCapicity span {
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
}

.maxCapicity.catering {
  border: none;
}

.bookingForm .duration {
  padding: 20px;
  margin-bottom: 0px;
  width: 50%;
}

.bookingForm .dateDuration .form-control {
  border: none;
  padding: 0px;
  height: auto;
}

.duration {
  padding: 20px;
  border-right: 1px solid rgba(0, 0, 0, 1);
}

/* availabitySlot start here */
.availabitySlot {
  box-shadow: 0 4px 4px #00000040;
  padding: 24px;
  border: 1px solid #00000047;
  border-radius: 12px;
  margin-top: 24px;
}

.availabitySlot .slot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0px;
  flex-wrap: wrap;
}

.availabitySlot .slot li {
  background: rgba(190, 40, 144, 0.12);
  border: 1px solid rgba(191, 43, 145, 1);
  font-size: 16px;
  color: #000000;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 12px;
}

.availabitySlot .slot li.active {
  background: rgba(190, 40, 144, 1);
  color: #ffffff;
}

.availabitySlot .slot li.disabled {
  color: #999;
  background-color: #f5f5f5;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
  border: 1px solid #ddd;
}

.availabitySlot .btnGradient {
  width: 100%;
  text-align: center;
}

/* My Facilities Booking  start here*/

.facilitySection {
  padding-top: 20px;
}

.myFaciHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 32px;
  flex-wrap: wrap;
  gap: 20px;
}

.myFaciHeader .myBooking {
  background: url("/my-booking.svg") no-repeat center left;
  padding-left: 40px;
  background-size: 30px;
  font-size: 26px;
  font-weight: 500;
}

.bookingWrap {
  padding-top: 12px;
}

.bookingWrap .bookingDate {
  background: rgba(190, 40, 144, 0.12);
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 12px;
  margin-top: 10px;
  display: table;
}

.bookingWrap .bookingDate span {
  font-weight: 600;
}

/* Radio Container */
.radio-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Radio Option */
.radio-container .radio-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 15px;
  border: 1.13px solid rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: 0.3s ease;
}

/* Hide Default Radio */
.radio-container .radio-option input {
  display: none;
}

/* Content Layout */
.radio-container .radio-option .content {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Icon Box */
.radio-container .icon {
  width: 40px;
  height: 40px;
  background: #f2e6f3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.radio-container .icon img {
  width: 24px;
  height: 24px;
}

.radio-container .icon span {
  font-size: 18px;
  font-weight: bold;
}

/* Custom Radio Button */
.radio-container .custom-radio {
  width: 18px;
  height: 18px;
  border: 2px solid #a02d8d;
  border-radius: 50%;
  position: relative;
}

/* Checked State */
.radio-container .radio-option input:checked+.content+.custom-radio {
  border-color: #a02d8d;
}

.radio-container .radio-option input:checked+.content+.custom-radio::after {
  content: "";
  width: 10px;
  height: 10px;
  background: #a02d8d;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Active State */
.radio-container .radio-option input:checked~.radio-option {
  border-color: #a02d8d;
  box-shadow: 0 0 10px rgba(160, 45, 141, 0.3);
}

/* Arrow for other methods */
.radio-container .arrow {
  font-size: 18px;
  font-weight: bold;
}

/* .term-Contant start here */

.termHeading {
  font-size: 50px;
  line-height: 58px;
  font-weight: 700;
  padding-bottom: 32px;
  text-align: center;
}

.term-Contant {
  padding: 20px 0px;
}

.term-Contant h3 {
  font-size: 24px;
  font-weight: 600;
}

.term-Contant p {
  font-size: 16px;
  line-height: 24px;
  padding-top: 16px;
}

.custom-radio {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.custom-radio li {
  display: inline-block;
  margin-right: 16px;
}

.custom-radio [type="radio"]:checked,
.custom-radio [type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

.workshop-radio [type="radio"]:checked,
.workshop-radio [type="radio"]:not(:checked) {
  position: absolute;
  left: 0px;
}


.custom-radio [type="radio"]:checked+label,
.custom-radio [type="radio"]:not(:checked)+label {
  position: relative;
  padding-left: 24px;
  cursor: pointer;
  line-height: 20px;
  display: inline-block;
  color: #000000;
  font-size: 16px;
  padding-bottom: 0px;
  font-weight: 500;
}

.custom-radio [type="radio"]:checked+label:before,
.custom-radio [type="radio"]:not(:checked)+label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background: url("/checkbox.svg") no-repeat;
  background-size: 18px;
  width: 18px;
  height: 18px;
}

.custom-radio [type="radio"]:checked+label:after,
.custom-radio [type="radio"]:not(:checked)+label:after {
  content: "";
  background: url("/checkbox-check.svg") no-repeat;
  background-size: 18px;
  width: 18px;
  height: 18px;
  position: absolute;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  left: 0;
}

.custom-radio [type="radio"]:not(:checked)+label:after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}

.custom-radio [type="radio"]:checked+label:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.modalHeader {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  justify-content: space-between;
}

.modalHeader .modal-title {
  font-size: 20px;
  font-weight: 600;
}

.modalHeader .btn-close {
  position: relative;
  z-index: 11;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  box-shadow: none;
  cursor: pointer;
  box-shadow: none;
}

.customModal .modal-body {
  padding: 32px 40px;
}

.customModal .form-group label {
  font-weight: 500;
}

.slick-slide {
  margin: 0 10px;
  cursor: pointer;
}

.slick-list {
  margin: 0 -10px;
}

.slick-track,
.slick-slide,
.slick-slide>div {
  display: flex !important;
  align-items: center;
  height: auto !important;
  padding: 0 !important;
  margin: 0 4px !important;
}

.trendindCard .card {
  padding: 0;
  margin: 0;
}

.myCourses {
  padding-top: 30px;
}

.progress-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 500px;
  margin-bottom: 16px;
  direction: ltr !important;
}

.progress-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 8px;
  padding-top: 10px;
}

.progress-bar-wrapper {
  background-color: #e8f1ff;
  border-radius: 999px;
  height: 12px;
  width: 100%;
  margin-right: 12px;
  overflow: hidden;
}

.progress-bar {
  background-color: #4bb543;
  height: 100%;
  width: 60%;
  /* Adjust the width for percentage */
  border-radius: 999px;
}

.enrollBg.progress-bar {
  background-color: #2c73d2;
}

.progress-text {
  font-weight: bold;
  font-size: 1em;
  min-width: 40px;
  text-align: right;
}

.leaveRating {
  background: #efd7e8;
  border-radius: 10px;
  padding: 12px 10px;
  display: block;
  width: 100%;
  text-align: center;
  color: #000;
}

.notification-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background-color: #f1ddeb;
  padding: 16px;
  border-radius: 10px;
  max-width: 1000px;
  margin: 20px 0px;
}

.notification-left {
  display: flex;
  gap: 16px;
  align-items: center;
}

.notification-left img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  padding: 4px;
  background-color: #fff;
}

.notification-text h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #1f1f1f;
}

.notification-text p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #333;
}

.notification-time {
  white-space: nowrap;
  font-size: 14px;
  color: #222324;

  padding-left: 12px;
}

.messageScreen .notification-text {
  max-width: 700px;
}

.messageScreen .notification-left img {
  border-radius: 100%;
}

.messageScreen .menu-search-form {
  display: flex;
  max-width: 1000px;
  width: 100%;
  margin: 24px 0px;
}

.order-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
}

.order-table a {
  color: #000000;
}

.order-table th,
.order-table td {
  text-align: left;
  padding: 16px 12px;
  font-size: 15px;
  white-space: nowrap;
}

.order-table thead th {
  background-color: #edd7e7;
  /* soft purple */
  font-weight: 600;
  color: #1f1f1f;
}

.order-table tbody tr {
  border-bottom: 1px solid #eee;
}

.order-table strong {
  font-weight: bold;
}

.badge {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
}

.badge.completed {
  background-color: #eaf7e8;
  color: #2b822b;
  border: 1px solid #73cb73;
}

.badge.pending {
  background-color: #fff5e6;
  color: #c29100;
  border: 1px solid #e6be77;
}

.badge.failed {
  background-color: #fde6e6;
  color: #d42d2d;
  border: 1px solid #f5a5a5;
}

.profileTabs.helpSupportTab ul.nav.nav-tabs {
  max-width: 368px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-direction: row;
}

.profileTabs.helpSupportTab .nav-link.active {
  border: none;
  position: relative;
  color: #b0398d;
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  color: #fff;
  border-radius: 20px;
}

.profileTabs.helpSupportTab .nav-link {
  color: #000;
  border: 1px solid #cf93b7 !important;
  border-radius: 20px;
  width: 100%;
  min-width: 170px;
  text-align: center;
  font-weight: 500;
}

.profileTabs.helpSupportTab .nav.nav-tabs {
  border: none;
}

.profileTabs.helpSupportTab .nav-tabs li .active:after {
  opacity: 0;
}

.helpSupportScreen {
  padding-top: 32px;
}

.card-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.faq-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  box-shadow: 0px 4px 24px 0px #00000040;
  border: 1px solid #00000066;
  width: 32%;
  max-width: 400px;
}

.faq-card img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.faq-card h3 {
  font-size: 18px;
  margin: 10px 0;
  font-weight: 600;
}

.faq-card ul {
  list-style-type: disc;
  padding-left: 20px;
  text-align: left;
}

.faq-card li {
  margin: 6px 0;
  font-size: 14px;
}

.faq-card a {
  color: #0645ad;
}

.faq-card a:hover {
  color: #333;
}

.selectLanguage .student-radio {
  max-width: 300px;
}

.workShopTime p {
  background: #efd7e8;
  border-radius: 10px;
  font-size: 14px;
  padding: 8px 10px;
  margin-bottom: 8px;
  display: table;
}

.workShopTime p span {
  font-weight: 600;
}

.chat-container {
  max-width: 100%;
  margin: 16px auto;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.chat-header {
  background: #e8d3eb;
  padding: 16px;
  font-weight: 600;
  border-radius: 6px 6px 0px 0px;
}

.chat-messages {
  padding: 16px;
  flex: 1;
  overflow-y: auto;
  max-height: 400px;
}

.message {
  display: flex;
  align-items: flex-start;
  margin-bottom: 4px;
}

.message.user {
  justify-content: flex-end;
  text-align: right;
  gap: 16px;
}

.message.admin {
  gap: 0px 16px;
}

.message-content {
  max-width: 60%;
  position: relative;
}

.chat-messages .chatUser {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.chat-Instructor,
.chat-admin {
  font-size: 16px;
  font-weight: 500;
}

.message-contentBg {
  padding: 12px;
  background: #ffffff;
  border: 1px solid #bf2b9133;
  border-radius: 12px;
  margin-top: 8px;
  font-size: 14px;
}

.message.admin .message-content {
  text-align: left;
}

.message.admin .message-content .message-contentBg {
  background: #ffffff;
  border: 1px solid #bf2b9133;
  text-align: left;
}

.message .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin: 0 10px;
}

.message-time {
  font-size: 0.75em;
  color: #818284;
  margin-top: 6px;
}

.attachment {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 8px;
  font-size: 0.9em;
  color: #5c5c8a;
}

.attachment svg {
  margin-right: 5px;
  fill: #5c5c8a;
}

.chat-input {
  width: 100%;
}

.chat-input textarea {
  resize: none;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 12px;
  height: 140px;
  width: 100%;
}

.chat-input button {
  /* background: #c675d5; */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
}

.chatBtnWrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.earningOverview {
  position: relative;
}

.earningOverviewCard {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 120px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 12px;
  background-color: #fff;
  box-sizing: border-box;
}

.earningContent {
  display: flex;
  align-items: center;
  gap: 8px;
}

.earningIcon {
  width: 60px;
  height: 60px;
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 32px;
}

.card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.earningTitle {
  font-size: 16px;
  color: #000;
  font-weight: 300;
  max-width: 110px;
}

.earningSubTitle {
  font-size: 14px;
  color: #000;
  font-weight: 600;
}

.earningAmount {
  font-size: 30px;
  font-weight: bold;
  margin-top: 4px;
}

.reportSections {
  padding: 12px 0px;
}

.reportTitle {
  font-size: 24px;
  line-height: 30px;
  padding-bottom: 20px;
  font-weight: 500;
  padding-top: 24px;
}

.revenueBreakdownCard {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 120px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 12px;
  background-color: #fff;
  box-sizing: border-box;
}

.order-table.salesDetails {
  margin-top: 0px;
}

.order-table.latestCourse {
  margin-top: 0px;
}

.reportTable {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  padding: 0px;
}

.ticketTable {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  overflow: auto;
  background: #fff;
  padding: 0px;
  margin-top: 24px;
}

.order-table.salesDetails thead th {
  background-color: #fff;
  font-weight: 600;
  color: rgb(31, 31, 31);
}

.order-table.salesDetails tbody tr {
  border-bottom: none;
}

.order-table.salesDetails th,
.order-table.salesDetails td {
  text-align: left;
  padding: 10px 20px;
  font-size: 15px;
}

.reportTabsSection {
  padding-top: 24px;
}

.reportTabsSection .nav-tabs {
  border: none;
  gap: 10px;
}

.reportTabsSection .nav-link {
  border: 1px solid rgb(176, 57, 141) !important;
  border-radius: 10px !important;
  color: rgb(191, 43, 145) !important;
  padding: 10px 40px;
}

.profileTabs .reportTabsSection .nav-tabs li .active:after {
  display: none;
}

.profileTabs .reportTabsSection .nav-link.active {
  border: none;
  position: relative;
  color: #fffafd !important;
  background-color: #b0398d;
}

.studentReport .earningTitle {
  max-width: 200px;
}

.earningOverviewCard.studentReport {
  justify-content: space-evenly;
  padding: 8px;
}

/* leave rating modal start here */

.leaveRatingContant {
  position: relative;
  z-index: 1;
  padding: 24px;
}

.saveContinue {
  text-align: right;
}

.leaveRatingContant textarea {
  min-height: 150px;
  padding: 20px;
  margin: 20px 0;
  resize: none;
  outline: none;
}

.leaveRatingContant .selectRating {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding: 20px 0px;
  font-weight: 600;
  font-size: 16px;
}

.leaveRatings h2 {
  font-size: 24px;
  text-align: center;
  font-weight: 600;
}

.leaveRatingDetails h4 {
  font-size: 24px;
  line-height: 30px;
  text-align: center;
  font-weight: 600;

  max-width: 490px;
  margin: auto;
}

.leaveRatingDetails {
  padding-bottom: 71px;
}

.leaveRatingUser {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #dee2e6;
  padding: 20px 0px;
  margin-top: 20px;
}

.ratingUser {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ratingUser img {
  max-width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #b0398d;
}

.ratingUser h3 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}

.price-slider-widget .slider-range {
  background: #b0398d;
}

.price-slider-widget .slider-track {
  background: #cf93b7;
}

.slider-range input[type="range"].thumb {
  position: absolute;
  pointer-events: none;
  /* Prevent accidental overlapping clicks */
  z-index: 3;
  height: 30px;
  width: 100%;
  background: none;
  -webkit-appearance: none;
}

input[type="range"].thumb::-webkit-slider-thumb {
  pointer-events: all;
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #b0398d;
  /* Thumb color: black */
  cursor: pointer;
  border: none;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 11;
}

input[type="range"].thumb::-moz-range-thumb {
  pointer-events: all;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #007bff;
  cursor: pointer;
  border: none;
}

.correctAnswer {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.correctAnswer .form-control {
  background-color: #ffffff;
  padding-left: 53px;
}

.correctAnswer .radio-option {
  position: relative;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.3s;
  position: absolute;
  left: 38px;
}

.radio-option:hover {
  border-color: #999;
}

.radio-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #aaa;
  border-radius: 50%;
  margin-right: 12px;
  outline: none;
  position: relative;
}

.radio-option input[type="radio"]:checked {
  border-color: #a12c86;
}

.radio-option input[type="radio"]:checked::before {
  content: "";
  width: 10px;
  height: 10px;
  background: #a12c86;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
}

.attach-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: #b3358b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  border: none;
  outline: none;
}

.attach-btn input[type="file"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.attach-btn svg {
  width: 32px;
  height: 32px;
  fill: white;
}

.learnAbout .student-radio {
  display: flex;
  align-items: center;
  border: 1px solid #0006;
  border-radius: 10px;
  padding: 0px 12px;
  margin-bottom: 10px;
  margin-top: 10px;
  cursor: pointer;
  transition: border-color 0.3s ease;
  gap: 16px;
}

.learnAbout .student-radio:hover {
  border-color: #999;
}

.learnAbout .student-radio input[type="radio"] {
  accent-color: #b0398d;
  width: 20px;
  height: 20px;
  margin-right: 0px;
  cursor: pointer;
}

.learnAbout .student-radio input[type="text"] {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  background-color: transparent;
  color: #000000;
  padding-left: 0px;
}


.learnAbout .student-radio-buttons {
  display: flex;
  flex-direction: column;
  border: 1px solid #0006;
  border-radius: 10px;
  padding: 0px 12px;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.learnAbout .student-radio-buttons:hover {
  border-color: #999;
}

.learnAbout .student-radio-buttons input[type="radio"] {
  accent-color: #b0398d;
  width: 20px;
  height: 20px;
  margin-right: 15px;
  cursor: pointer;
}

.student-radio-circle {
  padding: 12px 24px !important;
}


.learnAbout .student-radio-buttons input[type="text"] {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  background-color: transparent;
  color: #000000;
  padding-left: 0px;
}

.plusAdd.addCloseBtn {
  min-width: auto;
  padding: 0px 8px;
}

.course-card-bottom .btnGradient.disabled-link {
  opacity: 0 !important;
}

.earningAmount {
  font-size: 18px;
}

.income-table td,
.income-table th {
  white-space: nowrap;
}

.selectLanguage .learnAbout .custom-radio {
  width: 100%;
}

.revenueDetailsTable {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.update-trainer-profile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0px;
}

.update-trainer-profile-in {
  display: flex;
  align-items: center;
  gap: 10px;
}

.language-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  /* space between elements */
  direction: ltr !important;
  /* force left-to-right layout */
}

.language-wrap span {
  font-size: 14px;
  white-space: nowrap;
}

.fc-daygrid-day-frame {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.certificatesFlex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0px;
}

.activeCourseSlider {
  width: 70vw;
  margin-bottom: 10px;
}

.footer-widget {
  color: #ffffff;
}


@media (max-width: 600px) {
  .message-content {
    max-width: 90%;
  }

  .chat-container {
    height: 100vh;
    border-radius: 0;
  }
}

/* Desktop 1440 css start here */

@media only screen and (max-width: 1440px) {
  .courseRight {
    padding: 30px 24px;
  }

  .profileRight {
    padding: 24px 24px;
  }

  .dashBoardSideBar {
    padding: 20px 10px 10px;
  }

  .profileSideBar {
    padding: 16px 10px 10px;
    width: 60px;
  }

  .courseTab li.nav-item .nav-link {
    font-size: 12px;
  }

  .helpCenterRight ul li a {
    font-size: 15px;
    display: flex;
  }

  .courseRight .headingTitle {
    font-size: 16px;
    line-height: 24px;
  }

  .btnGradient {
    /* height: 40px; */
    padding: 10px 18px;
    font-size: 12px;
  }

  .btnBorder {
    height: 42px;
    line-height: 42px;
    font-size: 12px;
  }

  .platformFeature h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .sectionTitle .title {
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
    padding-bottom: 0px;
  }

  .faqSection .accordion-body p {
    font-size: 14px;
  }

  .faqSection .accordion-button {
    font-size: 18px;
  }

  .faq-card {
    width: 30%;
  }

  .activeCourseSlider {
    width: 74vw;
  }
}

@media only screen and (min-width: 1500px) {
  .activeCourseSlider {
    width: 77vw;
  }
}



@media only screen and (min-width: 1700px) {
  .activeCourseSlider {
    width: 78vw;
  }
}

@media only screen and (min-width: 1800px) {
  .activeCourseSlider {
    width: 80vw;
  }
}

@media only screen and (min-width: 2000px) {
  .activeCourseSlider {
    width: 85vw;
  }
}

@media only screen and (min-width: 1280px) {
  .custom-container {
    max-width: 1500px !important;
  }

  .custom-landing-container {
    max-width: 1320px !important;
  }

}

/* responsive css start here */

@media only screen and (max-width: 1280px) {
  .menu-search-form {
    width: 190px;
  }

  .menu-search-form input {
    padding: 8px 20px 8px 45px;
    font-size: 14px;
    height: 42px;
  }

  .tgmenu-action>ul li a {
    font-size: 14px;
  }

  .tgmenu-action>ul li.header-btn a {
    padding: 12px 18px;
    font-size: 14px;
  }

  .header-top p {
    font-size: 14px;
  }

  .profileSideBar {
    padding: 40px 10px 10px;
    width: 60px;
  }

  .courseTab li.nav-item .nav-link {
    font-size: 12px;
  }

  .helpCenterRight ul li a {
    font-size: 15px;
    display: flex;
  }

  .courseRight .headingTitle {
    font-size: 16px;
    line-height: 24px;
  }

  .btnGradient {
    height: 40px;
    padding: 10px 18px;
    font-size: 12px;
  }

  .btnBorder {
    height: 42px;
    line-height: 42px;
    font-size: 12px;
  }

  .platformFeature h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .title {
    font-size: 18px;
  }

  .card-content .description {
    font-size: 12px;
    line-height: 18px;
  }

  .subtitle {
    font-size: 12px;
    max-width: 80px;
  }

  .successContant p {
    font-size: 12px;
    line-height: 20px;
  }

  .impect-item h4 {
    font-size: 44px;
  }

  .impect-item p {
    font-size: 16px;
  }

  .filter-tab .nav-item a {
    font-size: 14px;
    padding: 12px 27px;
  }

  .factLeft .sectionTitle {
    max-width: 450px;
  }

  .factLeft .sectionTitle .title {
    font-size: 40px;
    line-height: 52px;
  }

  .factLeft p {
    font-size: 18px;
    line-height: 28px;
  }

  .faqSection {
    padding-top: 0;
  }

  section {
    padding: 40px 0;
  }

  .footer-link .list-wrap li a {
    font-size: 14px;
    line-height: 24px;
  }

  .footer-title {
    font-size: 18px;
    padding-bottom: 10px;
  }

  .footer-content p {
    font-size: 14px;
    line-height: 24px;
  }

  .footerSection .logo {
    width: 120px;
    padding-bottom: 0px;
  }

  .footer-social {
    padding-top: 16px;
  }

  .paymentImg img {
    max-width: 60px;
    height: 60px;
  }

  .dashBoardSideBar ul li a {
    font-size: 13px;
  }
}

@media only screen and (min-width: 991.98px) {
  .mobileHead {
    display: none;
  }

  .mobile-toggle {
    display: none;
  }

  .d-hide {
    display: none;
  }

  .nav-item:hover .dropdown-menu {
    box-shadow: 1px 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
    border: 1px solid #e0e0e0;
    padding: 0px;
  }

}

/* meadia screen 991 start here */

@media only screen and (max-width: 991.98px) {
  header .navbar-collapse .navbar-nav {
    gap: 0;
  }

  .langmDropdown .nav-link.cart-count {
    width: 100%;
    border: none;
    display: inline-block;
    text-align: left;
    color: rgba(0, 0, 0, 1);
    font-size: 16px;
    font-weight: 500;
    background-image: none !important;
    height: auto;
    border-radius: unset;
    text-transform: capitalize;
  }

  .langmDropdown .btn {
    background: none;
  }

  .langmDropdown .lang-icon {
    display: none;
  }

  .langmDropdown .btn:before {
    content: none;
  }

  .exlpreCourses .browseCourses {
    display: none;
  }

  .dropdown-menu.exlpreCourses {
    border: none;
    padding: 0px;
  }

  .exlpreCourses .dropdown-item {
    padding: 10px 0;
  }

  .header-middle {
    position: relative;
  }

  .tgmenu-action>ul li a {
    font-size: 14px;
  }

  .mobileHead {
    position: absolute;
    right: 16px;
    top: 6px;
  }

  .mobileHead .mobileUl {
    display: flex;
    gap: 8px;
  }

  .mobileHead .cart-count {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    color: #7f7e97;
    border-radius: 50%;
  }

  .mobileHead .cart-count img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }

  /* .tgmenu-action .mini-cart-icon,
  .tgmenu-action .langDropdown {
    display: none;
  } */

  .tgmenu-action .mini-cart-icon {
    display: none;
  }

  .tgmenu-action>ul li.header-btns {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 6px 0px;
  }

  .tgmenu-action>ul li.header-btns {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 12px 0px 12px;
  }

  .exlpreCourses {
    min-width: 100%;
    width: 100%;
  }

  .dropdown-toggle::after {
    display: none;
  }

  .langmDropdow ul.dropdown-menu {
    border: none;
    box-shadow: none;
  }

  .mobile-toggle {
    background: url("../arrow-bottom.svg") center center no-repeat;
    width: 40px;
    height: 40px;
    right: -8px;
    position: absolute;
    top: 0px;
    z-index: 11;
    transition: all 300ms ease;
  }

  .mobile-toggle.active {
    transform: rotate(180deg);
  }

  .tgmenu-action li.nav-item {
    width: 100%;
  }

  .tgmenu-action li.nav-item.dropdownToggle .dropdown-menu.exlpreCourses {
    display: block;
    border: none;
    box-shadow: none
  }

  .tgmenu-action li.nav-item .dropdown-menu.exlpreCourses {
    display: none;
  }

  .dropdown-menu.profileDropdown {
    display: none !important;
  }

  .dropdown-menu.profileDropdown.active {
    display: block !important;
    padding: 0px;
  }

  .langDropdown .dropdown-menu,
  .mini-cart-icon .dropdown-menu {
    padding: 0px;
  }

  .header-btns .btnBorder {
    width: 100%;
    text-align: center;
  }

  .header-btns .btnGradient {
    width: 100%;
    text-align: center;
  }

  header .navbar-toggler {
    position: absolute;
    left: 20px;
    border: none;
    padding: 0px;
  }

  header .custom-container.header-adjust {
    justify-content: center;
  }

  header .navbar-brand img {
    max-width: 70px;
    height: 32px;
  }

  .header-middle nav.navbar {
    padding: 0;
  }

  header .navbar-toggler:focus {
    box-shadow: none;
  }

  header .navbar-collapse {
    position: absolute;
    width: 100%;
    background: #fff;
    left: 0px;
    top: 0px;
    height: 100%;
    z-index: 9;
    padding: 20px 16px;
    top: 50px;
    height: 100vh;
    border-top: 1px solid #f2f2f2;
    box-shadow: inset 0px 28px 24px -16px #f2f2f2;
    max-height: 85vh;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .dropdown-submenu:hover .dropdown-menu {
    border: none;
  }

  header .navbar-collapse .navbar-nav {
    background: #fff;
    align-items: flex-start;
  }

  .lms-list-wrapper li {
    margin-top: 4px;
    margin-bottom: 4px;
  }

  .lms-widget-title {
    font-size: 16px;
  }

  .courseSearchTop .searchWarap .menu-search-form {
    margin: 0px 20px;
  }

  .lms-sidebar {
    padding-right: 0;
  }

  .heroRight .btnBorder {
    padding: 0 20px;
  }

  .heroseSection {
    padding-top: 16px;
  }

  .aboutTopBanner .aboutConatnt {
    padding: 24px;
  }

  .aboutTopBanner .aboutConatnt h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .aboutTopBanner .aboutConatnt p {
    font-size: 16px;
  }

  .headingTitle {
    font-size: 24px;
    line-height: 30px;
  }

  .exlpreCourses.nav-item:hover .dropdown-menu {
    box-shadow: none;
    border: none;
  }

  .globalFont {
    font-size: 16px;
  }

  .ourMissionBg {
    padding: 40px 20px;
  }

  .vissionLeft h2 {
    font-size: 28px;
    line-height: 36px;
    text-align: left;
    max-width: 100%;
    padding-top: 20px;
  }

  .ourMissionBg .vissionRight {
    padding-top: 16px;
  }

  .workWithUs .WorkConatnt {
    margin-bottom: 5px;
    margin-top: 24px;
  }

  /* .our-partner {
    padding-top: 0px;
  } */
  .platformFeature {
    text-align: center;
    padding-bottom: 24px;
  }

  .platformFeature .imgwrap {
    width: 160px;
    margin: auto;
  }

  .impectSection {
    padding: 40px 0 !important;
  }

  .heroRightBottom {
    padding: 0 20px 20px;
    text-align: left;
  }

  .filter-tab {
    overflow: auto;
    white-space: nowrap;
    padding-bottom: 10px;
  }

  .filter-tab .nav-item {
    overflow: visible;
  }

  .sectionTitle .title {
    width: 100% !important;
  }

  .broadTitle span {
    display: inline;
  }

  .contactForm {
    padding: 20px;
    max-width: 100%;
    margin: 0;
  }

  .contactForm .col-6 {
    width: 100%;
  }

  .contactInfo {
    padding: 10px 12px 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 20px;
    height: 100%;
  }

  .auth-right {
    width: 100%;
    padding: 70px 30px;
  }

  .becomeText {
    padding-top: 24px;
  }

  .instructorTop {
    gap: 20px;
  }

  .instuImg {
    max-width: 122px;
    overflow: hidden;
  }

  .instuImg img {
    width: 100%;
    height: 100%;
  }

  .instructorTop li {
    font-size: 14px;
    background-size: 20px !important;
    margin-bottom: 6px;
  }

  .btnBorder {
    height: 38px;
    line-height: 38px;
    padding: 0 8px;
  }

  .heartIcon.btnBorder {
    width: 38px;
    height: 38px;
  }

  .heartIcon img {
    max-width: 20px;
  }

  .instDetails h2 {
    font-size: 20px;
  }

  .instDetails h2 span {
    font-size: 20px;
  }

  .faqSection .accordion-button {
    font-size: 16px;
  }

  .faqSection .view-all-text {
    font-size: 16px;
  }

  .courseRight {
    padding: 20px 20px 24px;
  }

  .courseTab {
    margin-bottom: 24px;
  }

  .teacherHelpCenter {
    padding: 16px;
  }

  .helpCenterRight ul li a {
    display: flex;
    align-items: flex-start;
  }

  .addCourseForm {
    padding: 16px;
    border-radius: 6px;
  }

  .newAddDelete {
    flex-wrap: wrap;
  }

  .resumeCard .btnBorder {
    height: 32px;
    line-height: 32px;
    padding: 0px 12px;
  }

  .resumeCard .btnGradient {
    height: 32px;
    padding: 6px 24px;
  }

  .courseQuiz .learnAbout label {
    padding-bottom: 4px;
    padding-top: 12px;
    font-size: 14px;
  }

  .uploadVideoWrap {
    flex-wrap: wrap;
  }

  .resumeCard label.btnBorder.plusAdd {
    font-size: 12px;
    padding: 0px 12px;
    height: 32px;
    line-height: 32px;
  }

  .uploadVideoWrap label.btnBorder.plusAdd {
    font-size: 12px;
    height: 32px;
    line-height: 32px;
    padding: 4px 12px;
  }

  .profileForm .form-control {
    height: 40px;
    font-size: 14px;
  }

  .profileForm .courseType .form-control {
    width: 100%;
  }

  .profileForm .col-5 {
    width: 100%;
  }

  .profileRight {
    margin-left: 0;
  }

  .dashBoardSideBar {
    padding: 20px 10px 12px;
    width: 100%;
    border: none;
    display: flex;
    overflow: auto;
    margin-bottom: 12px;
    position: relative;
    top: 0;
    height: auto;
  }

  .dashBoardSideBar ul {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: visible;
  }

  .dashBoardSideBar ul li a {
    padding: 4px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
  }

  .notification-card {
    flex-direction: column;
  }

  .notification-time {
    text-align: right;
    width: 100%;
  }

  .notification-left {
    align-items: self-start;
  }

  .faq-card {
    width: 100%;
    max-width: 100%;
  }

  .profileTabs.helpSupportTab ul.nav.nav-tabs {
    overflow: hidden;
    justify-content: center;
  }

  .profileTabs.helpSupportTab .nav-link {
    min-width: 132px;
  }

  .profileWraper {
    flex-wrap: wrap;
  }

  .dashboardFilter {
    justify-content: flex-start;
  }

  .dashboardFilter .select-item {
    width: 100%;
  }

  .dashboardFilter .menu-search-form {
    width: 100%;
  }

  .profileRight .dashTitle .headingTitle {
    font-size: 20px;
    line-height: 28px;
  }

  .cta-wrapper h3 {
    font-size: 20px;
  }

  .cta-wrapper p {
    font-size: 16px;
    font-weight: 500;
  }

  .footer-social {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .paymentImg img {
    max-width: 40px;
    max-height: 40px;
  }

  .courseImg {
    max-width: 100%;
  }

  .courseCard .courseImg img {
    border-radius: 0;
  }

  .courseCard {
    gap: 0px;
    flex-direction: column;
  }

  .courseCard1 {
    gap: 0px;
    flex-direction: row;
  }

  .courseContant {
    padding: 20px;
  }

  .facilityContant {
    padding: 20px;
  }

  .facilityDiv {
    flex-direction: column;
  }

  .courseContant .coursePrice,
  .courseContant .courseDuration {
    max-width: 100%;
  }

  .courseCard ul {
    gap: 8px;
  }

  .footer-title {
    padding-bottom: 12px;
  }

  .impect-wrapper {
    flex-wrap: wrap;
  }

  .impect-wrapper .topSpace {
    margin-top: 0;
  }

  .impect-wrapper .impect-item {
    width: 48%;
  }

  .success-wrapper {
    flex-wrap: wrap;
  }

  .success-wrapper .success-item {
    width: 48%;
  }

  .topRated span {
    display: inline-block;
  }

  .factLeft {
    min-width: 100%;
    width: 100%;
  }

  .mobileHead .CartCount {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #dc3545;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    line-height: 20px;
    font-weight: 600;
    top: -4px;
    right: -4px;
    text-align: center;
  }

  .sucessSection::before,
  .sucessSection::before,
  .topRatedBg::after,
  .topRatedBg::before {
    display: none;
  }

  .courseSection {
    padding: 30px 0px 0px;
  }

  .courseSection.topRatedBg {
    padding: 0;
  }

  .course-card-bottom .current-price {
    font-size: 16px;
  }

  .off-price {
    font-size: 12px;
  }

  .hero-banner img {
    width: 100%;
    height: 100%;
  }

  .trendindCard .couresCard {
    width: auto;
  }

  .relatedCard .couresCard {
    width: auto;
  }

  .menu-search-form .customSearch [type="submit"] {
    right: 0px;
  }

  .dashboard-container.dashboardInstructor {
    margin-left: 0 !important;
    overflow-x: hidden;
  }

  /* reset-password css start here */

  .reset-password .resetBox {
    min-width: 100%;
  }

  .factArtWrap {
    flex-wrap: wrap;
  }

  .factLeft {
    padding: 30px 30px;
    min-height: auto;
    min-width: auto;
  }

  .factRight {
    max-width: 100%;
    position: relative;
    right: 0;
  }

  .nav-item.langmDropdown .dropdown-menu.active {
    display: block;
    border: none;
  }

  .nav-item.langmDropdown .dropdown-menu .dropdown-item {
    padding: 0px;
  }

  .d-none {
    display: none !important;
  }

  .menu-search-form {
    width: 100%;
  }

  .mobSearch {
    position: absolute;
    min-width: 300px;
    background-color: #fff;
    right: 0;
    padding: 12px;
    border-radius: 0px 0px 10px 10px;
    display: none;
  }

  .mobSearch.active {
    display: block;
  }

  .mobSearch .menu-search-form [type="submit"] {
    right: 0;
    background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
    color: #ffffff;
    border-radius: 16px;
    font-size: 14px;
    left: auto;
    width: 80px;
  }

  .mobSearch .menu-search-form input {
    padding: 8px 85px 8px 12px;
  }

  .mobSearch .menu-search-form {
    border-radius: 16px;
  }

  .process-model li i {
    height: 48px;
    width: 48px;
  }

  .process-model li .personalIcon {
    background-size: 22px;
  }

  .process-model li .detailIcon {
    background-size: 22px;
  }

  .process-model li .statusIcon {
    background-size: 22px;
  }

  .process-content .aboutDestail h3 {
    font-size: 24px;
  }

  .process-model li::after {
    right: -49px;
  }

  .process-model.more-icon-preocess li {
    width: 33%;
  }

  .courseDashCard img {
    max-width: 48px;
    max-height: 48px;
  }

  .courseCard {
    align-items: flex-start;
  }

  .courseWrapper .courseDashCard p {
    font-size: 12px;
  }

  .profileWraper {
    height: 100% !important;
  }

  .addCourseForm label {
    font-size: 14px;
    font-weight: 500;
  }

  .notification-delete-btn {
    right: 0px;
  }

  .earnings-section {
    flex-wrap: wrap;
  }

  .workshopSessionList {
    height: auto !important;
  }

  .facilityProduct {
    flex-wrap: wrap;
  }

  .facProductContant {
    padding: 20px 0px;
  }

  .facProductImg {
    width: 100%;
  }

  .earningOverviewCard {
    margin-bottom: 20px;
  }

  .dashboardInstructor .profileTabs .nav-tabs {
    overflow: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
  }

  .partnerBanner img {
    max-height: 320px;
  }

  .partnerBanner .faq-partnerContant h2 {
    font-size: 28px;
  }

  form.sup-form {
    margin: 20px auto 0px;
  }

  .partnerBanner .faq-partnerContant {
    padding: 20px 0px;
  }

  .roomBooking {
    margin-top: 24px;
  }

  .filter-left,
  .filter-wrapper {
    flex-wrap: wrap;
    width: 100%;
  }

  .filter-wrapper .facility-filter-btn,
  .filter-wrapper .facility-reset-btn {
    width: 48%;
    border-radius: 10px;
  }

  .courseDetailTabs .courseTabs .tabInner {
    flex-wrap: wrap;
    gap: 20px 0px;
  }

  .workshopProductImg {
    width: 100%;
  }

  .workshopProductContant {
    padding: 20px 24px;
    width: 100%;
  }

  .becomeTrainerRow {
    padding: 0px;
  }

  .becomeTrainerRow .becomeBox {
    flex-wrap: wrap;
  }

  .instuBanner img {
    max-height: 340px;
  }

  .instuBanner .instuContant h2 {
    font-size: 32px;
    line-height: 40px;
  }

  .buildTrust .sectionTitle {
    flex-wrap: wrap;
  }

  .startprocess .getprocess {
    gap: 20px;
  }

  .startprocess .getprocess li {
    font-size: 14px;
  }

  .cateringService {
    padding: 24px;
    flex-wrap: wrap;
    gap: 24px;
  }

  .testimonial-card {
    max-width: 90%;
  }

  .testimonial-card {
    flex-direction: row;
    max-width: 90%;
  }

  .mycart .cartRight {
    margin-top: 20px;
  }

  .checkoutForm {
    max-width: 100%;
  }

  .checkoutBtn .btnGradient {
    padding: 0;
  }

  .footer-bottom-menu .list-wrap {
    justify-content: center;
    gap: 16px;
  }

}

/* meadia screen 990 end here */

/* meadia screen 767 start here */

@media only screen and (max-width: 767.98px) {
  body {
    font-size: 14px;
  }

  body p {
    font-size: 14px;
  }

  .faq-card {
    width: 100%;
  }

  .testimonial-card {
    flex-direction: column;
    max-width: 90%;
  }

  .avatar-upload .avatar-edit input+label {
    margin: 0px -30px -10px;
  }

  /* header .navbar-brand img {
    max-width: 70px;
    height: 40px;
  } */

  .header-middle {
    padding: 0px 0;
  }

  .header-top {
    padding: 6px 20px;
    font-size: 12px;
  }

  .header-top p {
    font-size: 12px;
  }

  .hero-banner .bannerContant {
    left: 20px;
  }

  .hero-banner {
    overflow: hidden;
    border-radius: 10px;
  }

  .hero-banner img {
    width: 100%;
    height: 100%;
    min-height: 150px;
    max-height: 150px;
  }

  .hero-banner .bannerContant p {
    font-size: 13px;
    line-height: 20px;
    font-weight: 300;
    padding-top: 4px;
  }

  .hero-banner .bannerContant h2 {
    font-size: 18px;
    line-height: 24px;
    max-width: 80%;
  }

  .card {
    margin-bottom: 24px;
  }

  /* .card .card-content {
    bottom: -70px;
  } */

  .sectionTitle .title {
    font-size: 24px;
    line-height: 32px;
  }

  /* .filter-tab {
    flex-wrap: wrap;
  } */

  .topRated {
    align-items: flex-start;
    flex-direction: column;
    padding-bottom: 24px;
  }

  .sectionTitle.left {
    padding-bottom: 0px;
  }

  .factLeft {
    padding: 30px 30px;
    min-height: auto;
    min-width: auto;
  }

  .factArtWrap {
    flex-wrap: wrap;
  }

  .factLeft .sectionTitle .title {
    font-size: 32px;
    line-height: 40px;
  }

  .factLeft p {
    font-size: 16px;
    line-height: 24px;
  }

  .factRight {
    max-width: 100%;
    position: relative;
    right: 0;
  }

  .factArtSection {
    padding: 0;
  }

  .whySection .whyWrapper {
    gap: 0px;
  }

  .success-wrapper .success-item {
    width: 100%;
    flex: none;
  }

  .whySection .whyChoose h3 {
    font-size: 20px;
    line-height: 24px;
  }

  .success-wrapper {
    flex-wrap: wrap;
  }

  .impect-wrapper {
    flex-wrap: wrap;
    gap: 10px;
  }

  .topSpace {
    margin-top: 0;
  }

  .impectSection {
    padding: 0;
  }

  .impectSection .impect-item {
    width: 48%;
  }

  .impect-item p {
    font-size: 15px;
  }

  .impect-item h4 {
    font-size: 32px;
  }

  .log__heads div {
    padding-left: 20px;
    padding-right: 20px;
  }

  .log__heads h1 {
    font-size: 28px;
    margin-bottom: 20px;
  }

  /* auth-wrap */

  .auth-wrap {
    flex-direction: column;
  }

  .auth-right {
    width: 100%;
    padding: 20px;
  }

  .auth-bg {
    height: 22vh;
    width: 100%;
    background-position: center center;
    display: none;
  }

  .log__heads .logs_title {
    font-size: 22px;
    line-height: 28px;
  }

  .log_wraps .form-group {
    margin-bottom: 1rem;
  }

  .log_wraps .form-control {
    height: 48px;
  }

  /* courseDetail start here */

  .courseDetailWrap .courseImg {
    width: 100%;
  }

  .courseDetailWrap {
    flex-wrap: wrap;
  }

  .courseDetailWrap .courseConatnt {
    width: 100%;
    padding: 16px;
  }

  .btnGradient {
    font-size: 14px;
    white-space: nowrap;
    padding: 8px 16px;
    height: 38px;
  }

  .btnGradient.addCourseSm {
    width: 100%;
    text-align: center;
  }

  .course-review li {
    white-space: nowrap;
  }

  .ourseTabs .nav-tabs li a {
    font-size: 16px;
    padding: 12px 0;
  }

  .startSubscribe {
    width: 100%;
    flex-wrap: wrap;
  }

  .courseTabs .nav-tabs {
    padding: 10px;
  }

  .courseTabs .tabInner {
    padding: 16px;
    flex-wrap: wrap;
    gap: 20px;
  }

  .tabInner .courseTitle {
    font-size: 18px;
    line-height: 24px;
    padding-bottom: 10px;
  }

  .courseTabs .nav-tabs li a {
    font-size: 16px;
    padding: 4px 0;
  }

  .courseTabs .nav-tabs li .active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0px;
    right: 0;
    width: 100%;
    height: 3px;
    background: rgba(176, 57, 141, 1);
    border-radius: 30px;
    margin: 0 auto;
    z-index: 1;
    transition: all 0.3s ease-out 0s;
  }

  .aboutList li {
    font-size: 14px;
    line-height: 25px;
    background-position: left top;
  }

  .courseTabs .nav-tabs li {
    margin-right: 10px;
  }

  .need-wrapper {
    flex-wrap: wrap;
    gap: 10px 10px;
  }

  .need-item {
    width: 48%;
    max-width: 48%;
  }

  .needImg img {
    width: 100%;
    max-width: 54px;
    max-height: 54px;
  }

  .need-item p {
    color: #212121;
    font-size: 12px;
    line-height: 19px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: initial;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .beCertificate .becomeText h3 {
    font-size: 24px;
    line-height: 28px;
  }

  .beCertificate .becomeText p {
    font-size: 16px;
  }

  .beCertificate {
    padding: 30px 0;
    margin: 0 0;
  }

  .courseDetailWrap .courseConatnt h2 {
    font-size: 24px;
  }

  .faqSection {
    padding-top: 20px;
  }

  .course-review {
    flex-wrap: wrap;
  }

  .ratingOverview ul li .ratingStar {
    font-size: 24px;
    line-height: 28px;
  }

  .ratingStar img {
    width: 16px;
    height: 16px;
  }

  .ratingTop {
    justify-content: flex-start;
    gap: 10px;
    padding-top: 0px;
  }

  .ratingTop h2 {
    font-size: 18px;
    line-height: 28px;
    padding-right: 40px;
    text-align: left;
  }

  .userContant .weekAgo {
    gap: 2px;
    font-size: 12px;
    line-height: 20px;
  }

  .weekAgo img {
    max-width: 14px;
    height: 14px;
    margin-right: 0px;
    margin-bottom: 0px !important;
  }

  .userContant h3 {
    font-size: 16px;
    line-height: 28px;
  }

  .ratingOverview .showAllReview {
    padding: 9px 24px;
    font-size: 14px;
  }

  .ratingTop h2 span {
    font-size: 13px;
    line-height: 16px;
    padding-left: 0;
    display: block;
  }

  .ratingOverview ul li {
    font-size: 24px;
    line-height: 28px;
    padding: 4px 10px;
  }

  .ratingOverview ul li span {
    font-size: 12px;
  }

  .revenueDetailsTable {
    flex-direction: column;
    align-items: center;
  }

  .ratingOverview {
    gap: 12px;
    padding: 20px 0px;
    flex-direction: column;
  }

  .cta-wrapper {
    padding: 30px 20px;
  }

  .cta-wrapper h3 {
    font-size: 24px;
  }

  .cta-wrapper p {
    font-size: 16px;
  }

  .sup-form input {
    height: 54px;
    line-height: 54px;
    font-size: 16px;
  }

  .sup-form button {
    position: relative;
    top: 10px;
    background: linear-gradient(90deg, #000 0%, #be2890 100%);
    height: 55px;
    font-size: 18px;
    width: 100%;
    right: 0;
    transform: none;
  }

  .blogConatnt {
    padding: 16px;
  }

  section {
    padding: 24px 0;
  }

  .autharwrap .createDate {
    font-size: 14px;
    line-height: 24px;
  }

  .autharwrap {
    padding-top: 20px;
  }

  .autharwrap .autharImg {
    gap: 10px;
  }

  .blogConatnt h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .shareBlog {
    gap: 10px;
  }

  .shareBlog .shareIcon img {
    max-width: 36px;
    height: 36px;
  }

  .shareBtn {
    min-width: auto;
    font-size: 15px;
  }

  .autharBoxBorder {
    flex-wrap: wrap;
  }

  .detailContant h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .detailContant {
    padding-bottom: 20px;
  }

  .recentArticle {
    padding: 30px 0px;
  }

  .blogSort .title {
    font-size: 24px;
  }

  .blogSort {
    flex-wrap: wrap;
  }

  .breadcrumbs-wrap .breadcrumb-item {
    font-size: 14px;
  }

  .ContantLeft .list {
    padding-bottom: 20px;
  }

  .roomBooking {
    padding: 16px;
  }

  .availabitySlot .slot li {
    font-size: 13px;
  }

  .dashboard-container.dashboardInstructor {
    margin-left: 0px !important;
  }

  .order-table th,
  .order-table td {
    padding: 10px 12px;
    font-size: 14px;
  }

  .availabitySlot {
    padding: 16px;
  }

  .filter-wrapper {
    border-radius: 10px;
    padding: 16px;
    flex-wrap: wrap;
    width: 100%;
  }

  .facility-filter-btn,
  .facility-reset-btn {
    min-width: 100%;
    border-radius: 16px;
  }

  .filter-left {
    flex-wrap: wrap;
  }

  .testimonial-content {
    max-width: 100% !important;
    padding: 16px;
  }

  .testimonial-content p {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 10px;
  }

  .buildTrust .sectionTitle .title {
    padding-right: 0px;
  }

  .buildTrust .impect-item {
    padding: 10px;
  }

  .productPrice {
    font-size: 20px;
    line-height: 30px;
    padding: 0px;
  }

  .search-btn {
    width: 100%;
    border-radius: 10px;
    text-align: center;
  }

  .bookingForm .dateDuration .form-control {
    font-size: 12px;
  }

  .bookingForm .duration {
    padding: 12px;
  }

  .maxCapicity {
    padding: 16px 12px;
  }

  .facilityDetailImg img {
    height: 100% !important;
  }

  .facilityProduct {
    flex-wrap: wrap;
    padding: 16px;
  }

  .facProductImg {
    min-width: 100%;
  }

  .facProductContant {
    padding: 20px 0 0px;
  }

  .amenitiesList.top-0 {
    padding-top: 20px;
  }

  .capicity {
    gap: 12px;
    font-size: 13px;
  }

  .capicityWrap {
    padding: 20px 0px 0px !important;
    flex-direction: column;
    gap: 0px;
  }

  .capicityWrap div {
    width: 100%;
    margin-top: 0px !important;
  }

  .ContantLeft h3 {
    font-size: 24px;
    line-height: 30px;
  }

  .roomHeader {
    flex-direction: column;
  }

  .roomHeader .roomTitle {
    font-size: 18px;
    line-height: 26px;
  }

  .facilityContant p {
    padding-bottom: 0;
  }

  .breadcrumbs-wrap .breadcrumb {
    overflow: hidden;
    overflow-x: auto;
    padding-bottom: 10px;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .becomeBox {
    padding: 20px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  .becomeImg img {
    max-width: 80px;
    height: 80px;
  }

  .becomeBox h2 {
    font-size: 18px;
    line-height: 24px;
  }

  .becomeBox p {
    font-size: 16px;
    line-height: 24px;
    padding-top: 6px;
  }

  .becomeTrainerRow {
    padding: 0px 20px;
  }

  .instuBanner .instuContant h2 {
    font-size: 24px;
    line-height: 28px;
  }

  .instuBanner .instuContant p {
    font-size: 16px;
    line-height: 24px;
  }

  .instuBanner .instuContant {
    padding: 20px 16px;
  }

  .instuBanner img {
    width: 100%;
    max-height: 310px;
    object-fit: cover;
  }

  .buildTrust .sectionTitle {
    gap: 10px;
    flex-direction: column;
  }

  .startprocess .getprocess {
    max-width: 100%;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-bottom: 0px;
  }

  .testimonial-content {
    max-width: 100%;
  }

  .getStarted img {
    width: 100%;
    height: auto;
  }

  .getStarted .testimonial-content img {
    width: 32px;
  }

  .startedContent p {
    font-size: 18px;
    line-height: 24px;
    padding-bottom: 10px;
  }

  .notFoundWrap img {
    max-width: 220;
  }

  .notFoundWrap h3 {
    font-size: 24px;
    line-height: 30px;
  }

  .mycart .cartHeading {
    font-size: 24px;
    line-height: 32px;
    padding-bottom: 0px;
  }

  .mycart .courseDetailWrap .courseConatnt {
    width: 100%;
    padding: 16px 0px 0px;
  }

  .mycart .cartRight {
    margin-top: 20px;
    padding: 20px;
  }

  .mycart .cartRight .coupanApply input {
    font-size: 16px;
    height: 48px;
  }

  .mycart .cartRight .coupanApply button {
    height: 50px;
  }

  .checkouSubTotal .subTotalAed .off-price span {
    font-size: 16px;
  }

  .checkOutTotal span {
    font-size: 20px;
  }

  .mycart .cartRight .coupanApply {
    margin-top: 10px;
  }

  .mycart .courseDetailWrap h3 {
    font-size: 20px;
    line-height: 32px;
    font-weight: 600;
  }

  .mycart .courseDetailWrap .course-review {
    gap: 14px;
    flex-wrap: wrap;
  }

  .coupon-container .discount {
    font-size: 16px;
  }

  .coupon-container .apply {
    font-size: 11px;
  }

  .coupon-container .details h2 {
    font-size: 15px;
  }

  .coupon-container .details p {
    margin: 1px 0;
    font-size: 8px;
  }

  .coupon-container {
    gap: 16px;
    padding: 0px 10px 10px;
  }

  .courseDetailWrap .courseConatnt .course-card-bottom .current-price {
    font-size: 24px;
  }

  .mycart .courseDetailWrap .remove {
    bottom: 8px;
  }

  .courseDetailWrap .courseConatnt .course-card-bottom .off-price {
    font-size: 15px;
  }

  .checkoutForm {
    max-width: 100%;
  }

  .checkoutForm .col-6 {
    width: 100%;
  }

  .checkoutHeading {
    font-size: 20px;
  }

  .mycart .cartRight .courseDetailWrap .courseImg {
    width: 30%;
  }

  .mycart .cartRight .courseDetailWrap h3 {
    font-size: 15px;
  }

  .checkoutBtn .btnGradient {
    height: 40px;
    padding: 6px 30px;
    font-size: 16px;
  }

  .profileForm .col-6 {
    width: 100%;
  }

  .profileForm .col-4 {
    width: 100%;
  }

  .profileForm .col-7 {
    width: 100%;
  }

  .profileRight .headingTitle {
    font-size: 24px;
    line-height: 32px;
  }

  .profileWraper {
    flex-direction: column;
  }

  .profileTabs .nav-link {
    white-space: nowrap;
  }

  .profileTabs .nav-tabs {
    overflow-y: hidden;
    flex-wrap: nowrap;
    overflow-x: auto;
    min-height: 40px;
  }

  .profileSideBar {
    padding: 24px 10px 10px;
    width: 100%;
    height: auto;
  }

  .courseRight .courseTab .nav-tabs {
    border: none;
    padding: 10px 0px;
  }

  .courseRight .courseTab li.nav-item {
    padding: 2px 0px;
  }

  .order-table th,
  .order-table td {
    text-align: left;
    padding: 10px 12px;
    font-size: 15px;
    white-space: nowrap;
  }

  .profileRight {
    padding: 16px 16px 20px;
    width: 100%;
  }

  .profileSideBar ul {
    display: flex;
    align-items: center;
    justify-content: left;
    overflow: hidden;
    overflow-x: auto;
    gap: 0px 6px;
  }

  .avatar-upload .avatar-preview {
    width: 150px;
    height: 150px;
  }

  .partnerBanner .partnerContant h2 {
    font-size: 24px;
    line-height: 30px;
  }

  .partnerBanner .partnerContant {
    padding: 16px;
  }

  .partnerBanner img {
    max-height: max-content;
  }

  .partnerBanner.faqBanner img {
    max-height: 180px;
  }

  .partnerBanner .faq-partnerContant h2 {
    font-size: 20px;
    line-height: 30px;
    padding-top: 30px;
  }

  .partnerBanner .faq-partnerContant {
    right: 0;
    left: 0;
    padding: 24px;
  }

  form.sup-form {
    margin: 20px auto 0px;
  }

  .profile-avatar {
    font-size: 20px;
    line-height: 32px;
  }

  .linkText {
    font-size: 16px;
  }

  .partnerBox {
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 20px;
  }

  .partnerBox .imgWrap {
    margin: 10px auto;
  }

  .avatar-group {
    padding-top: 20px;
  }

  .cateringService h3 {
    font-size: 26px;
  }

  .cateringService {
    padding: 20px;
    flex-direction: column;
    gap: 10px;
  }

  .cateringService p {
    font-size: 14px;
  }

  .courseWrapper {
    flex-wrap: wrap;
  }

  .dashboardFilter {
    flex-wrap: wrap;
  }

  .recoCourses .course-card {
    flex-direction: column;
  }

  .recoCourses .course-card-body {
    padding-left: 0;
    width: 100%;
  }

  .recoCourses .course-img {
    width: 100%;
  }

  .otpWrap {
    gap: 10px;
  }

  .otpWrap input {
    font-size: 24px;
    max-width: 70px;
    height: 35px;
  }

  .log__heads p,
  #email {
    font-size: 14px;
    line-height: 20px;
  }

  .checkbox label {
    font-size: 11px !important;
  }


  .update-trainer-profile {
    flex-direction: column;
    align-items: flex-start;
  }

  .notification-card1 {
    flex-wrap: wrap;
    cursor: pointer;
  }

  .notifiWrap .notification-time1 {
    flex-direction: row;
    align-items: flex-end;
    width: 100%;
    justify-content: space-between;
  }

  .notifiWrap .notification-left1 {
    padding-right: 0;
  }

  .submitButton {
    height: 40px;
    padding: 9px 20px;

  }


  .subscription-left,
  .subscription-right {
    margin-bottom: 0;
    padding: 1.2rem;
  }

  .modal-body-inner .form-control {
    height: 44px;
  }

  .modal-body-inner .form-group label {
    font-size: 14px;
    font-weight: 500;
  }

  .learnAbout .radio-btn .hobbies-icon {
    font-size: 14px;
  }

  .helpSupportScreen {
    padding-top: 0px;
  }

  .helpSupportScreen {
    padding-top: 0px;
  }

  .courseLession {
    /* padding: 0px !important; */
    flex-wrap: wrap;
    gap: 10px;
  }

  .beCertificate .becomeImg {
    margin: 0;
  }

  .quiz-results .details {
    flex-wrap: wrap;
    gap: 23px;
    flex-direction: column;
    align-items: start;
  }

  .quiz-results .passed {
    display: inline-block;
    text-align: center;
  }


  .saveShare {
    gap: 10px;
    position: relative;
    right: 0;
    top: 0;
    flex-wrap: wrap;
    padding: 10px;
  }

  .saveShare .shareBtn {
    min-width: auto;
    height: 40px;
    font-size: 11px;
    line-height: 40px;
    padding: 0px 11px;
    margin-top: 0px;
  }

  .courseOverview .instuImg {
    max-width: 105px;
    min-height: 150px;
    min-width: 105px;
  }

  .instructorTop li {
    font-size: 12px;
    background-size: 16px !important;
  }

  .purchaseShedule {
    padding-top: 20px;
  }

  .courseIntro {
    font-size: 16px;
  }

  .shareIcon img {
    max-width: 40px;
  }

  .socialShare .sup-form input {
    font-size: 14px;
  }

  .reviewFilter {
    gap: 10px;
    flex-wrap: wrap;
  }

  .reviewFilter .sortBy {
    width: 100%;
  }

  .myFaciHeader .myBooking {
    font-size: 24px;
  }

  .myFaciHeader {
    justify-content: center;
  }

  .earnings-section {
    flex-direction: column;
  }

  .certificatesFlex {
    align-items: flex-start;
    flex-direction: column;
  }

  .welcome-banner {
    padding: 1rem 1rem !important;
    height: auto !important;
  }

  .welcome-banner h2 {
    font-size: 18px;
  }

  header .navbar-brand img {
    left: -90px;
    width: 50px;
    position: relative;
  }

  .slider_card {
    flex-direction: column !important;
    width: 100%;
    gap: 20px;
  }

  .slider_dateBox {
    min-width: 100%;
  }

  .dashTitle.conversationWrap {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .sortRight {
    justify-content: start;
  }

  .sortFilter {
    padding-top: 20px;
  }

  .sortDropdown {
    top: 50px;
    right: auto;
  }

  .imgBlogBanner img {
    width: 100%;
    height: 100% !important;
  }

  .articleBox {
    height: auto;
  }

  .contactInfo .image-div {
    height: 70px;
  }

  .contactInfo .image-div img {
    max-height: 48px;
  }

  .facProductImg img {
    height: 100% !important;
  }

  .subscription-section {
    padding: 1rem !important;
  }

  .subscription-left,
  .subscription-right {
    padding: 1.5rem;
  }

  .calendar-buttons {
    margin: 0 !important;
  }

  .calendar-wrapper h2 {
    font-size: 18px
  }

  .dashboard-container {
    padding: 0;
  }

  .productPrice {
    padding: 10px 0px;
  }

  .activeCourseSlider {
    width: 100%;
  }

  .sd-courseCard {
    width: 100%;
    flex-direction: column;
  }

  .sd-courseCard img {
    width: 100%;
    height: 200px;
  }

  .ourMissionBg .nav-tabs {
    gap: 12px;
  }

  .MissionSection .nav-link {
    font-size: 14px;
  }

  .courseDetailWrap .courseConatnt .course-card-bottom .current-price {
    font-size: 28px;
    line-height: 32px;
  }

  .checkouSubTotal span {
    font-size: 18px;
  }

  .checkouSubTotal .subTotalAed {
    font-size: 18px;
  }

  .mycart .cartRight .viewOffer {
    font-size: 16px;
  }

  .nav-item.langmDropdown:hover .dropdown-menu {
    border: none;
  }

  .nav-item.langmDropdown .dropdown-menu .dropdown-item {
    padding: 0px;
  }

  .nav-item.langmDropdown .dropdown-menu {
    display: none;
  }

  .nav-item.langmDropdown .dropdown-menu.active {
    display: block;
    border: none;
  }

  .mobSearch {
    position: absolute;
    min-width: 300px;
    background-color: #fff;
    right: 0;
    padding: 12px;
    border-radius: 0px 0px 10px 10px;
    display: none;
  }

  .mobSearch.active {
    display: block;
  }

  .menu-search-form {
    width: 100%;
  }

  .mobSearch .menu-search-form [type="submit"] {
    right: 0;
    background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
    color: #ffffff;
    border-radius: 16px;
    font-size: 14px;
    left: auto;
    width: 80px;
  }

  .mobSearch .menu-search-form input {
    padding: 8px 85px 8px 12px;
  }

  .mobSearch .menu-search-form {
    border-radius: 16px;
  }


  .purchaseVidoo iframe {
    width: 100%;
    height: 100%;
  }

  .workshopProductContant {
    padding: 20px;
  }

  .workshopProductImg img {
    max-height: 230px;
    min-height: auto;
  }

  .bookingWrap .bookingDate {
    font-size: 14px;
  }

  /* footer css start here */

  .footer-title {
    font-size: 20px;
    padding-bottom: 6px;
  }

  .footer-social li a img {
    max-width: 40px;
  }

  .half-Width {
    width: 50%;
  }

  .footer-link .list-wrap li a {
    font-size: 14px;
    line-height: 26px;
  }

  .footer-widget {
    padding-top: 20px;
  }

  .paymentImg img {
    max-width: 40px;
    max-height: 40px;
  }

  .copy-right-text {
    font-size: 12px;
    text-align: center;
  }

  .footer-bottom-menu .list-wrap {
    gap: 7px;
    font-size: 12px;
  }
}

.btnDisabled {
  opacity: 0.5;
  pointer-events: none;
}

.explore {
  border-radius: 100px;
  border: 1px solid #d3d2df;
  padding: 12px 25px 10px;
  height: 50px;
  font-size: 15px;
}

.swiper-pagination-bullet {
  background-color: white !important;
  opacity: 0.7;
}

.swiper-pagination-bullet-active {
  background-color: white !important;
  opacity: 1;
}

.addFaqHead {
  align-items: flex-start;
  gap: 16px;
  flex-direction: column;
  justify-content: flex-start;
}

.courseRight .addFormBtn {
  margin-top: 17px;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  padding-left: 4px;
}

/*subscription landing*/
.subscription-section {
  padding: 3rem 1rem;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.subscription-container {
  display: flex;
  flex-wrap: wrap;
  border-radius: 24px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  max-width: 800px;
  border: 1px solid #bf2b91;
  overflow: hidden;
}

.subscription-left {
  background: #f4f7fa;
}

.subscription-right {
  /* background: #f7e5f2; */
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
}

.subscription-left,
.subscription-right {
  flex: 1 1 100%;
  padding: 4rem 2rem;
  /* margin-bottom: 2rem; */
}

@media (min-width: 768px) {

  .subscription-left,
  .subscription-right {
    flex: 1 1 50%;
    margin-bottom: 0;
    /* padding: 0 1rem; */
  }
}

.subscription-heading {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: black;
}

.subscription-description {
  font-size: 1rem;
  font-weight: 400;
  color: black;
}

.subscription-price {
  font-size: 1.75rem;
  font-weight: 700;
  color: #b035a1;
  margin-top: 1.5rem;
}

.subscription-price small {
  font-size: 1rem;
  font-weight: 400;
  color: black;
}

.subscription-btn {
  display: flex;
  justify-content: left;
  align-items: center;
  padding-top: 1rem;
}

.subscription-btn a {
  display: block;
  border-radius: 50px;
  padding: 15px 45px;
  font-size: 16px;
  color: #b0398d;
  font-weight: 500;
  line-height: 18px;
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  color: #fff;
  border: 2px solid #fff;
  text-transform: uppercase;
}

.subscription-btn a:hover {
  color: #b0398d;
  background: #fff;
  border: 2px solid #b0398d;
}

.subscription-right-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: white;
}

.subscription-list {
  list-style: none;
  padding-left: 0;
}

.subscription-list li {
  display: flex;
  margin-bottom: 12px;
  gap: 10px;
  font-size: 0.9rem;
  color: white;
  text-align: left;
}

.subscription-list img {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.cta-section {
  background: linear-gradient(90deg, #a73489, #df90ba);
  padding: 2rem 1rem;
  border-radius: 10px;
  font-family: "Poppins", sans-serif;
  color: #fff;
}

.cta-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

.cta-text {
  flex: 1 1 60%;
  min-width: 250px;
}

.cta-heading {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.cta-subtext {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #f6e9f3;
}

.cta-button-wrapper {
  flex: 1 1 30%;
  display: flex;
  justify-content: flex-end;
  min-width: 200px;
  margin-top: 1rem;
}

.cta-button {
  background-color: #fff;
  color: #a73489;
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
  text-align: center;
}

.cta-button:hover {
  background: linear-gradient(90deg, #a73489, #df90ba);
  color: #fff;
}

@media (max-width: 768px) {
  .cta-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-button-wrapper {
    justify-content: flex-start;
  }
}

.slotsGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 20px 0px;
}

.slotButton {
  background: rgba(190, 40, 144, 0.12);
  border: 1px solid rgba(191, 43, 145, 1);
  font-size: 14px;
  color: #000000;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 12px;
}

.slotButton:hover {
  background-color: #e0e0e0;
}

.slotButton.selected {
  background-color: rgba(191, 43, 145, 1);
  color: white;
  border-color: rgba(191, 43, 145, 1);
}

.unavailableSlots {
  text-align: center;
  color: red;
}

.student-card {
  border-radius: 12px;
  border: 1.34px solid #00000066;
  padding: 16px;
  /* box-shadow: 0px 4px 20px 0px #00000040; */
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.student-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: "row";
}

.student-card-body h5 {
  font-size: 20px;
  font-weight: 600;
  margin-top: 10px;
}

.student-card-body p {
  font-size: 16px;
  font-weight: 400;
  margin-top: 10px;
  color: #333;
  min-width: 30vw;
  max-width: 40vw;
}

.instuTop {
  padding: 30px 0px;
}

.trainerProfileBanner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 550px;
  /* required when using Image with 'fill' */
  overflow: hidden;
  border-radius: 24px;
}

.trainerProfileBanner .profileBannerContent {
  position: absolute;
  padding: 50px;
  width: 300px;
  z-index: 1;
}

.trainerProfileBannerImg {
  object-fit: cover;
  border-radius: 24px;
}

.instructor-section1 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: #fff;
  width: 50vw;
}

.instructor-content1 {
  /* flex: 1; */
  width: 497px;
}

.instructor-content1 h5 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 8px;
}

.instructor-content1 h1 {
  font-size: 42px;
  font-weight: 700;
  margin: 0;
}

.instructor-content1 p {
  font-size: 16px;
  margin: 8px 0 0;
}

.highlight1 {
  color: #fff;
  font-weight: bold;
}

.instructor-stats1 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 24px 0;
  width: 300px;
}

.instructor-stats1 div {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
}

.instructor-content1 h3 {
  font-size: 22px;
  font-weight: 600;
  margin-top: 20px;
}

.about-text1 {
  font-size: 16px;
  line-height: 1.6;
  color: #ddd;
}

.instructor-image1 img {
  width: 360px;
  max-width: 100%;
  border-radius: 20px;
  object-fit: cover;
}

.stats-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 400px;
  flex-wrap: wrap;
  /* Add this to allow 2x2 layout */
}

.stat-item {
  width: 200px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0px;
}

.dialogOverlay {
  position: fixed;
  top: 50px;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.dialogBox {
  background: #fff;
  padding: 10px 20px 30px;
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.dialogBox h2 {
  font-size: 20px;
  font-weight: 600;
}

.dialogHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
  margin: 5px 0px;
}

.closebtn {
  cursor: pointer;
}

.dialogBox .balance,
.dialogBox .price {
  margin: 5px 0 15px;
  font-size: 16px;
}

.dialogBox .balance span {
  font-family: Poppins;
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  text-transform: capitalize;
  color: #bf2b91;
}

.dialogBox .price span {
  font-family: Poppins;
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  text-transform: capitalize;
  color: #000000;
}

.paymentOptions {
  display: flex;
  flex-direction: column;
}

.optionBox {
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-weight: 500;
}

.optionBox span {
  margin-left: 5px;
}

.optionBox:hover {
  border-color: #a73489;
}

.optionBox.selected {
  background: linear-gradient(90deg, #a73489, #df90ba);
  color: white;
  border-color: #a73489;
}

.optionBox.disabled {
  pointer-events: none;
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #c57eb0;
}

.facility-payment-methods {
  display: flex;
  flex-direction: column;
  /* vertical stack */
  gap: 12px;
  /* space between each option */
}

.facility-radio-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 500;
  position: relative;
}

.facility-radio-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #aaa;
  border-radius: 50%;
  margin-right: 8px;
  outline: none;
  position: relative;
  cursor: pointer;
  transition: border 0.3s, background-color 0.3s;
}

/* Circle fill when selected */
.facility-radio-option input[type="radio"]:checked {
  border-color: #a02d8d;
  background-color: #a02d8d;
}

/* Inner dot for visual cue */
.facility-radio-option input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
}

/* Disabled state */
.facility-radio-option input[type="radio"]:disabled {
  border-color: #ccc;
  background-color: #f0f0f0;
  cursor: not-allowed;
}

.facility-radio-option input[type="radio"]:disabled+span {
  opacity: 0.6;
  cursor: not-allowed;
}



.dialogActions {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.cancelBtn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  background-color: #fff;
  color: #000;
}

.message-group {
  display: flex;
  flex-direction: column;
  margin: 10px 0;
}

.message-group.left {
  align-items: flex-start;
}

.message-group.right {
  align-items: flex-end;
}

.message-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chatUser {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.message-contentBg {
  background-color: #f1f1f1;
  padding: 8px 12px;
  border-radius: 12px;
  margin-top: 4px;
  max-width: 80%;
}

.message-group.right .message-contentBg {
  background-color: #dcf8c6;
  /* WhatsApp-like admin style */
  text-align: right;
}

.chat-container {
  max-height: 500px;
  overflow-y: auto;
}

.dashboard-container {
  padding: 1rem;
  background: #fff;
  width: 100%;
}

.dashboard-container.dashboardInstructor {
  margin-left: 282px;
  position: relative;
  /* z-index: 1; */
  padding: 20px;
  min-height: calc(100vh - 282px);
}

.dashboard-heading {
  font-family: Poppins;
  font-weight: 600;
  font-size: 24px;
  line-height: 40px;
  letter-spacing: 0px;
  margin: 8px 0px;
  color: #101111;
}

.welcome-banner {
  position: relative;
  background: linear-gradient(98.5deg, #bf2b91 53.12%, #dfcff7 155.43%);
  color: white;
  padding: 2rem 3rem;
  border-radius: 15px;
  margin-bottom: 1.5rem;
  overflow: hidden;
  height: 136px;
}

.left-shape {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 300px;
  opacity: 0.6;
  z-index: 0;
}

.right-shape {
  position: absolute;
  top: 30px;
  right: -35px;
  width: 600px;
  opacity: 0.6;
  z-index: 0;
}

.profile-banner-line {
  position: absolute;
  top: -100px;
  right: 0px;
  width: 600px;
  opacity: 0.6;
  z-index: 0;
}

.trainer-profile {
  position: absolute;
  width: 450px;
  height: 600px;
  right: 80px;
  z-index: 0;
}

.welcome-banner h2 {
  position: relative;
  z-index: 1;
  font-weight: bold;
}

.welcome-banner p {
  position: relative;
  z-index: 1;
}

.stripe-verification {
  background: #fff1fb;
  border: 1px solid #00000080;
  padding: 1rem 1.5rem;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex: 1;
  box-shadow: 0 10px 64px rgba(0, 0, 0, 0.08);
  flex-wrap: wrap;
  gap: 20px;
}

.stripe-verification-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.balance-info h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #000000;
}

.balance-info h2 {
  font-size: 32px;
  font-weight: 700;
  color: #bf2b91;
}

.earnings-section {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;

}

.td-card {
  background: white;
  border-radius: 10px;
  padding: 1rem;
  flex: 1;
  box-shadow: 0 10px 64px rgba(0, 0, 0, 0.08);
  border: 1px solid #00000080;
}

.graph-placeholder {
  height: 150px;
  background: #f4e3f7;
  margin-top: 1rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9b59b6;
}

.upcoming-workshops {
  margin-top: 2rem;
}

.upcoming-workshops h3 {
  margin-bottom: 0.5rem;
}

.calendar-section {
  margin-top: 2rem;
}

.calendar-and-events {
  display: flex;
  gap: 2rem;
}

.calendar-box {
  background: white;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.calendar-placeholder {
  /* height: 280px;
  width: 300px; */
  background: #f5f0f8;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}

/* Course Overview */
.course-overview h2 {
  font-size: 22px;
  margin-bottom: 20px;
}

.course-card-box {
  background-color: #fff;
  text-align: center;
  padding: 24px;
}

.course-card-box img {
  width: 512px;
  height: auto;
  max-width: 100%;
  margin-bottom: 15px;
}

.course-text {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 16px;
  color: #666;
}

/* Button */
.browse-btn {
  background-color: #d97fbf;
  border: none;
  padding: 10px 25px;
  border-radius: 20px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  margin-top: 10px;
}

.browse-btn:hover {
  background-color: #c16cad;
}

.event-list {
  flex: 1;
}

.event-item {
  background: #fdeef7;
  border-radius: 10px;
  padding: 0.8rem;
  margin-bottom: 1rem;
  border-left: 5px solid #925fe2;
}

.income-section {
  margin-top: 3rem;
}

.income-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.td-tabs {
  display: flex;
  gap: 1rem;
}

.td-tab {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  background: #f2f2f2;
  cursor: pointer;
}

.td-tab.active {
  background: #925fe2;
  color: white;
}

.search-filter {
  display: flex;
  justify-content: space-between;
  margin: 1rem 0;
  gap: 1rem;
}

.search-filter input {
  flex: 1;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.search-filter select {
  padding: 0.5rem 1rem;
  border-radius: 8px;
}

.income-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.income-table th {
  background: #efd7e8;
}

.income-table th,
.income-table td {
  padding: 1rem;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.green-text {
  color: #4caf50;
}

.td-pagination {
  display: flex;
  gap: 0.5rem;
}

.td-pagination button {
  padding: 0.4rem 0.8rem;
  background: #eee;
  border: none;
  border-radius: 5px;
}

/* Header title */
.fc-toolbar-title {
  font-size: 20px;
  font-weight: 600;
  color: #333333;
}

/* Navigation buttons */
.fc .fc-button {
  background: #bf2b91;
  border: none;
  color: #fff;
  font-weight: 500;
  border-radius: 50%;
  padding: 6px 12px;
  margin: 0 4px;
}

.fc .fc-button:hover {
  background: #c57eb0;
}

.fc .fc-button:disabled {
  opacity: 0.5;
}

.fc .fc-button:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Day Cells */
.fc-daygrid-day {
  border: none;
  cursor: pointer;
}

.fc-daygrid-day-number {
  color: #555;
  font-weight: 500;
}

.fc-daygrid-event {
  background-color: transparent !important;
  border: none;
  color: #fff;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 4px;
}

/* Adjust spacing inside calendar */
.fc .fc-scrollgrid {
  border: none;
}

.fc .fc-daygrid-body {
  background-color: #fff;
}

/* Optional: Event hover */
.fc-daygrid-event:hover {
  background-color: transparent !important;
}

/* Header day labels (Sun to Sat) */
.fc-col-header-cell-cushion {
  color: black !important;
}

/* Weekend (Saturday & Sunday) date cells */
.fc-day.fc-weekend {
  color: red !important;
}

/* Today's cell background */
.fc-today-custom {
  background-color: #c57eb0 !important;
  color: white !important;
}

/* Event date background (via custom class) */
.fc-daygrid-day.fc-event-custom {
  background-color: #c57eb0 !important;
  color: white !important;
}

/* Event text customization */
.fc-event-custom .fc-event-title {
  color: black !important;
}

/* Header: Sun to Sat text color */
.fc-col-header-cell-cushion {
  color: black !important;
}

/* Weekend text color */
.fc-weekend {
  color: red !important;
}

/* Custom current date cell */
.fc-today-custom {
  background-color: c57eb0 !important;
  color: white !important;
}

/* Custom event cell */
.fc-event-cell {
  background-color: #bf2b91 !important;
  color: white !important;
}

/* Event block inside the grid */
.fc-event-content-custom {
  background-color: transparent !important;
  color: white !important;
  font-weight: bold;
}

/* General event styling */
.fc .fc-daygrid-event {
  background-color: transparent !important;

}

/* Make day number white for cells with events */
.fc-daygrid-day.has-event .fc-daygrid-day-number {
  color: white !important;
}

/* Optional: adjust hover/focus styles */
.fc .fc-daygrid-event:hover {
  background-color: #bf2b91 !important;
}

.fc-weekend .fc-daygrid-day-number {
  color: red !important;
}

/* When a day cell has an event */
.fc-event-cell .fc-daygrid-day-number {
  color: white !important;
}

.fc-today-custom .fc-daygrid-day-number {
  color: white !important;
}

.sliderContainer {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* Ensure vertical scrolling */
  max-height: 100%;
  /* Set your preferred height */
}

/* Custom scrollbar for WebKit browsers */
.sliderContainer::-webkit-scrollbar {
  width: 6px;
  /* Width of the scrollbar */
}

.sliderContainer::-webkit-scrollbar-track {
  background: transparent;
  /* Track color */
}

.sliderContainer::-webkit-scrollbar-thumb {
  background-color: #b4b4b4;
  /* Scrollbar thumb color */
  border-radius: 10px;
  border: 1px solid transparent;
}

.sliderContainer::-webkit-scrollbar-thumb:hover {
  background-color: #555;
  /* On hover */
}

/* Optional: Firefox scrollbar (limited customization) */
.sliderContainer {
  scrollbar-width: thin;
  /* Firefox */
  scrollbar-color: #b4b4b4 transparent;
  /* Firefox */
}

.slider_card {
  display: flex;
  flex-direction: row;
  border-radius: 12px;
  scroll-snap-align: start;
  padding: 10px;
  align-items: center;
}

.slider_dateBox {
  background: #bf2b91;
  border-radius: 20px;
  color: white;
  padding: 20px;
  min-width: 180px;
  text-align: center;
  margin-right: 20px;
}

.slider_date {
  font-size: 18px;
  font-weight: bold;
}

.slider_time {
  font-size: 14px;
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  padding-top: 10px;
}

.slider_content {
  display: flex;
  flex-direction: column;
}

.slider_title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
}

.slider_author {
  font-size: 14px;
  color: #555;
  margin-bottom: 4px;
}

.slider_venue span {
  font-weight: 600;
}

.slider_venue {
  font-size: 14px;
  color: #333;
}

.table-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
  vertical-align: middle;
}

.user-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
  border-bottom: 1px solid lightgray;
}

.user-tab {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-bottom: 2px solid transparent;
  transition: 0.3s ease;
  width: 50%;
  gap: 8px;
}

.user-tab span {
  font-family: Poppins;
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: 0px;
  text-transform: capitalize;
}

.user-tab img {
  margin-right: 5px;
}

.user-tab.active {
  border-bottom: 2px solid #bf2b91;
  color: #bf2b91;
  font-weight: bold;
}

.tab-content {
  position: relative;
  overflow: hidden;
}

.sd-container {
  padding: 30px;
  font-family: "Segoe UI", sans-serif;
}

.sd-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

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

.sd-viewAllBtn {
  background-color: #d97fbf;
  border: none;
  border-radius: 20px;
  padding: 6px 18px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.sd-courseCard {
  display: flex !important;
  background-color: #fff;
  overflow: hidden;
  padding: 15px;
  gap: 15px;
  align-items: flex-start;
  /* box-shadow: 0px 4px 24px 0px #00000040; */
  border-radius: 12px;
  border: 1px solid #00000080;
}

.sd-courseImage {
  /* width: 150px;
  height: auto; */
  /* object-fit: cover; */
  border-radius: 8px;
}

.sd-courseContent {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 310px !important;
}

.sd-courseTitle {
  font-size: 18px;
  font-weight: bold;
  color: #000;
  margin-bottom: 5px;
}

.sd-author {
  font-size: 13px;
  color: #444;
  margin-bottom: 5px;
}

.sd-description {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* 🔹 Show max 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sd-progressContainer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.sd-progressBar {
  flex: 1;
  background-color: #eee;
  height: 8px;
  border-radius: 5px;
  overflow: hidden;
}

.sd-progressFill {
  height: 100%;
  background: #4747b9;
  width: 50%;
}

.sd-progressText {
  font-size: 12px;
  font-weight: 600;
  color: #333;
}

.sd-resumeBtn {
  color: #b0398d;
  background: #fff;
  border: 2px solid #b0398d;
  display: block;
  border-radius: 50px;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 500;
  line-height: 18px;
  text-transform: uppercase;
}

.sd-resumeBtn:hover {
  background: linear-gradient(90deg, #b0398d 0%, #cf93b7 100%);
  color: #fff;
  border: 2px solid #fff;
}

.live-chip {
  display: inline-block;
  background-color: #3bdc2a;
  /* Bright green */
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 12px;
  border-radius: 24px;
  height: 20px;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  font-family: sans-serif;
  /* Optional: match with app font */
}

.completed-courseCard {
  background: white;
  border-radius: 10px;
  padding: 0.5rem;
  flex: 1;
  box-shadow: 0 10px 64px rgba(0, 0, 0, 0.08);
  border: 1px solid #00000080;
}

.completed-courseCard img {
  width: 100%;
  height: 240px;
  object-fit: inherit;
}

.completed-courseTitle {
  font-size: 14px;
  font-weight: 600;
  padding: 8px 0px;
}

.completed-progressBar {
  height: 6px;
  background-color: #e0e0e0;
  border-radius: 3px;
  margin: 0 10px;
  position: relative;
  overflow: hidden;
}

.completed-progressFill {
  background-color: #4caf50;
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.completed-ratingButton {
  background-color: #fce4ec;
  color: #000;
  padding: 10px;
  text-align: center;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  font-size: 14px;
}

.completed-ratingButton .completed-star {
  margin-right: 6px;
  color: gold;
}

.qr-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.qr-modal-content {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.active-sub-details {
  margin-top: 10px;
  gap: 10px;
}

.subscription-card {
  background-color: #fce8f4;
  border-radius: 20px;
  padding: 24px;
  max-width: 400px;
  font-family: "Arial", sans-serif;
  color: #000;
}

.status-chip {
  display: inline-block;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 16px;
  gap: 10px;
  border-radius: 60px;
  border-width: 1px;
  color: #fff;
  border: 1px solid #fff;
}

.subscription-details {
  list-style: none;
  padding: 0;
  margin: 0;
}

.subscription-details li {
  margin-bottom: 16px;
  font-size: 16px;
  color: #fff;
}

.invoice-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}

.table-status-chip {
  display: inline-block;
  gap: 10px;
  padding: 10px 24px;
  border-radius: 60px;
  border-width: 1px;
  border-style: solid;
  font-weight: 500;
}

/* Status Modifiers */
.table-status-chip.success {
  background: #4bb5431f;
  border-color: #4bb543;
  color: #4bb543;
}

.table-status-chip.pending {
  background: #ffc1071f;
  border-color: #ffc107;
  color: #ffc107;
}

.table-status-chip.failed {
  background: #ff3b301f;
  border-color: #ff3b30;
  color: #ff3b30;
}

.qr-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.qr-modal {
  background: #fff;
  border-radius: 8px;
  width: 95%;
  max-width: 600px;
  padding: 24px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  font-family: "Segoe UI", sans-serif;
}

.step-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
}

.setup-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.step-section {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.step-number {
  font-size: 18px;
  font-weight: bold;
  background-color: #b035a1;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  text-align: center;
  line-height: 32px;
  margin-top: 4px;
  min-width: 32px;
}

.qr-code-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: fit-content;
  gap: 10px;
}

.qr-image {
  width: 178px;
  height: 178px;
}

.otp-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.otp-form input {
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 24px;
}

.mfa-button-row {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 16px;
}

.btn-cancel {
  padding: 10px 20px;
  border: none;
  font-weight: bold;
  background: white;
  cursor: pointer;
  color: #333;
}

.qr-code-container {
  border: 1px solid #ccc;
  min-width: 180px;
  min-height: 180px;
  margin-bottom: 10px;
}

.html-white * {
  color: #fff !important;
}

.html-black * {
  color: #000 !important;
}

.revenueCard {
  width: 100%;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  overflow-x: auto;
  /* just in case */
}

/* Status Modifiers */
.revenue-type.workshop {
  background: #4bb5431f;
  border-color: #4bb543;
  color: #4bb543;
  border-radius: 10px;
  padding: 3px 10px;
}

.revenue-type.course {
  background: #ffc1071f;
  border-color: #ffc107;
  color: #ffc107;
  border-radius: 10px;
  padding: 3px 10px;
}

.revenue-type.subscription {
  background: #ff3b301f;
  border-color: #ff3b30;
  color: #ff3b30;
  border-radius: 10px;
  padding: 3px 10px;
}

.payment-status.paid {
  background: #4bb5431f;
  border-color: #4bb543;
  color: #4bb543;
  border-radius: 10px;
  padding: 3px 10px;
}

.payment-status.pending {
  background: #ffc1071f;
  border-color: #ffc107;
  color: #ffc107;
  border-radius: 10px;
  padding: 3px 10px;
}

.payment-status.failed {
  background: #ff3b301f;
  border-color: #ff3b30;
  color: #ff3b30;
  border-radius: 10px;
  padding: 3px 10px;
}

.remove-btn {
  position: absolute;
  top: 28px;
  right: 28px;
  background: #dc3545;
  color: #fff;
  border: none;
  border-radius: 10px;
  width: fit-content;
  height: 28px;
  font-size: 13px;
  cursor: pointer;
  z-index: 2;
  transition: background 0.3s ease, transform 0.2s ease;
}

.remove-btn:hover {
  background: #c82333;
  /* Slightly darker red */
  transform: scale(1.05);
  /* Slight zoom */
}

.download-certificate-btn {
  position: absolute;
  top: 28px;
  right: 28px;
  background: #be2890;
  color: #fff;
  border: none;
  border-radius: 10px;
  width: fit-content;
  height: 28px;
  font-size: 13px;
  cursor: pointer;
  z-index: 2;
  transition: background 0.3s ease, transform 0.2s ease;
}

.download-certificate-btn:hover {
  background: white;
  color: #be2890;
  border: 1px solid #be2890;
  transform: scale(1.05);
}

.notification-card1 {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background-color: #f1ddeb;
  padding: 16px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin: 20px 0px;
  cursor: pointer;
  /* max-width: 1000px; */
}

.notification-card1.read {
  background-color: #ffffff;

}

.notification-delete-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #b0398d;
  color: #ffffff;
  font-size: 12px;
  border: 2px solid #b0398d;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.notification-delete-btn:hover {
  background-color: #cf93b7;
}

.notification-left1 {
  display: flex;
  gap: 12px;
  padding-right: 32px;
}

.notification-left1.unread {
  cursor: pointer;
}

.notification-left1.read {
  cursor: default;
}

.notification-left1 img {
  width: 48px;
  height: 48px;
}

.notification-text1 h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.notification-text1 p {
  font-size: 14px;
  margin: 4px 0 0;
}

.notification-time1 {
  font-size: 14px;
  color: #6b7280;
  /* gray-500 */
  margin-top: 4px;
  min-width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.notification-status {
  font-size: 12px;
  margin-top: 5px;
  padding: 2px 6px;
  border-radius: 8px;
  background-color: #f3f4f6;
  /* Tailwind gray-100 */
  color: #374151;
  /* Tailwind gray-700 */
  width: fit-content;
}

.notification-status.unread {
  background-color: #fde2e2;
  color: #b91c1c;
  font-weight: 600;
}

.notification-status.read {
  background-color: #d1fae5;
  color: #065f46;
  font-weight: 500;
}

.spiner-loader {
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.text-muted {
  font-size: 0.875rem;
  color: #6c757d;
  display: block;
  margin-top: 0px;
  padding-top: 0px;
}

.calendar-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px,
}

.calendar-buttons {
  display: flex;
  gap: 5px;
  margin: 20px;
}

.calendar-buttons button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: white;
  cursor: pointer;
  transition: 0.3s;
  border: none;
}

.no-data-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
  border: 2px dashed #ccc;
  border-radius: 12px;
  background-color: #fafafa;
  color: #666;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  margin: 16px 0;
  width: 100%;
  box-sizing: border-box;
}

/* Responsive font size adjustment */
@media (max-width: 767px) {
  .no-data-placeholder {
    height: 120px;
    font-size: 16px;
    margin: 12px 0;
  }
}


@font-face {
  font-family: 'UAEDirham';
  src: url('/fonts/UAE-dirham.woff') format('woff'),
    url('/fonts/UAE-dirham.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Apply font only to this class */
.uae-dirham {
  font-family: 'UAEDirham' !important;
}


/* Responsive adjustments */
@media (max-width: 768px) {
  .timeLineSection {
    padding-bottom: 0px;
  }

  .timeline-container {
    flex-wrap: nowrap;
    margin-top: 0px !important;
    gap: 12px;
    overflow: auto;
    padding: 10px 0px;
  }

  .timeline-item.bottom {
    align-self: flex-end;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .timeline-item.bottom {
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-self: center !important;
  }

  .timeline-item.top {
    padding-bottom: 0 !important;
    align-self: center !important;
  }

  .timeline-horizontal-line {
    border-top: 1px dashed lightgrey !important;
  }

  .timeline-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
  }

  .circle {
    width: 60px;
    height: 60px;
    font-size: 12px;
  }

  .circle::before {
    width: 20px;
  }

  .trainerProfileBanner .profileBannerContent {
    padding: 0px;
    width: 100%;
  }

  .trainerProfileBanner {
    align-items: flex-start;
    height: 100vh;
    padding: 24px;
    border-radius: 0px;
  }

  .trainerProfileBannerImg {
    border-radius: 0;
  }

  .instructor-content1 h1 {
    font-size: 24px;
  }

  .stat-item {
    width: 100%;
    padding: 4px;
  }

  .instructor-content1 p {
    font-size: 14px;
    word-break: break-word;
    max-width: 85%;
  }

  .instructor-section1 {
    width: 100%;
    flex-wrap: wrap;
  }

  .sectionTitle .course_title {
    font-size: 28px;
    line-height: 34px;
  }

  .trainer-profile {
    width: 180px;
    height: 180px;
    right: 0;
    bottom: 0;
  }

}

.toggle-lang {
  justify-content: start;
  margin-top: 10px;
}

.extra-spacing {
  padding: 30px !important;
}


.enroll-hover:hover {
  text-decoration: underline;
}

.certificate-container {
  padding: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.spinner-overlay {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
}

.spinner-border {
  width: 70px;
  height: 70px;
  border-width: 5px;
}

.spinner-progress-text {
  position: absolute;
  font-size: 16px;
  font-weight: 600;
  color: #7b2cbf;
  /* match your theme color */
}

#react-select-4-live-region {
  display: none !important;
}

span[aria-live="polite"][role="log"] {
  display: none !important;
}


.auth-bg {
  position: relative;
}

.back-btn {
  position: absolute;
  top: 15px;
  left: 15px;
  background: linear-gradient(90deg, #a73489, #df90ba);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  z-index: 2;
  backdrop-filter: blur(4px);
  transition: 0.2s;
}

.back-btn:hover {
  background: linear-gradient(90deg, #df90ba, #a73489);
}

.info-box {
  background: #fbdbec;
  border-left: 4px solid #a73489;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 18px;
}

.info-box h6 {
  margin: 0 0 4px;
  font-weight: 600;
}

.no-style-link {
  color: inherit;
  text-decoration: none;
}

.no-style-link:hover {
  color: inherit;
}

.facilityDiv {
  display: flex;
  align-items: start;
  justify-content: space-between;
  margin-left: 0rem;
}

.spinner-class {
  display: flex;
  align-items: center;
  justify-content: center;
}


.active-lang {
  background: linear-gradient(90deg, #df90ba, #a73489);
  color: #fff !important;
}


.password-wrapper {
  position: relative;
  width: 100%;
}

.password-wrapper input {
  padding-right: 40px !important;
  /* space for icon */
}

.password-wrapper .eyeIcon {
  position: absolute;
  right: 12px;
  /* adjust if needed */
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  cursor: pointer;
  opacity: 0.7;
}

.password-wrapper .eyeIcon:hover {
  opacity: 1;
}


.pagination-wrapper .pagination .page-item .page-link {
  background: #fff;
  border: 1px solid #df90ba;
  color: #a73489;
  padding: 8px 14px;
  border-radius: 8px;
  margin: 0 4px;
  transition: all 0.3s ease;
}

/* Active Page */
.pagination-wrapper .pagination .page-item.active .page-link {
  background: linear-gradient(90deg, #df90ba, #a73489);
  border-color: transparent;
  color: #fff !important;
  box-shadow: 0 3px 8px rgba(167, 52, 137, 0.4);
}

/* Hover */
.pagination-wrapper .pagination .page-item .page-link:hover {
  background: linear-gradient(90deg, #df90ba, #a73489);
  color: #fff !important;
  border-color: transparent;
}

/* Disabled */
.pagination-wrapper .pagination .page-item.disabled .page-link {
  background: #f8f8f8 !important;
  color: #b3b3b3 !important;
  border-color: #e0e0e0 !important;
  cursor: not-allowed;
}

.sortDropdown li button.sortDropdownItem {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
  display: block;
}

.sortDropdown li button.sortDropdownItem:hover {
  color: var(--theme-color, #ff6600);
  /* your hover color */
}

/* ===== BACKDROP ===== */
.modal-backdrop-custom {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 15px;
}

/* ===== MODAL BOX ===== */
.modal-custom {
  background: #fff;
  width: 100%;
  max-width: 420px;
  padding: 25px 20px;
  border-radius: 12px;
  text-align: center;
  position: relative;
  animation: fadeInScale 0.25s ease-out;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Smooth animation */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== HEADER TEXT ===== */
.modal-custom h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 18px;
  color: #333;
}

/* ===== INPUT FIELD ===== */
.modal-custom input.form-control {
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 16px;
}

/* ===== BUTTON WRAPPER ===== */
.modal-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}


/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
  .modal-custom {
    max-width: 350px;
    padding: 20px 15px;
  }


  .modal-custom h3 {
    font-size: 18px;
  }
}


.pagination li.disabled a {
  pointer-events: none !important;
  opacity: 0.5;
  cursor: default;
}


.remark-container {
  border: 1px solid #dedede;
  background: #fafafa;
  padding: 16px;
  border-radius: 8px;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: Arial, sans-serif;
}

.remark-title {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.remark-box {
  background-color: #fff3cd;
  border-left: 4px solid #ffcc00;
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 14px;
}

.remark-box p {
  margin: 0;
  color: #5a4b00;
  font-size: 15px;
}

.override-btn {
  width: 100%;
  background: #007bff;
  border: none;
  padding: 12px 14px;
  border-radius: 6px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.override-btn:hover {
  background: #0056b3;
}

.stripebtndiv {
  gap: 20px;
  display: flex;
  flex-direction: column;
  align-items: start;
}

.star-rating {
  position: relative;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
}

.stars-back {
  color: #ccc;
}

.stars-front {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: hidden;
}

.btn_disabled {
  pointer-events: none;
  opacity: 0.6;
  cursor: not-allowed;
}

/* ===== Order Details Dialog ===== */



.clickable-row:hover {
  cursor: pointer;
  background: #f0f0f0;
}

.order-details-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;
}

.order-details-modal {
  background: #ffffff;
  width: 100%;
  max-width: 800px;
  max-height: 85vh;
  overflow-y: auto;
  margin-top: 100px;
  border-radius: 8px;
  padding: 20px;
  position: relative;
}

/* Header */
.order-details-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 16px;
}

/* Close button – TOP LEFT */
.order-details-header button {
  position: absolute;
  left: 0;
  top: 0;

  font-size: 26px;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
}

/* Table */
.order-details-table {
  width: 100%;
  border-collapse: collapse;
}

.order-details-table th,
.order-details-table td {
  padding: 10px;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.order-details-table th {
  font-weight: 600;
  background-color: #edd7e7;
}

/* Summary */
.order-details-summary {
  margin-top: 20px;
  text-align: right;
}

.order-details-summary p {
  margin: 4px 0;
}

.order-details-summary .grand-total {
  font-size: 18px;
  font-weight: 700;
  margin-top: 8px;
}