/* Login */
.login-section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100vh;
    background-image: linear-gradient(160deg, #fff 50%, #5b58c6 50%);
    background-size: cover;
    background-repeat: no-repeat;
}
.login-section .form-section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-image: linear-gradient(160deg, #5855c3 10%, #8d8af7 90%);
    border: 1px solid #707070;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
            box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    width: 400px;
    height: 600px;
    text-align: center;
}
.login-section .form-section .logo {
    width: 200px;
    height: 100px;
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
  
.login-section .form-section form {
    width: 80%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}

.login-section .form-section form .email {
    width: 100%;
    position: relative;
}

.login-section .form-section form .email input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #eae9ef;
    background: transparent;
    margin-bottom: 2rem;
    color: #fff;
    font-size: 18px;
    font-style: italic;
    outline: none;
}

.login-section .form-section form .email i {
    position: absolute;
    color: #eae9ef;
    font-size: 18px;
}

.login-section .form-section form .password {
    width: 100%;
    position: relative;
}

.login-section .form-section form .password input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #eae9ef;
    background: transparent;
    margin-bottom: 2rem;
    color: #ffffff;
    font-size: 18px;
    font-style: italic;
    outline: none;
}

.login-section .form-section form .password i {
    position: absolute;
    color: #eae9ef;
    font-size: 18px;
}

.login-section .form-section form .login {
    width: 100%;
    background: #fff;
    color: #827fed;
    font-size: 1.2em;
    font-weight: bold;
    border: 2px solid #fff;
}

.login-section .form-section form .login:hover {
    color: #000;
    border: 2px solid #000;
    -webkit-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}

.login-section .form-section .forget-pass {
    text-decoration: none;
    color: #fff;
    font-size: 1.2em;
    margin-top: 2rem;
}

.login-section .form-section .forget-pass:hover {
    color: #000;
    -webkit-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}

.login-section .form-section .copywrite {
    margin-top: auto;
    margin-bottom: 2rem;
    text-decoration: none;
    color: #fff;
    font-size: 1.2em;
}

.login-section .form-section .copywrite:hover {
    color: #000;
    -webkit-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}

@media screen and (max-width: 420px) {
    .login-section {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      min-height: 100vh;
    }
    .login-section .form-container {
      width: 90%;
    }
    .login-section .form-container .form-section {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      background-image: linear-gradient(160deg, #5855c3 10%, #8d8af7 90%);
      border: 1px solid #707070;
      -webkit-box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
              box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
      width: 100%;
      height: 597px;
      margin: 0 auto;
    }
    .login-section .form-container .form-section .logo {
      width: 150px;
      height: 80px;
      margin-top: 4rem;
      margin-bottom: 4rem;
    }
    .login-section .form-container .form-section form {
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
    }
    .login-section .form-container .form-section form .email {
      width: 100%;
      position: relative;
    }
    .login-section .form-container .form-section form .email input {
      width: 100%;
      border: none;
      border-bottom: 1px solid #eae9ef;
      background: transparent;
      margin-bottom: 2rem;
      color: #fff;
      font-size: 0.8em;
      font-style: italic;
      outline: none;
    }
    .login-section .form-container .form-section form .email i {
      position: absolute;
      color: #eae9ef;
      font-size: 0.8em;
      right: 5px;
    }
    .login-section .form-container .form-section form .password {
      width: 100%;
      position: relative;
    }
    .login-section .form-container .form-section form .password input {
      width: 100%;
      border: none;
      border-bottom: 1px solid #eae9ef;
      background: transparent;
      margin-bottom: 2rem;
      color: #ffffff;
      font-size: 0.8em;
      font-style: italic;
      outline: none;
    }
    .login-section .form-container .form-section form .password i {
      position: absolute;
      color: #eae9ef;
      right: 5px;
      font-size: 0.8em;
    }
    .login-section .form-container .form-section form .login {
      width: 100%;
      background: #fff;
      color: #827fed;
      font-size: 18px;
      font-weight: bold;
      border: 2px solid #fff;
    }
    .login-section .form-container .form-section form .login:hover {
      color: #000;
      border: 2px solid #000;
      -webkit-transition: color 0.2s ease-in-out;
      transition: color 0.2s ease-in-out;
    }
    .login-section .form-container .form-section .forget-pass {
      text-decoration: none;
      color: #fff;
      font-size: 18px;
      margin-top: 2rem;
    }
    .login-section .form-container .form-section .forget-pass:hover {
      color: #000;
      -webkit-transition: color 0.2s ease-in-out;
      transition: color 0.2s ease-in-out;
    }
    .login-section .form-container .form-section .copywrite {
      margin-top: auto;
      margin-bottom: 1.5rem;
      text-decoration: none;
      color: #fff;
      font-size: 18px;
    }
    .login-section .form-container .form-section .copywrite:hover {
      color: #000;
      -webkit-transition: color 0.2s ease-in-out;
      transition: color 0.2s ease-in-out;
    }
}

/* pagination */
.pagi {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: auto;
}

.pagi nav ul li a {
  border: none;
  font-size: 2rem;
  color: #ADADAD;
}

.pagi nav ul li .prev,
.pagi nav ul li .next,
.pagi nav ul li .pagination-active {
  color: #386BC0;
}

@media screen and (max-width: 576px) {
  .pagi {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      margin: auto;
  }

  .pagi nav ul li a {
      border: none;
      font-size: 1.5rem;
      color: #ADADAD;
  }

  .pagi nav ul li .prev,
  .pagi nav ul li .next,
  .pagi nav ul li .pagination-active {
      color: #386BC0;
  }
}
/* 404 error page  */

.error-container {
  display: flex;
  flex-direction: column;
  justify-content:center ;
  align-items: center;
}
.error-img {
  width: 550px;
  height: 660px;
  margin: auto;
}
.error-text {
  margin-top: -6rem;
  font-size: 45px;
  color: #4779CD;
}
.error-btn {
  font-size: 24px;
  color: #fff;
  background-color: #4779CD;
  padding: 10px 40px;
  border: 2px solid #4779CD;
  border-radius: 30px 30px;
}
.error-btn:hover {
  color: #000;
  background-color: transparent;
  border: 2px solid #000;
  transition: all 0.3s;
}

.lang {
  text-decoration: none;
  font-size: 18px;
  color: #8b92ac;
}

.lang:hover {
  color: #000;
  -webkit-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
}