@import url('https://fonts.googleapis.com/css2?family=Kanit: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&family=Rubik:ital,wght@0,300..900;1,300..900&family=Zain:ital,wght@0,200;0,300;0,400;0,700;0,800;0,900;1,300;1,400&display=swap');

* {
    font-family: "Zain", sans-serif;
    font-optical-sizing: auto;
    padding: 0;
    margin: 0;
    outline: none !important;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
:root::-webkit-scrollbar {
    display: none;
}

:root {
    overflow-x: hidden !important;
    --theme: #cda230;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

main {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #f5f5f5;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

img {
    user-select: none;
}

.MainView {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-bottom: 75px;
    background: #f5f5f5;
}

#Home {
}

navbar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: fit-content;
    z-index: 99999999;
}

.NavbarInner {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 100%;
    background: #ffffff;
    flex-wrap: wrap;
    padding: 7px 0;
    box-shadow: 0px -2px 29px -9px #0000001f;
}

.NavbarInner button {
    display: block;
    margin: 0 auto;
    width: 25%;
    border: none;
    background: none;
    padding: 10px 0 0;
    color: var(--theme);
    text-transform: uppercase;
    font-size: 13px;
    filter: grayscale(1);
    transition: 300ms;
    border-right: solid 1px #f3f3f3;
}

.NavbarInner button img {
    display: block;
    margin: 0 auto 4px;
    width: auto;
    height: 23px;
}

.NavbarInner .ActiveNavBar {
    filter: none;
}

.NavbarInner .ActiveNavBar img {
}

.HomeHeader {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 100%;
    background: #ffffff;
    padding: 13px 10px;
    box-shadow: 0px 2px 29px -9px #0000001f;
}

.HomeHeaderLogo {
    display: block;
    margin: 0 0;
    width: fit-content;
}

.HomeHeaderLogo img {
    display: block;
    margin: 0 0;
    width: auto;
    height: 34px;
}

.HomeHeaderBtn {
    display: flex;
    justify-content: end;
    align-items: center;
    width: fit-content;
}

.HomeHeaderBtn button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 100%;
    position: relative;
    background: none;
    border: none;
    margin: 0 5px;
}

.HomeHeaderBtn button img {
    display: block;
    margin: 0 auto;
    width: auto;
    height: 30px;
    padding: 4px;
}

.HomeHeaderBtn button span {
    position: absolute;
    left: -3px;
    top: -3px;
    background: var(--theme);
    color: aliceblue;
    width: 16px;
    aspect-ratio: 1/1;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1000px;
    font-size: 12px;
}

.HomeStoriesParent {
    display: block;
    margin: 10px auto;
    width: 100%;
    overflow-y: auto;
}

.HomeStories {
    display: flex;
    justify-content: start;
    align-items: center;
];
] c;
];
    width: max-content;
    flex-wrap: wrap;
    padding-left: 3%;
}

.HomeStoriesItem {
    margin: 9px 7px;
}

.HomeStoriesItem img {
    display: block;
    margin: 0 auto;
    width: 60px;
    aspect-ratio: 1/1;
    object-fit: cover;
    background: var(--theme);
    padding: 3px;
    border-radius: 1000px;
    box-shadow: inset -76px 1px 87px -95px #000000;
}

.HomeStoriesItem label {
    display: block;
    margin: 7px auto;
    width: 65px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* number of lines to show */
    line-clamp: 1;
    -webkit-box-orient: vertical;
    font-size: 12px;
    color: #8c8c8c;
    text-align: center;
}

.HomeStoriesItem g {
    margin: 0 auto;
    width: 60px;
    aspect-ratio: 1/1;
    object-fit: cover;
    background: #e0e0e0;
    padding: 3px;
    border-radius: 1000px;
    /* box-shadow: inset -76px 1px 87px -95px #00000099; */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #afafaf;
    border: solid 1px #d0d0d0;
}

.Story {
    display: none;
}

.StoryInner {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    z-index: 999999999;
}

.StoryHeader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: aliceblue;
    padding: 14px 20px;
    padding-left: 70px;
    z-index: 2;
    box-shadow: inset 0px 101px 116px -67px #000000;
}

