/*
Theme Name: stack team 
Theme URI: https://wordpress.org/themes/twentytwentytwo/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Built on a solidly designed foundation, Twenty Twenty-Two embraces the idea that everyone deserves a truly unique website. The theme’s subtle styles are inspired by the diversity and versatility of birds: its typography is lightweight yet strong, its color palette is drawn from nature, and its layout elements sit gently on the page. The true richness of Twenty Twenty-Two lies in its opportunity for customization. The theme is built to take advantage of the Site Editor features introduced in WordPress 5.9, which means that colors, typography, and the layout of every single page on your site can be customized to suit your vision. It also includes dozens of block patterns, opening the door to a wide range of professionally designed layouts in just a few clicks. Whether you’re building a single-page website, a blog, a business website, or a portfolio, Twenty Twenty-Two will help you create a site that is uniquely yours.
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 5.6
Version: 1.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentytwo
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, style-variations, wide-blocks, block-styles, accessibility-ready, blog, portfolio, news

Twenty Twenty-Two WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Two is distributed under the terms of the GNU GPL.
*/

@font-face {
    font-family: Elemental_End;
    src: url(assets/fonts/ElementalEnd/Elemental\ End.woff) format('woff');
}

@font-face {
    font-family: Morabba_Regular;
    src: url(assets/fonts/Morabba/Regular/Morabba-Regular.woff) format('woff');
}

@font-face {
    font-family: Morabba_Bold;
    src: url(assets/fonts/Morabba/Bold/Morabba-Bold.woff);
}

@font-face {
    font-family: Morabba_Extra_Bold;
    src: url(assets/fonts/Morabba/Morabba_Extra_Bold/Morabba-ExtraBold.woff);
}

@font-face {
    font-family: Bahman_Bold;
    src: url(assets/fonts/Bahman/1/Bahman.woff);
}

@font-face {
    font-family: Bahman_Regular;
    src: url(assets/fonts/Bahman/2/Bahman.woff);
}

::selection {
    background: transparent;
}

::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-track {
    background-color: rgb(45, 45, 45);
}

::-webkit-scrollbar-thumb {
    background-color: rgb(179, 179, 179);
    border-radius: 10em;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgb(221, 221, 221);
}

html {
    scroll-behavior: smooth;
}

body {
    position: relative;
    cursor: none !important;
    /* overflow-x: hidden; */
    background-color: rgb(10, 10, 10);
    overflow-x: hidden;
    font-family: Elemental_End;
    overflow: hidden;
}

a,
button {
    cursor: none !important;
    /* تغییر نشان‌گر ماوس به شکل دست برای لینک‌ها و دکمه‌ها */
}

a:hover,
button:hover {
    cursor: none !important;
}

.cursor {
    width: 20px;
    height: 20px;
    position: fixed;
    transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg);
    transform-style: preserve-3d;
    transition: transform 0.09s ease;
    pointer-events: none;
    z-index: 100;
}

.face {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.front {
    background-color: rgba(255, 255, 255, 0.084);
    transform: translateZ(10px);
}

.back {
    background-color: rgba(255, 255, 255, 0.084);
    transform: rotateY(180deg) translateZ(10px);
}

.right {
    background-color: rgba(255, 255, 255, 0.084);
    transform: rotateY(90deg) translateZ(10px);
}

.left {
    background-color: rgba(255, 255, 255, 0.084);
    transform: rotateY(-90deg) translateZ(10px);
}

.top {
    background-color: rgba(255, 255, 255, 0.084);
    transform: rotateX(90deg) translateZ(10px);
}

.bottom {
    background-color: rgba(255, 255, 255, 0.084);
    transform: rotateX(-90deg) translateZ(10px);
}

/* ---------------  slide all site  ----------------- */

.slider {
    position: relative;
    width: 100vw;
    height: 100vh;
    perspective: 1000px;
    overflow: hidden;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(10, 10, 10);
    transition: transform 1s ease, opacity 1s ease;
    opacity: 0;
    transform: translateZ(-100px) scale(0.9);
    overflow: hidden;
}

.slide.active {
    opacity: 1;
    transform: translateZ(0) scale(1);
}

.indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.indicator {
    width: 10px;
    height: 10px;
    background-color: rgb(10, 10, 10);
    border-radius: 50%;
    cursor: pointer;
    transition: opacity 0.3s;
}

.indicator.active {
    opacity: 1;
}

.indicator:hover {
    opacity: 0.7;
}

/* جهت‌های مختلف اسلاید */
/* به سمت پایین */
.slide-down.previous {
    transform: translateY(-100%) scale(0.9);
}

.slide-down.next {
    transform: translateY(100%) scale(0.9);
}

/* -------------------------------------------- */
.slide-down-r.previous {
    transform: translateX(100vw) scale(0.9);
}

.slide-down-r.next {
    transform: translateY(100%) scale(0.9);
}

/* -------------------------------------------- */
.slide-down-l.previous {
    transform: translateX(-100vw) scale(0.9);
}

.slide-down-l.next {
    transform: translateY(100%) scale(0.9);
}

/* ________________________________________________ */
.slide-right.previous {
    transform: translateX(-100vw) scale(0.9);
}

.slide-right.next {
    transform: translateX(100vw) scale(0.9);
}

/* ------------------------------------------- */
.slide-right-d.previous {
    transform: translateY(-100%) scale(0.9);
}

.slide-right-d.next {
    transform: translateX(100vw) scale(0.9);
}

/* ------------------------------------------- */
.slide-right-l.previous {
    transform: translateX(100vw) scale(0.9);
}

.slide-right-l.next {
    transform: translateX(100vw) scale(0.9);
}

/* ------------------------------------------- */
/* _________________________________________________ */
.slide-left.previous {
    transform: translateX(100vw) scale(0.9);
}

.slide-left.next {
    transform: translateX(-100vw) scale(0.9);
}

/* ------------------------------------------- */

.slide-left-d.previous {
    transform: translateY(-100%) scale(0.9);
}

.slide-left-d.next {
    transform: translateX(-100vw) scale(0.9);
}

/* --------------  loading site   -------------- */

#loading {
    width: 100vw;
    height: 100vh;
    position: relative;
    background-color: black;
}

