/* ======================================================================================= Imports */

/* ======================================================================================= Imports */

/* ========================================================================================= Basic */

/* -------------------------------------------------------------------------------------- */
* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    user-select: none;
    text-decoration: none;
}

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

/* ------------------------------------------------------------------------- scroll style */
::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0);
}

/* ------------------------------------------------------------------------- scroll style */

/* --------------------------------------------------------------------------------- font */
@font-face {
    font-family: vazir;
    src: url("../fonts/Vazir-Medium-FD.662b4bbae810.ttf");
}

@font-face {
    font-family: vazirB;
    src: url("../fonts/Vazir-Bold-FD.5d949700eb21.ttf");
}

/* --------------------------------------------------------------------------------- font */

/* --------------------------------------------------------------------------------- root */
:root {
    /* ------------------------------------------------------------------- colors */

    --white: #e6e6fa;
    --white75: #e6e6fac5;
    --white50: #e6e6fa85;
    --white25: #e6e6fa48;

    --black: #3b3b40;
    --black75: #3b3b40c9;
    --black50: #3b3b4086;
    --black25: #3b3b403d;

    --gray: #66666e;
    --gray75: #66666ecc;
    --gray50: #66666e88;
    --gray25: #66666e52;

    --Turquoise: #48d1cc;
    --Turquoise75: #48d1cdc7;
    --Turquoise50: #48d1cd86;
    --Turquoise25: #48d1cd41;

    --yellow: #ffe829;
    --yellow75: #ffea29c4;
    --yellow50: #ffea298c;
    --yellow25: #ffea2942;

    --orange: #e49b0f;
    --orange75: #e4990fce;
    --orange50: #e4990f8a;
    --orange25: #e4990f46;

    --deep-red: #7d1a16;
    --deep-red75: #7d1916b9;
    --deep-red50: #7d19168c;
    --deep-red25: #7d191642;

    --green: #306D29;
    --green75: #306d29c3;
    --green50: #306d2986;
    --green25: #306d293d;

    /* ------------------------------------------------------------------- colors */

    /* ------------------------------------------------------------------- common */

    --radius: 0.5rem;

    --small-gap: 0.5rem;
    --normal-gap: 1rem;
    --large-gap: 1.5rem;

    --small-padding: 0.5rem;
    --normal-padding: 1rem;
    --large-padding: 1.5rem;
    --button-padding: 0.8rem 1.2rem;

    --small-font-size: 0.8rem;
    --normal-font-size: 1rem;
    --large-font-size: 1.5rem;

    --small-icon-size: 1rem;
    --normal-icon-size: 1.2rem;
    --large-icon-size: 1.5rem;

    /* ------------------------------------------------------------------- common */
}

/* --------------------------------------------------------------------------------- root */

/* --------------------------------------------------------------------------- All Father */
html,
body {
    width: 100%;
    height: 100%;
    position: relative;
    font-family: vazir, 'tahoma';
    overflow: hidden;
}

/* --------------------------------------------------------------------------- All Father */

/* ========================================================================================= Basic */

/* ======================================================================================= Layer 1 */
.Layer1 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    z-index: 1;
}

/* ------------------------------------------------------------------------------- Body */
#BG_1 {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: var(--black);
}

/* ------------------------------------------------------------------------------- Body */

/* ======================================================================================= Layer 1 */

/* ======================================================================================= Layer 2 */
.Layer2 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    z-index: 2;
}

/* ------------------------------------------------------------------------------- Body */
#BG_2 {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ------------------------------------------------------------------------------- Body */