.Story video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
}

.StoryHeader h4 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 18px;
}

.StoryHeader label {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 12px;
}

.StoryHeader img {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    background: var(--theme);
    padding: 2px;
    border-radius: 1000px;
    object-fit: cover;
    object-position: center center;
    margin: 10px;
}

.StoryHeader button {
    position: fixed;
    right: 0;
    top: 0;
    width: 40px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    color: aliceblue;
    font-size: 19px;
}

.HomeSlider {
    display: block;
    margin: 10px auto 20px;
    width: 100%;
}

.HomeSliderItem {
}

.HomeSliderItem img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.HomeSliderItemInner {
    display: block;
    margin: 0 auto;
    width: 90%;
    aspect-ratio: 1/0.7;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
}

.HomeSlider .slick-dots {
    position: absolute;
    left: 21px;
    bottom: 15px;
    z-index: 1;
    display: flex;
    justify-content: start;
    align-items: center;
    width: fit-content;
    padding: 0;
    margin: 0;
}

.HomeSlider .slick-dots li {
    display: block;
    margin: 0 0;
    padding: 0;
}

.HomeSlider .slick-dots li div {
    display: block;
    margin: 0 3px;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 1000px;
    opacity: 0.7;
    box-shadow: 0px 0px 11px 6px #0000008a;
    transition: 300ms;
}

.HomeSlider .slick-dots .slick-active div {
    opacity: 1;
    width: 20px;
}

.HomeProductsSlider {
    display: block;
    margin: 20px auto;
    width: 100%;
    overflow-x: auto;
    position: relative;
}

.HomeProductsSliderGH {
    display: flex;
    justify-content: start;
    align-items: center;
    width: max-content;
    padding-left: 5%;
}

.HomeProductsSliderItem {
    display: block;
    margin: 0 0;
    width: 122px;
    border: solid 1px #ececec;
    background: #ffffff;
    overflow: hidden;
    border-radius: 10px;
    margin-right: 15px;
}

.HomeProductsSliderThumb {
    display: block;
    margin: 0 auto;
    width: 100%;
    aspect-ratio: 1/0.7;
    object-fit: cover;
}

.HomeProductsSliderItemText {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 10px;
}

.HomeProductsSliderItemText h1 {
    display: block;
    margin: 3px auto;
    width: 100%;
    font-size: 15px;
    font-weight: bold;
    color: var(--theme);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* number of lines to show */
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.HomeProductsSliderItemText h4 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
}

.HomeProductsSliderItemText h4 u {
    text-decoration: none;
    margin: 0 3px;
    font-size: 11px;
}

.HomeProductsSliderItemText h4 s {
    color: #e58080;
    margin-right: 4px;
}

.HomeSectionHeader {
}

.HomeSectionHeader h4 {
    display: block;
    margin: 0 auto;
    width: 90%;
    position: relative;
    font-size: 17px;
    font-weight: 600;
}

.HomeSectionHeader h4 a {
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 21px;
    color: var(--theme);
    text-decoration: none;
    text-transform: uppercase;
}

.HomeSectionHeader h4 a i {
    position: absolute;
    right: 0;
    top: -2px;
    width: auto;
    height: 100%;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}

.PopularCourses {
    display: flex;
    justify-content: space-between;
    margin: 4px auto;
    width: 90%;
    flex-wrap: wrap;
}

.PopularCoursesItem {
    display: block;
    margin: 10px 0;
    width: 48%;
    background: #ffffff;
    border: solid 1px #ececec;
    border-radius: 10px;
    padding: 10px;
}

.PopularCoursesItem h4 {
    display: block;
    margin: 0 auto 9px;
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--theme);
    font-size: 17px;
    font-weight: bold;
}

.PopularCoursesItem label {
    display: block;
    width: 100%;
}

.PopularCoursesItem label g {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 4px 0;
    font-size: 13px;
    color: #777777;
}

.PopularCoursesItem label g i {
    width: 20px;
    text-align: center;
}

.PopularCoursesItem label g:last-child {
}

.PopularCoursesItem h6 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 15px;
    font-weight: bolder;
}

