@font-face {
  font-family: Cairo;
  src: url("../fonts/Cairo-VariableFont_slnt,wght.ttf");
}
:root {
  --main-color-text: #743799;
  --main-color-theme: #743799;
  --secondary-color-text: #1e1e1e;
  --secondary-sub-color-text: #1e1e1eb3;
/*  --input-background: #e3e9e940;*/
  --input-background: #e3e9e999;
  --radio: 0.8;
}
body {
  font-family: "Cairo", Courier, monospace;
  direction: rtl;
}
/* 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;
}

/* Header Auth  Login*/
.con-header-auth-page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0px;
  padding: calc(50px * var(--radio)) calc(70px * var(--radio)) 0px;
}
.con-header-auth-page > a {
  color: var(--main-color-text);
  font-size: calc(26px * var(--radio));
  font-weight: 700;
}
.con-auth-logo img {
  width: calc(145px * var(--radio));
}
/* End Header Auth */
/* Start Auth Page */
/* .main-con-auth-page {
  padding: 20px 70px 0px;
} */
.main-con-auth-form {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
}
.main-con-auth-form h1 {
  text-align: center;
  font-size: calc(32px * var(--radio));
  font-weight: 700;
  color: var(--secondary-color-text);
  margin-bottom: calc(40px * var(--radio));
}
.main-con-auth-input {
  min-width: calc(640px * var(--radio));
  margin-bottom: calc(25px * var(--radio));
}

