/* @font-face {
  font-family: "Poppins", sans-serif;
  src: url("../../assets/fonts/Poppins-Thin.ttf");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Poppins", sans-serif;
  src: url("../../assets/fonts/Poppins-ExtraLight.ttf");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Poppins", sans-serif;
  src: url("../../assets/fonts/Poppins-Light.ttf");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Poppins", sans-serif;
  src: url("../../assets/fonts/Poppins-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Poppins", sans-serif;
  src: url("../../assets/fonts/Poppins-Medium.ttf");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Poppins", sans-serif;
  src: url("../../assets/fonts/Poppins-SemiBold.ttf");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Poppins", sans-serif;
  src: url("../../assets/fonts/Poppins-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Poppins", sans-serif;
  src: url("../../assets/fonts/Poppins-ExtraBold.ttf");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Poppins", sans-serif;
  src: url("../../assets/fonts/Poppins-Black.ttf");
  font-weight: 900;
  font-style: normal;
} */
@import url("https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
    --main-color-text: #1d1d1d;
    --main-color-theme: #2395e8;
    --secondary-color-text: #1e1e1e;
    --secondary-sub-color-text: #1e1e1eb3;
    --input-background: #e3e9e940;
    --radio: 0.8;
}
body {
    font-family: "Poppins", sans-serif;
    padding: 0px;
    margin: 0px;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

.row {
    margin: 0px;
}
a {
    text-decoration: none;
}
/* Start auth Design */
.main-con-auth-con-image-page {
    display: flex;
    justify-content: center;
    height: 100vh;
    background-color: var(--main-color-theme);
    padding: 30px;
    position: sticky;
    top: 0px;
}
.main-con-auth-teacher-images-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    height: 70vh;
}
.con-one-column-teacher-images {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0px 19px;
    height: 100%;
}
.con-first-image-auth {
    width: 105px;
    border-radius: 100px;
    background-size: cover !important;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}
