@charset "UTF-8";
body,
html {
  height: 100vw;
}

body {
  font-family: "STC-Regular" !important;
  color: #000;
  direction: rtl;
  background-color: #11a7ec !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

ul {
  margin-bottom: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  list-style: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

p {
  margin-bottom: 0 !important;
}

a {
  text-decoration: none !important;
  outline: none !important;
  transition: all 0.3s !important;
}

a:hover,
a:active,
a:focus {
  outline: 0 !important;
}

input,
textarea,
button,
select {
  outline: none !important;
}

button,
input {
  border: none !important;
}

input[type=number]:not(.height)::-webkit-outer-spin-button,
input[type=number]:not(.height)::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

input[type=number] {
  -moz-appearance: textfield !important;
}

.btn-style {
  width: 100%;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #11A7EC;
  border-radius: 5px;
  font-size: 16px;
  font-family: "STC-Bold";
  color: #fff;
}

.page-content-style .content-style {
  background-color: #fff;
  border-radius: 25px;
  padding: 20px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.hooper {
  height: unset !important;
}

/* == offcanvas == */
.offcanvas {
  color: #000;
}
.offcanvas.offcanvas-bottom {
  border: none;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

#educational-levelOffcanvas,
#schools-Offcanvas,
#subjects-Offcanvas,
#units-Offcanvas,
#careTypes-Offcanvas {
  height: 90vh;
  background-color: #F1F4F6;
}
#educational-levelOffcanvas .offcanvas-body,
#schools-Offcanvas .offcanvas-body,
#subjects-Offcanvas .offcanvas-body,
#units-Offcanvas .offcanvas-body,
#careTypes-Offcanvas .offcanvas-body {
  padding: 20px 25px 90px;
}
#educational-levelOffcanvas .offcanvas-body .title,
#schools-Offcanvas .offcanvas-body .title,
#subjects-Offcanvas .offcanvas-body .title,
#units-Offcanvas .offcanvas-body .title,
#careTypes-Offcanvas .offcanvas-body .title {
  font-size: 20px;
  font-family: "STC-Bold";
  color: #0A4C6B;
  margin-bottom: 25px !important;
  text-align: center;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li:not(:last-child),
#schools-Offcanvas .offcanvas-body .educational-stages li:not(:last-child),
#subjects-Offcanvas .offcanvas-body .educational-stages li:not(:last-child),
#units-Offcanvas .offcanvas-body .educational-stages li:not(:last-child),
#careTypes-Offcanvas .offcanvas-body .educational-stages li:not(:last-child) {
  margin-bottom: 10px;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box,
#schools-Offcanvas .offcanvas-body .educational-stages li .box,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box,
#units-Offcanvas .offcanvas-body .educational-stages li .box,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box {
  background-color: #fff;
  border-radius: 10px;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box .content,
#schools-Offcanvas .offcanvas-body .educational-stages li .box .content,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box .content,
#units-Offcanvas .offcanvas-body .educational-stages li .box .content,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 30px 30px 20px;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box .content .details p,
#schools-Offcanvas .offcanvas-body .educational-stages li .box .content .details p,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box .content .details p,
#units-Offcanvas .offcanvas-body .educational-stages li .box .content .details p,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box .content .details p {
  font-size: 20px;
  font-family: "STC-Bold";
  margin-bottom: 5px !important;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box .content .details span,
#schools-Offcanvas .offcanvas-body .educational-stages li .box .content .details span,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box .content .details span,
#units-Offcanvas .offcanvas-body .educational-stages li .box .content .details span,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box .content .details span {
  font-size: 14px;
  color: #68728B;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box .content .select,
#schools-Offcanvas .offcanvas-body .educational-stages li .box .content .select,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box .content .select,
#units-Offcanvas .offcanvas-body .educational-stages li .box .content .select,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box .content .select {
  width: 90px;
  height: 40px;
  background-color: #E3F0F5;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-family: "STC-Bold";
  color: #4C6B82;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box .classes,
#schools-Offcanvas .offcanvas-body .educational-stages li .box .classes,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box .classes,
#units-Offcanvas .offcanvas-body .educational-stages li .box .classes,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box .classes {
  background-color: #fff;
  padding: 20px !important;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box .classes li,
#schools-Offcanvas .offcanvas-body .educational-stages li .box .classes li,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box .classes li,
#units-Offcanvas .offcanvas-body .educational-stages li .box .classes li,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box .classes li {
  position: relative;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box .classes li .class,
#schools-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class,
#units-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 25px;
  padding: 15px 25px 15px 30px;
  font-size: 16px;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box .classes li .class .un-subscription,
#schools-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class .un-subscription,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class .un-subscription,
#units-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class .un-subscription,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class .un-subscription {
  position: absolute;
  top: -13px;
  right: 0;
  background-color: #ffb743;
  padding: 3px;
  border-radius: 20px;
  font-size: 12px;
  color: #fff;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box .classes li .class .un-subscription::after,
#schools-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class .un-subscription::after,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class .un-subscription::after,
#units-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class .un-subscription::after,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class .un-subscription::after {
  position: absolute;
  bottom: -9px;
  right: 33px;
  border-width: 5px;
  border-style: solid;
  border-color: #ffb743 transparent transparent transparent;
  content: "";
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box .classes li .class .selected,
#schools-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class .selected,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class .selected,
#units-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class .selected,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class .selected {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 1px solid #E2E2E2;
  border-radius: 50%;
  position: relative;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box .classes li .class .selected::after,
#schools-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class .selected::after,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class .selected::after,
#units-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class .selected::after,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class .selected::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box .classes li .class.active,
#schools-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class.active,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class.active,
#units-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class.active,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class.active {
  background-color: #F1F4F6;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box .classes li .class.active.primary .selected::after,
#schools-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class.active.primary .selected::after,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class.active.primary .selected::after,
#units-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class.active.primary .selected::after,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class.active.primary .selected::after {
  background-color: #11B0EC;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box .classes li .class.active.intermediate .selected::after,
#schools-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class.active.intermediate .selected::after,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class.active.intermediate .selected::after,
#units-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class.active.intermediate .selected::after,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class.active.intermediate .selected::after {
  background-color: #60BD6B;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box .classes li .class.active.secondary .selected::after,
#schools-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class.active.secondary .selected::after,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class.active.secondary .selected::after,
#units-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class.active.secondary .selected::after,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box .classes li .class.active.secondary .selected::after {
  background-color: #EEAD14;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box.primary .content .details p,
#schools-Offcanvas .offcanvas-body .educational-stages li .box.primary .content .details p,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box.primary .content .details p,
#units-Offcanvas .offcanvas-body .educational-stages li .box.primary .content .details p,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box.primary .content .details p {
  color: #11B0EC;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box.primary.active,
#schools-Offcanvas .offcanvas-body .educational-stages li .box.primary.active,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box.primary.active,
#units-Offcanvas .offcanvas-body .educational-stages li .box.primary.active,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box.primary.active {
  background-color: #11B0EC;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box.primary.active .content .details p,
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box.primary.active .content .details span,
#schools-Offcanvas .offcanvas-body .educational-stages li .box.primary.active .content .details p,
#schools-Offcanvas .offcanvas-body .educational-stages li .box.primary.active .content .details span,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box.primary.active .content .details p,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box.primary.active .content .details span,
#units-Offcanvas .offcanvas-body .educational-stages li .box.primary.active .content .details p,
#units-Offcanvas .offcanvas-body .educational-stages li .box.primary.active .content .details span,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box.primary.active .content .details p,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box.primary.active .content .details span {
  color: #fff;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box.primary.active .content .select,
#schools-Offcanvas .offcanvas-body .educational-stages li .box.primary.active .content .select,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box.primary.active .content .select,
#units-Offcanvas .offcanvas-body .educational-stages li .box.primary.active .content .select,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box.primary.active .content .select {
  color: #11B0EC;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box.intermediate .content .details p,
#schools-Offcanvas .offcanvas-body .educational-stages li .box.intermediate .content .details p,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box.intermediate .content .details p,
#units-Offcanvas .offcanvas-body .educational-stages li .box.intermediate .content .details p,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box.intermediate .content .details p {
  color: #60BD6B;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box.intermediate.active,
#schools-Offcanvas .offcanvas-body .educational-stages li .box.intermediate.active,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box.intermediate.active,
#units-Offcanvas .offcanvas-body .educational-stages li .box.intermediate.active,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box.intermediate.active {
  background-color: #60BD6B;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box.intermediate.active .content .details p,
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box.intermediate.active .content .details span,
#schools-Offcanvas .offcanvas-body .educational-stages li .box.intermediate.active .content .details p,
#schools-Offcanvas .offcanvas-body .educational-stages li .box.intermediate.active .content .details span,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box.intermediate.active .content .details p,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box.intermediate.active .content .details span,
#units-Offcanvas .offcanvas-body .educational-stages li .box.intermediate.active .content .details p,
#units-Offcanvas .offcanvas-body .educational-stages li .box.intermediate.active .content .details span,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box.intermediate.active .content .details p,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box.intermediate.active .content .details span {
  color: #fff;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box.intermediate.active .content .select,
#schools-Offcanvas .offcanvas-body .educational-stages li .box.intermediate.active .content .select,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box.intermediate.active .content .select,
#units-Offcanvas .offcanvas-body .educational-stages li .box.intermediate.active .content .select,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box.intermediate.active .content .select {
  color: #60BD6B;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box.secondary .content .details p,
#schools-Offcanvas .offcanvas-body .educational-stages li .box.secondary .content .details p,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box.secondary .content .details p,
#units-Offcanvas .offcanvas-body .educational-stages li .box.secondary .content .details p,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box.secondary .content .details p {
  color: #EEAD14;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box.secondary.active,
#schools-Offcanvas .offcanvas-body .educational-stages li .box.secondary.active,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box.secondary.active,
#units-Offcanvas .offcanvas-body .educational-stages li .box.secondary.active,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box.secondary.active {
  background-color: #EEAD14;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box.secondary.active .content .details p,
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box.secondary.active .content .details span,
#schools-Offcanvas .offcanvas-body .educational-stages li .box.secondary.active .content .details p,
#schools-Offcanvas .offcanvas-body .educational-stages li .box.secondary.active .content .details span,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box.secondary.active .content .details p,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box.secondary.active .content .details span,
#units-Offcanvas .offcanvas-body .educational-stages li .box.secondary.active .content .details p,
#units-Offcanvas .offcanvas-body .educational-stages li .box.secondary.active .content .details span,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box.secondary.active .content .details p,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box.secondary.active .content .details span {
  color: #fff;
}
#educational-levelOffcanvas .offcanvas-body .educational-stages li .box.secondary.active .content .select,
#schools-Offcanvas .offcanvas-body .educational-stages li .box.secondary.active .content .select,
#subjects-Offcanvas .offcanvas-body .educational-stages li .box.secondary.active .content .select,
#units-Offcanvas .offcanvas-body .educational-stages li .box.secondary.active .content .select,
#careTypes-Offcanvas .offcanvas-body .educational-stages li .box.secondary.active .content .select {
  color: #EEAD14;
}
#educational-levelOffcanvas .offcanvas-body .save,
#schools-Offcanvas .offcanvas-body .save,
#subjects-Offcanvas .offcanvas-body .save,
#units-Offcanvas .offcanvas-body .save,
#careTypes-Offcanvas .offcanvas-body .save {
  position: fixed;
  width: 100%;
  bottom: 0;
  right: 0;
  background-color: #F1F4F6;
  padding: 15px 10px;
}
#educational-levelOffcanvas .offcanvas-body .save .btn-style,
#schools-Offcanvas .offcanvas-body .save .btn-style,
#subjects-Offcanvas .offcanvas-body .save .btn-style,
#units-Offcanvas .offcanvas-body .save .btn-style,
#careTypes-Offcanvas .offcanvas-body .save .btn-style {
  width: calc(100% - 40px);
  margin: auto;
}