.PopularCoursesItem h6 u {
    text-decoration: none;
    margin: 0 3px;
    font-size: 12px;
}

.PopularCoursesItem button {
    display: block;
    margin: 10px auto 0;
    width: 100%;
    text-align: center;
    font-weight: bold;
    border: solid 2px;
    background: none;
    border-radius: 5px;
    text-transform: uppercase;
    padding: 3px 0;
    color: #7cb762;
}

.PopularCoursesItem h6 s {
    color: #e58080;
    margin-right: 4px;
}

.PopularCoursesItem .OpenCourseBtn {
    background: #d49643;
    color: aliceblue;
    border-color: #d9a053;
    box-shadow: inset -55px 0px 49px -32px #e3a15d;
}

.PopularCoursesItem .CourseIsPurchased {
    color: #7cb762;
}

.PuchasedPopularCoursesItem {
    border-color: #faeabf;
    background: #fff8e5;
}

.HomeSearch {
    display: block;
    margin: 0 auto;
    width: 100%;
}

.HomeSearchHolder {
    display: block;
    margin: 28px auto;
    width: 90%;
    background: #ffffff;
    height: 45px;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    border: solid 1px #ececec;
    z-index: 2;
}

.HomeSearchHolder g {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #bcbcbc;
    pointer-events: none;
    font-size: 14px;
    z-index: 2;
}

.HomeSearchHolder input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: none;
    padding: 0 44px;
    z-index: -1;
}

.SearchArt {
    position: absolute;
    right: 0;
    top: -20%;
    height: 150%;
    opacity: 0.7;
    z-index: 2;
    pointer-events: none;
}

.UpcomingLectures {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 94%;
    flex-wrap: wrap;
    margin: 0 auto;
}

.UpcomingLecturesItem {
    display: block;
    margin: 20px auto;
    width: 29%;
    background: #444444;
    border-radius: 3px;
    color: aliceblue;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    height: 100px;
}

.UpcomingLecturesItem .fa-calendar-alt {
    position: absolute;
    right: 0;
    top: 0;
    width: fit-content;
    height: fit-content;
    margin: 7px;
    font-size: 13px;
}

.UpcomingLecturesItem h1 {
    display: block;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    font-size: 35px;
    font-weight: bold;
}

.UpcomingLecturesItem h1 u {
    display: block;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

.UpcomingLecturesItem label {
    margin: 8px auto 0;
    width: 100%;
    background: #000000;
    text-align: center;
    padding: 4px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 0;
}

.UpcomingLecturesItem label i {
    font-size: 12px;
    margin-right: 6px;
}

.UpcomingLecturesItemToday {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #709870;
}


.UpcomingLecturesItemToday h1 {
    font-size: 30px;
    position: relative;
    bottom: 4px;
}

.UpcomingLecturesItemToday label {
    background: #5e875e;
}

.PlatformTops {
}

.PlatformTopsInner {
    display: flex;
    margin: 15px auto 30px;
    width: 90%;
    background: #444444;
    overflow: hidden;
    border-radius: 20px;
    flex-wrap: wrap;
    position: relative;
    padding-top: 50px;
}

.PlatformTopsItem {
    display: block;
    margin: 0 auto 15px;
    width: 30%;
    height: 227px;
    position: relative;
}

.PlatformTopsUser {
}

.PlatformTopsUser .PlatformTopsUserThumb {
    display: block;
    margin: 0 auto;
    width: 50px;
    aspect-ratio: 1/1;
    border-radius: 100px;
    border: solid 2px var(--theme);
}

.PlatformTopsUser label {
    display: block;
    margin: 6px auto;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
}

.PlatformTopsItemScore {
    position: absolute;
    left: 15%;
    bottom: 0;
    width: 70%;
    background: blue;
    display: flex;
    justify-content: center;
    align-items: center;
    color: aliceblue;
    border-radius: 20px;
}

.PlatformTopsItemScore h5 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 35px;
    font-weight: bold;
    text-align: center;
}

.PlatformTopsItemScore h5 u {
    display: block;
    margin: -6px auto 0;
    width: 100%;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
}