#loading .background-loading {
    position: fixed;
    width: 100vw;
    height: 30vh;
    bottom: 0;
    opacity: 0.7;
}

/* --------------  log site  -------------- */
#logo-stack img {
    position: absolute;
    top: 1.5vh;
    /* در بالای صفحه */
    left: 50%;
    /* مرکز افقی */
    transform: translateX(-50%);
    /* جابجایی به سمت چپ به مقدار نصف عرض عنصر */
    height: 4rem;
    width: auto;
    object-fit: fill;
    z-index: 100;
}

/* ---------------------------------------- */

.dse-site {
    font-family: Morabba_Regular;
    font-size: 0.8rem;
    color: white;
    position: absolute;
    bottom: 1rem;
    left: 50%;
    /* مرکز افقی */
    transform: translateX(-50%);
    /* جابجایی به سمت چپ به مقدار نصف عرض عنصر */
    z-index: 100;
}

/* ---------------------------------------- */

.scroll-effect {
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 2.2rem;
    /* عرض تصویر */
    height: auto;
    /* ارتفاع خودکار */
    animation: scrollEffect 3s infinite;
    /* انیمیشن */
}

@keyframes scrollEffect {
    0% {
        transform: translateY(0);
        /* موقعیت اولیه */
    }

    50% {
        transform: translateY(-20px);
        /* حرکت به سمت بالا */
    }

    100% {
        transform: translateY(0);
        /* بازگشت به موقعیت اولیه */
    }
}

@media (max-width:992px) {
    .scroll-effect {
        right: 1rem;
        bottom: 45vh;
        width: 1.8rem;
    }
}

/* __________________________________________

____________  section-h  ____________

__________________________________________ */

#section-h {
    height: 100vh;
    width: 100vw;
    margin: 0 0;
    position: relative;
    background-color: black;
    display: flex;
    flex-direction: column;
}

#section-h .img-king {
    height: 58vh;
    width: auto;
    /* padding-bottom: 10vh; */
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 50;
    animation: float_M_king 5s ease-in-out infinite;
}

@keyframes float_M_king {
    0% {
        transform: translatey(0px);
    }

    50% {
        transform: translatey(-15px);
    }

    100% {
        transform: translatey(0px);
    }
}

#section-h #img-shadow-king {
    height: 70vh;
    width: auto;
    position: absolute;
    z-index: 40;
    inset: 0;
    margin: auto;
    opacity: 0.3;
}

#section-h h1 {
    font-size: 12vw;
    letter-spacing: 0.1vw;
    word-spacing: 2.5vw;
    font-family: Bahman_Regular;
    font-weight: bold;
    color: white;
    margin: auto;
    inset: 0;
    z-index: 30;
    opacity: 0.8;
    padding-top: 15vh;
    -webkit-animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes focus-in-expand {
    0% {
        letter-spacing: -0.5em;
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes focus-in-expand {
    0% {
        letter-spacing: -0.5em;
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

@media (max-width:992px) {
    #section-h h1 {
        font-size: 25vw;
    }
}

@media (max-width:576px) {
    #section-h {
        height: 100vh;
        width: 100vw;
    }

    #section-h .img-king {
        height: 50vh;
        padding-bottom: 0;
    }

    #section-h h1 {
        font-size: 27vw;
        padding-bottom: 3vh;
    }
}

/* ---------------------------- */
#section-h .social {
    height: 100vh;
    width: 3vw;
    padding-left: 8px;
    padding-bottom: 4vw;
    position: absolute;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#section-h .social>* {
    opacity: 0;
    transform: translate(-30px, 0px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

#section-h .social.visible>* {
    opacity: 1;
    transform: translate(0, 0);
}

#section-h .social img {
    height: 25px;
    width: auto;
    margin-top: 15px;
}

#section-h .social #icon-earth {
    margin-top: 20px;
    height: 48px;
    width: auto;
    padding: 15px 5px 5px 5px;
    border-top: 1px solid white;
}

#section-h .social #Languages {
    height: min-content;
    width: min-content;
    display: flex;
    padding: 15px;
    padding-left: 50px;
    margin-top: -48px;
    margin-right: -80px;
    flex-direction: row;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#section-h .social #Languages a {
    font-size: Morabba_Regular;
    font-weight: normal;
    font-size: 17px;
    padding-left: 14px;
    color: white;
    text-decoration: none;
}

@media (max-width:992px) {
    #section-h .social {
        width: 7.5vw;
        padding-left: 0px;
    }

    #section-h .social img {
        height: 22px;
    }

    #section-h .social #icon-earth {
        height: 45px;
    }
}