#stageContentOffcanvas {
  height: 90vh;
  background-color: #F1F4F6;
}
#stageContentOffcanvas .offcanvas-body {
  padding: 35px 25px;
}
#stageContentOffcanvas .offcanvas-body .stage-content .subscription {
  padding-right: 5px;
}
#stageContentOffcanvas .offcanvas-body .stage-content .subscription .level {
  font-size: 18px;
  font-family: "STC-Bold";
  color: #0A4C6B;
  margin-bottom: 5px;
}
#stageContentOffcanvas .offcanvas-body .stage-content .subscription .level svg {
  margin-right: 10px;
}
#stageContentOffcanvas .offcanvas-body .stage-content .subscription .type {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}
#stageContentOffcanvas .offcanvas-body .stage-content .class-slider {
  padding: 30px 10px 20px 0;
}
#stageContentOffcanvas .offcanvas-body .stage-content .class-slider .box {
  width: 115px;
  height: 35px;
  background-color: #E6E9EF;
  border-radius: 20px;
  font-size: 14px;
  font-family: "STC-Bold";
  color: #4C6B82;
  display: flex;
  align-items: center;
  justify-content: center;
}
#stageContentOffcanvas .offcanvas-body .stage-content .class-slider .box:not(.active) {
  text-decoration: line-through;
}
#stageContentOffcanvas .offcanvas-body .stage-content .materials-slider .box {
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
  margin: 0 5px;
  position: relative;
  margin-bottom: 10px;
}
#stageContentOffcanvas .offcanvas-body .stage-content .materials-slider .box .icon {
  width: 60px;
  height: 70px;
  margin: 0 auto 20px;
}
#stageContentOffcanvas .offcanvas-body .stage-content .materials-slider .box .icon img {
  max-width: 100%;
  height: 100%;
}
#stageContentOffcanvas .offcanvas-body .stage-content .materials-slider .box .name {
  font-size: 14px;
  font-family: "STC-Bold";
  color: #0A4C6B;
  text-align: center;
}
#stageContentOffcanvas .offcanvas-body .stage-content .materials-slider .box.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background-color: #11A7EC;
}
#stageContentOffcanvas .offcanvas-body .stage-content .materials .materials-box {
  background-color: #fff;
  border-radius: 5px;
  padding: 25px 20px 30px;
  margin-top: 15px;
}
#stageContentOffcanvas .offcanvas-body .stage-content .materials .materials-box .top {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0 10px 25px 0;
  border-bottom: 1px solid #F1F4F6;
}
#stageContentOffcanvas .offcanvas-body .stage-content .materials .materials-box .top .icon {
  width: 50px;
  height: 50px;
  background-color: #F3F5F9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#stageContentOffcanvas .offcanvas-body .stage-content .materials .materials-box .top .text {
  color: #0A4C6B;
}
#stageContentOffcanvas .offcanvas-body .stage-content .materials .materials-box .top .text p {
  font-size: 16px;
  font-family: "STC-Bold";
  margin-bottom: 5px !important;
}
#stageContentOffcanvas .offcanvas-body .stage-content .materials .materials-box .top .text span {
  font-size: 14px;
}
#stageContentOffcanvas .offcanvas-body .stage-content .materials .materials-box .bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px;
}
#stageContentOffcanvas .offcanvas-body .stage-content .materials .materials-box .bottom .image {
  display: flex;
  align-items: center;
  gap: 5px;
}
#stageContentOffcanvas .offcanvas-body .stage-content .materials .materials-box .bottom .image .image-style img {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
  border: 2px solid #FFFFFF;
}
#stageContentOffcanvas .offcanvas-body .stage-content .materials .materials-box .bottom .image .image-style img:nth-child(1) {
  z-index: 3;
}
#stageContentOffcanvas .offcanvas-body .stage-content .materials .materials-box .bottom .image .image-style img:nth-child(2) {
  z-index: 2;
  margin-right: -15px;
}
#stageContentOffcanvas .offcanvas-body .stage-content .materials .materials-box .bottom .image .image-style img:nth-child(3) {
  z-index: 1;
  margin-right: -15px;
}
#stageContentOffcanvas .offcanvas-body .stage-content .materials .materials-box .bottom .image .number {
  color: #8D93A5;
  font-size: 14px;
}
#stageContentOffcanvas .offcanvas-body .stage-content .materials .materials-box .bottom .image .number p {
  display: inline-block;
  margin-left: 5px;
  font-family: "STC-Bold";
}
#stageContentOffcanvas .offcanvas-body .stage-content .materials .materials-box .bottom .text {
  flex: 1;
}
#stageContentOffcanvas .offcanvas-body .stage-content .materials .materials-box .bottom .text a {
  font-size: 14px;
  color: #fff;
}
#stageContentOffcanvas .offcanvas-body .stage-content .materials .materials-box .bottom .text a svg {
  margin-right: 15px;
}
#stageContentOffcanvas .offcanvas-body .stage-content.primary .subscription .type {
  color: #11B0EC;
}
#stageContentOffcanvas .offcanvas-body .stage-content.primary .subscription .type svg path {
  fill: #11B0EC;
}
#stageContentOffcanvas .offcanvas-body .stage-content.primary .class-slider .box.active {
  background-color: #11B0EC;
  color: #fff;
}
#stageContentOffcanvas .offcanvas-body .stage-content.intermediate .subscription .type {
  color: #00B957;
}
#stageContentOffcanvas .offcanvas-body .stage-content.intermediate .subscription .type svg path {
  fill: #00B957;
}
#stageContentOffcanvas .offcanvas-body .stage-content.intermediate .class-slider .box.active {
  background-color: #60BD6B;
  color: #fff;
}
#stageContentOffcanvas .offcanvas-body .stage-content.secondary .subscription .type {
  color: #EFAE1A;
}
#stageContentOffcanvas .offcanvas-body .stage-content.secondary .subscription .type svg path {
  fill: #EFAE1A;
}
#stageContentOffcanvas .offcanvas-body .stage-content.secondary .class-slider .box.active {
  background-color: #EFAE1A;
  color: #fff;
}

#passOtherExamOffcanvas {
  height: 90vh;
}
#passOtherExamOffcanvas .offcanvas-body {
  padding: 0;
}
#passOtherExamOffcanvas .offcanvas-body .title {
  padding: 40px 35px 25px;
  font-size: 20px;
  font-family: "STC-Bold";
  color: #0A4C6B;
}
#passOtherExamOffcanvas .offcanvas-body .menu li {
  border-top: 1px solid #F6F6F6;
}
#passOtherExamOffcanvas .offcanvas-body .menu li .box .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  font-family: "STC-Bold";
  padding: 30px 30px 30px 20px;
}
#passOtherExamOffcanvas .offcanvas-body .menu li .box .box .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}
#passOtherExamOffcanvas .offcanvas-body .menu li .box .box .content .select {
  width: 90px;
  height: 40px;
  background-color: #E3F0F5;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-family: "STC-Bold";
  color: #4C6B82;
}
#passOtherExamOffcanvas .offcanvas-body .btn-style {
  max-width: 365px;
  height: 60px;
  border-radius: 30px;
  margin: 35px auto;
}

#registrationConditionsOffcanvas {
  height: 90vh;
}
#registrationConditionsOffcanvas .offcanvas-body {
  padding: 45px 30px 30px;
}
#registrationConditionsOffcanvas .offcanvas-body .title {
  font-size: 20px;
  font-family: "STC-Bold";
  margin-bottom: 15px;
}
#registrationConditionsOffcanvas .offcanvas-body .content {
  max-height: 365px;
  overflow-y: scroll;
  font-size: 14px;
  font-family: "STC-Light";
  line-height: 25px;
}
#registrationConditionsOffcanvas .offcanvas-body .btn-style {
  height: 60px;
  margin: 70px auto;
}

#socialShareOffcanvas {
  height: 50vh;
  border-top-right-radius: 30px;
  border-top-left-radius: 30px;
}
#socialShareOffcanvas .offcanvas-body {
  padding: 60px 40px 50px 45px;
}
#socialShareOffcanvas .offcanvas-body .title {
  font-size: 20px;
  font-family: "STC-Bold";
  color: #0A4C6B;
  text-align: center;
  margin-bottom: 40px;
}
#socialShareOffcanvas .offcanvas-body .social-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
#socialShareOffcanvas .offcanvas-body .social-link .box {
  display: block;
  padding: 10px;
  text-align: center;
}
#socialShareOffcanvas .offcanvas-body .social-link .box p {
  font-size: 14px;
  font-weight: "STC-Bold";
  color: #7395A5;
  margin-top: 20px;
}

#countryListOffcanvas {
  height: 60%;
  border-radius: 20px 20px 0 0;
  border: none;
}
#countryListOffcanvas .offcanvas-header {
  flex-direction: column;
  gap: 10px;
  padding: 20px 25px;
}
#countryListOffcanvas .offcanvas-header p {
  font-size: 16px;
  font-weight: 700;
  color: #000;
}
#countryListOffcanvas .offcanvas-header .search {
  width: 100%;
  position: relative;
}
#countryListOffcanvas .offcanvas-header .search input {
  width: 100%;
  height: 40px;
  border: 1px solid #f4f6fc !important;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 14px;
  color: #000;
}
#countryListOffcanvas .offcanvas-header .search input::-moz-placeholder {
  font-size: 14px;
  color: #000;
  opacity: 1;
}
#countryListOffcanvas .offcanvas-header .search input::placeholder {
  font-size: 14px;
  color: #000;
  opacity: 1;
}
#countryListOffcanvas .offcanvas-header .search svg {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}
#countryListOffcanvas .offcanvas-header .search svg path {
  fill: #354d64;
}
#countryListOffcanvas .offcanvas-body .country-list {
  height: 300px;
  overflow-y: scroll;
}
#countryListOffcanvas .offcanvas-body .country-list ul li {
  margin-bottom: 30px;
}
#countryListOffcanvas .offcanvas-body .country-list ul li .country-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
#countryListOffcanvas .offcanvas-body .country-list ul li .country-details .name {
  display: flex;
  align-items: center;
  gap: 20px;
}
#countryListOffcanvas .offcanvas-body .country-list ul li .country-details .name .title {
  font-size: 16px;
  color: #283b6a;
}
#countryListOffcanvas .offcanvas-body .country-list ul li .country-details .code .check {
  display: flex;
  gap: 10px;
}
#countryListOffcanvas .offcanvas-body .country-list ul li .country-details .code .check p {
  font-size: 14px;
  color: #283b6a;
  margin-top: -2px;
}
#countryListOffcanvas .offcanvas-body .country-list ul li .country-details .code .check input {
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
}
#countryListOffcanvas .offcanvas-body .country-list ul li .country-details .code .check input:checked ~ .check-mark svg {
  display: block;
}
#countryListOffcanvas .offcanvas-body .country-list ul li .country-details .code .check .check-mark {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d2d2d2;
  border-radius: 5px;
  margin-bottom: 5px;
}
#countryListOffcanvas .offcanvas-body .country-list ul li .country-details .code .check .check-mark svg {
  display: none;
}
#countryListOffcanvas .offcanvas-body .country-list ul li .country-details .code .check .check-mark svg path {
  fill: #00C5BB;
}
#countryListOffcanvas .offcanvas-body .country-list ul li .country-details .code .check input[type=radio]:checked + .check-mark svg {
  display: block;
}
#countryListOffcanvas .btn-style {
  width: calc(100% - 60px);
  height: 60px;
  margin: 0 auto 45px;
}

#readyStartExamOffcanvas .offcanvas-header,
#timeExpiresOffcanvas .offcanvas-header,
#correctAnswerOffcanvas .offcanvas-header,
#inCorrectAnswerOffcanvas .offcanvas-header,
#subscribeToContinueOffcanvas .offcanvas-header,
#leaveOffcanvas .offcanvas-header {
  padding: 2rem 1rem 1rem;
}
#readyStartExamOffcanvas .offcanvas-header .icon,
#timeExpiresOffcanvas .offcanvas-header .icon,
#correctAnswerOffcanvas .offcanvas-header .icon,
#inCorrectAnswerOffcanvas .offcanvas-header .icon,
#subscribeToContinueOffcanvas .offcanvas-header .icon,
#leaveOffcanvas .offcanvas-header .icon {
  width: 90px;
  height: 90px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
#readyStartExamOffcanvas .offcanvas-header .icon img,
#timeExpiresOffcanvas .offcanvas-header .icon img,
#correctAnswerOffcanvas .offcanvas-header .icon img,
#inCorrectAnswerOffcanvas .offcanvas-header .icon img,
#subscribeToContinueOffcanvas .offcanvas-header .icon img,
#leaveOffcanvas .offcanvas-header .icon img {
  width: 50px;
}
#readyStartExamOffcanvas .offcanvas-header p,
#timeExpiresOffcanvas .offcanvas-header p,
#correctAnswerOffcanvas .offcanvas-header p,
#inCorrectAnswerOffcanvas .offcanvas-header p,
#subscribeToContinueOffcanvas .offcanvas-header p,
#leaveOffcanvas .offcanvas-header p {
  font-size: 24px;
  font-family: "STC-Bold";
  color: #000;
  position: relative;
  margin: auto;
}
#readyStartExamOffcanvas .offcanvas-body .buttons,
#timeExpiresOffcanvas .offcanvas-body .buttons,
#correctAnswerOffcanvas .offcanvas-body .buttons,
#inCorrectAnswerOffcanvas .offcanvas-body .buttons,
#subscribeToContinueOffcanvas .offcanvas-body .buttons,
#leaveOffcanvas .offcanvas-body .buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
#readyStartExamOffcanvas .offcanvas-body .buttons a,
#readyStartExamOffcanvas .offcanvas-body .buttons button,
#timeExpiresOffcanvas .offcanvas-body .buttons a,
#timeExpiresOffcanvas .offcanvas-body .buttons button,
#correctAnswerOffcanvas .offcanvas-body .buttons a,
#correctAnswerOffcanvas .offcanvas-body .buttons button,
#inCorrectAnswerOffcanvas .offcanvas-body .buttons a,
#inCorrectAnswerOffcanvas .offcanvas-body .buttons button,
#subscribeToContinueOffcanvas .offcanvas-body .buttons a,
#subscribeToContinueOffcanvas .offcanvas-body .buttons button,
#leaveOffcanvas .offcanvas-body .buttons a,
#leaveOffcanvas .offcanvas-body .buttons button {
  flex: 1;
  padding: 10px;
  color: #fff;
  font-family: "STC-Bold";
}
#readyStartExamOffcanvas .offcanvas-body .buttons a.yes,
#readyStartExamOffcanvas .offcanvas-body .buttons button.yes,
#timeExpiresOffcanvas .offcanvas-body .buttons a.yes,
#timeExpiresOffcanvas .offcanvas-body .buttons button.yes,
#correctAnswerOffcanvas .offcanvas-body .buttons a.yes,
#correctAnswerOffcanvas .offcanvas-body .buttons button.yes,
#inCorrectAnswerOffcanvas .offcanvas-body .buttons a.yes,
#inCorrectAnswerOffcanvas .offcanvas-body .buttons button.yes,
#subscribeToContinueOffcanvas .offcanvas-body .buttons a.yes,
#subscribeToContinueOffcanvas .offcanvas-body .buttons button.yes,
#leaveOffcanvas .offcanvas-body .buttons a.yes,
#leaveOffcanvas .offcanvas-body .buttons button.yes {
  background-color: #05B0AA;
}
#readyStartExamOffcanvas .offcanvas-body .buttons a.no,
#readyStartExamOffcanvas .offcanvas-body .buttons button.no,
#timeExpiresOffcanvas .offcanvas-body .buttons a.no,
#timeExpiresOffcanvas .offcanvas-body .buttons button.no,
#correctAnswerOffcanvas .offcanvas-body .buttons a.no,
#correctAnswerOffcanvas .offcanvas-body .buttons button.no,
#inCorrectAnswerOffcanvas .offcanvas-body .buttons a.no,
#inCorrectAnswerOffcanvas .offcanvas-body .buttons button.no,
#subscribeToContinueOffcanvas .offcanvas-body .buttons a.no,
#subscribeToContinueOffcanvas .offcanvas-body .buttons button.no,
#leaveOffcanvas .offcanvas-body .buttons a.no,
#leaveOffcanvas .offcanvas-body .buttons button.no {
  background-color: #E65858;
}

