html {
  scroll-behavior: smooth; }

.d-inline-flex {
  display: inline-flex; }

.close-container {
  top: 10px;
  right: 15px; }

.close-container * {
  pointer-events: none; }

.ff-raleway {
  font-family: "Raleway"; }

.ff-akrobat {
  font-family: "Akrobat"; }

body.rtl .close-container {
  right: unset;
  top: 10px;
  left: 15px; }
body.rtl .ff-akrobat {
  font-family: "Tanseek"; }

.figure-container {
  font-family: "Akrobat";
  overflow: hidden; }
  .figure-container .figure-clickable-person_container {
    min-width: 42.5%;
    max-width: 42.5%;
    position: relative;
    z-index: 0;
    background-color: white; }
  .figure-container .figure-clickable-person_container::after {
    content: "";
    right: 0;
    top: 2rem;
    bottom: 2rem;
    width: 1px;
    background-color: black;
    position: absolute; }
  .figure-container .figure-content-container.hidden {
    z-index: -1;
    opacity: 0; }
  .figure-container .figure-content-container {
    min-width: 57.5%;
    max-width: 57.5%;
    padding: 0 5px 0 65px;
    z-index: 1;
    transition: all 300ms ease-in-out;
    opacity: 1; }
  .figure-container .instruction .instruction-svg-container {
    display: inline-flex; }
    .figure-container .instruction .instruction-svg-container svg {
      width: 2rem;
      height: 2rem; }
  .figure-container .instruction span {
    font-family: "Raleway";
    font-size: 1.2rem; }
  .figure-container .corrupted-person.active .corrupted-person-img::after {
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    position: absolute;
    right: 0;
    border-radius: 50%;
    border: 5px solid #CE3838; }
  .figure-container .corrupted-person {
    min-width: 50%;
    max-width: 50%;
    cursor: pointer; }
    .figure-container .corrupted-person * {
      pointer-events: none; }
    .figure-container .corrupted-person .corrupted-person-img {
      max-width: 7rem;
      min-width: 7rem;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      background-color: #CCCBBE;
      position: relative; }
    .figure-container .corrupted-person .corrupted-person-desc {
      padding: 0 30px;
      line-height: 1.15; }
      .figure-container .corrupted-person .corrupted-person-desc .name, .figure-container .corrupted-person .corrupted-person-desc .last-name {
        font-size: 1.4rem;
        font-weight: 700; }
      .figure-container .corrupted-person .corrupted-person-desc .last-name {
        color: #CE3838; }
  .figure-container #figure-content::after {
    position: sticky;
    position: -webkit-sticky;
    width: 100%;
    bottom: 0;
    background: linear-gradient(rgba(255, 255, 255, 0), white);
    content: "";
    height: 4rem;
    display: block; }
  .figure-container #figure-content {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 50px 0 0; }
    .figure-container #figure-content h4 {
      font-size: 1.6rem;
      font-weight: 700;
      color: #CE3838;
      margin-bottom: 1rem;
      text-transform: inherit; }
      .figure-container #figure-content h4 svg {
        position: relative;
        top: .4rem;
        width: 2rem;
        height: 2rem; }
    .figure-container #figure-content p, .figure-container #figure-content ul {
      font-weight: 400;
      font-family: "Raleway";
      font-size: 1.3rem;
      line-height: 1.4; }
      .figure-container #figure-content p a, .figure-container #figure-content ul a {
        display: inline-block;
        margin: unset;
        background-color: unset;
        color: #3781a7;
        text-decoration: underline;
        text-decoration-color: #3781a7;
        text-underline-position: under;
        font-size: inherit;
        padding: unset;
        padding-top: unset;
        border-radius: unset;
        max-width: unset;
        font-weight: unset;
        text-align: unset; }
    .figure-container #figure-content a {
      margin: 0 auto;
      background-color: #CE3838;
      cursor: pointer;
      font-size: 1.6rem;
      padding: .75rem 1rem;
      padding-top: .2rem;
      border-radius: 10px;
      color: white;
      max-width: fit-content;
      font-weight: 700;
      text-align: center; }
      .figure-container #figure-content a svg {
        width: 2rem;
        height: 2rem;
        position: relative;
        top: .5rem; }
  .figure-container .figure-clickable-person-description-header-img_container {
    background-color: #CCCBBE;
    border-radius: 50%;
    min-width: 14rem;
    max-width: 14rem;
    min-height: 14rem;
    max-height: 14rem; }
  .figure-container .figure-clickable-person-description-header-desc {
    padding: 0 15px; }
    .figure-container .figure-clickable-person-description-header-desc h3 {
      font-size: 2.8rem;
      text-transform: inherit;
      font-family: "Akrobat"; }
    .figure-container .figure-clickable-person-description-header-desc p {
      font-size: 1.4rem;
      font-family: "Akrobat"; }
  .figure-container .figure-clickable-person-description-header-svg-container {
    display: inline-flex; }
    .figure-container .figure-clickable-person-description-header-svg-container svg {
      width: 1.5rem;
      height: 1.5rem; }

