@import url(https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Nunito&display=swap);@-webkit-keyframes spin {
  to {
    transform: rotate(180deg);
  }
}
@keyframes spin {
  to {
    transform: rotate(180deg);
  }
}
@-webkit-keyframes widthSlide {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes widthSlide {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@-webkit-keyframes heightSlide {
  from {
    height: 36%;
  }
  to {
    height: 500%;
  }
}
@keyframes heightSlide {
  from {
    height: 36%;
  }
  to {
    height: 500%;
  }
}
@-webkit-keyframes opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes triangleSlide {
  from {
    top: 0;
    opacity: 0;
  }
  to {
    top: -19px;
    opacity: 1;
  }
}
@keyframes triangleSlide {
  from {
    top: 0;
    opacity: 0;
  }
  to {
    top: -19px;
    opacity: 1;
  }
}
:root {
  --transition-speed: .25s;
  --color-orange: #F48573;
  --color-orange-dark: #EF6D64;
  --color-orange-darker: #f68073;
  --color-orange-light: #F99E83;
  --color-orange-lighter: #fba086;
  --color-green: #3150AF;
  --color-green-dark: #3150AF;
  --color-green-darker: #3150AF;
  --color-green-light: #7E95EB;
  --color-green-lighter: #7E95EB;
  --color-purple: #8974F3;
  --color-purple-dark: #7B6BEF;
  --color-purple-darker: #8475f5;
  --color-purple-light: #C398FA;
  --color-purple-lighter: #cda9fb;
  --color-student: #051841;
  --color-student-light: #142E67;
  --color-gray: #F6F6F6;
  --color-blue: #001136;
  --color-light-blue: #122C63;
  --color-red: #A10000;
  --text-gray: #9F9F9F;
  --main-color: var(--color-orange);
  --main-color-dark: var(--color-orange-dark);
  --main-color-darker: var(--color-orange-dark);
  --main-color-light: var(--color-orange-light);
  --main-color-lighter: var(--color-orange-light);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  font-family: "Tajawal", sans-serif;
}

body {
  display: flex;
  flex-direction: column;
}
body > main {
  flex: 1;
}

.content-view .body,
.content-view .body-text {
  font-family: "Tajawal", sans-serif !important;
  text-indent: 0 !important;
}
.content-view .body span,
.content-view .body p,
.content-view .body div,
.content-view .body-text span,
.content-view .body-text p,
.content-view .body-text div {
  font-family: "Tajawal", sans-serif !important;
  text-indent: 0 !important;
  white-space: normal !important;
}
.content-view .body ul,
.content-view .body ol,
.content-view .body-text ul,
.content-view .body-text ol {
  padding-left: 80px;
}

.multiple-contents-page .body {
  font-family: "Tajawal", sans-serif !important;
}
.multiple-contents-page .body span,
.multiple-contents-page .body p,
.multiple-contents-page .body div {
  font-family: "Tajawal", sans-serif !important;
}

.custom-btn {
  white-space: nowrap;
  outline: none !important;
  background: linear-gradient(135deg, #142E67, #051841);
  border: 0;
  padding: 10px 22px;
  border-radius: 30px;
  font-weight: bold;
  font-size: 17px;
  color: #fff;
  box-shadow: 0 3px 18px #00000032;
  transition: all 0.3s ease-in-out;
}
.custom-btn:hover {
  background: linear-gradient(135deg, #142E67, #051841);
  box-shadow: 0 3px 18px #00000050;
}
.custom-btn:active {
  position: relative;
  top: 1px;
}

a.custom-btn:hover {
  color: #fff;
}

input.custom-btn {
  padding: 11px 20px;
}
input.custom-btn.ptb-7 {
  padding: 7px 20px;
}

.button-group button {
  border-radius: 0;
  padding-left: 30px;
  padding-right: 30px;
}
.button-group button:first-child {
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}
.button-group button:last-child {
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}

.padding-between-2 .button {
  padding-right: 0.5 rem;
  padding-left: 0.5 rem;
}
.padding-between-2 .button:first-child {
  padding-left: 0;
}
.padding-between-2 .button:last-child {
  padding-right: 0;
}

.btn-long {
  min-width: 160px;
}

.btn-sm {
  font-size: 11px;
  white-space: nowrap;
  border-radius: 5px;
  padding: 5px 10px;
}

.btn-md {
  font-size: 14px;
  padding: 6px 20px;
}

.btn-black {
  background: linear-gradient(135deg, #5A5A5A, #0F0F0F);
}
.btn-black:hover {
  background: linear-gradient(135deg, #696969, #252525);
}

.btn-clean-black {
  background: #000;
}
.btn-clean-black:hover {
  background: #1b1b1b;
}

.btn-blue {
  background: linear-gradient(135deg, #142F68, #03153D);
}
.btn-blue:hover {
  background: linear-gradient(135deg, #1a387a, #061b47);
}

.btn-gray {
  background: #F6F6F6 !important;
  color: #000;
}
.btn-gray:hover {
  background: linear-gradient(135deg, #142E67, #051841) !important;
  color: #fff;
}

.wh-button {
  background: #fff;
  color: #051841;
}
.wh-button:hover {
  color: #fff;
}

.less-round {
  border-radius: 9px;
  font-weight: normal;
  padding: 7px 22px;
  box-shadow: 0 3px 6px #00000022;
}
.less-round:hover {
  box-shadow: 0 3px 6px #00000050;
}

.font-size-45 {
  font-size: 45px !important;
}

img {
  -o-object-fit: cover;
     object-fit: cover;
}

a:hover {
  text-decoration: none;
}

.custom-input {
  display: block;
  width: 100%;
  outline: none;
  min-height: 45px;
  border: none;
  border-radius: 10px;
  box-shadow: 0 3px 6px #00000022;
  padding-left: 20px;
  text-align: left !important;
  transition: all 0.25s ease;
}
.custom-input:active, .custom-input:focus {
  box-shadow: 0 3px 6px #00000045;
}

.custom-input.gray:active,
.custom-input.gray:focus {
  background-color: #fff !important;
}

.card {
  border: 0;
  border-radius: 55px;
  padding: 35px 35px 45px 35px;
  box-shadow: 0 3px 6px #00000022;
  overflow: hidden;
}
.card .title {
  font-size: 20px;
  font-weight: bold;
  color: #051841;
}
.card .input-holder {
  margin-top: 1rem;
}
.card .sub-card .gray-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #E3E3E3;
  width: 100%;
  padding: 11px 22px;
}
.card .sub-card .gray-header .title {
  font-size: 16px !important;
}
.card .sub-card .sub-content {
  padding: 20px 22px;
}

.input-holder {
  display: flex;
  flex-direction: column;
}
.input-holder label {
  font-size: 17px;
}

.gray {
  background-color: #F6F6F6 !important;
}

.bg-blue {
  background: linear-gradient(35deg, #142F68, #03153D);
}

.red-text {
  color: #A10000;
}

.text-black {
  color: #000;
}

.text-gray {
  color: #fff !important;
  opacity: 0.33;
}

.text-green {
  color: #3150AF !important;
}

.text-orange {
  color: #db3645 !important;
}

.op-50 {
  opacity: 0.5;
}

.op-0 {
  opacity: 0;
}

.mt-m1 {
  margin-top: -1rem;
}

.mt-10p {
  margin-top: 10% !important;
}

table.table {
  font-size: 15px;
}
table.table thead tr th {
  border-top: none;
  border-bottom: 1px solid #000;
  font-size: 11px;
}
table.table tbody td {
  border-top: 1px solid #00000025;
  white-space: nowrap;
  vertical-align: unset;
}

.table-unboardered td {
  border: none !important;
  font-size: 16px;
  font-weight: bold;
}
.table-unboardered td:first-child span {
  color: #051841;
}

input.form-check-input {
  z-index: 2;
  overflow: hidden;
  width: 20px;
  height: 20px;
}

span.form-check-input {
  overflow: hidden;
}

.form-check-input {
  margin-right: 0;
  display: grid;
  grid-template-areas: "checkbox";
}
.form-check-input > * {
  grid-area: checkbox;
}
.form-check-input:checked + .checkbox-control {
  background: linear-gradient(-35deg, #051841, #142E67);
  border: none;
  padding: 0.1em;
}
.form-check-input:checked + .checkbox-control svg {
  transform: scale(1);
}
.form-check-input.checkbox-control {
  z-index: 1;
  display: inline-grid;
  width: 13px;
  height: 13px;
  border-radius: 0.25em;
  border: 0.1em solid #C9C9C9;
  background-color: #fff;
  transition: all 0.25s ease;
}
.form-check-input.checkbox-control svg {
  transition: transform 0.1s ease-in 25ms;
  transform: scale(0);
  transform-origin: bottom right;
  color: #fff;
}

.form-check-label {
  margin-left: 1.25rem;
  overflow: hidden;
}

.modal {
  align-items: center;
  justify-content: center;
}

.modal-backdrop {
  background: linear-gradient(135deg, #142E67, #051841);
  opacity: 0.6;
}

.modal-open {
  overflow: auto;
}

.modal-dialog {
  max-width: 890px;
}
.modal-dialog .modal-content {
  border: none;
  border-radius: 90px;
  padding: 4rem 5rem;
}
.modal-dialog .modal-content .modal-header {
  border: none;
}
.modal-dialog .modal-content .modal-header .modal-title {
  width: 100%;
  text-align: center;
  color: #051841;
  font-weight: bold;
  font-size: 40px;
}
.modal-dialog .modal-content .modal-body p {
  font-size: 20px;
  text-align: center;
}

header.main-layout {
  min-height: 111%;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 1000px;
  z-index: 1;
}
header.main-layout.header-green {
  background-image: url(../assets/img/layouts/header-green.jpg);
}
header.main-layout.header-purple {
  background: linear-gradient(135deg, #C398FA, #7B6BEF);
  min-height: 100%;
}
header.main-layout .children {
  position: absolute;
  width: 41%;
  bottom: 80px;
  right: -15px;
}
header.main-layout .bg-icons {
  position: absolute;
  top: -9%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 53%;
  z-index: 1;
}
header.main-layout .container {
  color: #fff;
  width: 35%;
  margin-left: 20%;
  margin-top: 10%;
}
header.main-layout .container h1 {
  font-weight: bold;
  font-size: 38px;
}
header.main-layout .container p {
  font-size: 25px;
  opacity: 0.25;
}
header.main-layout .container.student {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-left: auto;
  margin-top: 5%;
  padding: 0 5%;
}
header.main-layout .container.student h1 {
  font-size: 30px;
}
header.main-layout .container.student p {
  font-size: 15px;
  opacity: 1;
}
header.main-layout .container.student .right-side {
  margin-top: 4rem;
  margin-bottom: 4rem;
}
header.main-layout .container.student .wh-card {
  background-color: #fff;
  border-radius: 55px;
  box-shadow: 0 3px 6px #00000022;
  height: 100%;
  padding: 45px;
}
header.main-layout .container.student .wh-card .title {
  color: #051841;
  font-size: 20px;
  text-align: center;
}
header.main-layout .container.student .wh-card a {
  transition: all 0.25s ease;
}
header.main-layout .container.student .wh-card .forgot-password a {
  color: #000;
}
header.main-layout .container.student .wh-card .forgot-password a:hover {
  color: #051841;
}
header.main-layout .container.student .wh-card .dont-have a {
  color: #051841;
  font-size: 18px;
  font-weight: bold;
}
header.main-layout .container.student .wh-card .dont-have a:hover {
  color: #000;
}

.top-pos .gray-layout {
  position: relative;
  z-index: 2;
}

main.gray-layout,
.main.gray-layout {
  background: url("../assets/img/layouts/gray.svg");
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: -162px;
}
main.gray-layout .container,
.main.gray-layout .container {
  padding-top: 240px;
  padding-bottom: 140px;
}
main .container h1,
.main .container h1 {
  color: #051841;
  font-weight: bold;
  margin-bottom: 1rem;
  font-size: clamp(32px, 3vw, 40px);
}
main .container p,
.main .container p {
  font-size: 25px;
}
main .container .main-card,
.main .container .main-card {
  margin-top: 2rem;
  border: 0;
  background-color: transparent;
}
main .container .main-card .image,
main .container .main-card button,
.main .container .main-card .image,
.main .container .main-card button {
  border-radius: 60px;
}
main .container .main-card .image,
.main .container .main-card .image {
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}
main .container .main-card .image img,
.main .container .main-card .image img {
  width: 100%;
  padding-left: 30px;
  padding-right: 30px;
  transition: all 0.25s ease;
}
main .container .main-card button,
.main .container .main-card button {
  color: white;
  height: auto;
  min-height: 61px;
  padding-top: 3px;
  padding-bottom: 3px;
  margin-top: 18px;
  padding: 0 52px;
  width: 100%;
  transition: background-color 0.25s ease;
}
main .container .main-card a:hover .image,
.main .container .main-card a:hover .image {
  opacity: 0.9;
}
main .container .main-card a:hover img,
.main .container .main-card a:hover img {
  transform: scale(1.02);
}
main .container .card-yellow button,
.main .container .card-yellow button {
  border-color: #f9e8e8;
  background: #f2c351;
  border: none;
}
main .container .card-yellow button:hover,
.main .container .card-yellow button:hover {
  opacity: 0.9;
}
main .container .card-cyan button,
.main .container .card-cyan button {
  border-color: #f4ebe4;
  background: #4dc1be;
  border: none;
}
main .container .card-cyan button:hover,
.main .container .card-cyan button:hover {
  opacity: 0.9;
}
main .container .card-green button,
.main .container .card-green button {
  border-color: #eef4e4;
  background: #adb564;
  border: none;
}
main .container .card-green button:hover,
.main .container .card-green button:hover {
  opacity: 0.9;
}
main .container .card-red button,
.main .container .card-red button {
  border-color: #e8f7f1;
  background: #db5743;
  border: none;
}
main .container .card-red button:hover,
.main .container .card-red button:hover {
  opacity: 0.9;
}
main .container.student-register,
main .container.site-content,
.main .container.student-register,
.main .container.site-content {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
main .container.student-register h1,
main .container.site-content h1,
.main .container.student-register h1,
.main .container.site-content h1 {
  font-size: 30px;
}
main .container.student-incomplete-profile,
.main .container.student-incomplete-profile {
  padding-top: 15rem;
  padding-bottom: 15rem;
}
main .container.student-incomplete-profile h5,
.main .container.student-incomplete-profile h5 {
  color: #9F9F9F;
}
main .container.student-incomplete-profile p,
.main .container.student-incomplete-profile p {
  font-size: 20px;
}
main .container.student-incomplete-profile .left-side p,
.main .container.student-incomplete-profile .left-side p {
  margin-bottom: 0;
  color: #9F9F9F;
}

footer {
  background: linear-gradient(180deg, #051841, #142E67);
  background-position: top;
  background-size: cover !important;
  background-repeat: no-repeat;
}
footer.footer-blue {
  background: unset;
  background-image: url("../assets/img/layouts/footer-blue.jpg");
  height: 43vh;
}
footer.footer-green {
  background: unset;
  background-image: url("../assets/img/layouts/footer-green.jpg");
  height: 43vh;
}
footer.footer-purple {
  background: unset;
  background-image: url("../assets/img/layouts/footer-purple.jpg");
  height: 43vh;
}
footer .container {
  padding: 4rem 0 2rem 0;
}
footer .container .jcc {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
footer .container .jcc .social {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 90%;
}
footer .container .jcc .social a {
  color: #fff;
  font-size: 35px;
  transition: color 0.25s ease;
}
footer .container .jcc .social a:hover {
  color: #000;
}
footer .container .logo {
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
footer .container .logo img {
  width: 85%;
}
footer .container .copyrights-wrapper {
  border-left: 2px solid rgba(0, 0, 0, 0.3);
}
footer .container .copyrights-wrapper .copyrights-content {
  width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: auto;
}
footer .container .copyrights-wrapper .copyrights-content .copyrights {
  font-size: 15px;
  margin: 0;
  color: #fff;
  width: 100%;
}
footer .container .copyrights-wrapper .copyrights-content img {
  margin-top: 15px;
}

.input-holder label.error {
  font-size: 12px;
  color: red;
  margin-top: 15px;
}

.background-orange {
  background: linear-gradient(-30deg, #F2796C, #F7967E) !important;
}

.wrapper-page-content > h2 {
  color: #db3645;
}
.wrapper-page-content table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid black;
}
.wrapper-page-content table tr:first-child {
  color: #fff;
  background-color: #db3645;
}
.wrapper-page-content table tr th,
.wrapper-page-content table tr td {
  padding: 8px;
  border: 1px solid black;
}
.wrapper-page-content h2 {
  margin-top: 60px;
}

.test-result-wrapper ul {
  margin-left: 2rem;
}

ol.wrapper-list {
  margin-left: 2rem;
}

.tags-nav {
  list-style: none;
  padding: 0;
  margin: 1rem 0 2rem;
}
.tags-nav li {
  margin-right: 1rem;
  display: inline-block;
  margin-bottom: 20px;
}
.tags-nav li a {
  padding: 10px 25px 6px;
  background-color: #db3645;
  border-radius: 7px;
  opacity: 0.8;
  color: white;
  text-decoration: none;
  display: block;
}
.tags-nav li a:hover {
  opacity: 1;
}
.tags-nav li.active a {
  opacity: 1;
}

.content-view .link {
  display: flex;
  align-items: center;
  justify-content: center;
}
.content-view .link a {
  background: #db3645;
  opacity: 0.9;
  padding: 15px 120px 10px;
  color: #fff;
  font-weight: bold;
}
.content-view .link a:hover {
  opacity: 1;
}

#subNavbar {
  width: 100%;
}

@keyframes spin {
  to {
    transform: rotate(180deg);
  }
}
@keyframes widthSlide {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes heightSlide {
  from {
    height: 36%;
  }
  to {
    height: 500%;
  }
}
@keyframes opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes triangleSlide {
  from {
    top: 0;
    opacity: 0;
  }
  to {
    top: -19px;
    opacity: 1;
  }
}
.progress-rounded {
  width: 150px;
  height: 150px !important;
  float: right;
  line-height: 150px;
  background: none;
  margin: 20px;
  box-shadow: none;
  position: relative;
}

.progress-rounded:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 20px solid #7388a970;
  position: absolute;
  top: 0;
  right: 0;
}

.progress-rounded > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}

.progress-rounded .progress-left {
  right: 0;
}

.progress-rounded .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 20px;
  border-style: solid;
  position: absolute;
  top: 0;
}

.progress-rounded .progress-left .progress-bar {
  right: 100%;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  border-right: 0;
  transform-origin: center right;
}

.progress-rounded .progress-right {
  left: 0;
}

.progress-rounded .progress-right .progress-bar {
  right: -100%;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  border-left: 0;
  transform-origin: center left;
  -webkit-animation: loading-1 1s linear forwards;
          animation: loading-1 1s linear forwards;
}

.progress-rounded .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: transparent;
  font-size: 22px;
  font-weight: bold;
  color: #000;
  line-height: 135px;
  text-align: center;
  position: absolute;
  top: 5%;
  right: 5%;
  font-family: "Nunito", sans-serif;
}

.progress-rounded.blue .progress-bar {
  border-color: #407BFF;
}

.progress-rounded.blue .progress-left .progress-bar {
  -webkit-animation: loading-2 0.8s linear forwards 1s;
          animation: loading-2 0.8s linear forwards 1s;
}

.progress-rounded.orange .progress-bar {
  border-color: #db3645;
}

.progress-rounded.orange .progress-left .progress-bar {
  -webkit-animation: loading-2 0.8s linear forwards 1s;
          animation: loading-2 0.8s linear forwards 1s;
}

.progress-rounded.yellow .progress-bar {
  border-color: #fdba04;
}

.progress-rounded.yellow .progress-right .progress-bar {
  -webkit-animation: loading-3 1s linear forwards;
          animation: loading-3 1s linear forwards;
}

.progress-rounded.yellow .progress-left .progress-bar {
  -webkit-animation: none;
          animation: none;
}

.progress-container p {
  color: #fff;
  font-size: 13px !important;
  margin-bottom: 3px;
}

.progress {
  height: 10px;
  background-color: #ffffff36;
}
.progress .progress-bar.orange {
  background: linear-gradient(90deg, #F99E83, #F1786C);
  border-radius: 20px;
}

@-webkit-keyframes loading-1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

@keyframes loading-1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@-webkit-keyframes loading-2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(144deg);
  }
}
@keyframes loading-2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(144deg);
  }
}
@-webkit-keyframes loading-3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(135deg);
  }
}
@keyframes loading-3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(135deg);
  }
}
@keyframes spin {
  to {
    transform: rotate(180deg);
  }
}
@keyframes widthSlide {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes heightSlide {
  from {
    height: 36%;
  }
  to {
    height: 500%;
  }
}
@keyframes opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes triangleSlide {
  from {
    top: 0;
    opacity: 0;
  }
  to {
    top: -19px;
    opacity: 1;
  }
}
.sm-padding {
  padding-top: 17px !important;
  padding-right: 15px !important;
}

main .container nav {
  z-index: 5;
  max-height: 62px;
  min-height: 62px;
  background: #001136;
  border-radius: 20px 20px 0 20px;
  box-shadow: 0 3px 6px #00000022;
}
main .container nav ul.links li a .name {
  margin: 0;
  font-size: 20px;
  font-weight: normal;
  white-space: pre;
}
main .container nav ul.links li:hover a.nav-link, main .container nav ul.links li.active a.nav-link {
  color: #db3645;
  background-color: transparent;
}
main .container nav ul.links li:hover::before, main .container nav ul.links li.active::before {
  content: none;
}
main .container .cards .card {
  min-height: 357px;
  justify-content: space-between;
  border-radius: 10px;
  margin-top: 3rem;
}
main .container .cards .card .title {
  color: black;
}
main .container .cards .card .content p {
  font-size: 18px;
  opacity: 0.5;
}
main .container .content .sidebar {
  background: linear-gradient(-30deg, #122C63, #001136);
  border-radius: 0 0 20px 0px;
  padding: 10px;
  padding-top: 0;
  max-width: 21%;
  min-width: 21%;
  min-height: 790px;
}
main .container .content .sidebar .title {
  font-weight: normal;
  font-size: 12px;
  padding-top: 10px;
}
main .container .content .sidebar .links li {
  border-radius: 5px;
  padding-right: 1.3rem;
  padding-left: 1.3rem;
}
main .container .content .sidebar .links li.active, main .container .content .sidebar .links li:hover {
  background-color: #ffffff10;
  border-top-color: transparent;
}
main .container .content .sidebar .links li a {
  color: #fff;
  font-weight: bold;
}
main .container .content .sidebar .rounded-progress-container .title {
  font-weight: bold;
  font-size: 16px !important;
}
main .container .content p {
  margin-bottom: 0;
}
main .container .content .consultation-sidebar .links,
main .container .content .reports-sidebar .links {
  margin-left: -10px;
  margin-right: -10px;
}
main .container .content .consultation-sidebar .links li,
main .container .content .reports-sidebar .links li {
  border-top: 1px solid #ffffff10;
  display: flex;
  align-items: center;
}
main .container .content .consultation-sidebar .links li a .date,
main .container .content .consultation-sidebar .links li a p,
main .container .content .reports-sidebar .links li a .date,
main .container .content .reports-sidebar .links li a p {
  font-weight: normal;
}
main .container .content .consultation-sidebar .links li a .date,
main .container .content .reports-sidebar .links li a .date {
  font-size: 12px;
  color: #051841;
}
main .container .content .consultation-sidebar .links li a p,
main .container .content .reports-sidebar .links li a p {
  font-size: 14px;
}
main .container .content .consultation-sidebar .links li .number,
main .container .content .reports-sidebar .links li .number {
  margin-right: 10px;
}
main .container .content .consultation-sidebar .links li.number-item a .date,
main .container .content .consultation-sidebar .links li.number-item a p,
main .container .content .reports-sidebar .links li.number-item a .date,
main .container .content .reports-sidebar .links li.number-item a p {
  font-size: 11px;
}
main .container .content .separator {
  width: 100%;
  height: 1px;
  background-color: #fff;
  opacity: 0.17;
}
main .container .content section {
  max-width: 79%;
  padding: 2rem 2rem 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
main .container .content section h1,
main .container .content section h2 {
  font-size: 20px;
  font-weight: bold;
}
main .container .content section p {
  font-size: 15px;
}
main .container .content section .footer {
  align-self: flex-end;
}
main .container .content section .ques {
  margin: 0;
  display: flex;
  margin-top: 1rem;
  align-items: center;
}
main .container .content section .choices-ques,
main .container .content section .rate-ques {
  margin: 0;
}
main .container .content section .choices-ques .ques,
main .container .content section .rate-ques .ques {
  padding: 1rem;
  justify-content: space-between;
  background-color: #FBFBFB;
}
main .container .content section .choices-ques .ques .buttons,
main .container .content section .rate-ques .ques .buttons {
  display: flex;
  justify-content: flex-end;
}
main .container .content section .choices-ques .ques .buttons .custom-btn,
main .container .content section .rate-ques .ques .buttons .custom-btn {
  font-size: 15px;
  margin-left: 0.5rem;
}
main .container .content section .choices-ques .ques .buttons .custom-btn:first-child,
main .container .content section .rate-ques .ques .buttons .custom-btn:first-child {
  margin-left: 0;
}
main .container .content section .choices-ques.long-btns .ques .buttons .custom-btn,
main .container .content section .rate-ques.long-btns .ques .buttons .custom-btn {
  font-size: 13px;
  padding: 7px 16px;
}
main .container .content section .inputs-ques .ques input {
  width: 100%;
  margin-left: 1rem;
}
main .container .content section .sub-header {
  background-color: #122C63;
  margin: 0;
}
main .container .content section .sub-header .separator {
  margin: 0 10px;
}
main .container .content section .rate-ques .ques .buttons {
  display: flex;
  justify-content: space-between;
  padding: 0;
}
main .container .content section .rate-ques .ques .buttons .custon-btn {
  padding: 11px 20px;
}
main .container .content .messages,
main .container .content .reports,
main .container .content .noConsultationYet,
main .container .content .manageChildren,
main .container .content .manageStudents {
  justify-content: start;
}
main .container .content .messages form,
main .container .content .reports form,
main .container .content .noConsultationYet form,
main .container .content .manageChildren form,
main .container .content .manageStudents form {
  width: 100%;
}
main .container .content .noConsultationYet,
main .container .content .manageChildren,
main .container .content .manageStudents {
  min-height: 600px;
  max-width: 100%;
  width: 100%;
  align-items: center;
  margin-top: 3rem;
  padding: 0;
}
main .container .content .noConsultationYet .footer,
main .container .content .manageChildren .footer,
main .container .content .manageStudents .footer {
  align-self: center;
}
main .container .content .manageChildren h1.title {
  margin-bottom: 0;
  font-size: 30px;
}
main .container .content .manageChildren .card {
  width: 90%;
  border-radius: 55px;
  padding: 35px 35px 45px 35px;
}
main .container .content .manageChildren .card .title {
  font-size: 20px;
}
main .container .content .manageChildren p.footer {
  font-size: 20px;
  margin-top: 5rem;
}
main .container .content .manageStudents {
  align-items: flex-start;
}
main .container .content .manageStudents h1.title,
main .container .content .manageStudents .card .title {
  font-size: 20px;
  font-weight: bold;
}
main .container .content .manageStudents .card {
  padding: 15px 40px;
}
main .container .content .manageStudents .card .title {
  color: #000;
}
main .container .content .manageStudents .card .title span a {
  font-weight: normal;
  font-size: 14px;
  color: #051841;
}
main .container .content .manageStudents .card .checkboxes .input-holder {
  margin-left: 2rem;
}
main .container .content .manageStudents .card .checkboxes .input-holder:first-child {
  margin-left: 0;
}
main .container .content .manageStudents .card .checkboxes .input-holder label {
  font-size: 14px;
}
main .container .content .card {
  border-radius: 31px;
  margin-top: 1.3rem;
  padding: 10px 25px 25px 25px;
}
main .container .content .card:first-child {
  margin-top: 0;
}
main .container .content .card .title p {
  font-size: 12px;
  font-weight: normal;
}
main .container .content .card .desc {
  font-size: 14px;
}
main .container .content .card.to {
  border-top-left-radius: 0;
}
main .container .content .card.from {
  border-top-right-radius: 0;
}
main .container .content .reports {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  position: relative;
}
main .container .content .reports .header {
  height: 36px;
  margin-bottom: 2rem;
}
main .container .content .reports .header .title,
main .container .content .reports .header .button {
  height: 100%;
}
main .container .content .reports .header .button {
  display: flex;
  justify-content: flex-end;
}
main .container .content .reports .header .button button {
  height: 100%;
  padding: 0;
}
main .container .content .reports .header .title .name {
  line-height: 1.2;
}
main .container .content .reports .header .title .name p {
  font-weight: bold;
}
main .container .content .reports .header .title .date {
  font-size: 14px;
}
main .container .content .reports::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 33px;
  width: 1px;
  height: 80%;
  background-color: #001136;
  opacity: 0.23;
}
main .container .content .reports .card .title p {
  font-weight: bold;
  color: #000;
}

.main.gray-layout {
  margin-top: -50px;
}

.input-button input {
  display: none;
}
.input-button label {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-align: center;
  cursor: pointer;
}
.input-button input:checked ~ label {
  background: linear-gradient(135deg, #142E67, #051841) !important;
  color: white;
}

.profile-menu li.dropdown:last-child {
  margin-left: 15px;
}
.profile-menu li.dropdown a.nav-link {
  width: 45px;
  height: 45px;
  text-align: center;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffffff3b;
  font-size: 22px;
}
.profile-menu li.dropdown a.nav-link:hover {
  background: #ffffffc7;
}
.profile-menu li.dropdown .dropdown-menu {
  box-shadow: 0px 6px 10px #00000012;
  overflow: hidden;
  padding-bottom: 0;
  height: auto;
  border-radius: 0 0 30px 30px;
  background: #fff;
  min-width: 300px;
  top: 60px;
  padding: 0;
  border: 0;
}
.profile-menu li.dropdown .dropdown-menu a {
  padding: 10px;
  background: #fff;
  color: #000;
  display: block;
  border-bottom: 1px solid #eeeeee80;
  position: relative;
}
.profile-menu li.dropdown .dropdown-menu a.seen {
  color: #909090;
}
.profile-menu li.dropdown .dropdown-menu a.unseen {
  color: black;
  background: #eee;
}
.profile-menu li.dropdown .dropdown-menu a.unseen::before {
  background: #00c300;
}
.profile-menu li.dropdown .dropdown-menu a.notification-item {
  padding: 10px 10px 10px 30px;
  font-size: 14px;
}
.profile-menu li.dropdown .dropdown-menu a.notification-item::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c3c3c3;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  margin: auto;
}
.profile-menu li.dropdown .dropdown-menu a:hover {
  background: #132d66;
  color: #fff;
}

.main-header nav {
  z-index: 10;
  background: linear-gradient(180deg, #051841, #142E67);
}
.main-header nav .logo img {
  height: 54px;
}
.main-header nav .navbar-toggler {
  outline: none;
}
.main-header nav ul.social {
  margin-left: 0 !important;
}
.main-header nav ul.social li a {
  padding: 0;
}
.main-header nav ul.social li a i {
  font-size: 23px;
  color: #fff;
  transition: all 0.25s ease;
}
.main-header nav ul.social li a i:hover {
  color: #000;
}
.main-header nav ul.links li {
  margin-left: 0;
  position: relative;
}
.main-header nav ul.links li a {
  display: flex;
  align-items: center;
  color: #fff;
  padding: 0.5rem 2rem 0.5rem 0.7rem !important;
  border-radius: 30px;
  transition: all 0.1s ease;
}
.main-header nav ul.links li a svg {
  height: 30px;
}
.main-header nav ul.links li a img {
  height: 30px;
}
.main-header nav ul.links li a img.w-icon {
  display: initial;
}
.main-header nav ul.links li a img.h-icon {
  display: none;
}
.main-header nav ul.links li a .name {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  margin-left: 0.5rem;
  padding-top: 5px;
}
.main-header nav ul.links li .dropdown-menu {
  box-shadow: 0px 6px 10px #00000012;
  overflow: hidden;
  padding-bottom: 0;
  height: auto;
}
.main-header nav ul.links li .dropdown-menu a {
  color: #000;
  display: none;
  border-radius: 0;
  animation-name: opacity;
  -webkit-animation-name: opacity;
  -moz-animation-name: opacity;
  -ms-animation-name: opacity;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
}
.main-header nav ul.links li .dropdown-menu a:hover {
  background-color: #eee;
}
.main-header nav ul.links li .dropdown-menu a:active {
  color: #fff;
  background-color: #051841;
}
.main-header nav ul.links li .dropdown-menu .dropdown-item {
  border-radius: 0;
}
.main-header nav ul.links li .dropdown-menu .dropdown-item:focus {
  background-color: transparent;
}
.main-header nav ul.links li .dropdown-menu .dropdown-item:active {
  background-color: #051841;
  color: #fff;
}
.main-header nav ul.links li .dropdown-menu.show {
  display: none;
}
.main-header nav ul.links li::before {
  animation-name: triangleSlide;
  -webkit-animation-name: triangleSlide;
  -moz-animation-name: triangleSlide;
  -ms-animation-name: triangleSlide;
  animation-duration: 0.25s;
  -webkit-animation-duration: 0.25s;
  -moz-animation-duration: 0.25s;
  -ms-animation-duration: 0.25s;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
}
.main-header nav ul.links li:hover a.nav-link, .main-header nav ul.links li.active a.nav-link {
  color: #051841;
  background-color: #fff;
}
.main-header nav ul.links li:hover a.nav-link svg path, .main-header nav ul.links li.active a.nav-link svg path {
  fill: #051841;
}
.main-header nav ul.links li:hover a.nav-link img.w-icon, .main-header nav ul.links li.active a.nav-link img.w-icon {
  display: none;
}
.main-header nav ul.links li:hover a.nav-link img.h-icon, .main-header nav ul.links li.active a.nav-link img.h-icon {
  display: initial;
}
.main-header nav ul.links li:hover::before, .main-header nav ul.links li.active::before {
  content: "";
  position: absolute;
  top: -19px;
  right: calc(50% - 10px);
  width: 20px;
  height: 20px;
  background-color: #fff;
  -webkit-clip-path: polygon(50% 18%, 0% 100%, 100% 100%);
          clip-path: polygon(50% 18%, 0% 100%, 100% 100%);
}
@media (max-width: 990px) {
  .main-header nav ul.links li a.nav-link img.w-icon {
    display: none;
  }
  .main-header nav ul.links li a.nav-link img.h-icon {
    display: initial;
  }
}
.main-header nav ul.links li:hover.dropdown a.nav-link {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.main-header nav ul.links li:hover .dropdown-menu {
  height: auto;
  display: block;
  width: 100%;
  margin: 0;
  border: none;
  border-radius: 0;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}
.main-header nav ul.links li:hover .dropdown-menu a {
  display: block;
}

.overlay-header .main-header {
  position: absolute;
  width: 100%;
  top: 0;
}
.overlay-header .main-header nav {
  background: none;
}

.custom-container {
  max-width: 1450px;
}

.top-pos .gray-layout {
  position: relative;
  z-index: 2;
}

.inner-intro {
  height: 111vh;
  background: url(../assets/img/layouts/header-student.jpg);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding-top: 170px;
  z-index: 1;
}
.inner-intro .container {
  padding: 0 5%;
  position: relative;
  z-index: 2;
}
.inner-intro .wh-card {
  background-color: #fff;
  border-radius: 55px;
  box-shadow: 0 3px 6px #00000022;
  height: 100%;
  padding: 45px;
}
.inner-intro .wh-card .title {
  color: #051841;
  font-size: 20px;
  text-align: center;
}
.inner-intro .wh-card .forgot-password a {
  color: #000;
  font-size: 15px;
}
.inner-intro .wh-card .dont-have a {
  color: #051841;
  font-size: 18px;
  font-weight: bold;
}
.inner-intro .bg-icons {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 45%;
  z-index: 1;
}
.inner-intro .right-side h1 {
  font-size: 30px;
  font-weight: bold;
  color: #fff;
}
.inner-intro .right-side p {
  font-size: 15px;
  opacity: 1;
  color: #fff;
}

.home {
  background-color: #EFEFEF;
}
.home .hero {
  padding: 2rem 1rem;
  height: 100%;
  background-color: #ffffff;
}
.home .hero .hero__content {
  height: 50%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.home .hero .hero__content .hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.home .hero .hero__content .hero__text h1 {
  font-size: 2rem;
  font-weight: bold;
  color: #e63946;
}
.home .hero .hero__content .hero__text .subtitle {
  font-size: 1.6rem;
  font-weight: bold;
  color: #2a9d8f;
  margin-bottom: 1rem;
}
.home .hero .hero__content .hero__text .btn {
  display: inline-block;
  background: #e63946;
  color: #fff;
  padding: 0.6rem 4.5rem;
  border-radius: 2rem;
  text-decoration: none;
  margin-bottom: 2rem;
}
.home .hero .hero__blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 3.5rem;
}
.home .hero .hero__blocks .features {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.home .hero .hero__blocks .features .feature-card {
  background: #fff;
  border-radius: 0.8rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  position: relative;
}
.home .hero .hero__blocks .features .feature-card .icon {
  background: #e63946;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 999;
  left: calc(50% - 30px);
  top: -30px;
}
.home .hero .hero__blocks .features .feature-card .icon img {
  width: 28px;
}
.home .hero .hero__blocks .features .feature-card h3 {
  color: #e63946;
  background-color: #f4c542;
  margin-bottom: 0.5rem;
  padding: 40px 1.2rem 0.6rem;
  font-weight: bold;
  font-size: 24px;
  border-radius: 0.8rem;
}
.home .hero .hero__blocks .features .feature-card p {
  color: #333;
  font-size: 1.1rem;
  line-height: 1.4;
  padding: 1.2rem 1.2rem 0;
  margin: 0;
}
.home .hero .hero__blocks .extra {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background: #f4c542;
  padding: 3rem 1.5rem;
  border-radius: 0.8rem;
}
.home .hero .hero__blocks .extra .extra-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 50%;
  height: 100%;
}
.home .hero .hero__blocks .extra .extra-box .icon {
  background: #e63946;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  margin: 0 auto 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home .hero .hero__blocks .extra .extra-box .icon img {
  width: 80px;
}
.home .hero .hero__blocks .extra .extra-box h3 {
  color: #e63946;
}
.home .hero .hero__blocks .extra .extra-box:last-child {
  border-left: 1px solid #ffffff;
}
@media (max-width: 768px) {
  .home .hero .container {
    flex-direction: column;
    text-align: center;
  }
}
@media (max-width: 1200px) {
  .home .feature-card {
    margin-bottom: 2rem;
  }
  .home .hero__content {
    margin-bottom: 4rem !important;
  }
}
.home .intro {
  height: 562px;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding-top: 105px;
  overflow: visible;
  border-bottom: 162px solid transparent;
  /* this is the space for your circle */
  background: linear-gradient(180deg, #051841, #142E67) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, radial-gradient(circle farthest-side, #fff 99.5%, transparent) bottom 0 left 122px/466px 466px no-repeat;
          mask: linear-gradient(#fff 0 0) padding-box, radial-gradient(circle farthest-side, #fff 99.5%, transparent) bottom 0 left 122px/466px 466px no-repeat;
  /* Circle size */
}
.home .intro.header-green {
  background-image: url(../assets/img/layouts/header-green.jpg);
}
.home .intro.header-purple {
  background: linear-gradient(135deg, #C398FA, #7B6BEF);
  min-height: 100%;
}
.home .intro .children {
  position: absolute;
  width: 466px;
  height: 466px;
  max-width: 466px;
  max-height: 466px;
  bottom: -162px;
  right: 122px;
  border-radius: 50%;
  background: transparent;
}
.home .intro .children img,
.home .intro .children svg {
  width: 100%;
  height: auto;
  padding: 32px;
}
.home .intro .intro-content {
  width: 47%;
}
.home .intro .intro-content h1 {
  font-weight: bold;
  font-size: clamp(28px, 3vw, 45px);
  color: #F5B461;
}
.home .intro .intro-content p {
  opacity: 1;
  color: white;
  font-size: clamp(22px, 3vw, 30px);
}
.home .intro .intro-content a {
  margin-top: 18px;
  display: inline-block;
}
.home .intro .container.student {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-left: auto;
  margin-top: 5%;
  padding: 0 5%;
}
.home .intro .container.student h1 {
  font-size: 30px;
}
.home .intro .container.student p {
  font-size: 15px;
  opacity: 1;
}
.home .intro .container.student .right-side {
  margin-top: 4rem;
  margin-bottom: 4rem;
}
.home .intro .container.student .wh-card {
  background-color: #fff;
  border-radius: 55px;
  box-shadow: 0 3px 6px #00000022;
  height: 100%;
  padding: 45px;
}
.home .intro .container.student .wh-card .title {
  color: #051841;
  font-size: 20px;
  text-align: center;
}
.home .intro .container.student .wh-card a {
  transition: all 0.25s ease;
}
.home .intro .container.student .wh-card .forgot-password a {
  color: #000;
}
.home .intro .container.student .wh-card .forgot-password a:hover {
  color: #051841;
}
.home .intro .container.student .wh-card .dont-have a {
  color: #051841;
  font-size: 18px;
  font-weight: bold;
}
.home .intro .container.student .wh-card .dont-have a:hover {
  color: #000;
}
.home .gray-layout {
  background: none;
}
.home .gray-layout .container {
  padding: 30px 15px 50px;
}
.home .gray-layout .desc {
  opacity: 0.7;
  font-size: clamp(22px, 3vw, 30px);
}
.home .gray-layout .home-links {
  margin-inline: 5%;
}
.home .gray-layout .home-links .home-link {
  padding-inline: 25px;
}

.profile-header {
  height: 186px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.profile-header.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  background: #fff;
}
.profile-header::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../assets/img/layouts/icons.jpg");
  background-position: center;
  background-size: 30%;
  opacity: 0.11;
  z-index: 1;
  box-shadow: 0 3px 6px #00000022;
}
.profile-header .container {
  position: relative;
  z-index: 2;
}
.profile-header .container:first-child {
  margin-top: 30px;
}
.profile-header .navbar {
  z-index: 5;
  min-height: 62px;
  background: #001136;
  border-radius: 20px 20px 20px 0;
  box-shadow: 0 3px 6px #00000022;
}
.profile-header .navbar .nav-item:not(:last-child) {
  margin-right: 30px;
}
.profile-header .navbar .nav-item .nav-link {
  color: #ffffff94;
  font-size: 20px;
}
.profile-header .navbar .nav-item .nav-link:hover {
  color: #fff;
}
.profile-header .navbar .nav-item.active .nav-link {
  color: #fff;
}
.profile-header .welcome {
  line-height: 10px;
}
.profile-header .welcome p {
  color: #9F9F9F;
  margin-bottom: 0;
  font-size: 20px;
  font-weight: bold;
}
.profile-header .welcome h1 {
  color: #051841;
  font-weight: bold;
  margin-bottom: 0;
  font-size: 30px;
}

.mentor-pages .inner-intro {
  background: linear-gradient(135deg, #C398FA, #7B6BEF);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.parent-pages .inner-intro {
  background-image: url(../assets/img/layouts/header-green.jpg);
}
.parent-pages main .container .content .sidebar {
  background: linear-gradient(-30deg, #142E67, #051841);
}
.parent-pages main .container .content .sidebar .links li.active, .parent-pages main .container .content .sidebar .links li:hover {
  background-color: #00000010;
}
.parent-pages main .container .content .consultation-sidebar .links li a .date,
.parent-pages main .container .content .reports-sidebar .links li a .date {
  color: #000;
}

.mentor-pages main .container .content .sidebar {
  background: linear-gradient(-30deg, #142E67, #051841);
}
.mentor-pages main .container .content .sidebar .links li.active, .mentor-pages main .container .content .sidebar .links li:hover {
  background-color: #00000010;
}
.mentor-pages main .container .content .consultation-sidebar .links li a .date,
.mentor-pages main .container .content .reports-sidebar .links li a .date {
  color: #000;
}
.mentor-pages .reports .number {
  background: linear-gradient(-30deg, #142E67, #051841);
}

.mentor-pages .profile-header .navbar,
.parent-pages .profile-header .navbar {
  background: #051841;
}
.mentor-pages .profile-header .navbar .nav-item .nav-link:hover,
.parent-pages .profile-header .navbar .nav-item .nav-link:hover {
  color: #fff;
}
.mentor-pages .profile-header .navbar .nav-item.active .nav-link,
.parent-pages .profile-header .navbar .nav-item.active .nav-link {
  color: #fff;
}

.bar-box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.bar-box .percent {
  position: relative;
  width: 200px;
  height: 200px;
}
.bar-box .percent svg {
  position: relative;
  width: inherit;
  height: inherit;
  transform: rotateY(180deg);
}
.bar-box .percent svg circle {
  fill: none;
  stroke-width: 20;
  stroke: #000;
  transform: translate(30px, 30px);
  width: inherit;
  height: inherit;
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
  border-radius: 50%;
  stroke-linecap: round;
}
.bar-box .percent svg circle:nth-child(1) {
  stroke-dashoffset: 0;
  stroke: #7388a9;
  opacity: 0.35;
}
.bar-box .percent svg circle:nth-child(2) {
  stroke-dashoffset: calc(440 - (440 * 76) / 100);
  stroke: #db3645;
}
.bar-box .percent .number {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
}

#progress-bar {
  display: block;
  width: 500px;
  margin-right: auto;
}

.tests-pages .site-footer {
  display: none;
}
.tests-pages .footer {
  position: fixed;
  bottom: 0;
  right: 0;
  margin: auto;
  left: 0;
  text-align: right;
  padding-bottom: 15px;
}
.tests-pages .text-inputs {
  -moz-column-count: 2;
       column-count: 2;
  -moz-column-gap: 10px;
       column-gap: 10px;
  list-style: none;
}
.tests-pages .text-inputs li {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.tests-pages .text-inputs li span {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #db3645;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}
.tests-pages .text-inputs li input {
  width: calc(100% - 35px);
}
.tests-pages .question-item {
  padding: 1rem;
  justify-content: space-between;
  background: #FBFBFB;
  margin-bottom: 1rem;
}
.tests-pages .question-item .title {
  font-size: 15px;
  max-width: 50%;
}
.tests-pages .question-item:hover {
  background: #f1f1f1;
}
.tests-pages .question-item.border-danger {
  background: #ffdada;
}
.tests-pages .question-item .input-button:not(:last-child) {
  margin-right: 15px;
}
.tests-pages .desc {
  margin-bottom: 15px;
  font-size: 15px;
}
.tests-pages .desc p,
.tests-pages .desc span,
.tests-pages .desc div {
  font-size: 15px;
  font-family: "Tajawal", sans-serif !important;
}
.tests-pages .multiple-buttons .input-button {
  margin-bottom: 15px;
}
.tests-pages .multiple-buttons .input-button:not(:last-child) {
  margin-right: 15px;
}
.tests-pages main .container h1 {
  font-size: 20px;
  font-weight: bold;
}

.tests-modals .modal {
  background: linear-gradient(45deg, #f99e8359, #ef6d64);
}
.tests-modals .modal-dialog .modal-content {
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 0 10px #0000005c;
}
.tests-modals .modal-body {
  text-align: center;
}

main .container .content section.final-result {
  max-width: 100%;
}

.messages,
.reports {
  width: 100%;
}

.reports .number {
  min-width: 36px;
  max-width: 36px;
  min-height: 36px;
  max-height: 36px;
  background: linear-gradient(-30deg, #F2796C, #F7967E);
  color: #fff;
  border-radius: 50%;
  font-weight: bold;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reports .header .button button {
  padding: 0;
  height: 100%;
}

.modal textarea {
  height: 250px;
  min-height: 250px;
  max-height: 250px;
}

.select2 .select2-selection {
  outline: none;
  min-height: 45px;
  border: none;
  border-radius: 10px;
  box-shadow: 0 3px 6px #00000022;
  padding-right: 20px;
  text-align: right !important;
  transition: all 0.25s ease;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.select2 .select2-selection__arrow {
  position: relative !important;
}

.select2-container--default .select2-selection--single,
.select2-container .select2-selection--single {
  outline: none !important;
  min-height: 45px !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 3px 6px #00000022 !important;
  padding-left: 20px !important;
  text-align: left !important;
  transition: all 0.25s ease !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.select2-container--open .select2-dropdown--below {
  width: 323px;
  box-shadow: 0 0 10px -5px #000;
  border-radius: 5px;
  margin-top: 10px;
  border: 1px solid #eee;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  outline: 0 !important;
  border: 1px solid #eee;
}

.container.site-content {
  padding-bottom: 5rem;
}
.container.site-content .cards .card {
  padding: 0 15px;
  display: flex;
  align-items: center;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-bottom: 15px;
  margin-top: 0;
}
.container.site-content .cards .card:hover {
  transform: scale(1.02);
}
.container.site-content .cards .card a {
  display: block;
  width: 100%;
  text-align: center;
  color: #000;
}
.container.site-content .cards .card .image {
  width: 100%;
  min-height: 260px;
  border-radius: 45px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 3px 6px #00000022;
}
.container.site-content .cards .card .image img {
  height: 105%;
  width: 100%;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 1;
}
.container.site-content .cards .card .image .button {
  position: absolute;
  top: 25px;
  right: 25px;
  z-index: 2;
  background-color: #db3645;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all 0.25s ease;
  box-shadow: 0 3px 6px #00000022;
}
.container.site-content .cards .card .image .button:hover {
  color: #000;
}
.container.site-content .cards .card p {
  font-size: 17px;
  margin-top: 1.2rem;
}
.container.site-content nav[aria-label=breadcrumb] {
  background: none;
  padding: 0;
  background: none !important;
  box-shadow: none;
  min-height: auto;
}
.container.site-content nav[aria-label=breadcrumb] .breadcrumb {
  background: none;
  margin: 0;
  padding: 0;
}

.cat-body {
  padding-right: 15px;
  margin-bottom: 15px;
}
.cat-body .scrollable {
  padding-right: 15px;
  height: 552px;
  overflow-y: scroll;
}
.cat-body .scrollable::-webkit-scrollbar {
  width: 8px;
}
.cat-body .scrollable::-webkit-scrollbar-track {
  background: #eee;
}
.cat-body .scrollable::-webkit-scrollbar-thumb {
  border-radius: 30px;
  background-color: #db3645;
  outline: 0;
}
.cat-body p,
.cat-body span,
.cat-body div {
  font-family: "Tajawal", sans-serif !important;
  text-indent: 0 !important;
}

.sidebar {
  overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
  width: 5px;
}
.sidebar::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background-color: #203e79;
  outline: 0;
}

.modal-open {
  padding-left: 0 !important;
}

.video-modal .modal-content {
  border-radius: 24px;
  padding: 20px;
}
.video-modal iframe {
  height: 50vh;
}
.video-modal .modal-header {
  padding: 0 0 10px;
}
.video-modal .modal-body,
.video-modal .modal-footer {
  padding: 0;
  margin: 0;
}
.video-modal .modal-footer {
  display: block;
}
.video-modal .modal-footer > div > div {
  padding: 0;
}
.video-modal .modal-footer button {
  background: none;
  border: 1px solid #000;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  outline: 0;
}
.video-modal .modal-footer button:active {
  outline: 0;
}

.some-error {
  text-align: center;
  padding: 50px 0;
}
.some-error .image {
  text-align: center;
}
.some-error .image img {
  width: 50%;
}
.some-error .text p {
  margin-bottom: 0;
  font-size: 25px;
}

.footer-links-list {
  list-style: none;
  color: #fff;
}
.footer-links-list li:not(:first-child) {
  margin-top: 15px;
}
.footer-links-list li a {
  color: #fff;
  transition: color 0.25s ease;
}
.footer-links-list li a:hover {
  text-decoration: none;
  color: #000;
}

footer .container .social {
  margin-top: 15px;
}

.anchors-template ul.anchors {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
.anchors-template ul.anchors li a {
  font-size: 20px;
}
.anchors-template ul.anchors li a.active {
  color: #AA3A3A;
}
.anchors-template .cover {
  width: 100%;
  height: 350px;
  -o-object-fit: cover;
     object-fit: cover;
}
.anchors-template .cover img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.hero__icon {
  display: none;
  text-align: center;
  margin-bottom: 3rem;
}
.hero__icon img {
  width: 50%;
}

.site-footer-web {
  display: block;
}

.site-footer-mobile {
  display: none;
  text-align: center;
  color: #fff;
}
.site-footer-mobile .social-mobile a {
  color: #051841;
  font-size: 35px;
  transition: color 0.25s ease;
  background-color: #fff;
  margin: 0 5px;
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  line-height: 78px;
}
.site-footer-mobile .copyrights-wrapper-mobile {
  margin-top: 40px;
}
.site-footer-mobile .copyrights-wrapper-mobile p {
  margin: 0;
}
.site-footer-mobile .copyrights-wrapper-mobile div {
  margin: 40px 0;
}

@media (max-width: 770px) {
  .site-footer-web {
    display: none;
  }

  .site-footer-mobile {
    display: block;
  }

  .hero__icon {
    display: block;
  }
}
@media (max-width: 768px) {
  .home .intro {
    border-bottom: 38vw solid transparent;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, radial-gradient(circle farthest-side, #fff 99.5%, transparent) bottom 0 right 0/70vw 70vw no-repeat;
            mask: linear-gradient(#fff 0 0) padding-box, radial-gradient(circle farthest-side, #fff 99.5%, transparent) bottom 0 right 0/70vw 70vw no-repeat;
    -webkit-mask-position: bottom 0 center;
            mask-position: bottom 0 center;
    padding-top: 70px;
  }
  .home .intro .children {
    width: 70vw;
    height: 70vw;
    bottom: -38vw;
    left: 0;
    right: 0;
    margin: auto;
  }
  .home .intro .intro-content {
    width: 100% !important;
  }
  .home .gray-layout {
    margin-top: 0;
  }

  header.icons-layout .container .welcome p {
    font-size: 18px;
  }
  header.icons-layout .container .welcome h1 {
    font-size: 23px;
  }

  main .choices-ques .ques .buttons {
    flex-wrap: wrap;
  }
  main .choices-ques .ques .buttons button {
    margin-top: 0.5rem;
  }

  main .container.student-incomplete-profile h1,
.main .container.student-incomplete-profile h1 {
    font-size: 30px;
  }
  main .container.student-incomplete-profile button,
.main .container.student-incomplete-profile button {
    width: 100%;
  }
  main .container.student-incomplete-profile .left-side,
.main .container.student-incomplete-profile .left-side {
    margin-top: 2rem;
    align-items: center !important;
  }
  main .container .main-card .image img,
.main .container .main-card .image img {
    width: auto !important;
    height: 80%;
  }

  footer {
    height: auto;
    background: linear-gradient(135deg, #142E67, #051841) !important;
  }
  footer .container .logos {
    text-align: center;
  }
  footer .container .logos .logo {
    margin-top: 15px;
  }
  footer .container .logos .logo:first-child {
    margin-top: 0;
  }
  footer .container .logos .logo img {
    width: auto;
    height: 100%;
    max-height: 52px;
  }
  footer .container .paths {
    margin-top: 2rem;
  }

  .profile-header .container {
    flex-direction: column;
    margin-bottom: 20px;
  }
  .profile-header .container .button {
    margin: 0 auto !important;
  }
  .profile-header .container .welcome {
    line-height: 10px;
    text-align: center;
    margin-bottom: 20px;
  }
  .profile-header .navbar {
    height: auto;
    max-height: auto !important;
    min-height: auto !important;
  }

  main.gray-layout .container,
.main.gray-layout .container {
    padding-top: 0;
  }

  .modal-dialog .modal-content {
    border: none;
    border-radius: 20px;
    padding: 10px;
  }

  .modal-dialog .modal-content .modal-header .modal-title {
    font-size: 25px;
  }

  .modal-dialog .modal-content .modal-body p {
    font-size: 18px;
  }

  main .container .content {
    flex-direction: column !important;
  }

  main .container .content .sidebar {
    min-width: 100%;
    max-width: 100%;
    min-height: -webkit-fit-content !important;
    min-height: -moz-fit-content !important;
    min-height: fit-content !important;
    padding-top: 20px !important;
  }

  .tests-pages .question-item {
    flex-wrap: wrap;
    justify-content: center !important;
  }
  .tests-pages .question-item .title,
.tests-pages .question-item .options {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
  .tests-pages .question-item .options {
    margin-top: 5px;
  }
  .tests-pages .footer {
    position: static;
    width: 100%;
    text-align: center;
    padding-top: 15px;
  }
  .tests-pages main .container .content .sidebar {
    position: static;
    padding-top: 15px;
    min-height: auto;
    height: auto;
  }
  .tests-pages .text-inputs {
    -moz-column-count: 1;
         column-count: 1;
  }
  .tests-pages main .container .content section {
    width: 100%;
    max-width: 100%;
    padding: 15px;
  }

  .container.site-content .cards .card {
    min-height: auto;
  }

  .inner-intro {
    height: auto;
  }
  .inner-intro .right-side {
    text-align: center;
    margin-bottom: 40px;
  }

  .student-pages .gray-layout {
    margin-top: 30px;
  }

  .mentor-pages .inner-intro {
    padding: 110px 0;
  }

  .parent-pages .gray-layout {
    margin-top: 30px;
  }

  .footer-links-list {
    -moz-column-count: 2;
         column-count: 2;
    text-align: left;
    padding: 0;
    margin: 0;
    width: 100%;
  }
}
@media (max-width: 990px) {
  main .container .main-card .image img,
.main .container .main-card .image img {
    width: 80%;
  }
  main.gray-layout,
.main.gray-layout {
    background-position: center;
  }

  footer {
    background: linear-gradient(180deg, #051841, #142E67) !important;
    height: auto !important;
  }
  footer .container .social a {
    font-size: 25px;
  }

  .home .intro {
    min-height: auto;
    text-align: center;
  }
  .home .intro .intro-content {
    width: 70%;
  }

  footer .container .social {
    width: 45%;
    margin-top: 50px;
  }

  #mainNavbar {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px #0000002b;
    position: relative;
  }
  #mainNavbar:before {
    content: "";
    position: absolute;
    top: -19px;
    right: 15px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    -webkit-clip-path: polygon(50% 18%, 0% 100%, 100% 100%);
    clip-path: polygon(50% 18%, 0% 100%, 100% 100%);
  }

  .main-header nav ul.links li a {
    color: #051841;
  }

  .main-header nav ul.links li a svg path {
    fill: #051841;
  }

  .main-header nav ul.links li a svg {
    height: auto;
    width: 30px;
  }

  .main-header nav ul.social {
    display: flex;
    flex-direction: row !important;
    padding: 10px;
    justify-content: space-evenly;
    border-top: 1px solid #eee;
  }
  .main-header nav ul.social li a,
.main-header nav ul.social li i {
    color: #000 !important;
  }

  .main-header nav ul.links li .dropdown-menu {
    padding: 0;
    background: #f5f5f5;
    border-radius: 0 !important;
    box-shadow: none;
  }

  .main-header nav ul.links li:hover::before,
.main-header nav ul.links li.active::before {
    content: none;
  }

  .navbar-toggler {
    color: #fff !important;
  }
}
@media (max-width: 991px) {
  main .container .content .choices-ques .ques .title {
    text-align: center;
  }
  main .container .content .choices-ques .ques .buttons {
    justify-content: center;
    margin-top: 1rem;
  }

  main.gray-layout,
.main.gray-layout {
    margin-top: -30px;
  }
}
@media (min-width: 990px) and (max-width: 1470px) {
  main.gray-layout,
.main.gray-layout {
    margin-top: -90px;
  }

  .main-header nav ul.links li a .name {
    font-size: 16px;
  }

  .inner-intro {
    height: 125vh;
  }

  .student-pages .gray-layout {
    margin-top: -355px;
  }

  .main-header nav ul.social {
    display: none;
  }
}
@media (max-width: 1286px) {
  home.main .intro .intro-content {
    width: 100%;
  }
}
@media (max-width: 576px) {
  .site-footer .container .row {
    margin: 0 !important;
  }
}