html {
    margin:0;
    padding:0;
	width: 100%; 
	height: 100%;
	display: flex;
    flex-direction: column;
    align-items: center;
}

p,span,div,h1,h2,h3,h4 {
  user-select: none;
}

body {
    margin:0;
    padding:0;
	width: 100%;
	height: 100%;
    overflow-x: hidden;
	overflow-y: scroll;
	display: flex;
    flex-direction: column;
    align-items: center;
}


.crumb {
    min-height: 200px;
    padding-top: 80px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: black;
    background-image: url(images/bck.png);
    background-size: cover;
}

span.crumbInnerSpan {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    max-width: 400px;
    gap: 10px
}

h3.crumbPageTitle {
    color: white;
    font-size: 45;
    font-weight: 800;
}


/* For webkit-based browsers (Chrome, Safari) */
body::-webkit-scrollbar {
    opacity: 0;
  display: none; /* Hide the scrollbar */
}

/* For Firefox */
body {
  scrollbar-width: 0; /* Hide scrollbar */
  scrollbar-opacity: 0;
}

/* width */
::-webkit-scrollbar {
  width: 0;
}

p,h1,h2,h3,h4,span {
margin: 0;
padding: 0;
font-family: system-ui;
}

.headerDiv2 {
display: flex;
    gap: 30px;
    justify-content: space-between;
    align-items: center;
    min-width: 20%;
    cursor: pointer;
}

.headerDiv3 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-right: 20px;
    min-width: 40%;
}

i.menu {
display: none;    
}

img.headerLogo {
    height: 30px;
    cursor: pointer;
}

img.appStoreIcon {
    height: 35px;
    cursor: pointer;
}

.mainDivInner2 {
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
}

img.mainImg {
    height: 350px;
    border-radius: 10px;
    width: 350px;
    animation: bounce 2s infinite ease-in-out;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-40px);
    }
}

span.mobileMenuActionSpan {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.prefooter {
    display: flex;
    background: #fffbf6;
    width: calc(100% - 100px);
    justify-content: center;
    align-items: center;
    border-radius: 20px 20px 0 0;
}

span.mobileMenuList {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

h2.appSectonTitle {
    font-size: 30px;
    color: #f1b90c;
}

p.appSectionDescr {
    font-size: 16px;
    color: #191919;
}

span.appSectionWriteupSpan {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.prefooterInner1 {
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
    padding: 40px 0;
}

footer.footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-top: 30px;
    background-color: black;
}

p.footerAboutText {
    width: 80%;
    font-size: 13px;
    color: white;
    font-weight: 300;
}

.innerFooter {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% - 100px);
    gap: 30px;
}

.groupFooterMenu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}

img.socialImg {
    width: 100%;
}

span.footerLogoSpan {
    width: 100%;
}

img.footerLogoImg {
    height: 30px;
}

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

span.scanAppQrSpan {
    width: 60px;
    height: 60px;
    padding: 10px;
    border-radius: 10px;
    background: #f1b90c;
}

h3.contactUsTitle {
    font-size: 25px;
    color: black;
}

p.contactUsDescr {
    font-size: 15px;
    color: #848484;
}