.PlatformTopsHeader {
    position: absolute;
    left: 0;
    top: 0;
    color: aliceblue;
    padding: 10px 20px;
    background: #000000;
    width: 100%;
    margin: 0;
    text-transform: uppercase;
    font-size: 16px;
}

.PlatformTopsItemFst .PlatformTopsItemScore {
    background: #de9d54;
    height: 61%;
}

.PlatformTopsItemScnd .PlatformTopsItemScore {
    height: 50%;
    background: #007dff;
}

.PlatformTopsItemThrd .PlatformTopsItemScore {
    height: 40%;
    background: #aa5e96;
}

.Preloader {
}

.PreloaderInner {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 99999999999999999;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.PreloaderDiv {
    display: block;
    margin: 0 auto;
    width: 100%;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

.PreloaderDiv img {
    display: block;
    margin: 0 auto;
    width: auto;
    height: 100px;
    animation: rotation 14s infinite linear;
}

.PreloaderBG {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -1;
    opacity: 0.3;
}

.PreloaderDiv label {
    display: block;
    margin: 17px auto;
    width: fit-content;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #4e4e4e;
    text-transform: uppercase;
}

.UpcomingLecturesCalender {
    display: flex;
    justify-content: start;
    align-items: start;
    margin: 4px auto;
    width: 95%;
    flex-wrap: wrap;
}

.UpcomingLecturesCalenderIem {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32%;
    aspect-ratio: 1/1;
    border: solid 1px #cccccc;
    flex-direction: column;
    position: relative;
    padding-top: 18px;
    margin: 5px auto;
    background: #ffffff;
    border-radius: 5px;
    overflow: hidden;
}

.UpcomingLecturesCalenderIem h1 {
    display: block;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
}

.UpcomingLecturesCalenderIem label {
    display: block;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    font-size: 15px;
    font-weight: 300;
    text-transform: uppercase;
}

.UpcomingLecturesCalenderIem h2 {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    background: #709870;
    padding: 3px 6px;
    color: aliceblue;
    font-size: 13px;
    margin: 0;
    border-radius: 0;
    padding-left: 20px;
}

.UpcomingLecturesCalenderIem h2 i {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    font-size: 10px;
}

.UpcomingLecturesCalenderIemToday {
    background: #709870;
    color: aliceblue;
    border-color: #709870;
    box-shadow: inset -112px 0px 109px -103px #548254;
}

.UpcomingLecturesCalenderIemToday h1 {
    font-size: 33px;
    font-weight: 300;
}

.UpcomingLecturesCalenderIemToday label {
}

.CalenderHeader {
    display: block;
    margin: 0 auto 0;
    width: 100%;
    background: #ffffff;
    padding: 14px 10px 11px;
    border-bottom: solid 1px #e2e2e2;
    position: relative;
    padding-left: 45px;
}

.CalenderHeader h4 {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 0;
    color: #787878;
}

.CalenderHeader h4 i {
    position: absolute;
    left: 0;
    top: -1px;
    width: auto;
    height: 100%;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.SideMenu {
    display: none;
}

.SideMenuInner {
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
}

.SideMenuFade {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #000000;
    opacity: 0.3;
}

.SideMenuDiv {
    position: fixed;
    right: 0;
    top: 0;
    width: 260px;
    max-width: 85%;
    background: #ffffff;
    height: 100%;
    padding: 20px;
}

.SideMenuLogo {
    display: block;
    margin: 20px auto;
    width: 100%;
}

.SideMenuLogo img {
    display: block;
    margin: 0 auto;
    width: 140px;
    max-width: 100%;
}

.SideMenuDiv ul {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 0;
}

.SideMenuDiv ul li {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 12px 7px;
    border-bottom: solid 1px #e3e3e3;
    position: relative;
    padding-left: 50px;
    font-size: 16px;
    color: #555555;
    text-transform: uppercase;
}

.SideMenuDiv ul li img {
    position: absolute;
    left: 0;
    top: -1px;
    width: 40px;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    padding: 12px;
    opacity: 0.6;
}


.ShopSlider {
    display: block;
    margin: 20px auto;
    width: 100%;
}

.ShopSliderItem {
}

.ShopSliderItem img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: -1;
}

.ShopSliderItemInner {
    display: block;
    margin: 0 auto;
    width: 90%;
    aspect-ratio: 1/1.3;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
    z-index: 2;
}

.ShopSlider .slick-dots {
    position: absolute;
    right: 31px;
    top: 10px;
    z-index: 1;
    display: flex;
    justify-content: start;
    align-items: center;
    width: fit-content;
    padding: 0;
    margin: 0;
}

.ShopSlider .slick-dots li {
    display: block;
    margin: 0 0;
    padding: 0;
}

.ShopSlider .slick-dots li div {
    display: block;
    margin: 0 3px;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 1000px;
    opacity: 0.7;
    box-shadow: 0px 0px 11px 6px #0000008a;
    transition: 300ms;
}

.ShopSlider .slick-dots .slick-active div {
    opacity: 1;
    width: 20px;
}

.ShopSliderItemContent {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: end;
    background: #00000024;
    color: aliceblue;
    box-shadow: inset 0px -148px 70px -64px #000000c9;
}

.ShopSliderItemContentInner {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 20px;
    padding-bottom: 14px;
}

.ShopSliderItemContentInner h1 {
    display: block;
    margin: 0 auto;
    width: 100%;
    color: var(--theme);
    font-size: 22px;
}

.ShopSliderItemContentInner label {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 18px;
}

.ShopSliderItemContentInner label s {
    color: #c05757;
}

.ShopSliderItemContentInner label u {
    text-decoration: none;
    font-size: 13px;
}

.HomeSlider .slick-arrow, .ShopSlider .slick-arrow, .CoursesSlider .slick-arrow {
    display: none !important;
}

.ShopSearch {
}

.StoreCategories {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 92%;
    flex-wrap: wrap;
}

.StoreCategoriesItem {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33%;
}

.StoreCategoriesItemInner {
    display: block;
    margin: 15px auto;
    width: 87%;
    aspect-ratio: 1/1;
    position: relative;
    background: #ffffff;
    border-radius: 10000px;
    box-shadow: 0px 0px 14px -5px #d7d7d7;
}

.StoreCategoriesItem img {
    display: block;
    margin: -12px auto 0;
    width: auto;
    height: 70px;
    max-width: 90%;
    object-fit: contain;
    object-position: center bottom;
}

.StoreCategoriesItem label {
    display: block;
    margin: 7px auto 0;
    width: 100%;
    font-size: 11px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    color: #828282;
}

.StoreJustArrived {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 90%;
    flex-wrap: wrap;
}

.StoreJustArrived .HomeProductsSliderItem {
    display: block;
    margin: 12px 0;
    width: 47%;
}


.CoursesSlider .slick-dots {
    position: absolute;
    right: 31px;
    top: 10px;
    z-index: 1;
    display: flex;
    justify-content: start;
    align-items: center;
    width: fit-content;
    padding: 0;
    margin: 0;
}

.CoursesSlider .slick-dots li {
    display: block;
    margin: 0 0;
    padding: 0;
}

.CoursesSlider .slick-dots li div {
    display: block;
    margin: 0 3px;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 1000px;
    opacity: 0.7;
    box-shadow: 0px 0px 11px 6px #0000008a;
    transition: 300ms;
}

.CoursesSlider .slick-dots .slick-active div {
    opacity: 1;
    width: 20px;
}

.CoursesSlider {
    display: block;
    margin: 20px auto;
    width: 100%;
}

.CoursesSliderItem img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: -1;
}

.CoursesSliderItemInner {
    display: block;
    margin: 0 auto;
    width: 90%;
    aspect-ratio: 1/0.7;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
    z-index: 2;
}


.CoursesSliderItemContent {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: end;
    background: #00000024;
    color: aliceblue;
    box-shadow: inset 0px -148px 70px -64px #000000c9;
}

.CoursesSliderItemContentInner {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 20px;
    padding-bottom: 14px;
}

.CoursesSliderItemContentInner h1 {
    display: block;
    margin: 0 auto;
    width: 100%;
    color: var(--theme);
    font-size: 22px;
}

.CoursesSliderItemContentInner label {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 18px;
}

.CoursesSliderItemContentInner label s {
    color: #c05757;
}

.CoursesSliderItemContentInner label u {
    text-decoration: none;
    font-size: 13px;
}

.UserCover {
    display: block;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 0;
    aspect-ratio: 1/0.4;
    overflow: hidden;
    background: #454545;
}

.UserIntroduction {
    display: block;
    margin: 0 auto;
    width: 100%;
    position: relative;
    padding: 10px;
    padding-left: 116px;
}

.UserIntroduction img {
    display: block;
    margin: 0;
    width: 90px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--theme);
    padding: 3px;
    border-radius: 1000px;
    box-shadow: inset -76px 1px 87px -95px #000000;
    position: absolute;
    left: 3%;
    top: -30px;
}

