/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 10 version
*/

@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap);
/*@charset "UTF-8";*/
/*
This file is used to contain all abstract imports
Files insed this folder can contain abstract settings, helpers or functions. They have no direct output
*/
@font-face {
  font-family: vazir;
  src: url(/fonts/vazir/vazir.ttf);
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: vazir;
  src: url(/fonts/vazir/vazir-thin.ttf);
  font-style: normal;
  font-weight: 100;
}
@font-face {
  font-family: vazir;
  src: url(/fonts/vazir/vazir-bold.ttf);
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: vazir;
  src: url(/fonts/vazir/vazir-light.ttf);
  font-style: normal;
  font-weight: 300;
}
@font-face {
  font-family: vazir;
  src: url(/fonts/vazir/vazir-medium.ttf);
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: sahel;
  src: url(/fonts/sahel/sahel.ttf);
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: sahel;
  src: url(/fonts/sahel/sahel-bold.ttf);
  font-style: normal;
  font-weight: 600;
}
@font-face {
  font-family: sahel;
  src: url(/fonts/sahel/sahel-black.ttf);
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: sahelfd;
  src: url(/fonts/sahel/sahel-fd.ttf);
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: sahelfd;
  src: url(/fonts/sahel/sahel-bold-fd.ttf);
  font-style: normal;
  font-weight: 600;
}
@font-face {
  font-family: sahelfd;
  src: url(/fonts/sahel/sahel-black-fd.ttf);
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: "FontAwesome";
  src: url(/fonts/FontAwesome/fontawesome-webfont.ttf);
  font-weight: 400;
  font-style: normal;
}
.u-mb-9 {
  margin-bottom: 9rem;
}

.u-mb-4 {
  margin-bottom: 4rem;
}

.u-mt-8 {
  margin-top: 8rem;
}

/*
$breakpoint argument choices:
- phone
- tablet-port
- desktop-land
- laptop/desktop
- big-desktop
*/
/* رنگ هایی که ثابت هستن و توی دارک مود و لایت مود یکی هستن */
/*
This file is used to contain all base imports.
Files inside this folder can contain global styles used in the project.
*/
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

:root {
  --color-primary: #994FF3;
  --color-secondary: #4FC4CF;
  --color-tertiary: #FFD803;
  --color-headline: #181818;
  --color-paragraph: #2e2e2e;
  --color-main:#FFFFFF;
  --color-bg-gray: #F2F4F6;
  --color-gray: #666;
  --color-blog-border: #CCCCCC;
  --box-shadow-1: 0 4px 4rem 0 rgba(0, 0, 0, .1);
  --blog-box-shadow: 0 30px 50px 0 rgba(51,51,51, .08);
  --menu-box-shadow: 0px 5px 20px 5px rgba(0, 0, 0, 0.1);
  --color-line: #d6d6d6;
}

.dark {
  --color-primary: #4FC4CF;
  --color-main: #34495E;
  --color-headline: #ffffff;
  --color-paragraph: #eeeeee;
  --color-bg-gray: #222F3E;
  --color-gray: #e7e7e7;
  --color-blog-border: #4e7297;
  --blog-box-shadow: 0 30px 50px 0 rgba(119, 119, 119, 0.08);
  --color-line:#506884;
}

html {
  font-size: 62.5%;
}
@media only screen and (max-width: 575px) {
  html {
    font-size: 50%;
  }
}
@media only screen and (min-width: 1200px) {
  html {
    font-size: 75%;
  }
}

body {
  font-family: vazir, "Montserrat";
  direction: rtl;
  font-size: 1.6rem;
  line-height: 1.7;
  color: var(--color-paragraph);
  position: relative;
  background-color: var(--color-main);
}

.super-container {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

a, a:hover {
  color: currentColor;
  text-decoration: none;
}

img {
  width: 100%;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--color-headline);
  font-weight: 600;
  font-family: sahel, vazir, "Montserrat";
  margin-bottom: 1rem;
}

h1, .h1 {
  font-size: 4rem;
}

h2, .h2 {
  font-size: 3.2rem;
}

h3, .h3 {
  font-size: 2.8rem;
}

h4, .h4 {
  font-size: 2.4rem;
}

h5, .h5 {
  font-size: 2rem;
}

h6, .h6 {
  font-size: 1.6rem;
}

p {
  color: var(--color-paragraph);
  margin-bottom: 2rem;
  font-size: 1.4rem;
  line-height: 1.8;
}