/* ----------------------------------------------------------------------------- Header */
.Header {
    margin-top: 2rem;
    width: 100%;
    height: 5rem;
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------------- Background */
.HeaderBackground {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    z-index: 1;
    background-color: var(--black);
    border-top: 0.1rem solid var(--yellow25);
    border-bottom: 0.1rem solid var(--yellow25);
}

/* --------------------------------------------------------------- Background */

/* ---------------------------------------------------------------- Container */
.HeaderContainer {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--normal-gap);
    padding: 0 var(--normal-padding);
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ---------------------------------------------------------------- Container */

/* --------------------------------------------------------------------- Logo */
.HeaderLogo {
    width: 6.5rem;
    height: 6.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--black);
    border: 1px solid var(--yellow);
    border-radius: var(--radius);
    box-shadow: 0 0 0.75rem var(--yellow25);
    padding: 0.75rem;
}

.HeaderLogo img {
    display: block;
    width: auto;
    height: 100%;
    width: 100%;
}

/* --------------------------------------------------------------------- Logo */

/* --------------------------------------------------------------- Navigation */
.HeaderNav {
    height: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    direction: rtl;
    gap: var(--small-gap);
}

.HeaderNavButton {
    height: max-content;
    padding: 0.75rem 1.25rem;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: var(--small-gap);
    color: var(--white50);
    font-size: var(--normal-font-size);
    white-space: nowrap;
    transition: color 0.5s ease, border 0.5s ease;
    border-radius: var(--radius);
}

.HeaderNavButton:hover {
    color: var(--yellow);
}

.HeaderNavButton.active {
    color: var(--yellow);
    background-color: var(--yellow25);
}

.HeaderNavButtonIcon {
    width: var(--normal-icon-size);
    height: var(--normal-icon-size);
    color: inherit;
    fill: currentColor;
}

/* --------------------------------------------------------------- Navigation */

/* ------------------------------------------------------------------ Account */
.HeaderAccount {
    width: max-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--small-gap);
    direction: ltr;
    color: var(--white50);
    transition: color 0.5s ease;
    margin-right: auto;
    font-size: var(--normal-font-size);
}

.HeaderAccount:hover {
    color: var(--white);
}

.HeaderAccountName {
    direction: rtl;
    white-space: nowrap;
}

.HeaderAccountIMG {
    width: 3.25rem;
    height: 3.25rem;
    flex-shrink: 0;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--yellow25);
    border-radius: var(--radius);
}

.HeaderAccountIcon {
    width: var(--normal-icon-size);
    height: var(--normal-icon-size);
}

/* ------------------------------------------------------------------ Account */

/* ----------------------------------------------------------------------------- Header */

/* ------------------------------------------------------------------------------- Main */
.Main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: scroll;
    padding: 2rem var(--normal-padding);
    z-index: 0;
}

/* ------------------------------------------------------------------------------- Main */

/* ----------------------------------------------------------------------------- Footer */
.Footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--black);
    color: var(--white75);
    border-top: 0.1rem solid var(--white25);
    padding: var(--normal-padding) 0px;
    gap: var(--normal-gap);
    margin-top: 1rem;
}

/* ---------------------------------------------------------------- Container */
.FooterContainer {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--large-gap);
}

/* ---------------------------------------------------------------- Container */

/* ------------------------------------------------------------------- Column */
.FooterColumn {
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: var(--small-gap);
}

/* ------------------------------------------------------------------- Column */

/* --------------------------------------------------------------------- Card */
.FooterCard {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--normal-padding);
    border: 0.1rem solid var(--white25);
    border-radius: var(--radius);
    background-color: var(--gray25);
    color: var(--white75);
    transition: border 0.5s ease, color 0.5s ease;
}

.FooterCard:hover,
.FooterCard:active {
    border: 1px solid var(--white);
    color: var(--white);
}

.FooterSectionTitle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--small-gap);
}

.FooterSectionTitle svg {
    width: var(--normal-icon-size);
    height: var(--normal-icon-size);
}

.FooterSectionTitle p {
    font-size: var(--normal-font-size);
    font-weight: 500;
}

.FooterSectionTitle small {
    color: var(--white50);
    font-size: var(--small-font-size);
    font-weight: 400;
}