@media (max-width:576px) {
    #section-h .social {
        width: 9vw;
        padding-left: 0px;
    }

    #section-h .social img {
        height: 22px;
    }

    #section-h .social #icon-earth {
        height: 43px;
    }
}

/* ---------------------------- */

#section-h .mohre {
    width: 100vw;
    position: absolute;
    bottom: 0.3rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#section-h .mohre .ep-pawn-m,
#section-h .mohre .ep-rook-m,
#section-h .mohre .ep-knight-m,
#section-h .mohre .ep-bishop-m,
#section-h .mohre .ep-queen-m,
#section-h .mohre .ep-king-m {
    width: 7rem;
    height: auto;
}

#section-h .mohre .ep-pawn-m {
    animation: float 3s ease-in-out infinite;
}

#section-h .mohre .ep-rook-m {
    animation: float 3.3s ease-in-out infinite;
}

#section-h .mohre .ep-knight-m {
    animation: float 3.6s ease-in-out infinite;
}

#section-h .mohre .ep-bishop-m {
    animation: float 3.9s ease-in-out infinite;
}

#section-h .mohre .ep-queen-m {
    animation: float 4.2s ease-in-out infinite;
}

#section-h .mohre .ep-king-m {
    animation: float 4.5s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translatey(0);
    }

    50% {
        transform: translatey(-0.5rem);
    }

    100% {
        transform: translatey(0);
    }
}

#section-h .mohre .pawn-m,
#section-h .mohre .rook-m,
#section-h .mohre .knight-m,
#section-h .mohre .bishop-m,
#section-h .mohre .queen-m,
#section-h .mohre .king-m {
    z-index: 10;
    object-fit: cover;
    display: block;
    margin: auto;
    inset: 0;
    transform: translateY(0);
    transition: transform 0.5s ease;
    width: auto;
    height: 80px;
}

#section-h .mohre .knight-m {
    width: 60px;
    height: 80px;
}

#section-h .mohre .king-m {
    width: 35px;
    height: 80px;
}

#section-h .mohre .pawn-m:hover,
#section-h .mohre .rook-m:hover,
#section-h .mohre .knight-m:hover,
#section-h .mohre .bishop-m:hover,
#section-h .mohre .queen-m:hover,
#section-h .mohre .king-m:hover {
    transform: translateY(-1rem);
}

#section-h .mohre .pawn-m:hover~.pawn-t,
#section-h .mohre .rook-m:hover~.rook-t,
#section-h .mohre .knight-m:hover~.knight-t,
#section-h .mohre .bishop-m:hover~.bishop-t,
#section-h .mohre .queen-m:hover~.queen-t,
#section-h .mohre .king-m:hover~.king-t {
    opacity: 1;
    visibility: visible;
    transition: 0.3s ease-in-out;
}

#section-h .mohre .pawn-t,
#section-h .mohre .rook-t,
#section-h .mohre .knight-t,
#section-h .mohre .bishop-t,
#section-h .mohre .queen-t,
#section-h .mohre .king-t {
    font-size: 14px;
    z-index: 5;
    font-family: Morabba_Regular;
    text-align: center;
    font-weight: normal;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    margin-top: -0.5rem;
}

@media (max-width:992px) {
    #section-h .mohre {
        width: 100vw;
        position: absolute;
        bottom: 0.3rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    #section-h .mohre .ep-pawn-m,
    #section-h .mohre .ep-rook-m,
    #section-h .mohre .ep-knight-m,
    #section-h .mohre .ep-bishop-m,
    #section-h .mohre .ep-queen-m,
    #section-h .mohre .ep-king-m {
        width: 7rem;
        height: auto;
    }

    #section-h .mohre .pawn-m,
    #section-h .mohre .rook-m,
    #section-h .mohre .knight-m,
    #section-h .mohre .bishop-m,
    #section-h .mohre .queen-m,
    #section-h .mohre .king-m {
        object-fit: cover;
        width: auto;
        height: 60px;
    }

    #section-h .mohre .knight-m {
        width: 50px;
        height: 60px;
    }

    #section-h .mohre .king-m {
        width: 25px;
        height: 60px;
    }

    #section-h .mohre .pawn-t,
    #section-h .mohre .rook-t,
    #section-h .mohre .knight-t,
    #section-h .mohre .bishop-t,
    #section-h .mohre .queen-t,
    #section-h .mohre .king-t {
        font-size: 14px;
        z-index: 5;
        font-family: Morabba_Regular;
        text-align: center;
        font-weight: normal;
        color: white;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        margin-top: -0.5rem;
    }
}

@media (max-width:576px) {
    #section-h .mohre {
        width: 100vw;
        position: absolute;
        bottom: 0.8rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding-bottom: 1rem;
    }

    #section-h .mohre .ep-pawn-m,
    #section-h .mohre .ep-rook-m,
    #section-h .mohre .ep-knight-m,
    #section-h .mohre .ep-bishop-m,
    #section-h .mohre .ep-queen-m,
    #section-h .mohre .ep-king-m {
        width: 4rem;
        height: auto;
    }

    #section-h .mohre .pawn-m,
    #section-h .mohre .rook-m,
    #section-h .mohre .knight-m,
    #section-h .mohre .bishop-m,
    #section-h .mohre .queen-m,
    #section-h .mohre .king-m {
        object-fit: cover;
        width: auto;
        height: 50px;
    }

    #section-h .mohre .knight-m {
        width: 40px;
        height: 50px;
    }

    #section-h .mohre .king-m {
        width: 23px;
        height: 50px;
    }

    #section-h .mohre .pawn-t,
    #section-h .mohre .rook-t,
    #section-h .mohre .knight-t,
    #section-h .mohre .bishop-t,
    #section-h .mohre .queen-t,
    #section-h .mohre .king-t {
        display: none;
    }

    @keyframes float {
        0% {
            transform: translatey(0);
        }

        50% {
            transform: translatey(-0.3rem);
        }

        100% {
            transform: translatey(0);
        }
    }
}