dl, ol, ul {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Typography Styles Here */
.headline-primary {
  color: #FFFFFF;
  margin-bottom: 2rem;
}

.headline-secondary {
  text-align: center;
  font-size: 3rem;
  margin-bottom: 6rem;
}

/* Additional Base Stylesheets */
/*
This file is used to contain all component imports.
Files inside this folder should contain all styles relating to a reusable component.
*/
.button {
  padding: 0.5rem 2rem;
  border-radius: 5px;
  color: #fff;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  display: inline-block;
}
@media only screen and (max-width: 575px) {
  .button {
    padding: 0.5rem 1rem;
  }
}
.button:hover {
  color: #fff;
}
.button:hover .icon-left-arrow {
  margin-right: 0.5rem;
}
.button svg {
  fill: currentColor;
  -webkit-transition: all 0.13s;
  -o-transition: all 0.13s;
  transition: all 0.13s;
}
.button--green {
  background-color: #2ECC71;
}
.button--green:hover {
  background-color: #27ae60;
}
.button--red {
  background-color: #FF5470;
}
.button--red:hover {
  background-color: #c0392b;
}
.button--yellow {
  color: #2e2e2e;
  background-color: #FFD803;
}
.button--yellow:hover {
  color: #2e2e2e;
}
.button--purple {
  background-color: #994FF3;
}
.button--cyan {
  background-color: #4FC4CF;
}
.button--rounded {
  border-radius: 200rem;
}

.button-google {
  width: 100%;
  padding: 1rem;
  border: 2px solid var(--color-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 5px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.button-google::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  background-color: var(--color-main);
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  -webkit-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
}
.button-google:hover::after {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}
.button-google img {
  width: 2rem;
  height: auto;
  margin-left: 1rem;
}

.section-comments {
  background-image: url(/img/pattern.png), -webkit-gradient(linear, left top, right top, from(#1CB1A9), to(#1CB1A9));
  background-image: url(/img/pattern.png), -o-linear-gradient(left, #1CB1A9 0%, #1CB1A9 100%);
  background-image: url(/img/pattern.png), linear-gradient(to right, #1CB1A9 0%, #1CB1A9 100%);
  background-size: 65%;
  background-repeat: repeat;
  padding: 8rem 0 10rem;
}

.comments-container {
  background-color: var(--color-main);
  padding: 4rem;
  border-radius: 5px;
}
@media only screen and (max-width: 575px) {
  .comments-container {
    padding: 2rem;
  }
}

.comment {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
  /* content -> left part */
  overflow-x: auto;
}
.comment:not(:last-child) {
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 3rem;
  margin-bottom: 3rem;
}
.comment__avatar-container {
  margin-left: 2rem;
}
@media only screen and (max-width: 575px) {
  .comment__avatar-container {
    display: none;
  }
}
.comment__avatar {
  width: 6rem;
}
.comment__content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.comment__author {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.comment__author-reaction {
  width: 2.5rem;
  margin-right: 0.5rem;
}
.comment__datetime {
  color: var(--color-gray);
  display: block;
  margin-bottom: 1.2rem;
}
.comment__text {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  word-break: break-word;
}

.comment__text ul, .comment__text ol {
    padding-right: 4rem;
}

.comment__text p {
    margin-bottom: 8px;
}

.comment__text a {
    color: var(--color-primary);
    text-decoration: underline;
}

.comment__see-more {
  font-size: 1.2rem;
  color: var(--color-primary);
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.comment__admin-control {
  margin-bottom: 2rem;
  font-size: 1.2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.comment__admin-control .edit, .comment__admin-control .delete {
  padding: 5px 1rem;
  border-radius: 200px;
  color: #fff;
  border: none;
  outline: none;
}
.comment__admin-control .edit {
  background: #994FF3;
  margin-left: 1rem;
}
.comment__admin-control .delete {
  background: #FF5470;
}
.comment__admin-control svg {
  width: 1.5rem;
  height: 1.5rem;
}
.comment__features {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.comment__reply {
  cursor: pointer;
  color: var(--color-gray);
  font-size: 1.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  margin-left: 1rem;
}
.comment__reply svg {
  margin-left: 0.7rem;
}
.comment__reply:hover {
  color: var(--color-primary);
}
.comment__reply::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: var(--color-gray);
  border-radius: 50%;
  margin-right: 1rem;
}
.comment__like {
  color: var(--color-gray);
  font-size: 1.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.comment__like svg {
  margin-right: 0.7rem;
  cursor: pointer;
  -webkit-transform: translateY(-10%);
      -ms-transform: translateY(-10%);
          transform: translateY(-10%);
}
.comment__like svg.active {
  color: var(--color-primary);
}
.comment__popular {
  position: absolute;
  top: 0;
  left: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: var(--color-bg-gray);
  border-radius: 20rem;
  padding: 5px 1rem;
  font-size: 1.4rem;
}
@media only screen and (max-width: 575px) {
  .comment__popular {
    left: 0;
    padding: 5px;
  }
}
.comment__popular .star-container {
  width: 2rem;
  height: 2rem;
  background-color: var(--color-main);
  border-radius: 50%;
  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;
}
.comment__popular .star-container svg {
  width: 1rem;
  height: 1rem;
}
.comment__popular span {
  margin-right: 5px;
}
@media only screen and (max-width: 575px) {
  .comment__popular span {
    display: none;
  }
}
.comment__replys-layer {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}
.comment__replys-layer .reply {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 3rem;
  margin-right: 8rem;
}
.comment__replys-layer .reply.admin {
  padding: 2rem;
  background-color: var(--color-bg-gray);
  border-radius: 5px;
}
@media only screen and (max-width: 575px) {
  .comment__replys-layer .reply {
    margin-right: 2rem;
  }
}
.comment__load-more-replys {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 50%);
      -ms-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
  cursor: pointer;
  border: 1px solid var(--color-line);
  padding: 0.7rem 2rem;
  border-radius: 20rem;
  background-color: var(--color-main);
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  width: 20rem;
  text-align: center;
}
.comment__load-more-replys:hover {
  color: var(--color-primary);
}

.dropdown {
  position: absolute;
  bottom: 0;
  right: 0;
  -webkit-transform: translateY(105%);
      -ms-transform: translateY(105%);
          transform: translateY(105%);
  background-color: var(--color-main);
  list-style: none;
  min-width: 20rem;
  border-radius: 5px;
  -webkit-box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
          box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  overflow: hidden;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  z-index: 99;
  visibility: hidden;
  opacity: 0;
}
.dropdown__item {
  padding: 1rem 2rem;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.dropdown__item:not(:last-child) {
  border-bottom: 1px solid var(--color-line);
}
.dropdown__item a {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.dropdown__item svg {
  margin-left: 0.5rem;
}
.dropdown__item button {
  background-color: transparent;
  border: none;
  outline: none;
  display: inline-block;
  font-size: 1.4rem;
  color: var(--color-paragraph);
  width: 100%;
  text-align: right;
}
.dropdown__item button:hover {
  color: var(--color-primary);
}
.dropdown__item:hover {
  background-color: var(--color-bg-gray);
}

/** Forms Styles here */
.search-form__input-group {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  width: 100%;
}
.search-form__input {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  height: 4.5rem;
  font-size: 1.3rem;
  line-height: 2rem;
  padding: 0 2rem;
  display: block;
  color: var(--color-paragraph);
  background-color: transparent;
  border: 1px solid var(--color-blog-border);
  border-left: none;
}
.search-form__input:focus {
  border: 1px solid var(--color-primary);
  border-left: none;
  outline: none;
}
.search-form__button {
  padding: 0 1.5rem;
  border: none;
  background-color: var(--color-primary);
  color: #fff;
}
.search-form__button:focus {
  outline: none;
  border: none;
}

.comment-form-container {
  position: relative;
  border-top: 1px solid var(--color-blog-border);
  padding: 3rem 0;
  margin-bottom: 2rem;
}
.comment-form-container__title {
  position: absolute;
  top: -1.2rem;
  right: 0;
  background-color: var(--color-main);
  padding: 0 0 0 1rem;
  color: var(--color-gray);
}

.reply-form-container {
  margin-right: 8rem;
  position: relative;
  border: 1px solid var(--color-blog-border);
  padding: 3rem 2rem;
}
.reply-form-container__title {
  position: absolute;
  top: -1.2rem;
  right: 1rem;
  background-color: var(--color-main);
  padding: 0 1rem;
  color: var(--color-gray);
}
@media only screen and (max-width: 575px) {
  .reply-form-container {
    margin-right: 2rem;
  }
}

.comment-form__reactions-container {
  margin-right: 1rem;
  border: 1px solid var(--color-blog-border);
  border-radius: 200px;
  background-color: var(--color-main);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media only screen and (max-width: 575px) {
  .comment-form__reactions-container {
    margin-right: 0;
    margin-top: 2rem;
  }
}
.comment-form__reactions-container input[type=radio] {
  display: none;
}
.comment-form__reactions-container input[type=radio]:checked + label {
  background-color: #4FC4CF;
}
.comment-form__reaction {
  width: 4rem;
  height: 4rem;
  cursor: pointer;
  padding: 5px;
  margin-bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  border-radius: 200px;
}
.comment-form__reaction:not(.active):hover {
  background-color: #D7D7D7;
}
.comment-form__reaction-layer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 3rem;
}
@media only screen and (max-width: 575px) {
  .comment-form__reaction-layer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.comment-form__comment-layer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.comment-form__avatar {
  margin-left: 2rem;
}
.comment-form__avatar img {
  height: 5rem;
  width: 5rem;
  border-radius: 50%;
}
@media only screen and (max-width: 991px) {
  .comment-form__avatar {
    display: none;
  }
}
.comment-form__left {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.comment-form textarea {
  width: 100%;
  margin-bottom: 2rem;
}
.comment-form__submit {
  background-color: var(--color-bg-gray);
  color: var(--color-paragraph);
  padding: 1.5rem;
  text-align: center;
  width: 100%;
  border: none;
  border-radius: 1rem;
  margin-top: 1rem;
}
.comment-form__disclaimer {
  display: block;
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.paki-form label {
  margin-bottom: 1rem;
}
.paki-form__input-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.paki-form__input {
  display: block;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  background-color: transparent;
  border: 1px solid var(--color-blog-border);
  border-left: none;
  padding: 1rem;
  border-radius: 0 2px 2px 0;
  outline: none;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  color: var(--color-paragraph);
}
.paki-form__input.input-error {
  border: 1px solid #FF5470;
}
.paki-form__input:hover, .paki-form__input:focus {
  border: 1px solid var(--color-primary);
  border-left: none;
}
.paki-form button {
  padding: 1rem 3rem;
  background-color: var(--color-secondary);
  border: none;
  color: #fff;
}
.paki-form__error {
  margin-top: 5px;
  color: #FF5470;
}

.auth-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.auth-form label {
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
}
.auth-form__input-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 0.5rem;
  position: relative;
}
.auth-form__input-container.error .auth-form__input {
  border: 1px solid #FF5470;
  border-right: none;
}
.auth-form__input-container.error .auth-form__icon-container {
  border: 1px solid #FF5470;
  border-left: none;
}
.auth-form__icon-container {
  padding: 1rem 1.5rem;
  background-color: var(--color-line);
  border: 1px solid var(--color-blog-border);
}
.auth-form__icon-container svg {
  color: var(--color-gray);
  height: 2rem;
  width: 2rem;
}
.auth-form__input {
  background-color: var(--color-main);
  width: 100%;
  padding: 1rem 2rem;
  outline: none;
  border: 1px solid var(--color-blog-border);
  border-right: none;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  color: var(--color-paragraph);
}
.auth-form__input:focus {
  border: 1px solid var(--color-primary);
  border-right: none;
}
.auth-form__input--password {
  padding-left: 3.5rem;
}
.auth-form__input-eye {
  position: absolute;
  left: 1.5rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.auth-form__input-eye svg {
  cursor: pointer;
}
.auth-form__remember {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.auth-form__remember input {
  display: none;
}
.auth-form__remember label {
  cursor: pointer;
  font-size: 1.4rem;
}
.auth-form__remember svg {
  color: var(--color-primary);
  height: 2rem;
  width: 2rem;
}
.auth-form__remember input:checked + label > .checked {
  display: inline-block;
}
.auth-form__remember input:checked + label .unchecked {
  display: none;
}
.auth-form__remember .checked {
  display: none;
}
.auth-form__submit {
  border: none;
  padding: 1rem;
  margin-bottom: 1rem;
  margin-top: 2rem;
}
.auth-form__links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.auth-form__links a {
  text-decoration: underline;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.auth-form__links a:hover {
  color: var(--color-primary);
}
.auth-form__error {
  color: #FF5470;
  font-size: 1.4rem;
}
.auth-form__notif {
  padding: 1rem;
  text-align: center;
  background-color: #FF5470;
  color: #fff;
  margin-bottom: 1rem;
}

.table-announcement-container {
  border: 1px solid var(--color-blog-border);
  margin-bottom: 4rem;
}

.table-announcement {
  width: 100%;
  border-collapse: collapse;
  overflow-x: auto;
}
.table-announcement th {
  background-color: var(--color-primary);
  color: #fff;
  font-size: 1.6rem;
  vertical-align: middle;
  font-weight: 400;
  border-bottom: 0;
}
.table-announcement td {
  color: var(--color-paragraph);
}
.table-announcement th, .table-announcement td {
  padding: 1rem 1.3rem;
}
.table-announcement th:not(:last-child), .table-announcement td:not(:last-child) {
  border-left: 1px solid var(--color-blog-border);
}
.table-announcement tbody tr:not(:last-child) {
  border-bottom: 1px solid var(--color-blog-border);
}
.table-announcement .table-fit {
  width: 5rem;
  text-align: center;
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

/* ==========================================
  Single-colored icons can be modified like so:
  .icon-name {
    font-size: 32px;
    color: red;
  }
  ========================================== */
.menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 250px;
  height: 100%;
  background-color: var(--color-main);
  -webkit-box-shadow: var(--menu-box-shadow);
          box-shadow: var(--menu-box-shadow);
  z-index: 999;
  padding: 3rem 4rem;
  -webkit-transition: right 0.3s ease;
  -o-transition: right 0.3s ease;
  transition: right 0.3s ease;
  overflow-y: scroll;
}
.menu.active {
  right: 0;
}
@media only screen and (max-width: 575px) {
  .menu {
    width: 100%;
  }
}
.menu__title {
  margin-bottom: 2rem;
}
.menu__list {
  list-style: none;
}
.menu__list-item {
  font-size: 1.6rem;
  padding: 1rem 0;
}
.menu__list-item button {
  background-color: transparent;
  border: none;
  outline: none;
  text-align: right;
  color: var(--color-paragraph);
}
.menu__list-item a, .menu__list-item button {
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  display: inline-block;
  width: 100%;
}
.menu__list-item a svg, .menu__list-item button svg {
  margin-left: 1rem;
}
.menu__list-item a:hover, .menu__list-item button:hover {
  color: var(--color-primary);
}
.menu__close {
  position: absolute;
  top: 3rem;
  left: 3rem;
  cursor: pointer;
}
@media only screen and (max-width: 575px) {
  .menu__close {
    top: 3.5rem;
  }
}

.switch-theme {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  background-color: var(--color-primary);
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
}
.switch-theme svg {
  fill: #fff;
  width: 3rem;
  height: 3rem;
}

.status {
  width: 100%;
  padding: 8rem 0;
  background: url(/img/hero.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  margin-bottom: 4rem;
  /** Breadcrumb list */
}
@media only screen and (max-width: 575px) {
  .status {
    background-image: url(/img/hero-small.png);
  }
}
.status .headline-primary {
  line-height: 1.6;
  margin-bottom: 1rem;
}
@media only screen and (max-width: 575px) {
  .status .headline-primary {
    margin-bottom: 2.5rem;
  }
}
.status__container {
  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: 100%;
  text-align: center;
}
.status__breadcrumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  list-style: none;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.status__breadcrumb-item {
  color: #FFFFFF;
  font-size: 2rem;
}
.status__breadcrumb-item:not(:last-child) {
  margin-left: 1rem;
}
.status__breadcrumb-item:not(:last-child) a {
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  border-bottom: 1px solid #FFFFFF;
}
.status__breadcrumb-item:not(:last-child) a:hover {
  color: #e9e9e9;
}
.status__breadcrumb-item:not(:last-child)::after {
  content: "/";
}
.status__breadcrumb-item:last-child {
  color: #e9e9e9;
}
@media only screen and (max-width: 575px) {
  .status__breadcrumb-item {
    margin-bottom: 0.5rem;
  }
}

.ads-container {
  padding: 0 0 4rem;
}

.ads-rect__image {
  width: 100%;
  height: auto;
}

.ads-square {
  width: 100%;
}
.ads-square__image {
  width: 100%;
  height: auto;
}

@media only screen and (max-width: 575px) {
  .ad-column {
    margin-bottom: 4rem;
  }
}

.pagination__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style: none;
}
.pagination__list-item {
  height: 3rem;
  width: 3rem;
  border: 1px solid var(--color-blog-border);
  border-radius: 5px;
  color: var(--color-gray);
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  overflow: hidden;
  margin-bottom: 1rem;
}
.pagination__list-item:hover {
  background-color: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.pagination__list-item a, .pagination__list-item span {
  height: 100%;
  width: 100%;
  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;
  font-size: 1.4rem;
}
.pagination__list-item svg {
  height: 2rem;
  width: 2rem;
}
.pagination__list-item:not(:last-child) {
  margin-left: 1rem;
}
.pagination__list-item--active {
  background-color: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.pagination__list-item-devider {
  margin-left: 1rem;
}

/* Additonal Component Stylesheets */
/**

 * This file is used to contain all component imports.

 * Files inside this folder can contain specific element styles and layout. 

 * Unique Combinations of components and base styles are imported here

 * Each stylesheet contains all components style overrides, and specific layout only attributes

 */
/* Styles for Footer */
.footer {
  padding: 6rem 0;
  background-color: #252525;
  /*  Social Medias */
}
.footer__logo-container {
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .footer__logo {
    width: 70%;
    margin: 0 auto 4rem;
  }
}
.footer__about {
  margin-bottom: 4rem;
}
.footer__title {
  color: #fff;
  font-size: 2rem;
  font-weight: 600;
  font-family: vazir, "Montserrat";
  margin-bottom: 2rem;
}
.footer__text {
  color: #fff;
  font-size: 1.4rem;
}
.footer__social-list {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.footer__social {
  display: inline-block;
  position: relative;
}
.footer__social:not(:last-child) {
  margin-left: 2rem;
}
.footer__social-image {
  width: 3rem;
}

.credit {
  background-color: #151515;
  padding: 2rem;
  text-align: center;
}
.credit p {
  color: #fff;
  margin-bottom: 0;
}
.credit a {
  color: #4FC4CF;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.header {
  height: 7rem;
  width: 100%;
  background-color: var(--color-main);
  -webkit-box-shadow: var(--box-shadow-1);
          box-shadow: var(--box-shadow-1);
}

/** Blogs sidebar */
.sidebar__widget {
  margin-bottom: 3.3rem;
  border: 1px solid var(--color-blog-border);
  padding: 3.3rem;
}
.sidebar__search {
  padding: 0;
  border: 0;
}
.sidebar__ads {
  padding: 2rem;
}
.sidebar__widget-title {
  font-size: 1.7rem;
  position: relative;
  margin: 0 0 2.5rem;
  padding: 0 0 1.1rem;
  font-family: vazir, sahel, "Montserrat";
}
.sidebar__widget-title::before {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 0;
  width: 5rem;
  height: 2px;
  right: 0;
  z-index: 1;
  background: var(--color-primary);
}
.sidebar ul {
  list-style: none;
  border: 0;
  padding: 0;
}
.sidebar ul li {
  border-bottom: 1px dashed var(--color-blog-border);
  padding-bottom: 0.8rem;
  margin-bottom: 1rem;
}
.sidebar ul li a {
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  color: var(--color-gray);
}
.sidebar ul li a:hover {
  color: var(--color-primary);
}
.sidebar ul li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.navigation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100%;
  width: 100%;
}
.navigation__list {
  margin-bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media only screen and (max-width: 991px) {
  .navigation__list {
    display: none;
  }
}
.navigation__list-item {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.navigation__list-item a {
  -webkit-transition: all 0.15s;
  -o-transition: all 0.15s;
  transition: all 0.15s;
  font-size: 1.4rem;
}
.navigation__list-item a:hover {
  text-decoration: none;
  color: var(--color-primary);
}
.navigation__list-item--active a {
  color: var(--color-primary);
}
.navigation__list-item--hasChild {
  position: relative;
}
.navigation__list-item--hasChild:focus-within .dropdown {
  visibility: visible;
  opacity: 1;
}
.navigation__list-item:not(:last-child) {
  margin-left: 3rem;
}
.navigation__hamburger {
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.navigation__hamburger svg {
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
}
@media only screen and (max-width: 991px) {
  .navigation__hamburger {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.navigation__cta-container {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.navigation__cta-button:not(:last-child) {
  margin-left: 1rem;
}

/*
 * page-specific styles in this folder's files
 * fthis files contains all pages files
*/
.hero {
  padding: 8rem 0;
  width: 100%;
  background: url(/img/hero.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (max-width: 575px) {
  .hero {
    background-image: url(/img/hero-small.png);
  }
}
.hero__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (max-width: 767px) {
  .hero__container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
.hero__text-container {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
}
@media only screen and (max-width: 1200px) {
  .hero__text-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 65%;
            flex: 0 0 65%;
  }
}
@media only screen and (max-width: 767px) {
  .hero__text-container {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin-top: 4rem;
    text-align: center;
  }
}
.hero__logo-container {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.hero__headline, .hero__paragraph {
  color: #FFFFFF;
}
.hero__headline {
  margin-bottom: 2rem;
}
.hero__paragraph {
  font-size: 1.6rem;
  margin-bottom: 3rem;
}
.hero__logo {
  width: 35rem;
  float: left;
}
.hero__logo::after {
  content: "";
  clear: both;
  display: table;
}
@media only screen and (max-width: 991px) {
  .hero__logo {
    width: 24rem;
  }
}

.section-about {
  padding: 10rem 0;
  /* H3 tag */
  /* #region => text below headline */
}
.section-about__content {
  padding: 0 2rem;
}
.section-about__title-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin-bottom: 2.5rem;
}
.section-about__title {
  line-height: 1.75;
  margin-bottom: 0;
}
.section-about__title span {
  color: var(--color-primary);
}
.section-about__title .emoji {
  width: 4rem;
  height: 4rem;
}
.section-about__paragraph {
  text-align: justify;
  margin-bottom: 4rem;
}
.section-about__image-container {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.section-about__image {
  float: left;
}
@media only screen and (max-width: 767px) {
  .section-about__image {
    margin-bottom: 4rem;
    margin-right: auto;
    margin-left: auto;
    width: 80%;
  }
}

.section-tips {
  padding: 8rem 0 10rem;
  background-color: var(--color-bg-gray);
}
@media only screen and (max-width: 767px) {
  .section-tips__column {
    padding: 0 4rem;
  }
  .section-tips__column:not(:last-child) {
    margin-bottom: 3rem;
  }
}
.section-tips__tip-container {
  background-color: var(--color-main);
  padding: 4rem 4rem;
  text-align: center;
  border-radius: 1rem;
  height: 100%;
}
@media only screen and (max-width: 991px) {
  .section-tips__tip-container {
    padding: 3rem 2rem;
  }
}
.section-tips__tip-image-container {
  margin-bottom: 4rem;
}
.section-tips__tip-image {
  width: 13rem;
}
.section-tips__tip-title {
  margin-bottom: 1.5rem;
}
.section-tips__tip-paragraph {
  margin-bottom: 0;
}

.section-blogs {
  padding: 8rem 0;
  /* &__blog-image-container {
      width: 100%;
      height: 200px;
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
  }
  */
}
.section-blogs__column {
  margin-bottom: 2.5rem;
}
@media only screen and (max-width: 767px) {
  .section-blogs__column {
    padding: 0 4rem;
  }
  .section-blogs__column:not(:last-child) {
    margin-bottom: 3rem;
  }
}
.section-blogs__blog-container {
  border: solid 3px var(--color-secondary);
  border-radius: 5px;
  overflow: hidden;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  height: 100%;
}
.section-blogs__blog-container:hover {
  -webkit-box-shadow: var(--blog-box-shadow);
          box-shadow: var(--blog-box-shadow);
}
.section-blogs__blog-body {
  padding: 2rem 2rem;
}
.section-blogs__blog-title {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  line-height: 1.6;
}
@media only screen and (max-width: 991px) {
  .section-blogs__blog-title {
    font-size: 1.6rem;
  }
}
.section-blogs__blog-title a {
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.section-blogs__blog-title a:hover {
  color: var(--color-primary);
}
.section-blogs__blog-link {
  font-size: 1.4rem;
  font-weight: 500;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.section-blogs__blog-link svg {
  margin-left: 4px;
}
.section-blogs__blog-link:hover {
  margin-right: 1rem;
  color: var(--color-primary);
}

.blog {
  margin-bottom: 4rem;
}
.blog__image-container {
  margin-bottom: 3rem;
  width: 100%;
  display: block;
}
.blog__meta {
  margin-bottom: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.blog__meta svg {
  width: 1.5rem;
  height: 1.5rem;
}
.blog__meta svg, .blog__meta a {
  color: var(--color-primary);
}
.blog__meta span:not(:last-child) {
  margin-left: 3rem;
}
@media only screen and (max-width: 575px) {
  .blog__meta span:not(:last-child) {
    margin-bottom: 0.6rem;
  }
}
.blog .blog__body p {
  font-size: 1.6rem;
}
.blog .blog__body .alert p:last-child {
  margin-bottom: 0;
}
.blog .blog__body div.qt-quran blockquote {
  margin-top: 7rem;
  background-color: #fbc531;
  padding-top: 3rem;
  padding-right: 13rem;
  position: relative;
  color: #2e2e2e;
}
@media only screen and (max-width: 575px) {
  .blog .blog__body div.qt-quran blockquote {
    padding-right: 3rem;
    padding-top: 7rem;
  }
}
.blog .blog__body div.qt-quran blockquote p {
  color: #2e2e2e;
}
.blog .blog__body div.qt-quran blockquote:before {
  content: "";
  display: block;
  background: url(/img/quran.png);
  width: 9rem;
  height: 16rem;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  right: 2rem;
  -webkit-transform: translateY(-20%);
      -ms-transform: translateY(-20%);
          transform: translateY(-20%);
}
@media only screen and (max-width: 575px) {
  .blog .blog__body div.qt-quran blockquote:before {
    width: 5rem;
    height: 9rem;
    right: 3rem;
    -webkit-transform: translateY(-40%);
        -ms-transform: translateY(-40%);
            transform: translateY(-40%);
  }
}
.blog .blog__body div.qt-quran blockquote cite::before {
  background-color: #2e2e2e;
}
.blog .blog__body blockquote {
  background-color: var(--color-bg-gray);
  padding: 1rem 3rem 3rem;
  margin: 3.5rem 0;
}
.blog .blog__body blockquote::before {
  content: "\f10d";
  font-family: "FontAwesome";
  color: var(--color-line);
  font-size: 3rem;
}
.blog .blog__body blockquote cite {
  font-style: normal;
}
.blog .blog__body blockquote cite::before {
  content: "";
  display: inline-block;
  margin-left: 0.75rem;
  width: 5rem;
  height: 1px;
  background-color: var(--color-paragraph);
}
.blog .blog__body h1, .blog .blog__body h2, .blog .blog__body h3, .blog .blog__body h4, .blog .blog__body h5, .blog .blog__body h6 {
  line-height: 1.9;
}
.blog .blog__body code {
  direction: ltr;
}
.blog .blog__body div.ul-check ul {
  list-style: none;
}
.blog .blog__body div.ul-check ul li::before {
  content: "\f00c";
  font-family: "FontAwesome";
  color: #2ECC71;
  margin-left: 0.75rem;
}
.blog .blog__body div.ul-x ul {
  list-style: none;
}
.blog .blog__body div.ul-x ul li::before {
  content: "\f00d";
  font-family: "FontAwesome";
  color: #FF5470;
  margin-left: 0.75rem;
}
.blog .blog__body div.ul-pointer ul {
  list-style: none;
}
.blog .blog__body div.ul-pointer ul li::before {
  content: "";
  display: inline-block;
  height: 2rem;
  width: 3rem !important;
  background-image: url(/img/Emojies/pointer-left.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.blog .blog__body div.ul-star ul {
  list-style: none;
}
.blog .blog__body div.ul-star ul li::before {
  content: "\f005";
  font-family: "FontAwesome";
  color: #e67e22;
  margin-left: 0.75rem;
  vertical-align: middle;
}
.blog .blog__body ul {
  margin-bottom: 3rem;
  padding-right: 3rem;
}
.blog .blog__body ul li:not(:last-child) {
  margin-bottom: 1rem;
}
.blog .blog__body figure {
  margin: 2rem 0;
}
.blog .blog__body figure figcaption {
  text-align: center;
  color: var(--color-gray);
}
.blog .blog__body img {
  margin-bottom: 2rem;
}

.blog .blog__body table {
    border-collapse: collapse;
}

.blog .blog__body th, .blog .blog__body td {
    padding: 1rem 1.3rem;
}

.blog .blog__body th{
    background-color: var(--color-primary);
    color: #fff;
    font-size: 1.6rem;
    vertical-align: middle;
    font-weight: 400;
}

.blog__tags {
  margin-top: 4rem;
}
.blog__tags ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.blog__tags ul li {
  display: inline-block;
  height: 2.4rem;
  background-color: var(--color-bg-gray);
  border-radius: 3px;
  margin-bottom: 10px;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.blog__tags ul li a {
  display: block;
  line-height: 2.4rem;
  font-size: 1.2rem;
  font-weight: 500;
  padding-right: 12px;
  padding-left: 11px;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.blog__tags ul li:not(:last-child) {
  margin-left: 6px;
}
.blog__navigation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 3rem;
  border: 1px solid var(--color-blog-border);
  margin-bottom: 3.5rem;
  margin-top: 3rem;
  position: relative;
}
@media only screen and (max-width: 575px) {
  .blog__navigation {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.blog__navigation::after {
  content: "";
  display: inline-block;
  height: 65%;
  width: 1px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: var(--color-blog-border);
}
@media only screen and (max-width: 575px) {
  .blog__navigation::after {
    display: none;
  }
}
.blog__navigation h4 {
  font-size: 1.8rem;
  font-family: vazir, "Montserrat";
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  line-height: 1.5;
}
.blog__navigation h4:hover {
  color: var(--color-primary);
}
.blog__navigation span {
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.blog__navigation span:hover {
  color: var(--color-primary);
}
.blog__navigation span i, .blog__navigation span svg {
  vertical-align: middle;
  color: var(--color-gray);
}
.blog__navigation-next, .blog__navigation-prev {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.blog__navigation-next {
  text-align: left;
  padding-right: 1rem;
}
@media only screen and (max-width: 575px) {
  .blog__navigation-next {
    padding-right: 0;
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
}
.blog__navigation-prev {
  padding-left: 1rem;
}
@media only screen and (max-width: 575px) {
  .blog__navigation-prev {
    padding-left: 0;
    margin-bottom: 2rem;
  }
}

.blogs-main-content {
  margin-bottom: 4rem;
}

@media only screen and (max-width: 575px) {
  .blogs-column {
    margin-bottom: 4rem;
  }
}

.blog-card {
  border: 1px solid var(--color-blog-border);
  margin-bottom: 3.3rem;
  border-radius: 0 0 5px 5px;
}
.blog-card__image-container {
  width: 100%;
}
.blog-card__image-container img {
  width: 100%;
  height: 400px;
  background-color: #e9eef1;
  background-image: url(/img/image-placeholder.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border: none;
}
@media only screen and (max-width: 1200px) {
  .blog-card__image-container img {
    height: 340px;
  }
}
@media only screen and (max-width: 991px) {
  .blog-card__image-container img {
    height: 380px;
  }
}
@media only screen and (max-width: 767px) {
  .blog-card__image-container img {
    height: 280px;
  }
}
@media only screen and (max-width: 575px) {
  .blog-card__image-container img {
    height: 53vw;
  }
}
.blog-card__content {
  padding: 4rem 3rem;
}
.blog-card__meta {
  font-size: 1.3rem;
  margin-bottom: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.blog-card__meta svg {
  width: 1.5rem;
  height: 1.5rem;
}
.blog-card__meta svg, .blog-card__meta a {
  color: var(--color-primary);
}
.blog-card__meta span:not(:last-child) {
  margin-left: 2rem;
}
@media only screen and (max-width: 575px) {
  .blog-card__meta span:not(:last-child) {
    margin-bottom: 0.6rem;
  }
}
.blog-card__datetime {
  color: var(--color-gray);
}
.blog-card__title {
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.blog-card__title a {
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.blog-card__title a:hover {
  color: var(--color-primary);
}
.blog-card__readmore {
  color: var(--color-primary);
  font-size: 1.4rem;
}
.blog-card__readmore:hover svg {
  margin-right: 0.5rem;
}
.blog-card__readmore svg {
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

.paki-announcement {
  padding: 1rem 0 5rem;
}
.paki-announcement h2 {
  margin-bottom: 4rem;
}

.section-camps {
  padding: 3rem 0 6rem;
}

.camp-card {
  background-color: rgba(79, 196, 207, 0.2);
  padding: 4rem 2rem;
  border: 1px dashed var(--color-gray);
  border-radius: 10px;
  text-align: center;
  margin-bottom: 3rem;
}
.camp-card__image-container {
  margin-bottom: 3rem;
}
.camp-card__image {
  height: 15rem;
  width: auto;
}
.camp-card__title {
  font-size: 2.5rem;
}
.camp-card__title a {
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.camp-card__title a:hover {
  color: var(--color-primary);
}
.camp-card__duration {
  font-size: 2rem;
}

.camp {
  padding: 2rem 0 6rem;
}
.camp__image-container {
  margin-bottom: 3rem;
}
.camp__image {
  width: 20rem;
  height: 20rem;
}
.camp__duration {
  font-size: 2rem;
  margin-bottom: 4rem;
}
.camp__body {
  margin-bottom: 6rem;
}
.camp__body p {
  font-size: 1.8rem;
  text-align: justify;
}

.auth-container {
  padding: 0 0 4rem;
}

.auth {
  background-color: var(--color-bg-gray);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media only screen and (max-width: 767px) {
  .auth {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
.auth__content {
  -webkit-box-flex: 50%;
      -ms-flex: 50%;
          flex: 50%;
  padding: 5rem 5rem;
}
@media only screen and (max-width: 575px) {
  .auth__content {
    padding: 2.5rem;
  }
}
.auth__title-container {
  text-align: center;
}
.auth__title-container svg {
  height: 8rem;
  width: 8rem;
  color: var(--color-blog-border);
  margin-bottom: 2rem;
}
.auth__title {
  margin-bottom: 3rem;
}
.auth__seprator {
  color: var(--color-blog-border);
  position: relative;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 2rem;
}
.auth__seprator::before {
  content: "";
  display: inline-block;
  height: 1px;
  width: 100%;
  background-color: currentColor;
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 0;
}
.auth__seprator span {
  background-color: var(--color-bg-gray);
  padding: 0 1rem;
  color: var(--color-gray);
  font-size: 1.4rem;
  position: relative;
  z-index: 1;
}
.auth__image-container {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  padding: 4rem 1rem;
  background-image: url(/img/header-back.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  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;
}
@media only screen and (max-width: 575px) {
  .auth__image-container {
    background-image: url(/img/header-back-small.png);
  }
}
@media only screen and (max-width: 767px) {
  .auth__image-container {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}
@media only screen and (max-width: 767px) {
  .auth__image {
    width: 75%;
  }
}

.error-page {
  padding: 4rem 0 6rem 0;
}
.error-page__number {
  font-size: 12rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 0;
}