.UserIntroduction h4 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-weight: bold;
    color: var(--theme);
}

.UserIntroduction label {
    display: block;
    margin: -7px auto 0;
    width: 100%;
    font-size: 15px;
    color: #a4a4a4;
}

.UserIntroduction button {
    position: absolute;
    right: 0;
    top: 0;
    width: 26px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: var(--theme);
    border: solid 2px;
    border-radius: 5px;
    margin: 10px;
    background: none;
    font-size: 12px;
}

.UserCover img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0.7;
}

.ProfileNumbers {
    display: flex;
    justify-content: space-between;
    margin: 20px auto;
    width: 100%;
    background: #e9e9e9;
    padding: 10px 5%;
    border-bottom: dashed 1px #d4d4d4;
}

.ProfileNumbersItem {
}

.ProfileNumbersItem label {
    display: block;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #757575;
}

.ProfileNumbersItem h4 {
    display: block;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #1e1e1e;
}

#Profile .HomeStoriesItem {
}

#Profile .HomeStoriesItem img {
}

.UserPosts {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 100%;
    flex-wrap: wrap;
}

.UserPostsItem {
    display: block;
    margin: 0 auto;
    width: 33.3%;
    aspect-ratio: 1/1;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0px 0px 20px 9px #0000008f;
    background: #909090;
}