/* __________________________________________

____________  section-m-image ____________

__________________________________________ */

#section-m-image {
    width: 100vw;
    height: 100vh;
    color: white;
    background-color: black;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
}

#section-m-image .row {
    direction: rtl;
}

#section-m-image .sec-b-t-i {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

/* ------------------------------------------- */

#section-m-image .ep-images {
    width: 40vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-right: 50px;
    position: relative;
    animation: float_images_M 4s ease-in-out infinite;
    background-attachment: fixed;
}

@keyframes float_images_M {
    0% {
        transform: translatey(0px);
    }

    50% {
        transform: translatey(-25px);
    }

    100% {
        transform: translatey(0px);
    }
}

#section-m-image .ep-images .show-images {
    object-fit: scale-down;
    display: inline;
    position: absolute;
    margin: auto;
    inset: 0;
    transition: transform 1.2s ease, opacity 1.2s ease;
    opacity: 1;
}

#section-m-image .ep-images .hide-image {
    transform: scale(60%);
    opacity: 0;
}

#pawn-image {
    height: 23rem;
    width: auto;
}

#rook-image {
    height: 22.5rem;
    width: auto;
}

#knight-image {
    height: 23.5rem;
    width: auto;
}

#bishop-image {
    height: 24.5rem;
    width: auto;
}

#queen-image {
    height: 25rem;
    width: auto;
}

#king-image {
    height: 27rem;
    width: 12.5rem;
    object-fit: fill !important;
}

/* ------------------------------------------- */

#section-m-image .ep-text {
    width: 40vw;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#section-m-image .ep-text .pawn-text,
#section-m-image .ep-text .rook-text,
#section-m-image .ep-text .knight-text,
#section-m-image .ep-text .bishop-text,
#section-m-image .ep-text .queen-text,
#section-m-image .ep-text .king-text {
    position: absolute;
    text-align: right;
    padding-right: 4vw;
    padding-left: 4vw;
    display: none;
}

#section-m-image .ep-text .pawn-text h3,
#section-m-image .ep-text .rook-text h3,
#section-m-image .ep-text .knight-text h3,
#section-m-image .ep-text .bishop-text h3,
#section-m-image .ep-text .queen-text h3,
#section-m-image .ep-text .king-text h3 {
    /* font-family: Bahman_Bold; */
    font-family: Bahman_Regular;
    letter-spacing: 1px;
    font-size: 4.5rem;
    line-height: 70px;
    word-spacing: 3px;
    margin-bottom: 30px;
}

#section-m-image .ep-text .pawn-text h4,
#section-m-image .ep-text .rook-text h4,
#section-m-image .ep-text .knight-text h4,
#section-m-image .ep-text .bishop-text h4,
#section-m-image .ep-text .queen-text h4,
#section-m-image .ep-text .king-text h4 {
    font-family: Morabba_Bold;
    letter-spacing: 1px;
    font-size: 2vw;
    /* line-height: 70px; */
    word-spacing: 3px;
    margin-bottom: 20px;
}

#section-m-image .ep-text .pawn-text p,
#section-m-image .ep-text .rook-text p,
#section-m-image .ep-text .knight-text p,
#section-m-image .ep-text .bishop-text p,
#section-m-image .ep-text .queen-text p,
#section-m-image .ep-text .king-text p {
    font-family: Morabba_Regular;
    font-size: 1.1rem;
    font-weight: normal;
    /* letter-spacing: 1px; */
    line-height: 2.2rem;
    text-align: justify;
    margin-top: -1rem;
}

#section-m-image .ep-text .pawn-text h5,
#section-m-image .ep-text .rook-text h5,
#section-m-image .ep-text .knight-text h5,
#section-m-image .ep-text .bishop-text h5,
#section-m-image .ep-text .queen-text h5,
#section-m-image .ep-text .king-text h5 {
    font-family: Morabba_Regular;
    font-size: 16px;
    font-weight: normal;
    display: inline-block;
    padding: 5px 30px;
    border: 1px solid white;
    border-radius: 5px;
    margin-top: 10px;
    transition: 0.3s ease-in-out;
}

#section-m-image .ep-text .pawn-text h5:hover,
#section-m-image .ep-text .rook-text h5:hover,
#section-m-image .ep-text .knight-text h5:hover,
#section-m-image .ep-text .bishop-text h5:hover,
#section-m-image .ep-text .queen-text h5:hover,
#section-m-image .ep-text .king-text h5:hover {
    background-color: white;
    color: black;
}

#section-m-image .ep-text .pawn-text img,
#section-m-image .ep-text .rook-text img,
#section-m-image .ep-text .knight-text img,
#section-m-image .ep-text .bishop-text img,
#section-m-image .ep-text .queen-text img,
#section-m-image .ep-text .king-text img {
    height: 30px;
    width: auto;
    padding-top: 3px;
    padding-right: 10px;
    object-fit: scale-down;
    display: inline-block;
}