span.contactUsFormInputGroup {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

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

span.contactBoxHeading {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.contactBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40%;
    max-width: 450px;
    gap: 30px;
    padding: 30px 20px;
    background: white;
    box-shadow: 1px 1px 11px 3px #80808030;
    border-radius: 20px;
}

button.contactUsSubmitBtn {
    height: 45px;
    width: 100%;
    border: 0;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 500;
    color: white;
    background: #f1b90c;
    cursor: pointer;
    margin-top: 30px;
}

button.contactUsSubmitBtn:hover {
background: #d2c2ff;
    color: #f1b90c;    
}

input.contactUsInput {
    height: 45px;
    border-radius: 10px;
    border: 0;
    background: #eaeaea;
    padding: 0 10px;
}

select.contactUsInput {
    height: 45px;
    border-radius: 10px;
    border: 0;
    background: #eaeaea;
    padding: 0 10px;
}

textarea.contactUsInput {
    height: 115px;
    border-radius: 10px;
    border: 0;
    background: #eaeaea;
    padding: 10px;
    font-family: system-ui;
}

div.map {
    width: 40%;
    height: 400px;
    max-width: 400px;
    border-radius: 20px;
}

textarea.contactUsInput,
input.contactUsInput,
select.contactUsInput {
  outline: 0;
}

textarea.contactUsInput:focus,
input.contactUsInput:focus,
select.contactUsInput:focus {
  border: solid 2px #f1b90c;
  outline: none;
}

b.requred {
    color: red;
}

button.courseFeatureBtn {
    border: 0;
    padding: 10px;
    border-radius: 10px;
    color: #f1b90c;
    background: #fff0c0;
    width: 30px;
    height: 30px;
    display: flex
;
    align-items: center;
    justify-content: center;
}

.contactUsDiv {
    padding: 50px 0;
    width: calc(100% - 50px);
    display: flex;
    justify-content: space-around;
}

span.mainSearchInputSpan.dark {
border: solid 1px white;
}

img.qrImg {
    width: 100%;
    height: 100%;
}

span.scanAppTxt {
    width: 60px;
    height: 60px;
    padding: 10px;
    border: 2px solid #f1b90c;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 600;
    color: #f1b90c;
    font-family: fangsong;
}

span.headerMenu {
    color: #6b6b6b;
    font-size: 14px;
    font-weight: 500;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.sectionCourses {
    width: calc(100% - 30px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 0;
    gap: 30px;
}

span.sectionHeadSpan {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

h2.sectionHeadTitle {
    font-size: 24;
    color: black;
}

p.sectionSubCategory {
    color: #7e7e7e;
    font-size: 17px;
}

.coursesScrollableDivMother {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

span.headerMenu:hover {
color: #f1b90c;    
}

i.scrollArow {
    min-width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    cursor: pointer;
    background: #f1b90c61;
    position: sticky;
    z-index: 1000000;
}

img.categoryImg {
    height: 100%;
    width: 100%;
    border-radius: 10px;
    opacity: 0.8;
}

img.categoryImg:hover {
opacity: 0.5;    
}

h3.categoryTitle {
    position: absolute;
    max-width: 80%;
    padding: 10px;
    background: #ffc107d6;
    color: black;
    font-size: 18px;
}

.categoryBox {
    min-width: 280px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1b90c17;
    border-radius: 20px;
    cursor: pointer;
    position: relative;
}

.sectionHeadInner {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

span.seeAllSpan {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

h2.pageCrumbTitle.dark {
    color: white;
}

p.pageCrumbLink.dark {
    color: #c7c7c7;
}

.cartItem.dark {
    background: black;
}

.cartTotalBox.dark {
    background: black;
}

h3.cartItemTitle.dark {
    color: white;
}

p.cartItemAuthorName.dark {
    color: #b4b4b4;
}

b.cartItemAuthorName.dark {
    color: white;
}

span.courseTimeCartt.dark {
    color: white;
}

p.orderCostFrst.dark {
    color: #c8c8c8;
}

h3.orderCostLst.dark {
    color: white;
}

.couponBox.dark {
    background: #ffe9c1;
}

span.orderCostList.dark {
    border-bottom: solid 1px #262626;
}

span.orderCostList.dark:last-child {
    border-bottom: 0;
}

h3.cartItemMainPrice.dark {
    color: white;
}

p.cartItemOldPrice.dark {
    color: #a9a9a9;
}

button.cartActionBtn.dark {
    border: 0;
    color: black;
}

h3.cartTotoalSecTitle.dark {
    color: white;
}

h3.seeAllText {
    font-size: 18px;
    font-weight: 600;
}

span.seeAllSpan:hover {
 color: #f1b90c;   
}

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

.scrollDiv {
    display: flex;
    align-items: center;
    gap: 20px;
    overflow-x: scroll;
    justify-content: flex-start;
    margin: 0 -10px;
    width: 100%;
    padding: 30px 10px;
    scroll-behavior: smooth;
}

.newPassBody {
    margin: 90px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: calc(100% - 100px);
    max-width: 400px;
    gap: 20px;
    padding: 20px;
    border-radius: 10px;
}

.PageCrumb {
    width: calc(100% - 30px);
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

span.pageCrumbLinkSpan {
    display: flex;
    justify-content: flex-start;
    gap: 5px;
}

p.pageCrumbLink {
    color: #b6b6b6;
    font-size: 15px;
    cursor: pointer;
}

p.pageCrumbLink.active {
    color: black;
    font-weight: 600;
}

.PageCrumb {
    width: calc(100% - 30px);
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.cartBody {
width: calc(100% - 50px);
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin: 50px 0;
}

.PageCrumb.sticky {
    margin-top: 140px;
}

.cartTotalBox {
padding: 20px;
    width: 30%;
    min-width: 250px;
    max-width: 350px;
    background: #ededed;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    height: fit-content;
}

.cartItemsBox {
width: 65%;
    background: 0;
    border-radius: 10px;
    max-width: 100%;
    height: fit-content;
    gap: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

img.cartItemImg {
    width: 150px;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
}

.cartItem {
display: flex;
    align-items: flex-start;
    gap: 10px;
    width: calc(100% - 40px);
    padding: 20px;
    background: #ededed;
    border-radius: 10px;
}


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

span.cartItemNameAuthor {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

h3.cartItemTitle {
    font-size: 18px;
    font-weight: 500;
    color: black;
    cursor: pointer;
}

h3.cartItemMainPrice {
    display: flex;
    align-items: center;
    font-size: 17px;
    width: max-content;
}

span.cartItemPrice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px
}

p.cartItemOldPrice {
    font-size: 14px;
    color: #666666;
    text-decoration: line-through;
}

.orderCostListBody {
    width: 100%;
display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: max-content;
    gap: 4px;
}

p.cartItemAuthorName {
    font-size: 13px;
    color: #898989;
}

b.cartItemAuthorName {
    color: #5f5f5f;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.coursePageTop {
    width: calc(100% - 100px);
    margin-top: 30px;
    padding: 20px;
    background: #ffeecf;
    border-radius: 10px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

button.shareCourseBtn {
    margin-top: 20px;
    height: 40px;
    padding: 0 15px;
    border: 0;
    border-radius: 10px;
    background: red;
    color: white;
    font-size: 15px;
    cursor: pointer;
}

.courseSectionDivider {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: calc(100% - 100px);
}

span.courseBigImgSpan {
    width: 100%;
    display: flex;
    height: 400px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
}

img.courseTutorDp {
    width: 40px;
    border-radius: 50px;
}

img.reviewDp {
    width: 40px;
    border-radius: 50px;
}

.courseSide2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    gap: 30px;
    min-width: 250px;
    max-width: 350px;
}

.mainCourseFtsBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border-radius: 20px;
    background: #f1f1f1;
    gap: 30px;
}

span.courseFtsList {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
}

h3.courseTutorNameDizz {
    font-size: 15px;
}

p.courseTutorRatingStar {
    font-size: 14px;
    font-weight: 600;
}

p.courseTutorAboutTxt {
    font-size: 14px;
    color: #626262;
}

span.courseTutorRating {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

button.addToCartBtn {
    height: 45px;
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: #f1b90c;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: black;
}

p.courseOldPriceDis {
    font-size: 14px;
    text-decoration: line-through;
    color: #717171;
}

h3.COURSEmainPriceDis {
    color: black;
    font-size: 19px;
}

span.courseAmtSpann {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

span.courseDiscountSpn {
    font-size: 14px;
    padding: 10px;
    color: red;
    background: #f9d7d7;
    border-radius: 10px;
}

button.buyCourseBtn {
    height: 45px;
    width: 100%;
    border: solid 2px #f1b90c;
    color: #f1b90c;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    background: #fffaec;
}

span.courseBuyActionsSpan {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

span.courseTutorHeadSpan {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

span.courseTutorLink {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    cursor: pointer;
}

.courseInfoNav {
    width: calc(100% - 30px);
    margin: 30px 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 10px;
    border-radius: 10px;
    border: solid 3px black;
}

span.courseNavSpan {
    height: 45px;
    background: #ffffff;
    min-width: 30%;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    cursor: pointer;
    color: black;
}

span.courseNavSpan.active {
    background: black;
    color: white;
}    

span.courTutorDpBigSpan {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

span.courseTutorProfInnSpn {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

span.courseTutorRatingSpnn {
    display: flex;
    align-items: center;
    gap: 5px;
}

i.crseRte {
    color: #f1b90c;
    font-size: 13px;
}

.courseTutorBoxBelow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

dv.courseTutorInfoBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border-radius: 20px;
    background: #f1f1f1;
    gap: 30px;
}

h3.courTutorTitleHead {
    font-size: 17px;
    color: black;
}

span.courseFetrsSpan {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

span.courseFtInnerSpan {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
}

span.courseAmtAndFts {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

img.courseBigImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

span.orderCostList {
width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: solid 1px #d1d1d1;
}

p.orderCostFrst {
    font-size: 15px;
    color: #414141;
}

h3.orderCostLst {
    font-size: 15px;
}

button.cartCheckoutBtn {
    height: 50px;
    width: calc(100% - 20px);
    margin: 10px 0;
    background: #f1b90c;
    color: black;
    font-size: 19px;
    font-weight: 600;
    border: 0;
    border-radius: 15px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: sans-serif;
}

h3.couponSectionTitle {
    font-size: 16px;
    color: black;
}

.couponBox {
        width: 100%;
display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 15px 10px;
    border: solid 1px #bebebe;
    border-radius: 10px;
    background: #ffe5b43d;
}

p.couponSectionDescription {
    font-size: 13px;
    color: #252525;
}

span.orderCostList:last-child {
border-bottom: 0;
}

span.couponInputSpan {
    height: 40px;
    margin-top: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 20px);
    background: white;
    padding: 5px 10px;
    border-radius: 50px;
}

input.counponInput {
    height: 80%;
    width: 100%;
    border: 0;
    font-size: 17px;
    font-weight: 500;
    color: grey;
    letter-spacing: 1.5px;
}

input.counponInput:focus {
outline: 0;
border: 0;
}

button.cartCheckoutBtn:hover {
background: #f9d462;    
}

button.couponBtn:hover {
background: #f9d462;    
}

.cartItemActionDiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

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

span.courseTimeCartt {
display: flex;
    align-items: center;
    gap: 5px;
    color: #555555;
    font-size: 12px;
    font-weight: 600;
}

button.cartActionBtn {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 30px;
    border-radius: 10px;
    border: solid 2px #919191;
    color: #666666;
    cursor: pointer;
    font-weight: 500;
}

button.cartActionBtn:hover {
background: #e0e0e0;
}

.actionDivvv {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

button.couponBtn {
    height: 40px;
    min-width: 90px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: #f1b90c;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: black;
}

h3.cartTotoalSecTitle {
    font-size: 17px;
    width: 100%;
    text-align: left;
    color: black;
}

.progressSpan {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: -50px;
}

span.progressCheck {
    width: 7px;
    height: 7px;
    display: flex;
    background: #cdcdcd;
    border-radius: 50px;
}

span.progressCheck.active {
width: 10px;
    height: 10px;
    background: #f1b90c;
}

i.scrollArow:hover {
background: #f1b90c    
}

span.headerButton:hover {
    background: #f1b90cba;
}

.courseBox {
    height: 100%;
    min-width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-direction: column;
    border: 0;
    gap: 10px;
    box-shadow: 2px 2px 14px 5px #80808045;
    padding: 10px;
}

p.courseReviewCount {
    font-size: 14px;
    font-weight: 500;
    color: #636363;
}

p.courseFeatureTitle {
    font-size: 13px;
    FONT-WEIGHT: 500;
    color: black;
}

span.courseImgBox {
    display: flex;
    width: 100%;
    height: 200px;
    align-items: center;
    justify-content: center;
    position: relative;
}

i.play {
    position: absolute;
    padding: 10px;
    background: #ffffffdb;
    border-radius: 50px;
    cursor: pointer;
    font-size: 25px
}

i.play:hover {
background: #f1b90c;
}

.courseRevBx {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    width: 100%;
}

.courseActionBtnDiv {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 10px;
}

button.addCrseCart {
    height: 35px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    color: black;
    font-weight: 600;
    background: #f1b90c;
}

.courseFeatureIcon {
    font-size: 17px;
}

.sectionSteps {
    width: calc(100% - 100px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    padding: 50px 0;
}

button.addCrseCart:hover {
background: #ffe38c;
}

h3.courseRateDz {
    font-size: 16px;
}

p.crossedPrice {
    font-size: 13px;
    color: #aaaaaa;
    text-decoration: line-through;
    text-align: left;
}

h3.mainCrsPrice {
    font-size: 18px;
    color: black;
}

span.ratingStarsSpan {
    display: flex;
    align-items: center;
    gap: 2px;
}

i.ratingsStar {
    color: #f1b90c;
    font-size: 13px;
}

button.mobileMenuCallBtn {
    height: 40px;
    min-width: 100px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 500;
    color: black;
    background: #f1b90c;
}

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

h3.courseTitle {
    margin: 0;
    font-family: sans-serif; 
    font-size: 16px; 
    text-align: left;
    font-weight: 600;
    width: 100%;
    cursor: pointer;
}

i.loveCourse {
padding: 10px;
    border: solid 1px #dfdfdf;
    border-radius: 10px;
    color: #c3c3c3;
    cursor: pointer;
}

i.loveCourse.active {
color: red;    
}

span.courseActionSpan {
    display: flex;
    align-items: center;
    gap: 5px;
}
 
.courseFeaturesDisp {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

span.courseFeatureBox {
    display: flex;
    align-items: center;
    gap: 7px;
}

.courseDivSec {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% - 10px);
    gap: 20px;
}

img.courseImg {
    width: 100%;
    height: 100%;
    opacity: 0.7;
    border-radius: 10px;
    background: #ffa50057;
    cursor: pointer;
}

img.playIcon {
    width: 30px;
    position: absolute;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff70;
    border-radius: 50px;
}

img.playIcon {
    width: 50px;
}

i {
display: flex;
}

i.downloadApp {
    transform: rotate(316deg);
    font-size: 16px;
}

span.headerMenu.active {
    color: #f1b90c;
}

span.headerButton {
display: flex;
    align-items: center;
    gap: 10px;
    height: 35px;
    padding: 0 15px;
    background: #f1b90c;
    border-radius: 50px;
    color: black;
    cursor: pointer;
    font-size: 13px;
}

span.switchModeSpan {
    width: 30px;
    height: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: solid 2px grey;
    border-radius: 50px;
    cursor: pointer;
}

img.switchCountryFlagImg {
    height: 25px;
    width: 25px;
    border-radius: 50px;
    cursor: pointer;
    padding: 5px;
    background: #1ac91a2e;
}

div.countryListModal {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 20px;
    background: white;
    box-shadow: 1px 1px 6px 1px #80808024;
    position: fixed;
    top: 80px;
    right: 10px;
    z-index: 100000;
    border-radius: 20px;
}

span.errorNotice {
    width: auto;
    max-width: 300px;
    height: auto;
    background: white;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 15px;
    position: fixed;
    top: 90px;
    border-radius: 10px;
    gap: 10px;
    z-index: 100000;
    box-shadow: 1px 1px 3px 2px #80808070;
    transition: right 0.5s ease, opacity 0.5s ease;
  opacity: 0;
}


.faqBox {
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 10px 0;
  overflow: hidden;
  transition: all 0.3s ease;
  width: 100%;
}

.loggedNavDiv {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
}

img.loggedInDp {
width: 35px;
height: 35px;
cursor: pointer;
border-radius: 50px
}

div.courseInfoSecDiv {
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}

span.courseRatingSpan {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #eeeeee;
    border-radius: 10px;
    padding: 30px 20px;
}

h3.reviewerName {
    font-size: 15px;
    margin-bottom: 5px;
}

p.reviewMsg {
    margin-top: 13px;
    font-size: 15px;
    color: #1a1a1a;
}

button.seeAllReviewsBtn:hover {
background: #b4b4b4;    
}

button.addToCartBtn:hover {
background: #fad35a;
}

button.buyCourseBtn:hover {
    background: #ffeebd;
}

button.seeAllReviewsBtn {
    height: 40px;
    padding: 0 20px;
    border: solid black 2px;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    background: #ececec;
    margin-top: 30px;
}

span.reviewNameAndDate {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

p.reviewDate {
    font-size: 12px;
    color: #868686;
    font-weight: 600;
}

.courseManSide {
    width: 65%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

span.reviewRateStarsSpan {
    display: flex;
    gap: 2px;
    font-size: 11px;
    color: orange;
}

span.cartIconSpan {
    display: flex;
    align-items: center;
    cursor: pointer;
}

i.cartIcon {
    font-size: 25px;
    cursor: pointer;
}

i.cartIcon.dark {
    color: white;
}

button.cartItemCount.dark {
    border: solid 3px black;
}

button.cartItemCount {
    border-radius: 50px;
    color: black;
    height: auto;
    width: auto;
    margin-top: -20px;
    margin-left: -10px;
    border: solid 3px white;
    background: #f1b90c;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

.questionSpan {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
  background: #f5f5f5;
}

.questionSpan .arrow {
  border: solid #f1b90c;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 6px;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.faqBox.active .arrow {
  transform: rotate(-135deg); /* arrow points down when open */
}

.answer {
  max-height: 0;
  font-family: system-ui;
  padding: 0 20px;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}

.faqBox.active .answer {
  max-height: 500px; /* adjust based on content */
  padding: 15px 20px;
  color: #898989;
}

.faqBoxes {
    width: calc(100% - 100px);
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 700px;
}

.mainBodySec {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 0;
    background: #fff8ea;
}

img.becomeAffiliateImg {
    width: 300px;
}

h3.question.light {
    font-size: 18px;
    color: #585858;
    font-weight: 500;
}

.affiliateTxtDiv {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.mainBodySecInner {
    width: calc(100% - 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

.errorNotice.showw {
  right: 20px; /* slide in */
  opacity: 1;
}

p.noticeMsg {
    font-size: 19px;
    color: black;
} 

i.error {
    font-size: 21px;
    color: red;
}

i.success {
    color: #0cbb0c;
    font-size: 21px;
}

div.mobileMenuModal {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    background: white;
    z-index: 10000000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px
}

img.appstorIconMobile {
    height: 45px;
}
h3.mobileMenu.active {
    color: #f1b90c;
}

h3.mobileMenu {
    color: #929292;
    font-size: 21px;
}

i.closeMenu {
    font-size: 25px;
    color: red;
    margin: 15px 10px;
    padding: 5px;
    background: #ffe4e4;
    border-radius: 50px;
}

span.closeMenuModalSpan {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.headerDiv3 {
    padding-right: 15px;
}

div.policyBody {
    padding: 40px 0;
    width: calc(100% - 30px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

span.countrySwitchSpan {
    display: flex;
    gap: 10px;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 10px;
    align-items: center;
}

h3.switchCountryListName {
    font-size: 17px;
}

span.countrySwitchSpan:hover {
background: #ededff;
}

img.switchCountryListFlag {
    width: 20px;
    height: 20px;
    border-radius: 50px;
}

span.courseNavSpan.dark {
    color: white;
    background: 0;
}

span.courseNavSpan.dark.active {
    color: black;
    background: white;
}

.courseInfoNav.dark {
    border: solid 3px white;
}

h3.courseDescriptionTitle.dark {
    color: white;
}

p.courDescriptionText.dark {
    color: #d7d7d7;
}

p.courseByTxt {
    color: #4d4d4d;
}

b.courseAuthorDis {
    color: black;
}

h3.switchCountryListName {
    font-size: 14px;
    font-weight: 500;
    color: black;
}

.headerDiv1 {
    display: flex;
    align-items: center;
    padding-left: 20px;
    min-width: 15%;
}

.worksBoxes {
    width: calc(100% - 50px);
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px 50px;
}

span.sectionCenterSpan {
    display: flex
;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

p.sectionSubTitle {
    color: #969696;
    font-size: 17px;
}

.worksBox {
    width: 350px;
    height: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 10px;
    background: #fff9ef;
    gap: 10px;
}

button.contShopng {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: max-content;
    height: 45px;
    border-radius: 15px;
    padding: 0 20px;
    border: 0;
    font-size: 15px;
    font-weight: 600;
    background: #f1b90c;
    color: black;
    cursor: pointer;
}

button.contShopng:hover {
background: #ffdd75;    
}

.reviewBox {
    min-width: 200px;
    display: flex;
    min-height: 150px;
    flex-direction: column;
    align-items: flex-start;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 2px 2px 11px 1px #80808030;
    gap: 20px;
    justify-content: space-between;
}

p.reviewText {
    font-size: 14;
    color: #303030;
}

span.customerRatingDis {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #f1b90c;
}

span.reviewerDiv {
    display: flex;
    align-items: center;
    gap: 5px;
}

h3.customerNameAbrev {
    width: 20px;
    height: 20px;
    padding: 5px;
    background: #f1b90c;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    font-weight: 500;
    font-size: 16px;
}

i.reviewStr {
    font-size: 10px;
}

h4.reviewerName {
    font-size: 12px;
    font-weight: 500;
}

.reviewBox.active {
background: #f1b90c52;
padding: 30px;
}

span.reviewerNameSpan {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

span.getStartedBtnSpan {
    display: flex;
    align-items: center;
    margin-top: 10px;
    color: #f1b90c;
    font-weight: 600;
    cursor: pointer;
    gap: 10px;
}

span.getStartedBtnSpan:hover {
    color: black;
}

h3.worksTitle {
    font-size: 17px;
    color: black;
}

p.worksDescription {
    font-size: 15px;
    color: #5f5f5f;
}

h3.worksCount {
    padding: 10px;
    border-radius: 50px;
    background: #f1b90c;
    width: 20px;
    height: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


header.header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 70px;
    max-height: 70px;
    background: white;
    box-shadow: 0px 5px 11px 3px #8080801a;
}

button.verifyEmailBtn {
    border: 0;
    height: 30px;
    padding: 0 20px;
    border-radius: 10px;
    font-weight: 600;
    color: white;
    background: green;
    cursor: pointer;
}

button.verifyEmailBtn:hover {
background: #26c226;    
}

.preheader {
    display: flex;
    align-items: center;
    min-height: 40px;
    gap: 50px;
    background: #f1b90c;
    color: black;
    width: 100%;
    justify-content: space-around;
    padding: 10px 0;
}

header.header.sticky {
    position: fixed;
    top: 0;
    z-index: 100000000;
}

.footerMenuDiv {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.verifyOtpModalCont {
    width: calc(90% - 20px);
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: white;
    padding: 20px;
    border-radius: 20px;
    gap: 20px;
}

.verifyOtpModalHeadDiv {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

div.otpInputSpan {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

input.inputOtp {
    height: 30px;
    width: 30px;
    border-radius: 10px;
    border: 0;
    background: #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
}

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

.verifyOtpModalHeadDiv {
    padding-bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: solid 2px #e5e5e5;
    padding: 0 20px;
    padding-bottom: 20px;
}

.verifyOtpMainBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

p.verifyTopTxt {
    text-align: center;
    color: #919191;
    font-size: 15px;
}

p.verifyDintTxt {
    font-size: 13px;
    color: #959595;
}

h3.resendTxt {
    font-size: 16px;
    color: #f1b90c;
    cursor: pointer;
}

.verifyOtpBottomDiv {
    width: 100%;
    padding: 0 20px;
    padding-top: 20px;
    border-top: solid 2px #e5e5e5;
    display: flex;
    align-items: center;
    gap: 10px;
}

button.verifyOtpBtn {
    height: 35px;
    min-width: 80px;
    border-radius: 10px;
    cursor: pointer;
    border: 0;
    font-size: 14px;
    font-weight: 600;
    background: #f1b90c;
    display: flex;
    align-items: center;
    justify-content: center;
}

.verifyOtpModalCont.dark {
    background: #353535;
}

h3.verifyOtpHeadTitle.dark {
    color: white;
}

.verifyOtpModalHeadDiv.dark {
    border-bottom: solid 2px #434343;
}

.verifyOtpBottomDiv.dark {
    border-top: solid 2px #434343;
}

p.verifyDintTxt.dark {
    color: #e7e7e7;
}

p.verifyTopTxt.dark {
    color: white;
}

input.inputOtp.dark {
    background: white;
}

button.verifyOtpBtn:hover {
    background: #ffd759;
}

button.cancelVerifyOtpBtn:hover {
background: #b1afaf;    
} 

input.inputOtp:focus{
border: solid 2px #f1b90c;   
outline: 0;
}


button.cancelVerifyOtpBtn {
    height: 35px;
    min-width: 80px;
    border-radius: 10px;
    cursor: pointer;
    border: 0;
    font-size: 14px;
    font-weight: 600;
    background: #e2e2e2;
}



p, h1, h2, h3, h4, span {
    margin: 0;
    padding: 0;
    font-family: system-ui;
}
user agent stylesheet
h3 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}

h3.verifyOtpHeadTitle {
    font-size: 17px;
    font-weight: 600;
}

.footerMenuDivInner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    max-width: 20%;
}

h3.footerMenuTitle {
    color: white;
    font-size: 15px;
    text-align: left;
}

.footerMenuList {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 13px;
    gap: 5px;
}

h3.footerMenu {
    font-size: 13px;
    color: #ffffffc9;
    font-weight: 500;
    cursor: pointer;
}

.socialsGroup {
    display: flex;
    gap: 10px;
}

.prodSection {
    width: calc(100% - 100px);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 50px 0;
}

i.selectContact {
    font-size: 35px;
    color: #f1b90c;
}

span.prodSectionCallToActionSpan {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

img.prodPic {
    width: 350px;
    height: auto;
    border-radius: 10px;
    animation: bounce 2s infinite ease-in-out;
}

h3.prodSectActionTxt {
    font-size: 14px;
    font-weight: 500;
}

h2.prodSecTitle {
    font-size: 21;
    color: #f1b90c;
    font-weight: 900;
    line-height: 30px;
}

p.prodSecDesc {
    color: #000000;
    font-weight: 300;
    font-size: 13px;
    line-height: 20px;
}

span.prodSectionCallToActionSpan {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 25px;
    border-radius: 30px;
    color: #f1b90c;
}

.prodSectionInner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 30%;
    width: 30%;
    gap: 20px;
}

.emptyCartDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 0;
}
 
img.emptyCartImg {
    width: 110px;
}

span.emptyCartSpan {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

span.prodSectionCallToActionSpan:hover {
background: #eae3ff;
    padding: 7px 15px;
    color: #f1b90c;
}

span.prodSectionCallToActionSpan.dark:hover {
background: #eae3ff;
    padding: 7px 15px;
    color: #f1b90c;
}

span.socialSpan {
    width: 20px;
    height: 20px;
    padding: 10px;
    border-radius: 50px;
    background: #f1b90c;
    display: flex;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
}

span.socialSpan:hover {
background: white;    
}

.mainDivInner1 {
    max-width: 40%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
}

img.appDisPrefooter {
    width: 350px;
    height: 350px;
    border-radius: 10px;
}

.prefooterInner2 {
    min-width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

span.mainCountryCountSpan {
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    background: #f1b90c;
    color: white;
    font-size: 12px;
    font-weight: 700;
    border: solid 4px white;
    margin-left: -15px;
}

img.mainCountryFlag.jstt {
    margin-left: -15px;
}

img.mainCountryFlag {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    border: 4px solid white;
}

span.mainCountryListSpan {
    display: flex;
    justify-content: flex-start;
}

.mainWriteUpBox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

h3.footerMenu:hover {
color: #f1b90c;     
}

.mainSecton {
    width: calc(100% - 100px);
    padding-top: 180px;
    padding-bottom: 110px;
    display: flex;
    justify-content: space-between;
}

img.prodImgs {
    width: 20px;
    border-radius: 5px;
}

span.mainSearchInputSpan {
    display: flex;
    align-items: center;
    width: 80%;
    justify-content: space-between;
    height: auto;
    padding: 7px;
    border: solid 2px grey;
    border-radius: 50px;
    margin-top: 30px;
}

h2.mainSectionHeadText {
    font-size: 35px;
    color: black;
}

p.manSectionDescr {
    color: #515151;
    font-size: 17px;
}

span.mainSearchBtn {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 20px;
    justify-content: center;
    cursor: pointer;
    background: #f1b90c;
    border-radius: 50px;
}

span.mainSearchBtn:hover {
background: #f1b90cba;
}

input.searchCourseInput {
    height: 80%;
    width: 100%;
    border: 0;
    padding-left: 10px;
    background: none;
}

input.searchCourseInput.dark {
color: white;
}

input.searchCourseInput:focus {
outline: 0;
border: 0;
}

.mainSectionInner1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 50%;
}

div.modal {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    background: #00000087;
    top: 0;
    z-index: 100000000;
}

.loginModalContent {
    width: 90%;
    max-width: 400px;
    background: white;
    border-radius: 20px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: scroll;
}

.popup {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 18px;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 1000000000000;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  #error { background: #e74c3c; }
  #success { background: #2ecc71; }
  .popup.showw { opacity: 1; }
  .popup.hide { opacity: 0; }

i.closeLoginModal {
    font-size: 22px;
    cursor: pointer;
    color: red;
}

label.loginLabel {
    font-family: sans-serif;
    font-size: 14px;
    color: #636363;
}

i.passwordToggle {
    margin-right: 10px;
    cursor: pointer;
}

button.verifyEmailBtn {
    margin-right: 10px;
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

label.label {
    font-family: sans-serif;
    font-size: 15px;
    color: black;
}

img.menuUserDp {
    width: 40px;
}

.loggedInMenu {
    width: 250px;
    height: auto;
    position: fixed;
    top: 80px;
    z-index: 10000000;
    background: white;
    box-shadow: 0px 0px 7px 1px #cccccc7d;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    padding: 0px 10px;
    border-radius: 10px;
}  

h3.menuUserName {
    font-size: 15px;
    color: black;
}

p.loggedInUserEmail {
    font-size: 13px;
    color: #808080;
}

.loggedInMenuTop {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 20px 10px;
    justify-content: flex-start;
    border-bottom: solid 1px #bebebe;
    width: 100%;
}

span.loggedInMenuSpan {
    display: flex;
    align-items: center;
    gap: 7px;
}

/* Container */
.theme-switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 18px;
}

/* Hide default checkbox */
.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* 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: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

.loggedInMenu.dark {
    background: black;
    box-shadow: none;
}

h3.menuUserName.dark {
    color: white;
}

p.loggedInUserEmail.dark {
    color: #aaaaaa;
}

.loggedInMenuBox.dark {
    color: #d4d4d4;
    border-bottom: solid 1px #414141;
}

.loggedInMenuBox.dark:last-child {
border-bottom: 0;    
}

/* Checked */
.theme-switch input:checked + .slider {
  background-color: #f1b90c;
}

.theme-switch input:checked + .slider:before {
  transform: translateX(12px);
}

.loggedInMenuBox {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 20px);
    align-items: center;
    padding: 13px 10px;
    border-bottom: solid 1px #eaeaea;
    cursor: pointer;
    color: #5f5f5f;
}

.loggedInMenuTop.dark {
    border-bottom: solid 1px #3c3c3c;
}

.loggedInMenuBox.dark:hover {
color: white;
background: #232323;
}

.loggedInMenuBox:hover {
 background: #ececec6b;
    border-radius: 10px;
    color: black;
}

h3.loggedInMenuTitle {
    font-weight: 500;
    font-size: 14px;
}

span.loggedInMenuSpan.logoutSpan {
    color: red;
}

.loggedInMenuBox {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 20px);
    align-items: center;
    padding: 13px 10px;
    border-bottom: solid 1px #eaeaea;
}

.loggedInMenuListDiv {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

input.login100 {
    width: calc(100% - 20px);
    height: 30px;
    padding: 10px;
    border-radius: 15px;
    border: 0;
    background: #eeeeee;
}

.loginModalContent.dark {
    background: #373636;
}

i.closeLoginModal.dark {
    color: white;
}

label.loginLabel.dark {
    color: white;
}

span.loginSwitch.dark {
color: white;
}

.loginModalTopDiv.dark {
border-bottom: solid 1px black;
}

span.loginModalSwitchSpan.dark {
    background: black;
}

h3.loginModalTopText.dark {
color: white;    
}

p.forgotPassTxt.dark {
    color: white;
}

span.passdwordInputSpan {
    display: flex;
    align-items: center;
    width: 100%;
    background: #eeeeee;
    border-radius: 15px;
}

span.forgetPassSpan {
    display: flex;
    gap: 5px;
    align-items: center;
    margin: 10px 0;
}

input.login100:focus {
outline: 0;
border: 0;
}

.loginModalTopDiv {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 20px;
    border-bottom: solid 1px #c7c7c7;
}

h3.loginModalTopText {
    font-size: 19px;
    font-weight: 500;
    color: black;
}

.loginModalMainContentDiv {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0;
    gap: 30px;
}

.loginBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    gap: 20px;
}

.inputGroup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 5px;
}

span.loginModalSwitchSpan {
    width: auto;
    height: auto;
    padding: 10px;
    display: flex;
    justify-content: center;
    background: #f0f0f0;
    border-radius: 15px;
}

span.loginSwitch.active {
    background: #f1b90c;
}

span.loginSwitch {
    padding: 15px 20px;
    cursor: pointer;
    border-radius: 15px;
    min-width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

p.forgotPassTxt {
    color: #a9a9a9;
    font-size: 12px;
}

h3.forgotLnk {
    font-size: 14px;
    color: #f1b90c;
    cursor: pointer;
}

button.btn100 {
    height: 50px;
    width: 100%;
    border: 0;
    border-radius: 15px;
    font-size: 16px;
    font-weight: 600;
    background: #f1b90c;
    margin-top: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
}

button.btn100:disabled {
background: #f1b90c6b;    
cursor: not-allowed;
}

button.btn100:hover {
background: #f1b90cba;
}

div.loader {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1000000000000;
    top: 0;
    background: #ffffffd9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top: 3px solid #f1b90c;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.btnLoader {
    width: 15px;
    height: 15px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top: 3px solid black;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.mainDiv {
    padding-top: 150px;
    width: calc(100% - 100px);
    display: flex;
    justify-content: center;
    padding-bottom: 70px;
    align-items: center;
}

h2.mainDivTitle {
    font-size: 31px;
    color: #f1b90c;
}

p.mainDivDescr {
    color: #8a8a8a;
}

.postFooterDiv {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    color: white;
    font-family: sans-serif;
    font-size: 15px;
    border-top: #ffffff57 solid 1px;
}

span.footerAboutSpan {
    width: 100%;
    display: flex
;
    flex-direction: column;
    align-items: flex-start;
}


div.hide, span.hide, button.hide {
display: none;    
}

/* DARK MODE   */

body.body.dark {
    background: #151515;
    box-shadow: 1px 1px 11px 3px #0000004d;
}

h2.policyTitle.dark {
    color: white;
}

h3.policyHead.dark {
    color: white;
}

p.policTxt.dark {
    color: white;
}

p.policyDescription.dark {
    color: white;
}

li.dark {
    color: white;
}

p.lead.dark {
    color: white;
}

h3.mobileMenu.dark {
    color: white;
}

div.mobileMenuModal.dark {
    background: black;
}

.contactBox.dark {
    background: black;
    box-shadow: none;
}

.questionSpan.dark {
    background: black;
}

h3.question.dark {
    color: white;
}

.answer.dark {
    color: white;
}

.crumb.dark {
    background-color: #040010;
}

h3.contactUsTitle.dark {
    color: white;
}

p.contactUsDescr.dark {
    color: #dadada;
}

label.contactUsLabel.dark {
    color: #e6e6e6;
}

button.contactUsSubmitBtn.dark {
    background: #dbceff;
    color: #f1b90c;
}

span.headerMenu.active.dark {
    color: #f1b90c;
}

span.headerMenu.dark {
    color: #afafaf;
}

i.qrArrow.dark {
    color: white;
}

h2.mainSectionHeadText.dark {
    color: white;
}

p.manSectionDescr.dark {
    color: #d5d5d5;
}

img.switchCountryFlagImg {
width: 25px;
height: 25px;
}

h2.sectionHeadTitle.dark {
    color: white;
}

p.sectionSubCategory.dark {
    color: #cccccc;
}

span.seeAllSpan.dark {
    color: white;
}

.courseBox.dark {
    background: white;
}

h2.sectionTtle.dark {
    color: white;
}

p.sectionSubTitle.dark {
    color: #cccccc;
}

.reviewBox.dark {
    background: white;
}

.reviewBox.dark.active {
    background: #ffdf7e;
}

div.countryListModal.dark {
background: black;    
}

h3.switchCountryListName.dark {
color: white;    
}

span.countrySwitchSpan.dark:hover {
background: #ffffff40;
}



i.mode.dark {
    color: white;
}

img.switchCountryFlagImg.dark {
    background: #ffffff57; 
}

footer.footer.dark {
    background: black;
}

.prefooter.dark {
    background: black;
}

h2.appSectonTitle.dark {
    color: white;
}

span.scanAppTxt.dark {
    color: white;
    border: solid 2px white;
}

p.appSectionDescr.dark {
    color: #c6c6c6;
}

h2.mainDivTitle.dark {
    color: white;
}

img.mainCountryFlag.dark {
border: 4px solid #151515;    
}

span.mainCountryCountSpan.dark {
    border: 4px #151515 solid;
}

h2.prodSecTitle.dark {
    color: white;
}

p.prodSecDesc.dark {
    color: white;
}

span.prodSectionCallToActionSpan.dark {
    color: #e8e0ff;
}

p.mainDivDescr.dark {
    color: #dfdfdf;
}

header.header.dark {
    background: black;
    box-shadow: none;
}




/* Mobile-friendly buttons */
@media (max-width: 600px) {
span.headerButton2 {
    display: none;
}

.actionDivvv {
    flex-direction: column;
}

.coursePageTop {
    width: calc(100% - 60px);
    gap: 8px;
}

span.courseNavSpan {
    font-size: 18px;
}

.courseSectionDivider {
    flex-direction: column;
    width: calc(100% - 20px);
    align-items: center;
}

.courseManSide {
    width: 100%;
}

h3.courseDescriptionTitle {
    font-size: 23px;
}

p.courDescriptionText {
    font-size: 18px;
    color: #666666;
}

h3.reviewerName {
    font-size: 18px;
}

p.reviewMsg {
    font-size: 17px;
}

.courseSide2 {
    width: calc(100% - 40px);
    max-width: 100%;
}

dv.courseTutorInfoBox {
    width: 100%;
}

h3.courseTutorNameDizz {
    font-size: 17px;
}

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

span.courseFtInnerSpan {
    font-size: 17px;
    color: #454545;
}

span.courseTutorLink {
    font-size: 15px;
}

h3.COURSEmainPriceDis {
    font-size: 24px;
}

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

h3.courseMainTitleDis {
    font-size: 24px;
}

p.courseByTxt {
    color: #656565;
}

b.courseAuthorDis {
    color: black;
}

p.reviewDate {
    font-size: 14px;
}

button.addToCartBtn {
    height: 50px;
    font-size: 19px;
}

button.buyCourseBtn {
    height: 50px;
    font-size: 19px;
}

h3.courTutorTitleHead {
    font-size: 23px;
}

h3.courseFtsTitle {
    font-size: 23px;
}

.actionDivvv {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

img.menuUserDp {
    width: 55px;
}

h2.pageCrumbTitle {
    font-size: 28px;
}

p.pageCrumbLink {
    font-size: 18px;
}

h3.cartTotoalSecTitle {
    font-size: 25px;
}

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

b.cartItemAuthorName {
    font-size: 16px;
}

p.cartItemOldPrice {
    font-size: 17px;
}

.cartNamePrice {
    flex-direction: column;
}

.cartItemActionDiv {
    flex-direction: column;
    gap: 20px;
}

.cartItem {
width: calc(100% - 20px);
padding: 20px 10px;
}

span.courseTimeCartt {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    font-size: 16px;
}

h3.cartItemMainPrice {
    font-size: 21px;
}

.cartItemsBox {
    width: 100%;
    gap: 30px;
}


button.cartActionBtn {
    height: 40px;
    padding: 0 10px;
    font-size: 16px;
}

h3.cartItemTitle {
    font-size: 19px;
}

.cartBody {
    flex-direction: column;
    align-items: center;
    width: calc(100% - 20px);
}

.cartTotalBox {
    width: calc(100% - 40px);
}

p.orderCostFrst {
    font-size: 19px;
}

h3.orderCostLst {
    font-size: 19px;
}

button.cartCheckoutBtn {
    font-size: 19px;
    height: 60px;
}

h3.couponSectionTitle {
    font-size: 20px;
}

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

.newPassBody {
 width: calc(100% - 20px);   
}

.loggedInMenu {
    width: 300px;
}

.loggedInMenuBox {
    padding: 20px 10px;
}

.theme-switch {
    width: 40px;
    height: 22px;
}

.slider:before {
    left: 3px;
    bottom: 4px;
    width: 15px;
    height: 15px;
}

.theme-switch input:checked + .slider:before {
    transform: translateX(19px);
}

h3.loggedInMenuTitle {
    font-size: 18px;
}

i.loggedInMenuIconn {
    font-size: 20px;
}

h3.menuUserName {
    font-size: 19px;
}

p.preheaderTxt {
    margin-left: 10px;
}

.loginModalContent {
    width: calc(90% - 20px);
}

span.loginModalSwitchSpan {
    width: 100%;
    justify-content: space-between;
}

span.loginSwitch {
    width: 50%;
}

.loginBox {
    width: 100%;
}

button.btn100 {
    height: 45px;
    font-size: 18px;
}

input.login100 {
    width: calc(100% - 20px);
    font-size: 16px;
    height: 40px;
}

i.closeLoginModal {
    font-size: 27px;
}

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

h3.forgotLnk {
    font-size: 17px;
}


p.courseFeatureTitle {
    font-size: 16;
    color: #505050;
}

h2.mainSectionHeadText {
text-align: center;
}

header.header {
min-height: 80px;    
}

.affiliateTxtDiv {
    align-items: center;
}

p.affiliateDesc {
    text-align: center;
}

.reviewBox {
    min-width: 310px;
    padding: 20px;
}

i.play {
    font-size: 30px;
}

.mainBodySecInner {
    flex-direction: column;
    width: calc(100% - 20px);
}

h3.affiliateHead {
    font-size: 32px;
}

p.affiliateDesc {
    font-size: 22px;
    font-weight: 500;
    color: #5a5a5a;
}

p.getStartedBtnTxt {
    font-size: 19px;
}

img.becomeAffiliateImg {
    width: calc(100% - 20px);
    max-width: 350px;
    height: auto;
}

img.appDisPrefooter {
    width: calc(100% - 20px);
    max-width: 350px;
}

.prefooterInner2 {
    width: 100%;
}

.becomeAffiliateImgDiv {
    width: 100%;
}

i.getStartedArrow {
    font-size: 21px;
}

p.manSectionDescr {
    font-size: 23px;
    text-align: center;
}

img.prodImgs {
    width: 30px;
    margin-top: 10px;
}

span.mainSearchInputSpan {
    width: calc(100% - 20px);
}

input.searchCourseInput {
    font-size: 18px;
    color: #2b2b2b;
}

.sectionSteps {
    width: calc(100% - 10px);
}

.reviewBox.light {
    min-width: 300px;
}

p.reviewText {
    font-size: 17px;
}

h4.reviewerName {
    font-size: 17px;
}

h3.customerNameAbrev {
    width: 30px;
    height: 30px;
    font-size: 19px;
}

h3.worksTitle {
    font-size: 19px;
}

p.worksDescription {
    font-size: 17px;
}

h3.seeAllText {
    font-size: 19px;
}

i.seeAll {
    font-size: 22px;
}

.categoryBox.light {
    min-width: 310px;
}

.mainSecton {
    width: calc(100% - 10px);
    flex-direction: column;
    align-items: center;
    gap: 50px;
    padding-top: 140px;
    padding-bottom: 80px;
}

h2.sectionHeadTitle {
    font-size: 26;
}

p.sectionSubCategory {
    font-size: 20px;
}

i.scrollArow {
    display: none;
}

.courseBox {
    min-width: 310px;
}

h3.courseTitle {
    text-align: left;
    width: 100%;
    font-size: 21;
}

i.courseFeatureIcon {
    font-size: 19px;
}

i.ratingsStar {
    font-size: 13px;
}

p.courseReviewCount {
    font-size: 14px;
}

h3.mainCrsPrice {
    font-size: 25px;
}

button.addCrseCart {
    font-size: 16px;
    height: 45px;
}

p.crossedPrice {
    font-size: 19;
    font-weight: 600;
}

span.courseImgBox {
    height: 250px;
}

span.courseImgBox {
    height: 250px;
}

.worksBox {
    padding: 20px;
}

.mainSectionInner2 {
    width: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mainSectionInner2 {
    width: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sectionHeadInner {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
}

h2.sectionTtle {
    font-size: 29px;
    text-align: center;
}

p.sectionSubTitle {
    font-size: 19px;
    text-align: center;
    padding: 0 20px;
}

span.headerButton {
        height: 55px;
    padding: 0 55px;
    font-size: 19px;
    display: none;
}

.headerDiv2 {
    display: none;
}

.mainDiv {
    width: 100%;
    flex-direction: column;
    gap: 50px;
}

.mainDivInner1 {
    max-width: 100%;
    align-items: center;
}

.mainWriteUpBox {
    align-items: center;
    gap: 20px;
}

h2.mainDivTitle {
    text-align: center;
    padding: 0 10px;
}

img.mainCountryFlag {
    width: 40px;
    height: 40px;
}

i.actionIcon {
    font-size: 19px;
}

span.mainCountryCountSpan {
    width: 40px;
    height: 40px;
}

p.mainDivDescr {
    text-align: center;
    padding: 0 15px;
    font-size: 18px;
    color: #242424;
}

.headerDiv1 {
    padding: 0;
    min-width: 40%;
    justify-content: flex-start;
}

img.headerLogo {
    margin-left: 15px;
    height: 40px;
    width: auto;
}

.mainSectionInner1 {
    width: calc(100% - 20px);
    align-items: center;
}

.mainSectionInner1 {
    width: calc(100% - 20px);
    align-items: center;
}

img.switchCountryFlagImg {
    width: 25px;
    height: 25px;
}

span.switchModeSpan {
    width: 30px;
    height: 30px;
}

img.switchCountryListFlag {
    width: 30px;
    height: 30px;
}

img.mainImg {
    width: 90%;
}

.mainDivInner2 {
    width: 100%;
}

.prodSection {
    flex-direction: column;
    width: 100%;
    gap: 50px;
}

h2.prodSecTitle {
    text-align: center;
    font-size: 26;
    padding: 0 15px;
}

h3.prodSectActionTxt {
    font-size: 19px;
    font-weight: 500;
}

img.footerLogoImg {
    height: 50px;
    margin-left: 10px;
    cursor: pointer;
}

.prodSection.right {
    flex-direction: column-reverse;
}

span.appIconsGroup {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.prefooter {
    width: 100%;
    flex-direction: column;
}

.prefooterInner1 {
    width: 100%;
    justify-content: center;
}

.innerFooter {
    width: 100%;
}

.footerMenuDiv {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 40px;
    width: calc(100% - 30px);
}

.postFooterDiv {
    height: 70px;
}

img.footerLogoImg {
    height: 50;
}

h2.appSectonTitle {
    text-align: center;
    padding: 0 15px;
}

p.appSectionDescr {
    text-align: center;
    padding: 0 10px;
}

i.menu.dark {
    color: white;
}

span.scanAppTxt {
    width: 100px;
    height: 100px;
    font-size: 23px;
}

span.scanAppQrSpan {
    width: 100px;
    height: 100px;
}

span.scanAppGroup {
    display: none;
}

img.appStoreIcon {
    height: 50px;
}

p.prodSecDesc {
    text-align: center;
    font-size: 16px;
    padding: 0 15px;
    font-weight: 400;
}

span.footerAboutSpan {
    width: calc(100% - 30px);
}

p.footerAboutText {
    width: 100%;
    font-size: 17px;
}

h3.footerMenuTitle {
    font-size: 19px;
}

div.policyBody {
    width: calc(100% - 10px);
}

h3.footerMenu {
    font-size: 16px;
}

.footerMenuDivInner {
    max-width: 50%;
    width: 40%;
}

.prodSectionInner {
    width: 100%;
    max-width: 100%;
    align-items: center;
}

h3.crumbPageTitle {
font-size: 35px;
}

span.crumbInnerSpan {
width: 60%;
}

div.countryListModal {
    gap: 10px;
}

.contactUsDiv {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

input.contactUsInput {
    height: 55px;
    font-size: 18px;
    font-weight: 500;
}

textarea.contactUsInput {
    font-size: 18px;
}

button.contactUsSubmitBtn {
    height: 55px;
}

select.contactUsInput {
    height: 55px;
    font-size: 18px;
    font-weight: 500;
}
.contactBox {
    width: calc(100% - 70px);
}

div.map {
    width: calc(100% - 20px);
}

i.selectContact.dark {
    color: #e0d6ff;
}

i.menu {
    font-size: 25px;
    display: flex;
}

.faqBoxes {
    width: calc(100% - 20px);
}
}