.con-first-image-auth img {
    width: 100%;
    position: absolute;
    bottom: 0px;
    max-height: calc(100% - 30px);
}
.con-second-image-auth {
    width: 105px;
    border-radius: 100px;
    background-size: cover !important;
    margin-bottom: 27px;
    position: relative;
    overflow: hidden;
}
.con-second-image-auth img {
    width: 100%;
    position: absolute;
    bottom: 0px;
    max-height: calc(100% - 30px);
}
.main-con-auth-slide-text {
    display: flex;
    justify-content: center;
}
.main-con-auth-slide-text p {
    font-size: 18px;
    font-weight: 600;
    line-height: 30px;
    color: white;
    max-width: 80%;
    text-align: center;
    margin-bottom: 20px;
}
.auth-teacher-images-owl .owl-dots span {
    width: 20px !important;
    height: 9px !important;
    background-color: white !important;
    opacity: 0.5;
}
.auth-teacher-images-owl .owl-dots button.active span {
    width: 40px !important;
    height: 9px !important;
    background-color: white !important;
    opacity: 1;
}
.main-con-auth-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 505px;
    margin-bottom: 100px;
}
.main-con-auth-header img {
  /*height: 35px;*/
  /*height: 70px;*/
    width: 40%;
}
.main-con-auth-header button {
    display: flex;
    align-items: center;
    position: relative;
    border: none;
    outline: none;
    background-color: #2395e81a;
    border-radius: 18px;
    padding: 0px;
    min-height: 35px;
    justify-content: space-between;
    /* height: 55px; */
}
.main-con-auth-header button p {
    margin-bottom: 0px;
    padding: 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--main-color-text);
    font-family: "Alexandria", sans-serif;
    /* position: absolute; */
    /* right: 0px; */
    transition: 0.3s ease-in-out;
    /* top: 50%;
  transform: translate(0%, -50%); */
}
.main-con-auth-header button span {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--main-color-theme);
    border-radius: 18px;
    color: white;
    font-size: 16px;
    font-weight: 700;
    /* position: absolute;
  left: 0px;
  top: 0px; */
    transition: 0.3s ease-in-out;
    position: relative;
    z-index: 22;
}
.main-con-auth-header button.ar span {
    transform: translate(-95px, 0px);
}
.main-con-auth-header button.ar p {
    transform: translate(45px, 0px);
}
.main-con-auth-side-content {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 50px;
}
.main-con-auth-form {
    width: 100%;
    max-width: 505px;
}
.main-con-auth-form > p {
    font-size: 20px;
    color: var(--main-color-text);
    font-weight: 600;
    text-align: center;
    margin-bottom: 50px;
}
.main-con-form-input label.tilte-input {
    font-size: 14px;
    color: var(--main-color-text);
    font-weight: 400;
    display: block;
    margin-bottom: 5px;
}
.main-con-form-input {
    margin-bottom: 15px;
    position: relative;
}
.main-con-form-input i {
    position: absolute;
    font-size: 20px;
    color: var(--main-color-theme);
    top: 47px;
    right: 20px;
}
.main-con-form-input i.fa-eye-slash {
    display: none;
}
.main-con-form-input input {
    width: 100%;
    padding: 20px 25px;
    font-size: 16px;
    font-weight: 600;
    color: var(--main-color-text);
    border-radius: 18px;
    border: 2.5px solid #ebeaea;
    outline: none;
    background-color: #edf8f580;
    transition: 0.3s ease-in-out;
}
.main-con-form-input select {
    width: 100%;
    padding: 20px 25px;
    font-size: 14px;
    font-weight: 600;
    color: var(--main-color-text);
    border-radius: 18px;
    border: 2.5px solid #ebeaea;
    outline: none;
    background-color: #edf8f580;
    transition: 0.3s ease-in-out;
}
.main-con-form-input input:focus {
    border: 2.5px solid var(--main-color-theme);
}
.con-forget-password-link {
    display: flex;
    justify-content: flex-end;
    font-size: 15px;
    color: var(--main-color-theme);
    font-weight: 600;
    margin-bottom: 20px;
}
.main-con-auth-form form > button {
    width: 100%;
    background-color: var(--main-color-theme);
    color: white;
    font-size: 16px;
    font-weight: 700;
    padding: 20px;
    border-radius: 18px;
    border: none;
    outline: none;
    margin-bottom: 30px;
}
.con-dont-have-account {
    display: flex;
    align-items: center;
    justify-content: center;
}
.con-dont-have-account p {
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: 500;
    color: var(--main-color-text);
    margin: 0px 10px;
}
.con-dont-have-account a {
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: 700;
    color: var(--main-color-theme);
}
.con-form-two-inputs {
    display: flex;
    justify-content: space-between;
}
.con-form-two-inputs .main-con-form-input {
    width: 49%;
}
.con-form-two-inputs .main-con-form-input:nth-child(1) {
    /*margin-right: 13px;*/
}
.con-form-three-inputs {
    display: flex;
    justify-content: space-between;
}
.con-form-three-inputs .main-con-form-input {
    width: 31%;
}
.main-con-form-input.no-label select {
    margin-top: 25px;
}
.con-form-three-inputs .main-con-form-input:nth-child(1) {
    /*margin-right: 13px;*/
}
.con-form-three-inputs .main-con-form-input:nth-child(2) {
    /*margin-right: 13px;*/
}
.main-con-add-national-id-image > span {
    font-size: 14px;
    color: var(--main-color-text);
    font-weight: 400;
    display: block;
    margin-bottom: 5px;
}
.main-con-add-national-id-image {
    margin-bottom: 15px;
}
.main-con-add-national-id-image label {
    width: 100%;
    padding: 20px 25px;
    font-size: 16px;
    font-weight: 600;
    color: var(--main-color-text);
    border-radius: 18px;
    border: 2.5px solid transparent;
    outline: none;
    background-color: #edf8f580;
    transition: 0.3s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    /* border: 3px dashed #c9c9c9; */
}
.main-con-add-national-id-image label > i {
    font-size: 30px;
    color: var(--main-color-text);
    opacity: 0.6;
}
.con-national-id-preview-img {
    position: relative;
    max-width: 90%;
    display: none;
}
.con-national-id-preview-img img {
    height: 100px;
    max-width: 100%;
    background-color: white;
    border-radius: 18px;
}
.con-national-id-preview-img i {
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 20px;
    color: #ed6a5e;
    background-color: white;
    border-radius: 50%;
}
.main-con-teacher-to-subscripe > p {
    margin-top: 30px;
    font-size: 20px;
    color: var(--main-color-text);
    font-weight: 600;
    display: block;
    margin-bottom: 15px;
}
.con-one-card-auth-teacher-card {
    display: flex;
    align-items: center;
    background-color: #edf8f580;
    border-radius: 18px;
    padding: 10px;
    border: 2px solid transparent;
    margin-bottom: 15px;
}
.con-one-card-auth-teacher-card img {
    width: 45px;
    height: 45px;
    border-radius: 15px;
    background-color: white;
}
.con-one-card-auth-teacher-card > div {
    flex-grow: 1;
    margin: 0px 15px;
}
.con-one-card-auth-teacher-card > span {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background-color: white;
    border-radius: 50px;
    border: 2px solid transparent;
}
.con-one-card-auth-teacher-card > span span {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: transparent;
}
.con-one-card-auth-teacher-card-input:checked
    + .con-one-card-auth-teacher-card
    > span
    span {
    background-color: var(--main-color-theme);
}
.con-one-card-auth-teacher-card-input:checked
    + .con-one-card-auth-teacher-card
    > span {
    border: 2px solid var(--main-color-theme);
}
.con-one-card-auth-teacher-card-input:checked
    + .con-one-card-auth-teacher-card {
    border: 2px solid var(--main-color-theme);
}
.con-one-card-auth-teacher-card p {
    font-size: 14px;
    font-weight: 600;
    color: var(--main-color-text);
    margin-bottom: 0px;
}
.con-one-card-auth-teacher-card span {
    font-size: 14px;
    font-weight: 500;
    color: var(--main-color-text);
    margin-bottom: 0px;
    opacity: 0.6;
}
.main-con-auth-form .otp-msg {
    font-weight: 500;
}
.main-con-auth-form .otp-msg span {
    font-weight: 700;
}
.main-con-otp-inputs {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  width: 100%;
  justify-content: center;
}
.main-con-otp-inputs input {
  flex-grow: 1;
  width: 10%;
  height: 75px;
  border-radius: 15px;
  font-size: 15px;
  font-weight: 600;
  color: var(--main-color-text);
  border: 2.5px solid transparent;
  outline: none;
  background-color: #e3e9e940;
  margin: 0px 5px;
  text-align: center;
}
.main-con-otp-inputs input:focus {
    border: 2.5px solid var(--main-color-theme);
}
.main-con-resend-code {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0px;
}
.main-con-resend-code p {
    margin-bottom: 0px;
    font-size: 16px;
    font-weight: 500;
    color: var(--main-color-text);
    margin: 0px 10px;
}
.main-con-resend-code button {
    margin-bottom: 0px;
    font-size: 16px;
    font-weight: 700;
    color: var(--main-color-theme);
    background-color: transparent;
    border: none;
    outline: none;
}
.email-send-successfully {
    font-size: 20px;
    font-weight: 500;
    color: var(--main-color-text);
    line-height: 30px;
    max-width: 400px;
    text-align: center;
    margin: 0px auto 50px;
}
.go-to-home-page:hover {
    color: white;
}
.go-to-home-page {
    width: 100%;
    background-color: var(--main-color-theme);
    color: white;
    font-size: 16px;
    font-weight: 700;
    padding: 20px;
    border-radius: 18px;
    border: none;
    outline: none;
    margin-bottom: 30px;
    display: block;
    text-align: center;
}
/* End auth Design */
/* Start Payment Page */
.main-con-logo-web img {
    height: 45px;
}
.main-con-header-links {
    display: flex;
    align-items: center;
    height: 100%;
}
.main-con-header-links a {
    font-size: 16px;
    color: var(--main-color-text);
    font-weight: 500;
    margin: 0px 25px;
}
.main-con-actions-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.header-button-cart {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background-color: #edf8f580;
    border: none;
    outline: none;
    margin: 0px 25px;
    position: relative;
    padding: 0px;
}
.header-button-cart span {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--main-color-theme);
    color: white;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-button-cart img {
    width: 22px;
}
.login-header-web {
    padding: 18px;
    width: 150px;
    border-radius: 14px;
    font-size: 16px;
    color: white;
    font-weight: 700;
    background-color: var(--main-color-theme);
    border: none;
    outline: none;
}
.main-con-header-website {
    padding: 30px 80px;
}
.main-con-payment-tabs {
    list-style: none;
    padding: 0px;
    margin: 0px;
}
.main-con-payment-page {
    padding: 0px 80px;
}
.main-con-payment-page li {
    padding: 25px 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #edf8f540;
    border-radius: 18px;
    margin-bottom: 20px;
    border: 3px solid transparent;
    max-width: 610px;
}
.main-con-payment-page li img {
    height: 30px;
}
.main-con-payment-page li > span {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: relative;
    border: 2px solid #1d1d1d40;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-con-payment-page li span span {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: transparent;
}
.main-con-payment-page li.active > span {
    border: 2px solid var(--main-color-theme);
}
.main-con-payment-page li.active > span span {
    background-color: var(--main-color-theme);
}
.main-con-payment-page li.active {
    border: 3px solid var(--main-color-theme);
}
.main-con-payment-success-message {
    padding: 26px 40px;
    font-size: 14px;
    font-weight: 600;
    background-color: #5eb83c33;
    border-radius: 28px;
    margin-bottom: 59px;
    margin-top: 25px;
}
.main-con-payment-success-message p {
    font-size: 20px;
    font-weight: 600;
    color: var(--main-color-text);
    margin-bottom: 10px;
}
.visa-content form button {
    width: 100%;
    background-color: var(--main-color-theme);
    color: white;
    font-size: 16px;
    font-weight: 700;
    padding: 20px;
    border-radius: 18px;
    border: none;
    outline: none;
    margin-bottom: 30px;
}
.coupon-content form button {
    width: 100%;
    background-color: var(--main-color-theme);
    color: white;
    font-size: 16px;
    font-weight: 700;
    padding: 20px;
    border-radius: 18px;
    border: none;
    outline: none;
}
.main-con-fawry-box {
    display: flex;
    align-items: center;
    padding: 50px;
    border-radius: 18px;
    background-color: #edf8f580;
    flex-direction: column;
    width: 80%;
}
.main-con-fawry-box > p {
    font-size: 18px;
    font-weight: 600;
    color: var(--main-color-text);
    line-height: 30px;
    margin-bottom: 25px;
    text-align: center;
    max-width: 350px;
}
.main-con-fawry-box button {
    width: 100%;
    background-color: #2395e840;
    border-radius: 18px;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    color: var(--main-color-theme);
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 25px;
}
.main-con-fawry-box > span {
    font-size: 18px;
    color: var(--main-color-text);
    font-weight: 600;
}
.main-con-fawry-box button img {
    margin: 0px 10px;
}
.main-con-payment-success-message span {
    font-size: 20px;
    font-weight: 700;
    color: #5eb83c;
    margin-bottom: 0px;
}
.con-p-title-tabs-payment {
    font-size: 18px;
    font-weight: 500;
    color: var(--main-color-text);
    margin-bottom: 20px;
}
.main-con-my-account-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: center;
}
.main-con-my-account-info img.user-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-bottom: 10px;
}
.main-con-my-account-info p {
    font-size: 16px;
    font-weight: 700;
    color: var(--main-color-text);
    margin-bottom: 20px;
}
.main-con-my-account-info img.barcode {
    height: 45px;
    margin-bottom: 5px;
}
.main-con-my-account-info span {
    font-size: 13px;
    color: var(--main-color-text);
    font-weight: 600;
}
.mian-con-my-account-form {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mian-con-my-account-form form {
    width: 80%;
}
.mian-con-my-account-form form a {
    width: 100%;
    background-color: var(--main-color-theme);
    color: white !important;
    font-size: 16px;
    font-weight: 700;
    padding: 20px;
    border-radius: 18px;
    border: none;
    outline: none;
    display: block;
    text-align: center;
}
.mian-con-my-account-form form button {
    width: 100%;
    background-color: var(--main-color-theme);
    color: white !important;
    font-size: 16px;
    font-weight: 700;
    padding: 20px;
    border-radius: 18px;
    border: none;
    outline: none;
    display: block;
    text-align: center;
}
.visa-content form {
    width: 80%;
}
.coupon-content form {
    width: 80%;
}
.main-con-edit-profile-img {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.main-con-edit-profile-img > label {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
}
.main-con-edit-profile-img > label img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-bottom: 10px;
}
.main-con-edit-profile-img > label span {
    font-size: 16px;
    color: var(--main-color-theme);
    font-weight: 700;
}
.main-con-avatars {
    display: flex;
    align-items: center;
}
.main-con-avatars img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
}
.main-con-avatars label {
    border: 3px solid transparent;
    border-radius: 50%;
    margin: 0px 10px;
}