#section-m-image .ep-text .pawn-text a,
#section-m-image .ep-text .rook-text a,
#section-m-image .ep-text .knight-text a,
#section-m-image .ep-text .bishop-text a,
#section-m-image .ep-text .queen-text a,
#section-m-image .ep-text .king-text a {
    text-decoration: none;
    color: white;
    direction: rtl;
    padding-top: 50px;
    padding-right: 30px;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

#section-m-image .ep-text .pawn-text>*,
#section-m-image .ep-text .rook-text>*,
#section-m-image .ep-text .knight-text>*,
#section-m-image .ep-text .bishop-text>*,
#section-m-image .ep-text .queen-text>*,
#section-m-image .ep-text .king-text>* {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

#section-m-image .ep-text .pawn-text.visible>*,
#section-m-image .ep-text .rook-text.visible>*,
#section-m-image .ep-text .knight-text.visible>*,
#section-m-image .ep-text .bishop-text.visible>*,
#section-m-image .ep-text .queen-text.visible>*,
#section-m-image .ep-text .king-text.visible>* {
    opacity: 1;
    transform: translateY(0);
}

/* ------------------------------------------- */

#section-m-image .ep-button {
    width: 20vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    padding-left: 4vw;
    z-index: 10;
}

#section-m-image .ep-button .pawn-btn,
#section-m-image .ep-button .rook-btn,
#section-m-image .ep-button .knight-btn,
#section-m-image .ep-button .bishop-btn,
#section-m-image .ep-button .queen-btn,
#section-m-image .ep-button .king-btn {
    margin-top: 10px;
    width: 50px;
    height: min-content;
    padding: 10px 15px 12px 15px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.152);
    transition: all 0.25s ease-in-out;
    overflow: hidden;
    position: relative;
    z-index: 50;
}

#section-m-image .ep-button .pawn-btn:hover,
#section-m-image .ep-button .rook-btn:hover,
#section-m-image .ep-button .knight-btn:hover,
#section-m-image .ep-button .bishop-btn:hover,
#section-m-image .ep-button .queen-btn:hover,
#section-m-image .ep-button .king-btn:hover {
    height: min-content;
    transform: translateY(0px);
    background-color: white;
    width: 200px;
    border-radius: 5px;
}

#section-m-image .ep-button .pawn-btn-show,
#section-m-image .ep-button .rook-btn-show,
#section-m-image .ep-button .knight-btn-show,
#section-m-image .ep-button .bishop-btn-show,
#section-m-image .ep-button .queen-btn-show,
#section-m-image .ep-button .king-btn-show {
    margin-top: 10px;
    width: 200px;
    padding: 10px 15px 12px 15px;
    border-radius: 10px;
    transition: all 0.25s ease-in-out;
    overflow: hidden;
    position: relative;
    height: min-content;
    transform: translateY(0px);
    background-color: rgba(255, 255, 255, 0.152);
    width: 200px;
    border-radius: 5px;
    z-index: 50;
}

#section-m-image .ep-button .pawn-btn-title-hide,
#section-m-image .ep-button .rook-btn-title-hide,
#section-m-image .ep-button .knight-btn-title-hide,
#section-m-image .ep-button .bishop-btn-title-hide,
#section-m-image .ep-button .queen-btn-title-hide,
#section-m-image .ep-button .king-btn-title-hide {
    display: none;
}

#section-m-image .ep-button .pawn-btn-title-show,
#section-m-image .ep-button .rook-btn-title-show,
#section-m-image .ep-button .knight-btn-title-show,
#section-m-image .ep-button .bishop-btn-title-show,
#section-m-image .ep-button .queen-btn-title-show,
#section-m-image .ep-button .king-btn-title-show {
    transition: opacity 0.3s ease-in-out;
    font-family: Morabba_Regular;
    font-weight: 600;
    font-size: 17px;
    word-spacing: 2px;
    color: rgb(41, 41, 41);
    position: absolute;
    right: 15px;
    top: 27.5%;
    animation: show-title-box 0.25s ease-in-out;
}

@keyframes show-title-box {
    0% {
        opacity: 0;
    }

    70% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#section-m-image .ep-button .pawn-btn-title-true,
#section-m-image .ep-button .rook-btn-title-true,
#section-m-image .ep-button .knight-btn-title-true,
#section-m-image .ep-button .bishop-btn-title-true,
#section-m-image .ep-button .queen-btn-title-true,
#section-m-image .ep-button .king-btn-title-true {
    transition: opacity 0.3s ease-in-out;
    font-family: Morabba_Regular;
    font-weight: 500;
    font-size: 17px;
    word-spacing: 2px;
    color: white;
    position: absolute;
    right: 15px;
    top: 27.5%;
    animation: show-title-box 0.4s ease-in-out;
}

@keyframes show-title-box {
    0% {
        opacity: 0;
    }

    70% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#image-pawn,
#image-pawn-black {
    height: 32px;
    width: 18px;
    object-fit: scale-down;
    display: inline-block;
    margin-left: 3px;
}

#image-rook,
#image-rook-black {
    height: 28px;
    width: auto;
    object-fit: scale-down;
    display: inline-block;
    margin-left: 2px;
}

#image-knight,
#image-knight-black {
    height: 30px;
    width: 21px;
    object-fit: scale-down;
    display: inline-block;
    margin-left: 0.5px;
}