.UserPostsItem .UserPostsItemImage {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0.7;
}

.UserPostsItem g {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}

.UserPostsItem g img {
    width: 25px;
    margin: 7px;
    filter: invert(1) drop-shadow(0px 0px 11px black);
}

.MyCartItem {
    display: block;
    margin: 20px auto;
    width: 90%;
    background: #ffffff;
    overflow: hidden;
    border: solid 1px #e8e8e8;
    border-radius: 10px;
    position: relative;
    padding: 10px;
    padding-left: 100px;
}

.MyCartGH {
    display: block;
    margin: 0 auto;
    width: 100%;
}

.MyCartItemThumb {
    position: absolute;
    left: 0;
    top: 0;
    width: 90px;
    height: 100%;
    object-fit: contain;
    object-position: center center;
}

.MyCartItemText {
}

.MyCartItemText h4 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    color: var(--theme
    );
}

.MyCartItemText label {
    display: block;
    margin: 0px auto 2px;
    width: 100%;
    font-size: 15px;
    color: #858585;
}

.MyCartItemText h5 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 16px;
    font-weight: 700;
}

.MyCartItemText h5 s {
    color: #d47b7b;
    margin-right: 4px;
}

.MyCartItemText h5 u {
    font-size: 12px;
    margin: 0 2px;
    text-decoration: none;
}

.CartIncreaserGH {
}

.CartIncreaser {
    display: flex;
    justify-content: space-between;
    width: 98px;
    background: #f8f8f8;
    position: relative;
    overflow: hidden;
    height: 34px;
    direction: rtl;
    margin: 8px 0px 0;
    border: solid 1px #dcdcdc;
    border-radius: 5px;
}

.CartIncreaser input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    border: none;
    background: none;
    pointer-events: none;
    font-size: 14px;
}

.CartIncreaser button {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background: none;
    z-index: 2;
    position: relative;
    font-size: 9px;
    aspect-ratio: 1/1;
}

