@import url(../icons.css);
:root {
--gradient-start: rgba(142, 122, 63, 1); /* Default start color of the gradient */
--gradient-end: rgba(225, 196, 114, 1); /* Default end color of the gradient */

/*Start Tab Variables -------------------------------------------*/
--tab-bg-color: rgba(33, 35, 36, 1); /* Background color of tabs */
--inactive-text-color: rgba(173, 178, 188, 1); /* Inactive text color */
--active-text-color: rgba(255, 255, 255, 1); /* Active text color */
--active-tab-bg-color: rgba(0, 0, 0, 1); /* Background color of active tab */
--tab-border-radius: 16px; /* Radius of tabs */
--tab-header-radius: 20px; /* Radius of tab headers */
--tab-padding: 4px; /* Padding of tab headers */
--tab-gap: 8px; /* Gap between tabs */
--tabs-wrapper-bg-color: rgba(33, 35, 36, 1); /* Background color of tabs wrapper */
--tabs-wrapper-border-radius: 20px; /* Border radius of the tabs wrapper */
/*End Tab Variables -------------------------------------------*/

/*  Start Tasks box variables --------------------------------- */
--tasks-custom-box-box-bg-color: rgba(21, 22, 24, 1);
--tasks-custom-box-top-text-color: rgba(255, 255, 255, 1);
--tasks-custom-box-bottom-text-color: rgba(221, 215, 197, 1);
/*  End Tasks box variables --------------------------------- */

/*  Start Toast Message variables --------------------------------- */
--toast-custom-icon-ticka: url('../img/tick.png'); /* Default icon */
--toast-custom-icon-close: url('../img/close.png');
--toast-custom-icon-close-circle: url('../img/close-circle.png');
--toast-custom-icon-danger: url('../img/danger.png');
--toast-custom-icon-info: url('../img/info.png');

--toast-custom-background-success: linear-gradient(90.1deg, rgba(35, 145, 7, 0.5) 0.08%, rgba(12, 47, 3, 0.5) 54.83%, rgba(0, 0, 0, 0.5) 101.7%);
--toast-custom-border-success: 1px solid rgba(14, 65, 0, 1);

--toast-custom-background-error: linear-gradient(90.1deg, rgba(197, 6, 6, 0.5) 0.08%, rgba(47, 3, 3, 0.5) 54.83%, rgba(0, 0, 0, 0.5) 101.7%);
--toast-custom-border-error: 1px solid rgba(65, 0, 0, 1);

--toast-custom-background-warning: linear-gradient(90.1deg, rgba(245, 220, 1, 0.5) 0.08%, rgba(62, 52, 2, 0.5) 54.83%, rgba(0, 0, 0, 0.5) 101.7%);
--toast-custom-border-warning: 1px solid rgba(65, 51, 0, 1);

--toast-custom-background-info: linear-gradient(90.1deg, rgba(1, 103, 255, 0.5) 0.08%, rgba(2, 12, 62, 0.5) 54.83%, rgba(0, 0, 0, 0.5) 101.7%);
--toast-custom-border-info: 1px solid rgba(0, 7, 65, 1);

--toast-custom-neutral-white-100: rgba(255, 255, 255, 1);
/*  End Toast Message variables --------------------------------- */

}
::selection {
    background-color: rgba(225, 196, 114, 1); 
    color: #000; 
}
/* Start Fonts ------------------------------------------ */
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope/Manrope-VariableFont_wght.ttf') format('truetype');
    font-weight: 200 800;
    font-style: normal;
}
@font-face { font-family: 'Switzer'; src: url('../fonts/Switzer-Thin.otf') format('opentype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('../fonts/Switzer-Extralight.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('../fonts/Switzer-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('../fonts/Switzer-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('../fonts/Switzer-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('../fonts/Switzer-Semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('../fonts/Switzer-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('../fonts/Switzer-Extrabold.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('../fonts/Switzer-Black.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }

@font-face { font-family: 'Aber Mono'; src: url('../fonts/Aber-Mono-Light.woff2') format('woff2'), url('assets/fonts/Aber-Mono-Light.woff') format('woff'), url('assets/fonts/Aber-Mono-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aber Mono'; src: url('../fonts/Aber-Mono-Regular.woff2') format('woff2'), url('assets/fonts/Aber-Mono-Regular.woff') format('woff'), url('assets/fonts/Aber-Mono-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aber Mono'; src: url('../fonts/Aber-Mono-Bold.woff2') format('woff2'),  url('assets/fonts/Aber-Mono-Bold.woff') format('woff'),  url('assets/fonts/Aber-Mono-Bold.otf') format('opentype');    font-weight: 700; font-style: normal; font-display: swap; }

body {
    font-family: 'Switzer', sans-serif;
	outline: none !important;
	-webkit-tap-highlight-color: transparent !important;
	tap-highlight-color: transparent !important;
	user-select: none !important;
	-webkit-user-select: none !important;
	-moz-user-select: none !important;
	-ms-user-select: none !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	color: #fff;
	/* background-color: #fff; */
	background-color: #100F17;
	margin: 0;
	padding: 0;
}
section {
	width: 100%;
}
ul {
	padding: 0;
	list-style: none;
}
.f-transform{
    text-transform: uppercase;
}
.font-size-6{
   font-size: 6px !important;
}
.font-size-8{
   font-size: 8px !important;
}
.font-size-10{
    font-size: 10px !important;
}
.font-size-12{
    font-size: 12px !important; 
}
.font-size-14{
    font-size: 14px !important;
}
.font-size-16{
    font-size: 16px !important;; 
}
.font-size-18{
    font-size: 18px !important;
}
.font-size-20{
    font-size: 20px !important; 
}
.font-size-22{
    font-size: 22px !important; 
}
.font-size-24{
    font-size: 24px !important;
}
.font-size-26{
    font-size: 26px !important;
}
.font-size-28{
    font-size: 28px !important;
}
.font-size-30{
    font-size: 30px !important;
}
.font-size-32{
    font-size: 32px !important;
}
.font-size-34{
    font-size: 34px !important;
}
.font-size-36{
    font-size: 36px !important;
}
.font-size-38{
    font-size: 38px !important;
}
.font-size-40{
    font-size: 40px !important;
}
.font-size-42{
    font-size: 42px !important;
}
.font-size-44{
    font-size: 44px !important;
}
.font-size-46{
    font-size: 46px !important;
}
.font-size-48{
    font-size: 48px !important;
}
.font-size-50{
    font-size: 50px !important;
}
.font-size-52{
    font-size: 52px !important;
}
.font-size-54{
    font-size: 54px !important;
}
.font-size-56{
    font-size: 56px !important;
}
/* Example of applying font weights */
h1 {
    font-weight: 900;  /* Uses Poppins-Black */
    color: #fff;
}
h2 {
    font-weight: 800; /* Uses Poppins-Black */
    color: #fff;
}
h3 {
    font-weight: 700; /* Uses Poppins-Black */
    color: #fff;
}
h4 {
    font-weight: 600; /* Uses Poppins-Black */
    color: #fff;
}
h5 {
    font-weight: 400; /* Uses Poppins-Black */
    color: #fff;
}
p,span {
    color:  #CBD5E1;
    text-align: center;
    /* body/medium/regular */
    font-family: Switzer;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%; /* 23.8px */
    letter-spacing: 0.3px;
}
.ik-gap {
	display: block;
	height: 125px;
}
.main-page {
	display: flex;
	flex-flow: column;
	align-items: center;
	width: 100%;
	justify-content: space-between;
	height: 100vh;
}
.main-title-1{
    text-align: center;
    font-family: 'Aber Mono';
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -1px;
    /* color: var(--Secondary-Base, #0F172A); */
    color: var(--Secondary-Base, #fff);
	text-transform: uppercase;
}
.main-title-2{
    /* color: var(--Secondary-Base, #0F172A); */
    color: var(--Secondary-Base, #fff);
    font-family: 'Aber Mono';
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 36px */
	text-transform: uppercase;

}
.main-title-3 {
	color: var(--Secondary-Base, #fff);
	font-family: 'Aber Mono';
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
	letter-spacing: 0.2px;
	margin: 0 !important;
	text-transform: uppercase;
}
.main-title-4 {
	color: var(--Secondary-Base, #fff);
	font-family: 'Aber Mono';
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 170%;
	letter-spacing: 0.3px;
	margin: 0 !important;
	text-transform: uppercase;
}
.title-color-1{
    color:#0F172A !important;
}
.content-color-1{
    color:#CBD5E1 !important;
}
label {
	color: #fff;
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 160%;
	letter-spacing: 0.3px;
}
::placeholder {
	color: #64748B;
}
.p-12 {
    font-family: Switzer;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    letter-spacing: 0.2px;
}
.p-14 {
    font-family: Switzer;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    letter-spacing: 0.3px;
}
.p-li::before {
	content: "●";
	vertical-align: ;
	color: #777E90;
}

.Version{
    color: #94A3B8;
}
strong {
    font-weight: 700; /* Uses Poppins-Bold */
}
hr {
width: 100%;
height: 1px;
background: #353945;
}
.w-50{
    width: 50% !important;
}
.w-100{
    width: 100% !important;
}
.text-centter{
    text-align: center !important;
}
.text-right{
    text-align: right !important;
}
.text-left{
    text-align: left !important;
}
.font-w-100{
   font-weight: 100 !important;
}
.font-w-200{
   font-weight: 200 !important;
}
.font-w-300{
   font-weight: 300 !important;
}
.font-w-400{
   font-weight: 400 !important;
}
.font-w-500{
   font-weight: 500 !important;
}
.font-w-600{
   font-weight: 600 !important;
}
.font-w-700{
   font-weight: 700 !important;
}
.font-w-800{
   font-weight: 800 !important;
}
.font-w-900{
   font-weight: 900 !important;
}
.ik-artlab-btn {
	padding: 0;
	/* border-radius: 100px; */
	border: 1px solid var(--Greyscale-900, #0F172A) !important;
	background: var(--Others-White, #FFF) !important;
	display: flex;
	height: 56px;
	padding: 8px 16px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	color: var(--Secondary-Base, #0F172A) !important;
	font-family: Switzer;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 165%;
	letter-spacing: 0.4px;
	cursor: pointer;
	width: 100%;
	max-width: 768px;
}
.ik-artlab-btn span {
	color: var(--Secondary-Base, #0F172A);
	font-family: Switzer;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 165%;
	letter-spacing: 0.4px;
}
.ik-artlab-btn-gold {
	padding: 0;
	display: flex;
	height: 56px;
	padding: 8px 16px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	/* border-radius: 100px; */
	background: var(--Primary-Base, #C5FF4A) !important;
	color: #000;
	font-family: Switzer;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 165%;
	letter-spacing: 0.4px;
	border: none;
	cursor: pointer;
	width: 100%;
	max-width: 1170px;
}
.ik-artlab-btn-cancel {
	color: #0F172A;
	background: #fff !important;
	border: 1px solid #0F172a;
}
.ik-artlab-btn-gold span {
	color: #000;
	font-family: Switzer;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 165%;
	letter-spacing: 0.4px;
}
.ik-artlab-btn-fixed {
	bottom: 0;
	width: 91%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	flex-direction: column;
	gap: 16px;
	left: 50%;
	transform: translate(-50%, -20%);
	line-height: 39px;
}
.ik-artlab-btn-deactive {
	color: #475569 !important;
	cursor: not-allowed;
	background: #23222B !important;
}
.ik-artlab-btn-gold:hover {
	background: #B1F228 !important;
}
.ik-artlab-btn-followed {
	background: #EDEADE !important;
	color: #0F172A !important;
}
.ik-artlab-btn-gold {
	max-width: 768px;
}
a.ik-artlab-btn-gold,a.ik-artlab-btn {
	max-width: 768px;
	align-items: center;
	display: flex;
	justify-content: center;
	padding: 0;
}
a {
	text-decoration: none;
}
b{
font-family: Switzer;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 170%;
letter-spacing: 0.3px;
}
.main-text p {
	text-align: left;
}
.main-text ul,.main-text ol {
	text-align: left;
	color: var(--Greyscale-500, #CBD5E1);
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 170%;
	letter-spacing: 0.3px;
	padding-left: 20px;
	margin: 0;
}
.gold-gr-text {
background: linear-gradient(to right, rgba(225, 196, 114, 1), rgba(142, 122, 63, 1));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.gold-text {
	color: #94A3B8;
}
/* End Fonts ------------------------------------------ */

/* Start create gradient box ----------------------------*/
.box-gold-gradient {
position: relative;
background: linear-gradient(
    to right,
    var(--gradient-start),
    var(--gradient-end)
);
border-radius: var(--border-radius, 0px);
padding: var(--border-width, 2px);
}

.box-gold-gradient > * {
background: white;
border-radius: inherit;
padding: 10px; 
}

.box-gold-gradient-1 {
--border-width: 1px;
}

.box-gold-gradient-2 {
--border-width: 2px;
}

.box-gold-gradient-3 {
--border-width: 3px;
}

.box-gold-gradient-5 {
--border-width: 5px;
}

.box-gold-gradient-radius-0 {
--border-radius: 0px;
}

.box-gold-gradient-radius-5 {
--border-radius: 5px;
}

.box-gold-gradient-radius-10 {
--border-radius: 10px;
}

.box-gold-gradient-radius-20 {
--border-radius: 20px;
}
/* End create gradient box ----------------------------*/

/* Start create gradient Bordered box ----------------------------*/
.border-gold-gradient {
position: relative;
border-radius: var(--border-radius, 0px);
}

.border-gold-gradient::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: var(--border-width, 2px);
background: linear-gradient(
    to right,
    var(--gradient-start),
    var(--gradient-end)
);
-webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
mask-composite: exclude; /* For Firefox */
-webkit-mask-composite: destination-out; /* For WebKit-based browsers */
}

.border-gold-gradient > * {
position: relative;
background: white;
border-radius: inherit;
z-index: 1;
}

.border-gold-gradient-1 {
--border-width: 1px;
}

.border-gold-gradient-2 {
--border-width: 2px;
}

.border-gold-gradient-3 {
--border-width: 3px;
}

.border-gold-gradient-5 {
--border-width: 5px;
}

.border-gold-gradient-radius-0 {
--border-radius: 0px;
}

.border-gold-gradient-radius-5 {
--border-radius: 5px;
}

.border-gold-gradient-radius-10 {
--border-radius: 10px;
}

.border-gold-gradient-radius-20 {
--border-radius: 20px;
}
/* End create gradient Bordered box ----------------------------*/
.button-disconnect{
    display: inline-flex; /* For automatic width and height adjustment and centering content */
  align-items: center; /* Vertical alignment of content */
  justify-content: center; /* Horizontal alignment of content */
  padding: 8px 12px; /* Padding inside the button */
  gap: 6px; /* Gap between content (useful if you add an icon or other elements) */
  border-radius: var(--border-radius, 12px); /* Dynamic border-radius with a default value of 12px */
  background: rgba(204, 68, 75, 0.20);
  border: none; /* No border */
  cursor: pointer; /* Changes the cursor to a pointer (hand) when hovering */
  transition: opacity 0.3s ease; /* Smooth transition for opacity on hover */
}
.button-disconnect span {
  font-family: 'Poppins', sans-serif; /* Font family */
  text-underline-position: from-font; /* Position of underline */
  text-decoration-skip-ink: none; /* Prevents skipping ink for text decoration */
  color: var(--7, #CC444B);
}
/* Start Create Gradient Button -------------------------------*/
.button-gradient {
display: inline-flex; /* For automatic width and height adjustment and centering content */
align-items: center; /* Vertical alignment of content */
justify-content: center; /* Horizontal alignment of content */
padding: 8px 12px; /* Padding inside the button */
gap: 6px; /* Gap between content (useful if you add an icon or other elements) */
border-radius: var(--border-radius, 12px); /* Dynamic border-radius with a default value of 12px */
background: linear-gradient(
to right, 
var(--gradient-start),
var(--gradient-end)
); /* Background gradient */
border: none; /* No border */
cursor: pointer; /* Changes the cursor to a pointer (hand) when hovering */
transition: opacity 0.3s ease; /* Smooth transition for opacity on hover */
}

/* Styling for the text inside the button */
.button-gradient span {
font-family: 'Poppins', sans-serif; /* Font family */
text-underline-position: from-font; /* Position of underline */
text-decoration-skip-ink: none; /* Prevents skipping ink for text decoration */
color: rgba(0, 0, 0, 1); /* Text color */
}
.button-gradient i {
color: rgba(0, 0, 0, 1); /* Text color */
}
.button-gradient-Pressed{
background: linear-gradient(237deg, #E1C472 3.48%, #E1C472 38.27%, #FFE7A1 50.96%, #E1C472 59.61%, #C4A854 70.42%, #8E7A3F 96.32%);
}

.button-gradient-Pressed.disable{
background: #8E793E;
}
.button-gradient-Pressed.disable span{
color: #564A29;
}
.button-gradient-Pressed.disable i{
color: #564A29;
}
/* Classes for different border-radius values */
.border-radius-0 {
--border-radius: 0px; /* No border-radius */
}

.border-radius-5 {
--border-radius: 5px; /* Border-radius of 5px */
}

.border-radius-10 {
--border-radius: 10px; /* Border-radius of 10px */
}

.border-radius-15 {
--border-radius: 15px; /* Border-radius of 15px */
}

.border-radius-20 {
--border-radius: 20px; /* Border-radius of 20px */
}
/* End Create Gradient Button -------------------------------*/

.main-text p, .main-text ul {
	width: 100% !important;
	text-align: r;
}

/*  Start Toast Message styles --------------------------------- */
#toast-custom-container {
    position: fixed;
    top: 20px; /* Position at the top */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center horizontally */
    display: flex;
    flex-direction: column-reverse; /* New toasts appear at the top */
    gap: 10px;
    z-index: 1000;
    width: 100%; /* Full width */
    max-width: 400px !important; /* Limit maximum width */
    padding: 0 20px; /* Add some padding */
    box-sizing: border-box;
    }

/* Base style for toast */
.toast-custom-fixed-bar {
position: relative;
width: 100%;
height: 36px;
padding: 8px;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 8px;
box-shadow: 0px 2px 24px 0px rgba(0, 0, 0, 0.14);
backdrop-filter: blur(10px);
opacity: 1;
transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Fade-out effect */
.toast-custom-fixed-bar.fade-out {
opacity: 0;
transform: translateY(-20px); /* Slide up while fading out */
}

/* Common styles for left and right sections */
.toast-custom-left-section {
display: flex;
align-items: center;
gap: 8px;
padding-left: 8px;
}

.toast-custom-icon-tick {
width: 20px;
height: 20px;
background-image: var(--toast-custom-icon-tick); /* Use icon variable */
background-size: cover;
}

.toast-custom-text {
font-family: 'Poppins', sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 18px;
color: var(--toast-custom-neutral-white-100);
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}

.toast-custom-right-section {
padding-right: 8px;
cursor: pointer;
}

.toast-custom-icon-close {
width: 40px; /* Adjust icon size */
height: 40px; /* Adjust icon size */
background-image: var(--toast-custom-icon-close); /* Use icon variable */
background-size: cover;
}

/* Specific styles for each toast type */
.toast-custom-success {
background: var(--toast-custom-background-success);
border: var(--toast-custom-border-success);
--toast-custom-icon-tick: var(--toast-custom-icon-ticka); /* Success icon */
}

.toast-custom-error {
background: var(--toast-custom-background-error);
border: var(--toast-custom-border-error);
--toast-custom-icon-tick: var(--toast-custom-icon-close-circle); /* Error icon */
}

.toast-custom-warning {
background: var(--toast-custom-background-warning);
border: var(--toast-custom-border-warning);
--toast-custom-icon-tick: var(--toast-custom-icon-danger); /* Warning icon */
}

.toast-custom-info {
background: var(--toast-custom-background-info);
border: var(--toast-custom-border-info);
--toast-custom-icon-tick: var(--toast-custom-icon-info); /* Info icon */
}
/*  End Toast Message styles --------------------------------- */
/*  End modal styles --------------------------------- */
.ikmodal {
visibility: hidden;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.5);
opacity: 0;
transition: opacity 0.5s ease, visibility 0s 0.5s;
}
.ikmodal-content {
margin: 15% auto;
padding: 8px 8px 16px 8px;
width: 80%;
max-width: 500px;
opacity: 0;
transform: scale(0.9);
transition: opacity 0.5s ease, transform 0.5s ease;
border-radius: 16px;
border: 0.5px solid var(--neutral-black-200, #4A4F5D);
background: rgba(0, 0, 0, 0.50);
box-shadow: 0px 29px 40px 0px rgba(0, 0, 0, 0.64);
backdrop-filter: blur(12px);
}
.ikmodal-content-wrapper {
padding: 8px;
}
.ikmodal-close {
color: #7F7F7F;
font-size: 23px;
font-weight: bold;
cursor: pointer;
float: right;
}
.ikmodal-close:hover,
.ikmodal-close:focus {
color: #000;
text-decoration: none;
}
.ikmodal.show {
visibility: visible;
opacity: 1;
transition: opacity 0.5s ease;
}
.ikmodal-content.show {
opacity: 1;
transform: scale(1);
}
/*  End modal styles --------------------------------- */


/*  Start Bottomsheet styles --------------------------------- */
.ikbottomsheet {
    visibility: hidden;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.ikbottomsheet-content {
	background-color: #23222B;
	padding: 20px;
	width: 90%;
	max-width: 500px;
	border-radius: 0;
	text-align: center;
	position: relative;
	bottom: -100%;
	transition: bottom 0.3s ease;
}
.ikbottomsheet-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.ikbottomsheet-close:hover,
.ikbottomsheet-close:focus {
    color: #000;
    text-decoration: none;
}
.ikbottomsheet.show {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease;
}
.ikbottomsheet-content.show {
    bottom: 0;
}
.ikbottomsheet-handle {
    width: 50px;
    height: 5px;
    background: #ccc;
    border-radius: 5px;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    cursor: grab;
    display: none;
}
.closeIkbottomsheet {
	padding: 12px;
	border-radius: 100px;
	display: flex;
	justify-content: center;
	width: 24px;
	height: 24px;
	align-items: center;
	margin: -80px auto 30px auto;
	cursor: pointer;
	border-radius: 100px;
	background: var(--Greyscale-800, #23222B);
}
.closeIkbottomsheet svg path {
	stroke: #fff !important;
}
/*  End Bottomsheet styles --------------------------------- */

/* start horizontal-socials-with-text styles -----------------*/
.horizontal-socials-with-text li {
padding: 11px 12px;
display: flex;
align-items: center;
gap: 8px;
font-family: Poppins;
font-style: normal;
font-weight: 500;
line-height: normal;
}
/* end horizontal-socials-with-text styles -----------------*/

/*Start inputs styles---------------------------------*/
input:not([type="submit"], [type="checkbox"], [type="radio"]), textarea, select {
	display: flex;
	height: 48px;
	padding: 0px 16px;
	align-items: center;
	gap: 10px;
	align-self: stretch;
	border-radius: 16px;
	border: 0.5px solid var(--neutral-black-300, #353945);
	background: none;
	color: #fff;
	border-radius: 0;
	border: 1px solid var(--Secondary-100, #64748B);
	width: 100%;
	box-sizing: border-box;
	padding: 16px 20px;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 170%;
	letter-spacing: 0.3px;
	margin: 10px 0 16px 0;
}
input:not([type="submit"]):focus, textarea:focus,input:not([type="submit"]):focus-visible, textarea:focus-visible {
	border: 1px solid #C5FF4A !important;
    border-color: #C5FF4A;
}
.radio-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin:24px auto ;
}
.radio-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-radius: 12px;
	border: 2px solid #ddd;
	background: #23222B;
	cursor: pointer;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	transition: all 0.3s ease;
	border-radius: 0;
	border: 1px solid #64748B;
	box-sizing: border-box;
	width: 100%;
}
.radio-label span {
	color: #fff;
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 170%;
	letter-spacing: 0.3px;
	text-align: left;
	margin-right: 5px;
}
.radio-label input {
	display: none;
}
.radio-label .custom-radio {
	width: 18px;
	height: 18px;
	border: 2px solid #334155;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}
.radio-label .custom-radio::after {
	content: "";
	width: 18px;
	height: 10px;
	background: transparent;
	border-radius: 50%;
	transition: all 0.3s ease;
}
.radio-label input:checked + .custom-radio {
	border: 7px solid #C5FF4A;
	height: 9px;
	width: 9px;
}
.radio-label input:checked + .custom-radio::after {
	background: #23222B;
}
.radio-label input:checked ~ span {
	color: #C5FF4A;
}
.radio-label input:checked ~ .radio-label {
	border-color: #C5FF4A;
}
.radio-label:has(input:checked) {
	border-color: #C5FF4A;
}




/* Behavior when checkbox is unchecked */
.toggle-switch input:not(:checked) + .toggle-slider {
    justify-content: flex-start;
    background-color: #ccc;
}

.toggle-switch input:not(:checked) + .toggle-slider i {
    color: #777;
}
/* End inputs styles --------------------------------- */

/*Start table styles---------------------------------*/
.ik-table-container {
text-align: center;
}
.ik-table {
width: 100%;
max-width: 600px;
border-collapse: collapse;
margin: 0 auto;
}
.ik-table th, .ik-table td {
padding: 8px;
text-align: center;
}
.ik-table th {
font-weight: bold;
}
.ik-table td, .ik-table th {
border-right: 1px dotted #fff;
}
.ik-table td:last-child, .ik-table th:last-child {
border-right: none;
}
/* End table styles --------------------------------- */
/*Start pagination styles---------------------------------*/
.ik-pagination {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
gap: 10px;
}
.ik-pagination i {
font-size: 20px;
font-weight: 900;
}
.ik-pagination span, .ik-pagination a {
color: #8D96AD;
text-decoration: none;
font-size: 14px;
padding: 12px;
cursor: pointer;
}
.ik-pagination .active {
font-weight: bold;
text-decoration: none;
border-radius: 4px;
background: var(--400, #212324);
color: #fff;
padding: 6px 12px;
border-radius: 5px;
}
/* End pagination styles --------------------------------- */


/* Start border-blur-tabs------------------------*/
.iktab-content {
	display: none;
	padding: 16px 0;
}
.iktab-content.active {
display: block;
}
.simple-tabs-wrapper .iktab-links button.active {
	/* background: #000; */
	/* box-shadow: none; */
	color: #fff;
	border-radius: 100px;
	background: var(--Secondary-Base, #0F172A);
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);
}
.border-blur-tabs-wrapper {
	border-radius: 10px;
	width: 100%;
}
.iktab-links {
	padding: 10px;
	align-items: center;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 0px;
	background: var(--Greyscale-800, #23222B) !important;
}
.iktab-links button {
	background: #23222B;
	border: none;
	text-align: center;
	border-radius: 0px;
	padding: 10px;
	width: 100%;
	color: #fff;
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 170%;
	letter-spacing: 0.2px;
}
.simple-tabs-wrapper {
border: none;
}
.simple-tabs-wrapper .iktab-links {
background: #100F17;
}
.simple-tabs-wrapper .iktab-links button.active {
	color: #100F17;
	border-radius: 0px;
	background: var(--Secondary-Base, #fff);
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);
}
.iktab-link i {
	font-size: 22px;
	vertical-align: bottom;
	margin-left: 5px;
}
.iktab-link.active i {
	color: #cc444b;
}
/* End border-blur-tabs------------------------*/


/* Start Container Code -----------------------------------*/
.custom-container {
	width: 100%;
	max-width: 768px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 15px;
	padding-left: 15px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}


/********Start slider styles*******************/
.cashclick-bottom {
	bottom: 15px;
	width: 91%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	left: 50%;
	transform: translate(-50%, -50%);
}
.cashclick-slider-container {
	width: 100%;
	margin: auto;
	text-align: center;
	position: relative;
	height: 85vh;
}
.cashclick-slider {
	display: none;
}
.cashclick-slider.active {
	display: block;
}
.cashclick-dot {
	height: 8px;
	width: 8px;
	margin: 0 1px;
	background-color: #2C2D2E;
	border-radius: 50%;
	display: inline-block;
	cursor: pointer;
}
.cashclick-dot.active {
	background-color: #717171;
	border-radius: 172px;
	background: #C5FF4A;
	width: 16px;
}
.cashclick-dots-container {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 70%;
}
.cashclick-dots {
    display: flex;
    gap: 5px;
}
.cashclick-dot {
	width: 8px;
	height: 8px;
	background-color: #EDEADE;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.3s;
}
.cashclick-dot.active {
    background-color: #C5FF4A;
}
.cashclick-word {
	font-size: 18px;
	font-weight: bold;
	display: none;
	flex: 0 0 50%;
	text-align: left;
}


/**custom syltes for each slider***/
.next-Details i {
	display: none;
}
.exchange-slider figure {
	width: 100%;
	margin: 0 auto;
	max-width: 230px;
	height: 230px;
	margin: 30px auto;
}
.exchange-slider figure img {
	width: 100%;
}
.exchange-slider-content h2, .exchange-slider-content p {
	margin: 0 !important;
}
.exchange-slider-content h2 {
	margin: 10px !important;
}

.Onboarding-slider figure ,.map-slider figure{
	width: 100%;
	height: 350px;
	margin: 10px auto;
}
.Onboarding-slider figure img , .map-slider figure img {
	width: 100%;
	max-height: 100%;
	object-fit: scale-down;
}
.Onboarding-slider-content h2, .Onboarding-slider-content p,.map-slider-content p  {
	margin: 0 !important;
}
.Onboarding-slider-content h2 {
	margin: 10px !important;
}
.start-slider-btn {
	width: 100%;
	flex: 0 0 100%;
    padding: 16px 20px 16px 16px !important;
}
.start-slider-btn i,.last-slider-btn i {
	display: none;
}
.Onboarding-slider-content-final-slide a {
	display: flex;
	align-items: center;
	margin: 10px;
	padding: 16px 20px 16px 16px;
	text-decoration: none;
}
.map-slider-bottom::before {
	content: '';
	background: url('../img/map/map-bg.png');
	position: fixed;
	bottom: 0;
	z-index: -1;
	width: 100%;
	height: 250px;
	background-repeat: repeat-x !important;
}
.map-slider-content-top p , .map-slider-content-top h2,.map-slider-content-bottom p , .map-slider-content-bottom h2 {
    margin: 0px;
}
.map-slider-content-top h2 {
    margin: 20px 0 0 0;
}
.map-slider-content-bottom a img {
	width: 100%;
	position: relative;
	z-index: 1;
}
.map-slider-content-bottom {
	min-height: 250px !important;
}

/**custom syltes for each slider***/

/********End slider styles*******************/

/********Start copy styles*******************/
.share-section {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	flex-flow: column;
	gap: 12px;
}
.share-section p {
	margin: 0;
	text-align: left;
}
.share-section a {
	text-decoration: none;
	padding: 14px 16px 14px 16px;
	text-align: left;
	justify-content: space-between;
}
.telegram-share{
	border-radius: 10px;
	border: 1px solid var(--2, #DDD7C5);
	background: rgba(255, 255, 255, 0.01);
	backdrop-filter: blur(2px);
}
.copy-container, .Withdraw-container {
	position: relative;
	border-radius: 16px;
	border: 1px solid var(--Secondary-100, #CBD5E1);
	background: var(--Others-White, #FFF);
	display: flex;
	padding: 0;
	align-items: center;
	gap: 10px;
	align-self: stretch;
}
.copy-container i, .Withdraw-container span {
	position: absolute;
	right: 17px;
	font-size: 20px;
	top: 14px;
	color: #000;
}
.copy-container input {
	margin: 0;
	border: none;
	color: var(--Secondary-Base, #0F172A);
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 170%;
	letter-spacing: 0.3px;
	border-radius: 16px;
}
.Withdraw-container {
	margin: 14px auto;
}
/********End copy styles*******************/


/*Start profile-page********************/
.profile-connected {
	border-radius: 30px;
	border: 1px solid var(--4, #353945);
	background: var(--5, #151618);
	padding: 6px 8px;
}
.Profile-edit .profile-image {
	position: relative;
	width: 65px;
	height: 65px;
	border-radius: 50px;
}
.Profile-edit .copy-container {
	position: relative;
	display: flex;
	align-items: center;
	margin: 10px 0 0 0 !important;
}
.Profile-edit .copy-container input {
	padding: 0;
	border: none;
	width: auto;
	outline: none;
}
.Profile-edit .copy-container i{
	position: relative;
	right: 0;
	font-size: 20px;
	top: 0;
	margin-left: 10px;
}
.Profile-edit .profile-edit-form input {
	box-sizing: border-box;
    border-radius: 10px;
}
.Profile-edit-social {
	display: flex;
	list-style: none;
	gap: 10px;
	font-size: 22px;
	justify-content: flex-start;
	padding: 0;
}
.Profile-edit-social a {
text-decoration: none;
}
.Profile-edit-social a {
	text-decoration: none;
	color: #fff;
}
.custom-file {
    display: flex;
    align-items: center;
    gap: 10px;
}
.custom-file input[type="file"] {
    display: none;
}
.custom-file label {
	background-color: none;
	color: #fff;
	padding: 8px 20px;
	border-radius: 5px;
	cursor: pointer;
	display: inline-block;
	border-radius: 10px;
	border: 1px solid var(--2, #DDD7C5);
	margin: 8px 0;
}
.custom-file label:hover {
    background-color: #0056b3;
}
.file-name {
    font-size: 14px;
    color: #333;
}
/*End profile-page********************/

/*Start Message-popup style*******************/
.Message-popup img {
	width: 55px;
	height: 55px;
}
.Message-popup .ikmodal-close {
	top: 13px;
	position: relative;
	right: 10px;
}
/*End Message-popup style*******************/


.top-nav-sec {
	display: flex;
	margin: 20px 0px 0 0;
	justify-content: space-between;
	width: 100%;
	align-items: center;
}
.back-btn {
	border-radius: 100px;
	border: 1px solid var(--Greyscale-200, #E2E8F0);
	display: inline-block;
	padding: 10px;
	color: #CBD5E1;
	width: 20px;
	height: 20px;
	text-align: center;
	line-height: 0;
	font-weight: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;
}
.back-btn svg path {
	stroke: #fff !important;
	color: #fff !important;
}
.notif-count {
	position: absolute;
	background: #F4462C;
	width: 8px;
	height: 8px;
	border-radius: 50px;
	top: 10px;
	right: 10px;
}
/*START ARTLAB*****************/
/*Start Onboarding style*******/
.Onboarding-slider .cashclick-bottom {
	bottom: 0;
	width: 91%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	flex-direction: column;
	gap: 16px;
	left: 50%;
	transform: translate(-50%, -15%);
	max-width: 768px;
}
/*End Onboarding style*******/

/*Start Authentication style*******/
.password-wrapper {
	position: relative;
}
.toggle-password {
	position: absolute;
	right: 17px;
	top: 6px;
	font-size: 22px;
}
.toggle-password i {
	color: #97A6BB;
	cursor: pointer;
}
.strength-meter {
	display: flex;
	gap: 5px;
	margin-top: 5px;
	display: none;
	justify-content: space-between;
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 170%;
	letter-spacing: 0.2px;
	align-items: center;
}
.strength-meter > div {
	display: flex;
	gap: 8px;
	width: 70% !important;
}
.strength-meter div > div {
	width: 45px;
	height: 4px;
	background: #F1F5F9;
	border-radius: 3px;
}
.strength-meter div.active {
    background: #8B6F36;
}
.password-strength {
	display: flex;
	align-items: baseline;
	gap: 3px;
	position: relative;
}
.password-strength i {
    color: #97A6BB;font-size: 18px;position: absolute;top: 14px;
}
.password-strength p {
    font-size: 12px;margin-left: 25px;
}


.input-group {
	display: flex;
	gap: 10px;
	width: 100%;
	justify-content: space-between;
}
.country-code {
	flex: 1 1 25%;
}
.country-code select {
	padding: 0 20px;
}
.country-code select {
	padding: 0 20px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	position: relative;
}
.country-code {
	position: relative;
}
.country-code::before {
	content: "\ed16";
	font-family: iseed !important;
	position: absolute;
	font-size: 20px;
	z-index: 222;
	color: #94A3B8;
	right: 15px;
	top: 22px;
}
.country-code option {
    font-family: Switzer;
}


.otp-container {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin: 10px 0;
}
.otp-input {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 24px;
    border: 2px solid #ddd;
    border-radius: 8px;
}
.otp-input:focus {
    border-color: #a58b43;
    outline: none;
}
.resend-container {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
}
.resend-container span {
	color: #23AA26;
	font-size: 12px;
	font-weight: 600;
}
.resend {
	font-size: 14px;
	color: #C5FF4A;
	font-weight: 600;
	cursor: not-allowed;
}
.resend.active {
	cursor: pointer;
}

.signupForm {
	margin: 30px auto;
}
.Login-Sec {
	width: 100%;
}
.RememberMe-sec {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	font-weight: 500;
}
#RememberMe {
	width: 16px;
	height: 16px;
	vertical-align: middle;
	accent-color: #C5FF4A;
}
.RememberMe-sec label {
	color: #CBD5E1 !important;
}
.RememberMe-sec a {
	color: #CBD5E1 !important;
}
.RememberMe-sec a, .RememberMe-sec label {
	color: #64748B !important;
}
/*End Authentication style*******/


.user-img-name {
	display: flex;
	align-items: center;
	gap: 10px;
}
.user-img-name span {
	color: #fff;
	font-family: Switzer;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 165%;
	letter-spacing: 0.4px;
}
.search-wrapper {
	position: relative;
	width: 100%;
}
.search-wrapper-icon {
	position: absolute;
	right: 17px;
	top: 6px;
	font-size: 22px;
}
.search-wrapper-icon i {
	color: #0F172A;
	cursor: pointer;
}
.search-wrapper input {
	border-radius: 0;
	margin: 0;
}
.category-items-container ul {
	display: flex;
	align-items: center;
	align-items: flex-start;
	gap: 8px;
	margin: 25px 0px;
	padding: 0;
	cursor: grabbing;
}
.category-items-container ul li {
	display: flex;
	align-items: center;
	gap: 10px;
	border-radius: 0;
	border: 1px solid #334155;
	padding: 10px 16px;
}
.category-items-container ul li svg {
	display: flex;
	padding: 5px 10px;
	justify-content: center;
	align-items: center;
	border-radius: 100px;
	background: var(--Primary-50, #EDEADE);
	width: 20px;
	height: 20px;
	border-radius: 100px;
	background: var(--Greyscale-800, #23222B);
}
.category-items-container ul li span {
	color: #fff;
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 170%;
	letter-spacing: 0.2px;
}
.category-items-container ul li:hover {
	border-color: #C5FF4A !important;
}
.category-items-container ul li svg path {
	stroke: #C5FF4A;
}
.scroll-container {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .scroll-container::-webkit-scrollbar {
    display: none;
  }
  
  .scroll-content {
    display: flex;
    gap: 10px;
    white-space: nowrap;
    padding: 10px;
  }


.listing-section {
	width: 100%;
}
.listing-section-title {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 auto 10px auto;
}

/*Start Course Item**************/
.listing-container {
	margin-top: 24px !important;
}
.listing-container ul {
	padding: 0;
}
.course-item img {
	width: 100%;
	height: 100%;
}
.course-item {
	display: flex;
	flex-flow: column;
	gap: 16px;
	margin: 24px auto;
}
.course-item-top {
	display: flex;
	gap: 16px;
	flex-flow: row;
}
.course-item figure {
	padding: 0;
	margin: 0;
	flex: 0 0 40%;
	max-width: 200px;
	border-radius: 0;
	overflow: hidden;
	position: relative;
}
.course-level-bars {
	position: absolute;
	bottom: 10px;
	border-radius: 0px;
	background: var(--Others-White, #FFF);
	backdrop-filter: blur(15px);
	padding: 6px 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	left: 10px;
}
.course-level-bars span {
	color: var(--Greyscale-900, #0F172A);
	text-align: center;
	font-family: Switzer;
	font-size: 10px;
	font-style: normal;
	font-weight: 600;
	line-height: 160%;
	letter-spacing: 0.2px;
}
.course-detailes {
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	justify-content: space-between;
}
.course-teacher img {
	width: 24px;
	height: 24px;
	border-radius: 50px;
}
.course-rating-sec {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.course-rating-sec span {
	color: var(--Secondary-Base, #fff);
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 170%;
	letter-spacing: 0.2px;
	align-self: ;
}
.course-rating-sec div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}
.download-detailes {
	display: flex;
	justify-content: space-between;

}
.download-detailes span {
	font-family: Switzer;
    color: var(--Secondary-Base, #fff);
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 170%;
	letter-spacing: 0.2px;
}
.download-detailes > div {
	display: flex;
	gap: 4px;
	align-items: center;
}
.progress-container {
    width: 100%;
    background-color: #F1F5F9;
    border-radius: 5px;
    overflow: hidden;
    margin: 5px 0;
}
.progress-bar {
    width: 80%;
    height: 6px;
    background-color: #23AA26;
    text-align: center;
    line-height: 6px;
    color: white;
    font-weight: bold;
}
.progress-detailes-text {
	display: flex;
	justify-content: space-between;
	align-items: center;
	overflow: hidden;
}
.progress-detailes-text span {
	color: var(--Secondary-Base, #fff);
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 170%;
	letter-spacing: 0.2px;
}



.course-grid {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	gap: 16px;
}
.course-grid li {
	flex-flow: column;
	width: auto;
	flex: 0 0 47%;
	margin: 0 0 10px 0;
}
.course-grid .course-item-top {
	flex-flow: column;
}
.course-grid .course-detailes {
	gap: 10px;
}
.course-grid .course-detailes  .course-teacher img {
	display: none;
}
.course-grid .course-item figure {
	max-width: 100%;
	min-height: 125px;
}
.course-grid .download-detailes div > span {
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	max-width: 13ex;
}


.course-grid-scroll {
	display: flex;
	flex-wrap: nowrap;
	margin: 0;
	gap: 16px;
	cursor: grabbing;
	width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.course-grid-scroll::-webkit-scrollbar {
	display: none;
}
.course-grid-scroll li {
	flex-flow: column;
	width: auto;
	flex: 0 0 175px;
	margin: 0 0 10px 0;
}
.course-grid-scroll .course-item-top {
	flex-flow: column;
}
.course-grid-scroll .course-detailes {
	gap: 10px;
}
.course-grid-scroll .course-detailes  .course-teacher img {
	display: none;
}
.course-grid-scroll .course-item figure {
	max-width: 100%;
	min-height: 125px;
}
.course-grid-scroll .download-detailes div > span {
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	max-width: 13ex;
}



.course-about-sec ul li {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	color: #fff;
	gap: 10px;
}
.course-about-sec ul li p{
	color: var(--Secondary-Base, #fff);
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 170%;
	letter-spacing: 0.2px;
}
.course-about-sec ul li i {
	font-size: 24px;
}
details {
	border-top: 2px solid #23222B;
	padding: 16px 0 !important;
}
details > summary {
	color: var(--Secondary-Base, #fff);
	font-family: Switzer;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 165%;
	letter-spacing: 0.4px;
	display: flex;
	gap: 12px;
	align-items: baseline;
	justify-content: space-between;
}
details summary span {
	color: var(--Greyscale-500, #CBD5E1);
	font-family: Switzer;
	font-size: 10px;
	font-style: normal;
	font-weight: 700;
	line-height: 160%;
	letter-spacing: 0.2px;
	text-wrap: nowrap;
}
details p {
	text-align: left !important;
}
details summaty i {
	color: #94A3B8 !important;
}
details[open=""] > i::before {
	content: "\ed29";
}
details > div > i {
	color: #94A3B8;
	margin-right: 10px;
	vertical-align: middle;
	font-size: 18px;
}
details > div > span {
	color: var(--Secondary-Base, #fff);
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 170%;
	letter-spacing: 0.2px;
}
details > div {
	margin: 10px 0;
}
.course-bottom-nav, .quiz-bottom-nav {
	width: 100%;
	background: #23222B;
	position: fixed;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 20px;
	justify-content: space-between;
	padding: 24px;
	box-sizing: border-box;
	box-shadow: 0px 5px 40px 0px rgba(0, 0, 0, 0.10);
	max-width: 768px;
	left: 50%;
	transform: translateX(-50%);
}
.course-bottom-nav span, .quiz-bottom-nav span {
	color: #fff;
	font-family: Switzer;
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 150%;
}
.Course-attachment-li {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 16px 0;
}
.Course-attachment-li i {
	vertical-align: sub;
	margin-right: 5px;
	font-size: 16px;
}
.Course-attachment-li b {
	color: var(--Greyscale-500, #CBD5E1);
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 170%; /* 23.8px */
	letter-spacing: 0.3px;
}
.Course-attachment-li a {
	color: var(--Primary-Base, #C5FF4A);
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	line-height: 170%;
	letter-spacing: 0.2px;
}



.course-mentor-row {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	gap: 10px;
}
.course-mentor-row div {
	display: flex;
	align-items: center;
	gap: 8px;
}
.course-mentor-row div > img {
	width: 28px;
	height: 28px;
	border-radius: 100px;
	object-fit: cover;
}
.course-mentor-row > span {
	color: #fff;
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 170%;
	letter-spacing: 0.3px;
}
.course-mentor-row svg path {
	stroke: #fff;
}
.course-mentor-row div > span {
	color: #fff;
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 170%;
	letter-spacing: 0.3px;
	border-radius: ;
}



.course-week-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--Greyscale-500, #CBD5E1);
	font-family: Switzer;
	font-size: 10px !important;
	font-style: normal;
	font-weight: 700;
	line-height: 160%;
	letter-spacing: 0.2px;
	gap: 10px;
}
.course-week-title svg {
	border: 1px solid var(--Greyscale-200, #E2E8F0);
	padding: 8px;
	border-radius: 100px;
	height: ;
	cursor: pointer;
	width: 17px;
	height: 14px;
}
.course-week-title p {
	color: #fff;
	font-family: Switzer;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 165%;
	letter-spacing: 0.4px;
	text-align: left;
	margin: 0;
}




.Enroll-Successful-box {
	display: flex;
	align-items: center;
	gap: 16px;
	align-self: stretch;
	border-radius: 0;
	border: 1px solid var(--Greyscale-200, #E2E8F0);
	flex-flow: column;
	padding: 24px;
}
.Enroll-Successful-box > p {
	color: #fff;
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 170%;
	letter-spacing: 0.3px;
	text-align: left;
}
.Enroll-Successful-box > div span {
	overflow: hidden;
	color: #fff;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 170%;
	letter-spacing: 0.2px;
}
.Enroll-Successful-box img {
	border-radius: 24px;
	object-fit: cover;
	width: 28px;
	height: 28px;
	margin-right: 10px;
}
.Enroll-Successful-box > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}


.row-item {
	padding: 16px 0 !important;
}
.enroll-item > a img {
	border-radius: 14px !important;
}
.enroll-item a > div > div {
	display: flex;
	align-items: self-start;
	flex-flow: column;
}
.enroll-item a > div > div span {
	color: var(--Greyscale-500, #CBD5E1);
	font-family: Switzer;
	font-size: 10px;
	font-style: normal;
	font-weight: 400;
	line-height: 160%;
	letter-spacing: 0.2px;
}
.Enroll-email {
	display: flex;
	justify-content: start;
	gap: 10px;
	border-top: 1px solid #E2E8F0;
	border-bottom: 1px solid #E2E8F0;
	padding: 12px;
}
.Enroll-email b {
	color: #fff;
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	line-height: 170%;
	letter-spacing: 0.2px;
}
.Enroll-email span {
	color: var(--Greyscale-500, #CBD5E1);
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 170%;
	letter-spacing: 0.2px;
}
.Enroll-price {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px;
}
.Enroll-price b {
	color: #fff;
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 170%;
	letter-spacing: 0.2px;
}
.Enroll-price span {
	color: var(--Greyscale-500, #CBD5E1);
	text-align: right;
	font-family: Switzer;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 150%;
	letter-spacing: 0.2px;
}
/*End Course Item**************/
.mentor-grid {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}
.mentor-card {
	list-style: none;
	position: relative;
	border-radius: 0px;
	overflow: hidden;
	width: auto;
	flex: 0 0 47%;
}
.mentor-card figure::before {
	background: rgb(255,255,255);
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.9344070391828606) 100%, rgba(255,255,255,0.33776838372067575) 100%);
	content: '';
	width: 100%;
	height: 80%;
	position: absolute;
	bottom: 0;
}
.mentor-card figure {
	position: relative;
	border-radius: 0;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
	height: 100%;
}
.mentor-card img {
	width: 100%;
	height: 100%;
	border-radius: 0;
	overflow: hidden;
	object-fit: cover;
}
.mentor-card figure > svg {
	position: absolute;
	right: 16px;
	top: 16px;
}
.mentor-card-info {
	position: absolute;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0px;
	align-items: flex-start;
	padding: 16px;
}
.mentor-card-info h3 {
	overflow: hidden;
	color: var(--Others-White, #FFF);
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 170%;
	letter-spacing: 0.3px;
	margin: 5px auto;
}
.mentor-card-info p {
	overflow: hidden;
	color: var(--Others-White, #FFF);
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: Switzer;
	font-size: 10px;
	font-style: normal;
	font-weight: 400;
	line-height: 160%;
	letter-spacing: 0.2px;
	margin: 0;
	text-align: left;
}
.mentor-card-info span {
	overflow: hidden;
	color: var(--Others-White, #FFF);
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: Switzer;
	font-size: 10px;
	font-style: normal;
	font-weight: 600;
	line-height: 160%;
	letter-spacing: 0.2px;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 8px 0 8px 0px;
}
.mentor-card-info a {
	color: #000;
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 170%;
	letter-spacing: 0.3px;
	box-sizing: border-box;
	padding: 8px !important;
	height: auto;
}
.mentor-grid-scroll {
	display: flex;
	flex-wrap: nowrap;
	margin: 0;
	gap: 16px;
	cursor: grabbing;
	width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.mentor-grid-scroll::-webkit-scrollbar {
	display: none;
}
.mentor-grid-scroll .mentor-card {
	flex: 0 0 175px;
}


.DetailofMentor-top-cover {
	width: 100%;
	background: url('../img/cover.png');
	background-repeat: no-repeat;
	height: 100px;
	position: relative;
	background-size: cover;
}
.DetailofMentor-top-img {
	width: 100%;
	text-align: center;
	display: flex;
	align-items: center;
	flex-flow: column;
	gap: 0;
	margin: 0;
}
.DetailofMentor-top-img figure {
	width: 80px;
	height: 80px;
	overflow: hidden;
	border-radius: 100px;
	border: 3px solid #fff;
	margin: 0 0 10px 0;
}
.DetailofMentor-top-img img {
	width: 100%;
}
.DetailofMentor-top-img > div {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0px;
	flex-flow: column;
}
.DetailofMentor-top-img > div p,.DetailofMentor-top-img > div h3{
	margin: 1px;
}

.DetailofMentor-top-counters {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	margin: 16px auto;
}
.DetailofMentor-top-counters > div {
	display: flex;
	flex-flow: column;
	align-items: center;
	text-align: center;
	gap: 5px;
}
.DetailofMentor-top-counters > div b {
	color: var(--Secondary-Base, #fff);
	text-align: center;
	font-family: Switzer;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 150%;
	letter-spacing: 0.2px;
}
.DetailofMentor-top-counters > div span {
	color: var(--Greyscale-500, #CBD5E1);
	text-align: center;
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 170%;
	letter-spacing: 0.3px;
}



.toggle-container {
	width: 65px;
	height: 30px;
	background: #23222B;
	border-radius: 0;
	display: flex;
	align-items: center;
	padding: 5px;
	position: relative;
	cursor: pointer;
}
.toggle-btn {
	width: 30px;
	height: 30px;
	background: white;
	border-radius: 0;
	position: absolute;
	right: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.3s ease;
	background: var(--Greyscale-700, #334155);
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.10);
}
.toggle-container img {
	width: 16px;
	height: 16px;
	margin: 7px;
	opacity: .5;
}
.toggle-btn img {
	opacity: 1;
}
.grid-view .toggle-btn {
	transform: translateX(-34px);
}


.filter-sort {
	border-radius: 100px;
	background: var(--Secondary-Base, #0F172A);
	box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.30);
	display: inline-flex;
	padding: 12px 16px;
	justify-content: center;
	align-items: center;
	gap: 16px;
	position: fixed;
	bottom: 20px;
	transform: translate(-50%,0%);
	left: 50%;
}
.filter-sort > div {
	display: flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
}
.filter-sort > div span {
	color: var(--Others-White, #FFF);
	text-align: center;
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 170%;
	letter-spacing: 0.2px;
}
.filter-sort > b {
	background: rgba(255, 255, 255, 0.30);
	width: 1px;
	height: 20px;
}
/*******Start Nav Bottom******/
.footer-bottom-nav {
	width: 100%;
	background: #fff;
	position: fixed;
	bottom: 0;
	max-width: 768px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--Greyscale-800, #23222B);
	backdrop-filter: blur(25px);
}
.footer-bottom-nav ul {
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	list-style: none;
	padding: 0 20px;
	margin: 5px 0 10px auto;
}
.footer-bottom-nav span {
	color: #64748B;
	text-align: center;
	font-family: Switzer;
	font-size: 10px;
	font-style: normal;
	font-weight: 600;
	line-height: 160%;
	letter-spacing: 0.2px;
}
.footer-bottom-nav ul li a i {
	display: flex;
	width: 24px;
	height: 24px;
	padding: 2.3px 4.261px 2.355px 4.2px;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	font-size: 24px;
	color: #64748B;
	margin: 2px auto;
	position: relative;
}
.footer-bottom-nav ul li a img {
	display: flex;
	width: 24px;
	height: 24px;
	padding: 2.3px 4.261px 2.355px 4.2px;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	font-size: 24px;
	color: #64748B;
	margin: 2px auto;
	border-radius: 50px;
}
.footer-bottom-nav ul li {
	position: relative;
}
.footer-bottom-nav li b {
	position: absolute;
	background: #F4462C;
	width: 8px;
	height: 8px;
	border-radius: 50px;
	top: 3px;
	right: 9px;
}
.center-menu-item i {
	display: flex;
	width: 50px;
	height: 50px;
	padding: 10px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 100px;
	background: #8BCC00;
	box-shadow: 0px 5px 10px 0px rgba(0, 86, 210, 0.30);
	color: #100F17 !important;
	padding: 10px !important;
}
.center-menu-item i {
	position: absolute !important;
	top: -40px;
	margin: 2px !important;
	width: 28px !important;
	height: 28px !important;
}
.center-menu-item span {
	top: 16px !important;
	position: relative;
}
.center-menu-item span {
	color: #fff;
}
.footer-bottom-nav li.active i, .footer-bottom-nav li.active span {
	color: #C5FF4A !important;
}

.footer-bottom-nav li.active .icon-home3::before {
	content: "\fa90";
}
.footer-bottom-nav li.active .icon-archive-13::before {
	content: "\f8d3";
}
.footer-bottom-nav li.active .icon-message-text3::before {
	content: "\fb01";
}
/*******End Nav Bottom******/
/***Start Share bottomsheet***********************/
.share-for-users ul {
	display: flex;
	gap: 14px;
	cursor: grabbing;
	width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 5px 0;
	margin: 0 !important;
}
.share-for-users ul::-webkit-scrollbar {
	display: none;
}
.share-for-users ul li figure {
	width: 60px;
	height: 60px;
	border-radius: 50px;
	position: relative;
	margin: 0;
}
.share-for-users figure > img:not(.messenger-icon) {
	width: 100%;
	border-radius: 100px;
	height: 100%;
	object-fit: cover;
}
.share-for-users ul li a {
	position: relative !important;
	display: block;
}
.share-for-users > ul > li > a img.messenger-icon {
	position: absolute;
	bottom: -3px;
	right: -3px;
}
.share-for-users span {
	color: var(--Secondary-Base, #0F172A);
	text-align: center;
	font-family: Switzer;
	font-size: 10px;
	font-style: normal;
	font-weight: 600;
	line-height: 160%;
	letter-spacing: 0.2px;
}
.share-for-messengers {
	margin-bottom: 24px;
}
.share-for-messengers ul li a i {
	display: flex;
	width: 60px;
	height: 60px;
	padding: 0px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 100px;
	background: var(--Primary-50, #EDEADE);
	display: flex;
	width: 60px;
	height: 60px;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	color: #C5FF4A;
	font-size: 24px;
}
.share-for-messengers ul {
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin: 0 !important;
}
.share-for-messengers ul li span {
	color: var(--Secondary-Base, #0F172A);
	text-align: center;
	font-family: Switzer;
	font-size: 10px;
	font-style: normal;
	font-weight: 600;
	line-height: 160%;
	letter-spacing: 0.2px;
}
/***End Share bottomsheet***********************/
.search-items-container {
	width: 100%;
}
.row-item {
	list-style: none;
}
.row-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 14px 0;
}
.row-item > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.row-item > a p {
	overflow: hidden;
	color: #fff;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 170%;
	letter-spacing: 0.3px;
	text-align: left;
	margin: 0;
}
.row-item > a > i {
	border-radius: 100px;
	background: var(--Primary-Base, #C5FF4A);
	display: flex;
	padding: 10px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	color: #100F17 !important;
}
.row-item > a span {
	overflow: hidden;
	color: var(--Greyscale-500, #CBD5E1);
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 170%;
	letter-spacing: 0.2px;
}
.row-item > svg {
	display: flex;
	align-items: center;
}
.row-item > a img {
	border-radius: 50px;
	border: 3px solid var(--Others-White, #FFF);
	background: url(<path-to-image>) lightgray 50% / cover no-repeat;
	width: 50px;
	height: 50px;
	object-fit: cover;
}





.course-week-download-list li {
	width: 100%;
	justify-content: space-between !important;
	gap: 10px !important;
}
.course-week-download-list li svg {
	border: 1px solid var(--Greyscale-200, #E2E8F0);
	padding: 8px;
	border-radius: 100px;
	cursor: pointer;
	width: 15px;
	height: 15px;
	text-align: center;
}
.course-week-download-list li a p {
	color: #fff;
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 170%;
	letter-spacing: 0.2px;
}
.row-item > a > svg path {
	stroke: #fff;
}
.course-week-download-list li i {
	padding: 0!important;
	background: none !important;
	width: 32px !important;
	height: 32px !important;
	font-size: 32px !important;
}
.number {
	color: var(--Greyscale-500, #CBD5E1);
	text-align: center;
	font-family: Switzer;
	font-size: 8px !important;
	font-style: normal;
	font-weight: 700;
	line-height: 170%;
	letter-spacing: 0.2px;
}

.course-bottom-nav.course-bottom-nav-download div span {
	color: #fff;
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 170%;
	letter-spacing: 0.3px;
}
.course-bottom-nav-download div p {
	color: var(--Greyscale-500, #CBD5E1);
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 170%;
	letter-spacing: 0.2px;
	text-align: left;
}
.download-progress-container ,.quiz-progress-container{
	position: absolute;
	top: 0;
	background: #F1F5F9 !important;
	width: 100%;
	height: 4px;
	left: 0;
}
.download-progress-container div, .quiz-progress-container div {
	background: #C5FF4A !important;
	height: 4px;
	left: 0;
}


.video-container {
	border-radius: 0px;
	margin: 24px 0 0 0;
}
.plyr__video-wrapper {
	border-radius: 0px;
}
.plyr__control--overlaid {
	background: #C5FF4A;
}
.plyr__controls {
	/* background: #334155; */
	margin: 12px;
	border-radius: 0px !important;
	padding: 10px !important;
	color: #CBD5E1 !important;
	height: 44px;
	background: var(--Greyscale-800, #23222B) !important;
}
.plyr__menu__container .plyr__control[role="menuitemradio"][aria-checked="true"]::before {
	background:#C5FF4A;
}
.plyr--full-ui input[type="range"]::-moz-range-progress {
	background: #C5FF4A;
}
.plyr--video .plyr__control:focus-visible, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded="true"] {
	background: #fff;
	color: #C5FF4A !important;
}
.plyr--full-ui.plyr--video input[type="range"]::-moz-range-track {
	background-color: #E2E8F0;
}




.MyProfile-topbox,.MyProfile-ul {
	box-sizing: border-box !important;
	width: 100%;
}

.MyProfile-topbox {
	border-radius: 0;
	background: var(--Gradient-Brand, linear-gradient(112deg, #B7A97D 1.56%, #C5FF4A 101.69%));
	box-shadow: 0px 40px 50px -20px rgba(17, 93, 202, 0.20);
	padding: 16px;
	margin: 24px auto;
	background: var(--Gradient-Brand, #8BCC00);
	box-shadow: 0 40px 50px -20px rgba(17, 93, 202, 0.20);
}
.MyProfile-topbox-counter {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}
.MyProfile-topbox-counter > div {
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: space-between;
	gap: 5px;
	border-radius: 0;
	background: var(--Transparant-Black-5, rgba(0, 0, 0, 0.05));
	padding: 10px;
	flex: 1;
}
.MyProfile-topbox-counter > div span {
	color: var(--Others-White, #FFF);
	text-align: center;
	font-family: Switzer;
	font-size: 10px;
	font-style: normal;
	font-weight: 700;
	line-height: 160%;
	letter-spacing: 0.2px;
}
.MyProfile-topbox li p {
	color: var(--Others-White, #FFF);
	font-family: Switzer;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
	letter-spacing: 0.2px;
}
.MyProfile-topbox li span {
	color: var(--Primary-200, #C9BF9D);
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 170%;
	letter-spacing: 0.2px;
}
.MyProfile-topbox-img-badge {
	border: none !important;
	width: 18px !important;
	height: 18px !important;
	background: none !important;
	position: absolute;
	left: 0;
}
.MyProfile-ul .row-item > a > i {
	border: 1px solid #F1F5F9 !important;
	background: #100F17 !important;
	color: #fff !important;
}



.ProfileDetail-top {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
	gap: 0;
	width: 100%;
}
.ProfileDetail-top h3 {
	color: var(--Greyscale-900, #fff);
	text-align: center;
	font-family: Switzer;
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 150%;
	margin: 0;
}
.ProfileDetail-top span {
	color: var(--Greyscale-500, #CBD5E1);
	text-align: center;
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 170%;
}
.ProfileDetail-top figure {
	border-radius: 100px;
	width: 100px;
	height: 100px;
	text-align: center;
	position: relative;
}
.ProfileDetail-top figure img {
	width: 100%;
	border-radius: 100px;
	height: 100%;
	object-fit: cover;
}

.ProfileDetail-ul {
	width: 100%;
	text-align: left;
}
.ProfileDetail-ul li {
	margin: 24px 0;
}
.ProfileDetail-ul li h3 {
	color: var(--Greyscale-900, #fff);
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 170%;
	letter-spacing: 0.3px;
	margin: 0;
}
.ProfileDetail-ul li p {
	color: var(--Greyscale-500, #CBD5E1);
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	text-align: left;
	margin: 5px 0;
}
.prfile-img-edit {
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 100px;
	position: absolute;
	right: 0;
	top: 70px;
	padding: 5px;
	box-shadow: 0px 2px 10px rgba(0,0,0,.2);
	cursor: pointer;
}
.row-item > a > svg {
	border-radius: 100px;
	display: flex;
	padding: 10px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	border: 1px solid #F1F5F9 !important;
	width: 21px;
	height: 21px;
}




.order-history-item {
	border-radius: 20px;
	border: 1px solid var(--Secondary-100, #CBD5E1);
	padding: 24px;
	margin-bottom: 16px;
	width: 100%;
}
.order-history-item img {
	width: 28px;
	height: 28px;
	object-fit: cover;
	border-radius: 100px;
	margin-right: 10px;
}
.order-history-item-mentor {
	display: flex;
	align-items: center;
	margin: 16px 0;
	overflow: hidden;
}
.order-history-item-mentor span,.order-history-item-bottom > div span {
	color: var(--Secondary-Base, #0F172A);
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 170%;
	letter-spacing: 0.2px;
}
.order-history-item-bottom {
	display: flex;
	width: 100%;
	justify-content: space-between;
}
.order-history-item-bottom > div {
	display: flex;
	align-items: center;
	gap: 10px;
}
.order-history-item-bottom i {
	color: #94A3B8;
	font-size: 17px;
}
.order-history-item-bottom > span {
	color: var(--Primary-Base, #C5FF4A);
	text-align: right;
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 170%;
	letter-spacing: 0.3px;
}




.payment-summery-item {
	width: 100%;
}
.payment-summery-item-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.payment-summery-item-row span {
	color: var(--Greyscale-500, #CBD5E1);
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 170%;
	letter-spacing: 0.2px;
}
.payment-summery-item-row b {
	color: var(--Greyscale-900, #0F172A);
	text-align: right;
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 170%;
	letter-spacing: 0.3px;
}









.ik-toggle-container {
	width: 100%;
	height: 30px;
	background: none !important;
	border-radius: 50px;
	display: flex;
	align-items: center;
	padding: 5px;
	position: relative;
	cursor: pointer;
	flex-flow: column;
	gap: 24px;
	height: 100%;
}
.ik-toggle-label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	color: var(--Greyscale-900, #0F172A);
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 160%;
	letter-spacing: 0.3px;
}
.ik-toggle-switch {
	position: relative;
	width: 44px;
	height: 28px;
}

.ik-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ik-toggle-slider {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #8BCC00;
	border-radius: 50px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 2px;
	transition: 0.3s;
}

.ik-toggle-slider i {
	background-color: none;
	border-radius: 50%;
	font-size: 24px;
	color: #fff;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ik-toggle-switch input:not(:checked) + .ik-toggle-slider {
	justify-content: flex-start;
	background-color: #334155;
}

.ik-toggle-switch input:not(:checked) + .ik-toggle-slider i {
	color: #fff;
}



.faq-acc {
	width: 100%;
}
.faq-acc details {
	border: none !important;
	padding: 16px 0 !important;
	width: 100%;
	text-align: left;
}

.faq-acc details summary {
	color: var(--Greyscale-900, #fff);
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 160%;
	letter-spacing: 0.3px;
}
.faq-acc details p {
	color: var(--Greyscale-500, #CBD5E1);
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 170%;
	letter-spacing: 0.2px;
}
.faq-acc details i {
	color: #CBD5E1 !important;
}




.Followed-Mentors {
	width: 100%;
}
.ik-Remove-btn {
	display: flex;
	padding: 4px 16px;
	justify-content: center;
	align-items: center;
	gap: 6px;
	border-radius: 100px;
	background: var(--Greyscale-200, #E2E8F0) !important;
	backdrop-filter: blur(15px);
	color: var(--Greyscale-900, #0F172A);
	text-align: center;
	font-family: Switzer;
	font-size: 10px;
	font-style: normal;
	font-weight: 600;
	line-height: 160%;
	letter-spacing: 0.2px;
	box-shadow: none !important;
	border: none;
	cursor: pointer;
}



.QUESTION {
	display: flex;
	flex-flow: column;
	text-align: left;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0;
	margin: 24px 0;
}
.QUESTION span {
	color: var(--Greyscale-500, #CBD5E1);
	font-family: Switzer;
	font-size: 10px;
	font-style: normal;
	font-weight: 700;
	line-height: 160%;
	letter-spacing: 0.2px;
}
.QUESTION p {
	color: #fff;
	font-family: Switzer;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 165%;
	letter-spacing: 0.4px;
	text-align: left;
}
.quiz-bottom-nav span {
	color: #fff;
	text-align: center;
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 170%;
	letter-spacing: 0.3px;
}
.quiz-bottom-nav i {
	color: #fff;
	font-size: 24px;
	cursor: pointer;
}






.star-rating {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
  }

  .star-button {
	background: none;
	border: none;
	cursor: pointer;
	width: 24px;
	height: 24px;
	padding: 0;
  }
  .review-input {
	width: 100%;
	padding: 12px 16px;
	margin-bottom: 20px;
	font-size: 14px;
	border: 1px solid var(--Secondary-100, #64748B);
	border-radius: 0;
	outline: none;
}
  .star-button svg path {
	stroke: #64748B;
}
/*new-version*/
.course-about-sec > p.total-reivews {
	color: var(--Greyscale-900, #0F172A);
	font-family: Switzer;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
	letter-spacing: 0.2px;
	display: flex;
	align-items: center;
	gap: 5px;
}
.review {
	position: relative;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
	/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); */
	display: flex;
	flex-flow: column;
	align-items: flex-start !important;
	gap: 8px !important;
}
.review-name {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 5px;
}
.review-date {
	font-size: 14px;
	color: #666;
	margin-bottom: 5px;
	color: var(--Greyscale-500, #CBD5E1);
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 170%;
	letter-spacing: 0.2px;
}
.review-rating {
	position: absolute;
	top: 24px;
	right: 0;
	display: flex;
}
.star {
	width: 24px;
	height: 24px;
	margin-right: 1px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.5L12.0279 7.20889L17.1329 7.68237L13.2811 11.0661L14.4084 16.0676L10 13.45L5.59161 16.0676L6.71886 11.0661L2.86708 7.68237L7.97214 7.20889L10 2.5Z' fill='%23F9AA00'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}
.star.empty {
	opacity: 0.3;
	filter: grayscale(1);
}
.star.half {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3ClinearGradient id='halfStar' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='50%25' stop-color='%23F9AA00'/%3E%3Cstop offset='50%25' stop-color='%23F9AA00' stop-opacity='0.3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M10 2.5L12.0279 7.20889L17.1329 7.68237L13.2811 11.0661L14.4084 16.0676L10 13.45L5.59161 16.0676L6.71886 11.0661L2.86708 7.68237L7.97214 7.20889L10 2.5Z' fill='url(%23halfStar)'/%3E%3C/svg%3E");
}
.review-content {
	font-size: 16px;
	line-height: 1.5;
	color: #333;
	color: var(--Secondary-Base, #0F172A);
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 170%;
	letter-spacing: 0.2px;
}

.review-divider {
	border: none;
	height: 1px;
	background-color: #e0e0e0;
	margin: 15px 0;
}
.filter-tabs {
	display: flex;
	gap: 10px;
	flex-wrap: nowrap;
	overflow-x: scroll;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #f1f1f1 transparent;
	padding: 0 0 16px 0;
}
.filter-tabs::-webkit-scrollbar {
    height: 6px;
}
.filter-tabs::-webkit-scrollbar-track {
    background: transparent;
}
.filter-tabs::-webkit-scrollbar-thumb {
    background-color: #bbb;
    border-radius: 3px;
}
.filter-tab {
	padding: 10px 16px;
	background: white;
	border-radius: 20px;
	cursor: pointer;
	font-size: 12px;
	/* box-shadow: 0 1px 3px rgba(0,0,0,0.1); */
	transition: all 0.2s;
	border-radius: 100px;
	border: 1px solid var(--Greyscale-100, #F1F5F9);
	background: var(--Others-White, #FFF);
	color: #000;
	color: var(--Secondary-Base, #0F172A);
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 170%; /* 20.4px */
	letter-spacing: 0.2px;
}
.filter-tab:hover, .filter-tab.active {
	background: #C5FF4A;
	color: white;
	border: none;
}


.note-items li {
	padding: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
	border-bottom: 8px solid #23222B;
}
.note-items li i {
	font-family: iseed !important;
	color: #CBD5E1;
	font-size: 20px;
}


.Certificate-item > p {
	color: var(--Greyscale-500, #CBD5E1);
	font-family: Switzer;
	font-size: 10px;
	font-style: normal;
	font-weight: 700;
	line-height: 160%;
	letter-spacing: 0.2px;
}
.Certificate-item > h3 {
	color: #fff;
	font-family: Switzer;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}
.Certificate-item > p > b {
	color: var(--Greyscale-900, #fff);
	font-family: Switzer;
	font-size: 10px;
	font-style: normal;
	font-weight: 600;
	line-height: 160%;
	letter-spacing: 0.2px;
	margin-left: 2px;
}
.Certificate-container {
	border: 1px solid var(--Greyscale-200, #E2E8F0);
	padding: 24px;
}
.Certificate-item {
	text-align: left;
	position: relative;
}
.Certificate-logo {
	position: absolute;
	top: -32px;
	right: -10px;
	max-width: 60px;
}
.Certificate-details h4 {
	color: var(--Secondary-Base, #fff);
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 170%;
	letter-spacing: 0.3px;
	text-align: left;
}
.Certificate-details {
	position: relative;
}
.sign-logo {
	width: 90px;
	position: absolute;
	right: -20px;
	top: 0;
}
.Certificate-details > div > span {
	color: var(--Greyscale-500, #CBD5E1);
	font-family: Switzer;
	font-size: 10px;
	font-style: normal;
	font-weight: 600;
	line-height: 160%;
	letter-spacing: 0.2px;
}
.Certificate-details > div span > b {
	color: var(--Greyscale-900, #fff);
	font-family: Switzer;
	font-size: 10px;
	font-style: normal;
	font-weight: 600;
	line-height: 160%;
	letter-spacing: 0.2px;
}
.Certificate-details > div {
	display: flex;
	flex-flow: column;
	align-items: self-start;
	gap: 4px;
}
.Certificate-details > p {
	color: var(--Greyscale-400, #94A3B8);
	font-family: Switzer;
	font-size: 8px;
	font-style: normal;
	font-weight: 600;
	line-height: 160%;
	text-align: left;
	margin: 20px 0 0 0;
}



.attachment-section {
	display: flex;
	align-items: center;
	gap: 15px;
	flex-wrap: wrap;
  }

  .attachment-label {
	margin-bottom: 16px;
	display: block;
}
  .attachment-preview {
	position: relative;
	width: 100px;
	height: 100px;
	border-radius: 12px;
	overflow: visible;
  }

  .attachment-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
  }
  .remove-btn i {
	position: absolute;
	top: -8px;
	right: -8px;
	background-color: none !important;
	color: #f44336;
	/* width: 22px; */
	/* height: 22px; */
	font-size: 22px;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
  .add-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100px;
	height: 100px;
	border-radius: 12px;
	border: 2px dashed #C5FF4A;
	color: #C5FF4A;
	font-size: 24px;
	cursor: pointer;
	transition: 0.3s;
  }
  .remove-btn {
	position: absolute;
	background: #fff !important;
	width: 0;
	border-radius: 0;
	height: 0;
	all: unset;
}
.remove-btn::before {
	content: '';
	width: 15px;
	height: 15px;
	background: #fff;
	border-radius: 50px;
	position: absolute;
	top: -5px;
	right: -5px;
}
  .add-btn:hover {
	background-color: #f8f8f8;
  }

  input.report-file-input[type="file"] {
	display: none;
  }
/********DARK MODE STYLE************/
body.dark {
	color: #fff !important;
	background: #0F172A !important;
}
body.dark :is(h1, h2, h3, h4, h5, h6,label ){
	color: #fff !important;
}
body.dark P {
	color: #CBD5E1 !important;
}
body.dark .cashclick-dot {
	background-color: #1E293B !important;
}
body.dark .splash-page img {
	filter: contrast(0%);
}
body.dark ::placeholder {
	color: #CBD5E1;
}
body.dark input:not([type="submit"], [type="checkbox"], [type="radio"]), body.dark textarea, body.dark select {
	border: 1px solid var(--Secondary-100, #CBD5E1);
	color: #fff;
}
body.dark .back-btn {
	border: 1px solid var(--Greyscale-200, #334155);
}
body.dark .back-btn svg path {
	stroke: #fff !important;
}
body.dark  .ik-artlab-btn-deactive {
	background: #1E293B !important;
	color: #475569 !important;
}
body.dark .ikbottomsheet-content {
	background-color: #1E293B !important;
}
body.dark .ikbottomsheet-content p {
	color: #94A3B8 !important;
}
body.dark .Login-Sec svg path {
	fill: #fff !important;
}
body.dark  .category-items-container ul li {
	border: 1px solid #334155 !important;
}
body.dark .download-detailes span,body.dark .course-rating-sec span ,body.dark  .category-items-container ul li span{
	color: #fff !important;
}
body.dark  .footer-bottom-nav {
	background: #1E293B !important;
}
body.dark  .footer-bottom-nav li.active i,body.dark  .footer-bottom-nav li.active span {
	color: #fff !important;
}
body.dark  .row-item > a > svg {
	border: none !important;
}
body.dark .toggle-container {
	background: #1E293B;
}
body.dark .toggle-btn {
	background: #334155;
}
body.dark  .toggle-btn img {
	filter: contrast(0%) !important;
}
body.dark  .toggle-container img {
	filter: contrast(0%) !important;
}
body.dark  .filter-sort {
	background: #1E293B;
}
body.dark .radio-label {
	background: none !important;
	border: 1px solid var(--Greyscale-500, #CBD5E1);
}
body.dark .radio-label span {
	color: #fff !important;
}
body.dark .closeIkbottomsheet {
	background: #1E293B;
}
body.dark .closeIkbottomsheet svg path {
	stroke: #fff !important;
}
body.dark .DetailofMentor-top-counters > div b {
	color: #fff !important;
}
body.dark .iktab-links {
	background: #1E293B !important;
}
body.dark  .iktab-links button.active {
	color: #0F172A !important;
	border-radius: 100px !important;
	background: var(--Others-White, #FFF) !important;
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10) !important;
}
body.dark .iktab-links button {
	color: #fff;
}
body.dark  .course-about-sec ul li p {
	color: #CBD5E1;
}
body.dark  .course-about-sec ul li i {
	color: #94A3B8;
}
body.dark details > summary {
	color: #fff;
}
body.dark details {
	border-top: 2px solid #334155;
}
body.dark .course-bottom-nav, body.dark  .quiz-bottom-nav {
	background: #1E293B;
}
body.dark .course-bottom-nav span, body.dark  .quiz-bottom-nav span {
	color: #fff;
}
body.dark .plyr__controls {
	background: #1E293B !important;
}
body.dark .Enroll-Successful-box > div span {
	color: #CBD5E1;
}
body.dark .course-week-title > svg {
	visibility: hidden;
}
body.dark  hr {
	background: #1E293B !important;
}
body.dark  .order-history-item span {
	color: #fff !important;
}
body.dark .payment-summery-item span,body.dark .payment-summery-item p, body.dark .payment-summery-item b {
	color: #fff !important;
}
body.dark .quiz-bottom-nav i {
	color: #fff !important;
}
body.dark .star-button svg path {
	stroke: #CBD5E1 !important;
}






@media (max-width: 448px) {
  .menu div {
    margin: 5px 0; 
  }
}


@media not all and (max-width: 1023px) {
    .back-button {
        flex: 0 0 45%;
    }
    .map-slider-content-bottom a img {
        max-width: 250px;
    }
    .Onboarding-slider figure img, .map-slider figure img {
        height: 250px;
    }
}
  
@media (min-width: 600px) {
	.course-grid li ,.mentor-card {
	  flex: 0 0 31%;
	}
  }
  
  @media (min-width: 900px) {
	.course-grid li ,.mentor-card{
	  flex: 0 0 23%;
	}
  }
  
  @media (min-width: 1200px) {
	.course-grid li,.mentor-card {
	  flex: 0 0 18%;
	}
  }