#timeExpiresOffcanvas,
#inCorrectAnswerOffcanvas {
  height: 220px;
}
#timeExpiresOffcanvas .offcanvas-header,
#inCorrectAnswerOffcanvas .offcanvas-header {
  display: block;
  text-align: center;
}
#timeExpiresOffcanvas .offcanvas-header p,
#inCorrectAnswerOffcanvas .offcanvas-header p {
  font-size: 16px;
  font-family: "STC-Bold";
  color: #ff8888;
}
#timeExpiresOffcanvas .offcanvas-header span,
#inCorrectAnswerOffcanvas .offcanvas-header span {
  font-size: 24px;
  font-family: "STC-Bold";
  color: #000;
  margin-top: 20px !important;
}

#correctAnswerOffcanvas .offcanvas-header p {
  font-size: 16px;
  font-family: "STC-Bold";
  color: #87cc8f;
  margin-top: 10px;
}

#subscribeToContinueOffcanvas {
  height: 290px;
}
#subscribeToContinueOffcanvas .offcanvas-body a {
  width: 100%;
  background-color: #F5F5F5;
  border-radius: 30px;
  padding: 15px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
}
#subscribeToContinueOffcanvas .offcanvas-body a p {
  font-family: "STC-Bold";
  color: #000;
}
#subscribeToContinueOffcanvas .offcanvas-body a span {
  font-family: "STC-Bold";
  color: #11A7EC;
}
#subscribeToContinueOffcanvas .offcanvas-body a:first-of-type {
  margin-bottom: 15px;
}

#materialsOffcanvas {
  height: 90vh;
}
#materialsOffcanvas .materials li:not(:last-child) {
  border-bottom: 1px solid rgba(17, 167, 236, 0.1803921569);
}
#materialsOffcanvas .materials .materials-box {
  background-color: #fff;
  border-radius: 5px;
  padding: 25px 20px 30px;
  margin-top: 15px;
}
#materialsOffcanvas .materials .materials-box .top {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0 10px 25px 0;
  border-bottom: 1px solid #F1F4F6;
}
#materialsOffcanvas .materials .materials-box .top .icon {
  width: 50px;
  height: 50px;
  background-color: #F3F5F9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#materialsOffcanvas .materials .materials-box .top .icon.no-image {
  background-color: transparent;
  border: 4px solid #0A4C6B;
}
#materialsOffcanvas .materials .materials-box .top .icon.no-image p {
  font-family: "STC-Bold";
  font-size: 28px;
  color: #0A4C6B;
}
#materialsOffcanvas .materials .materials-box .top .text {
  color: #0A4C6B;
}
#materialsOffcanvas .materials .materials-box .top .text p {
  font-size: 16px;
  font-family: "STC-Bold";
  margin-bottom: 5px !important;
}
#materialsOffcanvas .materials .materials-box .top .text span {
  font-size: 14px;
}
#materialsOffcanvas .materials .materials-box .bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px;
}
#materialsOffcanvas .materials .materials-box .bottom .image {
  display: flex;
  align-items: center;
  gap: 5px;
}
#materialsOffcanvas .materials .materials-box .bottom .image .image-style img {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
  border: 2px solid #FFFFFF;
}
#materialsOffcanvas .materials .materials-box .bottom .image .image-style img:nth-child(1) {
  z-index: 3;
}
#materialsOffcanvas .materials .materials-box .bottom .image .image-style img:nth-child(2) {
  z-index: 2;
  margin-right: -15px;
}
#materialsOffcanvas .materials .materials-box .bottom .image .image-style img:nth-child(3) {
  z-index: 1;
  margin-right: -15px;
}
#materialsOffcanvas .materials .materials-box .bottom .image .number {
  color: #8D93A5;
  font-size: 14px;
}
#materialsOffcanvas .materials .materials-box .bottom .image .number p {
  display: inline-block;
  margin-left: 5px;
  font-family: "STC-Bold";
}
#materialsOffcanvas .materials .materials-box .bottom .text {
  flex: 1;
}
#materialsOffcanvas .materials .materials-box .bottom .text a {
  font-size: 14px;
  color: #fff;
}
#materialsOffcanvas .materials .materials-box .bottom .text a svg {
  margin-right: 15px;
}

/* == offcanvas ==*/
/* == Modal == */
.modal-dialog .modal-content {
  border-radius: 10px;
  border: none;
}
.modal-dialog .modal-content .modal-body {
  text-align: center;
}

#switchPaymentMethods .modal-dialog .modal-content .modal-body {
  padding: 50px 35px 40px;
}
#switchPaymentMethods .modal-dialog .modal-content .modal-body > p {
  padding: 30px 0;
  max-width: 250px;
  margin: auto;
  font-size: 25px;
  font-family: "STC-Bold";
}
#switchPaymentMethods .modal-dialog .modal-content .modal-body a {
  width: 100%;
  background-color: #F5F5F5;
  border-radius: 30px;
  padding: 15px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
}
#switchPaymentMethods .modal-dialog .modal-content .modal-body a p {
  font-family: "STC-Bold";
  color: #000;
}
#switchPaymentMethods .modal-dialog .modal-content .modal-body a span {
  font-family: "STC-Bold";
  color: #11A7EC;
}
#switchPaymentMethods .modal-dialog .modal-content .modal-body a:first-of-type {
  margin-bottom: 15px;
}

#switchPaymentMethods .modal-dialog .modal-content .modal-body a {
  justify-content: center;
}
#switchPaymentMethods .modal-dialog .modal-content .modal-body a:first-of-type {
  margin-top: 20px;
}

#goToPaymentPortalModal .modal-dialog .modal-content .modal-body {
  padding: 65px 60px 75px;
}
#goToPaymentPortalModal .modal-dialog .modal-content .modal-body p {
  padding: 25px 0 10px;
  font-size: 25px;
  font-family: "STC-Bold";
}
#goToPaymentPortalModal .modal-dialog .modal-content .modal-body span {
  font-size: 18px;
}

#paymentSuccessfullyModal .modal-dialog .modal-content .modal-body {
  padding: 55px 60px 75px;
}
#paymentSuccessfullyModal .modal-dialog .modal-content .modal-body p {
  padding: 25px 0 5px;
  font-size: 20px;
  font-family: "STC-Bold";
}
#paymentSuccessfullyModal .modal-dialog .modal-content .modal-body span {
  font-size: 18px;
}

#paymentUnsuccessfulModal .modal-dialog .modal-content .modal-body {
  padding: 55px 25px 50px;
}
#paymentUnsuccessfulModal .modal-dialog .modal-content .modal-body p {
  padding: 20px 0 5px;
  font-size: 20px;
  font-family: "STC-Bold";
}
#paymentUnsuccessfulModal .modal-dialog .modal-content .modal-body span {
  font-size: 18px;
}
#paymentUnsuccessfulModal .modal-dialog .modal-content .modal-body a {
  width: 100%;
  background-color: #f5f5f5;
  margin: 15px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 30px;
  padding: 15px 25px;
  font-size: 18px;
  color: #000;
  text-decoration: underline;
}

#savingQuestionModal .modal-dialog .modal-content .modal-body {
  padding: 70px 100px 75px;
}
#savingQuestionModal .modal-dialog .modal-content .modal-body p {
  padding: 35px 0 5px;
  font-size: 20px;
  font-family: "STC-Bold";
}
#savingQuestionModal .modal-dialog .modal-content .modal-body span {
  font-size: 18px;
}

#requestCareSuccessfulModal .modal-dialog .modal-content .modal-body {
  padding: 55px 120px 65px;
}
#requestCareSuccessfulModal .modal-dialog .modal-content .modal-body p {
  padding: 20px 0 5px;
  font-size: 20px;
  font-family: "STC-Bold";
}
#requestCareSuccessfulModal .modal-dialog .modal-content .modal-body span {
  font-size: 18px;
}

#signOutModal .modal-dialog .modal-content .modal-body {
  padding: 45px 65px 50px;
}
#signOutModal .modal-dialog .modal-content .modal-body p {
  padding: 30px 0 40px;
  font-size: 18px;
  font-family: "STC-Bold";
}
#signOutModal .modal-dialog .modal-content .modal-body .buttons {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  font-size: 18px;
}
#signOutModal .modal-dialog .modal-content .modal-body .buttons a {
  width: 100px;
  height: 45px;
  background-color: #F2F2F2;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
}
#signOutModal .modal-dialog .modal-content .modal-body .buttons button {
  background-color: transparent;
}

#timeExpiresModal .modal-dialog .modal-content .modal-body h3 {
  font-size: 24px;
  font-family: "STC-Bold";
  color: #000;
  margin-top: 20px !important;
}