#figure-content::-webkit-scrollbar {
  width: 5px; }

/* Track */
#figure-content::-webkit-scrollbar-track {
  border-radius: 2.5px; }

/* Handle */
#figure-content::-webkit-scrollbar-thumb {
  background: #CE3838;
  border-radius: 2.5px; }

/* Handle on hover */
#figure-content::-webkit-scrollbar-thumb:hover {
  background: #CE3838; }

@media screen and (max-width: 1600px) and (min-width: 1024px) {
  .figure-container .instruction .instruction-svg-container svg {
    width: 2.5rem;
    height: 2.5rem; }
  .figure-container .instruction span {
    font-size: 1.2rem; }
  .figure-container .corrupted-person .corrupted-person-img {
    max-width: 6rem;
    min-width: 6rem; }
  .figure-container .corrupted-person .corrupted-person-desc {
    padding: 0 15px; }
    .figure-container .corrupted-person .corrupted-person-desc .name, .figure-container .corrupted-person .corrupted-person-desc .last-name {
      font-size: 1.2rem; }
  .figure-container .figure-clickable-person-description-header-desc h3 {
    font-size: 3rem; }
  .figure-container .figure-clickable-person-description-header-desc p {
    font-size: 1.4rem; }
  .figure-container #figure-content h4 {
    font-size: 1.6rem; }
    .figure-container #figure-content h4 svg {
      top: .5rem;
      width: 3rem;
      height: 3rem; }
  .figure-container #figure-content p {
    font-size: 1.3rem; }
  .figure-container #figure-content a {
    font-size: 1.6rem;
    padding: .75rem 1rem; }
    .figure-container #figure-content a svg {
      width: 2rem;
      height: 2rem;
      position: relative;
      top: .3rem; }
  .figure-container .figure-clickable-person-description-header-img_container {
    min-width: 10rem;
    max-width: 10rem;
    min-height: 10rem;
    max-height: 10rem; } }
@media screen and (max-width: 1023.5px) and (min-width: 530px) {
  .figure-container .instruction {
    text-align: center; }
  .figure-container .figure-clickable-person-img {
    transform: translate(20%, 0); } }
@media screen and (max-width: 1023.5px) {
  .figure-container #figure-content {
    padding: 0 10px 0 0; }
  .figure-container .figure-clickable-person_container::after {
    content: none; }
  .figure-container .figure-clickable-person_container {
    min-width: unset;
    max-width: unset;
    position: relative; }
  .figure-container .figure-content-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    padding: 0 5px 0 15px;
    min-width: unset;
    max-width: unset;
    right: 0;
    z-index: 1; }
  .figure-container .figure-content-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    right: 0;
    background-color: white;
    opacity: 0.95;
    z-index: -1; } }
@media screen and (max-width: 1023.5px) and (min-width: 768px) {
  .figure-container .figure-clickable-person-description-header-img_container {
    min-width: 10rem;
    max-width: 10rem;
    min-height: 10rem;
    max-height: 10rem; }
  .figure-container .corrupted-person .corrupted-person-img {
    max-width: 8rem;
    min-width: 8rem; }
  .figure-container .corrupted-person .corrupted-person-desc {
    padding: 0 15px; }
    .figure-container .corrupted-person .corrupted-person-desc .name, .figure-container .corrupted-person .corrupted-person-desc .last-name {
      font-size: 1.5rem; } }
@media screen and (max-width: 767.5px) {
  .figure-container .figure-clickable-person-description-header-img_container {
    min-width: 10rem;
    max-width: 10rem;
    min-height: 10rem;
    max-height: 10rem;
    margin: 0 auto;
    margin-bottom: 1rem; }
  .figure-container .figure-clickable-person-description-header-desc h3 {
    text-align: center; } }
