@media only screen and (max-width: 800px) {
    .desktop {
        display:none;
    }
}

@media only screen and (min-width: 801px) {
    .mobile {
        display:none;
    }
}

body {
    direction: rtl;
    font-family: IRANSans;
    font-size: 1vw;
    overflow-x: hidden;
}
h1 {
    font-size: 1vw;
}
h2 {
    font-size: 0.9vw;
    line-height: 1.8;
}
h3 {
    font-size: 0.8vw;
    line-height: 1.8;
}
h4 {
    font-size: 0.7vw;
}
a:hover {
    text-decoration: none;
}
.tooltip {
    font-family: IRANSans;
    font-size: 0.7vw;
}
.logo {
    width: 7vw;
    height: auto;
}
.font-A {
    font-family: IRANSans;
}
.font-B {
    font-family: Dastnevis;
}
.font-D {
    font-family: Sans;
    font-variation-settings: 'wdth' 400, 'wght' 700;
}
.font-C {
    font-family: Sriracha;
}
.font-E {
    font-family: Rosario;
    font-variation-settings: 'wdth' 400, 'wght' 500;
}
.font-F {
    font-family: RosarioItalic
}
.font-size-A {
    font-size: 1vw;
}
.font-size-B {
    font-size: 0.8vw;
}
.font-size-C {
    font-size: 0.7vw;
}
.font-size-D {
    font-size: 0.9vw;
}
.line-height-A {
    line-height: 1.8;
}
.update-marker {
    width: 9vw;
    height: 3.5vw;

    background-image: url("../images/img51.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
}
.item-logo {
    width: 4vw;
    height: auto;
}
.item-logo-A {
    width: 4vw;
    height: auto;
}
.item-logo-B {
    width: 7vw;
    height: auto;
}
.item-logo-C {
    width: 9vw;
    height: auto;
}
.item-logo-D {
    width: 2vw;
    height: auto;
}
.item-image {
    width: 100%;
    height: auto;
}
.image-A {
    width: 5vw;
    height: 5vh;

    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
}
.image-B {
    width: 40vw;
    height: 50vh;

    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
}
.image-C {
    width: auto;
    height: 80vh;

    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
}
.direct-left {
    direction: ltr;
}
.direct-right {
    direction: rtl;
}
.width-A {
    width: 10vw;
}
.width-B {
    width: 85vw;
}
.width-C {
    width: 50vw;
}
.height-A {
    min-height: 100vh;
}
.height-B {
    min-height: 80vh;
}
.height-C {
    height: 10vh;
}
.height-E {
    height: 13vh;
}
.height-F {
    height: 7vh;
}
.height-H {
    height: 60vh;
}
.height-I {
    height: 8vh;
}
.margin-top-A {
    margin-top: 10vw;
}
.margin-top-B {
    margin-top: 20vw;
}
.footer {
    width: 100%;
    height: 15vw;

    background-image: url("../images/img17.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
}
.navbar-nav .active {
    color: #b21f2d;
}
.go-top {
    position: fixed;
    bottom: 1.6vw;
    left: 1.5vw;
    z-index: 1600;
}
.background-color-A {
    background-image: linear-gradient(180deg, #cfd0c0 0%, #d6d8ca 25%, #d9dccb 50%, #e0e1d1 70%, #d7d8c8 100%);
}
.background-color-B {
    background-color: rgb(8, 13, 21);
}
.background-color-C {

    background-image: radial-gradient( circle 939px at 94.7% 50%,  rgba(0,178,169,1) 0%, rgba(0,106,101,1) 76.9% );

    background: #000428;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #004e92, #000428);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #004e92, #000428); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    background: #141E30;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #243B55, #141E30);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #243B55, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.background-A {
    background-image: url("/images/img45.jpg");
    background-repeat: repeat;
    width: 100%;
    height: 100vh;
}
.background-B {
    background-color: rgb(245,245,245);
    border-bottom-style: solid;
    border-bottom-width: 15px;
    border-image: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 55%, rgba(255,0,113,1) 100%) 1;
    /*
    background-image: url("/images/headerBack2.png") ;
    background-repeat: no-repeat;
    background-position: 15vw bottom;
    background-size: contain;
    background-origin: border-box;
    */

}
.background-C {
    background-color: rgb(245, 245, 245);
}
.background-D {
    background-image: linear-gradient(to right, #133972, #16488f, #1758ac, #1669cb, #127aeb);
}
.login {
    background-color: #130f40;
    background-image: linear-gradient(315deg, #130f40 0%, #000000 74%);
    width: 100%;
    height: 100vh;
}
.me-A {
    width: auto;
    height: 24vw;
    border-radius: 10%;
}
.box-A {
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
}
.box-B {
    border: 1px rgb(255, 0, 124) solid;
    border-radius: 10%;
    width: 25vw;
    height: 25vw;
    margin: 2vw;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px 0 rgba(255, 0, 124, 0.2), 0 3px 10px 0 rgba(255, 0, 124, 0.19);
    background-color: transparent;
}
.box-B-2 {
    border: 1px rgb(255, 0, 124) solid;
    border-radius: 10%;
    width: 25vw;
    height: 25vw;
    margin: 2vw;
    display: flex;
    justify-content: right;
    box-shadow: 0 2px 4px 0 rgba(255, 0, 124, 0.2), 0 3px 10px 0 rgba(255, 0, 124, 0.19);
}
.box-B .font-style {
    font-size: 4vw;
    color: lavender;
    /*text-shadow: 2px 2px 4px #000000;*/
    text-shadow: 1px 1px 2px black, 0 0 10px rgba(255, 0, 124), 0 0 5px rgba(220, 0, 124);
}
.flex-container-A {
    display: flex;
    justify-content: center;
    width: 100%;
}
.flex-container-B {
    display: flex;
    align-items: flex-end;
    height: 44vh;
}
.flex-container-C {
    display: flex;
    align-items: flex-start;
    height: 36vh;
}
.flex-container-D {
    display: flex;
    justify-content: center;
    height: 10vh;
    width: 100%;
}
.flex-container-D a {
    color: lightgray;
    margin: 0 2vw 0 2vw;
}
.flex-container-D i {
    font-size: 5vw;
}
.flex-container-D .font-style {
    font-size: 2vw;
}
.suggestItem {
    background-color: white;
    padding: 0.5vw 1vw;
    cursor: pointer;
}
.suggestItem:hover {
    color: #b21f2d;
}
.animate-A {
    background-color: transparent;
}
.animate-A :hover {
    animation-name: animate-A;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes animate-A {
    from {background-color: transparent;}
    to {background-color: rgb(255, 0, 124);}
}
.mobile-font-style {
    font-family: IRANSans;
    font-size: 3.5vw;
    line-height: 1.8;
}
.mobile-logo {
    width: 20vw;
    height: auto;
}
.mobile-picture {
    width: 85vw;
    height: auto;
}
.mobile-sign {
    width: 10vw;
    height: auto;
}
.mobile-icon {
    width: 8vw;
    height: auto;
}
.mobile-symbol {
    width: 6vw;
    height: auto;
}
.mobile-a-style {
    font-family: IRANSans;
    font-size: 3.5vw;
    font-weight: bold;
    color: black;
    text-decoration: none;
}
.mobile-a-style :hover {
    color: #c82333;
    text-decoration: none;
}
a:hover, a:visited, a:link, a:active
{
    text-decoration: none !important;
}
.mobile-hide {
    display: none;
}
.mobile-img-A {
    width: 100%;
    height: auto;
}
.mobile-background-color {
    background-color: rgb(40,43,50);
}
.mobile-background-image {
    background-color: rgb(40,43,50);
    background-image: url("../images/me6.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0px 15vh;
}
.mobile-background-footer {
    background-color: rgb(40,43,50);
    background-image: url("../images/footer.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
}
.mobile-text-color-A {
    color:rgb(255,169,36);
}
.mobile-text-color-B {
    color:rgb(255,197,35);
}
.mobile-font-size {
    font-size: 3vw;
}
.mobile-font-icon {
    font-size: 7vw;
}
.mobile-menu {
    display: none;
    background-color: black;
    opacity: 0.9;
    width: 100%;
    height: 87vh;
    top: 8vh;
    left: 0;
    position: absolute;
    z-index: 10000;
}

.english-language {
    direction: ltr;
    font-family: Sans;
}
canvas {
    display: block;
    vertical-align: center;
}
#tsparticles {
    position: relative;
    top: 0;
    width: 50vw;
    height: 25vw;
    background-color: transparent;
}
.menu-section {
    width: 30vw;
}
.article-section {
    width: 55vw;
}
.article-header-image {
    width: 100%;
    height: auto;
    border-radius: 0.5vw;
}
.article-content {
    color: black;
    font-size: 0.9vw;
}
.article-title {
    color: orangered;
    letter-spacing: 1px;
    font-weight: bold;
    font-size: 1.2vw;
    padding: 1vw;
}
.article-subtitle {
    color: orange;
    font-size: 1vw;
}
ul {
    list-style-type: square;
}
.code-background {
    background-color: #2b2b2b
}
.code-font {
    color: #f2b522;
    font-size: 0.8vw
}
.pdf-frame {
    width: 100vw;
    height: 79vh;
}