/* == Modal == */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes tabAnimation {
  from {
    opacity: 0;
    transform: translateY(5%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
/* ===================== */
/*  Header  */
/* ===================== */
.header {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 99999;
  background-color: #11a7ec;
}
.header.home {
  padding: 20px 25px 10px;
}
.header .page-title {
  padding: 20px;
  position: relative;
}
.header .page-title p {
  font-size: 18px;
  font-family: "STC-Bold";
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.header .user {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header .user .image {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F3F3F3;
  border-radius: 50%;
  overflow: hidden;
  padding-top: 15px;
}
.header .user .image img {
  max-width: 100%;
}
.header .user .image svg {
  font-size: 23px;
  color: #787878;
}
.header .user .avatar {
  width: 60px;
  height: 60px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  color: #11A7EC;
  position: relative;
  overflow: hidden;
}
.header .user .avatar .edit {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background-color: #f3f5f9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
.header .user .avatar img {
  position: absolute;
  bottom: 0px;
}
.header .user .info {
  color: #fff;
}
.header .user .info .greeting {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.7;
}
.header .user .info .greeting p {
  font-size: 14px;
}
.header .user .info .name {
  font-size: 24px;
  font-family: "STC-Bold";
  margin-top: 5px !important;
}
.header .notifications {
  position: relative;
}
.header .notifications .number {
  position: absolute;
  top: -10px;
  right: -8px;
  width: 20px;
  height: 20px;
  background-color: #FE6161;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  font-size: 12px;
  font-family: "STC-Bold";
  color: #fff;
  display: flex;
  justify-content: center;
  line-height: 20px;
}

/* ===================== */
/*  footer  */
/* ===================== */
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1;
}
.footer .menu {
  background-color: #fff;
  padding: 20px 45px 15px;
  border-radius: 25px 25px 0 0;
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.04);
}
.footer .menu ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer .menu ul li .box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
}
.footer .menu ul li .box .icon,
.footer .menu ul li .box svg {
  width: 25px;
  height: 25px;
}
.footer .menu ul li .box p {
  font-size: 14px;
  font-family: "STC-Bold";
  color: #71868F;
}
.footer .menu ul li .box.active::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background-color: #11A7EC;
}

/* ===================== */
/* choose language */
/* ===================== */
.choose-language {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 0 65px;
  background-color: #11A7EC;
}
.choose-language .title {
  font-size: 18px;
  font-family: "STC-Bold";
  color: #fff;
}
.choose-language .languages {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
.choose-language .languages .lang {
  width: 100%;
  height: 55px;
  background-color: #C9ECFC;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-family: "STC-Bold";
  color: #000;
}

/* ===================== */
/* on boarding page */
/* ===================== */
.on-boarding {
  background-color: #EFFAFF;
  padding: 100px 0 55px;
}
.on-boarding .slider {
  padding-bottom: 95px;
}
.on-boarding .slider .box img {
  display: block;
  margin: auto;
  max-width: 100%;
  height: 300px;
}
.on-boarding .slider .box p {
  max-width: 280px;
  text-align: center;
  margin: 65px auto 0;
  font-size: 25px;
  font-family: "STC-Bold";
  line-height: 35px;
  color: #0A4C6B;
}
.on-boarding .slider .VueCarousel .VueCarousel-pagination .VueCarousel-dot {
  width: 10px !important;
  height: 3px !important;
  background-color: #CCCCCC !important;
  border-radius: 100px;
}
.on-boarding .slider .VueCarousel .VueCarousel-pagination .VueCarousel-dot.VueCarousel-dot--active {
  width: 20px !important;
  background-color: #5EBAE6 !important;
}
.on-boarding .btn-style {
  font-size: 20px;
}

/* ===================== */
/*  logIn */
/* ===================== */
.login {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F1F4F6;
}
.login .logo {
  display: block;
  margin: auto;
}
.login .welcome {
  padding: 75px 0 45px;
  text-align: center;
}
.login .welcome p {
  font-size: 25px;
  font-family: "STC-Bold";
  color: #11A7EC;
  margin-bottom: 5px !important;
}
.login .welcome span {
  font-size: 16px;
  color: #0A4C6B;
}
.login .login-form {
  width: 100%;
}
.login .login-form .phone {
  position: relative;
}
.login .login-form .phone .box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
  width: 115px;
  height: 45px;
  background-color: #EEF8FC !important;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.login .login-form .phone .box svg {
  margin-bottom: 5px;
}
.login .login-form .phone .box .code {
  font-size: 14px;
  font-family: "STC-Bold";
  color: #0A4C6B;
}
.login .login-form .phone .vue-tel-input {
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.login .login-form .phone .vue-tel-input .vti__dropdown {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
  width: 115px;
  height: 45px;
  background-color: #EEF8FC !important;
  border-radius: 5px;
}
.login .login-form .phone .vue-tel-input .vti__dropdown .vti__selection {
  justify-content: flex-end;
}
.login .login-form .phone .vue-tel-input .vti__dropdown .vti__selection .vti__dropdown-arrow {
  position: absolute;
  right: 15px;
}
.login .login-form .phone .vue-tel-input .vti__dropdown:hover {
  background-color: #EEF8FC !important;
}
.login .login-form input {
  width: 100%;
  height: 60px;
  padding: 25px 25px 25px 130px;
  border-radius: 5px;
  font-size: 16px;
  color: #000;
  text-align: left;
}
.login .login-form .btn-style {
  margin-top: 15px;
}
.login .visitor {
  display: block;
  text-align: center;
  font-size: 16px;
  color: #0A4C6B;
  margin: 15px 0 40px;
}
.login .visitor svg {
  margin-right: 15px;
}

/* ===================== */
/*  OTP */
/* ===================== */
.otp {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F1F4F6;
}
.otp .confirm-number {
  width: 100%;
  background-color: #fff;
  padding: 65px 40px 30px 30px;
  position: relative;
  overflow: hidden;
}
.otp .confirm-number .content {
  color: #0A4C6B;
}
.otp .confirm-number .content p {
  font-size: 25px;
  font-family: "STC-Bold";
}
.otp .confirm-number .content > span {
  display: block;
  font-size: 16px;
  margin: 5px 0 15px;
}
.otp .confirm-number .content .number {
  width: 205px;
  height: 55px;
  background-color: #F9F9F9;
  border-radius: 25px;
  padding: 15px 35px 10px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.otp .confirm-number .content .number span {
  font-size: 18px;
}
.otp .confirm-number .icon {
  position: absolute;
  bottom: -35px;
  left: 7%;
  opacity: 25%;
}
.otp .otp-form {
  margin-top: 85px;
}
.otp .otp-form .otp-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.otp .otp-form .otp-box.type .otp-input {
  background-color: #CDEEFE;
}
.otp .otp-form .otp-box .otp-input {
  width: 80px;
  height: 80px;
  padding: 20px 30px 10px;
  margin: 0 10px;
  font-size: 30px;
  font-family: "STC-Light";
  color: #000;
  border: none;
  border-radius: 5px;
  text-align: center;
  background-color: #fff;
}
.otp .otp-form .otp-box .otp-input:focus {
  background-color: #CDEEFE;
}
@media (max-width: 476px) {
  .otp .otp-form .otp-box .otp-input {
    width: 70px;
    height: 70px;
    padding: 20px 20px 10px;
  }
}
@media (max-width: 375px) {
  .otp .otp-form .otp-box .otp-input {
    width: 55px;
    height: 55px;
    padding: 15px;
  }
}
.otp .otp-form .btn-style {
  margin: 45px 0 30px;
}
.otp .otp-form .resend-code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.otp .otp-form .resend-code p,
.otp .otp-form .resend-code span {
  font-size: 16px;
  font-family: "STC-Bold";
}
.otp .otp-form .re-send {
  display: block;
  font-size: 16px;
  font-family: "STC-Bold";
  color: #11A7EC;
  text-decoration: underline !important;
  margin-top: 25px;
  text-align: center;
}

/* ===================== */
/*  registration */
/* ===================== */
.registration {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 35px 0 55px;
  background-color: #F1F4F6;
}
.registration form .group-input {
  margin-bottom: 20px;
  /* The container */
  /* When the radio button is checked, add a blue background */
}
.registration form .group-input p.label {
  font-size: 14px;
  font-family: "STC-Bold";
  margin-bottom: 5px !important;
}
.registration form .group-input p.label.required::after {
  content: "*";
  color: #FF0000;
}
.registration form .group-input input:not([type=radio]) {
  width: 100%;
  height: 60px;
  border-radius: 5px;
  padding: 20px 15px;
}
.registration form .group-input input:not([type=radio])::-moz-placeholder {
  font-size: 14px;
  color: #000;
  opacity: 1;
}
.registration form .group-input input:not([type=radio])::placeholder {
  font-size: 14px;
  color: #000;
  opacity: 1;
}
.registration form .group-input .gender-boxes {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.registration form .group-input .gender-boxes .box {
  flex-basis: 45%;
  height: 60px;
  background-color: #fff;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  border: 2px solid #fff;
}
.registration form .group-input .gender-boxes .box.active {
  background-color: #DEF1F9;
  border-color: #11A7EC;
}
.registration form .group-input .select-box {
  width: 100%;
  height: 60px;
  background-color: #fff;
  border-radius: 5px;
  padding: 20px 15px 20px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.registration form .group-input .phone {
  position: relative;
}
.registration form .group-input .phone .vue-tel-input {
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.registration form .group-input .phone .vue-tel-input .vti__dropdown {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
  width: 115px;
  height: 45px;
  background-color: #EEF8FC !important;
  border-radius: 5px;
}
.registration form .group-input .phone .vue-tel-input .vti__dropdown .vti__selection {
  justify-content: flex-end;
}
.registration form .group-input .phone .vue-tel-input .vti__dropdown .vti__selection .vti__dropdown-arrow {
  position: absolute;
  right: 15px;
}
.registration form .group-input .phone .vue-tel-input .vti__dropdown:hover {
  background-color: #EEF8FC !important;
}
.registration form .group-input .phone .code {
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  left: 50px;
  font-size: 14px;
  font-family: "STC-Bold";
  color: #0A4C6B;
}
.registration form .group-input .phone input {
  font-size: 14px;
  font-family: "STC-Bold";
  color: #0A4C6B;
  text-align: left;
  padding-left: 130px;
}
.registration form .group-input .phone .check-icon {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
}
.registration form .group-input .phone .valid-text {
  position: absolute;
  bottom: -30px;
  right: 0;
  font-size: 14px;
  font-family: "STC-Light";
  color: #00B47D;
}
.registration form .group-input .phone.valid input {
  background-color: #E0F8F0;
}
.registration form .group-input .phone.valid .vue-tel-input .vti__dropdown {
  background-color: #FFFFFF !important;
}
.registration form .group-input .checkbox-style {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  /* Hide the browser's default radio button */
  /* Create a custom radio button */
}
.registration form .group-input .checkbox-style input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  /* Show the indicator (dot/circle) when checked */
}
.registration form .group-input .checkbox-style input:checked ~ .checkmark::after {
  display: block;
}
.registration form .group-input .checkbox-style .checkmark {
  position: absolute;
  top: -9px;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #fff;
  border: 1px solid #E2E2E2;
  border-radius: 50%;
  /* Create the indicator (the dot/circle - hidden when not checked) */
}
.registration form .group-input .checkbox-style .checkmark::after {
  content: "";
  position: absolute;
  display: none;
  /* Style the indicator (dot/circle) */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}
.registration form .group-input .checkbox-style input:checked ~ .checkmark {
  background-color: #11A7EC;
  border: 1px solid #11A7EC;
}
.registration form .btn-style {
  margin: 55px auto 20px;
}
.registration form .terms-conditions {
  text-align: center;
  font-size: 14px;
}
.registration form .terms-conditions p {
  font-family: "STC-Light";
  color: #929292;
  margin-bottom: 20px !important;
}
.registration form .terms-conditions a {
  font-family: "STC-Bold";
  color: #11A7EC;
  text-decoration: underline;
}

/* ===================== */
/*  Home Page */
/* ===================== */
.home-page .home-slider {
  padding-top: 10px;
  position: relative;
  z-index: 999;
}
.home-page .home-slider .box img {
  display: block;
  margin: auto;
  max-width: 100%;
  height: 100%;
}
.home-page .home-slider .hooper .hooper-list .hooper-pagination {
  position: unset;
  transform: none;
  align-items: center;
  justify-content: center;
}
.home-page .home-slider .hooper .hooper-list .hooper-pagination .hooper-indicators .hooper-indicator {
  width: 6px !important;
  height: 6px !important;
  background-color: #F3F5F9 !important;
  margin: 0px 4px !important;
  border-radius: 50% !important;
  position: relative;
}
.home-page .home-slider .hooper .hooper-list .hooper-pagination .hooper-indicators .hooper-indicator.is-active {
  background-color: #fff !important;
  opacity: 0.5;
}
.home-page .educational-box {
  margin: 20px 0;
}
.home-page .educational-box .content {
  background-color: #DFF5FF;
  border-radius: 25px;
  padding: 20px;
}
.home-page .educational-box .content .title {
  font-size: 20px;
  font-family: "STC-Bold";
  color: #67C6E3;
  margin-bottom: 10px !important;
}
.home-page .educational-box .content .select-box {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-family: "STC-Bold";
  color: #378CE7;
}
.home-page .materials-section {
  padding: 20px 0;
}
.home-page .materials-section .boxes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.home-page .materials-section .box {
  background-color: #F3F5F9;
  border-radius: 5px;
  padding: 10px;
  margin: 0 5px;
  position: relative;
  margin-bottom: 10px;
  width: 45%;
}
.home-page .materials-section .box .icon {
  width: 60px;
  height: 70px;
  margin: 0 auto 20px;
}
.home-page .materials-section .box .icon img {
  max-width: 100%;
  height: 100%;
}
.home-page .materials-section .box .name {
  font-size: 14px;
  font-family: "STC-Bold";
  color: #0A4C6B;
  text-align: center;
}
.home-page .materials-section .box.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background-color: #11A7EC;
}
.home-page .materials-slider .slider .materials-box {
  background-color: #fff;
  border-radius: 5px;
  padding: 25px 20px 30px;
  direction: rtl;
  margin: 0 10px;
}
.home-page .materials-slider .slider .materials-box .top {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
  padding: 0 10px 25px 0;
  border-bottom: 1px solid #F1F4F6;
}
.home-page .materials-slider .slider .materials-box .top .icon {
  width: 50px;
  height: 50px;
  background-color: #F3F5F9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-page .materials-slider .slider .materials-box .top .icon img {
  width: 30px;
  max-width: 100%;
}
.home-page .materials-slider .slider .materials-box .top .text {
  color: #0A4C6B;
  text-align: center;
}
.home-page .materials-slider .slider .materials-box .top .text p {
  font-size: 16px;
  font-family: "STC-Bold";
  margin-bottom: 5px !important;
}
.home-page .materials-slider .slider .materials-box .top .text span {
  font-size: 14px;
}
.home-page .materials-slider .slider .materials-box .bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
  padding: 20px 10px;
}
.home-page .materials-slider .slider .materials-box .bottom .image {
  display: flex;
  align-items: center;
  gap: 5px;
}
.home-page .materials-slider .slider .materials-box .bottom .image .image-style img {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
  border: 2px solid #FFFFFF;
}
.home-page .materials-slider .slider .materials-box .bottom .image .image-style img:nth-child(1) {
  z-index: 3;
}
.home-page .materials-slider .slider .materials-box .bottom .image .image-style img:nth-child(2) {
  z-index: 2;
  margin-right: -15px;
}
.home-page .materials-slider .slider .materials-box .bottom .image .image-style img:nth-child(3) {
  z-index: 1;
  margin-right: -15px;
}
.home-page .materials-slider .slider .materials-box .bottom .image .number {
  color: #8D93A5;
  font-size: 14px;
}
.home-page .materials-slider .slider .materials-box .bottom .image .number p {
  display: inline-block;
  margin-left: 5px;
  font-family: "STC-Bold";
}
.home-page .materials-slider .slider .materials-box .bottom .text {
  width: 100%;
}
.home-page .materials-slider .slider .materials-box .bottom .text a {
  font-size: 14px;
  color: #fff;
}
.home-page .materials-slider .slider .materials-box .bottom .text a svg {
  margin-right: 15px;
}
.home-page .materials-slider .slider .hooper .hooper-list .hooper-pagination {
  position: unset;
  transform: none;
  align-items: center;
  justify-content: center;
}
.home-page .materials-slider .slider .hooper .hooper-list .hooper-pagination .hooper-indicators .hooper-indicator {
  width: 6px !important;
  height: 6px !important;
  background-color: #D9D9D9 !important;
  margin: 0px 4px !important;
  border-radius: 50% !important;
  position: relative;
}
.home-page .materials-slider .slider .hooper .hooper-list .hooper-pagination .hooper-indicators .hooper-indicator.is-active {
  background-color: #11A7EC !important;
}
.home-page .know-us-more {
  padding: 25px 0 20px;
}
.home-page .know-us-more .content {
  background-color: #11CEEC;
  border-radius: 10px;
  padding: 20px 25px 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}
.home-page .know-us-more .content .text p {
  font-size: 25px;
  font-family: "STC-Bold";
  color: #0A4C6B;
  margin-bottom: 15px !important;
}
.home-page .know-us-more .content .text a {
  width: 155px;
  height: 40px;
  background-color: #0A4C6B;
  border-radius: 20px;
  font-size: 16px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-page .know-us-more .content .icon {
  margin-bottom: -65px;
}
.home-page .partners .content {
  background-color: #F3F5F9;
  border-radius: 10px;
  padding: 35px 30px 30px 25px;
}
.home-page .partners .content .title {
  font-size: 20px;
  font-family: "STC-Bold";
  color: #0A4C6B;
  margin-bottom: 20px !important;
}
.home-page .partners .content .slider .box {
  margin: 5px;
  direction: rtl;
}
.home-page .partners .content .slider .box .image {
  width: 125px;
  height: 75px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.home-page .partners .content .slider .box .image img {
  max-width: 100%;
  max-height: 100%;
}
.home-page .partners .content .slider .box .text {
  font-size: 14px;
  font-family: "STC-Bold";
  color: #0A4C6B;
}
.home-page .partners .content .slider .hooper .hooper-list .hooper-pagination {
  position: unset;
  transform: none;
  align-items: center;
  justify-content: center;
}
.home-page .partners .content .slider .hooper .hooper-list .hooper-pagination .hooper-indicators .hooper-indicator {
  width: 6px !important;
  height: 6px !important;
  background-color: #D9D9D9 !important;
  margin: 0px 4px !important;
  border-radius: 50% !important;
  position: relative;
}
.home-page .partners .content .slider .hooper .hooper-list .hooper-pagination .hooper-indicators .hooper-indicator.is-active {
  background-color: #11A7EC !important;
}
.home-page .answer-notifications {
  position: fixed;
  width: 100%;
  z-index: 999999;
  top: 0;
}
.home-page .answer-notifications .content > div {
  padding: 20px 30px;
  font-size: 16px;
  font-family: "STC-Bold";
}
.home-page .answer-notifications .content > div img {
  margin-left: 25px;
}
.home-page .answer-notifications .content .correct {
  background-color: #EEF8EF;
  color: #60BD6B;
}
.home-page .answer-notifications .content .incorrect {
  background-color: #F8EEEE;
  color: #FF4040;
}
.home-page .answer-notifications .content .time-expires {
  background-color: #fff;
}

/* ===================== */
/*  stages Page */
/* ===================== */
.stages-page {
  padding: 20px 0;
  background-color: #F1F4F6;
}
.stages-page .stage-box {
  background-color: #fff;
  margin-bottom: 10px;
  padding: 30px 25px 35px 0;
  position: relative;
}
.stages-page .stage-box .text {
  padding-right: 10px;
  margin-bottom: 25px;
}
.stages-page .stage-box .text p {
  font-size: 20px;
  font-family: "STC-Bold";
  margin-bottom: 5px !important;
}
.stages-page .stage-box .text span {
  font-size: 14px;
  color: #68728B;
}
.stages-page .stage-box .subscription {
  position: absolute;
  top: 35px;
  left: 25px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}
.stages-page .stage-box .slider .box {
  height: 35px;
  background-color: #F3F5F9;
  border-radius: 20px;
  font-size: 14px;
  font-family: "STC-Bold";
  color: #4C6B82;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
}
.stages-page .stage-box.primary .text p {
  color: #11B0EC;
}
.stages-page .stage-box.primary .subscription p {
  color: #11B0EC;
}
.stages-page .stage-box.primary .subscription svg path {
  fill: #11A7EC;
}
.stages-page .stage-box.primary .slider .box.active {
  background-color: #11B0EC;
  color: #fff;
}
.stages-page .stage-box.intermediate .text p {
  color: #60BD6B;
}
.stages-page .stage-box.intermediate .subscription p {
  color: #60BD6B;
}
.stages-page .stage-box.intermediate .subscription svg path {
  fill: #60BD6B;
}
.stages-page .stage-box.intermediate .slider .box.active {
  background-color: #60BD6B;
  color: #fff;
}
.stages-page .stage-box.secondary .text p {
  color: #EFAE1A;
}
.stages-page .stage-box.secondary .subscription p {
  color: #EFAE1A;
}
.stages-page .stage-box.secondary .subscription svg path {
  fill: #EFAE1A;
}
.stages-page .stage-box.secondary .slider .box.active {
  background-color: #EFAE1A;
  color: #fff;
}

/* ===================== */
/*  exams Page */
/* ===================== */
.exams-page {
  background: radial-gradient(circle, rgba(17, 167, 236, 0.5047268908) 0%, rgb(17, 167, 236) 100%);
  min-height: 100vh;
  padding: 80px 0 40px;
}
.exams-page .head {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  height: 60px;
  background-color: #fff;
  margin-bottom: 20px;
}
.exams-page .head .exam-title {
  flex: 1;
  font-size: 14px;
  font-family: "STC-Bold";
}
.exams-page .head .leave {
  transform: rotate(180deg);
}
.exams-page .exam-header {
  color: #fff;
  position: relative;
  z-index: 1;
}
.exams-page .exam-header .content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 25px;
}
.exams-page .exam-header .content .point-hint .hint,
.exams-page .exam-header .content .point-hint .point {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "STC-Bold";
  font-size: 18px;
  color: #fff;
}
.exams-page .exam-header .content .point-hint .hint img,
.exams-page .exam-header .content .point-hint .point img {
  width: 20px;
}
.exams-page .exam-header .content .point-hint .point {
  margin-bottom: 10px;
}
.exams-page .exam-header .content .time-progress .time,
.exams-page .exam-header .content .time-progress .progress-number {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.3);
  padding: 5px;
  border-radius: 25px;
  color: #fff;
}
.exams-page .exam-header .content .time-progress .time span,
.exams-page .exam-header .content .time-progress .progress-number span {
  display: block;
  width: 40px;
}
.exams-page .exam-header .content .time-progress .time img,
.exams-page .exam-header .content .time-progress .progress-number img {
  width: 20px;
}
.exams-page .exam-header .content .time-progress .progress-number {
  margin-top: 10px;
}
.exams-page .exam-header .content .time-progress .progress-number .number {
  display: flex;
  align-items: center;
  width: 40px;
}
.exams-page .exam-header .content .time-progress .progress-number img {
  width: 15px;
}
.exams-page .exam-body {
  position: relative;
  z-index: 1;
}
.exams-page .exam-body .content {
  background-color: #fff;
  border-radius: 10px;
  padding: 30px 20px;
}
.exams-page .exam-body .content .question {
  margin-bottom: 20px;
}
.exams-page .exam-body .content .question .title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.exams-page .exam-body .content .question .title .number {
  border-radius: 50%;
  width: 45px;
  height: 45px;
  color: #fff;
  background-color: #11a7ec;
  display: flex;
  align-items: center;
  justify-content: center;
}
.exams-page .exam-body .content .question .title .question-title {
  flex: 1;
  font-size: 20px;
  font-family: "STC-Bold";
  color: #11a7ec;
}
.exams-page .exam-body .content .answer li {
  margin-bottom: 15px;
}
.exams-page .exam-body .content .answer li .box {
  background-color: #f6f6f6;
  border-radius: 50px;
  padding: 20px 25px;
  padding-right: 75px;
  font-size: 16px;
  font-family: "STC-Bold";
  position: relative;
}
.exams-page .exam-body .content .answer li .box.selected-answer {
  background-color: #2ea6de;
  color: #fff;
}
.exams-page .exam-body .content .answer li .box.selected-answer::after {
  background-color: #32bea6;
  color: #fff;
}
.exams-page .exam-body .content .answer li .box.hint-answer {
  background-color: #47b347;
  color: #fff;
}
.exams-page .exam-body .content .answer li .box.hint-answer::after {
  background-color: #32bea6;
  color: #fff;
}
.exams-page .exam-body .content .answer li .box::after {
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  background-color: #787878;
}
.exams-page .exam-body .content .answer li .box label {
  width: 100%;
}
.exams-page .exam-body .content .answer li .box label input {
  opacity: 0;
}
.exams-page .exam-body .content .answer li:nth-child(1) .box::after {
  content: "أ";
}
.exams-page .exam-body .content .answer li:nth-child(2) .box::after {
  content: "ب";
}
.exams-page .exam-body .content .answer li:nth-child(3) .box::after {
  content: "ج";
}
.exams-page .exam-body .content .answer li:nth-child(4) .box::after {
  content: "د";
}
.exams-page .exam-body .content .answer li:nth-child(5) .box::after {
  content: "هـ";
}
.exams-page .exam-bg {
  background-image: url("../../assets/images/bg.png");
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  opacity: 0.3;
  background-position: bottom;
}

/* ===================== */
/*  final result  Page */
/* ===================== */
.final-result {
  padding: 60px 0;
  background: radial-gradient(circle, rgba(17, 167, 236, 0.5047268908) 0%, rgb(17, 167, 236) 100%);
  min-height: 100vh;
}
.final-result .box .head {
  position: relative;
  z-index: 1;
}
.final-result .box .head .ribbon .ribbon-shape {
  display: block;
  margin: auto;
  position: relative;
  bottom: -60px;
}
.final-result .box .head .ribbon .text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 80px;
  z-index: 1;
  text-align: center;
  width: 220px;
  font-size: 28px;
  font-family: "STC-Bold";
  color: #fff;
}
.final-result .box .head .stars {
  width: 120px;
  position: relative;
  margin: auto;
}
.final-result .box .head .stars .star.big-star {
  position: absolute;
  left: 26%;
  top: 16px;
  transform: scale(0);
  z-index: 2;
  animation-delay: 6s;
}
.final-result .box .head .stars .star.small-star {
  position: absolute;
  left: 112px;
  top: 16px;
  transform: scale(0);
  z-index: 2;
}
.final-result .box .head .stars .star.small-star.right {
  right: -3%;
  top: 33px;
  animation-delay: 0s;
}
.final-result .box .head .stars .star.small-star.left {
  left: -3%;
  top: 33px;
  animation-delay: 3s;
}
.final-result .box .head .stars .star.active {
  animation: scaleAnimation 3s ease-in-out forwards;
}
.final-result .box .head .stars .empty {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
@keyframes scaleAnimation {
  0% {
    transform: scale(0.1);
  }
  50% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}
.final-result .box .content {
  background-color: #fff;
  border-radius: 20px;
  width: 100%;
  padding: 70px 10px 30px;
  border-bottom: 4px solid #006899;
  filter: drop-shadow(0px 4px rgba(0, 0, 0, 0.15));
}
.final-result .box .content .exam-name {
  text-align: center;
  font-size: 18px;
  font-family: "STC-Bold";
}
.final-result .box .content ul li .box {
  text-align: center;
}
.final-result .box .content ul li .box .title {
  font-size: 24px;
  font-family: "STC-Bold";
  color: #11A7EC;
}
.final-result .box .content ul li .box .info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.final-result .box .content ul li .box .info img {
  width: 25px;
}
.final-result .box .content ul li .box .info .number {
  font-size: 22px;
  font-family: "STC-Bold";
}
.final-result .box .content .button {
  width: 90%;
  margin: 10px auto;
  height: 70px;
  border-radius: 35px;
  position: relative;
  overflow: hidden;
  filter: drop-shadow(0px 4px rgba(0, 0, 0, 0.15));
  border-bottom: 6px solid #4EC306 !important;
  box-shadow: 0 5px 1px 0px #fff;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-family: "STC-Bold";
  color: #fff;
}
.final-result .box .content .button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: -50px;
  border-right: 50px solid transparent;
  border-bottom: 80px solid #8FFC06;
  transform: translateX(-49%);
  z-index: -1;
}
.final-result .box .content .button::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: -50px;
  border-left: 50px solid transparent;
  border-top: 80px solid #67EB00;
  transform: translateX(49%);
  z-index: -1;
}
.final-result .thanks {
  text-align: center;
}
.final-result .thanks p {
  font-size: 35px;
  font-family: "STC-Bold";
  padding: 15px 0 10px;
}
.final-result .thanks span {
  font-size: 20px;
}
.final-result .progress-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 35px 0 135px;
}
.final-result .progress-circle svg {
  border: 25px solid #fff;
  border-radius: 50%;
  box-sizing: content-box;
}
.final-result .progress-circle .progress-text {
  font-size: 30px;
  font-family: "STC-Bold";
  color: #1DD2AD;
  position: absolute;
  top: 30%;
}
.final-result .progress-circle p {
  font-size: 20px;
  font-family: "STC-Bold";
  margin-top: 20px;
}
.final-result .btn-style {
  height: 60px;
  border-radius: 30px;
}

/* ===================== */
/*  my account  Page */
/* ===================== */
.my-account .head {
  background-color: #fff;
  position: relative;
  z-index: 999;
  margin-top: -5px;
  padding: 0 25px 20px;
}
.my-account .head .user {
  display: flex;
  align-items: center;
  gap: 20px;
}
.my-account .head .user .image {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F3F3F3;
  border-radius: 50%;
  overflow: hidden;
}
.my-account .head .user .image img {
  max-width: 100%;
}
.my-account .head .user .image svg {
  font-size: 23px;
  color: #787878;
}
.my-account .head .user .info {
  color: #0A4C6B;
}
.my-account .head .user .info span {
  font-size: 14px;
}
.my-account .head .user .info p {
  font-size: 18px;
  font-family: "STC-Bold";
  margin-top: 5px;
}
.my-account .head a {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-family: "STC-Light";
  color: #0A4C6B;
  text-decoration: underline;
}
.my-account .upload-image {
  position: relative;
}
.my-account .upload-image p {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-family: "STC-Light";
  color: #0A4C6B;
  text-decoration: underline;
}
.my-account .upload-image input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  top: 0;
}
.my-account .content {
  padding: 0 10px;
}
.my-account .content .title {
  font-size: 20px;
  font-family: "STC-Bold";
  margin-bottom: 15px !important;
}
.my-account .content .menu {
  background-color: #F3F5F9;
  border-radius: 10px;
}
.my-account .content .menu:first-of-type {
  margin-bottom: 25px;
}
.my-account .content .menu li:not(:first-child) {
  border-top: 1px solid #fff;
}
.my-account .content .menu li .box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 15px 30px;
}
.my-account .content .menu li .box .text {
  display: flex;
  align-items: center;
  gap: 25px;
  font-size: 16px;
  font-family: "STC-Bold";
  color: #0A4C6B;
}
.my-account .content .menu li .box .text .icon {
  width: 20px;
  height: 24px;
}
.my-account .content .menu li .box .text .icon img {
  width: 100%;
  height: 100%;
}
.my-account .content .menu li .box .checks {
  margin-top: 10px;
  display: flex;
  align-items: center;
  margin-right: 5px;
}
.my-account .content .menu li .box .checks .switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 18px;
  /* Rounded sliders */
}
.my-account .content .menu li .box .checks .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.my-account .content .menu li .box .checks .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #F3F5F9;
  transition: 0.4s;
}
.my-account .content .menu li .box .checks .switch .slider::before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  right: -5px;
  bottom: -1.5px;
  background-color: white;
  transition: 0.4s;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.my-account .content .menu li .box .checks .switch input:checked + .slider {
  background-color: rgba(17, 167, 236, 0.231372549);
}
.my-account .content .menu li .box .checks .switch input:focus + .slider {
  box-shadow: 0 0 1px rgba(17, 167, 236, 0.231372549);
}
.my-account .content .menu li .box .checks .switch input:checked + .slider:before {
  transform: translateX(-14px);
  background-color: #11A7EC;
}
.my-account .content .menu li .box .checks .switch .slider.round {
  border-radius: 34px;
}
.my-account .content .menu li .box .checks .switch .slider.round:before {
  border-radius: 50%;
}