.main-con-avatars input:checked + label {
    border: 3px solid var(--main-color-theme);
}
.con-select-new-profile-img p {
    font-size: 14px;
    color: var(--main-color-text);
    font-weight: 400;
    margin-bottom: 10px;
    margin: 0px 10px 10px;
}
.con-table-header {
    display: flex;
    align-items: center;
    background-color: #1d1d1d;
    border-radius: 28px;
    padding: 25px 55px;
}
.con-table-header > div {
    flex-grow: 1;
    width: 10%;
}
.con-table-header p {
    color: white;
    margin-bottom: 0px;
    font-size: 16px;
    font-weight: 700;
}
.con-table-header > div:nth-child(1) {
    min-width: 500px;
    max-width: 500px;
}
.main-con-table-ui-design > span.date {
    font-size: 16px;
    color: var(--main-color-text);
    font-weight: 500;
    display: block;
    margin: 25px 55px 15px;
}
.main-con-table-body {
    background-color: #edf8f580;
    border-radius: 28px;
    display: flex;
    align-items: center;
    flex-grow: 1;
    padding: 20px 55px;
    margin-bottom: 15px;
}
.main-con-table-body > div {
    flex-grow: 1;
    width: 10%;
}
.main-con-table-body > div:nth-child(1) {
    min-width: 500px;
    max-width: 500px;
}
.con-card-lecture-table {
    display: flex;
    align-items: center;
}
.con-card-lecture-table > p {
    margin: 0px 20px;
    font-size: 16px;
    color: var(--main-color-text);
    font-weight: 600;
    line-height: 27px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box !important;
}
.con-card-lecture-table img {
    height: 80px;
    border-radius: 18px;
    width: 120px;
}
.main-con-table-body > div > p {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0px;
    color: var(--main-color-text);
}
.main-con-table-body > div > p.price {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0px;
    color: #5eb83c;
}
.main-con-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 900px;
    margin: 30px auto 30px;
}
.main-con-filters select {
    flex-grow: 1;
    margin: 0px 20px;
    border-radius: 18px;
    padding: 20px;
    border: none;
    outline: none;
    background-color: #edf8f580;
    font-size: 16px;
    color: var(--main-color-text);
    font-weight: 600;
}
.main-con-book-card {
    background-color: #edf8f580;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 25px;
}
.con-book-card-image {
    position: relative;
}
.con-book-card-image img {
    width: 100%;
    border-radius: 24px 24px 0px 0px;
    height: 280px;
}
.con-book-card-image span {
    background-color: #5eb83ce6;
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 22;
    padding: 15px;
    border-radius: 20px;
    font-size: 18px;
    font-weight: 700;
    color: white;
}
.con-footer-card-books {
    padding: 20px 25px;
}
.con-footer-card-books > p {
    font-size: 16px;
    color: var(--main-color-text);
    font-weight: 600;
    line-height: 30px;
    margin-bottom: 25px;
}