.main-con-auth-input span {
  font-size: calc(22px * var(--radio));
  color: var(--secondary-sub-color-text);
  margin-bottom: calc(10px * var(--radio));
  display: block;
  font-weight: 600;
}
.main-con-auth-input input {
  border-radius: 10px;
  background-color: var(--input-background);
  border: none;
  outline: none;
  padding: calc(23px * var(--radio));
  width: 100%;
  direction: rtl;
}
.main-con-auth-input label {
  border-radius: 10px;
  background-color: var(--input-background);
  padding: calc(23px * var(--radio));
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-con-auth-input label > div {
  display: flex;
  align-items: center;
}
.main-con-auth-input label p {
  font-size: calc(18px * var(--radio));
  color: var(--main-color-text);
  font-weight: 700;
  margin-bottom: 0px;
}

.main-con-auth-input label i {
  font-size: calc(22px * var(--radio));
  color: var(--main-color-text);
  font-weight: 700;
  margin: 0px 10px;
}
.main-con-auth-input select {
  border-radius: 10px;
  background-color: var(--input-background);
  border: none;
  outline: none;
  padding: calc(23px * var(--radio));
  width: 100%;
}
.main-con-auth-input > div {
  position: relative;
}
.main-con-auth-input > div > i {
  color: var(--main-color-text);
  font-size: calc(22px * var(--radio));
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translate(0%, -50%);
}
.main-con-auth-input > div > span {
  color: var(--main-color-text);
  font-size: calc(22px * var(--radio));
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translate(0%, -50%);
  font-weight: 700;
}
.main-con-forget-password-a a {
  font-size: calc(22px * var(--radio));
  color: var(--main-color-text);
  font-weight: 700;
  margin-top: calc(15px * var(--radio));
  display: block;
}
.main-con-auth-form form button {
  background-color: var(--main-color-theme);
  border: none;
  outline: none;
  padding: calc(19px * var(--radio));
  width: 100%;
  border-radius: 10px;
  font-size: calc(20px * var(--radio));
  color: white;
  font-weight: 700;
  max-width: calc(310px * var(--radio));
  margin: calc(40px * var(--radio)) auto calc(40px * var(--radio));
}
.main-con-havenot-accont {
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-con-havenot-accont p {
  margin-bottom: 0px;
  font-size: calc(22px * var(--radio));
  color: var(--secondary-sub-color-text);
  font-weight: 600;
  margin-left: 5px;
}
.main-con-havenot-accont a {
  margin-bottom: 0px;
  font-size: calc(22px * var(--radio));
  color: var(--main-color-text);
  font-weight: 700;
  margin-left: 8px;
}
/* End Auth Page Login */
/* Start Auth Page Register */
.main-con-auth-form-register {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
  padding: 0px calc(70px * var(--radio));
  margin-top: calc(32px * var(--radio));
}
.con-header-link-auth-with-text {
  display: flex;
  align-items: center;
}
.con-header-link-auth-with-text p {
  margin-bottom: 0px;
/*  font-size: calc(22px * var(--radio));*/
  color: var(--secondary-sub-color-text);
  margin-left: 10px;
  font-weight: 500;
}
.con-lec-purchase-logo-close-sidebar {
  display: none;
}
.con-header-link-auth-with-text a {
  color: var(--main-color-text);
  font-size: calc(26px * var(--radio));
  font-weight: 700;
}
.parent-register-form {
  flex-grow: 1;
  display: flex;
  justify-content: center;
}
.con-register-progress {
  display: flex;
  flex-direction: column;
  height: calc(475px * var(--radio));
  justify-content: space-between;
  overflow: hidden;
}
.con-register-progress div i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #e3e9e9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: white;
}
.con-register-progress div span {
  width: calc(40px * var(--radio));
  height: calc(40px * var(--radio));
  border-radius: 50%;
  background-color: #e3e9e9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: white;
}
.con-register-progress div p {
  font-size: calc(22px * var(--radio));
  color: var(--secondary-sub-color-text);
  font-weight: 700;
  margin: 0px 10px;
  transform: translate(-100px, 0px);
  transition: 0.4s ease-in-out;
}
.con-register-progress div {
  display: flex;
  align-items: center;
}
.con-register-progress > span.seprator {
  width: 5px;
  flex-grow: 1;
  background-color: #e3e9e9;
  border-radius: 50px;
  margin: 12px 11px;
}
.con-register-progress div.active p {
  transform: translate(0px);
  color: var(--main-color-text);
}
.con-register-progress div.active i {
  background-color: var(--main-color-theme);
}
.con-register-progress div.done i {
  background-color: var(--main-color-theme);
}
.con-register-progress > span.seprator.done {
  background-color: var(--main-color-theme);
}
.parent-register-form form h1 {
  text-align: center;
  font-size: calc(32px * var(--radio));
  font-weight: 700;
  color: var(--secondary-color-text);
  margin-bottom: calc(40px * var(--radio));
}
.title-reg-page {
  display: none;
}
.main-con-auth-input.no-min-w {
  min-width: auto;
}
.no-min-w > div {
  margin-left: 10px;
}
.con-two-inputs-register {
  max-width: 600px;
}

.pre-next-buttons {
  width: 100%;
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pre-next-buttons .next {
  background-color: var(--main-color-theme);
  border: 2px solid transparent;
  outline: none;
  padding: calc(19px * var(--radio));
  width: 100%;
  border-radius: 10px;
  font-size: calc(22px * var(--radio));
  color: white;
  font-weight: 700;
  max-width: calc(310px * var(--radio));
  margin: calc(40px * var(--radio)) auto calc(40px * var(--radio));
}
.pre-next-buttons .pre {
  background-color: transparent;
  border: 2px solid var(--main-color-theme);
  outline: none;
  padding: calc(18px * var(--radio));
  width: 100%;
  border-radius: 10px;
  font-size: calc(22px * var(--radio));
  color: var(--main-color-theme);
  font-weight: 700;
  max-width: calc(310px * var(--radio));
  margin: calc(40px * var(--radio)) auto calc(40px * var(--radio));
}
.parent-register-form form {
  width: 100%;
  max-width: 600px;
}

.register_steps {
  overflow: hidden;
}
#con-unselect-image {
  display: none;
  position: relative;
}
.con-unselect-image i {
  position: absolute;
  top: -10px;
  right: -10px;
  margin: 0px !important;
  color: #ff4b85 !important;
}
.main-con-info-card-register {
  background-color: var(--input-background);
  padding: 13px;
  border-radius: 10px;
  margin-bottom: 12px;
}
.main-con-info-card-register .number {
  display: block;
  color: var(--main-color-text);
  font-weight: 700;
  font-size: calc(22px * var(--radio));
}
.main-con-info-card-register .title {
  display: block;
  color: var(--secondary-color-text);
  font-weight: 700;
  font-size: calc(20px * var(--radio));
  margin-bottom: 15px;
}
.main-con-info-card-register p {
  display: block;
  margin-bottom: 5px;
  color: var(--secondary-sub-color-text);
  font-weight: 500;
  line-height: calc(32px * var(--radio));
  font-size: calc(18px * var(--radio));
}

.con-unselect-image img {
  height: 80px;
}
.step4 > p {
  font-size: calc(22px * var(--radio));
  color: var(--secondary-sub-color-text);
  font-weight: 600;
  margin-bottom: 10px;
}
.accept-terms-conditions {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.accept-terms-conditions i {
  width: 20px;
  height: 20px;
  border: 2px solid var(--main-color-theme);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 11px;
  color: transparent;
}
.accept-terms-conditions p {
  font-weight: 700;
  color: var(--secondary-color-text);
  margin: 0px 10px;
  font-size: calc(18px * var(--radio));
}
.con-accept-terms-and-conditions > input:checked + label i {
  background-color: var(--main-color-theme);
  color: white;
}
/* End Auth Page Register */
/* Start OTP Auth Page */
.main-con-auth-form form > p {
  text-align: center;
  font-size: 15px;
  color: var(--secondary-sub-color-text);
  font-weight: 600;
  margin-bottom: 20px;
}
.main-con-auth-form form > p span {
  font-size: 15px;
  color: var(--secondary-sub-color-text);
  font-weight: 700;
  margin: 0px 5px;
}
.main-con-inputs-otp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 400px;
}
.main-con-inputs-otp input {
  border: none;
  outline: none;
  background-color: var(--input-background);
  width: 60px;
  height: 70px;
  border-radius: 10px;
  text-align: center;
  font-size: 30px;
}
.main-con-resend-code {
  text-align: center;
  margin-top: 30px;
}
.main-con-resend-code p {
  font-size: calc(22px * var(--radio));
  color: var(--secondary-sub-color-text);
  font-weight: 600;
  margin-bottom: 15px;
}
.main-con-resend-code p span {
  color: var(--main-color-text);
  margin: 0px 5px;
  font-weight: 700;
  font-size: calc(22px * var(--radio));
}
.main-con-auth-form form button:disabled {
  background-color: var(--input-background);
  color: var(--secondary-color-text);
}
/* End OTP Auth Page */
/*Start Guest Page  */

.main-con-choose-your-educational-level {
  max-width: calc(950px * var(--radio));
  margin: calc(14px * var(--radio)) auto calc(80px * var(--radio));
}
.main-con-choose-your-educational-level h1 {
  font-size: calc(32px * var(--radio));
  text-align: center;
  font-weight: 700;
  margin-bottom: calc(30px * var(--radio));
  color: var(--secondary-color-text);
}
.main-con-educational-level {
  width: 100%;
  margin: auto;
  background-color: var(--input-background);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 15px;
}
.main-con-educational-level img {
  width: 100%;
  max-height: 100%;
}
.main-con-content-guest-page {
  padding: calc(14px * var(--radio)) calc(200px * var(--radio));
  margin-bottom: 35px;
}
.main-con-about-block .about-title {
  font-size: calc(32px * var(--radio));
  font-weight: 700;
  margin-bottom: 25px;
  color: var(--secondary-color-text);
}
.main-con-about-block .about-text {
  font-size: calc(18px * var(--radio));
  color: var(--secondary-sub-color-text);
  font-weight: 600;
  margin-bottom: 20px;
  line-height: calc(33px * var(--radio));
}
.con-reda-info-boxes {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
.con-reda-info-boxes > div {
  background-color: var(--input-background);
  padding: 15px 20px;
  margin-left: 20px;
  width: 23%;
  min-width: calc(200px * var(--radio));
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
}
.con-reda-info-boxes > div span {
  font-size: calc(24px * var(--radio));
  font-weight: 700;
  margin-bottom: 5px;
  line-height: calc(44px * var(--radio));
}
.con-reda-info-boxes > div p {
  font-size: calc(18px * var(--radio));
  font-weight: 600;
  margin-bottom: 0px;
  line-height: calc(33px * var(--radio));
  color: var(--secondary-sub-color-text);
}
.con-reda-social-links {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 600px;
}
.con-reda-social-links a {
  margin: 0px 10px;
}
.main-con-about-teacher-image img {
  position: absolute;
  top: -60px;
  right: -80px;
  height: calc(530px * var(--radio));
  z-index: -1;
}
.main-con-about-teacher-image {
  position: relative;
  width: 100%;
  height: 100%;
}
.main-con-students-reviews {
  background-color: var(--input-background);
  padding: calc(45px * var(--radio));
  position: relative;
}
.con-title-of-review-students {
  text-align: center;
  margin-bottom: 30px;
}
.con-title-of-review-students h2 {
  font-size: calc(32px * var(--radio));
  color: var(--secondary-color-text);
  font-weight: 700;
  margin-bottom: calc(5px * var(--radio));
  line-height: calc(60px * var(--radio));
}
.con-title-of-review-students p {
  font-size: calc(22px * var(--radio));
  color: var(--secondary-sub-color-text);
  font-weight: 600;
  margin-bottom: 0px;
  line-height: calc(41px * var(--radio));
}
.main-con-right-review-carosal {
  width: 100%;
  height: 100%;
  position: relative;
}
.main-con-one-review {
  background-color: white;
  padding: calc(53px * var(--radio));
  border-radius: 10px;
  position: relative;
  max-width: calc(800px * var(--radio));
  margin: 50px auto 0px;
}
.main-con-one-review > img {
  position: absolute;
  width: calc(80px * var(--radio)) !important;
  top: -20px;
  left: 50%;
  transform: translate(-50%, -50%);
}
.main-con-one-review > p {
  font-size: calc(18px * var(--radio));
  color: var(--secondary-sub-color-text);
  text-align: center;
  font-weight: 600;
  line-height: calc(33px * var(--radio));
  margin-bottom: 0px;
}
.main-con-one-review > p span {
  margin: 0px 10px;
}
.main-con-one-review > p span img {
  width: auto !important;
  display: inline-block !important;
}
.main-con-left-review-carosal {
  position: relative;
  width: 100%;
  height: 100%;
}
.main-con-left-review-carosal img:nth-child(1) {
  position: absolute;
  top: 110px;
  right: 50px;
}
.main-con-left-review-carosal img:nth-child(2) {
  position: absolute;
  bottom: 20px;
  left: 100px;
}
.main-con-left-review-carosal {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  max-width: 260px;
}
.main-con-right-review-carosal {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  max-width: 260px;
}
.main-con-right-review-carosal img:nth-child(1) {
  position: absolute;
  top: 110px;
  left: 50px;
}
.main-con-right-review-carosal img:nth-child(2) {
  position: absolute;
  bottom: 20px;
  right: 100px;
}
.student-review-carousel:not(:has(.owl-nav.disabled)) .owl-nav {
  display: flex !important;
  width: 100px;
  justify-content: space-between;
  align-items: center;
  margin: 10px auto;
}
.student-review-carousel .owl-nav i {
  font-size: 20px;
  color: var(--main-color-text);
}
.student-review-carousel .owl-nav [class*="owl-"]:hover {
  background: transparent !important;
  color: var(--secondary-sub-color-text) !important;
  text-decoration: none !important;
}

.student-review-carousel .owl-theme .owl-nav .disabled {
  opacity: 0.5;
}
.bouquet-cards-carousel .item {
  padding: 20px 0px;
}

.bouquet-cards-carousel:not(:has(.owl-nav.disabled)) .owl-nav {
  display: flex !important;
  width: 100px;
  justify-content: space-between;
  align-items: center;
  margin: calc(73px * var(--radio)) auto calc(55px * var(--radio));
}
.bouquet-cards-carousel .owl-nav i {
  font-size: 20px;
  color: var(--main-color-text);
}
.bouquet-cards-carousel .owl-nav [class*="owl-"]:hover {
  background: transparent !important;
  color: var(--secondary-sub-color-text) !important;
  text-decoration: none !important;
}

.bouquet-cards-carousel .owl-theme .owl-nav .disabled {
  opacity: 0.5;
}

.customize-carosal-arrow:not(:has(.owl-nav.disabled)) .owl-nav {
  display: flex !important;
  width: 100px;
  justify-content: space-between;
  align-items: center;
  margin: calc(73px * var(--radio)) auto calc(55px * var(--radio));
}
.customize-carosal-arrow .owl-nav i {
  font-size: 20px;
  color: var(--main-color-text);
}
.customize-carosal-arrow .owl-nav [class*="owl-"]:hover {
  background: transparent !important;
  color: var(--secondary-sub-color-text) !important;
  text-decoration: none !important;
}

.customize-carosal-arrow .owl-theme .owl-nav .disabled {
  opacity: 0.5;
}
.main-con-lecture-purchase-content .main-con-timer-exam {
  display: none;
}
/*End Guest Page  */
/* Start Home Page */
.main-con-content-side-bar {
  display: flex;
}
.main-con-side-bar {
  height: 100vh;
  background-color: white;
  padding: calc(60px * var(--radio)) calc(70px * var(--radio));
  display: flex;
  align-items: center;
  flex-direction: column;
  width: calc(340px * var(--radio));
  position: sticky;
  top: 0px;
  transition: 0.5s ease-in-out;
}
.main-con-side-bar-student-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 60px;
}
.main-con-side-bar-student-info img.student-image-side-bar {
  width: calc(80px * var(--radio));
  height: calc(80px * var(--radio));
  border-radius: 50%;
}
.main-con-side-bar-student-info img.bar-code-side-bar {
  width: calc(170px * var(--radio));
}
.main-con-side-bar-student-info > p {
  font-size: calc(18px * var(--radio));
  font-weight: 700;
  color: var(--main-color-text);
  margin-bottom: 0px;
  line-height: calc(33px * var(--radio));
}
.main-con-side-bar-student-info > span.student-side-bar-edu-level {
  font-size: calc(18px * var(--radio));
  font-weight: 500;
  color: var(--secondary-sub-color-text);
  line-height: calc(33px * var(--radio));
  margin-bottom: calc(20px * var(--radio));
}
.main-con-side-bar-student-info > span.studen-side-bar-id {
  font-size: calc(14px * var(--radio));
  font-weight: 700;
  color: var(--secondary-sub-color-text);
  line-height: calc(26px * var(--radio));
}
.main-con-side-bar-links {
  flex-grow: 1;
  margin-bottom: 20px;
  width: 100%;
  overflow-y: auto;
  min-height: calc(100vh - 350px);
}
.main-con-side-bar-links a > div {
  display: flex;
  align-items: center;
}
.main-con-side-bar-links a i {
  color: var(--main-color-text);
  display: none;
  font-size: 19px;
}
.main-con-side-bar-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(20px * var(--radio));
}
.main-con-side-bar-links a.active p {
  color: var(--main-color-text);
  font-weight: 700;
}
.main-con-side-bar-links a p {
  margin: 0px 10px;
  color: var(--secondary-color-text);
  font-size: calc(22px * var(--radio));
}
.main-con-log-out-footer-side-bar {
  width: 100%;
}
.main-con-log-out-footer-side-bar button {
  background-color: transparent;
  color: var(--main-color-text);
  font-size: calc(22px * var(--radio));
  font-weight: 700;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  padding: 0px;
}
.main-con-log-out-footer-side-bar button p {
  margin: 0px 10px;
}
.main-con-home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: calc(45px * var(--radio)) calc(65px * var(--radio)) 0px;
}
.main-con-home-header img.logo-header-home {
  width: calc(110px * var(--radio));
}
.main-con-content {
  flex-grow: 1;
  padding: 0px 0px 0px;
  max-width: calc(100% - calc(340px * var(--radio)));
}
.con-welcome-msg {
  display: flex;
  align-items: center;
}
.con-welcome-msg p {
  margin-bottom: 0px;
  font-size: calc(26px * var(--radio));
  color: var(--secondary-color-text);
  line-height: calc(48px * var(--radio));
  font-weight: 700;
}
.con-welcome-msg span {
  margin-bottom: 0px;
  font-size: calc(26px * var(--radio));
  color: var(--main-color-text);
  line-height: calc(48px * var(--radio));
  font-weight: 600;
}
.con-welcome-msg img {
  width: 40px;
  margin: 0px 10px;
}
.main-con-header-icons-home {
  display: flex;
  align-items: center;
}
.main-con-header-icons-home > div {
  position: relative;
  margin: 0px 10px;
}
.main-con-header-icons-home > div span {
  position: absolute;
  top: -5px;
  right: -4px;
  z-index: 12;
  background-color: var(--main-color-theme);
  width: calc(22px * var(--radio));
  height: calc(22px * var(--radio));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
  font-size: calc(12px * var(--radio));
  border-radius: 50%;
}
.main-con-student-pref {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
  margin-bottom: calc(50px * var(--radio));

  padding: 0px calc(65px * var(--radio));
}
.main-con-student-pref > div {
  width: 30%;
  padding: calc(20px * var(--radio));
  border-radius: 14px;
  display: flex;
  align-items: center;
  max-width: 350px;
}
.main-con-student-pref > div:nth-child(1) {
  background-color: #ffa8001a;
}
.main-con-student-pref > div:nth-child(1) .con-icon-pref {
  background-color: #ffa800;
}
.main-con-student-pref > div:nth-child(2) {
  background-color: #63d2f11a;
}
.main-con-student-pref > div:nth-child(2) .con-icon-pref {
  background-color: #63d2f1;
}
.main-con-student-pref > div:nth-child(3) {
  background-color: #ff4b851a;
}
.main-con-student-pref > div:nth-child(3) .con-icon-pref {
  background-color: #ff4b85;
}
.main-con-student-pref > div .con-icon-pref {
  width: calc(66px * var(--radio));
  height: calc(66px * var(--radio));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-con-student-pref > div .con-icon-pref img {
  width: 30px;
}
.main-con-student-pref > div .content-of-pref {
  margin: 0px 15px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main-con-student-pref > div .content-of-pref span {
  font-size: calc(22px * var(--radio));
  line-height: calc(40px * var(--radio));
  font-weight: 700;
  color: var(--secondary-color-text);
}
.main-con-student-pref > div .content-of-pref p {
  font-size: calc(18px * var(--radio));
  line-height: calc(33px * var(--radio));
  font-weight: 600;
  color: var(--secondary-sub-color-text);
  margin-bottom: 0px;
}
.title-of-page {
  font-size: calc(26px * var(--radio));
  line-height: calc(48px * var(--radio));
  font-weight: 700;
  color: var(--secondary-color-text);
  text-align: center;
  margin-bottom: calc(30px * var(--radio));
}
.main-con-latest-lectures-card-one {
  background-color: white;
  box-shadow: 0px 4px 50px 0px #1e1e1e0d;
  border-radius: 14px;
  padding: calc(20px * var(--radio));
  width: 100%;
}
.con-image-latest-lecture-card {
  width: 100%;
  border-radius: 14px;
  max-height: 230px;
  overflow: hidden;
  margin-bottom: calc(8px * var(--radio));
}
.con-image-latest-lecture-card img {
  width: 100%;
}
.main-con-latest-lectures-card-one > span {
  font-size: calc(18px * var(--radio));
  font-weight: 600;
  color: var(--secondary-color-text);
  opacity: 0.6;
  line-height: calc(33px * var(--radio));
  margin-bottom: calc(8px * var(--radio));
  display: block;
}
.main-con-latest-lectures-card-one > p a {
  font-size: calc(22px * var(--radio));
  font-weight: 700;
  color: var(--secondary-color-text);
  line-height: calc(39px * var(--radio));
  margin-bottom: calc(20px * var(--radio));
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box !important;
  min-height: 70px;
}
.main-con-latest-lectures-card-one > a {
  font-size: calc(22px * var(--radio));
  font-weight: 700;
  color: #21c87a;
  line-height: calc(41px * var(--radio));
  display: block;
  text-align: center;
}
.main-con-latest-lectures-cards {
  margin-bottom: calc(45px * var(--radio));
}
.see-all-button-home {
  display: flex;
  align-items: center;
  justify-content: center;
}
.see-all-button-home a {
  font-size: calc(20px * var(--radio));
  font-weight: 700;
  color: white;
  line-height: calc(37px * var(--radio));
  padding: calc(19px * var(--radio));
  min-width: 310px;
  border-radius: 10px;
  background-color: var(--main-color-theme);
  text-align: center;
}
.main-con-latest-lecture-home {
  margin-bottom: calc(60px * var(--radio));
  padding: 0px calc(65px * var(--radio));
}
.main-con-one-bouquet-card {
  background-color: white;
  box-shadow: 0px 4px 50px 0px #1e1e1e0d;
  border-radius: 14px;
  padding: calc(20px * var(--radio));
  width: 100%;
}
.con-image-bouquet-card {
  width: 100%;
  border-radius: 14px;
  max-height: 170px;
  overflow: hidden;
  margin-bottom: calc(8px * var(--radio));
}
.con-image-bouquet-card img {
  width: 100%;
}
.main-con-one-bouquet-card > p a {
  font-size: calc(18px * var(--radio));
  font-weight: 700;
  color: var(--secondary-color-text);
  line-height: calc(32px * var(--radio));
  text-align: center;
  margin-bottom: calc(19px * 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-bouquet-card span {
  display: block;
  text-align: center;
  font-size: calc(18px * var(--radio));
  font-weight: 600;
  color: var(--secondary-color-text);
  line-height: calc(33px * var(--radio));
  opacity: 0.7;
  margin-bottom: calc(5px * var(--radio));
}
.main-con-one-bouquet-card > a {
  font-size: calc(22px * var(--radio));
  font-weight: 700;
  color: #21c87a;
  line-height: calc(41px * var(--radio));
  display: block;
  text-align: center;
}
.main-con-bouquets-monlthly-block-home {
  padding: calc(24px * var(--radio)) calc(65px * var(--radio));
  background-color: #e3e9e926;
}
.main-con-title-with-description {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: calc(42px * var(--radio));
}
.main-con-title-with-description p {
  font-size: calc(26px * var(--radio));
  color: var(--secondary-color-text);
  font-weight: 700;
  line-height: calc(48px * var(--radio));
}
.main-con-title-with-description span {
  font-size: calc(22px * var(--radio));
  color: var(--secondary-color-text);
  font-weight: 600;
  line-height: calc(41px * var(--radio));
  opacity: 0.6;
}
.con-one-book-card {
  background-color: white;
  box-shadow: 0px 4px 50px 0px #1e1e1e0d;
  border-radius: 14px;
  padding: calc(20px * var(--radio));
  width: 100%;
}
.con-one-card-book-image {
  width: 100%;
  border-radius: 14px;
  max-height: 277px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: calc(15px * var(--radio));
  position: relative;
}
.con-one-card-book-image > img {
  width: 70%;
}
.con-one-card-book-image span {
  position: absolute;
  top: 0px;
  right: 0px;
  width: calc(65px * var(--radio));
  height: calc(55px * var(--radio));
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e3e9e940;
  border-radius: 8px;
}
.con-one-card-book-image span.active {
  background-color: #74379940;
}
.con-one-book-card > p a {
  font-size: calc(20px * var(--radio));
  font-weight: 700;
  color: var(--secondary-color-text);
  line-height: calc(37px * var(--radio));
  margin-bottom: calc(20px * var(--radio));
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box !important;
}
.con-one-book-card > a {
  font-size: calc(22px * var(--radio));
  font-weight: 700;
  color: #21c87a;
  line-height: calc(41px * var(--radio));
  display: block;
  text-align: center;
}
.main-con-books-block-home {
  padding: calc(55px * var(--radio)) calc(65px * var(--radio));
}
.main-con-all-books-card {
  margin-bottom: calc(25px * var(--radio));
}
.con-title-right {
  font-size: calc(26px * var(--radio));
  line-height: calc(48px * var(--radio));
  color: var(--secondary-color-text);
  font-weight: 700;
  margin-bottom: calc(25px * var(--radio));
  padding: 0px 20px;
}
.main-con-content .main-con-about-block {
  padding: 0px calc(65px * var(--radio));
}
/* End Home Page */
/* Start Noti Page */
.main-con-one-notification-card {
  display: flex;
  align-items: center;
  background-color: #e3e9e940;
  padding: calc(25px * var(--radio));
  border-radius: 14px;
  margin-bottom: calc(15px * var(--radio));
}
.main-con-one-notification-card > img {
  width: calc(80px * var(--radio));
  height: calc(65px * var(--radio));
  border-radius: 11px;
}
.noti-content {
  flex-grow: 1;
  margin: 0px 15px;
  width: 30%;
}
.noti-content p {
  font-size: calc(18px * var(--radio));
  font-weight: 700;
  line-height: calc(33px * var(--radio));
  color: var(--secondary-color-text);
  margin-bottom: 3px;
}
.noti-content span {
  font-size: calc(18px * var(--radio));
  font-weight: 600;
  line-height: calc(33px * var(--radio));
  color: var(--secondary-color-text);
  margin-bottom: 3px;
  opacity: 0.7;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  display: block;
}
.noti-info p {
  font-size: calc(18px * var(--radio));
  font-weight: 600;
  line-height: calc(33px * var(--radio));
  color: var(--secondary-color-text);
  margin-bottom: 3px;
  opacity: 0.7;
}
.noti-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.main-con-one-notification-card.un-read {
  background-color: #74379926;
}
.main-con-one-notification-card.un-read .noti-info span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--main-color-theme);
}
.main-con-day-notifications > span {
  font-size: calc(22px * var(--radio));
  font-weight: 600;
  color: var(--secondary-color-text);
  opacity: 0.6;
  line-height: calc(41px * var(--radio));
  display: block;
  margin-bottom: calc(10px * var(--radio));
}
.main-con-day-notifications {
  margin-bottom: calc(40px * var(--radio));
}
.main-con-all-notifications {
  padding: calc(30px * var(--radio)) calc(65px * var(--radio));
}
.main-con-title-h1-page h1 {
  text-align: center;
  font-size: calc(32px * var(--radio));
  font-weight: 700;
  line-height: calc(59px * var(--radio));
  margin-bottom: calc(25px * var(--radio));
  font-weight: 700;
}
/* End Noti Page */
/* Start Bouquets Page */
.main-con-all-bouqouts-cards-page {
  padding: calc(30px * var(--radio)) calc(65px * var(--radio));
}
.main-con-all-bouqouts-cards-page .main-con-one-bouquet-card {
  margin-bottom: 24px;
}
/* End Bouquets Page */
/* Start Lecture Show Page */

.con-lecture-image-details {
  width: 100%;
  max-height: 450px;
  overflow: hidden;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: calc(20px * var(--radio));
}
.con-lecture-image-details img {
  width: 100%;
}
.main-con-lecture-details-page {
  padding: calc(30px * var(--radio)) calc(65px * var(--radio));
}
.con-lecture-title-action-buy {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.con-lecture-title-action-buy p {
  flex-grow: 1;
  width: 50%;
  max-width: 450px;
  font-size: calc(24px * var(--radio));
  font-weight: 700;
  line-height: calc(44px * var(--radio));
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box !important;
}
.con-lecture-title-action-buy button {
  width: 50%;
  flex-grow: 1;
  max-width: 220px;
  padding: calc(19px * var(--radio));
  font-size: calc(20px * var(--radio));
  color: var(--main-color-text);
  font-weight: 700;
  line-height: calc(37px * var(--radio));
  border: none;
  outline: none;
  border-radius: 14px;
  background-color: #74379940;
}
.con-lecture-title-action-buy {
  margin-bottom: calc(45px * var(--radio));
}
.main-con-lecture-details-info-blocks {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(50px * var(--radio));
}
.main-con-lecture-details-info-blocks div {
  width: 20%;
  padding: calc(20px * var(--radio));
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 14px;
  background-color: #e3e9e940;
}
.main-con-lecture-details-info-blocks div img {
  margin-bottom: 7px;
}
.main-con-lecture-details-info-blocks div p {
  font-size: calc(22px * var(--radio));
  font-weight: 700;
  line-height: calc(41px * var(--radio));
  margin-bottom: 0px;
  color: var(--secondary-color-text);
}
.main-con-lecture-details-info-blocks div p.price {
  color: #21c87a;
}
.main-con-one-curclim {
  background-color: #e3e9e940;
  border-radius: 14px;
  margin-bottom: calc(20px * var(--radio));
  padding: calc(25px * var(--radio));
}
.con-one-curc {
  padding: 10px 0px;
}
.main-con-one-curclim.close .main-con-curc-bottom {
  display: none;
}
.main-con-curc-top {
  display: flex;
  align-items: center;
}
.con-one-curc {
  display: flex;
  align-items: center;
}
.con-one-curc p {
  margin: 0px 20px !important;
  font-size: calc(18px * var(--radio)) !important;
  color: var(--secondary-color-text) !important;
}
.main-con-one-curclim span {
  line-height: calc(48px * var(--radio));
  font-size: calc(26px * var(--radio));
  font-weight: 700;
  color: var(--secondary-color-text);
  opacity: 0.5;
  pointer-events: none;
}
.con-one-curc span {
  font-size: calc(15px * var(--radio));
}
.main-con-one-curclim p {
  line-height: calc(41px * var(--radio));
  font-size: calc(22px * var(--radio));
  color: var(--main-color-text);
  font-weight: 700;
  margin: 0px calc(35px * var(--radio));
  flex-grow: 1;
  pointer-events: none;
}
.main-con-one-curclim i {
  font-size: 18px;
  color: var(--main-color-text);
  pointer-events: none;
}
.con-title-and-see-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(24px * var(--radio));
}
.con-title-and-see-all p {
  font-size: calc(26px * var(--radio));
  color: var(--secondary-color-text);
  font-weight: 700;
  margin-bottom: 0px;
  line-height: calc(48px * var(--radio));
}
.con-title-and-see-all a {
  font-size: calc(20px * var(--radio));
  color: var(--main-color-text);
  font-weight: 700;
  margin-bottom: 0px;
  line-height: calc(37px * var(--radio));
}
.main-con-lecture-details-curclim {
  margin-bottom: calc(80px * var(--radio));
}
.change-image-main-con {
  display: flex;
  align-items: flex-end;
  margin-bottom: calc(25px * var(--radio));
}
.con-selected-image {
  position: relative;
}
.con-selected-image > img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
}
.con-selected-image label {
  position: absolute;
  bottom: 0px;
  right: -20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-con-select-avatar {
  display: flex;
  align-items: center;
  margin: 0px calc(28px * var(--radio));
}
.con-one-avatar {
  margin: 0px calc(10px * var(--radio));
}
.con-one-avatar label img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.main-con-setting-page-profile {
  padding: calc(30px * var(--radio)) calc(65px * var(--radio));
}
.con-one-avatar input:checked + label {
  border-radius: 50%;
  border: 3px solid var(--main-color-theme);
}
.main-con-setting-page-profile .select-image-hint {
  font-size: calc(22px * var(--radio));
  line-height: calc(41px * var(--radio));
  font-weight: 600;
  color: var(--secondary-color-text);
  opacity: 0.7;
  margin-bottom: calc(10px * var(--radio));
}
.main-con-form-setting,
.main-con-form-setting .con-two-inputs-register {
  max-width: calc(900px * var(--radio));
}
.main-con-form-setting button {
  background-color: var(--main-color-theme);
  border: none;
  outline: none;
  padding: calc(19px * var(--radio));
  width: 100%;
  border-radius: 10px;
  font-size: calc(20px * var(--radio));
  color: white;
  font-weight: 700;
  max-width: calc(310px * var(--radio));
  margin: calc(40px * var(--radio)) auto calc(40px * var(--radio));
}
.main-con-topics-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(30px * var(--radio)) calc(65px * var(--radio));
}
.main-con-topics-page .main-con-form-setting {
  width: 100%;
}
.main-con-payment-page {
  padding: calc(30px * var(--radio)) calc(65px * var(--radio));
}
.main-con-payment-page table {
  border-collapse: separate;
  border-spacing: 0px calc(15px * var(--radio));
  border-collapse: separate;
  width: 100%;
  margin-bottom: calc(50px * var(--radio));
}
.con-one-payment-method img {
  height: 35px;
}
.main-con-payment-page table thead tr th {
  background-color: #1e1e1e;
  color: white;
  padding: calc(25px * var(--radio));
  font-size: calc(20px * var(--radio));
  font-weight: 700;
  line-height: calc(37px * var(--radio));
}
.main-con-payment-page table tr:first-child th:first-child {
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}
.main-con-payment-page table tr:first-child th:last-child {
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}
.main-con-payment-page table tbody tr td {
  background-color: #e3e9e940;
  color: var(--secondary-sub-color-text);
  padding: calc(25px * var(--radio));
  font-size: calc(18px * var(--radio));
  font-weight: 600;
  line-height: calc(37px * var(--radio));
}
.main-con-payment-page table tr td:first-child {
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}
.main-con-payment-page table tr td:last-child {
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}
.con-lecture-in-tabel {
  display: flex;
  align-items: center;
}
.con-lecture-in-tabel img {
  height: calc(65px * var(--radio));
  border-radius: 14px;
  width: calc(80px * var(--radio));
}
.con-lecture-in-tabel p {
  color: var(--secondary-color-text);
  font-weight: 700;
  line-height: calc(33px * var(--radio));
  margin: 0px calc(20px * var(--radio));
  font-size: calc(18px * var(--radio));
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 250px;
}
.main-con-payment-page table tr td .price {
  font-size: calc(20px * var(--radio));
  line-height: calc(37px * var(--radio));
  font-weight: 700;
  color: #21c87a;
}
.main-con-books-shop-page {
  padding: calc(30px * var(--radio)) calc(65px * var(--radio));
}
.main-con-books-shop-page .con-one-book-card {
  margin-bottom: 24px;
}
.main-con-add-and-minus-qnt-cart {
  display: flex;
  align-items: center;
}
.main-con-add-and-minus-qnt-cart input {
  width: 70px;
  text-align: center;
  font-size: calc(20px * var(--radio));
  font-weight: 700;
  color: var(--secondary-color-text);
  border: none;
  outline: none;
  background-color: transparent;
}
.main-con-add-and-minus-qnt-cart i {
  font-size: calc(20px * var(--radio));
  color: var(--main-color-text);
}
.main-con-add-and-minus-qnt-cart i.disabled {
  opacity: 0.5;
}
.delete-card {
  font-size: calc(20px * var(--radio));
  color: var(--main-color-text);
}
.main-con-cart-summary {
  padding: calc(30px * var(--radio));
  background-color: #e3e9e940;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: calc(420px * var(--radio));
}
.con-cart-summary-sub-info {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(25px * var(--radio));
}
.con-cart-summary-sub-info p {
  font-size: calc(20px * var(--radio));
  font-weight: 600;
  line-height: calc(37px * var(--radio));
  color: var(--secondary-color-text);
  opacity: 0.7;
}
.con-cart-summary-sub-info span {
  font-size: calc(20px * var(--radio));
  font-weight: 600;
  line-height: calc(37px * var(--radio));
  color: #21c87a;
  opacity: 0.7;
}
.con-cart-summary-total {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(30px * var(--radio));
}
.con-cart-summary-total p {
  font-size: calc(20px * var(--radio));
  font-weight: 700;
  line-height: calc(37px * var(--radio));
  color: var(--secondary-color-text);
  opacity: 0.7;
}
.con-cart-summary-total span {
  font-size: calc(20px * var(--radio));
  font-weight: 700;
  line-height: calc(37px * var(--radio));
  color: #21c87a;
  opacity: 0.7;
}
.main-con-cart-summary a {
  background-color: var(--main-color-theme);
  border: none;
  outline: none;
  padding: calc(19px * var(--radio));
  width: 100%;
  border-radius: 10px;
  font-size: calc(20px * var(--radio));
  color: white;
  font-weight: 700;
  max-width: calc(310px * var(--radio));
  text-align: center;
}
.main-con-add-address-details-page {
  padding: calc(30px * var(--radio)) calc(65px * var(--radio));
  display: flex;
  align-items: center;
  flex-direction: column;
}
.main-con-add-address-details-page .main-con-form-setting {
  width: 100%;
  margin-top: calc(20px * var(--radio));
  max-width: 600px;
}
.main-con-payment-method-page {
  padding: calc(30px * var(--radio)) calc(65px * var(--radio));
  display: flex;
  align-items: center;
  flex-direction: column;
}
.main-con-payment-method-page .main-con-form-setting {
  width: 100%;
  margin-top: calc(20px * var(--radio));
  max-width: 600px;
}
.main-con-tabs-ul-payment-methods {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 600px;
  margin-bottom: calc(40px * var(--radio));
}
.con-one-payment-method {
  padding: calc(30px * var(--radio));
  border-radius: 14px;
  background-color: #e3e9e940;
  width: 47%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid transparent;
}

.con-one-payment-method.active {
  border: 3px solid var(--main-color-theme);
}
.all-payment-methods {
  width: 100%;
  max-width: 600px;
}
.main-con-tabs-ul-payment-methods-with-text {
  width: 100%;
  max-width: 600px;
}
.main-con-tabs-ul-payment-methods-with-text p {
  font-size: calc(22px * var(--radio));
  color: var(--secondary-sub-color-text);
  margin-bottom: calc(10px * var(--radio));
  display: block;
  font-weight: 600;
}
.main-con-payment-method-page .main-con-tabs-ul-payment-methods-with-text {
  margin-top: calc(20px * var(--radio));
}
.fawry-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(40px * var(--radio));
  background-color: #e3e9e940;
  border-radius: 14px;
}
.fawry-box p {
  font-size: calc(22px * var(--radio));
  line-height: calc(41px * var(--radio));
  font-weight: 700;
  color: var(--secondary-color-text);
  margin-bottom: calc(40px * var(--radio));
  text-align: center;
  max-width: 400px;
}
.fawry-box button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: calc(310px * var(--radio));
  padding: calc(19px * var(--radio));

  border: none;
  outline: none;
  border-radius: 14px;
  background-color: #74379940;
  color: var(--main-color-text);
  margin-bottom: calc(25px * var(--radio));
}
.fawry-box button span {
  display: flex;
  font-size: calc(20px * var(--radio));
  font-weight: 700;
  line-height: calc(37px * var(--radio));
}