/* ===================== */
/*  personal information Page */
/* ===================== */
.personal-information {
  padding: 25px 0 75px;
}
.personal-information form .group-input {
  margin-bottom: 20px;
  /* The container */
  /* When the radio button is checked, add a blue background */
}
.personal-information form .group-input p.label {
  font-size: 14px;
  font-family: "STC-Bold";
  margin-bottom: 5px !important;
  color: #fff;
}
.personal-information form .group-input p.label.required::after {
  content: "*";
  color: #FF0000;
}
.personal-information form .group-input input:not([type=radio]) {
  width: 100%;
  height: 60px;
  border-radius: 5px;
  padding: 20px 15px;
}
.personal-information form .group-input input:not([type=radio])::-moz-placeholder {
  font-size: 14px;
  color: #000;
  opacity: 1;
}
.personal-information form .group-input input:not([type=radio])::placeholder {
  font-size: 14px;
  color: #000;
  opacity: 1;
}
.personal-information form .group-input .gender-boxes {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.personal-information form .group-input .gender-boxes .box {
  flex-basis: 45%;
  height: 60px;
  background-color: #fff;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  border: 2px solid #fff;
}
.personal-information form .group-input .gender-boxes .box.active {
  background-color: #DEF1F9;
  border-color: #11A7EC;
}
.personal-information form .group-input .select-box {
  width: 100%;
  height: 60px;
  background-color: #fff;
  border-radius: 5px;
  padding: 20px 15px 20px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.personal-information form .group-input .phone {
  position: relative;
}
.personal-information form .group-input .phone .check-icon {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
}
.personal-information form .group-input .phone .valid-text {
  position: absolute;
  bottom: -30px;
  right: 0;
  font-size: 14px;
  font-family: "STC-Light";
  color: #00B47D;
}
.personal-information form .group-input .phone.valid input {
  background-color: #E0F8F0;
}
.personal-information form .group-input .phone.valid .vue-tel-input .vti__dropdown {
  background-color: #FFFFFF !important;
}
.personal-information form .group-input .phone {
  position: relative;
}
.personal-information form .group-input .phone .box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
  width: 115px;
  height: 45px;
  background-color: #EEF8FC !important;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.personal-information form .group-input .phone .box svg {
  margin-bottom: 5px;
}
.personal-information form .group-input .phone .box .code {
  font-size: 14px;
  font-family: "STC-Bold";
  color: #0A4C6B;
}
.personal-information form .group-input .phone .vue-tel-input {
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.personal-information form .group-input .phone .vue-tel-input .vti__dropdown {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
  width: 115px;
  height: 45px;
  background-color: #EEF8FC !important;
  border-radius: 5px;
}
.personal-information form .group-input .phone .vue-tel-input .vti__dropdown .vti__selection {
  justify-content: flex-end;
}
.personal-information form .group-input .phone .vue-tel-input .vti__dropdown .vti__selection .vti__dropdown-arrow {
  position: absolute;
  right: 15px;
}
.personal-information form .group-input .phone .vue-tel-input .vti__dropdown:hover {
  background-color: #EEF8FC !important;
}
.personal-information form .group-input .phone input {
  width: 100%;
  height: 60px;
  padding: 25px 25px 25px 130px;
  border-radius: 5px;
  font-size: 16px;
  color: #000;
  text-align: left;
}
.personal-information form .group-input .checkbox-style {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  /* Hide the browser's default radio button */
  /* Create a custom radio button */
}
.personal-information form .group-input .checkbox-style input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  /* Show the indicator (dot/circle) when checked */
}
.personal-information form .group-input .checkbox-style input:checked ~ .checkmark::after {
  display: block;
}
.personal-information form .group-input .checkbox-style .checkmark {
  position: absolute;
  top: -9px;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #fff;
  border: 1px solid #E2E2E2;
  border-radius: 50%;
  /* Create the indicator (the dot/circle - hidden when not checked) */
}
.personal-information form .group-input .checkbox-style .checkmark::after {
  content: "";
  position: absolute;
  display: none;
  /* Style the indicator (dot/circle) */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}
.personal-information form .group-input .checkbox-style input:checked ~ .checkmark {
  background-color: #11A7EC;
  border: 1px solid #11A7EC;
}
.personal-information form .btn-style {
  margin: 55px auto 20px;
  background-color: #fff;
  color: #11A7EC;
}

/* ===================== */
/*  subscriptions Page */
/* ===================== */
.subscriptions-page {
  height: 100vh;
  padding-top: 25px;
}
.subscriptions-page .content-style {
  padding: 20px 10px;
}
.subscriptions-page .box {
  background-color: #F3F5F9;
  border-radius: 10px;
  padding: 50px 25px 30px;
  margin-bottom: 10px;
}
.subscriptions-page .box .edu-level {
  font-size: 18px;
  font-family: "STC-Bold";
  color: #0A4C6B;
}
.subscriptions-page .box .menu {
  padding: 30px 0;
}
.subscriptions-page .box .menu li {
  border-top: 1px solid #F3F5F9;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-family: "STC-Bold";
}
.subscriptions-page .box .menu li:last-child {
  border-bottom: 1px solid #F3F5F9;
}
.subscriptions-page .box .menu li .title {
  color: #0A4C6B;
}
.subscriptions-page .box .menu li.type .info {
  display: flex;
  align-items: center;
  gap: 5px;
}
.subscriptions-page .box .menu li.type .info p {
  color: #11A7EC;
}
.subscriptions-page .box .menu li.status .info.paid {
  display: flex;
  align-items: center;
  gap: 5px;
}
.subscriptions-page .box .menu li.status .info.paid p {
  color: #00B957;
}
.subscriptions-page .box .btn-style {
  height: 60px;
}
.subscriptions-page .packages .box:first-child {
  margin-bottom: 20px;
}
.subscriptions-page .no-subscriptions {
  text-align: center;
}

/* ===================== */
/*  statistics Page */
/* ===================== */
.statistics-page {
  padding-top: 10px;
  background-color: #F3F5F9;
}
.statistics-page .box {
  background-color: #fff;
  border-radius: 10px;
  padding: 35px 40px 15px;
}
.statistics-page .box:first-child {
  margin-bottom: 25px;
}
.statistics-page .box .head {
  color: #0A4C6B;
  margin-bottom: 30px;
}
.statistics-page .box .head p {
  font-size: 18px;
  font-family: "STC-Bold";
  margin-bottom: 5px !important;
}
.statistics-page .box .head span {
  font-size: 14px;
  font-family: "STC-Light";
}
.statistics-page .box .point {
  padding-top: 25px;
  border-top: 1px solid #F3F5F9;
}
.statistics-page .box .point span {
  font-size: 14px;
}
.statistics-page .box .point p {
  font-size: 30px;
  font-family: "STC-Bold";
}
.statistics-page .box .ct-chart-bar g .ct-series.ct-series-a line:nth-child(1) {
  stroke: rgba(17, 167, 236, 0.25);
}
.statistics-page .box .ct-chart-bar g .ct-series.ct-series-a line:nth-child(2) {
  stroke: rgba(241, 108, 108, 0.25);
}
.statistics-page .box .ct-chart-bar g .ct-series.ct-series-a line:nth-child(3) {
  stroke: rgba(17, 236, 229, 0.25);
}
.statistics-page .box .ct-chart-bar g .ct-series.ct-series-b line:nth-child(1) {
  stroke: #11A7EC;
}
.statistics-page .box .ct-chart-bar g .ct-series.ct-series-b line:nth-child(2) {
  stroke: #F16C6C;
}
.statistics-page .box .ct-chart-bar g .ct-series.ct-series-b line:nth-child(3) {
  stroke: #11ECE5;
}
.statistics-page .box .ct-chart-bar g.ct-grids .ct-grid.ct-horizontal {
  display: none;
}
.statistics-page .box .ct-chart-bar g.ct-grids .ct-grid.ct-vertical {
  stroke: #F3F5F9;
  stroke-width: 1px;
  stroke-dasharray: 0px;
}
.statistics-page .box .ct-chart-bar g.ct-labels .ct-label.ct-horizontal, .statistics-page .box .ct-chart-bar g.ct-labels .ct-label.ct-vertical {
  font-size: 14px;
  color: #0A4C6B;
  margin-top: 10px;
}

/* ===================== */
/*  contributors Page */
/* ===================== */
.contributors-page,
.all-contributors-page {
  background-color: #F3F5F9;
}
.contributors-page .not-added-questions,
.all-contributors-page .not-added-questions {
  background-color: #fff;
  position: relative;
  z-index: 999;
  margin-top: -5px;
  padding: 35px 0;
}
.contributors-page .not-added-questions .content,
.all-contributors-page .not-added-questions .content {
  background-color: #3E7EEC;
  padding: 40px 20px 30px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}
.contributors-page .not-added-questions .content .text p,
.all-contributors-page .not-added-questions .content .text p {
  font-size: 18px;
  font-family: "STC-Bold";
}
.contributors-page .not-added-questions .content .text span,
.all-contributors-page .not-added-questions .content .text span {
  display: block;
  max-width: 225px;
  font-size: 16px;
  font-family: "STC-Light";
  line-height: 25px;
  margin: 5px 0 15px;
}
.contributors-page .not-added-questions .content .text a,
.all-contributors-page .not-added-questions .content .text a {
  width: 140px;
  height: 50px;
  background-color: #5790F1;
  border-radius: 30px;
  font-size: 16px;
  font-family: "STC-Bold";
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contributors-page .content,
.all-contributors-page .content {
  padding: 20px 0;
}
.contributors-page .content .name,
.all-contributors-page .content .name {
  width: -moz-fit-content;
  width: fit-content;
  height: 60px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 18px;
  font-family: "STC-Bold";
  color: #77929E;
  margin: auto;
  padding: 0 30px;
}
.contributors-page .content .tabs,
.all-contributors-page .content .tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.contributors-page .content .tabs > div,
.all-contributors-page .content .tabs > div {
  flex-basis: 48%;
  height: 60px;
  background-color: #FFFFFF;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-family: "STC-Bold";
  color: #77929E;
}
.contributors-page .content .tabs > div p,
.all-contributors-page .content .tabs > div p {
  position: relative;
}
.contributors-page .content .tabs > div.active,
.all-contributors-page .content .tabs > div.active {
  color: #11A7EC;
}
.contributors-page .content .tabs > div.active p::after,
.all-contributors-page .content .tabs > div.active p::after {
  content: "";
  position: absolute;
  bottom: -17px;
  right: 0;
  width: 100%;
  height: 3px;
  background-color: #11A7EC;
}
.contributors-page .content .no-questions,
.all-contributors-page .content .no-questions {
  text-align: center;
  color: #567C8E;
  padding: 90px 0;
}
.contributors-page .content .no-questions p,
.all-contributors-page .content .no-questions p {
  font-size: 25px;
  font-family: "STC-Bold";
  margin: 15px 0 5px !important;
}
.contributors-page .content .contributors,
.contributors-page .content .self,
.all-contributors-page .content .contributors,
.all-contributors-page .content .self {
  padding: 20px 0;
}
.contributors-page .content .contributors .box,
.contributors-page .content .self .box,
.all-contributors-page .content .contributors .box,
.all-contributors-page .content .self .box {
  background-color: #fff;
  border-radius: 10px;
}
.contributors-page .content .contributors .box:not(:last-child),
.contributors-page .content .self .box:not(:last-child),
.all-contributors-page .content .contributors .box:not(:last-child),
.all-contributors-page .content .self .box:not(:last-child) {
  margin-bottom: 20px;
}
.contributors-page .content .contributors .box .question p,
.contributors-page .content .self .box .question p,
.all-contributors-page .content .contributors .box .question p,
.all-contributors-page .content .self .box .question p {
  max-width: 210px;
  margin: 15px 0 10px !important;
  font-size: 18px;
  font-family: "STC-Bold";
  line-height: 25px;
  color: #0A4C6B;
}
.contributors-page .content .contributors .box .question span,
.contributors-page .content .self .box .question span,
.all-contributors-page .content .contributors .box .question span,
.all-contributors-page .content .self .box .question span {
  font-size: 14px;
  font-family: "STC-Light";
  color: #91A2AA;
}
.contributors-page .content .self .box,
.all-contributors-page .content .self .box {
  padding: 20px 25px 30px 20px;
}
.contributors-page .content .self .box .options,
.all-contributors-page .content .self .box .options {
  text-align: end;
  position: relative;
}
.contributors-page .content .self .box .options .menu,
.all-contributors-page .content .self .box .options .menu {
  position: absolute;
  left: 10px;
  background-color: #fff;
  border-radius: 5px;
  padding: 35px 30px 35px 45px;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.06);
}
.contributors-page .content .self .box .options .menu li,
.all-contributors-page .content .self .box .options .menu li {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  font-family: "STC-Bold";
  color: #0A4C6B;
}
.contributors-page .content .self .box .options .menu li:not(:last-child),
.all-contributors-page .content .self .box .options .menu li:not(:last-child) {
  margin-bottom: 25px;
}
.contributors-page .content .contributors .box,
.all-contributors-page .content .contributors .box {
  padding: 25px;
}
.contributors-page .content .contributors .box .info,
.all-contributors-page .content .contributors .box .info {
  padding-top: 20px;
  border-top: 1px solid #F3F5F9;
}
.contributors-page .content .contributors .box .info .info-box,
.all-contributors-page .content .contributors .box .info .info-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.contributors-page .content .contributors .box .info .info-box .content,
.all-contributors-page .content .contributors .box .info .info-box .content {
  display: flex;
  align-items: center;
  gap: 10px;
}
.contributors-page .content .contributors .box .info .info-box .content .image,
.all-contributors-page .content .contributors .box .info .info-box .content .image {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F3F3F3;
  border-radius: 50%;
  overflow: hidden;
  padding-top: 15px;
}
.contributors-page .content .contributors .box .info .info-box .content .image img,
.all-contributors-page .content .contributors .box .info .info-box .content .image img {
  width: 30px;
  height: 35px;
}
.contributors-page .content .contributors .box .info .info-box .content .image svg,
.all-contributors-page .content .contributors .box .info .info-box .content .image svg {
  font-size: 23px;
  color: #787878;
}
.contributors-page .content .contributors .box .info .info-box .content .text,
.all-contributors-page .content .contributors .box .info .info-box .content .text {
  font-size: 14px;
}
.contributors-page .content .contributors .box .info .info-box .content .text p,
.all-contributors-page .content .contributors .box .info .info-box .content .text p {
  font-family: "STC-Bold";
  color: #0A4C6B;
}
.contributors-page .content .contributors .box .info .info-box .content .text span,
.all-contributors-page .content .contributors .box .info .info-box .content .text span {
  color: #4F6671;
}
.contributors-page .content .contributors .box .info .info-box .number,
.all-contributors-page .content .contributors .box .info .info-box .number {
  font-size: 14px;
  color: #4F6671;
}
.contributors-page .content .contributors .box .info .btn-style,
.all-contributors-page .content .contributors .box .info .btn-style {
  height: 60px;
}
.contributors-page .content .contributors .box .options,
.all-contributors-page .content .contributors .box .options {
  text-align: end;
  position: relative;
}
.contributors-page .content .contributors .box .options .menu,
.all-contributors-page .content .contributors .box .options .menu {
  position: absolute;
  left: 10px;
  background-color: #fff;
  border-radius: 5px;
  padding: 35px 30px 35px 45px;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.06);
}
.contributors-page .content .contributors .box .options .menu li,
.all-contributors-page .content .contributors .box .options .menu li {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  font-family: "STC-Bold";
  color: #0A4C6B;
}
.contributors-page .content .contributors .box .options .menu li:not(:last-child),
.all-contributors-page .content .contributors .box .options .menu li:not(:last-child) {
  margin-bottom: 25px;
}