.book-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.book-card-teacher-box {
    flex-grow: 1;
    display: flex;
    align-items: center;
}
.book-card-teacher-box img {
    width: 45px !important;
    height: 45px;
    border-radius: 50px;
    background-color: var(--main-color-text);
}
.book-card-teacher-box p {
    font-size: 14px;
    font-weight: 600;
    color: var(--main-color-text);
    margin: 0px 10px;
}
.book-card-footer button {
    width: 50px;
    height: 45px;
    border-radius: 14px;
    border: none;
    outline: none;
    background-color: var(--main-color-theme);
    display: flex;
    align-items: center;
    justify-content: center;
}
.book-card-footer button img {
    width: 25px;
}
.main-con-cart-qnt {
    display: flex;
    align-items: center;
    background-color: #2395e81a;
    width: fit-content;
}
.main-con-cart-qnt input {
    background-color: transparent;
    border: none;
    outline: none;
    width: 60px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}
.main-con-cart-qnt i {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--main-color-theme);
    color: white;
    font-size: 14px;
}
.main-con-cart-qnt i.fa-plus {
    border-radius: 0px 10px 10px 0px;
}
.main-con-cart-qnt i.fa-minus {
    border-radius: 10px 0px 0px 10px;
}
.main-con-cart-page {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    min-height: 82vh;
}
.main-con-card-summary-action {
    background-color: #edf8f580;
    padding: 25px 15px;
    border-radius: 25px;
    width: 100%;
    max-width: 400px;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.con-cart-summary-one-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}
.con-cart-summary {
    width: 90%;
}
.con-cart-summary-one-info p {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0px;
    color: var(--main-color-text);
}
.con-cart-summary-one-info span {
    font-size: 16px;
    font-weight: 600;
    color: var(--main-color-text);
}
.con-cart-summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}
.con-cart-summary-total p {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0px;
    color: var(--main-color-text);
}
.con-cart-summary-total span {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0px;
    color: #5eb83c;
}
.main-con-card-summary-action > a {
    font-size: 16px;
    color: white !important;
    font-weight: 700;
    text-align: center;
    background-color: var(--main-color-theme);
    padding: 20px;
    border-radius: 18px;
    width: 100%;
}
.main-con-add-new-address-page {
    width: 100%;
    max-width: 700px;
    margin: 20px auto;
}
.main-con-add-new-address-page > p {
    font-size: 25px;
    font-weight: 500;
    margin-bottom: 40px;
    color: var(--main-color-text);
}
.main-con-add-new-address-page form button {
    width: 80%;
    background-color: var(--main-color-theme);
    color: white !important;
    font-size: 16px;
    font-weight: 700;
    padding: 20px;
    border-radius: 18px;
    border: none;
    outline: none;
    display: block;
    text-align: center;
    margin: 40px auto 0px;
    max-width: 505px;
}
.main-con-pop-up-order-done {
    display: flex;
    align-items: center;
    padding: 30px;
}
.main-con-pop-up-order-done p {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 30px;
    color: var(--main-color-text);
    line-height: 32px;
    text-align: center;
}
.main-con-pop-up-order-done > div {
    margin: 0px 50px;
}
.main-con-pop-up-order-done button {
    width: 100%;
    background-color: var(--main-color-theme);
    color: white !important;
    font-size: 16px;
    font-weight: 700;
    padding: 20px;
    border-radius: 18px;
    border: none;
    outline: none;
    display: block;
    text-align: center;
}
.model-oreder-done .modal-content {
    border: none;
    border-radius: 25px;
}
.modal-backdrop {
    background-color: #1d1d1da8 !important;
    backdrop-filter: blur(3px) !important;
    opacity: 1 !important;
}
.main-title-page-center {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 35px;
    margin-top: 30px;
}
.main-title-page-center h1 {
    font-size: 25px;
    font-weight: 500;
    margin-bottom: 0px;
    color: var(--main-color-text);
}
.main-con-teacher-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
    overflow: hidden;
}
.main-con-teacher-card img {
    background-color: #edf8f580;
    padding: 20px 20px 0px;
    border-radius: 18px;
    margin-bottom: 15px;
    overflow: hidden;
}
.main-con-teacher-card p {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--main-color-text);
}
.main-con-teacher-card span {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0px;
    color: #5eb83c;
}