.fawry-box button img {
  margin: 0px 10px;
}
.fawry-box > span {
  font-size: calc(22px * var(--radio));
  line-height: calc(41px * var(--radio));
  font-weight: 600;
  color: var(--secondary-color-text);
  opacity: 0.6;
}
.main-con-order-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 97px);
}
.main-con-order-done i {
  width: calc(145px * var(--radio));
  height: calc(145px * var(--radio));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid var(--main-color-theme);
  color: var(--main-color-text);
  border-radius: 50%;
  font-size: 40px;
  margin-bottom: calc(40px * var(--radio));
}
.main-con-order-done p {
  font-size: calc(32px * var(--radio));
  font-weight: 700;
  color: var(--secondary-color-text);
  margin-bottom: calc(8px * var(--radio));
  line-height: calc(59px * var(--radio));
}
.main-con-order-done span {
  font-size: calc(22px * var(--radio));
  font-weight: 600;
  color: var(--secondary-color-text);
  margin-bottom: calc(40px * var(--radio));
  line-height: calc(41px * var(--radio));
  opacity: 0.7;
  text-align: center;
}
.main-con-order-done a {
  background-color: var(--main-color-theme);
  border: none;
  outline: none;
  padding: calc(19px * var(--radio));
  width: 100%;
  border-radius: 10px;
  font-size: calc(20px * var(--radio));
  color: white;
  font-weight: 700;
  max-width: calc(310px * var(--radio));
  text-align: center;
}
.main-con-my-lecture-page {
  padding: calc(30px * var(--radio)) calc(65px * var(--radio));
}
.main-con-my-lecture-tabs-ul {
  margin: 0px auto calc(30px * var(--radio));
  display: flex;
  width: 100%;
  max-width: 660px;
  list-style: none;
  background-color: #e3e9e940;
  border-radius: 14px;
  overflow: hidden;
  padding: 0px;
}
.main-con-my-lecture-tabs-ul li {
  flex-grow: 1;
  text-align: center;
  padding: calc(19px * var(--radio));
  font-size: calc(20px * var(--radio));
  font-weight: 700;
  line-height: calc(37px * var(--radio));
  color: #1e1e1eb3;
  border-radius: 14px;
}
.main-con-my-lecture-tabs-ul li.active {
  background-color: var(--main-color-theme);
  color: white;
}
.main-con-my-lecture-page .main-con-latest-lectures-card-one {
  margin-bottom: 24px;
}
.con-lecture-card-progress .progress-card {
  height: 10px;
  width: 100%;
  border-radius: 50px;
  overflow: hidden;
  position: relative;
  background-color: #e3e9e94d;
}
.con-lecture-card-progress .progress-card .fill {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 0px;
  background-color: var(--main-color-theme);
  border-radius: 50px;
  height: 100%;
}
.con-lecture-card-progress > span {
  font-size: calc(18px * var(--radio));
  font-weight: 700;
  line-height: calc(33px * var(--radio));
  color: var(--main-color-text);
  margin-bottom: calc(8px * var(--radio));
}
@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-purchase-page {
  display: flex;
  width: 100%;
  padding: calc(45px * var(--radio)) calc(71px * var(--radio)) 0px;
}
.main-con-lecture-purchase-side-bar {
  width: 268px;
  height: calc(100vh - calc(45px * var(--radio)));
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0px;
  transition: 0.5s ease-in-out;
}
.main-con-lecture-purchase-content {
  width: calc(100% - 268px);
  padding: 0px calc(57px * var(--radio)) 0px 0px;
}
.main-con-one-side-bar-content-lec-purc {
  background-color: #e3e9e940;
  border-radius: 14px;
  margin-bottom: calc(24px * var(--radio));
}
.top-side-bar-content-lecture-purchase {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(18px * var(--radio)) calc(25px * var(--radio));
}
.top-side-bar-content-lecture-purchase p {
  font-size: calc(20px * var(--radio));
  color: var(--secondary-color-text);
  font-weight: 700;
  line-height: calc(37px * var(--radio));
  margin-bottom: 0px;
}
.top-side-bar-content-lecture-purchase i {
  font-size: 15px;
  color: var(--main-color-text);
}
.main-con-sub-side-bar-bottom-lec-purchase {
  padding: calc(15px * var(--radio)) calc(19px * var(--radio));
  display: flex;
  align-items: center;
  border-radius: 14px;
}
.main-con-sub-side-bar-bottom-lec-purchase p {
  margin-bottom: 0px;
  flex-grow: 1;
  width: 50%;
  font-size: calc(18px * var(--radio));
  font-weight: 700;
  line-height: calc(33px * var(--radio));
}
.main-con-sub-side-bar-bottom-lec-purchase > i {
  width: calc(30px * var(--radio));
  height: calc(30px * var(--radio));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px 5px;
  font-size: calc(22px * var(--radio));
  color: var(--main-color-text);
}
.main-con-sub-side-bar-bottom-lec-purchase.active {
  background-color: #74379926;
}
.main-con-sub-side-bar-bottom-lec-purchase.active p {
  color: var(--main-color-text);
}
.main-con-one-side-bar-content-lec-purc.close
  .bottom-side-bar-content-lecture-purchase {
  display: none;
}
.main-con-progress-bar-lec-purch {
  margin-top: calc(62px * var(--radio));
  width: 100%;
}
.main-con-progress-bar-lec-purch p {
  margin-bottom: calc(11px * var(--radio));
  font-size: calc(22px * var(--radio));
  font-weight: 700;
  color: var(--main-color-text);
  line-height: calc(41px * var(--radio));
}
.con-progress-bar {
  width: 100%;
  height: calc(10px * var(--radio));
  background-color: #e3e9e940;
  border-radius: 50px;
  margin-bottom: calc(80px * var(--radio));
  position: relative;
  overflow: hidden;
}
.con-progress-bar .fill {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 10%;
  background-color: var(--main-color-theme);
  height: 100%;
  border-radius: 50px;
}
.main-con-content-all-side-lec-pur {
  width: 100%;
  flex-grow: 1;
  height: 50%;
  overflow: auto;
}
.main-con-header-of-content-lec-purchase {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: calc(29px * var(--radio));
}
.main-con-header-of-content-lec-purchase > img {
  width: calc(110px * var(--radio));
}
.main-con-header-of-content-lec-purchase a {
  display: flex;
  align-items: center;
}
.main-con-header-of-content-lec-purchase a img {
  width: calc(24px * var(--radio));
}
.main-con-header-of-content-lec-purchase p {
  margin: 0px 10px;
  font-size: calc(22px * var(--radio));
  line-height: calc(41px * var(--radio));
  font-weight: 700;
  color: var(--main-color-text);
}
.video-header-content p {
  font-size: calc(24px * var(--radio));
  font-weight: 700;
  margin-bottom: 0px;
  line-height: calc(44px * var(--radio));
  color: var(--secondary-color-text);
}
.video-header-content span {
  font-size: calc(22px * var(--radio));
  font-weight: 600;
  margin-bottom: 0px;
  line-height: calc(41px * var(--radio));
  color: var(--secondary-sub-color-text);
}
.video-header-content span i {
  margin-left: calc(7px * var(--radio));
}
.video-header-content {
  margin-bottom: calc(15px * var(--radio));
}
.con-video-iframe iframe {
  width: 100%;
  border-radius: 28px;
  min-height: 500px;
}
.con-video-iframe video {
  width: 100%;
  border-radius: 28px;
  min-height: 500px;
}
.con-video-iframe {
}
.con-navigation-lecture-purchase {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: calc(60px * var(--radio));
}
.con-navigation-lecture-purchase button.next {
  background-color: var(--main-color-theme);
  border: 3px solid transparent;
  outline: none;
  padding: calc(19px * var(--radio));
  width: 100%;
  border-radius: 10px;
  font-size: calc(20px * var(--radio));
  color: white;
  font-weight: 700;
  max-width: calc(310px * var(--radio));
  margin: calc(20px * var(--radio));
}
.con-navigation-lecture-purchase button.pre {
  background-color: transparent;
  border: 3px solid var(--main-color-theme);
  outline: none;
  padding: calc(19px * var(--radio));
  width: 100%;
  border-radius: 10px;
  font-size: calc(20px * var(--radio));
  color: var(--main-color-theme);
  font-weight: 700;
  max-width: calc(310px * var(--radio));
  margin: calc(20px * var(--radio));
}
.main-con-timer-exam {
  padding: calc(10px * var(--radio));
  width: 100%;
  border-radius: 14px;
  background-color: #fb383a40;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: calc(75px * var(--radio)) 0px calc(60px * var(--radio));
}
.main-con-timer-exam p {
  font-size: calc(20px * var(--radio));
  font-weight: 600;
  margin-bottom: 0px;
  line-height: calc(36px * var(--radio));
  color: #fb383a;
}
.main-con-timer-exam span {
  font-size: calc(36px * var(--radio));
  font-weight: 700;
  margin-bottom: 0px;
  line-height: calc(64px * var(--radio));
  color: #fb383a;
}
.con-exam-title p {
  text-align: center;
  font-size: calc(32px * var(--radio));
  line-height: calc(59px * var(--radio));
  color: var(--secondary-color-text);
  font-weight: 700;
  margin-bottom: calc(40px * var(--radio));
}
.main-con-one-question {
  background-color: white;
  border-radius: 28px;
  box-shadow: 0px 4px 50px 0px #1e1e1e0f;
  padding: calc(25px * var(--radio)) calc(35px * var(--radio));
}
.con-question-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: calc(45px * var(--radio));
}