/* ===================== */
/*  contribute with us Page */
/* ===================== */
.contribute-with-us {
  padding: 25px 0 50px;
  background-color: #F3F5F9;
}
.contribute-with-us .answer-notification {
  position: fixed;
  width: 100%;
  z-index: 999999;
  top: 10px;
}
.contribute-with-us .answer-notification .content {
  background-color: #FFFBF3;
  border-radius: 5px;
  padding: 15px 25px 20px 35px;
  font-size: 16px;
  color: #FBA700;
}
.contribute-with-us .answer-notification .content P {
  font-family: "STC-Bold";
  margin-bottom: 5px !important;
}
.contribute-with-us .answer-notification .content span {
  font-family: "STC-Light";
}
.contribute-with-us form .group-input {
  margin-bottom: 20px;
  /* The container */
  /* When the radio button is checked, add a blue background */
}
.contribute-with-us form .group-input p.label {
  font-size: 14px;
  font-family: "STC-Bold";
  margin-bottom: 5px !important;
}
.contribute-with-us form .group-input p.label.required::after {
  content: "*";
  color: #FF0000;
}
.contribute-with-us form .group-input input:not([type=radio]) {
  width: 100%;
  height: 60px;
  border-radius: 5px;
  padding: 20px 15px;
}
.contribute-with-us form .group-input input:not([type=radio])::-moz-placeholder {
  font-size: 14px;
  color: #000;
  opacity: 1;
}
.contribute-with-us form .group-input input:not([type=radio])::placeholder {
  font-size: 14px;
  color: #000;
  opacity: 1;
}
.contribute-with-us form .group-input input:not([type=radio]):disabled {
  background-color: #E4E8EF;
  color: #000;
}
.contribute-with-us form .group-input .select-box {
  width: 100%;
  height: 60px;
  background-color: #fff;
  border-radius: 5px;
  padding: 20px 15px 20px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.contribute-with-us form .group-input .phone {
  position: relative;
}
.contribute-with-us form .group-input .phone .vue-tel-input {
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.contribute-with-us form .group-input .phone .vue-tel-input .vti__dropdown {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
  width: 115px;
  height: 45px;
  background-color: #EEF8FC !important;
  border-radius: 5px;
}
.contribute-with-us form .group-input .phone .vue-tel-input .vti__dropdown .vti__selection {
  justify-content: flex-end;
}
.contribute-with-us form .group-input .phone .vue-tel-input .vti__dropdown .vti__selection .vti__dropdown-arrow {
  position: absolute;
  right: 15px;
}
.contribute-with-us form .group-input .phone .vue-tel-input .vti__dropdown:hover {
  background-color: #EEF8FC !important;
}
.contribute-with-us form .group-input .phone .code {
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  left: 50px;
  font-size: 14px;
  font-family: "STC-Bold";
  color: #0A4C6B;
}
.contribute-with-us form .group-input .phone input {
  font-size: 14px;
  font-family: "STC-Bold";
  color: #0A4C6B;
  text-align: left;
  padding-left: 130px;
}
.contribute-with-us form .group-input .phone .check-icon {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
}
.contribute-with-us form .group-input .phone .valid-text {
  position: absolute;
  bottom: -30px;
  right: 0;
  font-size: 14px;
  font-family: "STC-Light";
  color: #00B47D;
}
.contribute-with-us form .group-input .phone.valid input {
  background-color: #E0F8F0;
}
.contribute-with-us form .group-input .phone.valid .vue-tel-input .vti__dropdown {
  background-color: #FFFFFF !important;
}
.contribute-with-us form .group-input .checkbox-style {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  /* Hide the browser's default radio button */
  /* Create a custom radio button */
}
.contribute-with-us form .group-input .checkbox-style input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  /* Show the indicator (dot/circle) when checked */
}
.contribute-with-us form .group-input .checkbox-style input:checked ~ .checkmark::after {
  display: block;
}
.contribute-with-us form .group-input .checkbox-style .checkmark {
  position: absolute;
  top: -9px;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #fff;
  border: 1px solid #E2E2E2;
  border-radius: 50%;
  /* Create the indicator (the dot/circle - hidden when not checked) */
}
.contribute-with-us form .group-input .checkbox-style .checkmark::after {
  content: "";
  position: absolute;
  display: none;
  /* Style the indicator (dot/circle) */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}
.contribute-with-us form .group-input .checkbox-style input:checked ~ .checkmark {
  background-color: #11A7EC;
  border: 1px solid #11A7EC;
}
.contribute-with-us form .answer-options .add {
  border: 2px dashed #CDD3DF;
  border-radius: 5px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 14px;
  color: #11A7EC;
}
.contribute-with-us form .answer-options .add-box {
  position: relative;
  padding: 10px 0;
}
.contribute-with-us form .answer-options .add-box input {
  width: 100%;
  height: 60px;
  border-radius: 5px;
  padding: 0 20px;
}
.contribute-with-us form .answer-options .add-box img {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}
.contribute-with-us form .answer-options .answers {
  padding: 15px 0 25px;
  /* The container */
  /* When the radio button is checked, add a blue background */
}
.contribute-with-us form .answer-options .answers li {
  margin-bottom: 15px;
}
.contribute-with-us form .answer-options .answers li .box {
  background-color: #FFFFFF;
  border-radius: 5px;
  padding: 20px 25px;
  text-align: center;
  font-size: 14px;
  position: relative;
}
.contribute-with-us form .answer-options .answers li:nth-child(1) .box::after {
  content: "(أ)";
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  font-size: 16px;
  font-family: "STC-Bold";
}
.contribute-with-us form .answer-options .answers li:nth-child(2) .box::after {
  content: "(ب)";
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  font-size: 16px;
  font-family: "STC-Bold";
}
.contribute-with-us form .answer-options .answers li:nth-child(3) .box::after {
  content: "(ج)";
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  font-size: 16px;
  font-family: "STC-Bold";
}
.contribute-with-us form .answer-options .answers .checkbox-style {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  /* Hide the browser's default radio button */
  /* Create a custom radio button */
}
.contribute-with-us form .answer-options .answers .checkbox-style input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  /* Show the indicator (dot/circle) when checked */
}
.contribute-with-us form .answer-options .answers .checkbox-style input:checked ~ .checkmark::after {
  display: block;
}
.contribute-with-us form .answer-options .answers .checkbox-style .checkmark {
  position: absolute;
  top: -21px;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #fff;
  border: 1px solid #E2E2E2;
  border-radius: 50%;
  /* Create the indicator (the dot/circle - hidden when not checked) */
}
.contribute-with-us form .answer-options .answers .checkbox-style .checkmark::after {
  content: "";
  position: absolute;
  display: none;
  /* Style the indicator (dot/circle) */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}
