.header {
    color: #fff;
    height: 75px;
    position: fixed;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    z-index: 2;
    background: rgba(47, 29, 94, .65);
    width: 100%
}

.headerContainer {
    max-width: 1280px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-self: center;
    font-weight: 700;
    z-index: 1;
    position: relative;
    padding: 0 25px;
    margin: 25px auto 14px
}

.headerContainer svg {
    width: 48px;
    height: 48px
}

.menubar {
    -ms-flex-item-align: center;
    align-self: center
}

.menubar ul {
    list-style: none;
    display: -ms-flexbox;
    display: flex
}

.menubar ul li {
    margin: 0 10px
}

.menubar ul li#language-en{
    margin-left: auto;
    text-align: left;
}

.menubar ul li#language-fa{
    margin-right: auto;
    text-align: right;
}

@media screen and (max-width:500px) {
    .menubar ul {
        font-size: 13px
    }
}

.footer {
    height: 350px;
    -ms-flex-line-pack: end;
    align-content: end;
    text-align: center;
    display: grid;
    padding-bottom: 10px;
    background: rgba(0, 0, 0, .46)
}

.footerContainer h4,
.footerContainer p {
    font-size: 12px;
    opacity: .7
}

.footerContainer h4 {
    margin-top: 15px
}

.footer svg {
    margin: 20px auto
}

.footer nav {
    -ms-flex-item-align: center;
    align-self: center;
    border-bottom: 2px solid hsla(0, 0%, 100%, .15);
    border-top: 2px solid hsla(0, 0%, 100%, .15);
    max-width: 540px;
    margin: auto;
    padding: 10px 0
}

.footer nav ul {
    list-style: none;
    display: -ms-inline-flexbox;
    display: inline-flex
}

.footer nav ul li {
    margin: 0 10px
}

@media screen and (max-width:600px) {
    .footer {
        height: 500px
    }

    .footer nav ul {
        display: block
    }

    .footer nav ul li {
        margin: 20px 10px
    }
}

*,
:after,
:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

ol[class],
ul[class] {
    padding: 0
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
ol[class],
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
ul[class],
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

body {
    min-height: 100vh;
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    line-height: 1.5
}

ol[class],
ul[class] {
    list-style: none
}

a:not([class]) {
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto
}

img {
    max-width: 100%;
    display: block
}

article>*+* {
    margin-top: 1em
}

button,
input,
select,
textarea {
    font: inherit
}

@media (prefers-reduced-motion:reduce) {
    * {
        -webkit-animation-duration: .01ms !important;
        animation-duration: .01ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        -webkit-transition-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
    }
}

:focus {
    outline: 0
}

a,
a:focus,
a:hover,
a:visited {
    color: unset;
    text-decoration: unset;
    font-weight: 700
}

html {
    height: 100%
}

body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    min-width: 100%;
    font-family: Vazir;
    color: #fff;
    overflow-x: hidden
}

