@font-face {
  font-family: 'NotoKufiArabic-ExtraBold';
  src: url('../fonts/NotoKufiArabic-SemiBold.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'NotoKufiArabic-Bold';
  src: url('../fonts/NotoKufiArabic-Bold.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'NotoKufiArabic-Regular';
  src: url('../fonts/NotoKufiArabic-Regular.ttf');
  font-display: swap;
}

/* ---- */

body {
  background-color: #F7F9FF;
}

:root {
  font-size: 16px;
}

@media (max-width: 767.9px) {
  :root {
    font-size: 14px;
  }
}

* {
  margin: 0;
  box-sizing: border-box;
  font-family: 'NotoKufiArabic-Regular';
}

a {
  text-decoration: unset;
}

header {
  border-bottom: 1px solid #EAE9D3;
  border-top: 6px solid #353434;
}

header .col-logo {
  display: inline-flex;
  justify-content: center;
  position: relative;
}

header .col-logo::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 6px;
  background-color: #C2383A;
  right: 0;
  top: -22px;
}

header img {
  width: auto;
  height: auto;
  max-width: 30rem;
}

.title-page {
  text-align: center;
  color: #353434;
}

.title-page h1 {
  font-family: 'NotoKufiArabic-ExtraBold';
  font-size: 1.625rem;
}

.title-page h2 {
  font-family: 'NotoKufiArabic-Bold';
  font-size: 1.325rem;
}

.title-page small {
  font-size: 0.875rem;
  color: #C2383A;
}

.slide {
  box-shadow: 0 0 20px rgb(0 0 0 / 6%);
  border-radius: 1rem;
  background-color: #fff;
}

.slide .title h2 {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.25rem;
  color: #353434;
}

.slide .title h2 svg {
  width: 1.75rem;
  max-height: 1.75rem;
  height: auto;
}

.slide .title h2 [fill] {
  fill: #353434;
}

.slide p {
  font-size: 1rem;
  color: #000000;
}

.before-next {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.before-next span,
.btns-start-form a {
  border: 1px solid #DDEEFF;
  background-color: #fff;
  color: #3a8bd1;
  font-size: 1rem;
  font-family: 'NotoKufiArabic-Bold';
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: 0.3s;
    display: inline-block;
}

.btns-start-form a {
  display: block;
  text-align: center;
}

.before-next span:hover {
  background-color: #f8fcff;
  border: 1px solid #c5d6e7;
}

.before-next b {
  color: #acd7ff;
}

.slide-conditions {
  background-color: #fffffa;
}

.slide-conditions .title h2 {
  color: #C2383A;
}

.slide-conditions .title h2 [fill] {
  fill: #C2383A;
}

.div-input,
.div-check,
.div-check .options {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.div-check .options input {
  accent-color: #3a8bd1;
  width: 1rem;
  height: 1rem;
}

.div-input label,
.div-check .as-label {
  font-size: 1rem;
  color: #000;
}

.div-input input,
.div-input select,
.div-input textarea {
  font-size: 1rem;
  width: 100%;
  background-color: #FAFDFF;
  border: 1px solid #DDEEFF;
  padding: 0.5rem 0.875rem;
  border-radius: 0.325rem;
  color: #000;
  transition: 0.3s;
}

.div-input textarea {
  resize: none;
  resize: none;
}

.div-input input::placeholder {
  color: #D0D0D0;
  font-weight: 100;
}

.div-input input:focus,
.div-input select:focus,
.div-input textarea:focus {
  outline: 0;
  border: 1px solid #93a8bb;
}

.div-input small {
  font-size: 0.75rem;
  color: #b8b8b8;
}

.div-input small.error {
  color: #C2383A;
}

.div-input.error input,
.div-input.error select,
.div-input.error textarea {
  border-color: #C2383A;
  background-color: #FFF9F9;
}

.alert {
  padding: .75rem 1.25rem;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border: 1px solide #f5c6cb;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
}

.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
}

.btn-success {
  color: #fff !important;
  background-color: #28a745 !important;
  border: 1px solid #28a745 !important;
}

.btn-primary {
  color: #fff !important;
  background-color: #007bff !important;
  border: 1px solid #007bff !important;
}

footer {
  padding: 1.5rem 0;
  background-color: #fff;
}

footer .social {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

footer .social a {
  display: inline-flex;
  transition: 0.3s;
}

footer .social a:hover {
  transform: scale(1.05);
}

footer .social a svg {
  width: 1.875rem;
  height: 1.875rem;
}

footer p {
  direction: ltr;
  color: #8D8D8D;
  font-size: 1rem;
  text-align: right;
}

footer .logoWsla img {
  height: auto;
  width: auto;
  max-width: 12rem;
}

@media (min-width: 1200px) {
  footer .logoWsla img {
    filter: grayscale(1);
    transition: 0.3s;
  }

  footer .logoWsla:hover img {
    filter: grayscale(0);
  }
}

@media (max-width: 767.9px) {
  header .col-logo::before {
    top: -20px;
  }
}

@media (max-width: 399.9px) {
  header img {
    max-width: 90%;
  }
}

.parentLoader {
    position: relative;
    overflow: hidden;
}
.loaderCustom {
    display: none;
}
.parentLoader>.loaderCustom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(255 255 255 / 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
}


.loader-3Dots {
    width: 15px;
    height: 15px;
    aspect-ratio: 1;
    --c: no-repeat linear-gradient(#000 0 0);
    background:
        var(--c) 0%   50%,
        var(--c) 50%  50%,
        var(--c) 100% 50%;
    background-size: 20% 100%;
    animation: l1 1s infinite linear;
}
@keyframes l1 {
    0%  {background-size: 20% 100%,20% 100%,20% 100%}
    33% {background-size: 20% 10% ,20% 100%,20% 100%}
    50% {background-size: 20% 100%,20% 10% ,20% 100%}
    66% {background-size: 20% 100%,20% 100%,20% 10% }
    100%{background-size: 20% 100%,20% 100%,20% 100%}
}