.contribute-with-us form .answer-options .answers .checkbox-style input:checked ~ .checkmark {
  background-color: #12C19D;
  border: 1px solid #12C19D;
}
.contribute-with-us form .answer-options .option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.contribute-with-us form .answer-options .option .hint-answer {
  display: flex;
  align-items: center;
  gap: 10px;
}
.contribute-with-us form .answer-options .option .hint-answer .checks {
  display: flex;
  align-items: center;
  margin-right: 5px;
}
.contribute-with-us form .answer-options .option .hint-answer .checks .switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 18px;
  /* Rounded sliders */
}
.contribute-with-us form .answer-options .option .hint-answer .checks .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.contribute-with-us form .answer-options .option .hint-answer .checks .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #E7EBF2;
  transition: 0.4s;
}
.contribute-with-us form .answer-options .option .hint-answer .checks .switch .slider::before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  right: -5px;
  bottom: -1.5px;
  background-color: white;
  transition: 0.4s;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.contribute-with-us form .answer-options .option .hint-answer .checks .switch input:checked + .slider {
  background-color: rgba(17, 167, 236, 0.231372549);
}
.contribute-with-us form .answer-options .option .hint-answer .checks .switch input:focus + .slider {
  box-shadow: 0 0 1px rgba(17, 167, 236, 0.231372549);
}
.contribute-with-us form .answer-options .option .hint-answer .checks .switch input:checked + .slider:before {
  transform: translateX(-14px);
  background-color: #11A7EC;
}
.contribute-with-us form .answer-options .option .hint-answer .checks .switch .slider.round {
  border-radius: 34px;
}
.contribute-with-us form .answer-options .option .hint-answer .checks .switch .slider.round:before {
  border-radius: 50%;
}
.contribute-with-us form .btn-style {
  margin: 20px auto;
}

