* {
  direction: rtl;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Roboto', 'Tajawal';
}

body {
  margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
}

.overflow-redirection {
  position: fixed;
  display: flex;
  z-index: 10000;

  top: 0;
  right: 0;
  left: 0;
  bottom: 0;

  width: 100vw;
  height: 0;

  background: rgba(255, 255, 255, 0);
  transition: 0.3s background ease-out;
}
.overflow-redirection.active {
  height: 100vh;
  background: rgba(255, 255, 255, 1);
}

.container {
  position: relative;
  display: flex;

  flex-direction: column;

  margin: 30px auto;

  width: calc(100% - (30px*2));
  max-width: 400px;
}
.container-title {
  position: relative;

  margin: 20px 0;

  font-size: 48px;
  font-weight: 700;

  color: rgba(51, 51, 51, 1);
}
.container-subtitle {
  position: relative;

  margin: 10px 0;
  margin-top: 20px;

  text-align: justify;

  font-size: 28px;
  font-weight: 700;

  color: rgba(51, 51, 51, 1);
}
.container-subtitle-description {
  position: relative;

  margin: 20px 0;
  margin-top: 5px;

  text-align: justify;

  font-size: 28px;
  font-weight: 700;

  color: rgba(15, 135, 220, 1);
}

.container-paragraph {
  position: relative;

  margin: 20px 0;

  line-height: 2;

  text-align: justify;

  font-size: 20px;
  font-weight: 500;

  color: rgba(51, 51, 51, 1);
}
h4.container-paragraph {
  font-weight: 600;
}

.container-ol {
  position: relative;

  list-style: inside decimal;

  margin: 10px 0;
  padding: 0;

  text-align: justify;

  font-size: 20px;
  font-weight: 500;

  color: rgba(51, 51, 51, 1);
}
.container-ol li::marker {
  color: rgba(250, 170, 125, 1);
}