#image-bishop,
#image-bishop-black {
    height: 32px;
    width: auto;
    object-fit: scale-down;
    display: inline-block;
    margin-left: 2.2px;
}

#image-queen,
#image-queen-black {
    height: 30px;
    width: auto;
    object-fit: scale-down;
    display: inline-block;
    margin-left: 2.5px;
}

#image-king,
#image-king-black {
    height: 33px;
    width: auto;
    object-fit: scale-down;
    display: inline-block;
    margin-left: 3.2px;
}

#image-pawn-black,
#image-rook-black,
#image-knight-black,
#image-bishop-black,
#image-queen-black,
#image-king-black {
    display: none;
}

@media (max-width:576px) {
    #section-m-image {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #section-m-image .ep-button {
        width: 20vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: end;
        padding-left: 4vw;
        z-index: 10;
    }
}

/* __________________________________________

____________  honors ____________

__________________________________________ */

#sec-int {
    width: 100vw;
    height: 100vh;
    padding: 15vh 5rem 7vh 5rem;
    background-color: black;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

#sec-int h3 {
    font-family: Bahman_Regular;
    letter-spacing: 1px;
    font-size: 3rem;
    line-height: 70px;
    word-spacing: 3px;
    /* margin-bottom: 30px; */
    margin-top: 2vh;
}

#sec-int .int {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

#sec-int .int div {
    text-align: center;
    width: 25%;
}

#sec-int .int img {
    height: 120px;
    object-fit: fill;
    text-align: center;
    background-color: white;
    display: block;
    border-radius: 50%;
    margin: 0 auto;
    padding: 10px;
    margin-bottom: 1.2rem;
}

#sec-int .int h5 {
    font-family: Elemental_End;
    font-size: 1.4rem;
    text-align: center;
    display: inline-block;
}

#sec-int .int h4 {
    font-family: Morabba_Regular;
    font-size: 1.1rem;
    padding: 0 0.4rem;
    text-align: center;
    display: inline-block;
}

#sec-int .int p {
    font-family: Morabba_Bold;
    font-weight: 500;
    font-size: 1.2rem;
    display: block;
}

/* -------------------------------------- */

#sec-int .logo-slider {
    width: 91%;
    max-width: 100%;
    overflow: hidden;
    /* border: 1px solid #ccc; */
    border-radius: 10px;
    position: relative;
}

#sec-int .logo-slides {
    display: flex;
    animation: logoSlide linear infinite;
    /* انیمیشن بی‌نهایت */
}

#sec-int .logo-item {
    box-sizing: border-box;
}

#sec-int .logo-item img {
    width: 140px;
    height: auto;
    display: block;
    border-radius: 50%;
    background-color: white;
}

@keyframes logoSlide {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* __________________________________________

____________  sec-best ____________

__________________________________________ */

.sec-best {
    background-color: black;
    color: white;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sec-best .row-1 {
    height: auto;
    width: 70%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
}

.sec-best .row-1 h3 {
    font-family: Morabba_Bold;
    font-size: 1.4rem;
    font-weight: normal;
    display: inline-block;
}

.sec-best .row-1 a {
    text-decoration: none;
}

.sec-best .row-1 h5 {
    font-size: 1.1rem;
    font-family: Morabba_Regular;
    font-weight: normal;
    display: inline-block;
    color: white;
    padding: 0.5rem 2rem;
    border: 0.05rem solid white;
    border-radius: 0.3rem;
    transition: 0.3s ease-in-out;
}

/* .sec-best .row-1 a:hover~h5 {
    background-color: white;
    color: black;
} */

/* --------------------------------- */
.sec-best .row-2 {
    margin-top: 2rem;
    width: 70%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: start;
    overflow: hidden;
}

.sec-best .row-2 div {
    width: 31%;
    padding: 0 0;
    overflow: hidden;
    text-align: right;
}

.sec-best .row-2 img {
    width: 100%;
    height: 15rem;
    border-radius: 0.3rem;
    object-fit: cover;
    display: block;
}

.sec-best .row-2 h4 {
    font-family: Morabba_Regular;
    font-size: 1.2rem;
    font-weight: normal;
    padding: 1rem;
}

/* __________________________________________

____________  users ____________

__________________________________________ */

#users {
    height: 100vh;
    width: 100vw;
    background-color: black;
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* ------------------------------------------ */

#users .col-r {
    width: 35%;
    height: min-content;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: end;
    padding-right: 50px;
    color: white;
}

#users .col-r h3 {
    font-family: Bahman_Regular;
    font-size: 4.5rem;
    margin-bottom: 20px;
}

#users .col-r p {
    font-family: Morabba_Regular;
    font-size: 1.1rem;
    font-weight: normal;
    /* letter-spacing: 1px; */
    line-height: 2.2rem;
    text-align: justify;
    margin-top: -1rem;
    direction: rtl;
}

#users .col-r a {
    text-decoration: none;
}

#users .col-r h5 {
    font-family: Morabba_Regular;
    font-size: 16px;
    border: 1px solid white;
    border-radius: 5px;
    transition: 0.3s ease-in-out;
    display: inline-block;
    color: black;
    background-color: white;
    font-weight: 600;
    padding: 10px 30px;
    margin-top: 20px;
}

/* ------------------------------------------ */
#users .col-l {
    width: 65%;
    min-height: 45rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