@property --p {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

.pie {
    --p: 20;
    --b: 22px;
    --c: darkred;
    --w: 150px;

    width: var(--w);
    aspect-ratio: 1;
    position: relative;
    display: inline-grid;
    margin: 5px;
    place-content: center;
    font-size: calc(15px * var(--radio));
    font-weight: bold;
    color: var(--Second-Font-Color);
    color: var(--main-color-text);
}
.pie:before,
.pie:after {
    content: "";
    position: absolute;
    border-radius: 50%;
}
.pie:before {
    inset: 0;
    background: radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b)
            var(--b) no-repeat,
        conic-gradient(var(--c) calc(var(--p) * 1%), #e3e9e940 0);
    -webkit-mask: radial-gradient(
        farthest-side,
        #0000 calc(99% - var(--b)),
        #000 calc(100% - var(--b))
    );
    mask: radial-gradient(
        farthest-side,
        #0000 calc(99% - var(--b)),
        #000 calc(100% - var(--b))
    );
}
.pie:after {
    inset: calc(50% - var(--b) / 2);
    background: var(--c);
    transform: rotate(calc(var(--p) * 3.6deg))
        translateY(calc(50% - var(--w) / 2));
}
.animate {
    animation: p 1s 0.5s both;
}
.no-round:before {
    background-size: 0 0, auto;
}
.no-round:after {
    content: none;
}
@keyframes p {
    from {
        --p: 0;
    }
}
.main-con-lecture-card {
    border-radius: 20px;
    overflow: hidden;
    background-color: #f6fbfa;
    margin-bottom: 30px;
}
.con-lecture-card-box-img {
    width: 100%;
    position: relative;
    border-radius: 20px 20px 0px 0px;
    overflow: hidden;
}
.con-lecture-card-box-img img {
    width: 100%;
    height: 280px;
}
.con-lecture-card-box-img span {
    background-color: #5eb83c;
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 22;
    padding: 15px;
    border-radius: 20px;
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin-bottom: 0px;
}
.main-con-footer-lecture-card {
    position: relative;
    padding: 10px 20px 28px;
}
.main-con-footer-lecture-card::after {
    content: "";
    position: absolute;
    top: -15px;
    left: 0px;
    width: 100%;
    height: 15px;
    background-color: #f6fbfa;
    border-radius: 50px 50px 0px 0px;
    z-index: 222;
}
.con-lecture-sub-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.con-lecture-sub-info p {
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: 600;
    color: #5eb83c;
}
.con-lecture-sub-info span {
    font-size: 14px;
    font-weight: 400;
    color: #1d1d1dcc;
}
.con-lecture-sub-info span i {
    font-size: 18px;
    margin: 0px 5px;
}
.main-con-footer-lecture-card > p {
    font-size: 16px;
    font-weight: 700;
    color: var(--main-color-text);
    margin-bottom: 10px;
    line-height: 30px;
}
.main-con-footer-lecture-card > span {
    font-size: 16px;
    font-weight: 400;
    color: #1d1d1dcc;
    margin-bottom: 20px;
    line-height: 25px;
    display: block;
}
.main-con-footer-lec-card {
    display: flex;
    align-items: center;
}
.main-con-footer-lec-card img {
    width: 45px !important;
    height: 45px;
    border-radius: 50%;
    background-color: #1d1d1d;
}
.main-con-footer-lec-card span {
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: 600;
    flex-grow: 1;
    margin: 0px 10px;
}
.con-lecture-card-box-img span.subject {
    background-color: #5eb83c33;
    border-radius: 50px;
    font-size: 14px;
    color: #5eb83c;
    font-weight: 600;
    padding: 10px 15px;
}
.lecture-details-title {
    font-size: 20px;
    color: var(--main-color-text);
    font-weight: 600;
    margin-bottom: 20px;
}
.lectuer-image-lecture-details img {
    width: 100%;
    border-radius: 40px;
    margin-bottom: 30px;
}
.con-curclim-top-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    background-color: #edf8f580;
    border-radius: 18px;
}
.con-curclim-top-content p {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0px;
    color: var(--main-color-text);
}
.con-curclim-top-content i {
    font-size: 20px;
    color: var(--main-color-theme);
}
.con-curclim-one-row {
    display: flex;
    align-items: center;
    background-color: white;
    border: 4px solid #edf8f580;
    padding: 20px 30px;
    border-radius: 18px;
}
.con-curclim-one-row p {
    font-size: 16px;
    font-weight: 500;
    margin: 0px 10px 0px;
    flex-grow: 1;
    color: var(--main-color-text);
}
.con-curclim-one-row span {
    font-size: 16px;
    color: #1d1d1dcc;
    font-weight: 400;
}
.comment-user-info {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.comment-user-info img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.comment-user-info div {
    margin: 0px 10px;
}
.comment-user-info p {
    font-size: 14px;
    color: var(--main-color-text);
    font-weight: 500;
    margin-bottom: 5px;
}
.comment-user-info span {
    font-size: 14px;
    color: #1d1d1dcc;
    font-weight: 400;
    margin-bottom: 0px;
}
.con-comment-content p {
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    color: var(--main-color-text);
    margin-bottom: 10px;
}
.con-comment-content img {
    height: 150px;
    max-width: 80%;
    margin-bottom: 0px;
}
.con-comment-content {
    margin-bottom: 35px;
}
.con-one-comment.reply {
    margin-left: 55px;
    border: none;
    padding: 0px;
}
.con-one-comment.reply:last-child .con-comment-content {
    margin-bottom: 0px;
}
.con-comments-top-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    background-color: #edf8f580;
    border-radius: 18px;
}
.con-comments-top-block p {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0px;
    color: var(--main-color-text);
}
.con-comments-top-block i {
    font-size: 20px;
    color: var(--main-color-theme);
}
.con-one-comment {
    background-color: white;
    border: 4px solid #edf8f580;
    padding: 20px 30px;
    border-radius: 18px;
}
.main-con-comments {
    margin-top: 40px;
}
.main-con-add-comment {
    display: flex;
    align-items: center;
    background-color: #edf8f580;
    border-radius: 18px;
    margin-bottom: 15px;
    padding: 15px 30px;
}
.main-con-add-comment img.user-img-add-comment {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.main-con-add-comment input {
    flex-grow: 1;
    height: 100%;
    background-color: transparent;
    border: none;
    outline: none;
    margin: 0px 10px;
    font-size: 14px;
    color: var(--main-color-text);
    font-weight: 500;
}
.main-con-add-comment label {
    font-size: 25px;
    color: var(--main-color-text);
    opacity: 0.4;
    margin: 0px 10px;
}
.main-con-img-preview img {
    width: 50px;
    height: 50px;
    border-radius: 18px;
}
.main-con-img-preview {
    position: relative;
    margin: 0px 10px;
}
.main-con-img-preview i {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #fb383a;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.main-con-add-comment button {
    border: none;
    outline: none;
    background-color: var(--main-color-theme);
    width: 50px;
    height: 50px;
    border-radius: 18px;
    transform: rotate(-180deg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-con-curclim-content.close .con-curclim-bottom-content {
    display: none;
}
.main-con-curclim-content.close .con-curclim-top-content i {
    transform: rotate(-90deg);
}
.main-con-comments.close .con-comments-top-block i {
    transform: rotate(-90deg);
}
.main-con-comments.close .main-con-bottom-comments {
    display: none;
}
.main-con-other-lectures-header {
    margin-top: 60px;

    margin-bottom: 35px;
}
.main-con-other-lectures-header h2 {
    margin-bottom: 0px;
    font-size: 25px;
    font-weight: 600;
    color: var(--main-color-text);
}
.other-lectures-owl .owl-nav {
    position: absolute;
    right: 0px;
    top: -90px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.other-lectures-owl .owl-nav button {
    width: 55px;
    height: 55px;
    background-color: #edf8f580 !important;
    border-radius: 20px !important;
    color: var(--main-color-theme) !important;
}
.other-lectures-owl .owl-nav button:hover {
    background-color: #e6eff440 !important;
    color: var(--main-color-theme) !important;
}
.price-lecture-details {
    font-size: 20px;
    font-weight: 600;
    color: #5eb83c;
    margin-bottom: 20px;
}
.main-conlecture-details-side-bar {
    position: sticky;
    top: 10px;
}
.lecture-details-info-box-side-bar {
    width: 100%;
    background-color: #edf8f580;
    border-radius: 18px;
    padding: 30px;
}
.con-teacher-info-lec {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.con-teacher-info-lec img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #f4b840;
}
.con-teacher-info-lec > div {
    margin: 0px 15px;
}
.con-teacher-info-lec p {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0px;
    color: var(--main-color-text);
}
.con-teacher-info-lec span {
    display: block;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 5px;
    color: #1d1d1dcc;
}
.description-lec {
    font-size: 14px;
    color: var(--main-color-text);
    font-weight: 400;
    margin-bottom: 25px;
    line-height: 30px;
}
.main-con-lec-details-sub-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}
.main-con-lec-details-sub-info > div {
    display: flex;
    align-items: center;
}
.main-con-lec-details-sub-info div p {
    font-size: 14px;
    font-weight: 400;
    color: #1d1d1dcc;
    margin: 0px 10px 0px;
}
.main-con-lec-details-sub-info > span.seprator {
    width: 3px;
    align-self: stretch;
    background-color: #5eb83c;
    display: block;
}
.lecture-details-info-box-side-bar > button {
    width: 100%;
    border: none;
    outline: none;
    padding: 20px;
    border-radius: 18px;
    background-color: var(--main-color-theme);
    color: white;
    font-size: 16px;
    font-weight: 600;
}
.con-teacher-card-profile-page {
    padding: 40px 80px;
    background-color: #5eb83c26;
    border-radius: 25px;
    margin-bottom: 35px;
}
.con-teacher-name-sub-img {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.con-teacher-name-sub-img img {
    width: 125px;
    height: 125px;
    border-radius: 50%;
    background-color: #1d1d1d;
    margin-bottom: 15px;
}
.con-teacher-name-sub-img p {
    font-size: 18px;
    font-weight: 700;
    color: var(--main-color-text);
    margin-bottom: 5px;
}
.con-teacher-name-sub-img span {
    font-size: 16px;
    font-weight: 500;
    color: #5eb83c;
    margin-bottom: 0px;
}
.con-teacher-socials {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.con-teacher-socials a {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0px 5px;
    background-color: var(--main-color-text);
    color: white;
}
.con-teacher-socials a:nth-child(1) {
    background-color: var(--main-color-theme);
}
.main-con-teacher-about-socail p {
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    color: var(--main-color-text);
    margin-bottom: 0px;
}
.main-con-teacher-about-socail {
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.con-teacher-sub-info .con-icon-teacher-info {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #5eb83c33;
}
.con-teacher-sub-info {
    display: flex;
    align-items: center;
}
.con-teacher-sub-info p {
    font-size: 16px;
    font-weight: 500;
    color: var(--main-color-text);
    margin-bottom: 0px;
}
.con-teacher-sub-info span {
    font-size: 16px;
    font-weight: 700;
    color: var(--main-color-text);
}
.con-teacher-sub-info:nth-child(1) {
    margin-bottom: 30px;
}
.con-teacher-sub-info > div:nth-child(2) {
    margin: 0px 15px;
}
.main-con-teacher-profile-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    width: 100%;
    max-width: 900px;
    background-color: #edf8f580;
    padding: 15px;
    border-radius: 20px;
    margin: 0px auto 30px;
}
.main-con-teacher-profile-tabs li {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    font-size: 16px;
    font-weight: 700;
    color: var(--main-color-theme);
    border-radius: 20px;
}
.main-con-teacher-profile-tabs li.active {
    background-color: var(--main-color-theme);
    color: white;
}
.main-con-teacher-profile-tabs li span {
    margin: 0px 10px;
}
.con-top-header-lec-purchase {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}
.con-top-header-lec-purchase img {
    height: 45px;
}
.main-main-proggress-bar-lec-purchase {
    flex-grow: 1;
}
.main-main-proggress-bar-lec-purchase p {
    text-align: end;
    margin-bottom: 0px;
    font-size: 20px;
    font-weight: 700;
    color: #5eb83c;
}
.main-con-progress-lec-purchase {
    width: 100%;
    height: 18px;
    border-radius: 50px;
    background-color: #5eb83c33;
    position: relative;
    overflow: hidden;
}
.con-top-header-lec-purchase .space {
    display: block;
    width: 50px;
}
.con-bottom-header-lec-purchase {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}
.con-bottom-header-lec-purchase button {
    width: 55px;
    height: 55px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    background-color: var(--main-color-theme);
    color: white;
}
.con-bottom-header-lec-purchase > p {
    font-size: 20px;
    color: var(--main-color-text);
    margin: 0px 25px 0px;
    font-weight: 600;
    flex-grow: 1;
}
.main-con-progress-lec-purchase span {
    display: block;
    width: 10%;
    background-color: #5eb83c;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    border-radius: 50px;
}
.main-con-lecture-purchase-content {
    padding: 40px 40px 10px 100px;
}
.main-con-lecture-purchase-navigation {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 25px;
}
.main-con-lecture-purchase-navigation button {
    background-color: transparent;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 250px;
    border: none;
    outline: none;
    border-radius: 18px;
    padding: 20px;
}
.main-con-lecture-purchase-navigation button.pre {
    background-color: #2395e833;
    color: var(--main-color-theme);
}
.main-con-lecture-purchase-navigation button i {
    font-size: 15px;
    margin: 0px 10px;
}
.main-con-lecture-purchase-navigation button.next {
    background-color: var(--main-color-theme);
    color: white;
}
.main-con-lecture-purchase-content-content {
    min-height: 59vh;
    margin-bottom: 25px;
}
.main-con-lecture-purchase-content-content iframe {
    width: 100%;
    border-radius: 25px;
}
.main-con-lecture-purchase-content-content video {
    width: 100%;
}
.main-con-lecture-purchase-side-bar {
    border-radius: 40px;
    background-color: #edf8f5;
    height: 100vh;
    padding: 70px 40px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-direction: column;
    overflow-y: scroll;
}
.con-lecture-purchase-header-side-bar {
    display: flex;
    align-items: center;
    margin-bottom: 90px;
}
.con-lecture-purchase-header-side-bar img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: #f4b840;
}
.con-lecture-purchase-header-side-bar > div {
    margin: 0px 15px;
}
.con-lecture-purchase-header-side-bar span {
    font-size: 14px;
    color: #1d1d1dcc;
    font-weight: 400;
}
.con-lecture-purchase-header-side-bar p {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0px;
    color: var(--main-color-text);
}
.main-con-lecture-purchase-side-bar > p {
    font-size: 20px;
    color: #1d1d1de6;
    font-weight: 400;
    margin-bottom: 25px;
    width: 100%;
}
.main-con-lecture-purchase-side-bar > p span {
    font-size: 20px;
    color: #1d1d1d;
    font-weight: 700;
}
.con-one-item-side-bar-lec-purchase {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.con-img-icon-lecture-purchase-side-bar {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--main-color-theme);
    border-radius: 14px;
}
.con-one-item-side-bar-lec-purchase.active
    .con-img-icon-lecture-purchase-side-bar {
    background-color: white;
}
.con-one-item-side-bar-lec-purchase p {
    font-size: 14px;
    font-weight: 500;
    color: var(--main-color-text);
    margin-bottom: 0px;
}
.con-one-item-side-bar-lec-purchase.active p {
    color: white;
}
.con-one-item-side-bar-lec-purchase.active span {
    color: white;
}
.con-one-item-side-bar-lec-purchase span {
    font-size: 14px;
    font-weight: 400;
    color: #1d1d1dcc;
    margin-bottom: 0px;
}
.con-one-item-side-bar-lec-purchase {
    background-color: white;
    padding: 15px 17px;
    border-radius: 18px;
    width: 100%;
}
.con-one-item-side-bar-lec-purchase.active {
    background-color: var(--main-color-theme);
}
/* End Payment Page */
.main-con-auth-header-mobile{
    display:none;
}

.user-status-notification{
    text-align: center;
    background-color: #d4edda;
    padding: 20px;
    width: 60%;
    border-radius: 23px;
    margin-top: 50px;
}

.user-status-notification img{
    width: 200px;
    margin-bottom: 25px;
}

.main-con-togle-side-bar-web-header{
    display:none;
}

.main-con-side-bar-mobile-web {
    display: none;
}

#id-for-lang-sub-menu.active>ul{
    z-index:2;
}
/*  */
@media (max-width: 992px) {
    .row-reverse-mobile {
        flex-direction: column-reverse;
    }
    .main-con-auth-page-form {
        position: relative;
    }
    .main-con-header-website {
        padding: 20px 20px 0px;
    }
    .main-con-header-website img{
        height: 35px;
    }
    .main-con-auth-header-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 505px;
        margin-bottom: 30px;
    }
    .main-con-auth-header-mobile div {
        line-height: 20px;
        height: 20px;
        text-align: center;
    }

    .main-con-auth-header-mobile p{
        font-size:14px;
        color:white;
    }
    .main-con-auth-header-mobile img {
        height: 35px;
    }
    .main-con-auth-side-content {
        padding: 10px 20px 20px;
        /* min-height: auto; */
        justify-content: flex-start;
        min-height: 55vh;
    }
    .main-con-auth-con-image-page {
        height: fit-content;
        flex-direction: column;
        padding: 35px 20px;
    }
    .main-con-auth-con-image-page .owl-carousel {
        height: 250px;
        margin-bottom: 26px;
        width: auto;
    }
    .main-con-auth-header {
        margin-bottom: 40px;
        display: none;
    }
    .main-con-auth-form > p {
        margin-bottom: 30px;
    }
    .owl-stage-outer {
        height: 250px;
    }
    .main-con-auth-page-form::after {
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        transform: translate(0px, -85%);
        height: 20px;
        background-color: white;
        border-radius: 20px 20px 0px 0px;
        z-index: 222;
    }
    .main-con-form-input select {
        font-size: 12px;
        padding: 15px 20px;
    }
    .main-con-otp-inputs input{
        height: 60px;
        border-radius: 15px;
        margin: 0px 3px;
    }
    .user-status-notification{
        width: 90%;
    }
    .header-button-cart{
        display:none;
    }
    .main-con-togle-side-bar-web-header{
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--main-color-theme);
        border: none;
        outline: none;
        border-radius: 14px;
        cursor:pointer;
    }
    .main-con-togle-side-bar-web-header img{
        height:20px;
    }
    .main-con-togle-side-bar-web-header-x{
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--main-color-theme);
        border: none;
        outline: none;
        border-radius: 14px;
        cursor:pointer;
    }
    .main-con-side-bar-mobile-web {
        position: fixed;
        top: 0px;
        left: -100%;
        width: 100%;
        background-color: white;
        z-index: 33333;
        height: 100vh;
        padding: 34px 20px;
        transition: 0.3s ease-in-out;
        display: block;
    }
    .main-con-side-bar-mobile-web.show {
       left:0%;
    }
    .side-bar-mobile-web-header{
        display: flex;
        justify-content: space-between;
    }
    .main-con-auth-teacher-images-box{
        height:auto;
    }

    .main-con-side-bar-mobile-web-links a.active {
        background-color: var(--main-color-theme);
    }
    .main-con-side-bar-mobile-web-links a {
        display: flex;
        align-items: center;
        padding: 15px 20px;
        border-radius: 15px;
        margin-bottom: 12px;
    }

    .main-con-side-bar-mobile-web-links a.active p {
        color: white;
    }
    .main-con-side-bar-mobile-web-links p {
        margin-bottom: 0px;
        margin: 0px 20px;
        font-size: 16px;
        color: var(--secondary-color-text);
        font-weight: 600;
        flex-grow: 1;
    }
    .side-bar-mobile-web-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 40px;
    }
    .main-con-side-bar-mobile-web.show{
        overflow:scroll;
    }
}