.FooterSectionDescription {
    color: var(--white50);
    font-size: var(--small-font-size);
    margin-bottom: 1rem;
}

/* --------------------------------------------------------------------- Card */

/* ------------------------------------------------------------------- Phones */
.FooterPhoneGrid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--small-gap);
}

.FooterPhone {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: var(--small-gap);
    padding: var(--small-padding);
    color: var(--white75);
    border: 1px solid var(--white25);
    border-radius: var(--radius);
    transition:
        color 0.5s ease,
        border-color 0.5s ease,
        background-color 0.5s ease;
    cursor: pointer;
}

.FooterPhone:hover,
.FooterPhone:active {
    color: var(--black);
    background-color: var(--white);
}

.FooterPhone svg {
    width: var(--normal-icon-size);
    height: var(--normal-icon-size);
}

.FooterPhone span {
    direction: ltr;
    white-space: nowrap;
    font-size: var(--small-font-size);
}

/* ------------------------------------------------------------------- Phones */

/* ------------------------------------------------------------------ Contact */
.FooterContactGrid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--small-gap);
}

.FooterContactButton {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: var(--small-gap);
    padding: var(--small-padding);
    color: var(--white75);
    border: 0.1rem solid var(--white25);
    border-radius: var(--radius);
    font-size: var(--small-font-size);
    transition: color 0.5s ease, background-color 0.5s ease;
}

.FooterContactButton:hover {
    color: var(--black);
    background-color: var(--white);
}

.FooterContactButtonIcon {
    flex: 0 0 auto;
    width: var(--normal-font-size);
    height: var(--normal-font-size);
}

.FooterContactButton span {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: center;
}

/* ------------------------------------------------------------------ Contact */

/* ------------------------------------------------------------------- Mascot */
.FooterMascot {
    width: min(100%, 22rem);
    height: auto;
    display: block;
    object-fit: contain;
}

/* ------------------------------------------------------------------- Mascot */

/* ------------------------------------------------------------- Quick Access */
.FooterQuickGrid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--small-gap);
}

.FooterQuickButton {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--small-gap);
    padding: var(--small-padding);
    color: var(--white75);
    border: 1px solid var(--white25);
    border-radius: var(--radius);
    font-size: var(--small-font-size);
    text-align: center;
    transition:
        color 0.5s ease,
        background-color 0.5s ease;
}


.FooterQuickButton:hover,
.FooterQuickButton:active {
    color: var(--black);
    background-color: var(--white);
}

.FooterQuickButton svg {
    width: var(--small-icon-size);
    height: var(--small-icon-size);
}

/* ------------------------------------------------------------- Quick Access */

/* ----------------------------------------------------------------- Licenses */
.FooterLicenseGrid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--small-gap);
}

.FooterLicense {
    height: 8.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--small-padding);
    border: 0.1rem solid var(--white25);
    border-radius: var(--radius);
}

.FooterLicense img {
    max-width: 90%;
    max-height: 7.5rem;
    object-fit: contain;
}

/* ----------------------------------------------------------------- Licenses */

/* ------------------------------------------------------------------ Install */
.FooterInstall {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--small-gap);
    padding: 1rem;
    color: var(--white);
    background: var(--gray25);
    border: 1px solid var(--white25);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: var(--normal-font-size);
    cursor: pointer;
    transition:
        color 0.5s ease,
        background-color 0.5s ease;
}

.FooterInstall:hover,
.FooterInstall:active {
    color: var(--black);
    background-color: var(--white);
}

.FooterInstall svg {
    width: var(--normal-icon-size);
    height: var(--normal-icon-size);
}

/* ------------------------------------------------------------------ Install */

/* ---------------------------------------------------------------- Copyright */
.FooterCopyright {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--small-gap);
    text-align: center;
}

.FooterCopyright p {
    color: var(--white75);
    font-size: var(--small-font-size);
}

.FooterCopyright p span {
    margin-inline-end: 0.4rem;
}