/* ===================== */
/*  request care Page */
/* ===================== */
.request-care {
  padding: 40px 0;
  background-color: #F3F5F9;
}
.request-care form .group-input {
  margin-bottom: 20px;
}
.request-care form .group-input p.label {
  font-size: 14px;
  font-family: "STC-Bold";
  margin-bottom: 5px !important;
}
.request-care form .group-input p.label.required::after {
  content: "*";
  color: #FF0000;
}
.request-care form .group-input input:not([type=radio]) {
  width: 100%;
  height: 60px;
  border-radius: 5px;
  padding: 20px 15px;
}
.request-care form .group-input input:not([type=radio])::-moz-placeholder {
  font-size: 14px;
  color: #000;
  opacity: 1;
}
.request-care form .group-input input:not([type=radio])::placeholder {
  font-size: 14px;
  color: #000;
  opacity: 1;
}
.request-care form .group-input .select-box {
  width: 100%;
  height: 60px;
  background-color: #fff;
  border-radius: 5px;
  padding: 20px 15px 20px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.request-care form .group-input .phone {
  position: relative;
}
.request-care form .group-input .phone .vue-tel-input {
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.request-care form .group-input .phone .vue-tel-input .vti__dropdown {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
  width: 115px;
  height: 45px;
  background-color: #EEF8FC !important;
  border-radius: 5px;
}
.request-care form .group-input .phone .vue-tel-input .vti__dropdown .vti__selection {
  justify-content: flex-end;
}
.request-care form .group-input .phone .vue-tel-input .vti__dropdown .vti__selection .vti__dropdown-arrow {
  position: absolute;
  right: 15px;
}
.request-care form .group-input .phone .vue-tel-input .vti__dropdown:hover {
  background-color: #EEF8FC !important;
}
.request-care form .group-input .phone .code {
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  left: 50px;
  font-size: 14px;
  font-family: "STC-Bold";
  color: #0A4C6B;
}
.request-care form .group-input .phone input {
  font-size: 14px;
  font-family: "STC-Bold";
  color: #0A4C6B;
  text-align: left;
  padding-left: 130px;
}
.request-care form .group-input .phone .check-icon {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
}
.request-care form .group-input .phone .valid-text {
  position: absolute;
  bottom: -30px;
  right: 0;
  font-size: 14px;
  font-family: "STC-Light";
  color: #00B47D;
}
.request-care form .group-input .phone.valid input {
  background-color: #E0F8F0;
}
.request-care form .group-input .phone.valid .vue-tel-input .vti__dropdown {
  background-color: #FFFFFF !important;
}
.request-care form .btn-style {
  height: 60px;
  margin: 30px auto;
}

/* ===================== */
/*  about us Page */
/* ===================== */
.about-us-page .box {
  background-color: #F3F5F9;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
}
.about-us-page .box p {
  font-size: 16px;
  font-family: "STC-Bold";
  margin-bottom: 10px !important;
}
.about-us-page .box span {
  font-size: 14px;
  font-family: "STC-Light";
  line-height: 30px;
}

/* ===================== */
/*  video library Page */
/* ===================== */
.video-library {
  margin-top: -5px;
  background-color: #F3F5F9;
}
.video-library .video-view {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
}
.video-library .video-view.remove-overlay::after {
  display: none;
}
.video-library .video-view::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.46);
}
.video-library .video-view .play-button {
  position: absolute;
  z-index: 2;
  top: 55px;
  right: 45%;
}
.video-library .video-view p {
  position: absolute;
  bottom: 35px;
  right: 25px;
  max-width: 250px;
  font-size: 20px;
  font-family: "STC-Bold";
  line-height: 35px;
  color: #fff;
  z-index: 2;
}
.video-library .video-view video {
  -o-object-fit: fill;
     object-fit: fill;
}
.video-library .videos-menu li .video-box {
  background-color: #fff;
  padding: 30px 25px;
  border-bottom: 1px solid #F3F5F9;
  display: flex;
  align-items: center;
  gap: 15px;
  color: #000;
}
.video-library .videos-menu li .video-box .image {
  width: 80px;
  height: 80px;
  overflow: hidden;
  position: relative;
}
.video-library .videos-menu li .video-box .image::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.46);
}
.video-library .videos-menu li .video-box .image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.video-library .videos-menu li .video-box .image .icon {
  position: absolute;
  top: 30%;
  right: 30%;
  z-index: 2;
}
.video-library .videos-menu li .video-box .text {
  max-width: 200px;
  font-size: 16px;
  font-family: "STC-Bold";
}

/* ===================== */
/*  partners Page */
/* ===================== */
.partners-page {
  padding: 20px 0;
}
.partners-page .content-style {
  padding: 20px 10px 10px;
}
.partners-page .box {
  background-color: #F3F5F9;
  border-radius: 5px;
  width: 100%;
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 25px;
  margin-bottom: 15px;
  padding: 10px;
}
.partners-page .box img {
  max-width: 100%;
}
.partners-page .box p {
  font-size: 18px;
  font-family: "STC-Bold";
  color: #0A4C6B;
}
.partners-page .btn-style {
  height: 60px;
  margin-top: 65px;
}

/* ===================== */
/*  faq Page */
/* ===================== */
.faq-page .content-style {
  padding: 20px 10px 10px;
}
.faq-page .accordion .accordion-item {
  border: none;
  margin-bottom: 15px;
  border-radius: 5px;
}
.faq-page .accordion .accordion-item .accordion-header .accordion-button {
  border-radius: 5px;
  background-color: #F3F5F9;
  padding: 25px 20px 20px 30px;
  font-size: 14px;
  font-family: "STC-Bold";
  color: #0A4C6B;
}
.faq-page .accordion .accordion-item .accordion-header .accordion-button::after {
  content: "+";
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  background-image: none;
  margin-left: unset;
  margin-right: auto;
  font-size: 20px;
  font-family: "STC-Light";
  color: #000;
}
.faq-page .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
  background-color: #F3F5F9;
  box-shadow: none;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
.faq-page .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after {
  content: "-";
}
.faq-page .accordion .accordion-item .accordion-collapse {
  padding: 0 20px;
}
.faq-page .accordion .accordion-item .accordion-collapse .accordion-body {
  border-top: 1px solid #fff;
  font-size: 14px;
  font-family: "STC-Light";
  line-height: 30px;
}

/* ===================== */
/*  contact us Page */
/* ===================== */
.contact-us {
  padding: 30px 0 25px;
}
.contact-us .content-style {
  padding: 20px 10px 10px;
}
.contact-us form .group-input {
  margin-bottom: 20px;
}
.contact-us form .group-input p.label {
  font-size: 14px;
  font-family: "STC-Bold";
  margin-bottom: 5px !important;
}
.contact-us form .group-input p.label.required::after {
  content: "*";
  color: #FF0000;
}
.contact-us form .group-input input:not([type=radio]),
.contact-us form .group-input textarea {
  width: 100%;
  height: 60px;
  border-radius: 5px;
  padding: 20px 15px;
  background-color: #F3F5F9;
}
.contact-us form .group-input input:not([type=radio])::-moz-placeholder, .contact-us form .group-input textarea::-moz-placeholder {
  font-size: 14px;
  color: #000;
  opacity: 1;
}
.contact-us form .group-input input:not([type=radio])::placeholder,
.contact-us form .group-input textarea::placeholder {
  font-size: 14px;
  color: #000;
  opacity: 1;
}
.contact-us form .group-input textarea {
  resize: none;
  height: 90px;
  border: none;
}
.contact-us form .group-input .phone {
  position: relative;
}
.contact-us form .group-input .phone .box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
  width: 115px;
  height: 45px;
  background-color: #EEF8FC !important;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.contact-us form .group-input .phone .box svg {
  margin-bottom: 5px;
}
.contact-us form .group-input .phone .box .code {
  font-size: 14px;
  font-family: "STC-Bold";
  color: #0A4C6B;
}
.contact-us form .group-input .phone .vue-tel-input {
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.contact-us form .group-input .phone .vue-tel-input .vti__dropdown {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
  width: 115px;
  height: 45px;
  background-color: #EEF8FC !important;
  border-radius: 5px;
}
.contact-us form .group-input .phone .vue-tel-input .vti__dropdown .vti__selection {
  justify-content: flex-end;
}
.contact-us form .group-input .phone .vue-tel-input .vti__dropdown .vti__selection .vti__dropdown-arrow {
  position: absolute;
  right: 15px;
}
.contact-us form .group-input .phone .vue-tel-input .vti__dropdown:hover {
  background-color: #EEF8FC !important;
}
.contact-us form .group-input .phone input {
  padding-left: 130px;
}
.contact-us form .contact-information {
  background-color: #fff;
  border-radius: 5px;
  padding: 35px 35px 30px 45px;
}
.contact-us form .contact-information .title {
  padding: 0 15px 15px 0;
  font-size: 16px;
  font-family: "STC-Bold";
}
.contact-us form .contact-information .box {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  padding: 10px 0;
}
.contact-us form .contact-information .box:last-of-type {
  border-top: 1px solid #c8edfb;
}
.contact-us form .contact-information .box .info {
  display: flex;
  align-items: center;
  gap: 15px;
}
.contact-us form .contact-information .box .info .text p {
  font-size: 14px;
  font-family: "STC-Bold";
}
.contact-us form .contact-information .box .info .text span {
  font-size: 14px;
  color: #0A4C6B;
}
.contact-us form .contact-information .via-whatsApp {
  width: 100%;
  height: 60px;
  background-color: #1FBC25;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: 14px;
  color: #fff;
  margin-top: 10px;
}
.contact-us form .map {
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
  margin-top: 20px;
}
.contact-us form .map iframe {
  display: block;
}

/* ===================== */
/*  notifications Page */
/* ===================== */
.notifications-page {
  padding: 10px 0 25px;
  background-color: #F3F5F9;
}
.notifications-page ul li {
  background-color: #fff;
  margin-bottom: 5px;
  padding: 25px 10px 25px 35px;
}
.notifications-page ul li .box {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  font-size: 14px;
  position: relative;
}
.notifications-page ul li .box .not-read {
  width: 10px;
  height: 10px;
  background-color: #11A7EC;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: -10px;
}
.notifications-page ul li .box .icon {
  padding-top: 5px;
}
.notifications-page ul li .box .details .title {
  font-family: "STC-Bold";
  color: #0A4C6B;
}
.notifications-page ul li .box .details .content {
  padding: 5px 0 15px;
  color: #71838B;
}
.notifications-page ul li .box .info .buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}
.notifications-page ul li .box .info .buttons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 35px;
  background-color: #F5F5F5;
  border-radius: 15px;
  color: #0A4C6B;
}
.notifications-page ul li .box .info .time {
  position: absolute;
  bottom: 0px;
  left: -15px;
  background-color: #F3F5F9;
  border-radius: 5px;
  font-family: "STC-Bold";
  color: #51668A;
  padding: 5px 10px;
}

/* ===================== */
/*  share app  Page */
/* ===================== */
.share-app {
  height: 100vh;
  padding: 40px 0;
}
.share-app .box {
  flex: 1;
}
.share-app .box .share-app-icon {
  color: #fff;
  width: 100%;
  display: block;
  padding: 15px;
  border-radius: 5px;
  max-width: 300px;
  margin: auto;
}
.share-app .box .share-app-icon.android {
  background-color: #689f38;
}
.share-app .box .share-app-icon.ios {
  background-color: #0071e3;
}
.share-app .box .share-app-icon svg {
  margin-bottom: 15px;
}

.exam-bg {
  background-image: url("../../assets/images/bg.png");
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  opacity: 0.3;
  background-position: bottom;
}

/* ===================== */
/*  checkout Page */
/* ===================== */
.checkout .box {
  background-color: #fff;
  border-radius: 10px;
  padding: 30px 25px;
  margin-bottom: 10px;
}
.checkout .box .menu li {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-family: "STC-Bold";
}
.checkout .box .menu li:not(:first-child) {
  border-top: 1px solid #F3F5F9;
}
.checkout .box .menu li:last-child {
  border-bottom: 1px solid #F3F5F9;
}
.checkout .box .menu li .label {
  color: #0A4C6B;
}
.checkout .box .menu li .info {
  display: flex;
  align-items: center;
  gap: 5px;
}
.checkout .box .menu li .info span {
  color: #11A7EC;
}
.checkout .box .group-input {
  display: flex;
  align-items: center;
  gap: 10px;
}
.checkout .box .group-input input {
  width: 100%;
  height: 60px;
  border-radius: 5px;
  padding: 20px 15px;
  background-color: #F3F5F9;
}
.checkout .box .group-input .btn-style {
  flex: 1;
  padding: 0 20px;
}

/* ===================== */
/*  thanks Page */
/* ===================== */
.thanks-page .thanks-box {
  background-color: #fff;
  border-radius: 10px;
  padding: 50px 25px 30px;
  margin-bottom: 10px;
  text-align: center;
}
.thanks-page .thanks-box img {
  max-width: 100px;
}
.thanks-page .thanks-box p {
  font-size: 35px;
  font-family: "STC-Bold";
  padding: 15px 0 10px;
}
.thanks-page .thanks-box span {
  display: block;
  font-size: 20px;
  margin-bottom: 30px;
}/*# sourceMappingURL=style.css.map */