@font-face {
  font-family: Alexandria;
  src: url("../fonts/Alexandria-VariableFont_wght.ttf");
}
:root {
  --main-color-text: #9433dc;
  --main-color-theme: #9433dc;
  --secondary-color-text: #1e1f22;
  --secondary-sub-color-text: #1e1e1eb3;
  --input-background: #e3e9e940;
  --radio: 0.8;
}
body {
  font-family: "Alexandria", Courier, monospace;
  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;
}
.invalid-feedback {
    color: #dc3545 !important;
  }
/* Start Main Auth Style */
.main-con-logo-auth {
  width: 100%;
  background-color: var(--main-color-theme);
  height: 100vh;
  position: sticky;
  top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-con-logo-auth img {
  height: calc(481px * var(--radio));
}
.main-con-auth-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(50px * var(--radio)) calc(80px * var(--radio))
    calc(65px * var(--radio));
}
.main-con-auth-header img {
  height: calc(70px * var(--radio));
}
.mian-con-form-auth {
  width: 100%;
  max-width: calc(550px * var(--radio));
  margin: auto;
  min-height: 65vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.mian-con-form-auth > div {
  width: 100%;
}
.mian-con-form-auth > form {
  width: 100%;
}
.con-welcom-msg-login p {
  font-size: calc(35px * var(--radio));
  color: var(--secondary-color-text);
  font-weight: 400;
  margin-bottom: calc(25px * var(--radio));
}
.con-welcom-msg-login span {
  font-size: calc(35px * var(--radio));
  color: var(--secondary-color-text);
  font-weight: 700;
}
.con-welcom-msg-login {
  margin-bottom: calc(66px * var(--radio));
}
.main-con-input-form span {
  display: block;
  font-size: calc(18px * var(--radio));
  font-weight: 500;
  margin-bottom: calc(15px * var(--radio));
  color: var(--secondary-color-text);
}
.main-con-input-form input {
  width: 100%;
  background-color: #e6eff440;
  border: none;
  outline: none;
  padding: calc(26px * var(--radio)) calc(25px * var(--radio));
  border-radius: 18px;
  font-size: calc(18px * var(--radio));
  font-weight: 500;
  color: var(--secondary-color-text);
  transition: 0.3s ease-in-out;
  border: 2.5px solid #ebeaea;
}
.main-con-input-form select {
  width: 100%;
  background-color: #e6eff440;
  border: none;
  outline: none;
  padding: calc(26px * var(--radio)) calc(25px * var(--radio));
  border-radius: 18px;
  font-size: calc(18px * var(--radio));
  font-weight: 500;
  color: var(--secondary-color-text);
  transition: 0.3s ease-in-out;
  border: 2.5px solid #ebeaea;
}
.main-con-input-form input:focus {
  border: 2.5px solid var(--main-color-theme);
}
.main-con-input-form select:focus {
  border: 2.5px solid var(--main-color-theme);
}
.main-con-input-form > i {
  position: absolute;
  top: calc(75px * var(--radio));
  right: calc(24px * var(--radio));
  font-size: calc(24px * var(--radio));
  color: var(--main-color-text);
}
.main-con-input-form i.fa-eye-slash {
  display: none;
}
.main-con-input-form {
  max-width: calc(550px * var(--radio));
  margin-bottom: calc(30px * var(--radio));
  position: relative;
}
.main-con-forget-password-link {
  margin-top: calc(20px * var(--radio));
  display: flex;
  justify-content: end;
  max-width: calc(550px * var(--radio));
}
.main-con-forget-password-link a {
  font-size: calc(18px * var(--radio));
  color: var(--main-color-text);
  font-weight: 700;
}
.con-submit-auth-button {
  width: 100%;
  max-width: calc(550px * var(--radio));
}
.con-submit-auth-button button {
  width: 100%;
  background-color: var(--main-color-theme);
  color: white;
  font-size: calc(20px * var(--radio));
  color: white;
  font-weight: 700;
  border: none;
  outline: none;
  padding: calc(25px * var(--radio));
  border-radius: 18px;
  margin-top: calc(30px * var(--radio));
  margin-bottom: calc(60px * var(--radio));
}
.con-submit-auth-button button:disabled {
  width: 100%;
  background-color: #f6f6f6;
  color: #9a9a9a;
}
.donot-have-account-msg {
  display: flex;
  align-items: center;
  justify-content: center;
}
.donot-have-account-msg p {
  font-size: calc(18px * var(--radio));
  color: #1e1e1ecc;
  font-weight: 700;
  margin-bottom: 0px;
}
.donot-have-account-msg a {
  font-size: calc(18px * var(--radio));
  color: var(--main-color-text);
  font-weight: 700;
  margin: 0px calc(10px * var(--radio));
}
.terms-conditions {
  font-size: calc(18px * var(--radio));
  color: var(--secondary-color-text);
  font-weight: 700;
  padding: calc(38px * var(--radio)) calc(80px * var(--radio));
}
.main-con-two-inputs-auth-form {
  max-width: calc(550px * var(--radio));
}
.main-con-two-inputs-auth-form .col-6:first-child .main-con-input-form {
  margin-right: calc(16px * var(--radio));
}
.main-con-auth-center-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: calc(61px * var(--radio));
  max-width: calc(550px * var(--radio));
  margin: 0px auto calc(61px * var(--radio));
}
.main-con-auth-center-title h1 {
  font-size: calc(35px * var(--radio));
  font-weight: 400;
  margin-bottom: 0px;
}
.auth-hint-msg {
  font-size: calc(18px * var(--radio));
  font-weight: 500;
  margin-top: calc(60px * var(--radio));
  text-align: center;
  color: var(--secondary-color-text);
  opacity: 0.8;
  margin-bottom: calc(30px * var(--radio));
}
.auth-hint-msg span {
  font-size: calc(16px * var(--radio));
  font-weight: 600;
  margin-top: calc(60px * var(--radio));
}
.main-con-input-form label {
  width: 100%;
  background-color: #e6eff440;
  border: none;
  outline: none;
  padding: calc(26px * var(--radio)) calc(25px * var(--radio));
  border-radius: 18px;
  font-size: calc(18px * var(--radio));
  font-weight: 500;
  color: var(--secondary-color-text);
  transition: 0.3s ease-in-out;
  border: 2.5px solid #ebeaea;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
}
.con-unselect-image {
  display: none;
  position: relative;
}
.con-unselect-image img {
  height: calc(100px * var(--radio));
  border-radius: calc(18px * var(--radio));
}
.con-unselect-image i {
  font-size: calc(20px * var(--radio));
  color: #fb383a;
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: white;
  border-radius: 50%;
}
.main-con-auth-header p {
  margin-bottom: 0px;
  font-size: calc(18px * var(--radio));
  color: #1e1e1ecc;
  font-weight: 500;
}
.main-con-auth-header p a {
  font-size: calc(18px * var(--radio));
  color: var(--main-color-text);
  font-weight: 700;
}
.main-con-token-inputs {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(30px * var(--radio));
  margin-bottom: calc(40px * var(--radio));
  direction: ltr;
}
.main-con-token-inputs input {
  width: calc(85px * var(--radio));
  height: calc(75px * var(--radio));
  border-radius: 18px;
  border: 2.5px solid transparent;
  transition: 0.3s ease-in-out;
  outline: none;
  background-color: #e6eff440;
  text-align: center;
  font-size: calc(18px * var(--radio));
  color: var(--secondary-color-text);
  font-weight: 500;
  margin: 0px calc(5px * var(--radio));
}
.main-con-token-inputs input:focus {
  border: 2.5px solid var(--main-color-theme);
}
.main-con-resend-code p {
  font-size: calc(18px * var(--radio));
  font-weight: 500;
  color: #1e1e1ecc;
  text-align: center;
}
.main-con-resend-code p span {
  font-size: calc(18px * var(--radio));
  font-weight: 700;
  color: var(--main-color-text);
  text-align: center;
  margin: 0px 5px;
}
.email-sent-msg {
  line-height: calc(50px * var(--radio));
  font-size: calc(35px * var(--radio));
  color: var(--secondary-color-text);
  font-weight: 400;
  text-align: center;
}
/* End Main Auth Style */
/* Start Lecture Details Style */
.main-con-web-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(50px * var(--radio)) calc(80px * var(--radio)) 0px;
}
.con-logo-web-header img {
  height: calc(70px * var(--radio));
}
.main-con-links a {
  margin: 0px calc(35px * var(--radio));
  font-size: calc(18px * var(--radio));
  font-weight: 500;
  color: var(--secondary-color-text);
  opacity: 0.7;
}
.main-con-links a:first-child {
  margin: 0px;
}
.main-con-links a:last-child {
  margin: 0px;
}