.FooterCopyright>span {
    color: var(--white50);
    font-size: var(--small-font-size);
}

/* ----------------------------------------------------------------------------- Footer */

/* ======================================================================================= Layer 2 */

/* ======================================================================================= Layer 3 */
.Layer3 {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
    transform: translateY(-100%);
    transition: transform 0.5s ease;
}

.Layer3.show {
    transform: translateY(0%);
}

/* ------------------------------------------------------------------------------- Body */
#BG_3 {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: backdrop-filter 0.5s ease, -webkit-backdrop-filter 0.5s ease;
    overflow-y: scroll;
    padding: 1rem;
}

.Layer3.show #BG_3 {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

/* ------------------------------------------------------------------------------- Body */

/* ======================================================================================= Layer 3 */

/* ======================================================================================= Layer 4 */
.Layer4 {
    width: 100%;
    height: max-content;
    position: absolute;
    bottom: 0px;
    transform: translateY(100%);
    transition: transform 0.5s ease;
    z-index: 4;
}

.Layer4.show {
    transform: translateY(0%);
}

/* ------------------------------------------------------------------------------- Body */
#BG_4 {
    width: 100%;
    height: 100%;
    position: relative;
    padding: var(--normal-padding);
}

/* ------------------------------------------------------------------------------- Body */

/* ----------------------------------------------------------------------- notification */
.notification {
    width: 100%;
    display: flex;
    align-items: center;
    padding: var(--normal-padding);
    gap: var(--small-gap);
    border-radius: var(--radius);
    border: 0.1rem solid var(--white);
    font-size: var(--normal-font-size);
    color: var(--white);
}

.notification svg {
    width: var(--normal-icon-size);
    height: var(--normal-icon-size);
}

/* ----------------------------------------------------------------------- notification */

/* ======================================================================================= Layer 4 */

/* ============================================================================================ 4K */
@media (min-width: 2560px) {

    /* ------------------------------------------------------------------------------ header */
    /* .Header {
        height: 7rem;
    }

    .HeaderLogo {
        width: 8.5rem;
        height: 8.5rem;
    }

    .HeaderNavButton {
        font-size: 1.5rem;
    }

    .HeaderNavButtonIcon {
        width: 1.5rem;
        height: 1.5rem;
    }

    .HeaderAccount {
        font-size: 1.5rem;
    }

    .HeaderAccountIMG {
        width: 4rem;
        height: 4rem;
    }

    .HeaderAccountIcon {
        width: 1.5rem;
        height: 1.5rem;
    } */

    /* ------------------------------------------------------------------------------ header */

    /* ------------------------------------------------------------------------------ footer */
    /* .FooterSectionTitle svg {
        width: 2rem;
        height: 2rem;
    }

    .FooterSectionTitle p {
        font-size: 1.5rem;
        font-weight: 500;
    }

    .FooterSectionTitle small {
        font-size: 1rem;
    }

    .FooterSectionDescription {
        font-size: 1rem;
    }

    .FooterPhone svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .FooterPhone span {
        font-size: 1rem;
    }

    .FooterContactButton {
        font-size: 1rem;
    }

    .FooterContactButtonIcon {
        width: 2rem;
        height: 2rem;
    }


    .FooterCopyright p {
        font-size: 1.1rem;
    }

    .FooterCopyright>span {
        font-size: 1rem;
    }

    .FooterQuickButton {
        font-size: 1rem;
    }

    .FooterQuickButton svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .FooterInstall {
        font-size: 1rem;
    }

    .FooterInstall svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .FooterMascot {
        width: min(100%, 24rem);
    } */

    /* ------------------------------------------------------------------------------ footer */
}

/* ============================================================================================ 4K */