@media screen and (max-width: 500px) {
  .figure-container {
    background-color: white;
    overflow: hidden; }
    .figure-container .instruction .instruction-svg-container svg {
      width: 1.5rem;
      height: 1.5rem; }
    .figure-container .figure-clickable-person-description-header_container {
      flex-direction: column; }
    .figure-container .figure-clickable-person-description-header-desc {
      padding: 0; }
    .figure-container .corrupted-person .corrupted-person-img {
      max-width: 5rem;
      min-width: 5rem; }
    .figure-container .corrupted-person .corrupted-person-desc {
      padding: 0 15px; }
      .figure-container .corrupted-person .corrupted-person-desc .name, .figure-container .corrupted-person .corrupted-person-desc .last-name {
        font-size: 1.2rem; }
    .figure-container .corrupted-person.active .corrupted-person-img::after {
      border: 3px solid #CE3838; } }
body.rtl .figure-container {
  font-family: "tajawal"; }
  body.rtl .figure-container .figure-clickable-person_container::after {
    right: unset;
    left: 0; }
  body.rtl .figure-container .figure-content-container {
    padding: 0 65px 0 5px; }
  body.rtl .figure-container .instruction .instruction-svg-container {
    display: inline-flex; }
    body.rtl .figure-container .instruction .instruction-svg-container svg {
      width: 2rem;
      height: 2rem; }
  body.rtl .figure-container .instruction span {
    font-family: "tajawal";
    font-size: 1.2rem; }
  body.rtl .figure-container .corrupted-person .corrupted-person-desc {
    padding: 0 30px;
    line-height: 1.15; }
    body.rtl .figure-container .corrupted-person .corrupted-person-desc .name, body.rtl .figure-container .corrupted-person .corrupted-person-desc .last-name {
      font-size: 1.7rem;
      font-weight: 700;
      font-family: "Tanseek";
      line-height: 1; }
    body.rtl .figure-container .corrupted-person .corrupted-person-desc .last-name {
      color: #CE3838; }
  body.rtl .figure-container #figure-content {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0 0 50px; }
    body.rtl .figure-container #figure-content h4 {
      font-size: 1.6rem;
      font-weight: 700;
      color: #CE3838;
      margin-bottom: 1rem;
      text-transform: inherit; }
      body.rtl .figure-container #figure-content h4 svg {
        position: relative;
        top: .4rem;
        width: 2rem;
        height: 2rem; }
    body.rtl .figure-container #figure-content p, body.rtl .figure-container #figure-content ul {
      font-weight: 400;
      font-family: "tajawal";
      font-size: 1.3rem;
      line-height: 1.4; }
      body.rtl .figure-container #figure-content p a, body.rtl .figure-container #figure-content ul a {
        display: inline-block;
        margin: unset;
        background-color: unset;
        color: #3781a7;
        text-decoration: underline;
        text-decoration-color: #3781a7;
        text-underline-position: under;
        font-size: inherit;
        padding: unset;
        padding-top: unset;
        border-radius: unset;
        max-width: unset;
        font-weight: unset;
        text-align: unset; }
    body.rtl .figure-container #figure-content a {
      margin: 0 auto;
      background-color: #CE3838;
      cursor: pointer;
      font-size: 1.6rem;
      padding: .75rem 1rem;
      padding-top: .2rem;
      border-radius: 10px;
      color: white;
      max-width: fit-content;
      font-weight: 700;
      text-align: center;
      font-family: "tajawal"; }
      body.rtl .figure-container #figure-content a svg {
        width: 2rem;
        height: 2rem;
        position: relative;
        top: .5rem; }
  body.rtl .figure-container .figure-clickable-person-description-header-desc {
    padding: 0 15px; }
    body.rtl .figure-container .figure-clickable-person-description-header-desc h3 {
      font-size: 2.8rem;
      line-height: 1.4;
      text-transform: inherit;
      font-family: "tajawal"; }
    body.rtl .figure-container .figure-clickable-person-description-header-desc p {
      font-size: 1.4rem;
      font-family: "tajawal"; }
  body.rtl .figure-container .figure-clickable-person-description-header-svg-container {
    display: inline-flex; }
    body.rtl .figure-container .figure-clickable-person-description-header-svg-container svg {
      width: 1.5rem;
      height: 1.5rem; }
@media screen and (max-width: 1023.5px) {
  body.rtl .figure-container #figure-content {
    padding: 0 0 0 10px; }
  body.rtl .figure-container .figure-content-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    padding: 0 15px 0 5px;
    min-width: unset;
    max-width: unset;
    right: 0; } }
@media screen and (max-width: 1023.5px) and (min-width: 530px) {
  body.rtl .figure-container .figure-clickable-person-img {
    transform: translate(-20%, 0); } }

/*# sourceMappingURL=index.css.map */