.main-con-card-notifications-header-web a {
  font-size: calc(20px * var(--radio));
  font-weight: 700;
  color: var(--main-color-text);
}
.main-con-lecture-details-body {
  padding: calc(60px * var(--radio)) calc(80px * var(--radio)) 20px;
}
.main-con-lecture-details-side-bar > p {
  font-size: calc(26px * var(--radio));
  color: #00dc82;
  text-align: center;
  font-weight: 500;
  margin-bottom: calc(35px * var(--radio));
}
.lecture-details-info-summary {
  display: flex;
  align-items: center;
  margin-bottom: calc(35px * var(--radio));
}
.one-lecture-details-info-summary {
  flex-grow: 1;
  background-color: #e6eff440;
  padding: calc(21px * var(--radio));
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 18px;
}
.lecture-details-info-summary > span {
  width: calc(20px * var(--radio));
  display: block;
}
.main-con-lecture-details-side-bar {
  width: 100%;
  max-width: calc(409px * var(--radio));
}
.one-lecture-details-info-summary img {
  width: calc(35px * var(--radio));
  margin-bottom: calc(10px * var(--radio));
}
.one-lecture-details-info-summary span {
  font-size: calc(18px * var(--radio));
  font-weight: 500;
  color: var(--secondary-color-text);
}
.main-con-lecture-details-side-bar > button {
  width: 100%;
  background-color: var(--main-color-text);
  padding: calc(25px * var(--radio));
  border-radius: 18px;
  border: none;
  outline: none;
  color: white;
  margin-bottom: calc(65px * var(--radio));
  font-size: calc(20px * var(--radio));
  font-weight: 700;
}
.main-con-other-lecture-side-bar > p {
  text-align: center;
  font-size: calc(20px * var(--radio));
  color: var(--secondary-color-text);
  font-weight: 600;
  margin-bottom: calc(24px * var(--radio));
}
.main-con-one-other-lecture-side-bar {
  width: 100%;
  background-color: #e6eff440;
  border-radius: 18px;
  margin-bottom: calc(20px * var(--radio));
  padding: calc(12px * var(--radio));
  display: flex;
  align-items: center;
  transition: 0.3s ease-in-out;
}
.main-con-one-other-lecture-side-bar:hover {
  background-color: #9433dc26;
}
.main-con-one-other-lecture-side-bar p {
  font-size: calc(18px * var(--radio));
  color: var(--secondary-color-text);
  font-weight: 500;
  margin-bottom: calc(18px * var(--radio));
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box !important;
}
.main-con-one-other-lecture-side-bar img {
  height: calc(100px * var(--radio));
  width: calc(115px * var(--radio));
  border-radius: 18px;
}
.main-con-one-other-lecture-side-bar > div {
  margin: 0px calc(15px * var(--radio));
}
.main-con-one-other-lecture-side-bar span {
  font-size: calc(18px * var(--radio));
  font-weight: 500;
  color: #00dc82;
}
.main-con-lecture-tabs {
  list-style: none;
  padding: 0px;
  margin: 0px;
  display: flex;
  align-items: center;
  background-color: #e6eff41a;
  border-radius: 18px;
  margin-bottom: calc(25px * var(--radio));
}
.main-con-lecture-tabs li {
  flex-grow: 1;
  text-align: center;
  padding: calc(29px * var(--radio));
  font-size: calc(18px * var(--radio));
  color: #1e1f22cc;
  font-weight: 700;
  border-radius: 18px;
  border: 4px solid transparent;
}
.main-con-lecture-tabs li.active {
  border: 4px solid var(--main-color-theme);
  color: var(--main-color-text);
}
.main-con-lecture-details-details {
  width: 100%;
  max-width: 760px;
}
.main-con-lecture-details-details > p {
  font-size: calc(32px * var(--radio));
  margin-bottom: calc(35px * var(--radio));
  font-weight: 400;
  color: var(--secondary-color-text);
}
.main-con-lecture-details-details > img {
  width: 100%;
  border-radius: 40px;
  margin-bottom: calc(25px * var(--radio));
}
.con-one-sub-curclim {
  display: flex;
  align-items: center;
  background-color: #e6eff440;
  border-radius: 18px;
  padding: calc(27px * var(--radio)) calc(50px * var(--radio));
}
.con-one-sub-curclim span.curclim-count {
  font-size: calc(16px * var(--radio));
  font-weight: 700;
  color: var(--secondary-color-text);
  margin-right: calc(26px * var(--radio));
}
.con-one-sub-curclim span.curclim-sub-info {
  font-size: calc(16px * var(--radio));
  font-weight: 500;
  color: var(--secondary-color-text);
}
.con-one-sub-curclim img {
  width: calc(18px * var(--radio));
}
.con-one-sub-curclim p {
  font-size: calc(16px * var(--radio));
  font-weight: 500;
  columns: var(--secondary-color-text);
  margin-bottom: 0px;
  flex-grow: 1;
  margin: 0px calc(10px * var(--radio));
}
.con-top-curclim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(27px * var(--radio)) calc(50px * var(--radio));
  background-color: #e6eff440;
  border-radius: 18px;
}
.con-top-curclim p {
  flex-grow: 1;
  font-size: calc(16px * var(--radio));
  font-weight: 700;
  color: #1e1e1ecc;
  margin-bottom: 0px;
  pointer-events: none;
}
.con-top-curclim i {
  font-size: 20px;
  color: var(--secondary-color-text);
  pointer-events: none;
  transform: rotate(90deg);
  transition: 0.3s ease-in-out;
}
.con-bottom-curclim {
  display: none;
}
.main-con-one-curculim.open .con-bottom-curclim {
  display: block;
}
.main-con-one-curculim.open .con-top-curclim i {
  transform: rotate(0deg);
  color: var(--main-color-text);
}
.main-con-one-curculim.open .con-top-curclim p {
  color: var(--main-color-text);
}
.main-con-one-curculim {
  margin-bottom: calc(20px * var(--radio));
}
.main-con-comments-top-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(27px * var(--radio)) calc(50px * var(--radio));
  border-radius: 18px;
  background-color: #e6eff440;
}
.main-con-comments-top-block span {
  font-size: calc(16px * var(--radio));
  font-weight: 700;
  color: #1e1e1ecc;
  pointer-events: none;
}
.main-con-comments-top-block i {
  font-size: calc(20px * var(--radio));
  color: #1e1e1ecc;
  transform: rotate(-90deg);
  color: var(--main-color-text);
  pointer-events: none;
}
.main-con-comments-with-replies {
  background-color: #e6eff440;
  border-radius: 18px;
  padding: calc(15px * var(--radio)) calc(50px * var(--radio));
}
.comment-info {
  display: flex;
  align-items: center;
  margin-bottom: calc(15px * var(--radio));
}
.comment-info img {
  width: calc(60px * var(--radio));
  height: calc(60px * var(--radio));
}
.comment-info > div {
  margin: 0px calc(15px * var(--radio));
}
.comment-info p {
  font-size: calc(16px * var(--radio));
  font-weight: 600;
  color: var(--secondary-color-text);
  margin-bottom: calc(10px * var(--radio));
}
.comment-info span {
  font-size: calc(16px * var(--radio));
  font-weight: 300;
  color: var(--secondary-color-text);
  opacity: 0.7;
}
.con-conetent-comment p {
  font-size: calc(16px * var(--radio));
  font-weight: 500;
  margin-bottom: 0px;
  color: var(--secondary-color-text);
  opacity: 0.9;
  margin-bottom: calc(10px * var(--radio));
}
.con-conetent-comment {
  margin-bottom: calc(35px * var(--radio));
}
.main-con-one-comment {
  margin-bottom: calc(49px * var(--radio));
}
.main-con-one-comment > p:last-child {
  margin-bottom: 0px;
}
.main-con-one-comment.reply {
  margin-left: calc(30px * var(--radio));
}
.main-con-show-more-comments-btn > button {
  border: none;
  outline: none;
  background-color: transparent;
  color: var(--main-color-text);
  font-size: calc(18px * var(--radio));
  font-weight: 700;
}
.main-con-show-more-comments-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: calc(30px * var(--radio));
}
.main-con-comments-with-replies {
  margin-bottom: calc(24px * var(--radio));
}
.main-con-comments.hide .main-con-comments-bottom-part {
  display: none;
}
.main-con-comments.hide .main-con-comments-top-block i {
  transform: rotate(0deg);
  color: #1e1f22cc;
}
.con-conetent-comment img {
  height: 150px;
  margin-bottom: calc(15px * var(--radio));
  max-width: 100%;
}
.main-con-write-comment {
  background-color: #e6eff440;
  border-radius: 18px;
  display: flex;
  align-items: center;
}
.main-con-write-comment img.image-user-comment {
  width: calc(60px * var(--radio));
  height: calc(60px * var(--radio));
  border-radius: 50%;
  margin: calc(8px * var(--radio)) calc(25px * var(--radio))
    calc(8px * var(--radio)) calc(50px * var(--radio));
}
.main-con-write-comment input {
  flex-grow: 1;
  background-color: transparent;
  border: none;
  outline: none;
  font-size: calc(16px * var(--radio));
  font-weight: 500;
  color: var(--secondary-color-text);
  opacity: 0.6;
}
.main-con-write-comment label img {
  margin: 0px calc(30px * var(--radio));
}
.main-con-write-comment button {
  width: calc(75px * var(--radio));
  height: calc(75px * var(--radio));
  border-radius: 18px;
  border: none;
  outline: none;
  background-color: var(--main-color-theme);
  color: white;
}
.main-con-write-comment .comment-image img {
  width: calc(55px * var(--radio));
  height: calc(55px * var(--radio));
  border-radius: 15px;
  margin: calc(10px * var(--radio));
}
.main-con-write-comment .comment-image {
  display: none;
  position: relative;
}
.main-con-write-comment .comment-image i {
  position: absolute;
  top: 5px;
  right: 5px;
  color: #fb383a;
  background-color: white;
  border-radius: 50%;
  font-size: 13px;
}
.main-con-payment-page {
  padding: 0px calc(80px * var(--radio)) 0px;
  margin-top: calc(66px * var(--radio));
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main-con-tabs-ul-payment {
  width: 100%;
  max-width: calc(1000px * var(--radio));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: calc(70px * var(--radio));
  padding: 0px;
  margin: 0px 0px calc(70px * var(--radio));
  list-style: none;
}
.main-con-tabs-ul-payment li {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e3e9e940;
  padding: calc(34px * var(--radio));
  border-radius: 18px;
  border: 4px solid transparent;
}
.main-con-tabs-ul-payment li.active {
  border: 4px solid var(--main-color-theme);
}
.main-con-tabs-ul-payment li:nth-child(2) {
  margin: 0px calc(30px * var(--radio));
}
.main-con-tabs-ul-payment li img {
  height: calc(45px * var(--radio));
}
.main-con-payment-page > p {
  font-size: calc(35px * var(--radio));
  font-weight: 400;
  color: var(--secondary-color-text);
  margin-bottom: calc(50px * var(--radio));
  text-align: center;
}
.main-con-payment-tabs-content {
  width: 100%;
  max-width: calc(1000px * var(--radio));
}
.main-con-visa-content .main-con-input-form {
  max-width: calc(630px * var(--radio));
  width: 100%;
}
.main-con-visa-content .row {
  width: 100%;
}
.main-con-visa-content form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: calc(630px * var(--radio));
  margin: auto;
}
.main-con-visa-content form .col-4 .main-con-input-form {
  padding-left: calc(20px * var(--radio));
}
.main-con-visa-content form button {
  width: 100%;
  max-width: calc(504px * var(--radio));
  padding: calc(25px * var(--radio));
  border-radius: 18px;
  border: none;
  outline: none;
  color: white;
  background-color: var(--main-color-theme);
  font-size: calc(20px * var(--radio));
  font-weight: 700;
}
.main-con-fawry-content {
  display: flex;
  justify-content: center;
}
.main-con-fawry-card {
  background-color: #e6eff440;
  border-radius: 18px;
  padding: calc(30px * var(--radio));
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(350px * var(--radio));
}
.main-con-fawry-card > p {
  font-size: calc(20px * var(--radio));
  font-weight: 600;
  color: var(--secondary-color-text);
  margin-bottom: calc(40px * var(--radio));
  text-align: center;
  max-width: calc(380px * var(--radio));
}
.main-con-fawry-card button {
  background-color: #9433dc40;
  width: 100%;
  max-width: calc(310px * var(--radio));
  padding: calc(26px * var(--radio));
  color: var(--main-color-text);
  border: none;
  outline: none;
  border-radius: 18px;
  font-weight: 700;
  font-size: calc(20px * var(--radio));
  margin-bottom: calc(40px * var(--radio));
}
.main-con-fawry-card button span {
  margin: 0px calc(12px * var(--radio));
}
.main-con-fawry-card > span {
  font-size: calc(18px * var(--radio));
  font-weight: 500;
  color: var(--secondary-color-text);
  opacity: 0.8;
}
.confirm-button-coupon {
  height: 100%;
  display: flex;
  align-items: end;
}
.confirm-button-coupon button {
  width: 100%;
  background-color: var(--main-color-theme);
  color: white;
  font-size: calc(20px * var(--radio));
  font-weight: 700;
  border: none;
  outline: none;
  border-radius: 18px;
  padding: calc(25px * var(--radio));
}
.main-con-coupon-content .main-con-input-form {
  max-width: none;
}
/* End Paymend Design */
/* Start Profile Design */
.main-con-profile-page {
  padding: 0px calc(80px * var(--radio)) 0px;
  margin-top: calc(60px * var(--radio));
}
.main-con-prilfe-image-barcode {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: calc(50px * var(--radio));
}
.main-con-prilfe-image-barcode .profile-image {
  width: calc(120px * var(--radio));
  height: calc(120px * var(--radio));
  border-radius: 50%;
  margin-bottom: calc(15px * var(--radio));
}
.main-con-prilfe-image-barcode p {
  font-size: calc(18px * var(--radio));
  font-weight: 700;
  color: #1e1f22;
  margin-bottom: calc(30px * var(--radio));
}
.main-con-prilfe-image-barcode span {
  font-size: calc(14px * var(--radio));
  font-weight: 500;
  color: #1e1f22;
}
.main-con-prilfe-image-barcode .image-barcode {
  width: calc(180px * var(--radio));
  margin-bottom: calc(5px * var(--radio));
}
.main-con-side-bar-setting a {
  display: flex;
  align-items: center;
  margin-bottom: calc(49px * var(--radio));
  color: #1e1f22;
}
.main-con-side-bar-setting a:last-child {
  margin-bottom: 0px;
}
.main-con-side-bar-setting a.active span {
  color: var(--main-color-text);
}
.main-con-side-bar-setting a span {
  color: #1e1f22;
  margin: 0px calc(10px * var(--radio));
  display: block;
  font-size: calc(18px * var(--radio));
  font-weight: 700;
}
.main-con-side-bar-setting {
  min-height: calc((100vh - 10px) * var(--radio));
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: sticky;
  top: 0px;
}
.sub-main-con-sidebar-setting {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}
.main-con-progress-side-bar-setting {
  width: calc(6px * var(--radio));
  background-color: #e6eff4;
  align-self: stretch;
  border-radius: 50px;
  position: relative;
}
.main-con-progress-side-bar-setting span {
  position: absolute;
  width: 100%;
  height: calc(33px * var(--radio));
  background-color: var(--main-color-theme);
  border-radius: 50px;
  left: 0px;
  top: 0px;
}
.main-con-side-bar-setting > p {
  margin-bottom: calc(83px * var(--radio));
  display: block;
  font-size: calc(32px * var(--radio));
  font-weight: 400;
}
.form-preview-profile {
  max-width: calc(505px * var(--radio));
  width: 100%;
}
.form-preview-profile .main-con-input-form {
  max-width: none;
}
.main-con-input-form .input-prefix {
  position: absolute;
  top: calc(70px * var(--radio));
  right: calc(30px * var(--radio));
  font-size: calc(18px * var(--radio));
  font-weight: 500;
  color: var(--secondary-color-text);
}
.submit-a-preview-profile-form a {
  width: 100%;
  text-align: center;
  font-size: calc(20px * var(--radio));
  color: white;
  font-weight: 700;
  padding: calc(25px * var(--radio));
  border-radius: 18px;
  background-color: var(--main-color-theme);
  display: block;
}
.submit-a-preview-profile-form button {
  width: 100%;
  text-align: center;
  font-size: calc(20px * var(--radio));
  color: white;
  font-weight: 700;
  padding: calc(25px * var(--radio));
  border-radius: 18px;
  background-color: var(--main-color-theme);
  border: none;
  outline: none;
  display: block;
}
.main-con-edit-profile-image {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: calc(77px * var(--radio));
}
.main-con-edit-profile-image img.img-prevew-pro {
  width: calc(120px * var(--radio));
  height: calc(120px * var(--radio));
  margin: 0px calc(19px * var(--radio));
  border-radius: 50%;
}
.main-con-edit-profile-image label span {
  font-size: calc(18px * var(--radio));
  color: var(--main-color-text);
  font-weight: 700;
}
.main-con-edit-profile-image label img {
  margin: 0px calc(8px * var(--radio));
}
.main-con-table-setting {
  width: 100%;
  max-width: calc(955px * var(--radio));
  margin: auto;
}
.main-con-table-header {
  background-color: var(--secondary-color-text);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(25px * var(--radio)) calc(50px * var(--radio));
  border-radius: 20px;
}
.main-con-table-header p {
  margin-bottom: 0px;
  font-size: calc(18px * var(--radio));
  padding: 0px calc(10px * var(--radio));
  font-weight: 700;
}
.main-con-table-header div {
  flex-grow: 1;
  text-align: center;
  width: 10%;
}
.table-date {
  font-size: calc(18px * var(--radio));
  font-weight: 600;
  margin-bottom: calc(15px * var(--radio));
  display: block;
  margin-top: calc(40px * var(--radio));
}
.mian-con-table-body {
  display: flex;
  align-items: center;
  background-color: #e6eff440;
  border-radius: 20px;
  padding: calc(25px * var(--radio)) calc(50px * var(--radio));
  margin-bottom: calc(20px * var(--radio));
}
.mian-con-table-body p {
  font-size: calc(18px * var(--radio));
  margin-bottom: 0px;
  font-weight: 700;
  color: var(--secondary-color-text);
  padding: 0px calc(20px * var(--radio));
}
.mian-con-table-body > div {
  flex-grow: 1;
  text-align: center;
  width: 10%;
}
.main-con-table-id {
  display: flex;
  align-items: center;
}
.main-con-table-id img {
  width: calc(115px * var(--radio));
  height: calc(80px * var(--radio));
  border-radius: 18px;
}
.main-con-table-id p {
  margin: 0px calc(20px * var(--radio));
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}
.mian-con-table-body p.price {
  color: #00dc82;
}
/* End Profile Design */
/* Start Question Answers Design  */
.main-con-questions-answers {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px calc(80px * var(--radio));
  margin-top: calc(80px * var(--radio));
}
.submain-con-questions-answers {
  width: 100%;
  max-width: calc(850px * var(--radio));
}
.main-con-write-comment-question-answer-page {
  background-color: #e6eff440;
  display: flex;
  align-items: center;
  padding: calc(12.5px * var(--radio)) calc(40px * var(--radio));
  border-radius: 18px;
  margin-bottom: calc(35px * var(--radio));
}
.main-con-write-comment-question-answer-page img.user-write-comment-image {
  width: calc(60px * var(--radio));
  height: calc(60px * var(--radio));
  border-radius: 50%;
}
.main-con-write-comment-question-answer-page input {
  flex-grow: 1;
  font-size: calc(16px * var(--radio));
  font-weight: 500;
  color: var(--secondary-color-text);
  opacity: 0.6;
  background-color: transparent;
  border: none;
  outline: none;
  margin: 0px calc(20px * var(--radio));
}
.main-con-write-comment-question-answer-page label span {
  font-size: calc(16px * var(--radio));
  font-weight: 500;
  color: var(--secondary-color-text);
  opacity: 0.6;
  margin: 0px calc(5px * var(--radio));
}
.main-con-write-comment-question-answer-page label img {
  width: calc(20px * var(--radio));
  height: calc(20px * var(--radio));
}
.main-con-write-comment-question-answer-page label {
  margin: 0px calc(45px * var(--radio));
}
.main-con-write-comment-question-answer-page button {
  border: none;
  outline: none;
  padding: calc(25px * var(--radio)) calc(51px * var(--radio));
  background-color: var(--main-color-theme);
  color: white;
  font-size: calc(20px * var(--radio));
  font-weight: 700;
  border-radius: 18px;
}
.main-con-one-comment-with-footer {
  background-color: white;
  box-shadow: 0px 4px 50px 0px #1e1e1e0f;
  padding: calc(30px * var(--radio)) calc(47px * var(--radio));
  border-radius: 18px;
  margin-bottom: calc(35px * var(--radio));
}
.con-question-comment-header {
  display: flex;
  align-items: center;
  margin-bottom: calc(20px * var(--radio));
}
.con-question-comment-header img {
  width: calc(60px * var(--radio));
  height: calc(60px * var(--radio));
  border-radius: 50%;
}
.con-question-comment-header > div {
  margin: 0px calc(15px * var(--radio));
}
.con-question-comment-header p {
  font-size: calc(16px * var(--radio));
  font-weight: 600;
  margin-bottom: calc(10px * var(--radio));
  color: var(--secondary-color-text);
}
.con-question-comment-header span {
  font-size: calc(16px * var(--radio));
  font-weight: 300;
  color: var(--secondary-color-text);
  opacity: 0.7;
}
.main-con-one-comment-question-page > p {
  font-size: calc(18px * var(--radio));
  color: var(--secondary-color-text);
  font-weight: 500;
  line-height: calc(30px * var(--radio));
  margin-bottom: calc(15px * var(--radio));
}
.main-con-one-comment-question-page > img {
  height: calc(200px * var(--radio));
  border-radius: 18px;
  max-width: 90%;
}
.main-con-one-comment-question-page.reply {
  margin-top: calc(47px * var(--radio));
  margin-left: calc(30px * var(--radio));
}
.comment-footer-question-page {
  display: flex;
  align-items: center;
  padding: calc(20px * var(--radio)) 0px 0px;
}
.comment-footer-question-page .share-count {
  margin: 0px calc(80px * var(--radio));
}
.comment-footer-question-page .share-count span {
  font-size: calc(16px * var(--radio));
  font-weight: 500;
  opacity: 0.7;
  margin: 0px calc(10px * var(--radio));
  color: var(--secondary-color-text);
}
.comment-footer-question-page .share-count img {
  width: calc(24px * var(--radio));
  height: calc(24px * var(--radio));
}
.comment-footer-question-page .like-comment img {
  width: calc(20px * var(--radio));
  height: calc(18px * var(--radio));
}
.comment-footer-question-page .like-comment span {
  font-size: calc(16px * var(--radio));
  font-weight: 500;
  margin: 0px calc(10px * var(--radio));
  color: var(--main-color-text);
}
.main-con-qnt-cart-page {
  display: flex;
  align-items: center;
}
.main-con-qnt-cart-page input {
  width: calc(38px * var(--radio));
  background-color: transparent;
  border: none;
  outline: none;
  font-size: calc(18px * var(--radio));
  font-weight: 600;
  color: var(--secondary-color-text);
  text-align: center;
}
.main-con-qnt-cart-page i {
  height: calc(30px * var(--radio));
  width: calc(25px * var(--radio));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(12px * var(--radio));
  background-color: var(--main-color-theme);
  border-radius: 6px;
  color: white;
}
.main-con-qnt-cart-page i.fa-minus {
  background-color: #1e1f2280;
}
.main-con-delete-item-cart > i {
  font-size: calc(25px * var(--radio));
  color: var(--secondary-color-text);
}
.main-con-cart-page .main-con-table-header {
  margin-bottom: calc(30px * var(--radio));
}
.main-con-cart-page {
  margin-top: calc(80px * var(--radio));
  /* max-width: calc(1100px * var(--radio)); */
  max-width: unset;
  width: 70%;
  margin: calc(80px * var(--radio)) auto 0px;
}
.main-con-center-title-page h1 {
  font-size: calc(32px * var(--radio));
  font-weight: 400;
  margin-bottom: calc(40px * var(--radio));
}
.main-con-center-title-page {
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-con-cart-page .main-con-table-setting {
  /* max-width: calc(1100px * var(--radio)); */
  max-width: unset;
  margin-top: calc(80px * var(--radio));
}
.main-con-cart-summary {
  background-color: #e6eff440;
  width: 100%;
  max-width: calc(410px * var(--radio));
  border-radius: 18px;
  margin-bottom: calc(30px * var(--radio));
  padding: calc(30px * var(--radio)) calc(35px * var(--radio));
}
.one-card-summary-info {
  display: flex;
  align-items: center;
  margin-bottom: calc(30px * var(--radio));
  justify-content: space-between;
}
.one-card-summary-info p {
  font-weight: 500;
  color: var(--secondary-color-text);
  font-size: calc(18px * var(--radio));
  opacity: 0.7;
  margin-bottom: 0px;
}
.one-card-summary-info span {
  font-weight: 500;
  color: var(--secondary-color-text);
  font-size: calc(18px * var(--radio));
  opacity: 0.7;
}
.one-card-summary-info-totla {
  display: flex;
  align-items: center;
  margin-bottom: calc(18px * var(--radio));
  justify-content: space-between;
}
.one-card-summary-info-totla p {
  font-weight: 700;
  color: var(--secondary-color-text);
  font-size: calc(18px * var(--radio));
  margin-bottom: 0px;
}
.one-card-summary-info-totla span {
  font-weight: 700;
  color: #00dc82;
  font-size: calc(18px * var(--radio));
  margin-bottom: 0px;
}
.main-con-submit-cart-button button {
  width: 100%;
  max-width: calc(410px * var(--radio));
  border-radius: 18px;
  border: none;
  outline: none;
  background-color: var(--main-color-theme);
  color: white;
  padding: calc(25px * var(--radio));
  font-size: calc(20px * var(--radio));
  font-weight: 700;
}
.main-con-add-new-adress {
  max-width: calc(650px * var(--radio));
  margin: calc(80px * var(--radio)) auto 10px;
}
.main-con-add-new-adress .main-con-input-form {
  max-width: none;
}
.main-con-add-new-adress .main-con-two-inputs-auth-form {
  max-width: none;
}
.con-submit-add-new-address-btn {
  display: flex;
  justify-content: center;
}
.con-submit-add-new-address-btn button {
  border: none;
  outline: none;
  max-width: calc(505px * var(--radio));
  width: 100%;
  border-radius: 18px;
  background-color: var(--main-color-theme);
  color: white;
  font-weight: 700;
  font-size: calc(20px * var(--radio));
  padding: calc(25px * var(--radio));
}
.main-con-done-page {
  min-height: 85vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.con-img-card-done-page {
  position: relative;
  margin-bottom: calc(20px * var(--radio));
}
.con-img-card-done-page img.circle-check {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 111;
}
.con-done-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.con-done-card p {
  font-size: calc(32px * var(--radio));
  font-weight: 400;
  color: var(--secondary-color-text);
  margin-bottom: calc(45px * var(--radio));
  text-align: center;
  max-width: calc(500px * var(--radio));
}
.con-done-card a {
  border: none;
  outline: none;
  max-width: calc(505px * var(--radio));
  width: 100%;
  border-radius: 18px;
  background-color: var(--main-color-theme);
  color: white;
  font-weight: 700;
  font-size: calc(20px * var(--radio));
  padding: calc(25px * var(--radio));
  text-align: center;
}
/* End Question Answers Design  */
/* Start Lecture & Revistions Design */
.main-con-lecture-revestions {
  padding: 0px calc(80px * var(--radio)) 10px;
  margin-top: calc(60px * var(--radio));
}
.main-con-tabs-lecture-revestions {
  padding: calc(12.5px * var(--radio)) calc(25px * var(--radio));
  background-color: #e6eff440;
  border-radius: 18px;
  display: flex;
  align-items: center;
  list-style: none;
  max-width: calc(630px * var(--radio));
  margin: 0px auto calc(50px * var(--radio));
}
.main-con-tabs-lecture-revestions li {
  flex-grow: 1;
  width: 50%;
  text-align: center;
  padding: calc(22.5px * var(--radio));
  font-size: calc(20px * var(--radio));
  font-size: calc(20px * var(--radio));
  font-weight: 700;
  color: #1e1f22b3;
  border-radius: 18px;
}
.main-con-tabs-lecture-revestions li.active {
  background-color: var(--main-color-theme);
  color: white;
}
.main-con-lecture-revestions-card {
  background: url("../images/Rectangle\ 7.png") no-repeat center center scroll;
  background-size: cover;
  width: 100%;
  height: calc(550px * var(--radio));
  border-radius: 18px;
  position: relative;
  margin-bottom: calc(40px * var(--radio));
}
.con-lecture-revestions-card-info {
  position: absolute;
  bottom: calc(20px * var(--radio));
  left: calc(20px * var(--radio));
  width: calc(100% - calc(40px * var(--radio)));
  background-color: #ffffffcc;
  border-radius: 18px;
  padding: calc(30px * var(--radio)) calc(20px * var(--radio));
}
.con-lecture-revestions-card-info p.price {
  color: #00dc82;
  font-weight: 700;
  margin-bottom: calc(15px * var(--radio));
  font-size: calc(18px * var(--radio));
}
.con-lecture-revestions-card-info p.description {
  color: var(--secondary-color-text);
  font-weight: 700;
  margin-bottom: calc(15px * var(--radio));
  font-size: calc(20px * var(--radio));
}
.con-lecture-revestions-card-info span {
  color: var(--secondary-color-text);
  font-weight: 400;
  opacity: 0.7;
  font-size: calc(16px * var(--radio));
}
.main-con-my-exams-page {
  padding: 0px calc(80px * var(--radio)) 10px;
  margin-top: calc(80px * var(--radio));
}
.main-con-my-books-card {
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background-color: white;
  box-shadow: 0px 4px 50px 0px #1e1e1e0d;
  margin-bottom: calc(40px * var(--radio));
}
.con-book-image img {
  width: 100%;
  /* height: calc(350px * var(--radio)); */
}
.con-book-image {
  position: relative;
  margin-bottom: calc(20px * var(--radio));
}
.con-book-image span {
  position: absolute;
  top: calc(20px * var(--radio));
  left: calc(20px * var(--radio));
  background-color: #00dc82;
  padding: calc(20px * var(--radio)) calc(15px * var(--radio));
  border-radius: 18px;
  font-size: calc(20px * var(--radio));
  font-weight: 700;
  color: white;
}
.main-con-my-books-card > p {
  font-size: calc(20px * var(--radio));
  font-weight: 700;
  color: var(--secondary-color-text);
  padding: 0px calc(25px * var(--radio)) calc(20px * var(--radio));
}
.main-con-my-books-card button {
  margin: auto;
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e6eff433;
  width: 100%;
  max-width: calc(280px * var(--radio));
  padding: calc(20px * var(--radio));
  border-radius: 18px;
  font-size: calc(20px * var(--radio));
  font-weight: 700;
  color: var(--main-color-text);
  margin-bottom: calc(25px * var(--radio));
}
.main-con-my-books-card button img {
  width: calc(30px * var(--radio));
  margin: 0px calc(15px * var(--radio));
}
.main-con-experence-rate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: calc(650px * var(--radio));
  margin: 0px auto calc(55px * var(--radio));
  width: 100%;
}
.con-one-experence-rate label {
  background-color: #e6eff440;
  padding: calc(15px * var(--radio)) calc(20px * var(--radio));
  border-radius: 18px;
  width: 100%;
  border: 3px solid transparent;
}
.con-one-experence-rate {
  flex-grow: 1;
}
.con-one-experence-rate input:checked + label {
  border: 3px solid var(--main-color-theme);
}
.con-one-experence-rate input:checked + label span {
  color: var(--main-color-text);
}
.con-one-experence-rate label img {
  width: calc(45px * var(--radio));
}
.con-one-experence-rate label span {
  font-size: calc(16px * var(--radio));
  font-weight: 500;
  margin: 0px calc(15px * var(--radio));
}
.main-con-write-complaint {
  margin: 0px auto calc(45px * var(--radio));
  max-width: calc(650px * var(--radio));
  width: 100%;
}
.main-con-write-complaint label {
  font-size: calc(18px * var(--radio));
  font-weight: 500;
  margin-bottom: calc(15px * var(--radio));
  display: block;
  color: var(--secondary-color-text);
  opacity: 0.8;
}
.main-con-write-complaint textarea {
  width: 100%;
  border: none;
  outline: none;
  background-color: #e6eff440;
  border-radius: 18px;
  padding: calc(30px * var(--radio)) calc(25px * var(--radio));
  color: var(--secondary-color-text);
  opacity: 0.7;
  font-size: calc(16px * var(--radio));
  font-weight: 500;
}
.main-con-complaints {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.main-con-complaints button {
  font-size: calc(20px * var(--radio));
  color: white;
  font-weight: 700;
  padding: calc(25px * var(--radio));
  border-radius: 18px;
  width: 100%;
  max-width: calc(505px * var(--radio));
  border: none;
  outline: none;
  background-color: var(--main-color-theme);
}
.complaint-done p {
  margin-bottom: calc(15px * var(--radio));
}
.complaint-done span {
  font-size: calc(18px * var(--radio));
  font-weight: 500;
  margin-bottom: calc(55px * var(--radio));
  color: var(--secondary-color-text);
  opacity: 0.7;
  max-width: calc(535px * var(--radio));
  text-align: center;
  line-height: 30px;
}
.main-con-all-content-container-lecture-purchase {
  display: flex;
  flex-direction: column;
  padding: calc(47px * var(--radio)) calc(80px * var(--radio)) 0px;
  min-height: 100vh;
}
.main-con-lecture-purchase-content-header {
  display: flex;
  align-items: center;
  margin-bottom: calc(48px * var(--radio));
  justify-content: space-between;
}
.main-con-lecture-purchase-content-header button {
  border: none;
  outline: none;
  width: calc(84px * var(--radio));
  height: calc(75px * var(--radio));
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--main-color-theme);
}
.con-one-section-style-1 {
  width: 100%;
  height: calc(420px * var(--radio));
  position: relative;
  border-radius: 25px;
  background-size: cover !important;
  margin-bottom: 15px;
  overflow: hidden;
}
.con-one-section-style-2 {
  width: 100%;
  height: calc(420px * var(--radio));
  position: relative;
  border-radius: 25px;
  margin-bottom: 15px;
  overflow: hidden;
}
.con-one-section-style-2.section-1 {
  background-color: #3494e6;
}
.con-one-section-style-2.section-2 {
  background-color: #4ac157;
}
.con-one-section-style-2.section-3 {
  background-color: #ef32d9;
}
.con-one-section-style-2.section-4 {
  background-color: #ee0979;
}
.con-one-section-style-2 p {
  position: absolute;
  white-space: nowrap;
  bottom: 40px;
  left: 50%;
  transform: translate(-50%, 0%);
  font-size: calc(25px * var(--radio));
  font-weight: 700;
  margin-bottom: 0px;
  color: white;
  z-index: 223;
}
.con-one-section-style-2 img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -100px;
  right: -100px;
  border-radius: 500px 0px 500px 500px;
  transition: 0.3s ease-in-out;
}
.con-one-section-style-2:hover img {
  position: absolute;
  top: 0px;
  right: 0px;
  border-radius: 0px 0px 0px 0px;
}
.con-one-section-style-1::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.con-one-section-style-1.section-1::after {
  background-color: #3494e68c;
}
.con-one-section-style-1.section-2::after {
  background-color: #4ac1578c;
}
.con-one-section-style-1.section-3::after {
  background-color: #ef32d98c;
}
.con-one-section-style-1.section-4::after {
  background-color: #ee09798c;
}
.con-one-section-style-1.section-1 {
  background: url("../images/Rectangle\ 142.png") no-repeat center center;
}
.con-one-section-style-1.section-2 {
  background: url("../images/Rectangle\ 133.png") no-repeat center center;
}
.con-one-section-style-1.section-3 {
  background: url("../images/Rectangle\ 147.png") no-repeat center center;
}
.con-one-section-style-1.section-4 {
  background: url("../images/Rectangle\ 144.png") no-repeat center center;
}
.con-one-section-style-1 p {
  position: absolute;
  white-space: nowrap;
  bottom: 40px;
  left: 50%;
  transform: translate(-50%, 0%);
  font-size: calc(25px * var(--radio));
  font-weight: 700;
  margin-bottom: 0px;
  color: white;
  z-index: 223;
}
.main-con-prgress-lecture-purchase {
  flex-grow: 1;
  display: flex;
  align-items: center;
  padding: 0px calc(12px * var(--radio)) 0px calc(97px * var(--radio));
}
.con-preogress-pregress-lecture {
  flex-grow: 1;
  background-color: #e6eff440;
  height: calc(27px * var(--radio));
  border-radius: 50px;
  margin-right: calc(37px * var(--radio));
  position: relative;
  overflow: hidden;
}
.con-preogress-pregress-lecture span {
  width: 50%;
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 50px;
  height: 100%;
  background: linear-gradient(90deg, #9433dc 0%, #b581dc 100%);
}
.main-con-prgress-lecture-purchase > span {
  font-size: calc(32px * var(--radio));
  font-weight: 700;
  color: var(--main-color-text);
}
.main-con-lecture-purchase-content-content iframe {
  width: 100%;
  height: calc(550px * var(--radio));
  border-radius: 40px;
  margin-bottom: calc(20px * var(--radio));
}
.main-con-lecture-purchase-content-content {
  flex-grow: 1;
}
.main-con-lecture-purchase-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-con-lecture-purchase-footer button {
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: calc(242px * var(--radio));
  width: 100%;
  flex-grow: 1;
  padding: calc(25px * var(--radio));
  border-radius: 18px;
  font-size: calc(20px * var(--radio));
  font-weight: 700;
  margin: calc(17.5px * var(--radio));
}
.main-con-lecture-purchase-footer button i {
  margin: 0px calc(8px * var(--radio));
}
.main-con-lecture-purchase-footer button.next {
  margin: calc(17.5px * var(--radio));
  background-color: #9433dc40;
  color: var(--main-color-text);
}
.main-con-lecture-purchase-footer button.next.done {
  background-color: var(--main-color-text);
  color: white;
}
.main-con-lecture-purchase-footer button.pre {
  background-color: #e6eff480;
  color: var(--secondary-color-text);
}
.main-con-lecture-purchase-side-bar {
  height: 100vh;
  padding: calc(50px * var(--radio));
  background-color: #e6eff433;
  display: flex;
  position: sticky;
  top: 0px;
  flex-direction: column;
}
.logo-title-side-bar-lec-purchase {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.logo-title-side-bar-lec-purchase img {
  height: calc(70px * var(--radio));
}
.lec-purchase-side-logo {
  margin-bottom: calc(125px * var(--radio));
}
.logo-title-side-bar-lec-purchase p {
  font-size: calc(32px * var(--radio));
  font-weight: 300;
  color: var(--secondary-color-text);
  margin-bottom: calc(35px * var(--radio));
}
.logo-title-side-bar-lec-purchase span {
  font-size: calc(32px * var(--radio));
  font-weight: 400;
  color: var(--secondary-color-text);
}
.main-con-lec-purchase-side-bar-tabs {
  width: 100%;
  flex-grow: 1;
  overflow: auto;
}
.con-one-tab-lec-purchase-side {
  background-color: white;
  display: flex;
  align-items: center;
  width: 100%;
  padding: calc(17.5px * var(--radio)) calc(25px * var(--radio));
  margin-bottom: calc(25px * var(--radio));
  border-radius: 18px;
  border: 3px solid transparent;
}
.con-one-tab-lec-purchase-side > span {
  width: calc(42px * var(--radio));
  height: calc(42px * var(--radio));
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1e1f22cc;
  border-radius: 14px;
}
.con-one-tab-lec-purchase-side > span img {
  width: calc(24px * var(--radio));
}
.con-one-tab-lec-purchase-side > div {
  margin: 0px calc(15px * var(--radio));
  flex-grow: 1;
}
.con-one-tab-lec-purchase-side > div p {
  font-size: calc(16px * var(--radio));
  font-weight: 600;
  margin-bottom: calc(5px * var(--radio));
  color: var(--secondary-color-text);
}
.con-one-tab-lec-purchase-side > div span {
  font-size: calc(16px * var(--radio));
  font-weight: 300;
  color: var(--secondary-color-text);
  opacity: 0.7;
}
.con-one-tab-lec-purchase-side.active {
  background-color: #9433dc1a;
  border: 3px solid var(--main-color-theme);
}
.con-one-tab-lec-purchase-side.active > span {
  background-color: var(--main-color-theme);
}
.con-one-tab-lec-purchase-side.active > div p {
  color: var(--main-color-text);
}
.main-con-center-title-lecture-purchase {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: calc(35px * var(--radio));
}
.main-con-center-title-lecture-purchase p {
  font-size: calc(32px * var(--radio));
  font-weight: 400;
  color: var(--secondary-color-text);
  margin-bottom: 0px;
}
.main-con-lec-purchase-files {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.main-con-file-lecture-purchase-card {
  width: fit-content;
  background-color: #e6eff440;
  display: flex;
  align-items: center;
  flex-direction: column;
  border-radius: 18px;
  padding: calc(33px * var(--radio)) calc(42px * var(--radio));
  margin: 0px calc(12px * var(--radio)) calc(24px * var(--radio));
}
.main-con-file-lecture-purchase-card img {
  width: calc(135px * var(--radio));
  margin-bottom: calc(27px * var(--radio));
}
.main-con-file-lecture-purchase-card p {
  font-size: calc(18px * var(--radio));
  font-weight: 700;
  color: var(--secondary-color-text);
  margin-bottom: calc(8px * var(--radio));
}
.main-con-file-lecture-purchase-card span {
  font-size: calc(16px * var(--radio));
  font-weight: 300;
  color: var(--secondary-color-text);
  opacity: 0.7;
}
.main-con-lecture-purchase-content-content {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.main-con-exam-time {
  width: 100%;
  max-width: calc(270px * var(--radio));
  display: flex;
  align-items: center;
  flex-direction: column;
  border-radius: 18px;
  margin-bottom: calc(35px * var(--radio));
  box-shadow: 0px 4px 50px 0px #1e1e1e0d;
  background-color: #fb383a40;
  padding: calc(10px * var(--radio));
}
.main-con-exam-time p {
  font-size: calc(20px * var(--radio));
  font-weight: 400;
  color: #fb383a;
  margin-bottom: 0px;
  line-height: calc(36px * var(--radio));
}
.main-con-exam-time span {
  font-size: calc(30px * var(--radio));
  font-weight: 700;
  color: #fb383a;
  margin-bottom: 0px;
  line-height: calc(54px * var(--radio));
}
.con-one-question {
  box-shadow: 0px 4px 40px 0px #1e1e1e0a;
  border: 2px solid #e6eff480;
  padding: calc(37px * var(--radio)) calc(40px * var(--radio));
  border-radius: 40px;
  margin-bottom: calc(35px * var(--radio));
}
.con-one-question > span {
  font-size: calc(18px * var(--radio));
  font-weight: 500;
  color: var(--secondary-color-text);
  opacity: 0.7;
  margin-bottom: calc(25px * var(--radio));
  display: block;
}
.con-one-question p {
  font-size: calc(20px * var(--radio));
  font-weight: 600;
  color: var(--secondary-color-text);
  margin-bottom: calc(25px * var(--radio));
}
.con-question-image {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: calc(25px * var(--radio));
}
.con-question-image img {
  width: 100%;
  max-width: calc(400px * var(--radio));
}
.con-one-answer {
  display: flex;
  align-items: center;
  padding: calc(20px * var(--radio)) calc(25px * var(--radio));
  border-radius: 20px;
  background-color: #e6eff440;
  border: 2.5px solid transparent;
  margin-bottom: calc(20px * var(--radio));
}
.con-one-answer > span {
  width: calc(35px * var(--radio));
  height: calc(35px * var(--radio));
  border-radius: 50%;
  border: 3px solid #1e1f2266;
  position: relative;
}
.con-one-answer.wrong {
  border: 2.5px solid #fb383a;
  background-color: #fb383a1a;
}
.con-one-answer.wrong > span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(20px * var(--radio));
  height: calc(20px * var(--radio));
  background-color: #fb383a;
  border-radius: 50%;
}
.con-one-answer p {
  font-size: calc(16px * var(--radio));
  font-weight: 600;
  color: var(--secondary-color-text);
  margin-bottom: 0px;
  margin: 0px calc(7.5px * var(--radio));
}
.con-one-answer p span {
  font-size: calc(16px * var(--radio));
  font-weight: 600;
  color: var(--secondary-color-text);
  margin: 0px calc(7.5px * var(--radio));
}
.con-one-answer.wrong > span {
  border: 3px solid #fb383a;
}
.con-one-answer.selected {
  border: 2.5px solid #9433dc;
  background-color: #9433dc1a;
}
.con-one-answer.selected > span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(20px * var(--radio));
  height: calc(20px * var(--radio));
  background-color: var(--main-color-theme);
  border-radius: 50%;
}
.con-one-answer.selected > span {
  border: 3px solid var(--main-color-theme);
}
.main-con-web-header-logo img {
  height: calc(70px * var(--radio));
}
.main-con-web-header-logo {
  height: 100%;
  display: flex;
  align-items: center;
}
.mian-con-web-header {
  padding: calc(50px * var(--radio)) calc(80px * var(--radio));
}
.main-con-header-web-links {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.main-con-header-web-links a {
  display: block;
  position: relative;
  font-size: calc(18px * var(--radio));
  font-weight: 600;
  color: var(--secondary-color-text);
  opacity: 0.8;
  margin: 0px calc(15px * var(--radio));
  transition: 0.3s ease-in-out;
}
.main-con-header-web-links a.active {
  color: var(--main-color-text);
  font-weight: 700;
}
.main-con-header-web-links a.active::after {
  content: "";
  position: absolute;
  bottom: calc(-20px * var(--radio));
  width: calc(20px * var(--radio));
  height: calc(4px * var(--radio));
  border-radius: 50px;
  background-color: var(--main-color-theme);
  left: 50%;
  transform: translate(-50%, 0%);
}

.main-con-header-web-links a:hover {
  color: var(--main-color-text);
  font-weight: 700;
}
.main-con-header-web-links a:hover::after {
  content: "";
  position: absolute;
  bottom: calc(-20px * var(--radio));
  width: calc(20px * var(--radio));
  height: calc(4px * var(--radio));
  border-radius: 50px;
  background-color: var(--main-color-theme);
  left: 50%;
  transform: translate(-50%, 0%);
}
.con-header-web-right-side {
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}
.login-logout-btn {
  padding: calc(21px * var(--radio)) calc(31px * var(--radio));
  background-color: #9433dc40;
  color: var(--main-color-text);
  font-weight: 700;
  border-radius: 14px;
  font-size: calc(18px * var(--radio));
}
.con-lang-btn-switch {
  width: calc(65px * var(--radio));
  height: calc(65px * var(--radio));
  border: none;
  outline: none;
  border-radius: 14px;
  background-color: #9433dc40;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px calc(15px * var(--radio));
}
.con-cart-box-header {
  width: calc(65px * var(--radio));
  height: calc(65px * var(--radio));
  border: none;
  outline: none;
  border-radius: 14px;
  background-color: #9433dc40;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.con-cart-box-header span {
  position: absolute;
  width: calc(21px * var(--radio));
  height: calc(21px * var(--radio));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 5px;
  right: 5px;
  background-color: var(--main-color-theme);
  color: white;
  font-size: calc(16px * var(--radio));
  font-weight: 700;
  border-radius: 50%;
}
.main-con-home-page-content {
  padding: calc(80px * var(--radio)) calc(80px * var(--radio)) 0px;
}
.slider-about-owl .owl-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}
.slider-about-owl .owl-nav button {
  width: calc(80px * var(--radio));
  height: calc(65px * var(--radio));
  background-color: #e6eff440 !important;
  border-radius: 20px !important;
  color: var(--main-color-text) !important;
}
.slider-about-owl .owl-nav button:hover {
  background-color: #e6eff440 !important;
  color: var(--main-color-text) !important;
}
.slider-about-owl img {
  width: 100%;
  max-height: calc(560px * var(--radio));
  border-radius: 25px;
}
.slider-about-owl .owl-dots {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translate(-50%, 0px);
}
.slider-about-owl .owl-dots span {
  width: calc(20px * var(--radio)) !important;
  height: calc(7px * var(--radio)) !important;
  background-color: #ffffff !important;
  transition: 0.3s ease-in-out;
}
.slider-about-owl .owl-dots span:hover {
  width: calc(20px * var(--radio)) !important;
  height: calc(7px * var(--radio)) !important;
  background-color: var(--main-color-theme) !important;
}
.slider-about-owl .owl-dots button.active span {
  width: calc(35px * var(--radio)) !important;
  height: calc(7px * var(--radio)) !important;
  background-color: var(--main-color-theme) !important;
}
.main-con-about-content {
  position: relative;
  width: 100%;
  height: 100%;
}
.main-con-about-content .about-content {
  position: absolute;
  top: 50%;
  left: 110px;
  width: calc(625px * var(--radio));
  height: calc(400px * var(--radio));
  border-radius: 25px;
  padding: calc(50px * var(--radio)) calc(76.5px * var(--radio));
  background-color: #ffffff99;
  transform: translate(0%, -60%);
  z-index: 22;
  backdrop-filter: blur(8px);
}
.about-content h2 {
  font-size: calc(35px * var(--radio));
  font-weight: 700;
  margin-bottom: calc(25px * var(--radio));
  line-height: calc(60px * var(--radio));
  color: var(--secondary-color-text);
}
.about-content h2 span {
  font-size: calc(35px * var(--radio));
  font-weight: 700;
  margin-bottom: calc(25px * var(--radio));
  line-height: calc(60px * var(--radio));
  color: var(--main-color-text);
}
.about-content p {
  font-size: calc(20px * var(--radio));
  font-weight: 400;
  color: var(--secondary-color-text);
  opacity: 0.7;
  margin-bottom: 0px;
  line-height: calc(40px * var(--radio));
}
.main-con-home-banner-slider-about {
  margin-bottom: calc(45px * var(--radio));
}
.main-con-one-alert-teacher {
  position: relative;
}
.main-con-one-alert-teacher > p {
  width: 100%;
  background-color: var(--main-color-theme);
  padding: calc(80px * var(--radio)) calc(46px * var(--radio));
  border-radius: 40px 40px 125px 40px;
  color: white;
  font-size: calc(20px * var(--radio));
  font-weight: 600;
  line-height: calc(40px * var(--radio));
  margin-bottom: 0px;
  text-align: center;
}
.con-alert-icon {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, -60%);
}
.con-alert-icon .con-img-alert {
  background-color: var(--main-color-theme);
  width: calc(100px * var(--radio));
  height: calc(100px * var(--radio));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 10px solid white;
}
.con-alert-icon span.right {
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: 2px;
  left: -24px;
  background-color: white;
}
.con-alert-icon span.right::after {
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-color: var(--main-color-text);
  border-top-right-radius: 20px 14px;
}
.con-alert-icon span.left {
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: 2px;
  right: -24px;
  background-color: white;
}
.con-alert-icon span.left::after {
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  background-color: var(--main-color-text);
  border-top-left-radius: 20px 14px;
}
.con-alert-icon .con-img-alert img {
  height: calc(42px * var(--radio));
}
.con-teacher-alerts h2 {
  font-size: calc(35px * var(--radio));
  font-weight: 700;
  margin-bottom: calc(100px * var(--radio));
  line-height: calc(55px * var(--radio));
  color: var(--secondary-color-text);
}
.main-con-sections h2 {
  font-size: calc(35px * var(--radio));
  font-weight: 700;
  margin-bottom: calc(45px * var(--radio));
  line-height: calc(55px * var(--radio));
  color: var(--secondary-color-text);
}
.main-con-sections-cards {
  margin-bottom: calc(120px * var(--radio));
}
.con-teacher-alerts {
  margin-bottom: calc(120px * var(--radio));
}
.main-con-my-books-card button img {
  width: calc(24px * var(--radio)) !important;
}
.slider-books-owl .owl-nav {
  position: absolute;
  right: 0px;
  top: -90px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.slider-books-owl .owl-nav button {
  width: calc(80px * var(--radio));
  height: calc(65px * var(--radio));
  background-color: #e6eff440 !important;
  border-radius: 20px !important;
  color: var(--main-color-text) !important;
}
.slider-books-owl .owl-nav button:hover {
  background-color: #e6eff440 !important;
  color: var(--main-color-text) !important;
}
.con-books-and-reviews-header h2 {
  font-size: calc(35px * var(--radio));
  font-weight: 700;
  color: var(--secondary-color-text);
  margin-bottom: calc(45px * var(--radio));
}
/* .main-con-books-and-reviews {
  margin-bottom: calc(120px * var(--radio));
} */
.main-con-web-footer {
  margin-top: calc(120px * var(--radio));
  background-color: #e6eff433;
  padding: calc(60px * var(--radio)) calc(80px * var(--radio));
  display: flex;
  flex-direction: column;
  align-items: center;
}
.con-logo-footer img {
  height: calc(80px * var(--radio));
  margin-bottom: calc(54px * var(--radio));
}
.con-links-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: calc(73px * var(--radio));
}

.con-links-footer a {
  font-size: calc(20px * var(--radio));
  font-weight: 600;
  margin: 0px calc(17px * var(--radio));
  color: var(--secondary-color-text);
}
.con-footer-web-info {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}
.con-footer-social {
  display: flex;
  align-items: flex-end;
}
.con-one-social {
  width: calc(40px * var(--radio));
  height: calc(40px * var(--radio));
  border-radius: 50%;
  margin: 0px calc(12px * var(--radio));
  background-color: var(--secondary-color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: white;
}
.con-one-social.share {
  background-color: var(--main-color-text);
}
.main-con-send-email-footer {
  display: flex;
  align-items: center;
  background-color: white;
  padding: calc(24px * var(--radio)) calc(25px * var(--radio));
  border-radius: 14px;
  min-width: 350px;
}
.main-con-send-email-footer i {
  color: var(--main-color-text);
}
.main-con-send-email-footer input {
  flex-grow: 1;
  border: none;
  outline: none;
  color: var(--secondary-color-text);
  opacity: 0.7;
  font-size: calc(16px * var(--radio));
  font-weight: 400;
}
.con-footer-web-info > p {
  font-size: calc(18px * var(--radio));
  font-weight: 400;
  color: var(--secondary-color-text);
  margin-bottom: 0px;
  opacity: 0.8;
}

.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(45px * var(--radio));
  font-weight: 700;
  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-purchase-exam-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  justify-content: center;
  flex-grow: 1;
}
.main-con-lecture-purchase-exam-result .pie {
  margin-bottom: calc(65px * var(--radio));
}
.main-con-lecture-purchase-exam-result > p {
  font-size: calc(32px * var(--radio));
  font-weight: 400;
  margin-bottom: calc(16px * var(--radio));
  color: var(--secondary-color-text);
}
.main-con-lecture-purchase-exam-result > span {
  font-size: calc(18px * var(--radio));
  font-weight: 500;
  margin-bottom: calc(16px * var(--radio));
  color: var(--secondary-color-text);
  opacity: 0.7;
  text-align: center;
}
.con-time-exam-result {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(10px * var(--radio)) calc(20px * var(--radio));
  background-color: #fb383a40;
  border-radius: 14px;
  margin-bottom: calc(100px * var(--radio));
}
.con-time-exam-result p {
  font-size: calc(18px * var(--radio));
  font-weight: 500;
  color: #fb383a;
  margin: 0px calc(10px * var(--radio));
}
.con-time-exam-result span {
  font-size: calc(25px * var(--radio));
  font-weight: 700;
  color: #fb383a;
  margin: 0px calc(10px * var(--radio));
}
.con-two-buttons-exam-result {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.con-two-buttons-exam-result button {
  border: none;
  outline: none;
  margin: 0px calc(12px * var(--radio));
  padding: calc(25px * var(--radio));
  flex-grow: 1;
  width: 20%;
  max-width: calc(301px * var(--radio));
  border-radius: 18px;
  font-weight: 700;
  font-size: calc(20px * var(--radio));
}
.con-two-buttons-exam-result button.contiune {
  background-color: var(--main-color-text);
  color: white;
}
.con-two-buttons-exam-result button.mistakes {
  background-color: #9433dc40;
  color: var(--main-color-text);
}
.content-auth-msg {
  display: none;
}
.main-con-togle-side-bar-web-header {
  display: none;
}
.main-con-profile-card-side-bar-mobile {
  display: none;
}
.main-con-toggle-profile-sidebar {
  display: none;
}
.title-profile-side-bar i {
  display: none;
}
.main-con-side-bar-mobile-web {
  display: none;
}
.lec-purchase-side-logo i {
  display: none;
}
.main-con-lecture-action-mobile-bar{
  display: none;
}
/* End Lecture & Revistions Design */
@media (max-width: 992px) {
  .row-reverse-mobile {
    flex-direction: column-reverse;
  }
  .main-con-logo-auth {
    height: fit-content;
    flex-direction: column;
    padding: 35px 20px;
  }
  .main-con-logo-auth img {
    width: 130px;
    margin-bottom: 26px;
    height: auto;
  }
  .content-auth-msg {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .content-auth-msg.two-msg {
    display: block;
    width: 100%;
  }
  .content-auth-msg p {
    display: block;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 0px;
    color: white;
  }
  .content-auth-msg.two-msg p {
    display: block;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 15px;
    color: white;
  }
  .content-auth-msg.two-msg span {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: white;
  }
  .con-welcom-msg-login {
    display: none;
  }
  .invalid-feedback {
    color: #dc3545 !important;
  }
  .main-con-input-form span {
    font-size: 14px;
  }
  .main-con-input-form input {
    font-size: 16px;
  }
  .main-con-auth-page .col-lg-7 {
    position: relative;
  }
  .mian-con-form-auth {
    padding: 40px 20px 20px;
    /* min-height: auto; */
    justify-content: flex-start;
    min-height: 55vh;
  }
  .main-con-auth-page .col-lg-7::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;
  }
  .con-submit-auth-button button {
    margin-bottom: 30px;
  }
  .terms-conditions {
    padding: 20px;
    font-size: 12px;
  }
  .email-sent-msg {
    font-size: 15px;
    line-height: 35px;
  }
  .auth-hint-msg {
    line-height: 30px;
  }
  .con-submit-auth-button {
    position: sticky;
    bottom: 0px;
    /* background-color: white; */
  }
  .con-cart-box-header {
    display: none;
  }
  .con-lang-btn-switch {
    display: none;
  }
  .login-logout-btn {
    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;
  }
  .mian-con-web-header {
    padding: 20px 20px 0px;
  }
  .main-con-lecture-details-body {
    padding: 30px 20px 80px;
  }
  .main-con-lecture-details-details > p {
    font-size: 20px;
    margin-bottom: 12px;
  }
  .main-con-web-header-logo img {
    height: 40px;
  }
  .main-con-lecture-tabs li {
    font-size: 14px;
    padding: 19px;
    border: 2.5px solid transparent;
  }
  .main-con-lecture-tabs li.active {
    border: 2.5px solid var(--main-color-theme);
  }
  .main-con-write-comment input {
    width: 40px;
  }
  .main-con-lecture-details-side-bar {
    max-width: none;
  }
  .comment-info p {
    font-size: 12px;
  }
  .comment-info span {
    font-size: 12px;
  }
  .main-con-comments-top-block span {
    font-size: 14px;
  }
  .main-con-one-comment > p {
    font-size: 14px;
  }
  .main-con-tabs-leture-details-content {
    margin-bottom: 40px;
  }
  .main-con-other-lecture-side-bar > p {
    text-align: start;
  }
  .main-con-lecture-action-mobile-bar {
    display: flex;
    align-items: center;
    padding: 17.5px 20px;
    background-color: white;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: 222;
  }
  .main-con-lecture-action-mobile-bar button {
    border: none;
    outline: none;
    flex-grow: 1;
    padding: 20px;
    border-radius: 18px;
    font-weight: 700;
    color: white;
    background-color: var(--main-color-theme);
    margin: 0px 25px;
    font-size: 14px;
  }
  .main-con-lecture-action-mobile-bar span {
    font-size: 16px;
    font-weight: 600;
    color: #00dc82;
  }
  .main-con-payment-page {
    padding: 0px 20px 10px;
    margin-top: 30px;
  }
  .main-con-payment-page > p {
    font-size: 20px;
    margin-bottom: 35px;
  }
  .main-con-tabs-ul-payment li {
    padding: 20px 10px;
  }
  .main-con-tabs-ul-payment li img {
    height: 25px;
  }
  .confirm-button-coupon button {
    margin-top: 30px;
  }
  .main-con-fawry-card > p {
    font-size: 14px;
  }
  .main-con-fawry-card button span {
    font-size: 14px;
  }
  .main-con-fawry-card > span {
    font-size: 14px;
  }
  .main-con-side-bar-setting {
    position: fixed;
    top: 0px;
    left: -100%;
    width: 100%;
    background-color: white;
    z-index: 2222;
    padding: 30px 20px;
    height: 100vh;
  }
  .main-con-side-bar-setting.open {
    left: 0%;
  }
  .main-con-progress-side-bar-setting {
    display: none;
  }
  .main-con-side-bar-setting {
    align-items: center;
    justify-content: flex-start;
    width: 100%;
  }
  .title-profile-side-bar {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
  }
  .title-profile-side-bar i {
    font-size: 25px;
    color: var(--main-color-text);
    display: block;
  }
  .main-con-toggle-profile-sidebar {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 30px;
    position: relative;
  }
  .main-con-toggle-profile-sidebar i {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #9433dc26;
    color: var(--main-color-text);
    font-size: 20px;
  }
  .title-profile-side-bar > p {
    font-size: 20px;
    flex-grow: 1;
    text-align: center;
    margin-bottom: 0px;
  }
  .main-con-side-bar-setting a {
    width: 100%;
    background-color: #e6eff440;
    padding: 18px 20px;
    border-radius: 15px;
  }
  .sub-main-con-sidebar-setting > div {
    width: 100%;
  }
  .main-con-side-bar-setting a span {
    flex-grow: 1;
  }
  .sub-main-con-sidebar-setting a i {
    color: var(--main-color-text);
    font-size: 20px;
  }
  .main-con-profile-card-side-bar-mobile {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #9433dc40;
    border-radius: 15px;
    padding: 17.5px 20px;
    margin-bottom: 90px;
  }
  .main-con-profile-card-side-bar-mobile img {
    width: 65px;
    height: 65px;
    border-radius: 50%;
  }
  .main-con-profile-card-side-bar-mobile > div {
    margin: 0px 20px;
    flex-grow: 1;
  }
  .main-con-profile-card-side-bar-mobile i {
    font-size: 20px;
    color: var(--main-color-text);
  }
  .main-con-profile-card-side-bar-mobile p {
    font-size: 14px;
    font-weight: 700;
    color: var(--secondary-color-text);
    margin-bottom: 10px;
  }
  .main-con-profile-card-side-bar-mobile span {
    font-size: 14px;
    font-weight: 500;
    color: var(--secondary-color-text);
    margin-bottom: 0px;
    opacity: 0.7;
  }
  .main-con-profile-page {
    padding: 0px 20px 20px;
  }
  .main-con-profile-page .col-12 {
    padding: 0px;
  }
  .main-con-toggle-profile-sidebar p {
    flex-grow: 1;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    color: var(--secondary-color-text);
    margin-bottom: 0px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
  }
  .main-con-table-id img {
    width: 65px;
    height: 55px;
  }
  .mian-con-table-body {
    padding: 10px 20px;
  }
  .p-0-mobile {
    padding: 0px;
  }
  .main-con-table-header {
    border-radius: 0px;
  }
  .mian-con-table-body > div:nth-child(1) {
    width: 170px !important;
  }
  .mian-con-table-body.cart > div:nth-child(1) {
    width: auto !important;
  }
  .main-con-table-header > div:nth-child(1) {
    width: 150px !important;
  }
  .main-con-table-id p {
    font-size: 12px;
  }
  .mian-con-table-body p {
    padding: 0px;
    font-size: 12px;
  }
  .mian-con-table-body p {
    padding: 0px;
  }
  .main-con-table-header p {
    white-space: nowrap;
    padding: 0px;
    font-size: 12px;
  }
  .table-date {
    padding: 0px 20px;
  }
  .main-con-questions-answers {
    padding: 0px 20px;
  }
  .main-con-write-comment-question-answer-page button {
    padding: 15px;
    font-size: 14px;
  }
  .main-con-write-comment-question-answer-page label span {
    display: none;
  }
  .main-con-write-comment-question-answer-page input {
    width: 20%;
  }
  .main-con-write-comment-question-answer-page {
    padding: 10px;
  }
  .main-con-one-comment-with-footer {
    padding: 15px 20px;
  }
  .con-question-comment-header p {
    font-size: 12px;
  }
  .con-question-comment-header span {
    font-size: 12px;
  }
  .like-comment {
    display: flex;
    align-items: center;
  }
  .comment-footer-question-page .share-count {
    display: flex;
    align-items: center;
    margin: 0px 35px;
  }
  .like-comment span {
    white-space: nowrap;
  }
  .share-count span {
    white-space: nowrap;
  }
  .main-con-delete-item-cart {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .main-con-delete-item-cart > i {
    margin-bottom: 15px;
  }
  .main-con-cart-page {
    display: flex;
    flex-direction: column;
    /* height: 82vh; */
    width: 90%;
  }
  .main-con-cart-page .main-con-table-setting {
    flex-grow: 1;
  }
  .main-con-cart-summary {
    width: 100%;
    max-width: none;
  }
  .main-con-submit-cart-button button {
    max-width: none;
  }
  .main-con-add-new-adress {
    padding: 0px 20px 20px;
  }
  .main-con-center-title-page h1 {
    font-size: 20px;
  }
  .main-con-done-page {
    padding: 0px 20px;
    min-height: 90vh;
  }
  .con-done-card p {
    font-size: 20px;
  }
  .con-done-card a {
    font-size: 14px;
  }
  .main-con-tabs-lecture-revestions li {
    font-size: 14px;
  }
  .main-con-lecture-revestions {
    padding: 0px 20px 0px;
  }
  .con-lecture-revestions-card-info p.price {
    font-size: 14px;
  }
  .con-lecture-revestions-card-info p.description {
    font-size: 16px;
  }
  .con-lecture-revestions-card-info span {
    font-size: 14px;
  }
  .main-con-my-exams-page {
    padding: 0px 20px 0px;
  }
  .main-con-complaints button {
    font-size: 14px;
  }
  .main-con-home-page-content {
    padding: 55px 20px 20px;
  }
  .main-con-about-content .about-content {
    position: relative;
    backdrop-filter: blur(0);
    background-color: white;
    transform: translate(0px, 0px);
    top: auto;
    left: auto;
    width: fit-content;
    height: fit-content;
    padding: 0px 21px 35px;
  }
  .con-links-footer {
    flex-direction: column;
  }
  .con-links-footer a {
    margin: 10px 0px;
  }
  .con-footer-web-info {
    flex-direction: column;
    align-items: center;
  }
  .main-con-web-footer {
    padding: 60px 20px;
  }
  .con-footer-social {
    margin-bottom: 34px;
  }
  .main-con-send-email-footer {
    min-width: auto;
    margin-bottom: 34px;
    width: 100%;
  }
  .main-con-one-alert-teacher > p {
    margin-bottom: 100px;
  }
  .about-content h2 {
    text-align: center;
  }
  .about-content p {
    text-align: center;
  }
  .side-bar-mobile-web-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
  }
  .side-bar-mobile-web-header img {
    height: 50px;
  }
  .side-bar-mobile-web-header button {
    width: 45px;
    height: 45px;
    border-radius: 14px;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    background-color: var(--main-color-theme);
  }
  .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-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 {
    background-color: var(--main-color-theme);
  }
  .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;
  }
  .main-con-side-bar-mobile-web-links a.active p {
    color: white;
  }
  .main-con-side-bar-mobile-web-links a span.count {
    width: 26px;
    height: 26px;
    background-color: var(--main-color-theme);
    color: white;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
  .main-con-side-bar-mobile-web-links a.active span.count {
    color: var(--main-color-theme);
  }
  .main-con-side-bar-mobile-web-links a span.lang {
    color: var(--main-color-theme);
    font-size: 14px;
    font-weight: 700;
  }
  .main-con-side-bar-mobile-web-links a.active span.lang {
    color: white;
  }
  .main-con-side-bar-mobile-web > button {
    background-color: transparent;
    display: flex;
    align-items: center;
    border: none;
    outline: none;
    padding: 10px 20px;
    font-size: 16px;
    color: #fb383a;
    font-weight: 600;
  }
  .main-con-side-bar-mobile-web button span {
    flex-grow: 1;
    margin: 0px 20px;
  }
  .main-con-side-bar-mobile-web.show {
    left: 0%;
  }
  .con-books-and-reviews-header h2 {
    font-size: 18px;
  }
  .main-con-my-books-card > p {
    font-size: 16px;
  }
  .con-book-image span {
    font-size: 16px;
  }
  .main-con-one-alert-teacher > p {
    font-size: 14px;
  }
  .con-teacher-alerts h2 {
    font-size: 18px;
  }
  .main-con-sections h2 {
    font-size: 18px;
  }
  .about-content h2 {
    font-size: 20px;
  }
  .about-content p {
    font-size: 14px;
  }
  .main-con-lecture-purchase-side-bar {
    position: fixed;
    top: 0px;
    left: 0px;
    right: -100%;
    width: 100%;
    height: 100vh;
    z-index: 2222;
    background-color: white;
    transition: 0.3s ease-in-out;
  }
  .lec-purchase-side-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 42px;
  }
  .lec-purchase-side-logo i {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--main-color-theme);
    color: white;
    border-radius: 14px;
  }
  .lec-purchase-side-logo img {
    height: 50px;
  }
  .logo-title-side-bar-lec-purchase > p {
    font-size: 20px;
  }
  .logo-title-side-bar-lec-purchase > p span {
    font-size: 20px;
  }
  .con-one-tab-lec-purchase-side.active > div p {
    margin-bottom: 0px;
  }
  .main-con-lecture-purchase-side-bar.show {
    right: 0%;
  }
  .main-con-lecture-purchase-content-header button {
    width: 45px;
    height: 45px;
    border-radius: 14px;
  }
  .main-con-lecture-purchase-content-header button img {
    width: 25px;
  }
  .main-con-lecture-purchase-content-header button i {
    color: white;
  }
  .main-con-all-content-container-lecture-purchase {
    padding: 22px 20px;
  }
  .main-con-prgress-lecture-purchase {
    flex-direction: column-reverse;
    padding: 0px 25px;
    align-items: flex-end;
  }
  .con-preogress-pregress-lecture {
    width: 100%;
    margin: 0px;
    height: 18px;
  }
  .main-con-prgress-lecture-purchase > span {
    font-size: 20px;
  }
  .main-con-center-title-lecture-purchase p {
    font-size: 20px;
  }
  .main-con-lecture-purchase-footer button {
    font-size: 14px;
  }
}
@media (max-width: 768px) {
  .p-0-mobile-only {
    padding: 0px;
  }
}