.CartIncreaser button:last-child {
}

.PlaceOrderBtn {
    position: fixed;
    left: 5%;
    bottom: 70px;
    margin: 15px 0;
    width: 90%;
    background: var(--theme);
    color: aliceblue;
    padding: 13px 0 8px;
    font-size: 21px;
    text-transform: uppercase;
    border: none;
    border-radius: 10px;
    box-shadow: inset 205px 0px 99px -114px #e4636373;
}

.PlaceOrderBtn img {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    padding: 15px;
    filter: invert(1);
}

.ChatItem {
    display: none;
    margin: 0 auto;
    width: 91%;
    height: fit-content;
}

.ChatItemInner {
    display: block;
    margin: 40px 0;
    width: 90%;
    height: fit-content;
    background: #fff0c5;
    position: relative;
    overflow: hidden;
    padding: 13px 20px;
    padding-left: 52px;
    border-radius: 10px 10px 30px 0px;
    color: #504b3d;
    padding-bottom: 33px;
}

.ChatItemInner h5 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-weight: bold;
    font-size: 17px;
}

.ChatItemInner h5 img {
    position: absolute;
    left: 0;
    top: 0;
    width: 27px;
    margin: 10px;
}

.ChatItemInner p {
    display: block;
    margin: 2px auto;
    width: 100%;
    font-size: 14px;
}

#Chat {
    background-color: #ffffff;
    z-index: 9999999999;
}

.ChatBG {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: -1;
    opacity: 0.3;
}

.ChatItemInner label {
    position: absolute;
    right: 11px;
    bottom: 0;
    width: fit-content;
    font-size: 13px;
    color: #00000059;
    margin: 10px;
    font-weight: bold;
}

.ChatHeader {
    display: block;
    margin: 0 auto;
    width: 100%;
    background: #ffffff;
    position: relative;
    overflow: hidden;
    padding: 16px 50px 10px;
    border-bottom: solid 1px #e7e7e7;
}

.ChatHeader h4 {
    display: block;
    margin: 0 auto;
    width: 100%;
}

.ChatHeader button {
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    height: 100%;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
}

.ChatHeader button img {
    display: block;
    margin: 0 auto;
    width: 18px;
    filter: grayscale(30%);
    opacity: 0.7;
}

.ChatHeaderIcon {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    object-position: center center;
    padding: 15px;
}

.ChatActions {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    /* border-top: solid 1px #e7e7e7; */
    padding: 11px 72px;
    box-shadow: 0px -2px 52px -6px #ffffff;
}

.ChatActions button {
    position: absolute;
    left: 10px;
    top: 15%;
    width: auto;
    height: 70%;
    aspect-ratio: 1/1;
    border-radius: 1000px;
    padding: 15px;
    background: #616161;
    border: none;
    overflow: hidden;
}

.ChatActions button img {
    display: block;
    margin: 0 auto;
    width: 100%;
    filter: invert(1);
}

.ChatActions h1 {
    position: absolute;
    right: 10px;
    top: 15%;
    width: auto;
    height: 70%;
    aspect-ratio: 1 / 1;
    border-radius: 1000px;
    padding: 15px;
    background: #be5c5c;
    border: none;
    overflow: hidden;
}

.ChatActions h1 img {
    display: block;
    margin: 0 auto;
    width: 100%;
    filter: invert(1);
}

.ChatActions input {
    display: block;
    margin: 0 auto;
    width: 100%;
    border: solid 1px #cbcbcb;
    padding: 10px 15px;
    border-radius: 1000px;
    font-size: 16px;
    font-weight: 300;
}

.SideMenuDiv ul label {
    position: absolute;
    right: 9px;
    top: 30%;
    background: #737373;
    color: aliceblue;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 20px;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 1000px;
    margin: 0;
    z-index: 2;
    font-size: 14px;
}

.SideMenuDiv ul label g {
    height: 18px;
}

.SwhipeHere {
    position: absolute;
    left: 22%;
    top: 0;
    width: auto;
    height: 100%;
    filter: hue-rotate(-20deg) grayscale(10%) brightness(99%);
}