#users .col-l .h-1,
#users .col-l .h-2,
#users .col-l .h-3,
#users .col-l .h-4,
#users .col-l .h-5,
#users .col-l .h-6,
#users .col-l .h-7,
#users .col-l .h-8,
#users .col-l .h-9,
#users .col-l .h-10,
#users .col-l .h-11,
#users .col-l .h-12,
#users .col-l .h-13 {
    width: 170px;
    height: 180px;
    background-size: cover;
    position: absolute;
    margin: 25px;
    border-radius: 15%;
    clip-path: polygon(50% 0%,
            100% 25%,
            100% 75%,
            50% 100%,
            0% 75%,
            0% 25%);
    overflow: hidden;
}

#users .col-l .h-1 {
    background-image: url('assets/images/background.jpg');
    left: 20px;
    top: 22px;
}

#users .col-l .h-2 {
    background-image: url('assets/images/background.jpg');
    left: 112px;
    top: 170px;
}

#users .col-l .h-3 {
    background-image: url('assets/images/background.jpg');
    left: 297px;
    top: 170px;
}

#users .col-l .h-4 {
    background-image: url('assets/images/background.jpg');
    left: 484px;
    top: 170px;
}

#users .col-l .h-5 {
    background-image: url('assets/images/background.jpg');
    left: 205px;
    top: 318px;
}

#users .col-l .h-6 {
    background-image: url('assets/images/background.jpg');
    left: 390px;
    top: 318px;
}

#users .col-l .h-7 {
    background-image: url('assets/images/background.jpg');
    left: 20px;
    top: 318px;
}

#users .col-l .h-8 {
    background-image: url('assets/images/background.jpg');
    left: 298px;
    top: 466px;
}

#users .col-l .h-9 {
    background-image: url('assets/images/background.jpg');
    left: 576px;
    top: 318px;
}

#users .col-l .h-10 {
    background-image: url('assets/images/background.jpg');
    left: 390px;
    top: 22px;
}

#users .col-l .h-11 {
    background-image: url('assets/images/background.jpg');
    left: 484px;
    top: 465px;
}

#users .col-l .h-12 {
    background-image: url('assets/images/background.jpg');
    left: 112px;
    top: 465px;
}

#users .col-l .h-13 {
    background-image: url('assets/images/background.jpg');
    left: 670px;
    top: 465px;
}

/* __________________________________________

____________  weblog-h ____________

__________________________________________ */

#section-weblog {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: black;
    color: white;
    overflow: hidden;
    padding-top: 3rem;
}

/* ---------------------------------- */

#section-weblog .rt {
    width: 80%;
    height: 55vh;
    display: flex;
    flex-direction: row-reverse;
}

/* ---------------------------------- */

#section-weblog .rt .cr {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;

    overflow: hidden;
}

#section-weblog .rt .cr div {
    position: absolute;
    direction: rtl;
    text-align: right;
    padding-left: 5rem;
    display: none;
}

#section-weblog .rt .cr h3 {
    font-family: Morabba_Bold;
    letter-spacing: 1px;
    font-size: 2rem;
    line-height: 2rem;
    word-spacing: 3px;
    margin-bottom: 20px;
}

#section-weblog .rt .cr p {
    font-family: Morabba_Regular;
    font-size: 1.1rem;
    font-weight: normal;
    /* letter-spacing: 1px; */
    line-height: 2.2rem;
    text-align: justify;
    margin-top: -1rem;
}

#section-weblog .rt .cr a {
    text-decoration: none;
}

#section-weblog .rt .cr h5 {
    font-family: Morabba_Regular;
    font-size: 16px;
    font-weight: normal;
    display: inline-block;
    padding: 5px 30px;
    border: 1px solid white;
    border-radius: 5px;
    margin-top: 10px;
    transition: 0.3s ease-in-out;
    direction: rtl;
    color: white;
}

#section-weblog .rt .cr div>* {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

#section-weblog .rt .cr div.visible>* {
    opacity: 1;
    transform: translateY(0);
}

/* ----------------------------------- */

#section-weblog .rt .cl {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

#section-weblog .rt .cl img {
    width: 26rem;
    height: 26rem;
    border-radius: 50%;
    object-fit: cover;
    position: absolute;
    margin: auto;
    inset: 0;
    transition: transform 1s ease, opacity 1s ease;
    opacity: 1;
}

#section-weblog .rt .cl .hide-image-weblog {
    transform: scale(60%);
    opacity: 0;
}

/* ---------------------------------- */

#section-weblog .rb {
    width: 80%;
    height: 18vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    gap: 0.5rem;
    margin-top: 2.5rem;
}

#section-weblog .rb .btn {
    transition: 0.3s ease-in-out;
    border-radius: 50%;
    opacity: 0.5;
    width: 8rem;
    height: 7rem;
}

#section-weblog .rb .btn:hover {
    opacity: 1;
}

#section-weblog .rb .active-btn {
    transition: 0.3s ease-in-out;
    border-radius: 50%;
    width: 8rem;
    height: 8rem;
    opacity: 1;
}

/* __________________________________________

____________  FOOTER ____________

__________________________________________ */

#footer {
    height: 100vh;
    width: 100vw;
    background-color: black;
    color: white;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

#footer a {
    text-decoration: none;
}

#footer .container {
    max-width: 1300px;
    height: auto;
    padding: 0 0;
}

#footer .container .row-1 {
    padding: 60px 0 30px 0;
}