.bg:after {
    background: linear-gradient(45deg, #292929, #202020);
    content: " ";
    position: fixed;
    z-index: -1
}

.bg-fill,
.bg:after {
    height: 100vh;
    width: 100vw
}

.bg-fill {
    overflow: hidden;
    display: block;
    position: absolute;
    opacity: .3
}

.bg-fill:after {
    background: linear-gradient(45deg, #3f266f, hsla(0, 0%, 100%, .15));
    content: " ";
    height: 300px;
    width: 110vw;
    -webkit-transform: rotate(9deg);
    transform: rotate(9deg);
    top: -110px;
    position: absolute;
    left: -70px;
    opacity: .5
}

@media screen and (max-width:500px) {
    .bg-fill {
        display: none;
        visibility: hidden
    }
}

#___gatsby #gatsby-focus-wrapper,
.layout-container {
    min-height: 100vh;
    min-width: 100vw
}

.layout-container {
    display: grid;
    grid-template-rows: 1fr auto
}

.faq-container {
    position: relative;
    z-index: 1
}

@font-face {
    font-family: Vazir;
    src: url(static/Vazir-21aa60dda0b7897a9333f80f230f677f.eot);
    src: url(static/Vazir-21aa60dda0b7897a9333f80f230f677f.eot?#iefix) format("embedded-opentype"), url(static/Vazir-2a1f397dbfe7c92b9881ea310f60643a.woff2) format("woff2"), url(static/Vazir-6ad4657ca213b5b0512d00c886d529be.woff) format("woff"), url(static/Vazir-843c3b6d46972b18b9e3d394f63aebd5.ttf) format("truetype");
    font-weight: 400
}

@font-face {
    font-family: Vazir;
    src: url(static/Vazir-Bold-d0d479224c8c1637cff046f37952b302.eot);
    src: url(static/Vazir-Bold-d0d479224c8c1637cff046f37952b302.eot?#iefix) format("embedded-opentype"), url(static/Vazir-Bold-289470d8c10f9d036d27d8eb9ee1b008.woff2) format("woff2"), url(static/Vazir-Bold-823429c7a2557248fa0978c00d016f8c.woff) format("woff"), url(static/Vazir-Bold-272e66b76bd9b7aeab6d5fc35cfc0774.ttf) format("truetype");
    font-weight: 700
}

@font-face {
    font-family: Vazir;
    src: url(static/Vazir-Thin-77e6324ed69ca9d0d26eab8f787646ea.eot);
    src: url(static/Vazir-Thin-77e6324ed69ca9d0d26eab8f787646ea.eot?#iefix) format("embedded-opentype"), url(static/Vazir-Thin-c5b634e7d29e2fac36eff541ac662912.woff2) format("woff2"), url(static/Vazir-Thin-c437adca0ac18801fa6aba14034bb9a9.woff) format("woff"), url(static/Vazir-Thin-4e8a3937f0ec84f6acef7dce7c01867a.ttf) format("truetype");
    font-weight: 100
}

@font-face {
    font-family: Vazir;
    src: url(static/Vazir-Light-511278e296a7c68fc1b7f456b8eef8da.eot);
    src: url(static/Vazir-Light-511278e296a7c68fc1b7f456b8eef8da.eot?#iefix) format("embedded-opentype"), url(static/Vazir-Light-6915fe5959343fd6450ce3ec3d6f6db0.woff2) format("woff2"), url(static/Vazir-Light-6d18e8393ca7ed3b8be400b1d5b384f4.woff) format("woff"), url(static/Vazir-Light-fed58ca8aae3392f597d7012e8df76f3.ttf) format("truetype");
    font-weight: 300
}

@font-face {
    font-family: Vazir;
    src: url(static/Vazir-Medium-60e2684ca6094bb409f803f38ae6c645.eot);
    src: url(static/Vazir-Medium-60e2684ca6094bb409f803f38ae6c645.eot?#iefix) format("embedded-opentype"), url(static/Vazir-Medium-85ff8d843a56bb07be71667cfeed6741.woff2) format("woff2"), url(static/Vazir-Medium-ab6f54685fd63a001286fc30c1e37368.woff) format("woff"), url(static/Vazir-Medium-7f2df312caa9f27cf01766aaedc4d162.ttf) format("truetype");
    font-weight: 500
}

@font-face {
    font-family: Vazir;
    src: url(static/Vazir-Black-678ff84e64f0284e1bff17147e56742e.eot);
    src: url(static/Vazir-Black-678ff84e64f0284e1bff17147e56742e.eot?#iefix) format("embedded-opentype"), url(static/Vazir-Black-78736f2847e7d260f6ac4902a234545c.woff2) format("woff2"), url(static/Vazir-Black-0edcb99fc150fbd1b939a445672f0d18.woff) format("woff"), url(static/Vazir-Black-36be5753ada1793ab4049b8e8a1616f7.ttf) format("truetype");
    font-weight: 900
}

.layout-container.en {
    direction: ltr
}

.more {
    max-width: 900px;
    line-height: 2.5;
    margin: 100px auto;
    display: block;
    padding: 50px 15px
}

.more p {
    text-align: center
}

.more h2 {
    font-size: 24px;
    font-weight: 700;
    -webkit-box-shadow: 0 3px #6a2a7e;
    box-shadow: 0 3px #6a2a7e;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto 25px
}

.more a,
.more h2 {
    text-align: center;
    line-height: 2
}

.more a {
    margin: 25px auto;
    display: block;
    border: 1px solid #fff;
    border-radius: 4px;
    width: 120px;
    height: 35px
}

.features {
    max-width: 990px;
    margin: 100px auto;
    text-align: center
}

.featuresContainer {
    background: rgba(0, 0, 0, .06);
    grid-template-columns: 1fr 1fr 1fr;
    display: grid;
    text-align: center;
    min-height: 250px;
    padding: 15px;
    border-radius: 10px
}

@media screen and (max-width:840px) {
    .featuresContainer {
        grid-template-columns: 1fr
    }
}

.featuresContainer div {
    text-align: center;
    margin: auto
}

.featuresContainer img {
    margin-bottom: 10px
}

.featuresContainer h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px
}

.featuresContainer p {
    max-width: 200px;
    font-size: 12px;
    color: #fff;
    margin-bottom: 20px
}

.playstore {
    display: grid;
    grid-template-columns: 430px 1fr;
    margin-top: 75px;
    z-index: 1;
    position: relative;
    height: 75vh
}

.playstore .details,
.playstore .logo {
    -ms-flex-item-align: center;
    align-self: center
}

.playstore .details h1 {
    font-size: 62px;
    font-weight: 700
}

.playstore .details p {
    max-width: 405px;
    font-size: 14px;
    margin-bottom: 35px;
    padding: 0 10px
}

@media screen and (max-width:840px) {
    .playstore {
        grid-template-columns: 1fr;
        text-align: center
    }

    .playstore .logo {
        height: 210px
    }

    .playstore img {
        height: 256px;
        width: 256px;
        margin: auto
    }

    .playstore .details p {
        margin: 0 auto 35px
    }

    .download {
        margin: 5px
    }
}

.download span {
    z-index: 2;
    position: relative;
    line-height: 49px
}

.download span svg {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px 0 0
}

.download {
    display: inline-block;
}

.download,
.download .fill {
    width: 235px;
    height: 48px;
    font-size: 18px;
    text-align: center;
    color: hsla(0, 0%, 100%, .9);
    border-radius: 50px;
    background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5);
    background-size: 600%;
    -webkit-animation: anime 16s linear infinite;
    animation: anime 16s linear infinite
}

.download .fill {
    position: absolute;
    margin-top: -60px;
    z-index: 1;
    -webkit-filter: blur(30px);
    filter: blur(30px);
    opacity: .2
}

@-webkit-keyframes anime {
    0% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }

    to {
        background-position: 0 50%
    }
}

@keyframes anime {
    0% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }

    to {
        background-position: 0 50%
    }
}

.accordion {
    max-width: 550px;
    width: 100%;
    margin: 50px auto auto
}

.accordion .q {
    width: 100%
}

.accordionItem {
    background-color: hsla(0, 0%, 100%, .04);
    border-radius: 7px;
    padding: 10px;
    margin: 10px 0;
    max-width: 550px
}

.accordionHead {
    cursor: pointer;
    color: #f9faff;
    font-weight: 700;
    display: grid;
    grid-template-columns: 20px auto
}

.accordionHead div {
    float: right;
    margin-left: 7px;
    padding-right: 5px
}

.accordionBody {
    height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    margin-top: 0;
    border-top: 0 solid hsla(0, 0%, 100%, .06)
}

.accordionBody[data-Status=open] {
    height: unset;
    overflow: unset;
    padding-top: 15px;
    padding-bottom: 10px;
    border-top: 1px solid hsla(0, 0%, 100%, .06);
    margin-top: 10px
}

.accordionBody p {
    opacity: 0;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    -webkit-transition-delay: .6;
    transition-delay: .6;
    color: #fff;
    line-height: 2;
    overflow: hidden;
    white-space: pre-wrap
}

.accordionBody[data-Status=open] p {
    opacity: 1
}

.faq {
    margin: 150px auto;
    max-width: calc(100vw - 30px)
}

.faq h2 {
    font-size: 24px;
    font-weight: 700;
    -webkit-box-shadow: 0 3px #6a2a7e;
    box-shadow: 0 3px #6a2a7e;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto 25px
}

.faq a.link,
.faq h2 {
    text-align: center;
    line-height: 2
}

.faq a.link {
    margin: 25px auto;
    display: block;
    border: 1px solid #fff;
    border-radius: 4px;
    width: 120px;
    height: 35px
}

.faq.en .accordionHead div {
    float: left;
    margin-right: 7px;
    padding-left: 5px;
    margin-left: unset;
    padding-right: unset
}

.faqall .accordion,
.faqall .accordionItem {
    max-width: 820px
}

.faqall .accordionItem {
    margin: 20px 0
}

.faqall.en .accordionHead div {
    float: left;
    margin-right: 7px;
    padding-left: 5px;
    margin-left: unset;
    padding-right: unset
}

.downloadAPP {
    max-width: 1050px;
    margin: 100px auto;
    width: 100%
}

.downloadAPPContainer {
    background: rgba(0, 0, 0, .46);
    min-height: 200px;
    margin: 20px;
    padding: 10px;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 220px 1fr
}

.downloadAPPContainer .logo svg {
    height: 224px;
    width: 224px
}

.downloadAPPContainer .details {
    -ms-flex-item-align: center;
    align-self: center
}

.downloadAPPContainer .details h3 {
    font-weight: 700;
    font-size: 24px
}

.downloadAPPContainer .details p {
    max-width: 390px;
    font-size: 14px;
    margin: 13px 0
}

@media screen and (max-width:840px) {
    .downloadAPPContainer {
        grid-template-columns: 1fr;
        padding: 0 0 50px
    }

    .downloadAPPContainer .details,
    .downloadAPPContainer .logo {
        margin: auto;
        text-align: center
    }
}

.listing-container {
    max-width: 800px;
    margin: auto;
    padding: 0 15px;
    width: 100%;
    z-index: 1;
    position: relative;
    min-height: 100vh
}

.listing-container .posts-container {
    margin-top: 250px
}

.posts-container h1 {
    margin: 100px auto;
    text-align: center;
    font-size: 28px;
    font-weight: 700
}

.pagingContainer {
    min-width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 75px auto
}

.pagingContainer a {
    width: 100px;
    border: 1px solid;
    text-align: center;
    padding: 5px 10px;
    border-radius: 4px
}

.postList h2 {
    font-size: 22px
}

.postList a {
    margin-bottom: 50px;
    display: block;
    border-bottom: 1px dashed hsla(0, 0%, 100%, .15);
    padding-bottom: 50px
}

.postList p {
    opacity: .8
}

.postContainer {
    min-height: 100vh
}

.post {
    max-width: 800px;
    margin: 100px auto;
    width: 90%;
    padding: 0 15px;
    position: relative
}

.post-meta {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center
}

.post .headline {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 25px;
    margin-top: 250px;
    text-align: center
}

.post ol {
    list-style-type: persian
}

.post ol,
.post ul {
    margin-right: 30px
}

.post {
    line-height: 2.4
}

.post h2 {
    font-size: 22px;
    font-weight: 700;
    margin-top: 25px
}

.post p {
    text-align: justify;
    margin-bottom: 10px
}

.post a {
    font-weight: 700
}

.anchor.before {
    position: unset;
    display: none;
    visibility: hidden;
    top: 0;
    right: unset;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    padding-left: 4px;
    left: unset
}

.anchor.before svg {
    fill: #fff;
    display: none;
    visibility: hidden
}

.postContainer.en .anchor.before {
    right: unset;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    padding-left: unset;
    padding-right: 4px;
    left: unset;
    display: none;
    visibility: hidden
}

.postContainer.en .post p {
    text-align: left
}

.homeContainer {
    max-width: 1280px;
    margin: auto
}

.home {
    padding: 0 15px
}

.anchor.before {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    padding-right: 4px;
}

.anchor.after {
    display: inline-block;
    padding-left: 4px;
}

h1 .anchor svg,
h2 .anchor svg,
h3 .anchor svg,
h4 .anchor svg,
h5 .anchor svg,
h6 .anchor svg {
    visibility: hidden;
}

h1:hover .anchor svg,
h2:hover .anchor svg,
h3:hover .anchor svg,
h4:hover .anchor svg,
h5:hover .anchor svg,
h6:hover .anchor svg,
h1 .anchor:focus svg,
h2 .anchor:focus svg,
h3 .anchor:focus svg,
h4 .anchor:focus svg,
h5 .anchor:focus svg,
h6 .anchor:focus svg {
    visibility: visible;
}

.collapsible {
    background-color: #111;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: inherit;
    outline: none;
    font-size: 15px;
}

.active,
.collapsible:hover {
    background-color: #222;
}

.collapsible:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

.content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #333;
}