/*  */
@media (max-width: 768px) {
}

.con-exam {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.con-question {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    width: 660px;
    background: #fbfdfc;
    border-radius: 35px;
    gap: 10px;
    padding: 30px;
    margin-bottom: 25px;
}
.con-question-number {
    width: 160px;
    height: 50px;
    background-color: #dcefd6;
    text-align: center;
    align-content: center;
    border-radius: 18px;
}
.con-question-number p {
    color: #5eb83c;
    margin: 0;
}
.con-question-question p {
    width: 578.79px;
    font-family: Poppins;
    font-size: 20px;
    font-weight: 700;
    line-height: 35px;
    text-align: left;
    gap: 0px;
}
.con-question-answer {
    width: 600px;
    height: 65px;
    top: 501.51px;
    left: 193.79px;
    gap: 0px;
    border-radius: 20px;
    background-color: #f4fbf9;
    display: flex;
    align-items: center;
    padding-left: 25px;
    margin-bottom: 10px;
    padding: 0px 15px;
}
.con-question-answer.active {
    background-color: #dcefd6;
}
.con-question-answer.fail {
    background-color: #fbb8b8;
}
.con-question-answer span {
    width: 40px;
    height: 40px;
    top: 514.01px;
    left: 223.79px;
    gap: 0px;
    border-radius: 22.5px;
    opacity: 0px;
    background: #888c8b;
    text-align: center;
    align-content: center;
    color: #ffffff;
}
.con-question-answer.active span {
    background: #5eb83c;
}
.con-question-answer.fail span {
    background: #fb383a;
}
.con-question-answer p {
    font-family: Poppins;
    font-size: 16px;
    font-weight: 600;
    line-height: 35px;
    text-align: left;
    color: #000;
    margin: 0px 10px 0px 10px;
}
.sidebar-fixed {
    position: fixed;
    right: 0px;
}

.con-file {
    height: 125px;
    top: 261px;
    left: 100.21px;
    gap: 0px;
    border-radius: 35px;
    background-color: #fbfdfc;
    padding: 0px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.con-file-info {
    display: flex;
}

.con-file-info img {
    width: 74.13px;
    height: 74.13px;
    top: 286.44px;
    left: 140.71px;
    gap: 0px;
}

.con-file-name {
    margin: 0px 25px;
    width: 285.13px;
    height: 74.13px;
    top: 286.44px;
    left: 140.71px;
    gap: 0px;
}

.con-file-name-title {
    font-family: Poppins;
    font-size: 20px;
    font-weight: 700;
    line-height: 35px;
    text-align: left;
}

.con-file-download a {
    display: flex;
}

.con-file-download p {
    font-family: Poppins;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-align: left;
    color: #2395e8;
    margin: 0px;
}

.con-exam-result {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: column;
}

.con-exam-result img {
    width: 143px;
    height: 139.63px;
    top: 218.4px;
    left: 420.71px;
    gap: 0px;
    margin-bottom: 25px;
}

.con-exam-result h1 {
    font-family: Poppins;
    font-size: 25px;
    font-weight: 600;
    line-height: 37.5px;
    text-align: center;
    margin-bottom: 50px;
}

.con-exam-result p {
    font-family: Poppins;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
}

.con-exam-result-infos {
    display: flex;
    gap: 25px;
    margin-bottom: 25px;
}

.con-exam-result-info {
    width: 295px;
    height: 100px;
    top: 592.83px;
    left: 187.21px;
    gap: 0px;
    border-radius: 18px;
    background-color: #f6fbfa;
    display: flex;
    justify-content: center;
    align-items: center;
}

.con-exam-result-info span {
    width: 55px;
    height: 55px;
    top: 615.33px;
    left: 207.21px;
    gap: 0px;
    border-radius: 50%;
    background-color: #d8eed4;
    margin-right: 25px;
    align-content: center;
    text-align: center;
    font-size: 25px;
    color: #5eb83c;
}

.con-exam-result-info span.fail {
    background-color: #f7d4d4;
    color: #fb383a;
}

.con-exam-result-info h1 {
    font-family: Poppins;
    font-size: 20px;
    font-weight: 700;
    line-height: 36px;
    text-align: left;
    margin-bottom: 0px;
}

.con-exam-result-info p {
    font-family: Poppins;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
}

.con-timer p {
    font-family: Poppins;
    font-size: 20px;
    font-weight: 400;
    line-height: 36px;
    text-align: right;
    color: #fb383a;
    margin: 0;
}

.con-timer .timer .row-timer {
    display: flex;
    justify-content: center;
}

.con-timer .timer h1,
.con-timer .timer p {
    font-family: Poppins;
    font-size: 25px;
    font-weight: 700;
    line-height: 45px;
    text-align: right;
    color: #fb383a;
    margin: 0;
}