#footer .container .row-1 .ep-1 {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    position: relative;
}

#footer .container .row-1 .ep-1 h3 {
    color: white;
    font-size: 1.8rem;
    font-weight: normal;
    font-family: Morabba_Bold;
    padding: 0 0;
    margin: 0 0;
}

#footer .container .row-1 .ep-1 .qrcode-instagram {
    height: 150px;
    width: auto;
    object-fit: scale-down;
    margin-top: 30px;
}

#footer .container .row-1 .ep-1 .social {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

#footer .container .row-1 .ep-1 .social a {
    height: 45px;
    width: 45px;
    padding: 10px;
    border-radius: 50%;
    background-color: #262626;
    position: relative;
    margin: 0 5px;
    transition: ease-in-out 0.3s;
}

#footer .container .row-1 .ep-1 .social a:hover {
    background-color: #3b3b3b;
}

#footer .container .row-1 .ep-1 .social .linkedin {
    height: 29px;
    width: auto;
    object-fit: scale-down;
    position: absolute;
    margin: auto;
    inset: 0;
}

#footer .container .row-1 .ep-1 .telegram {
    height: 19px;
    width: auto;
    padding: 0 2px 0 0;
    object-fit: scale-down;
    position: absolute;
    margin: auto;
    inset: 0;
}

#footer .container .row-1 .ep-1 .whatsapp {
    height: 26px;
    width: auto;
    padding: 0 0 1px 2px;
    object-fit: scale-down;
    position: absolute;
    margin: auto;
    inset: 0;
}

#footer .container .row-2 {
    height: auto;
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#footer .container .row-1 .ep-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#footer .container .row-1 .ep-2 h3 {
    color: white;
    font-size: 1.8rem;
    font-weight: normal;
    font-family: Morabba_Bold;
    padding: 0 0;
    margin-bottom: 25px;
}

#footer .container .row-1 .ep-2 h4 {
    color: white;
    font-size: 1.1rem;
    font-weight: 500;
    font-family: Morabba_Regular;
    text-align: center;
    line-height: 30px;
    word-spacing: 2px;
}

#footer .container .row-1 .ep-3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#footer .container .row-1 .ep-3 h3 {
    color: white;
    font-size: 1.8rem;
    font-weight: normal;
    font-family: Morabba_Bold;
    padding: 0 0;
    margin-bottom: 25px;
}

#footer .container .row-1 .ep-3 h4 {
    color: white;
    font-size: 1rem;
    font-weight: 500;
    font-family: Morabba_Regular;
    text-align: center;
    line-height: 30px;
    word-spacing: 2px;
}

#footer .container .row-1 .ep-4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#footer .container .row-1 .ep-4 h3 {
    color: white;
    font-size: 1.8rem;
    font-weight: normal;
    font-family: Morabba_Bold;
    padding: 0 0;
    margin: 0 0;
}

#footer .container .row-1 .ep-4 h4 {
    color: white;
    font-family: Morabba_Regular;
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
    line-height: 30px;
    margin-top: 20px;
    word-spacing: 2px;
}

#footer .container .row-2 p {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    text-align: center;
}

@media (max-width:992px) {
    #footer .container .row-1 .ep-4 {
        padding-right: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: end;
    }

    #footer .container .row-1 {
        padding: 60px 0 40px 0;
    }

    #footer .container .row-2 {
        padding: 10px;
    }
}


@media (max-width:768px) {
    #footer {
        padding: 0 35px;
    }

    #footer .container .row-1 .ep-1 {
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        align-items: center;
        position: relative;
        padding-top: 30px;
    }

    #footer .container .row-1 .ep-1 h3 {
        position: absolute;
        margin: auto;
        top: 0;
    }

    #footer .container .row-1 .ep-1 .social {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        margin-right: 20px;
    }

    #footer .container .row-1 .ep-1 .social a {
        height: 40px;
        width: 40px;
        padding: 10px;
        border-radius: 50%;
        background-color: #262626;
        position: relative;
        margin: 6px 0;
        transition: ease-in-out 0.3s;
    }

    #footer .container .row-1 .ep-3 {
        margin: 70px 0 30px 0;
    }

    #footer .container .row-1 .ep-4 {
        margin: 70px 0 30px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

@media (max-width:576px) {
    #footer {
        padding: 0 25px;
    }

    #footer .container .row-1 .ep-1 {
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        align-items: center;
        position: relative;
        padding-top: 30px;
    }

    #footer .container .row-1 .ep-1 .qrcode-instagram {
        height: 180px;
        width: auto;
        object-fit: scale-down;
        margin-top: 30px;
    }

    #footer .container .row-1 .ep-1 h3 {
        position: absolute;
        margin: auto;
        top: 0;
    }

    #footer .container .row-1 .ep-1 .social {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        margin-right: 20px;
    }

    #footer .container .row-1 .ep-1 .social a {
        height: 40px;
        width: 40px;
        padding: 10px;
        border-radius: 50%;
        background-color: #262626;
        position: relative;
        margin: 10px 0;
        transition: ease-in-out 0.3s;
        text-decoration: none;
    }

    #footer .container .row-1 .ep-2 {
        margin: 70px 0 0 0;
        width: 40%;
    }

    #footer .container .row-1 .ep-3 {
        margin: 70px 0 0 0;
        width: 60%;
    }

    #footer .container .row-1 .ep-4 {
        width: 100%;
        margin: 30px 0 30px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}