.question-content span {
  font-size: calc(22px * var(--radio));
  font-weight: 700;
  line-height: calc(41px * var(--radio));
  color: var(--secondary-color-text);
  opacity: 0.5;
}
.question-content p {
  font-size: calc(22px * var(--radio));
  font-weight: 700;
  line-height: calc(39px * var(--radio));
  color: var(--secondary-color-text);
  margin-bottom: 20px;
}
.question-content {
  flex-grow: 1;
}
.question-content img {
  width: 100%;
}
.con-save {
  background-color: #e3e9e940;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(50px * var(--radio));
  height: calc(50px * var(--radio));
}
.con-save img {
  height: 20px;
}
.con-one-answer {
  display: flex;
  align-items: center;
  padding: calc(17px * var(--radio)) calc(25px * var(--radio));
  border-radius: 14px;
  background-color: #e3e9e940;
  margin-bottom: calc(25px * var(--radio));
}
.con-one-answer.active {
  background-color: #74379966;
}
.con-one-answer.active span {
  background-color: var(--main-color-theme);
  color: white;
}
.con-one-answer.active p {
  color: var(--main-color-text);
  font-weight: 700;
}
.con-one-answer span {
  width: calc(40px * var(--radio));
  height: calc(40px * var(--radio));
  border-radius: 8px;
  background-color: #74379940;
  font-size: calc(22px * var(--radio));
  font-weight: 700;
  line-height: calc(41px * var(--radio));
  color: var(--main-color-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.con-one-answer p {
  flex-grow: 1;
  width: 50%;
  margin: 0px calc(15px * var(--radio));
  color: var(--secondary-color-text);
  font-size: calc(20px * var(--radio));
  font-weight: 600;
  line-height: calc(36px * var(--radio));
  opacity: 0.8;
}
.con-question-code {
  opacity: 0.6;
  font-size: calc(20px * var(--radio));
  font-weight: 600;
  line-height: calc(37px * var(--radio));
  color: var(--secondary-color-text);
}
.main-con-exam-done-content .pie {
  font-size: calc(35px * var(--radio));
  line-height: calc(58px * var(--radio));
  font-weight: 700;
  margin-bottom: calc(40px * var(--radio));
}
.main-con-exam-done-content > span {
  color: var(--secondary-color-text);
  font-size: calc(22px * var(--radio));
  font-weight: 600;
  line-height: calc(41px * var(--radio));
  text-align: center;
  opacity: 0.7;
  margin-bottom: calc(40px * var(--radio));
}
.main-con-exam-done-content > p {
  color: var(--secondary-color-text);
  font-size: calc(32px * var(--radio));
  font-weight: 700;
  line-height: calc(59px * var(--radio));
  text-align: center;
  margin-bottom: calc(8px * var(--radio));
}
.main-con-exam-done-content {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.con-exam-result-info > p {
  color: #fb383a;
  font-size: calc(20px * var(--radio));
  font-weight: 600;
  line-height: calc(36px * var(--radio));
  margin-bottom: calc(23px * var(--radio));
  text-align: center;
}
.con-exam-result-info > p span {
  font-size: calc(22px * var(--radio));
  font-weight: 700;
  line-height: calc(39px * var(--radio));
  margin: 0px 10px;
}
.main-con-result-question-count {
  display: flex;
  align-items: center;
}
.main-con-result-question-count > div {
  min-width: calc(200px * var(--radio));
  margin: 0px 10px;
  border-radius: 14px;
  background-color: #e3e9e940;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(10px * var(--radio));
}
.main-con-result-question-count > div > span {
  font-size: calc(32px * var(--radio));
  font-weight: 700;
  line-height: calc(59px * var(--radio));
  color: var(--secondary-color-text);
  opacity: 0.8;
}
.main-con-result-question-count > div > p {
  color: var(--secondary-color-text);
  font-size: calc(20px * var(--radio));
  font-weight: 600;
  line-height: calc(36px * var(--radio));
  opacity: 0.8;
  margin-bottom: 0px;
}
.main-con-result-question-count > div > p i {
  margin: 0px 7px;
}
.btn-order-done a {
  display: none;
}
.main-con-result-question-count > div.active p {
  color: var(--main-color-text);
}
.main-con-result-question-count > div.active span {
  color: var(--main-color-text);
}
.con-navigation-lecture-purchase button i {
  margin: 0px 10px;
}
.con-side-bar-head-mob {
  display: none;
}
.main-con-header-of-content-lec-purchase button {
  display: none;
}
@media (max-width: 992px) {
  .con-auth-logo img {
    width: 80px;
  }
  .con-header-auth-page > a {
    font-size: 16px;
  }
  .con-header-auth-page {
    padding: 25px 25px 0px;
    margin-bottom: calc(30px * var(--radio));
  }
  .main-con-auth-form h1 {
    font-size: 20px;
  }
  .main-con-auth-input {
    min-width: 340px;
  }
  .main-con-auth-input span {
    font-size: 14px;
  }
  .main-con-forget-password-a a {
    font-size: 14px;
  }
  .main-con-auth-form form button {
    font-size: 14px;
    padding: 12px;
  }
  .main-con-auth-input input {
    padding: 15px;
  }
  .main-con-havenot-accont p {
    font-size: 14px;
  }
  .main-con-havenot-accont a {
    font-size: 14px;
  }
  .con-header-link-auth-with-text p {
    display: none;
  }
  .con-header-link-auth-with-text a {
    font-size: 16px;
  }
  .main-con-auth-form {
    align-items: flex-start;
  }
  .main-con-auth-input > div > span {
    font-size: 16px;
  }
  .main-con-auth-form-register {
    flex-direction: column;
    padding: 0px 23px;
  }
  .con-register-progress {
    flex-direction: row;
    height: auto;
    width: 100%;
    position: relative;
  }
  .con-register-progress div {
    flex-direction: column;
  }
  .con-register-progress > span.seprator {
    height: 5px;
  }
  .con-register-progress div p {
    transform: translate(0%, 100px);
    position: absolute;
    font-size: 14px;
    margin: 7px 0px;
  }

  .con-register-progress div.active p {
    position: relative;
  }
  .main-con-auth-input select {
    padding: 12px;
  }
  .pre-next-buttons .next {
    padding: 12px;
    font-size: 14px;
    margin: 0px 10px;
  }
  .pre-next-buttons .pre {
    padding: 12px;
    font-size: 14px;
    margin: 0px 10px;
  }
  .pre-next-buttons {
    justify-content: center;
  }
  .con-register-progress {
    margin-bottom: 20px;
  }
  .parent-register-form {
    width: 100%;
  }
  .step4 .col-12 {
    padding: 0px;
  }
  .parent-register-form form h1 {
    display: none;
  }
  .title-reg-page {
    display: block;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--secondary-color-text);
    margin-bottom: calc(40px * var(--radio));
  }
  .con-register-progress div i {
    width: 25px;
    height: 25px;
    font-size: 12px;
  }
  .con-register-progress div span {
    width: 25px;
    height: 25px;
    font-size: 12px;
  }
  .step4 > p {
    font-size: 14px;
  }
  .main-con-info-card-register .number {
    font-size: 16px;
  }
  .main-con-info-card-register .title {
    font-size: 16px;
  }
  .main-con-info-card-register p {
    font-size: 14px;
  }
  .main-con-inputs-otp {
    width: 100%;
    max-width: 400px;
  }
  .main-con-auth-form form > p {
    font-size: 14px;
  }
  .main-con-inputs-otp input {
    width: 55px;
    height: 55px;
  }
  .main-con-resend-code p {
    font-size: 14px;
  }
  .main-con-resend-code p span {
    font-size: 14px;
  }
  .main-con-content-guest-page {
    padding: 14px 20px 0px;
    margin-bottom: 0px;
  }
  .main-con-choose-your-educational-level h1 {
    font-size: 20px;
  }
  .main-con-educational-level {
    margin-bottom: 15px;
    max-width: 300px;
  }
  .main-con-about-block .about-title {
    font-size: 20px;
  }
  .main-con-about-block .about-text {
    font-size: 14px;
  }
  .main-con-choose-your-educational-level .col-12 {
    padding: 0px;
  }
  .main-con-about-block .col-12 {
    padding: 0px;
  }
  .con-reda-info-boxes > div {
    min-width: auto;
    width: 30%;
    flex-grow: 1;
    margin-left: 10px;
    padding: 15px 10px;
  }
  .con-reda-info-boxes > div span {
    font-size: 18px;
  }
  .con-reda-info-boxes > div p {
    font-size: 14px;
  }
  .main-con-about-teacher-image img {
    height: 300px;
    top: 0px;
    right: 0px;
  }
  .main-con-about-teacher-image {
    height: 300px;
    margin-top: 40px;
  }
  .main-con-right-review-carosal {
    max-width: 120px;
  }
  .main-con-left-review-carosal {
    max-width: 120px;
  }
  .con-title-of-review-students h2 {
    font-size: 20px;
  }
  .con-title-of-review-students p {
    font-size: 14px;
  }
  .main-con-left-review-carosal img:nth-child(1) {
    width: 50px;
    top: 130px;
    right: 30px;
  }
  .main-con-left-review-carosal img:nth-child(2) {
    width: 25px;
    bottom: 20px;
    left: 30px;
  }
  .main-con-right-review-carosal img:nth-child(1) {
    width: 25px;
    top: 150px;
    left: 50px;
  }
  .main-con-right-review-carosal img:nth-child(2) {
    width: 50px;
    bottom: 20px;
    right: 50px;
  }
  .con-title-of-review-students {
    margin-bottom: 50px;
  }
  .main-con-students-reviews {
    padding: 25px 20px;
  }
  .main-con-students-reviews .col-12 {
    padding: 0px;
  }
  .main-con-side-bar {
    position: fixed;
    top: 0px;
    left: -100%;
    width: 100%;
    height: 100vh;
    z-index: 10000;
  }
  .main-con-content {
    width: 100%;
    max-width: 100%;
  }
  .main-con-content-side-bar {
    width: 100%;
  }
  .main-con-home-header {
    padding: 30px 20px 0px;
  }
  .main-con-side-bar.show {
    left: 0px;
  }
  .con-side-bar-head-mob {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .con-side-bar-head-mob i {
    font-size: 30px;
    color: var(--main-color-text);
  }
  .main-con-side-bar-student-info img.student-image-side-bar {
    width: 80px;
    height: 80px;
  }
  .main-con-side-bar-student-info > p {
    font-size: 16px;
  }
  .main-con-side-bar-student-info > span.student-side-bar-edu-level {
    font-size: 16px;
  }
  .main-con-side-bar-links a i {
    display: block;
  }
  .main-con-side-bar-links a p {
    font-size: 20px;
  }
  .main-con-side-bar-links a {
    margin-bottom: 25px;
  }
  .main-con-side-bar-links {
    min-height: calc(100vh - 400px);
  }
  .main-con-side-bar-student-info > span.studen-side-bar-id {
    font-size: 14px;
  }
  .main-con-side-bar-student-info img.bar-code-side-bar {
    width: 200px;
  }
  .main-con-latest-lecture-home {
    padding: 0px 20px;
  }
  .main-con-student-pref {
    padding: 0px 20px;
  }
  .main-con-latest-lectures-cards .col-12 {
    padding: 0px;
  }
  .main-con-latest-lectures-card-one {
    margin-bottom: 15px;
  }
  .con-welcome-msg p {
    font-size: 20px;
  }
  .main-con-student-pref > div {
    position: relative;
    padding: 30px 10px 10px;
  }
  .main-con-student-pref > div .con-icon-pref {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .main-con-student-pref > div .content-of-pref p {
    font-size: 14px;
    text-align: center;
  }
  .main-con-student-pref {
    margin-top: 50px;
  }
  .main-con-content .main-con-about-block {
    padding: 0px 20px;
  }
  .main-con-books-block-home {
    padding: 55px 20px;
  }
  .main-con-books-block-home .col-12 {
    padding: 0px;
  }
  .con-one-book-card {
    margin-bottom: 15px;
  }
  .main-con-bouquets-monlthly-block-home {
    padding: 24px 20px;
  }
  .main-con-latest-lectures-card-one > span {
    font-size: 16px;
  }
  .main-con-latest-lectures-card-one > p a {
    font-size: 18px;
  }
  .main-con-latest-lectures-card-one > a {
    font-size: 18px;
  }
  .main-con-title-with-description p {
    font-size: 20px;
  }
  .main-con-title-with-description span {
    font-size: 14px;
  }
  .main-con-one-bouquet-card > p a {
    font-size: 18px;
  }
  .main-con-one-bouquet-card span {
    font-size: 16px;
  }
  .main-con-one-bouquet-card > a {
    font-size: 18px;
  }
  .con-title-right {
    font-size: 20px;
  }
  .con-one-book-card > p a {
    font-size: 18px;
  }
  .con-one-book-card > a {
    font-size: 18px;
  }
  .see-all-button-home a {
    font-size: 16px;
  }
  .main-con-student-pref > div .content-of-pref span {
    font-size: 18px;
  }
  .main-con-all-notifications {
    padding: 30px 20px;
  }
  .main-con-title-h1-page h1 {
    font-size: 20px;
    margin-bottom: 15px;
  }
  .main-con-day-notifications > span {
    font-size: 14px;
  }
  .main-con-one-notification-card > img {
    width: 52px;
    height: 41px;
    border-radius: 10px;
  }
  .noti-content p {
    font-size: 14px;
  }
  .noti-content span {
    font-size: 14px;
  }
  .noti-info p {
    font-size: 14px;
  }
  .main-con-all-bouqouts-cards-page {
    padding: 30px 20px;
  }
  .main-con-lecture-details-page {
    padding: 30px 20px;
  }
  .con-lecture-image-details {
    border-radius: 14px;
  }
  .con-lecture-title-action-buy {
    flex-direction: column;
  }
  .con-lecture-title-action-buy p {
    width: 100%;
  }
  .con-lecture-title-action-buy button {
    width: 100%;
    max-width: 390px;
  }
  .main-con-lecture-details-info-blocks div {
    padding: 10px;
    width: 30%;
    flex-grow: 1;
    margin: 0px 5px;
  }
  .main-con-lecture-details-info-blocks div p {
    font-size: 14px;
  }
  .main-con-lecture-details-info-blocks div img {
    width: 30px;
  }
  .main-con-one-curclim span {
    font-size: 14px;
  }
  .main-con-one-curclim > p {
    font-size: 14px;
  }
  .main-con-one-curclim i {
    font-size: 14px;
  }
  .main-con-one-curclim {
    padding: 15px;
  }
  .con-title-and-see-all p {
    font-size: 20px;
  }
  .con-title-and-see-all a {
    font-size: 14px;
  }
  .con-selected-image > img {
    width: 70px;
    height: 70px;
  }
  .con-selected-image label {
    width: 35px;
    height: 35px;
  }
  .con-one-avatar label img {
    width: 35px;
    height: 35px;
  }
  .con-one-avatar {
    margin: 0px 5px;
  }
  .main-con-setting-page-profile {
    padding: 30px 20px;
  }
  .main-con-select-avatar {
    margin: 0px 10px;
  }
  .main-con-auth-input > div > i {
    font-size: 15px;
  }
  .main-con-form-setting button {
    font-size: 16px;
  }
  .main-con-topics-page {
    padding: 30px 20px;
  }
  .main-con-payment-page table thead tr th {
    font-size: 12px;
    max-width: none !important;
    padding: 10px;
  }
  .main-con-payment-page table tbody tr td {
    font-size: 12px;
    padding: 10px;
  }
  .con-lecture-in-tabel img {
    width: 50px;
    height: 40px;
    border-radius: 10px;
  }
  .main-con-payment-page table tr td .price {
    font-size: 12px;
  }
  .main-con-payment-page table tr td:first-child {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  .main-con-payment-page table tr td:last-child {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
  .main-con-payment-page table tr:first-child th:last-child {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
  .main-con-payment-page table tr:first-child th:first-child {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  .main-con-payment-page {
    padding: 30px 0px;
  }
  .con-lecture-in-tabel p {
    display: none;
  }
  .main-con-add-and-minus-qnt-cart input {
    width: 50px;
  }
  .main-con-cart-page .con-lecture-in-tabel p {
    display: block;
    max-width: 110px;
    white-space: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0px 5px;
    display: -webkit-box !important;
  }
  .btn-order-done a {
    display: block;
    background-color: var(--main-color-theme);
    border: none;
    outline: none;
    padding: calc(19px * var(--radio));
    width: 100%;
    border-radius: 10px;
    text-align: center;
    font-size: 16px;
    color: white;
    font-weight: 700;
    max-width: 390px;
    margin: 10px 0px;
  }
  .main-con-cart-page .main-con-payment-page th:first-child {
    display: none;
  }
  .main-con-cart-page .main-con-payment-page tr td:first-child {
    display: none;
  }
  .main-con-books-shop-page {
    padding: 30px 20px;
  }
  .main-con-books-shop-page .col-12 {
    padding: 0px;
  }
  .main-con-payment-page {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100vh - 100px);
  }
  .main-con-cart-summary {
    max-width: none;
  }
  .main-con-cart-summary a {
    display: none;
  }
  .con-cart-summary-total {
    margin-bottom: 0px;
  }
  .main-con-add-address-details-page {
    padding: 30px 20px;
  }
  .main-con-payment-method-page {
    padding: 30px 20px;
  }
  .main-con-tabs-ul-payment-methods-with-text p {
    font-size: 14px;
  }
  .fawry-box p {
    font-size: 16px;
  }
  .fawry-box > span {
    font-size: 16px;
  }
  .main-con-order-done p {
    font-size: 20px;
  }
  .main-con-order-done span {
    font-size: 14px;
  }
  .main-con-order-done a {
    font-size: 16px;
  }
  .main-con-my-lecture-page {
    padding: 30px 20px;
  }
  .main-con-my-lecture-page .col-12 {
    padding: 0px;
  }
  .main-con-my-lecture-tabs-ul li {
    font-size: 16px;
  }
  .con-one-curc p {
    font-size: 14px !important;
  }
  .con-one-curc span {
    font-size: 14px;
  }
  .main-con-lecture-purchase-page {
    padding: 20px 20px;
  }
  .main-con-lecture-purchase-side-bar {
    position: fixed;
    top: 0%;
    left: -100%;
    z-index: 1000;
    width: 100%;
    background: white;
    height: 100%;
    padding: 25px;
  }
  .main-con-lecture-purchase-side-bar.show {
    left: 0px;
  }
  .main-con-lecture-purchase-content {
    width: 100%;
    padding: 0px;
  }
  .con-video-iframe iframe {
    height: auto;
    min-height: 300px;
  }
  .main-con-header-of-content-lec-purchase > img {
    width: 80px;
  }
  .main-con-header-of-content-lec-purchase p {
    font-size: 14px;
  }
  .main-con-header-of-content-lec-purchase a img {
    width: 15px;
  }
  .main-con-header-of-content-lec-purchase button {
    border: none;
    outline: none;
    background-color: transparent;
    padding: 0px;
    display: block;
    width: 15%;
    text-align: start;
  }
  .main-con-header-of-content-lec-purchase button img {
    width: 20px;
  }
  .con-lec-purchase-logo-close-sidebar {
    display: flex;
    align-items: center;
    width: 100%;
  }
  .con-lec-purchase-logo-close-sidebar img {
    width: 80px;
  }
  .con-lec-purchase-logo-close-sidebar i {
    font-size: 25px;
    color: var(--main-color-text);
  }
  .main-con-one-question {
    padding: 15px;
    border-radius: 10px;
  }
  .con-exam-title p {
    font-size: 20px;
  }
  .main-con-lecture-purchase-content .main-con-timer-exam {
    display: flex;
    width: 100%;
    max-width: 80%;
    padding: 10px 30px;
    margin: 15px auto;
  }
  .question-content span {
    font-size: 14px;
  }
  .question-content p {
    font-size: 16px;
  }
  .con-one-answer {
    padding: 15px;
  }
  .con-question-code {
    font-size: 14px;
  }
  .main-con-lecture-purchase-side-bar .main-con-timer-exam {
    display: none;
  }
  .main-con-exam-done-content > p {
    font-size: 20px;
  }
  .main-con-exam-done-content > span {
    font-size: 14px;
  }
  .main-con-result-question-count > div {
    min-width: 150px;
  }
  .con-navigation-lecture-purchase button.next {
    margin: 0px 10px;
  }
  .con-navigation-lecture-purchase button.pre {
    margin: 0px 10px;
  }
  .con-navigation-lecture-purchase button.next {
    margin: 0px 10px;
  }
}

.error, .invalid-feedback {
    color: #ff4545 !important;
  }