/* ====================================================================================== S Laptop */
@media (max-width: 1024px) {

    /* -------------------------------------------------------------------------- footer */
    .FooterContainer {
        display: flex;
        flex-direction: column;
        gap: var(--small-gap);
    }

    .FooterColumn {
        width: 100%;
    }

    #FirstColumn {
        order: 1;
    }

    #SecondColumn {
        order: 2;
    }

    .FooterCard {
        padding: var(--normal-padding);
    }

    .FooterSectionTitle p {
        font-size: var(--normal-font-size);
    }

    .FooterPhoneGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .FooterQuickGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .FooterMascot {
        width: min(100%, 23rem);
        margin-top: 0.5rem;
        order: 3;
    }

    /* -------------------------------------------------------------------------- footer */
}

/* ====================================================================================== S Laptop */

/* ======================================================================================== tablet */
@media (max-width: 768px) {

    /* ---------------------------------------------------------------------------- BG 2 */
    #BG_2 {
        flex-direction: column-reverse;
    }

    /* ---------------------------------------------------------------------------- BG 2 */

    /* -------------------------------------------------------------------------- header */
    .Header {
        padding: 0;
        margin-top: 0;
    }

    .HeaderBackground {
        border-bottom: 0;
    }

    .HeaderContainer {
        padding: 0;
        gap: 0px;
    }

    .HeaderLogo {
        width: 4rem;
        height: 100%;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .HeaderNav {
        width: 100%;
        gap: 0;
    }

    .HeaderNavButton {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        gap: var(--small-gap);
        padding: var(--small-padding);
        color: var(--white75);
        font-size: var(--small-font-size);
        text-align: center;
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
        background: linear-gradient(to bottom, transparent, transparent);
        transition: background 0.5s ease, border 0.5s ease, color 0.5s ease;
        border-radius: 0;
    }

    .HeaderNavButton:hover {
        color: var(--yellow);
    }

    .HeaderNavButton.active {
        color: var(--yellow);
        border-left: 1px solid var(--yellow25);
        border-right: 1px solid var(--yellow25);
        background: linear-gradient(to bottom, var(--yellow25), transparent);
    }

    .HeaderNavIcon {
        width: var(--large-icon-size);
        height: var(--large-icon-size);
    }

    .HeaderAccount {
        width: 100%;
        height: 100%;
        padding: var(--small-padding);
        flex-direction: column-reverse;
        font-size: var(--small-font-size);
        margin-right: 0;
    }

    .HeaderAccountIMG {
        width: var(--large-icon-size);
        height: var(--large-icon-size);
        border-radius: var(--radius);
    }

    .HeaderAccountIcon {
        width: var(--large-icon-size);
        height: var(--large-icon-size);
    }

    /* -------------------------------------------------------------------------- header */

    /* ---------------------------------------------------------------------------- main */
    .Main {
        padding: var(--normal-padding);
    }

    /* ---------------------------------------------------------------------------- main */

    /* -------------------------------------------------------------------------- footer */
    .FooterPhoneGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* -------------------------------------------------------------------------- footer */

    /* ------------------------------------------------------------------------- layer 4 */
    .Layer4.show {
        transform: translateY(-80%);
    }

    /* ------------------------------------------------------------------------- layer 4 */

}

/* ======================================================================================== tablet */

/* ====================================================================================== L mobile */
@media (max-width: 425px) {

    /* ------------------------------------------------------------------------ header */
    .HeaderLogo {
        display: none;
    }

    .HeaderAccount {
        justify-content: center;
    }

    .HeaderAccountIMG {
        width: 2.5rem;
        height: 2.5rem;
    }

    .HeaderAccountName {
        display: none;
    }

    /* ------------------------------------------------------------------------ header */

    /* -------------------------------------------------------------------------- main */
    .Main {
        padding: var(--small-padding);
    }

    /* -------------------------------------------------------------------------- main */

    /* ------------------------------------------------------------------------ footer */
    .FooterPhoneGrid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .FooterContactGrid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    /* ------------------------------------------------------------------------ footer */
}

/* ====================================================================================== L mobile */