@font-face {
    font-family: yekan;
    src: url("/static/fonts/woff/YekanBakhFaNum-Regular.woff") format("woff"),
        url("/static/fonts/woff2/YekanBakhFaNum-Regular.woff2") format("woff2");

}



@font-face {
    font-family: yekanBold;
    src: url('/static/fonts/woff/YekanBakhFaNum-SemiBold.woff') format('woff'),
        url('/static/fonts/woff2/YekanBakhFaNum-SemiBold.woff2') format('woff2');
}





* {
    padding: 0;
    margin: 0;
    font-family: yekan;
    box-sizing: border-box;
}


td {
    overflow-wrap: break-word;
    word-break: break-all;
    overflow-wrap: break-word;
}

:root {


    --sp: #ffff;
    --grayText: #c6c6c6;
    --tableBack: #1c0a47;
    --backgroudColor: #0F0319;
    --navBack: #130527;
    --boxBackground: #120422;
    --light-pueple: #a28bf9;
    --dark-purple: #4a2bb8;
    --green: #1BE294;
    --dark-green: #0AB67B;
    --red: #DF3030;
    --box-color: #18083b;
    --lightBoxColor: #1a0940;
    --dark-gray: #DADADA;
    --light-gray: #E9E9E9;
    --topUser: #D9D9D9;
    --text-color: #fff;
    --dark-text: #2A1177;
    --lightText: #6D52F4;
    --footerbackground: #170735;
    --inputBack: #1a083f;
}



body.dark-theme {
    --grayText: rgb(111, 111, 111);
    --tableBack: #e9e9e9;
    --backgroudColor: #ffff;
    --navBack: #f6f6f6;
    --boxBackground: #E9E9E9;
    --light-pueple: #a28bf9;
    --dark-purple: #4a2bb8;
    --green: #0AB67B;
    --red: #DF3030;
    --box-color: #E9E9E9;
    --lightBoxColor: #f9f9f9;
    --dark-gray: #DADADA;
    --light-gray: #E9E9E9;
    --topUser: #D9D9D9;
    --text-color: #2A1177;
    --dark-text: #2A1177;
    --lightText: #6D52F4;
    --footerbackground: #EFEFEF;
    --inputBack: #EFEFEF;
}



.bodyFa {
    background-color: var(--backgroudColor);
    direction: rtl;

}


.header {
    width: 100%;
    height: 100vh;

}


.errorBoxFlex {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
}

.error-box {
    background-color: #f8d7da;
    color: #721c24;
    padding: 15px;
    position: fixed;
    top: 10px;
    border-radius: 15px;
    text-align: center;
    border: 2px solid #721c24;
    z-index: 1000;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0;

}


.close-btn svg {
    width: 30px;
}


.error-box.red {
    background-color: #f8d7da;
    color: #721c24;
    padding: 15px;
    position: fixed;
    top: 10px;
    border-radius: 15px;
    text-align: center;
    border: 2px solid #721c24;
    z-index: 1000;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0;
}

.error-box.green {

    background-color: #c3e6cb;
    color: #155724;
    padding: 15px;
    position: fixed;
    top: 10px;
    border-radius: 15px;
    text-align: center;
    border: 2px solid #155724;
    z-index: 1000;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0;
}

.close-btn {
    background: none;
    border: none;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    float: right;
}

.close-btn.red {
    color: #721c24;
}

.close-btn.green {
    color: #155724;
}



.close-btn.green {
    color: #155724;
}



.nav {
    width: 100%;
    height: 12vh;
    background-color: var(--navBack);
    display: flex;
    align-items: center;
    justify-content: space-between;

}



.rightNav {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
}





.darkLightPart button {
    width: 55px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    border: none;
    outline: none;
    border-radius: 12px;
    margin-left: 8px;
}


.darkLightPart button svg {
    width: 30px;
    height: 30px;
    color: #fff;
}

.loginPart a {
    text-decoration: none;
    color: var(--dark-text);
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(45deg, var(--light-gray), var(--dark-gray));
    padding: 0 15px;
    font-weight: 600;


}





.middleNav {
    display: flex;
    flex: 3;
    align-items: center;
    justify-content: center;
}



.navLinks ul li {
    display: inline-block;
    padding: 0 25px;
    list-style: none;
}



.navLinks ul li::after {
    content: '';
    height: 2px;
    width: 0%;
    background-color: var(--lightText);
    margin: auto;
    transition: 0.5s;
    display: block;
    margin-top: 3px;
}


.navLinks ul li:hover::after {

    width: 100%;
}

.navLinks ul li a {
    color: var(--text-color);
    text-decoration: none;
}




.leftNav {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
}


.lanquageChange {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
}



.lanquageChange select {
    border: none;
    outline: none;
    background-color: transparent;
    color: var(--text-color);
    direction: ltr;
    margin-left: 5px;
    cursor: pointer;
}



.lanquageChange svg {
    width: 28px;
    height: 28px;
    color: var(--text-color);
}

.logo img {
    width: 80px;
    height: 80px;
    margin-top: 10px;
}


.boNav {
    width: 100%;
    height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;

    background-position: center;
    background-size: cover;
    position: relative;
}


.rightBoNav {
    flex: 1.2;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-right: 100px;
}




.rightBoNav h2 {
    color: var(--text-color);
    font-size: 42px;
    margin-bottom: 35px;
    font-family: yekanBold;
}

.rightBoNav p {
    color: var(--text-color);
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
}


.BonavButton {
    display: flex;
    align-items: center;
    justify-content: start;
    margin-top: 0;
}



.BonavButton .w {
    height: 55px;
    padding: 0 15px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 15px;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #Fff;
    margin: 5px;
    margin-right: 0;
    width: 200px;

}


.BonavButton .o {
    width: 180px;
    height: 55px;
    padding: 0 15px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 15px;
    background: linear-gradient(45deg, var(--light-gray), var(--dark-gray));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark-text);
    margin: 5px;
}




.leftBoNav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

}


.leftBoNav img {
    width: 500px;
    height: 380px;
}



.closeFlex svg {
    display: none;
}


.loginResponsivr a {
    display: none;
}


.close,
.menu {
    display: none;
    width: 25px;
    height: 25px;
    fill: var(--text-color);
    color: var(--text-color);

}



@media screen and (max-width:1300px) {
    .rightBoNav {
        flex: 1;
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin-right: 50px;
    }




    .leftBoNav img {
        width: 600px;
        height: 450px;
    }
}


@media screen and (max-width:1100px) {
    .navLinks {
        position: absolute;
        background-color: var(--navBack);
        min-height: 100vh;
        width: 100%;
        top: 0;
        text-align: right;
        z-index: 3;
        transition: 1s;
        margin-right: 0;
        margin-top: 0;
        display: none;
        left: 0;
        right: 0;
    }


    .closeFlex1 {
        width: 98%;
        display: flex;
        align-items: center;
        justify-content: end;
        padding: 15px;
    }


    .navLinks ul li {
        display: block;
        padding: 25px;
        list-style: none;
        width: 100%;
        text-align: center;
    }



    .closeFlex1 svg {
        display: block;
        width: 30px;
        height: 30px;
        fill: var(--text-color);
    }


    .loginResponsivr a {
        display: block;
    }


    .close,
    .menu {
        display: block;
    }

    .loginPart a {
        display: none;
    }


    .leftBoNav {
        display: none;
    }

    .rightBoNav {
        margin: 0 50px;
    }

}


@media screen and (max-width:450px) {
    .rightBoNav h2 {
        font-size: 22px;
        text-align: center;
    }

    .rightBoNav p {
        font-size: 15px;
        text-align: center;
    }

    .BonavButton .w {
        font-size: 13.5px;
        padding: 5px;
        width: 170px;
    }

    .BonavButton .o {
        font-size: 13.5px;
        padding: 5px;
        width: 150px;
    }

    .rightBoNav {
        padding: 0 15px;
    }

    .navLinks ul li a {
        font-size: 14px;
    }

    .nav {

        padding: 0 10px;
    }
}





/***************************************************whatProp*************************************************/




.whatProp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 100px 10px;
}

.whatProp .rightWhat {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: end;
    margin-left: 30px;
}



.whatProp .rightWhat img {
    width: 550px;
    height: 380px;
}




.leftWhat {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: start;
    margin-right: 30px;

}


.leftWhat .leftwhatBox {
    background-color: var(--box-color);
    width: 550px;
    padding: 28px;
    border-radius: 20px;
}




.leftWhat .leftwhatBox p {
    color: var(--text-color);
    line-height: 25px;
    font-size: 15px;

}

.leftWhat .leftwhatBox h2 {
    color: var(--text-color);
    display: inline-block;
    margin: 10px 5px;
    margin-bottom: 25px;
    font-size: 22px;
}




@media screen and (max-width:1200px) {
    .leftWhat .leftwhatBox {
        background-color: var(--box-color);
        width: 450px;
        padding: 28px;
        border-radius: 20px;
    }

    .whatProp .rightWhat img {
        width: 480px;
        height: 320px;
    }
}




@media screen and (max-width:1000px) {



    .whatProp {
        flex-direction: column;
    }


    .leftWhat .leftwhatBox {
        background-color: var(--box-color);
        width: 450px;
        padding: 28px;
        border-radius: 20px;
    }

    .whatProp .rightWhat img {
        width: 480px;
        height: 320px;
        margin-bottom: 50px;
    }

    .whatProp .rightWhat {
        margin-left: 0;
    }

    .leftWhat {
        margin-right: 0;
    }
}





@media screen and (max-width:500px) {



    .whatProp {
        flex-direction: column;
    }


    .leftWhat .leftwhatBox {
        background-color: var(--box-color);
        width: 320px;
        padding: 18px;
        border-radius: 20px;
    }

    .whatProp .rightWhat img {
        width: 330px;
        height: 220px;
        margin-bottom: 50px;
    }

    .whatProp .rightWhat {
        margin-left: 0;
    }

    .leftWhat {
        margin-right: 0;
    }


    .leftWhat .leftwhatBox p {
        font-size: 14px;
    }


    .leftWhat .leftwhatBox h2 {
        font-size: 19px;
    }
}





/***************************************whereStart*************************************************/



.whatStart {

    padding: 100px 10px;
}


.whatStart h2 {
    margin-bottom: 80px;
    text-align: center;
    color: var(--text-color);
    font-size: 28px;
}

.whatStartRow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}


.whatstarCo {
    background-color: var(--box-color);
    border-radius: 20px;
    border: 3px solid var(--lightText);
    width: 320px;
    padding: 20px;

}


.whatstarCo h2 {
    color: var(--text-color);
    margin-bottom: 10px;
    font-size: 34px;
    text-align: start;
}



.whatstarCo h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: var(--text-color);
}



.whatstarCo p {
    color: var(--text-color);
    margin-bottom: 10px;
    font-size: 15px;
}



@media screen and (max-width:450px) {
    .whatStart h2 {
        font-size: 20px;
    }

    .whatstarCo h2 {
        color: var(--text-color);
        margin-bottom: 10px;
        font-size: 26px;
        text-align: start;
    }

    .whatstarCo h3 {
        font-size: 17px;
    }


    .whatstarCo p {
        font-size: 14px;
    }
}


/************************************90per***************************************************/



.nineper {
    padding: 100px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.rightnineper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: end;

}


.rightnineper h2 {

    font-size: 28px;
    color: var(--text-color);
    margin-bottom: 30px;
}


.rightninepertexts {
    width: 550px;

}

.rightninepertexts span {
    color: var(--lightText);
    padding: 0 5px;
    font-size: 28px;
    font-weight: 600;
}


.rightnineper h3 {

    font-size: 20px;
    line-height: 36px;
    color: var(--text-color);
}


.leftnineper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.leftnineper img {
    width: 550px;
    height: 400px;
}



/************************************125per***************************************************/



.nineper2 {
    padding: 100px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    direction: ltr;
}


.rightnineper2 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;


}


.rightnineper2 h2 {

    font-size: 28px;
    color: var(--text-color);
    margin-bottom: 30px;
    direction: rtl;
}


.rightninepertexts {
    width: 550px;
    direction: rtl;

}

.rightninepertexts span {
    color: var(--lightText);
    padding: 0 5px;
    font-size: 28px;
    font-weight: 600;
}


.rightnineper2 h3 {

    font-size: 20px;
    line-height: 36px;
    color: var(--text-color);
}


.leftnineper2 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: start;


}

.leftnineper2 img {
    width: 550px;
    height: 400px;
}



@media screen and (max-width:1250px) {
    .leftnineper img {
        width: 450px;
        height: 300px;
    }

    .leftnineper2 img {
        width: 450px;
        height: 300px;
    }

    .rightninepertexts {
        width: 450px;
        direction: rtl;
    }
}


@media screen and (max-width:950px) {
    .nineper {
        flex-direction: column-reverse;
    }


    .nineper2 {
        flex-direction: column-reverse;
    }


    .leftnineper img {
        width: 500px;
        height: 350px;
    }

    .leftnineper2 img {
        width: 500px;
        height: 350px;
    }


    .rightninepertexts {
        width: 570px;
        direction: rtl;
        margin-top: 80px;
    }
}


@media screen and (max-width:600px) {
    .leftnineper img {
        width: 400px;
        height: 290px;
    }


    .leftnineper2 img {
        width: 400px;
        height: 290px;
    }

    .rightninepertexts {
        width: 400px;
        direction: rtl;
        margin-top: 80px;
    }
}


@media screen and (max-width:450px) {
    .leftnineper img {
        width: 300px;
        height: 210px;
    }

    .leftnineper2 img {
        width: 300px;
        height: 210px;
    }

    .rightninepertexts {
        width: 315px;
        direction: rtl;
        margin-top: 80px;
    }

    .rightnineper h2 {
        font-size: 18px;
        text-align: center;
    }


    .rightnineper2 h2 {
        font-size: 18px;
        text-align: center;
    }


    .rightninepertexts span {
        font-size: 18px;
    }


    .rightnineper h3 {
        font-size: 15px;
        line-height: 36px;
        color: var(--text-color);
        text-align: center;
    }

    .rightnineper2 h3 {
        font-size: 15px;
        line-height: 36px;
        color: var(--text-color);
        text-align: center;
    }
}




/*******************************************whyUs**************************************************/



.whyUs {
    width: 100%;
    min-height: 100vh;
    padding: 100px 10px;
    background-color: var(--boxBackground);
}


.topTextWhy {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}


.topTextWhy h2 {
    margin: 15px 0;
    color: var(--lightText);
    font-size: 26px;
}


.topTextWhy span {
    color: var(--text-color);
    font-size: 22px;
    font-weight: 600;
}


.rowWhyUs {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 80px;

}


.rowWhyUs .coWhyUs {
    width: 400px;
    background-color: var(--lightBoxColor);
    border: 1px solid var(--lightText);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 20px;
    padding: 20px 10px;
}



.rightCoWhy {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}



.backIconWhy {
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border-radius: 12px;
    margin-left: 10px;

}



.backIconWhy svg {
    color: #fff;
    width: 30px;
    height: 30px;
}


.leftCowhy {
    flex: 4;
}



.leftCowhy h3 {
    color: var(--text-color);
    font-size: 18px;
    margin-bottom: 10px;
}


.leftCowhy p {
    color: var(--text-color);
    font-size: 14px;
}




@media screen and (max-width:450px) {
    .leftCowhy h3 {
        font-size: 16px;
    }

    .topTextWhy span {
        color: var(--text-color);
        font-size: 18px;
        font-weight: 600;
    }

}




/******************************************************blogs*****************************************************/



.blogs {
    padding: 100px 10px;
    min-height: 100vh;
    width: 100%;
    background-color: var(--boxBackground);
}


.blogsRow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 80px;
}

.blogsCo {
    width: 300px;
    border: 2px solid var(--lightText);
    background-color: var(--lightBoxColor);
    border-radius: 20px;
    padding: 15px;
}



.blogsCo h3 {
    margin-top: 10px;
    color: var(--text-color);


}


.blogsCo a {
    color: #fff;
    text-decoration: none;
    width: 100%;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    margin-top: 15px;
    font-weight: 600;
    font-size: 15px;

}


.blogsCo a svg {
    width: 20px;
    height: 20px;
    color: #fff;
    margin-right: 5px;
}



.blogsCo p {
    margin-top: 15px;
    color: var(--text-color);
    font-size: 14px;

}


.dateRow {
    display: flex;
    align-items: center;
    justify-content: end;
}



.dateRow svg {
    color: var(--text-color);
    width: 20px;
    height: 20px;
    margin-left: 5px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}




.dateRow p {
    color: var(--text-color);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
}



@media screen and (max-width:450px) {
    .topTextWhy h2 {
        margin: 15px 0;
        color: var(--lightText);
        font-size: 21px;
    }

    .topTextWhy span {
        color: var(--text-color);
        font-size: 16px;
        font-weight: 600;
    }


    .blogsCo h3 {
        margin-top: 10px;
        color: var(--text-color);
        font-size: 16px;
    }


    .blogsCo p {
        margin-top: 15px;
        color: var(--text-color);
        font-size: 14px;
    }

    .dateRow p {
        color: var(--text-color);
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 0;
    }


    .dateRow svg {
        color: var(--text-color);
        width: 18px;
        height: 18px;
        margin-left: 5px;
        margin-top: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 6px;
    }


    .blogsCo a {
        color: var(--text-color);
        text-decoration: none;
        width: 100%;
        background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
        margin-top: 15px;
        font-weight: 600;
        font-size: 14px;
    }



}






/********************************************footer**********************************************/


.footer {
    min-height: 80vh;
    width: 100%;
    padding: 80px 10px;
    background-color: var(--footerbackground);

}



.footer .footreRow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}



.footerCo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}


.footerCo img {
    width: 80px;
    height: 80px;
    margin-left: 5px;
}


.topRowFooter {
    display: flex;
    align-items: center;
    justify-content: start;
    margin-bottom: 30px;
}


.topRowFooter h3 {
    color: var(--text-color);
    font-size: 22px;

}


.pRowFooter {
    display: flex;
    align-items: center;
    justify-content: start;
    margin: 30px 0;
}


.pRowFooter p {
    color: var(--text-color);

}

.pRowFooter a {
    color: var(--text-color);
    text-decoration: none;
    margin-right: 5px;
}


.footerCo li {
    list-style: none;
    padding: 13px;
    color: var(--text-color);
}


.footerCo li a {
    color: var(--text-color);
    text-decoration: none;
}



.footerCo .pflexpaddingFoter p {
    color: var(--text-color);
    padding: 25px;
}




@media screen and (max-width:1000px) {
    .footer .footreRow {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .footerCo {
        margin: 30px 0;
    }
}



@media screen and (max-width:600px) {
    .footerCo .pflexpaddingFoter p {
        color: var(--text-color);
        padding: 25px 0;
    }

    .footer {
        min-height: 100vh;
        width: 100%;
        padding: 80px 0;
        background-color: var(--footerbackground);
    }
}



@media screen and (max-width:450px) {
    .footerCo .pflexpaddingFoter p {
        color: var(--text-color);
        padding: 25px 0;
        font-size: 14px;
    }


    .footerCo li a {
        color: var(--text-color);
        font-size: 14px;
        text-decoration: none;

    }


    .pRowFooter p {
        font-size: 14px;
    }


    .pRowFooter a {
        color: var(--text-color);
        text-decoration: none;
        margin-right: 5px;
        font-size: 14px;
    }


    .topRowFooter h3 {
        color: var(--text-color);
        font-size: 18px;
    }


}



/**********************************************palns**********************************************/



.plans .kindd-plans h4,
.plans .balance h4 {
    color: var(--text-color);
    padding: 10px 30px;
    font-weight: 500;
    font-size: 17px;

}



.plans .kindd-plans,
.plans .balance {
    margin-right: 10%;
    display: flex;
    align-items: center;
    width: 1204px;

}

.special1 {
    background: linear-gradient(45deg, var(--pink-purple), var(--light-purple));
    color: var(--text-color);
}

.plans .box-plan .btn1 {
    color: var(--text-color);
    border: 1px solid var(--box-color);
    background-color: var(--box-color);
    border-radius: 12px;
    padding: 5px;
    height: 55px;
    width: 130px;
    outline: none;
    border: none;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;

}




.plans {
    width: 100%;
    padding: 100px 10px;

}

.plans h2 {
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 30px;
    color: var(--text-color);
}


.plans .kind-plans h4,
.plans .balance h4 {
    color: var(--text-color);
    padding: 10px 30px;
    font-weight: 500;
    font-size: 17px;

}

.plans .box-plan {

    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: flex-start;
    max-width: 435px;
    background-color: var(--lightBoxColor);
    border-radius: 20px;
    padding: 6px;


}

.plans .box-plan2 {

    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: flex-start;
    max-width: 435px;
    background-color: var(--lightBoxColor);
    border-radius: 20px;
    padding: 6px;


}

.plans .box-plan3 {

    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: flex-start;
    max-width: 300px;
    background-color: var(--lightBoxColor);
    border-radius: 20px;
    padding: 6px;


}




.plans .box-plan4 {

    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: flex-start;
    max-width: 300px;
    background-color: var(--lightBoxColor);
    border-radius: 20px;
    padding: 6px;


}




.plans .box-plan5 {

    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: flex-start;
    max-width: 300px;
    background-color: var(--lightBoxColor);
    border-radius: 20px;
    padding: 6px;


}


.plans .box-plan5 .btn5 {
    color: var(--text-color);
    background-color: transparent;
    border-radius: 12px;
    padding: 5px;
    height: 45px;
    width: 130px;
    outline: none;
    border: none;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
}



.plans .kind-plans,
.plans .balance {
    margin-right: 6%;

}


.plans .box-plan .btn {
    color: var(--text-color);
    background-color: var(--lightBoxColor);
    border-radius: 12px;
    padding: 5px;
    height: 45px;
    width: 130px;
    outline: none;
    border: none;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;

}



.plans .box-plan2 .btn2 {
    color: var(--text-color);
    background-color: transparent;
    border-radius: 12px;
    padding: 5px;
    height: 45px;
    width: 130px;
    outline: none;
    border: none;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;

}






.plans .box-plan3 .btn3 {
    color: var(--text-color);
    background-color: transparent;
    border-radius: 12px;
    padding: 5px;
    height: 45px;
    width: 130px;
    outline: none;
    border: none;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;

}



.plans .box-plan4 .btn4 {
    color: var(--text-color);
    background-color: transparent;
    border-radius: 12px;
    padding: 5px;
    height: 45px;
    width: 130px;
    outline: none;
    border: none;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;

}


.navy-background {
    background-color: #ff7b00;
    /* Dark navy background */
    color: #bdc3c7;
    /* Light grey text */
}



.special {
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    color: var(--sp);
    -webkit-text-fill-color: #Fff;


}



.special2 {
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    color: var(--sp);
    -webkit-text-fill-color: #Fff;

}


.special3 {
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    color: var(--sp);
    -webkit-text-fill-color: #Fff;

}




.plans .box-plan .btn2 {
    color: var(--text-color);
    border: 1px solid var(--background-color);
    background-color: var(--box-color);
    border-radius: 12px;
    padding: 5px;
    height: 55px;
    width: 130px;
    outline: none;
    border: none;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
}


.top-table {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
    margin-bottom: 0;
    border: 2px solid var(--backgroudColor);



}

.top-table ul:last-child li {
    border-top-left-radius: 12px;
}


.top-table ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 172px;
    height: 85px;
    background-color: var(--lightBoxColor);
    text-align: center;
    color: var(--text-color);
    font-weight: 600;
    font-size: 18px;

}

.top-table ul {
    border-top: 2px solid var(--background-color);
}

.top-table ul:first-child {
    border-right: 2px solid var(--backgroudColor);
}

.top-table ul:last-child {
    border-left: 2px solid var(--backgroudColor);
}

.top-table ul:first-child li {
    border-top-right-radius: 12px;
}

.top-table ul:last-child li {
    border-top-left-radius: 12px;
}


.table {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
    margin-top: 0;

}


.table ul {
    display: flex;
    justify-content: space-around;
    flex-direction: column;

}


.table ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 172px;
    height: 85px;
    border: 1px solid var(--backgroudColor);
    background-color: var(--lightBoxColor);
    text-align: center;
    color: var(--text-color);
}


.table ul li:nth-child(odd) {
    background-color: var(--tableBack);
}



.table ul li:first-child {
    border-top: 2px solid var(--background-color);
}

.table ul li:last-child {
    border-bottom: 4px solid var(--background-color);
}

#right-radush {
    border-bottom-right-radius: 12px;

}

#left-rad {
    border-bottom-left-radius: 12px;
}


.plans .table ul li a {
    color: #fff;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    border-radius: 12px;
    padding: 12px 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;

}

.plans .table ul li .simple {
    background: none;
    border: none;
    text-align: center;


}

.plans .table ul .green-text,
.plans .box-plan .green-text,
.plans .top-table ul .green-text {
    color: var(--lightText);
    font-weight: 600;
    font-size: 22px;
}



.wrap ion-icon {
    font-size: 130px;
    color: var(--text-color);
    display: none;
}

.table ul li {
    font-size: 14px;
}


.table ul:first-child li {
    color: var(--lightText);
    font-weight: 800;
    font-size: 14px;

}


@media (max-width:1400px) {

    .plans .kind-plans,
    .plans .balance {
        margin-right: 6%;
    }
}



@media (max-width:1250px) {


    .plans .kind-plans,
    .plans .balance {
        margin-right: 7%;
    }


    .top-table ul li {

        width: 150px;
        height: 80px;

    }

    .plans .table ul li a {
        padding: 10px 20px;

    }


    .table ul li {

        width: 150px;
        height: 80px;
    }
}


@media (max-width:1100px) {

    .plans .kind-plans,
    .plans .balance {
        margin: 20px;

    }

    .top-table ul li {

        width: 280px;
        height: 80px;

    }

    .plans .table ul li a {
        padding: 12px 25px;
    }

    .table ul li {

        width: 280px;
        height: 80px;
    }



    .wrap {
        display: flex;
        margin: 0 20px;
        overflow: auto;
        flex-direction: column;
        justify-content: start;
        align-items: start;
    }

    .table {
        justify-content: start;
        align-items: start;
        margin: 0;
    }


    .top-table {
        justify-content: start;
        align-items: start;
        margin: 0;
    }

    .table ul {
        display: flex;
        justify-content: start;
        flex-direction: column;

    }

}



@media (max-width:450px) {
    .plans h2 {
        font-size: 18px;
    }

    .plans .kind-plans h4 {

        font-size: 14px;

    }


    .plans .kind-plans .btn {
        font-size: 13px;
        width: 44%;
    }

    .plans .kind-plans .btn2 {
        font-size: 13px;
        width: 44%;
    }

    .plans .kind-plans .btn3 {
        font-size: 13px;
        width: 44%;
    }


    .top-table ul li {
        font-size: 13px;
        width: 200px;

    }

    .plans .table ul li a {
        font-size: 13px;
        padding: 10px 20px;
    }

    .table ul li {
        width: 200px;
        font-size: 13px;
    }
}





/***********************************************loginSignup************************************************/


.loginSignup {
    width: 100%;
    min-height: 100vh;
    padding: 100px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.loginBox {
    width: 850px;
    display: flex;
    align-items: stretch;
    justify-content: center;
}



.loginBox22 {
    width: 650px;
    display: flex;
    align-items: stretch;
    justify-content: center;
}



.rightLogin {
    flex: 2;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    min-height: 600px;


}


.topRightlogin {
    display: flex;
    align-items: end;
    justify-content: end;
    flex-direction: column;
    margin-top: 200px;
}



.topRightlogin ul li {
    height: 30px;
    width: 150px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}




.topRightlogin ul li a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;
    font-size: 18px;
}



.topRightlogin ul #login {
    height: 30px;
    width: 150px;
    list-style: none;
    color: var(--text-color);
    background-color: var(--navBack);
    border-right: 10px solid transparent;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;



}




.topRightlogin ul #login::before {
    content: "";
    position: absolute;
    left: 0;
    top: -50px;
    height: 50px;
    width: 50px;
    background: transparent;
    border-radius: 50%;
    box-shadow: 35px -35px 0 10px var(--navBack);
    pointer-events: none;
    rotate: 180deg;
}




.topRightlogin ul #login::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -50px;
    height: 50px;
    width: 50px;
    background: transparent;
    border-radius: 50%;
    box-shadow: 35px 35px 0 10px var(--navBack);
    pointer-events: none;
    rotate: 180deg;
}



.leftLOgin {
    flex: 4;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: var(--navBack);
}




.leftLOgin h2 {
    color: var(--text-color);
    text-align: center;
    margin: 50px 10px;
    font-size: 26px;

}


.inputBox {
    display: flex;
    justify-content: center;
    flex-direction: column;
    max-width: 450px;
    margin-right: 60px;
    margin-left: 55px;
    margin-bottom: 35px;


}


.inputBox span {
    color: var(--text-color);
    font-size: 14px;

}


.inputBox input {
    border: 1px solid var(--lightText);
    background-color: var(--inputBack);
    outline: none;
    padding: 12px;
    border-radius: 12px;
    color: var(--text-color);
    margin-top: 5px;
}


.inputBox textarea {
    border: 1px solid var(--lightText);
    background-color: var(--inputBack);
    outline: none;
    padding: 12px;
    border-radius: 12px;
    color: var(--text-color);
    margin-top: 5px;
}



.submitLogin input {
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    outline: none;
    padding: 12px;
    border-radius: 12px;
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    margin: 30px 60px;
    border: none;
    margin-top: 30px;
    cursor: pointer;
    font-size: 17px;
}


.forgotText {
    margin: 0 60px;
    display: flex;
    align-items: center;
    margin-bottom: 5px;

}


.forgotText p {
    font-size: 14px;
    color: var(--text-color);
}


.forgotText a {
    color: var(--green);
    font-size: 14px;
    text-decoration: none;
    margin-right: 5px;
}

.check {
    color: var(--text-color);
    font-size: 14px;
}


.check input {
    margin-right: 65px;
    color: var(--text-color);
    font-size: 15px;
}



.iconLogin {
    display: flex;
    margin-top: 200px;
    align-items: center;
    justify-content: center;
    gap: 10px;

}


.backIconLogin {
    width: 50px;
    height: 50px;
    background: linear-gradient(45deg, var(--light-gray), var(--dark-gray));
    padding: 10px;
    border-radius: 12px;
}


.backIconLogin svg {
    color: #1a083f;
}




@media screen and (max-width:650px) {




    .loginBox {
        width: 850px;
        display: flex;
        align-items: stretch;
        justify-content: center;
        flex-direction: column;
    }


    .rightLogin {
        flex: 2;
        background: linear-gradient(45deg, var(--navBack), var(--navBack));
        border-radius: 20px;
        min-height: 70px;
        margin: 10px;
        margin-bottom: 5px;
    }


    .leftLOgin {
        margin: 10px;
        border-radius: 20px;
    }


    .topRightlogin ul #login::before {
        content: "";
        position: absolute;
        left: 0;
        top: -50px;
        height: 50px;
        width: 50px;
        background: transparent;
        border-radius: 50%;
        box-shadow: 0 0 0 0 var(--navBack);
        pointer-events: none;
        rotate: 180deg;

    }

    .topRightlogin ul #login {
        background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
        width: 50%;
        border-radius: 20px;
        border: none;
        padding: 25px;
        font-size: 15px;
    }


    .topRightlogin ul #login::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -50px;
        height: 50px;
        width: 50px;
        background: transparent;
        border-radius: 50%;
        box-shadow: 0 0 0 0 var(--navBack);
        pointer-events: none;
        rotate: 180deg;
        display: none;

    }



    .bottomRightLogin {
        display: none;
        height: 0;
    }

    .iconLogin {
        display: none;
        margin-top: 0;
        height: 0;
    }


    .topRightlogin {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        margin-top: 0;
        padding: 0 10px;
    }



    .topRightlogin ul {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }


    .topRightlogin ul li {
        display: inline-flex;
        height: 70px;
        width: 50%;
    }
}


@media screen and (max-width:450px) {
    .topRightlogin ul li a {
        font-size: 15px;
    }

    .submitLogin input {
        margin: 10px 20px;
        margin-top: 10px;
        margin-top: 10px;
        font-size: 14px;
        width: 90%;
    }


    .check input {
        margin-right: 25px;
        color: var(--text-color);
        font-size: 15px;
    }


    .forgotText {
        margin: 0 25px;
        margin-bottom: 0px;
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        font-size: 13px;
    }

    .forgotText p {
        font-size: 13px;
    }

    .forgotText:last-child {
        margin-bottom: 40px;
    }
}



/*************************************************lows************************************************/


.lows-Whole {
    padding: 100px 10px;
}

.lows-Whole h2 {
    color: var(--lightText);
    text-align: center;
    margin-bottom: 15px;
    font-size: 22px;
    font-size: 28px;
}



.lows-Whole h3 {
    margin-bottom: 40px;
    color: var(--text-color);
    text-align: center;
}


.row-lows {
    display: flex;
    align-items: start;
    justify-content: center;
    margin-bottom: 100px;

}


.row-lows .colomn-lows {
    width: 500px;
    background-color: var(--boxBackground);
    border-radius: 12px;
    border: 1px solid var(--light-purple);
    color: var(--text-color);
    margin: 20px;
    font-size: 14px;
}

.row-lows .colomn-lows .each-box {
    border: 1px solid var(--lightText);
    background-color: var(--lightBoxColor);
    margin: 5px;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: 0.5s;
}


.row-lows .colomn-lows .each-box:hover {
    background: linear-gradient(45deg, var(--lightText), var(--dark-purple));
}




.row-lows .colomn-lows .inside-each-box {
    padding: 15px 30px;
    display: none;
    background-color: var(--boxBackground);
}

.row-lows .colomn-lows .each-box .up {
    display: none;
}

.j-color {
    background: linear-gradient(45deg, var(--lightText), var(--dark-purple));
    border-radius: 12px;
    color: #fff;
}




@media (max-width:1100px) {
    .row-lows .colomn-lows {
        width: 450px;
        font-size: 13px;
        margin: 10px;
    }

    .row-lows .colomn-lows .each-box {

        padding: 15px;

    }

    .lows-Whole h2 {

        font-size: 20px;
    }

}


@media (max-width:850px) {

    .lows-Whole h2 {
        margin: 100px 60px 20px 60px;
        font-size: 18px;
    }

    .row-lows {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

    }

    .row-lows .colomn-lows {
        width: 500px;
        font-size: 13px;
        margin: 10px;
    }
}


@media (max-width:550px) {

    .lows-Whole h2 {
        margin: 100px 80px 20px 80px;
        font-size: 20px;

    }


    .lows-Whole h3 {
        font-size: 16px;
    }

    .row-lows .colomn-lows {
        width: 400px;
        font-size: 14px;
        margin: 10px;
    }
}



@media (max-width:450px) {

    .lows-Whole h2 {
        margin: 100px 30px 20px 30px;
        font-size: 20px;
    }


    .row-lows .colomn-lows {
        width: 320px;
        margin: 10px;
        font-size: 14px;
    }
}




/********************************************dasboard*****************************************************************/


.dasboard {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    min-height: 100vh;
}


.rightDashboard {
    flex: 2;
    background-color: var(--navBack);
    border-radius: 20px;
    margin: 15px;
    margin-left: 0;

}



.rightDashboard .topWelcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--lightBoxColor);
    border-radius: 20px;
    margin: 10px;
    padding: 10px;
    height: 75px;
    margin-bottom: 30px;
}


.topWelcome .rightUserLogo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;

}




.rightUserLogo .backuserLogo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--topUser);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;

}


.rightUserLogo .backuserLogo svg {
    fill: var(--dark-text);
}


.leftTextDD {
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;


}

.h3flexD,
.pflexD {
    display: flex;
    align-items: center;
    justify-content: start;
    margin-right: 10px;
}


.h3flexD h3 {
    color: var(--text-color);
    font-size: 16px;
    margin: 5px 5px;
}



.pflexD p {
    color: var(--text-color);
    font-size: 13px;
    margin: 0 5px;
}



.pflexD p svg {
    width: 20px;
    height: 20px;
    color: var(--text-color);
    fill: var(--text-color);

}


.dasboardKink ul a {

    text-decoration: none;
}


.dasboardKink ul a li {
    display: flex;
    align-items: center;
    justify-content: start;
    list-style: none;
    padding: 12px;
    margin: 10px 20px;
    border-radius: 15px;
    transition: 0.3s;

}

.dasboardKink ul a li:hover {
    background-color: var(--lightBoxColor);
}

#colorDashboard {
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
}

.dashLinkLogo svg {
    color: var(--text-color);
    fill: var(--text-color);
    width: 25px;
    height: 25px;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.dashlinkText {
    color: var(--text-color);
    font-size: 15px;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.leftDashbord {
    flex: 7;
    margin: 15px;
}


.close1,
.menu1 {
    display: none;
    width: 30px;
    height: 30px;
    color: var(--text-color);
    fill: var(--text-color);
}


#colorDashboard .dashlinkText {
    color: #ffff;
}


#colorDashboard .dashLinkLogo svg {
    color: #ffff;
    fill: #ffff;
}

@media screen and (max-width:1350px) {
    .dasboard {
        flex-direction: column;
    }

    .rightDashboard {
        margin: 10px;
        margin-left: 10px;
        padding: 10px;


    }

    .menueDashboard {

        display: flex;
        align-items: center;
        justify-content: end;
    }

    .menueDashboard svg {
        color: var(--text-color);
        fill: var(--text-color);
        width: 30px;
        height: 30px;
    }

    .dasboardKink {
        display: none;
        min-height: 100vh;
        top: -100px;
        position: relative;
        background-color: var(--box-color);
        margin: -15px;

    }

    .closeFlex {
        display: flex;
        align-items: center;
        justify-content: end;
        padding: 30px;

    }


    .menu1,
    .close1 {
        display: block;
    }

    .closeFlex .close1 {
        display: block;
    }

    .rightDashboard {
        flex: 0;
    }

    .rightDashboard .topWelcome {
        margin-bottom: 10px;
        height: auto;

    }

    .leftDashbord {
        margin: 10px;
        margin-top: 0;
    }

}


/**************************************************ticket*******************************************************/


.ticketRowN {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}



.rightticketRowN {
    flex: 1.2;
    background-color: var(--navBack);
    border-radius: 20px;
    padding: 20px;
    margin-left: 15px;
    max-height: 120vh;
    overflow-y: scroll;
}


.rightticketRowN::-webkit-scrollbar {
    width: 4.5px;
    height: 4px;
}

.rightticketRowN::-webkit-scrollbar-track {
    background: var(--dark-purple);
    border-radius: 10px;
    margin: 14px;
}

.rightticketRowN::-webkit-scrollbar-thumb {
    background: var(--lightText);
    border-radius: 10px;
}

.rightticketRowN::-webkit-scrollbar-thumb:hover {
    background: var(--light-pueple)
}


.rightticketRowN h3 {
    color: var(--text-color);
}


.rightticketRowN select {
    border: 2px solid var(--lightText);
    outline: none;
    padding: 15px;
    border-radius: 12px;
    margin: 5px 0;
    width: 100%;
    background-color: transparent;
    color: var(--text-color);
    font-size: 15px;

}


.rightticketRowN select option {
    color: #170735;

}

.sendTicketA a {
    width: 100%;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    outline: none;
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px;
    border-radius: 12px;
    margin-bottom: 35px;
    margin-top: 20px;

}


.sendTicketA a svg {
    width: 25px;
    height: 25px;
    color: #fff;
    fill: #fff;
    margin-left: 5px;
}



.ticketsCol {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
}


.ticketBox {
    border: 2px solid var(--lightText);
    border-radius: 15px;
    padding: 15px;

}

.ticketBox:hover {
    background-color: var(--box-color);
}




.h3FlexTicketBox {
    display: flex;
    align-items: center;
}

.ticketBox h3 {
    font-size: 16px;
    margin-bottom: 10px;
}


.h3FlexTicketBox h3 {
    font-size: 15px;
}

.ticketBox p {
    color: var(--grayText);
    font-size: 14px
}


a {
    text-decoration: none;
}


.leftTivketRowN {
    flex: 3;
    max-height: 120vh;
    overflow-y: scroll;
}



.leftTivketRowN::-webkit-scrollbar {
    width: 5px;
    height: 4px;
}

.leftTivketRowN::-webkit-scrollbar-track {
    background: var(--dark-purple);
    border-radius: 10px;
    margin: 14px;
}

.leftTivketRowN::-webkit-scrollbar-thumb {
    background: var(--lightText);
    border-radius: 10px;
}

.leftTivketRowN::-webkit-scrollbar-thumb:hover {
    background: var(--light-pueple)
}

.topTicketName {
    width: 100%;
    border-radius: 20px;
    padding: 15px 20px;
    background-color: var(--navBack);
}


.topTicketName h2 {
    font-size: 18px;
    color: var(--text-color);
}


.dateTFlex {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.topTicketName svg {
    width: 15px;
    height: 15px;
    margin-left: 5px;
    color: var(--text-color);
    fill: var(--grayText);
}


.dateTFlex span {
    color: var(--grayText);
    font-size: 13px;


}


.sendResiveText {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
}


.sendResiveText .sendText {

    background-color: var(--navBack);
    border-radius: 20px;
    border-bottom-right-radius: 0;
    padding: 15px;
    margin: 40px 0;
    width: 80%;

}



.dateSendResiveFlex span {
    font-size: 13px;
    color: var(--grayText);
}





.sendResiveText .sendText p {
    color: var(--text-color);
    font-size: 14px;
}





.justResiveText {
    display: flex;
    align-items: center;
    justify-content: end;
}


.justResiveText .resive {
    background: linear-gradient(45deg, var(--lightText), var(--dark-purple));
    border-radius: 20px;
    border-bottom-left-radius: 0;
    padding: 15px;
    margin: 40px 0;
    width: 80%;
}


.justResiveText .resive p {
    color: #fff;
    font-size: 14px;
}


.sendResiveText .dateSendResiveFlex {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: -40px;
    margin-bottom: 20px;
}


.justResiveText .dateSendResiveFlex {
    display: flex;
    align-items: center;
    justify-content: start;
    margin-top: -40px;
    margin-bottom: 20px;
}


.sendTextCombination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 2px solid var(--lightText);
    border-radius: 12px;
    background-color: var(--navBack);

}

.sendTextCombination form {
    display: inline-flex;
    width: 100%;
}

#file {
    display: none;

}

#lableFile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    cursor: pointer;
}

#lableFile svg {
    width: 30px;
    height: 30px;
    fill: var(--text-color);
    color: var(--text-color);

}


#text {
    display: inline-flex;
    padding: 13px;
    flex: 10;
    border: none;
    outline: none;
    background-color: transparent;
    color: var(--text-color);
}


#submit {
    display: none;
}


#submitLable {
    display: inline-flex;
    flex: 1;
    border: none;
    outline: none;
    background-color: transparent;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}



#submitLable svg {
    width: 25px;
    rotate: 180deg;
    color: var(--text-color);
    fill: var(--text-color);

}







.ticketArchive {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.ticketCheckbox {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: start;

}


.ticketCheckbox input {
    width: 17px;
    height: 17px;
}


.ticketnotChek {
    flex: 6;
}


.ticketTopFlexh3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}


.ticketTopFlexh3 a {
    color: #fff;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    padding: 12px;
    border-radius: 15px;
    border: medium;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;

}


/**********************************************ehraz***********************************************/


.ehraz {
    width: 100%;
    background-color: var(--navBack);
    border-radius: 20px;
    min-height: 100vh;

}



.ehraz h2 {
    color: var(--text-color);
    padding: 50px;
    padding-bottom: 20px;
}


.ehrazFileFlex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin: 50px;
}


.ehrazFileFlex span {
    color: var(--text-color);
    font-size: 15px;
}


.ehrazInputBox {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.ehrazInputBox input {
    border: 1px solid var(--lightText);
    background-color: var(--box-color);
    border-radius: 12px;
    padding: 13px;
    margin-top: 6px;
    outline: none;
    color: var(--text-color);
}



#kartMeli,
#selfi {
    display: none;
}

.ehrazFileBot {
    width: 100%;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 13px;
    margin-top: 6px;

}



.ehrazFileBot svg {
    color: #fff;
    fill: #fff;
    margin-left: 8px;
    width: 25px;
    height: 25px;

}



.ehrazSubmitF {
    display: flex;
    align-items: center;
    justify-content: end;
    margin: 30px 50px 80px 50px;
    padding-bottom: 80px;
}


.ehrazSubmitF input {
    border: none;
    outline: none;
    color: #fff;
    font-weight: 600;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px;
    border-radius: 15px;
    width: 250px;
}











/*************************************************account********************************************/


.eccountExplnation {
    width: 100%;
    padding: 40px 30px;
    background-color: var(--navBack);
    border-radius: 20px;
}


.eccountExplnation h2 {
    color: var(--text-color);
}


.eccountExplnation p {
    color: var(--text-color);
    margin: 15px 0;
    font-size: 15px;
}


.searchBar {
    display: flex;
    width: 100%;
}


.searchBar form {
    display: flex;
    width: 100%;
}

.searchCombo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--box-color);
    border: 2px solid var(--lightText);
    padding: 5px;
    border-radius: 15px;
    margin-top: 30px;
}


.searchCombo select {
    flex: 2;
    border: none;
    outline: none;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    color: #fff;
    padding: 13px;
    border-radius: 12px;
    font-weight: 600;
}


#textSearch {
    flex: 7;
    border: none;
    outline: none;
    padding: 13px;
    background-color: transparent;
    color: var(--text-color);
}



#serchSub {
    display: none;
}


#serchBarSub {
    flex: 0.6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;


}



#serchBarSub svg {
    width: 25px;
    height: 25px;
    color: var(--text-color);
    fill: var(--text-color);
}



.eachEccountsCol {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
}



.ecoountBox {
    background-color: var(--navBack);
    border-radius: 15px;
    width: 100%;
    padding: 10px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.faal {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: var(--green);
    margin: 5px;
}


.nofaal {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: var(--red);
    margin: 5px;
}


.archive {
    padding: 15px;
    width: 100%;
    margin-top: 15px;
    border-radius: 15px;
    background-color: var(--navBack);
    display: flex;
    align-items: center;
    justify-content: end;
}


.h2AndArchive {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}

.h2AndArchive a {
    color: #fff;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    padding: 13px;
    border-radius: 15px;
    border: none;
    outline: none;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}


.archive input {
    color: #fff;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    padding: 13px;
    border-radius: 15px;
    border: none;
    outline: none;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}



.ecoountBox input {
    width: 20px;
    height: 20px;
}


.eccountBoxCol {
    flex: 4;


}



.pflexeccontCol {
    display: flex;
    align-items: center;
    margin-right: 30%;

}




.eccountBoxCol:nth-child(2) .pflexeccontCol {
    justify-content: space-between;
    display: flex;
    margin-left: 25%;
    margin-right: 0;
}


.copyEccont button {
    border: none;
    outline: none;
    width: 30px;
    height: 30px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}



.copyEccont button svg {
    width: 25px;
    height: 25px;
    color: var(--text-color);
    fill: var(--text-color);
}



.pflexeccontCol p {
    color: var(--text-color);
    padding: 6px;
}

.noncopyT {
    display: flex;
    align-items: center;
}


.pflexeccontCol p a {
    padding: 8px;
    text-decoration: none;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    border-radius: 12px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    width: 180px;
    font-size: 15px;
}




.pflexeccontCol p a svg {
    width: 25px;
    height: 25px;
    margin-right: 5px;
    fill: #ffff;
    color: #fff;
}






/************************ادامههههههههههههههههههههههههههههههه***********************************/



/********************************************cart**************************************************************/


.cart-all-box form {
    display: flex;
    align-items: stretch;
    justify-content: center;

    padding: 100px 10px;
}



.broker-plans {
    width: 100%;

}

.box-plan {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: flex-start;
}


.btn3 {
    color: var(--text-color);

    background-color: transparent;
    border-radius: 12px;
    padding: 5px;
    height: 50px;
    width: 130px;
    outline: none;
    border: none;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    text-align: center;
}

.cart-all-box .cart-right-box {
    background-color: var(--box-color);
    border-radius: 12px;
    padding: 20px 35px;
    width: 650px;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.cart-all-box .cart-right-box #caption {
    background: -webkit-linear-gradient(45deg, var(--pink-purple), var(--light-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
    text-align: center;
}



.cart-all-box .cart-right-box .cart-inputbox {
    padding: 5px;
}


.cart-all-box .cart-right-box .cart-inputbox span {
    color: var(--text-color);
    font-size: 14px;
    padding: 10px;
    margin-bottom: 5px;
}

.cart-all-box .cart-right-box .cart-inputbox .cart-box input {
    padding: 10px;
    border-radius: 12px;
    width: 100%;
    border: none;
    outline: none;
    background-color: var(--text-color);
    font-size: 13px;
}

.cart-all-box .cart-right-box .cart-inputbox .cart-box select {
    padding: 10px;
    border-radius: 12px;
    width: 100%;
    border: none;
    outline: none;
    appearance: none;
    background-color: var(--text-color);
    font-size: 13px;
}

.cart-all-box .cart-right-box .cart-inputbox .cart-box select option {
    height: 200px;


}




.broker-plans .box-plan {
    display: flex;
    align-items: center;
    justify-content: start;
}

.cart-all-box .cart-right-box .broker-plans .box-plan .btn3 {
    color: var(--text-color);
    background-color: var(--lightBoxColor);
    border-radius: 12px;
    border: 2px solid var(--lightText);
    padding: 5px;
    height: 50px;
    width: 130px;
    outline: none;

    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    font-weight: 600;
    text-align: center;
}




.special4 {
    color: #ffff;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    -webkit-text-fill-color: #Fff;
}


.cart-all-box .cart-right-box .broker-plans .box-plan input {
    display: none;
}


.cart-all-box .cart-right-box .broker-plans h4 {
    color: var(--text-color);
    padding: 10px;
    margin: 20px auto 0 auto;
    font-weight: 500;

}




.cart-all-box .cart-right-box .broker-plans .box-plan {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: flex-start;


}


.low-scroll {
    background: linear-gradient(45deg, var(--lightText), var(--dark-purple));
    padding: 10px;
    border-radius: 12px;
    margin-top: 20px;
    height: 150px;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;


}


.low-scroll::-webkit-scrollbar {
    width: 5px;
    height: 4px;
}

.low-scroll::-webkit-scrollbar-track {
    background: var(--boxBackground);

    border-radius: 10px;
    margin: 5px;
}

.low-scroll::-webkit-scrollbar-thumb {
    background: var(--light-pueple);
    border-radius: 10px;
}

.low-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--dark-purple);
}


.parFlex {}




.cart-all-box .cart-right-box .low-scroll p {
    color: #fff;
    font-size: 15px;
    padding: 5px;
}




.agreeRow {
    display: flex;
    width: 100%;
    justify-content: start;
    margin: 20px 0;
}




.cart-all-box .cart-right-box #low-accept {
    color: var(--text-color);
    padding: 5px;

}

.cart-all-box .cart-right-box label {
    color: var(--text-color);
    padding: 5px;

}


.cart-all-box .cart-left {
    margin-right: 10px;
}

.cart-all-box .cart-info {
    width: 600px;
    color: var(--text-color);
    padding: 20px;
    border-radius: 12px;

}

.cart-all-box .cart-info h2 {
    text-align: center;
    margin-bottom: 30px;

    color: var(--text-color);
}

.cart-all-box .cart-info ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    font-size: 16px;

}

.cart-all-box .cart-info ul li:last-child {
    margin-bottom: 20px;
}

.cart-all-box .cart-info ul #hr {
    color: var(--text-color);
    margin: 10px 0;


}


.cart-all-box .cart-left .off {
    background-color: var(--box-color);
    width: 400px;
    padding: 20px;
    border-radius: 12px;


}

.cart-all-box .cart-left .off h3 {
    text-align: center;
    margin-bottom: 15px;
    margin-top: 15px;
    color: var(--text-color);
}


.cart-all-box .cart-left .off .cart-inputbox {
    padding: 5px;
}

.cart-all-box .cart-left .off .cart-inputbox .cart-box input {
    padding: 10px;
    border-radius: 12px;
    width: 100%;
    height: 48px;
    border: none;
    outline: none;
    color: var(--text-color);
    background-color: var(--tableBack);
    border: 2px solid var(--lightText);
    font-size: 15px;
    margin-top: 5px;
}

.cart-all-box .cart-left .off .cart-inputbox span {
    color: var(--text-color);
    font-size: 16px;

}

.cart-all-box .cart-left .off .off-box-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
}


.cart-all-box .cart-left .off .off-box-flex button {
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    width: 100%;
    outline: none;
    border: none;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-top: 15px;
    font-weight: 600;
    border-radius: 15px;
    color: #fff;
}




.cart-all-box .cart-left .off .off-box-flex input {
    border: none;
    outline: none;
    padding: 8px 15px;
    width: 130px;
    height: 40px;
    margin: 10px;
    border-radius: 12px;
    background: linear-gradient(45deg, var(--pink-purple), var(--light-purple));
    color: var(--text-color);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

}


.cart-all-box .cart-left .off .off-box-flex a {
    border: none;
    outline: none;
    padding: 10px 25px;
    height: 48px;
    margin: 10px;
    border-radius: 12px;
    background: linear-gradient(45deg, var(--pink-purple), var(--light-purple));
    color: var(--text-color);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-color);
    margin-top: 5px;
}



.cart-all-box .cart-left .cart-pay {
    background-color: var(--box-color);
    width: 400px;
    padding: 20px;
    border-radius: 12px;
    margin-top: 20px;
}

.cart-all-box .cart-left .cart-pay ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    color: var(--text-color);
    font-size: 15px;
}


.cart-all-box .cart-left .cart-pay ul li:last-child {
    margin-bottom: 20px;
}

.cart-all-box .cart-left .cart-pay ul #hr {
    color: var(--text-color);
    margin: 10px 0;


}


.cart-all-box form .cart-left .cart-pay {

    color: var(--text-color);
}

.cart-all-box .cart-left .cart-pay h3 {
    color: var(--lightText);
    margin: 38px 0;
    text-align: center;
}


.cart-all-box form .cart-left .cart-pay p {
    color: var(--text-color);
    margin-top: 25px;
    margin-bottom: 40px;
    font-size: 13px;

}

.cart-all-box .cart-left .cart-pay p a {
    color: var(--light-purple);
}

.cart-all-box form .cart-left .cart-pay .pardakht-box-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 10px;
    margin-top: 20px;
}

.cart-all-box form .cart-left .cart-pay .pardakht-box-flex input {
    border: none;
    outline: none;
    padding: 10px 15px;
    width: 100%;
    height: 48px;
    border-radius: 15px;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    color: #fff;
    transition: 0.25s;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

}

.cart-all-box form .cart-left .cart-pay .pardakht-box-flex a {
    border: none;
    outline: none;
    padding: 10px 15px;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    width: 100%;
    height: 48px;
    margin: 10px;
    margin-bottom: 15px;
    border-radius: 12px;
    color: var(--text-color);
    transition: 0.25s;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;


}


.off-erorr {
    display: flex;
    align-items: center;
    justify-content: center;
}

.off-erorr2 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.off-erorr2 span {
    border-radius: 12px;
    color: var(--text-color);
    padding: 10px;
    border: 3px solid var(--green);
    font-size: 14px;
}

.off-erorr span {
    border-radius: 12px;
    color: var(--text-color);
    padding: 10px;
    border: 3px solid red;
    font-size: 14px;
}

.off2-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.off2-flex .off2 {
    background-color: var(--box-color);
    border-radius: 12px;
    padding: 30px;
    margin: 100px 200px;
    width: 500px;
    color: var(--text-color);
    border: 1px solid var(--text-color);
}

.off2-flex .off2 input {
    padding: 15px;
    border-radius: 12px;
    width: 100%;
    border: none;
    outline: none;
    background-color: var(--text-color);
    font-size: 13px;
}

.off2-flex .off2 .off-box-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.off2-flex .off2 h3 {
    text-align: center;
    margin: 30px;
    margin-top: 18px;
    font-size: 20px;
    background: -webkit-linear-gradient(45deg, var(--pink-purple), var(--light-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.off2-flex .off2 #off-j {
    border: none;
    width: 40%;
    outline: none;
    padding: 12px;
    margin: 10px;
    margin-top: 40px;
    border-radius: 12px;
    background: linear-gradient(45deg, var(--pink-purple), var(--light-purple));
    color: var(--text-color);
    transition: 0.25s;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

@media (max-width:900px) {

    .off2-flex .off2 {
        background-color: var(--box-color);
        border-radius: 12px;
        padding: 30px;
        margin: 100px 50px;
        width: 400px;
        color: var(--text-color);
    }

}


@media (max-width:450px) {

    .off2-flex .off2 {
        background-color: var(--box-color);
        border-radius: 12px;
        padding: 15px;
        margin: 100px 10px;
        width: 300px;
        color: var(--text-color);
    }



    .cart-all-box .cart-right-box .broker-plans h4 {
        font-size: 14px;
    }



    .off2-flex .off2 h3 {

        font-size: 17px;

    }

    .off2-flex .off2 span {
        font-size: 13px;
    }


    .off2-flex .off2 #off-j {
        border: none;
        width: 100%;
        outline: none;
        padding: 10px;
        margin: 10px;
        margin-top: 40px;
        border-radius: 12px;
        background: linear-gradient(45deg, var(--pink-purple), var(--light-purple));
        color: var(--text-color);
        transition: 0.25s;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }


    .off2-flex .off2 input {
        padding: 12px;
        font-size: 14px;

    }


    .cart-all-box .cart-left .off .off-box-flex a {
        height: 42px;
        font-size: 14px;
    }




    .cart-all-box form .cart-left .cart-pay .pardakht-box-flex input {
        height: 42px;
        font-size: 14px;
    }

    .cart-all-box form .cart-left .cart-pay .pardakht-box-flex a {
        font-size: 12px;
        height: 42px;
    }

}





@media (max-width:1100px) {
    .cart-all-box .cart-right-box {
        width: 550px;

    }


    .cart-all-box .cart-info {
        width: 530px;
        color: var(--text-color);
        padding: 20px;
        border-radius: 12px;
    }

    .cart-all-box .cart-left .cart-info {
        width: 350px;
    }

    .cart-all-box .cart-left .off {
        width: 350px;

    }

    .cart-all-box .cart-left .cart-pay {
        width: 350px;
    }
}


@media (max-width:950px) {
    .cart-all-box form {
        display: flex;
        align-items: center;
        justify-content: center;

        flex-direction: column;
    }

    .cart-all-box h2,
    .cart-all-box h3 {
        font-size: 21px;
    }

    .cart-all-box .cart-left {
        margin-right: 0;
    }

    .cart-all-box .cart-right-box {
        width: 550px;
        margin-left: 0;


    }

    .cart-all-box .cart-left .cart-info {
        width: 550px;
        margin-top: 20px;
    }

    .cart-all-box .cart-left .off {
        width: 550px;
        margin-top: 20px;

    }

    .cart-all-box .cart-left .cart-pay {
        width: 550px;
    }
}


@media (max-width:590px) {
    .cart-all-box .cart-right-box {
        width: 400px;
        padding: 20px;


    }

    .cart-all-box .cart-left .cart-info {
        width: 400px;

    }

    .cart-all-box .cart-info {
        width: 390px;
    }

    .cart-all-box .cart-left .off {
        width: 400px;

    }

    .cart-all-box .cart-left .cart-pay {
        width: 400px;
    }

}

@media (max-width:450px) {
    .cart-all-box .cart-right-box {
        width: 320px;

    }


    .cart-all-box .cart-info ul li {
        font-size: 14px;
    }

    .cart-all-box .cart-info {
        width: 320px;
    }

    .cart-all-box .cart-right-box label {
        font-size: 14px;
    }

    .cart-all-box .cart-left .cart-pay ul li {
        font-size: 14px;
    }

    .cart-all-box .cart-left .cart-info ul li {

        font-size: 14px;

    }

    .cart-all-box h2,
    .cart-all-box h3 {
        font-size: 18px;
    }

    .cart-all-box .cart-right-box .low-scroll p {
        color: var(--text-color);
        font-size: 14px;
        padding: 5px;
    }


    .cart-all-box .cart-left .cart-info {
        width: 320px;

    }

    .cart-all-box .cart-left .off {
        width: 320px;

    }

    .cart-all-box .cart-left .cart-pay {
        width: 320px;
    }


    .cart-all-box .cart-right-box .broker-plans .box-plan .btn3 {
        font-size: 14px;

    }

    .cart-all-box .cart-right-box .cart-inputbox span {

        font-size: 14px;

    }

    .cart-all-box .cart-right-box .cart-inputbox .cart-box input {

        font-size: 14px;
    }

    .cart-all-box .cart-left .off .cart-inputbox .cart-box input {
        font-size: 14px;
    }

    .cart-all-box .cart-left .off .cart-inputbox span {
        font-size: 14px;
    }


    .parFlex label {
        font-size: 14PX;
    }

    .parFlex {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0;
    }


}











/********************************************************bardashtSod***********************************************/





.bardashtSod {
    width: 100%;
    min-height: 100vh;
    background-color: var(--navBack);
    border-radius: 20px;
    padding: 30px;
}



.bardhastH1Bu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;

}


.bardhastH1Bu h2 {
    color: var(--text-color);
}


.bardhastH1Bu a {
    text-decoration: none;
    color: #fff;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    border-radius: 15px;
    padding: 14px;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}


.bardashh3F {
    display: flex;
    align-items: center;
    justify-content: start;
    margin-top: 60px;
    margin-bottom: 20px;
}


.bardashh3F svg {
    width: 25px;
    height: 25px;
    margin: 5px;
    color: var(--text-color);
    fill: var(--text-color);
}


.bardashh3F h3 {
    color: var(--text-color);
    font-size: 16.5px;
}


.tableScrroll {
    display: flex;
    width: 100%;
}



.tableScrroll table {
    background-color: var(--box-color);
    border-radius: 15px;
    width: 100%;
    padding: 15px;
    border-spacing: 0;
}


.tableScrroll tr {
    width: 100%;
    border-bottom: 1px solid var(--grayText);
}


.tableScrroll th,
.tableScrroll td {

    padding: 18px;
    text-align: center;
    color: var(--text-color);


}


.tableScrroll tr td {
    border-bottom: 1px solid var(--grayText);
}


.tableScrroll tr:last-child td {
    border-bottom: none;
}


.borderTable {
    background-color: var(--lightBoxColor);
    border-spacing: 0;
    width: 100%;
}


.borderTable th {
    border-spacing: 0;
}

.borderTable th:first-child {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;

}

.borderTable th:last-child {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;

}









/****************************************************sefaresht***********************************/


.sefaresht {
    width: 100%;
    min-height: 100vh;
    background-color: var(--navBack);
    border-radius: 20px;
    padding: 30px;
}

.sefareshatH1Bu h2 {
    color: var(--text-color);
    margin-bottom: 50px;
}

.tableScrroll2 table {
    width: 100%;
    border-spacing: 0;
}


.tableScrroll2 table tr:first-child {
    background-color: var(--box-color);
    width: 100%;
    padding: 18px;
    border-radius: 15px;

}



.tableScrroll2 table tr {
    background-color: var(--box-color);
    width: 100%;
    padding: 18px;
    outline: 1px solid var(--lightText);


}


.tableScrroll2 table tr td {
    border-bottom: 1px solid var(--lightText);
}

.tableScrroll2 table tr:last-child td {
    border: none;
}


.tableScrroll2 table tr:nth-child(2) td {
    border: none;
}


.tableScrroll2 table tr:nth-child(3) td:first-child {
    border-top-right-radius: 15px;

}



.tableScrroll2 table tr:nth-child(3) td:last-child {
    border-top-left-radius: 15px;

}

.tableScrroll2 table tr:last-child td:first-child {
    border-bottom-right-radius: 15px;
}


.tableScrroll2 table tr:last-child td:last-child {
    border-bottom-left-radius: 15px;
}



.tableScrroll2 table th,
.tableScrroll2 table td {
    padding: 18px;
    color: var(--text-color);
    text-align: center;
}


.bottomTr {
    background-color: var(--box-color);
    width: 100%;
    padding: 18px;
    margin-top: 10px;
}





.tableScrroll2 table tr:last-child {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}




.tableScrroll2 table tr:nth-child(3) {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}



/*****************************************************hamkary***************************************************/




.hamkary {
    width: 100%;
    min-height: 100vh;
    background-color: var(--navBack);
    border-radius: 20px;
    padding: 30px;
}


.hamkary h2 {
    color: var(--text-color);
    margin-bottom: 60px;
    margin-top: 20px;
}


.referralLinksRow {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    gap: 30px;
    margin-bottom: 40px;
}


.referral {
    background-color: var(--box-color);
    border: 2px dashed var(--lightText);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 15px;
    padding: 15px;
}

.referralLink {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
}


.referralLink p {
    color: var(--text-color);
    padding: 2px 5px;
}



.referralCopy {
    display: flex;
    align-items: center;
    justify-content: end;
    cursor: pointer;
}


.referralCopy svg {
    width: 25px;
    height: 25px;
    color: var(--text-color);
    fill: var(--text-color);
}



.tableScrroll3 {
    width: 100%;

}

.tableScrroll3 h3 {
    margin-top: 70px;
    color: var(--text-color);
    font-size: 17px;
}



.tableScrroll3 table {
    background-color: var(--box-color);
    width: 100%;
    border: 1px solid var(--lightText);
    margin-top: 15px;
    border-radius: 20px;
    padding: 0 15px;
    border-spacing: 0;
}

.tableScrroll3 table th,
.tableScrroll3 table td {
    text-align: center;
    padding: 20px;
    color: var(--text-color);
}


.tableScrroll3 table th {
    border-bottom: 1px solid var(--lightText);
}





/***********************************************download*******************************************************/



.download {
    width: 100%;
    min-height: 100vh;
    background-color: var(--navBack);
    border-radius: 20px;
    padding: 30px;
}


.download h2 {
    color: var(--text-color);
    margin: 30px 0;
}


.downlowdRow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    margin-top: 40px;


}



.downloadBox {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 280px;
    background-color: var(--box-color);
    border-radius: 20px;
    padding: 0 15px;

}


.downloadBox img {
    width: 240px;
    height: 220px;
}

.downloadBox p {
    color: var(--text-color);
    font-weight: 600;
    font-size: 17px;
    margin-bottom: 15px;
    margin-top: -10px;
}


.downloadBox a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    color: #fff;
    border-radius: 12px;
    width: 100%;
    margin-bottom: 20px;
    gap: 5px;
    font-weight: 600;

}



.downloadBox a svg {
    width: 25px;
    height: 25px;
    color: #fff;
    fill: #fff;

}



/***********************************************moshakhasat*******************************************************/


.moshakhasat {
    width: 100%;
    min-height: 100vh;
    background-color: var(--navBack);
    padding: 30px;
    border-radius: 20px;
}



.moshakhasat h2 {
    margin: 30px 0;
    color: var(--text-color);
}


.moshakhasatInputRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 30px;
}

.moshakhsatInput {
    flex: 1;
    width: 100%;
}



.moshakhsatInput span {
    color: var(--text-color);
    font-size: 15px;
}


.inputForm {
    width: 100%;
    padding: 15px;
    background-color: var(--box-color);
    border: 1px solid var(--lightText);
    border-radius: 12px;
    color: var(--text-color);
    margin-top: 5px;
}



.moshakhsatInput input {
    width: 100%;
    padding: 15px;
    background-color: var(--box-color);
    border: 1px solid var(--lightText);
    border-radius: 12px;
    color: var(--text-color);
    margin-top: 5px;
    outline: none;

}




.moshakhasat h3 {
    color: var(--text-color);
    margin: 80px 0 30px 0;
    font-size: 19px;
}


.moshakhastSubmitF {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 100%;
    margin: 30px 0;
}






.moshakhastSubmitF input {
    width: 200px;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    font-weight: 600;
    color: #fff;
    border-radius: 15px;
    font-size: 15px;
    cursor: pointer;

}









/*****************************************kifpool*************************************************/



.kifpool {
    width: 100%;
    min-height: 100vh;
    background-color: var(--navBack);
    border-radius: 20px;
    padding: 30px;
}


.kifpool h2 {
    margin: 30px 0;
    color: var(--text-color);
}


.kifpoolRowBox {
    width: 100%;
    background-color: var(--box-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 20px;
    padding: 8px;
    margin: 20px 0;
    margin-top: 40px;

}


.leftKif a {
    padding: 14px;
    color: #fff;
    border-radius: 15px;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 8px;
    font-weight: 600;
    font-size: 15px;
}


.leftKif a svg {
    width: 25px;
    height: 25px;
    color: #fff;
    fill: #fff;
}


.rightKIf {

    margin-right: 10px;

}

.rightKIf p {
    color: var(--text-color);
    font-size: 14px;
}



.rightKIf h3 {
    font-size: 25px;
    margin: 10px 0;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: start;
}


.rightkifFlexp {
    align-items: center;
    display: flex;
    gap: 12px;
}

.rightkifFlexp p {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;
}



.rightkifFlexp p span:first-child {
    width: 10px;
    height: 10px;
    border-radius: 50%;

}




.tableScrroll4 table {
    width: 100%;


}




.tableScrroll4 table {
    background-color: var(--box-color);
    border-radius: 15px;
    width: 100%;
    padding: 15px;
    border-spacing: 0;
}


.tableScrroll4 tr {
    width: 100%;
    border-bottom: 1px solid var(--grayText);
}


.tableScrroll4 th,
.tableScrroll4 td {

    padding: 20px;
    text-align: center;
    color: var(--text-color);


}


.tableScrroll4 tr td {
    border-bottom: 1px solid var(--lightText);
}


.tableScrroll4 tr:last-child td {
    border-bottom: none;
}


.borderTable {
    background-color: var(--lightBoxColor);
    border-spacing: 0;
    width: 100%;
}


.tableScrroll4 tr:first-child {
    outline: 1px solid var(--lightText);
    border-radius: 15px;
}


.tableScrroll4 th {
    border-spacing: 0;
    background-color: var(--lightBoxColor);
    padding: 20px;
}

.tableScrroll4 th:first-child {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;

}

.tableScrroll4 th:last-child {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;

}



.tableScrroll4 h3 {
    color: var(--text-color);
    margin-top: 80px;
    margin-bottom: 20px;
}







/**********************************************************sendTicket******************************************************/


.sendTicket {
    background-color: var(--navBack);
    width: 100%;
    padding: 40px 30px;
    border-radius: 20px;
}


.sendTicketH1AndBu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}


.sendTicketH1AndBu h2 {
    color: var(--text-color);

}


.sendTicketH1AndBu a {
    color: #fff;
    padding: 15px;
    width: 220px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
}


.sendTicket p {
    color: var(--text-color);
    padding: 10px 0;
}


.createTicket {
    background-color: var(--navBack);
    width: 100%;
    padding: 40px 30px;
    border-radius: 20px;
    margin-top: 15px;
}


.createTicket h3 {
    color: var(--lightText);
    margin-bottom: 50px;
    font-size: 22px;
}


.createTicket h2 {
    color: var(--lightText);
    margin-bottom: 50px;
    font-size: 22px;
}


.moshakhasatInputRow2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 30px;
    margin-bottom: 40px;
}


.sendTExt {
    width: 100%;
    display: flex;
    flex-direction: column;

}


.sendTExt span {
    color: var(--text-color);
    font-size: 15px;
}

.sendTExt textarea {
    width: 100%;
    padding: 15px;
    background-color: var(--box-color);
    border: 1px solid var(--lightText);
    border-radius: 12px;
    color: var(--text-color);
    margin-top: 5px;
    outline: none;
}

.sendTExt input {
    width: 100%;
    padding: 15px;
    background-color: var(--box-color);
    border: 1px solid var(--lightText);
    border-radius: 12px;
    color: var(--text-color);
    margin-top: 5px;
    outline: none;
}

.moshakhsatInput select {
    width: 100%;
    padding: 15px;
    background-color: var(--box-color);
    border: 1px solid var(--lightText);
    border-radius: 12px;
    color: var(--text-color);
    margin-top: 5px;
    outline: none;
}


.darkhastBardasht {
    width: 100%;
    min-height: 100vh;
    padding: 40px 30px;
    background-color: var(--navBack);
    border-radius: 20px;
}


.darkhastBardasht h2 {
    color: var(--text-color);
    margin-bottom: 40px;
}













.ehrazFileFlex {
    display: flex;
    justify-content: space-between;
}

.ehrazInputBox {
    margin: 10px;
}

.ehrazFileBot {
    cursor: pointer;
}

.preview {
    display: block;
    max-width: 100px;
}


.spanImgflex {
    display: flex;
    align-items: end;
    justify-content: space-between;
}




.preview-container {
    display: none;
    padding: 5px;
    background-color: var(--box-color);
    margin-top: -100px;
    border-radius: 8px;
    text-align: center;
    height: 100%;
}





.flexehrazimgs {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


td svg {
    width: 28px;
    height: 28px;
    color: var(--text-color);
    fill: var(--text-color);
}


/********************************************aboutUs*************************************************/


.aboutUs {
    width: 100%;
    padding: 80px;

}


.aboutUs h2 {
    color: var(--lightText);
    margin-top: 50px;
    margin-bottom: 20px;
    font-size: 25px;
}

.aboutUs h3 {
    color: var(--lightText);
    margin-top: 100px;
    margin-bottom: 20px;
    font-size: 20px;
}


.aboutUs p {
    color: var(--text-color);
    line-height: 30px;


}


.aboutUs li {
    color: var(--text-color);
    line-height: 30px;
    padding: 5px;
    margin-right: 13px;


}


@media screen and (max-width:700px) {

    .aboutUs {
        width: 100%;
        padding: 20px;

    }

}


@media screen and (max-width:450px) {

    .aboutUs h2 {
        color: var(--lightText);
        margin-top: 50px;
        margin-bottom: 20px;
        font-size: 20px;
    }

    .aboutUs h3 {
        color: var(--lightText);
        margin-top: 100px;
        margin-bottom: 20px;
        font-size: 17px;
    }


    .aboutUs p {
        color: var(--text-color);
        line-height: 32px;
        font-size: 14px;


    }


    .aboutUs li {
        color: var(--text-color);
        line-height: 32px;
        padding: 5px;
        margin-right: 13px;
        font-size: 14px;


    }


    .leftLOgin {
        margin: 8px;
    }


    .inputBox {
        display: flex;
        justify-content: center;
        flex-direction: column;
        max-width: 450px;
        margin-right: 20px;
        margin-left: 20px;
        margin-bottom: 35px;

    }


    .leftLOgin h2 {
        font-size: 20px;
    }


    .inputBox span {
        color: var(--text-color);
        font-size: 14px;
    }


    .submitLogin input {

        margin: 10px 20px;
        margin-top: 10px;
        font-size: 14px;
    }

}




/*****************************************contactUs********************************************************/


.contactUs {

    width: 100%;
    padding: 100px 10px;
}


.contactUs h2 {
    color: var(--text-color);
    text-align: center;
    margin-bottom: 10px;
    color: var(--lightText);
    font-size: 28px;
}

.contactUs h3 {
    color: var(--text-color);
    text-align: center;
    margin-bottom: 100px;
    font-size: 26px;
}



.tellegramC,
.supportContact {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 60px;
}


.contactUs img {
    width: 300px;
    height: 300px;

}



.textImgFlex {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 10px 40px;
}


.textImgFlex h3 {
    margin-bottom: 0;
    font-size: 18px;
}

@media screen and (max-width:700px) {

    .tellegramC,
    .supportContact {
        flex-direction: column;
    }
}


@media screen and (max-width:450px) {
    .contactUs h2 {
        color: var(--text-color);
        text-align: center;
        margin-bottom: 10px;
        color: var(--lightText);
        font-size: 20px;
    }

    .contactUs h3 {
        color: var(--text-color);
        text-align: center;
        margin-bottom: 100px;
        font-size: 18px;
    }


    .textImgFlex h3 {
        margin-bottom: 0;
        font-size: 16px;
    }
}





/**********************************insideBlos***************************************************************/



.insideBlos {
    width: 100%;
    padding: 100px;
}


.insideBlos h2 {
    color: var(--lightText);
    margin-bottom: 60px;
}


.insideBlos p,
.insideBlos div {
    color: var(--text-color);
    line-height: 30px;
    padding: 15px 0;
}


.insideBlos li {
    color: var(--lightText);
    font-size: 20px;
    margin-right: 15px;
    margin-top: 50px;
}




.dateinsideBlogs {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: 20px;
}


.dateinsideBlogs p {
    color: var(--lightText);
    font-size: 15px;
}




@media screen and (max-width:850px) {
    .insideBlos {
        width: 100%;
        padding: 100px 20px;
    }
}


@media screen and (max-width:450px) {
    .insideBlos h2 {
        color: var(--lightText);
        margin-bottom: 60px;
        font-size: 20px;
    }


    .insideBlos p,
    .insideBlos div {
        color: var(--text-color);
        line-height: 30px;
        padding: 15px 0;
        font-size: 15px;
    }


    .insideBlos li {
        color: var(--lightText);
        font-size: 20px;
        margin-right: 15px;
        margin-top: 50px;
        font-size: 18px;
        font-weight: 600;
    }



}






@media screen and (max-width:1050px) {
    .eccountBoxCol {
        flex: 1;
        width: 100%;
        margin: 0 10px;
    }

    .ecoountBox {
        flex-direction: column;

    }


    .pflexeccontCol {
        margin-right: 0;
    }



    .eccountBoxCol:nth-child(2) .pflexeccontCol {}
}

@media screen and (max-width:500px) {
    .eccountExplnation h2 {
        font-size: 18px;
    }


    .bardhastH1Bu h2 {
        font-size: 17px;
    }

    .bardhastH1Bu a {
        font-size: 14px;
        width: 180px;
    }


    .bardashh3F h3 {
        font-size: 13px;
    }


    .tableScrroll th,
    .tableScrroll td {
        font-size: 10px;
        padding: 10px 9px;
    }


    td svg {
        width: 15px;
        height: 15px;
        margin-top: 5px;
    }

    .eccountBoxCol {
        flex: 1;
        width: 100%;
        margin: 0 10px;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }


    .eccountBoxCol:first-child {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .ecoountBox input {
        width: 17px;
        height: 17px;
        margin: 10px 0 15px 10px;
    }


    .eccountBoxCol:nth-child(2) .pflexeccontCol {
        margin-left: 0;
    }

    .archive input {
        font-size: 14px;
    }

    .eccountExplnation p {
        font-size: 14px;
    }


    .ecoountBox {
        margin-top: 10px;
    }


    .archive {
        margin-top: 10px;
    }


    .pflexeccontCol p {
        font-size: 14px;
    }


    .eccountBoxCol:last-child .pflexeccontCol:last-child {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .eccountBoxCol:last-child .pflexeccontCol:last-child p {
        width: 100%;
    }

    .eccountBoxCol:last-child .pflexeccontCol:last-child p a {
        width: 100%;
        font-size: 14px;
    }

    .rightDashboard {
        flex: 0;
        padding: 0;
    }

    .h2AndArchive a {
        font-size: 14px;
    }

    .eccountExplnation {

        padding: 15px;

    }


    .searchCombo select {
        font-size: 10px;
        padding: 13px 5px;
        flex: 2;
    }


    #serchBarSub svg {
        width: 20px;
        height: 20px;
        color: var(--text-color);
        fill: var(--text-color);
    }

    #textSearch {
        flex: 2;
        border: none;
        outline: none;
        padding: 13px 5px;
        background-color: transparent;
        color: var(--text-color);
        font-size: 10px;
    }

    #serchBarSub {
        flex: 0.3;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .h3flexD h3 {
        font-size: 14px;
    }

    .bardashtSod {

        padding: 15px;
    }

    .kifpool h2 {
        font-size: 18px;
    }


    .ehrazFileFlex span {
        font-size: 14px;
    }

    .ehrazSubmitF input {
        font-size: 14px;
        width: 100%;
    }

    .ehrazSubmitF {
        display: flex;
        align-items: center;
        justify-content: end;
        margin: 25px 15px 100px 15px;
    }

    .tableScrroll4 h3 {
        font-size: 14px;
    }


    .tableScrroll4 th,
    .tableScrroll4 td {
        font-size: 9px;
        padding: 10px 5px;
    }


    .kifpool {
        padding: 15px;
    }

    .darkhastBardasht {
        width: 100%;
        min-height: 100vh;
        padding: 20px 15px;
        background-color: var(--navBack);
        border-radius: 20px;
    }


    .darkhastBardasht h2 {
        font-size: 18px;
        margin-bottom: 60px;
        margin-top: 15px;
    }

    .moshakhsatInput span {
        font-size: 14px;
    }

    .moshakhastSubmitF input {
        font-size: 14px;
        width: 100%;
    }

    .moshakhastSubmitF {

        margin: 40px 0;
    }

    .download h2 {
        font-size: 18px;
    }

    .download {
        padding: 15px;
    }

    .downloadBox p {
        font-size: 15.5px;
    }

    .downloadBox a {
        font-size: 14px;
    }

    .downloadBox img {
        width: 200px;
        height: 180px;
    }


    .ehrazFileFlex {
        gap: 30px;
        margin: 15px;
    }

    .ehraz h2 {
        color: var(--text-color);
        padding: 15px;
        padding-top: 30px;
        padding-bottom: 20px;
        font-size: 18px;
    }

    .ehrazFileBot {
        font-size: 14px;
    }

    .hamkary {
        padding: 15px;
    }

    .hamkary h2 {
        font-size: 18px;
    }

    .referralLink p {
        font-size: 12px;
    }

    .tableScrroll3 h3 {
        font-size: 15px;
    }

    .referral {
        padding: 15px 5px;
    }

    .referralCopy svg {
        width: 22px;
        height: 22px;
    }


    .tableScrroll3 table th,
    .tableScrroll3 table td {
        font-size: 9px;
        padding: 10px 3px;
    }


    .leftKif a {
        font-size: 14px;
    }

    .moshakhasat {
        padding: 15px;
    }

    .moshakhasat h2 {
        font-size: 18px;
    }

    .moshakhasat h3 {
        font-size: 16px;
    }

    .sefaresht {
        padding: 15px;
    }

    .sefareshatH1Bu h2 {
        font-size: 18px;
        margin-top: 20px;
    }

    .tableScrroll2 table th,
    .tableScrroll2 table td {
        font-size: 10px;
        padding: 10px 5px;
    }



    .sendTicket {
        padding: 15px;
    }

    .sendTicketH1AndBu h2 {
        font-size: 17px;
    }

    .createTicket h3 {
        font-size: 17px;
        margin-top: 20px;
    }



    .createTicket {
        padding: 15px;
    }

    .sendTicketH1AndBu a {
        font-size: 14px;
        padding: 15px 5px;
        width: 180px;
    }

    .sendTicket p {
        font-size: 14px;
    }

    .rightticketRowN h3 {
        font-size: 16px;
    }

    .ticketTopFlexh3 a {
        font-size: 14px;
    }


    .rightticketRowN select {
        font-size: 14px;
    }

    .rightticketRowN h3 {
        font-size: 15px;
    }

    .ticketBox {

        padding: 10px;
    }

    .rightticketRowN {
        padding: 20px 15px;
    }

    .topTicketName h2 {
        font-size: 15px;
    }


    .sendResiveText .sendText {
        padding: 12px;
        width: 95%;
    }

    .justResiveText .resive {
        padding: 12px;
        width: 95%;
    }


    .sendTextCombination {
        padding: 0 10px;
    }

    .ticketBox p {
        font-size: 13px;
    }

    .sendTicketA a {
        font-size: 14px;
    }


}


@media screen and (max-width:700px) {
    .kifpoolRowBox {
        flex-direction: column;
        padding: 15px;
    }

    .rightKIf {
        margin-right: 10px;
        width: 100%;
    }

    .leftKif {
        width: 100%;
        margin-top: 20px;
    }
}




@media screen and (max-width:980px) {
    .ticketRowN {
        flex-direction: column;
    }

    .rightticketRowN {
        margin-left: 0;
        margin-bottom: 10px;
        max-height: 90vh;
    }

    .ticketsCol a {
        width: 100%;
    }

    .leftTivketRowN {
        max-height: 90vh;

    }
}



@media screen and (max-width:900px) {


    .moshakhasatInputRow {
        flex-direction: column;
    }

    .referralLinksRow {
        flex-direction: column;
    }


    .downlowdRow {
        flex-direction: column;
    }


    table {
        display: flex;
        justify-content: start;
        align-items: start;
        overflow: auto;
        flex-direction: column;
        padding: 2px;
    }


    .tableScrroll4 table {
        overflow: hidden;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
    }

    .moshakhasatInputRow2 {
        flex-direction: column;
    }


    .ehrazFileFlex {
        flex-direction: column;
    }





    .ehrazInputBox {
        width: 100%;
    }

}



.pardakhtMoNaMo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}



.email-send {
    background-color: var(--box-color);
    border-radius: 12px;
    padding: 50px;
    color: var(--text-color);
    width: 80%;


}

.email-send h2 {
    text-align: center;
    color: var(--green);
    margin-bottom: 30px;
}


.email-send ion-icon {
    font-size: 35px;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
    color: var(--green);
}


.svgFlexMoa {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.email-send svg {
    width: 50px;
    height: 50px;
    color: var(--green);
}

#p-flex {
    display: flex;
    align-items: center;
    justify-content: center;

}


.email-send p {
    text-align: center;
    margin-bottom: 20px;

}




.email-send .flex-ver {
    display: flex;
    align-items: center;
    justify-content: center;
}

.email-send a {
    color: #fff;
    font-weight: 600;
    padding: 10px 40px;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    border-radius: 12px;
    margin-top: 10px;
}







.red2 {
    color: var(--red);
}



@media (max-width:550px) {



    .email-send {
        background-color: var(--box-color);
        border-radius: 12px;
        padding: 50px;
        color: var(--text-color);
        width: 95%;


    }

    .email-send {
        padding: 25px;
    }



    .email-send h2 {
        font-size: 18px;
    }


    .email-send p {
        font-size: 14px;
    }

    .email-send a {
        font-size: 14px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 13px;

    }
}



.dashboardMainPage {
    background-color: var(--navBack);
    width: 100%;
    border-radius: 20px;
    padding: 30px;
    min-height: 100vh;

}


.dashboardMainPage h2 {
    color: var(--lightText);
    margin-top: 20px;
    margin-bottom: 30px;
}


.dashboardMainPage p {
    color: var(--text-color);
    padding: 15px 0;
    line-height: 32px;
}


@media screen and (max-width:500px) {
    .dashboardMainPage {
        padding: 15px;
    }

    .dashboardMainPage h2 {
        font-size: 18px;
    }

    .dashboardMainPage p {
        font-size: 14px;
    }
}



.ehraz p {
    color: var(--text-color);
    padding: 30px 50px;
    padding-bottom: 0;
    line-height: 32px;
}


.ehrazInputBox a {
    width: 100%;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    border-radius: 15px;
    padding: 15px;
}



.wrap {
    display: flex;
    align-items: start;
    justify-content: center;

}



.walletadressTop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: -65px;
}

.WalletAddressFlexT {
    width: 100%;
    padding: 15px;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}


.WalletAddressFlexT p {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    padding: 0 5px;
    word-wrap: break-word;

}


.tetterWindexTexts {
    margin-top: -28px;
    margin-bottom: 30px;
}


.tetterWindexTexts p {
    color: var(--text-color);
    font-size: 14px;
    padding: 5px 0;
    word-wrap: break-word;
}


.tetterWindexTexts span {
    color: var(--lightText);
    padding: 5px;
    font-size: 15px;
    font-weight: 600;
}


@media screen and (max-width:450px) {

    .wrap {
        display: flex;
        align-items: start;
        justify-content: center;
    }

    #myTable {
        width: 100%;
        border-collapse: collapse;
    }

    #myTable th,
    #myTable td {
        width: 100%;
        text-align: center;
    }

    .hidden {
        display: none;
    }

    .wrap button {
        padding: 10px;
        margin: 0 10px;
    }
}



#onclickright,
#onclickleft {
    display: none;
    width: 40px;
    height: 40px;
    outline: none;
    border: none;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    border-radius: 15px;

}


#onclickright svg,
#onclickleft svg {
    width: 20px;
    height: 20px;
    color: #fff;

}




.guideFlex {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 20px 0;
    flex: 1;

}


.ehrazFileFlex4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--box-color);
    padding: 20px;
    border-radius: 14px;
    margin: 0 40px;
    margin-bottom: 80px;

}


.ehraz h3 {
    color: var(--text-color);
    padding: 50px 40px;
    padding-top: 60px;
    padding-bottom: 40px;
}

.guideFlex img {
    width: 200px;
    height: 200px;
}

#marg {
    padding-bottom: 20px;
    margin-bottom: 10px;
}


.guideFlex p {
    padding: 0;
    font-size: 15px;
    width: 400px;

}



/* استایل‌های مخصوص صفحات با عرض کمتر از 450 پیکسل */
@media (max-width: 450px) {


    .plans .box-plan2 {

        max-width: 580px;



    }

    .plans .box-plan3 {
        max-width: 580px;


    }


    .plans .box-plan4 {
        max-width: 580px;


    }

    .plans .box-plan5 {
        max-width: 580px;


    }


    .plans .kind-plans .btn4 {
        font-size: 13px;
        width: 44%;
    }

    .plans .kind-plans .btn5 {
        font-size: 13px;
        width: 44%;
    }


    #onclickright,
    #onclickleft {
        display: flex;
        align-items: center;
        justify-content: center;
        display: block;
        margin-left: -20px;
        z-index: 100;
        margin-top: 18px;
        margin-right: 0;
    }


    #onclickright {
        margin-right: -20px;
        margin-left: 0;
    }

    .wrap {
        display: flex;
        align-items: start;
        justify-content: center;
        flex-direction: row;
        margin: 0;
    }

    .top-table ul li {
        font-size: 14px;
        width: 143px;
        border: none;
        padding: 5px;
    }

    .table ul li {
        font-size: 12px;
        width: 143px;
        border-left: none;
        border-right: none;
        padding: 5px;
    }

    .top-table ul:first-child {
        border-right: none;
        border: none;
    }

    .top-table ul {
        border: none;
    }

    .top-table ul:first-child,
    .table ul:first-child {
        display: block;
        /* اولین ul همیشه نمایش داده می‌شود */
    }

    .top-table ul:not(:first-child),
    .table ul:not(:first-child) {
        display: none;
        /* به طور پیش‌فرض بقیه ul ها مخفی هستند */
    }
}




@media screen and (max-width:900px) {
    .ehrazFileFlex4 {
        flex-direction: column;
    }
}


@media screen and (max-width:500px) {
    .ehrazFileFlex4 {
        margin: 0 15px;
        margin-bottom: 50px;
    }

    .guideFlex p {
        width: 280px;
        font-size: 14px;

    }


    table {

        overflow: hidden;

    }

    .rightkifFlexp {
        align-items: start;
        display: flex;
        gap: 12px;
        flex-direction: column;
        align-self: start;
    }

}

.patTWCon {
    width: 100%;
    min-height: 100vh;
}



.patTWConflex {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}



.insidepatTWCon {
    width: 600px;
    background-color: var(--navBack);
    border-radius: 20px;
    padding: 40px;
}



.inputBoxPay {
    width: 100%;
    margin: 50px 0;
    display: flex;
    flex-direction: column;

}


.inputBoxPay span {
    font-size: 15px;
    color: var(--text-color);
}


.inputBoxPay input {
    border: 1px solid var(--lightText);
    background-color: var(--inputBack);
    outline: none;
    padding: 12px;
    border-radius: 12px;
    color: var(--text-color);
    margin-top: 5px;
}


.submitLoginpaypay {
    display: flex;
    align-items: center;
    justify-content: center;
}

.submitLoginpaypay input {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    font-weight: 600;
    padding: 14px;
    border: none;
    outline: none;
    border-radius: 12px;
}





@media screen and (max-width:660px) {

    .insidepatTWCon {
        width: 330px;
        background-color: var(--navBack);
        border-radius: 20px;
        padding: 15px;
        padding-bottom: 50px;
    }


    .walletadressTop {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-top: -45px;
    }

}


@media screen and (max-width:450px) {
    .tetterWindexTexts p {
        font-size: 13px;
    }

    .inputBoxPay span {
        font-size: 14px;
    }

    .WalletAddressFlexT p {
        font-size: 13px;
    }

    .submitLoginpaypay input {
        font-size: 13px;
    }
}



.parFlex div {
    display: flex;
    justify-content: space-between;
    padding: 14px 8px 0 8px;
    align-items: center;

}



.parFlex div input {

    width: 18px;
    height: 18px;
    border: none;
    outline: none;
}


.cartKif {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    padding-top: 0;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--text-color);
}


.cart-all-box form .cart-left .cart-pay .cartkifRight p {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;

}


.cartKif span {
    font-size: 12px;

    color: var();
}


.cartkifleft {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
}

.cartkifleft input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cartkifleft label {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 25px;
}

.cartkifleft label:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2.5px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.cartkifleft input:checked+label {
    background-color: var(--lightText);
}

.cartkifleft input:checked+label:before {
    transform: translateX(25px);
}




.rowbnavnew {
    display: flex;
    align-items: center;
    justify-content: start;
    margin: 30px 0;
}


.rowbnavnew div {
    display: flex;
    margin: 8px 5px;
    align-items: center;
}


.rowbnavnew div img {
    width: 25px;
    height: 25px;
    margin: 0 5px;

}


.rowbnavnew div p {
    color: var(--text-color);
    font-size: 15px;
}


@media screen and (max-width:1420px) {
    .rightBoNav {
        flex: 2;
    }

    .leftBoNav img {
        width: 400px;
        height: 300px;
        margin-left: 80px;
        margin-right: 50px;
    }
}





@media screen and (max-width:1420px) {
    .leftBoNav img {
        display: none;
    }


    .rightBoNav {
        flex: 2;
        margin-right: 120px;
    }
}



@media screen and (max-width:1050px) {
    .leftBoNav img {
        display: none;
    }


    .rightBoNav {
        flex: 2;
        margin-right: 50px;
    }

    .rowbnavnew {
        display: flex;
        align-items: center;
        justify-content: start;
        flex-wrap: wrap;
    }
}




@media screen and (max-width:450px) {

    .rowbnavnew div img {
        width: 20px;
        height: 20px;
        margin: 0 5px;

    }


    .rowbnavnew div p {
        color: var(--text-color);
        font-size: 13.5px;
    }


    .rightBoNav h2 {
        font-size: 23px;
        text-align: center;
    }
}








.slider {
    position: relative;
    width: 100%;


}


.slider img {}


.myslide {

    display: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

}


.dotsbox {
    position: absolute;
    left: 8%;
    transform: translate(-50%);
    bottom: 20px;
    cursor: pointer;
}

.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 4px solid #fff;
    border-radius: 50%;
    margin: 0 8px;
    cursor: pointer;
    transition: 0.5s;
}



.active,
.dot:hover {
    border-color: var(--green);

}

.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: 0.8
    }

    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: 0.8
    }

    to {
        opacity: 1
    }
}



@-webkit-keyframes posi {
    from {
        left: 25%;
    }

    to {
        left: 15%;
    }
}


@keyframes posi {
    from {
        left: 25%;
    }

    to {
        left: 15%;
    }
}



@media screen and (max-width: 560px) {
    .dot {
        margin: 0;
        width: 8px;
        height: 8px;
        border: 2px solid #fff;

    }



}




@media screen and (max-width:450px) {}



.accountNumbernewResponsive {
    display: none;
    width: 0;
    height: 0;
}


.dowmiconeUpdate svg {
    display: none;
}



@media screen and (max-width:450px) {
    .eccountBoxCol {
        display: none;
    }

    .accountNumbernewResponsive {
        display: block;
        width: auto;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }


    .accountNumbernewResponsive p {
        color: var(--text-color);
        font-size: 14px;
    }

    .eccountBoxCol:first-child {
        display: block;
        flex-direction: row;
        display: flex;
    }


    .eccountBoxCol form {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .dowmiconeUpdate {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dowmiconeUpdate svg {
        display: block;
        width: 22px;
        height: 22px;
        color: var(--text-color);
    }

    .updateFlexAa {
        display: flex;
        align-items: center;
        justify-content: start;
    }

}






.smallTable {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
    direction: rtl;
    padding: 35px 0;

}

.smallTable .tableF {
    border-spacing: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--box-color);
    border-radius: 12px;


}


.smallTable .tableF svg {
    width: 15px;
    height: 15px;
    transition: 0.5s;
}

.smallTable a {
    transition: 0.5s;
    cursor: pointer;
    padding: 8px;
    border: 1px solid var(--lightText);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    width: 50px;
    height: 50px;
    color: var(--text-color);
    text-decoration: none;

}

.for-rad {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.smallTable a:first-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.smallTable a:last-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}


@media screen and (max-width:450px) {
    .smallTable a {
        font-size: 12px;
    }

    .smallTable a {
        padding: 0;
    }
}



.sertificate {
    width: 100%;
    min-height: 100vh;
    padding: 30px;
    background-color: var(--navBack);
    border-radius: 20px;
}

.sertificate h3 {
    color: var(--text-color);
    margin: 60px 0 20px 0;
}


.inBo td a {
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    border-radius: 12px;
    width: 250px;
    margin-right: 38%;


}




.inBo td a svg {
    padding: 0 5px;
    color: #fff;
    width: 40px;
    margin-top: -5px;

}


tr .fontSMall {
    font-size: 16px;
}



.bardhastH1Bu div {
    display: flex;
    align-items: end;
    justify-content: end;
    flex-direction: column;
    gap: 10px;
}


@media screen and (max-width:450px) {
    .inBo td a {
        text-decoration: none;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 11px;
        background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
        border-radius: 12px;
        width: 100%;
        margin-right: 0;
        font-size: 14px;


    }

    .inBo td a svg {
        padding: 0;
        color: #fff;
        width: 40px;
        margin-top: -5px;
        height: 20px;
    }

    tr .fontSMall {
        font-size: 13px;
        padding: 10px;
    }


    .sertificate {
        width: 100%;
        min-height: 100vh;
        padding: 15px;
        background-color: var(--navBack);
        border-radius: 20px;
    }

    .sertificate h3 {
        color: var(--text-color);
        margin: 60px 0 20px 0;
        font-size: 15px;
    }


}



.accountTest {
    width: 100%;
    background-color: var(--navBack);
    border-radius: 20px;
    min-height: 100vh;
    padding: 50px;
}


.accountTest h2 {

    margin-bottom: 60px;
    color: var(--text-color);
}

.accountTest p {
    color: var(--text-color);
    font-size: 17px;
    margin-bottom: 12px;
    color: var(--red);

}

.accountTestFlexN {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
}


.accountTestFlexN div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;

}



.accountTestFlexN div form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}


.accountTestFlexN div a,
.accountTestFlexN div input {
    border: none;
    outline: none;
    width: 100%;
    background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 16px;
    font-size: 16px;
    font-weight: 600;
}

.accountTest h3 {
    color: var(--text-color);
    margin-top: 100px;
    margin-bottom: 30px;
}



.accountTestHistory {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}



.accountTestHistoryFlex {
    width: 100%;
    background-color: var(--box-color);
    border-radius: 15px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}



.accountHistoryPFlex p {
    color: var(--text-color);
    text-align: center;
    margin-bottom: 0;
    padding: 6px;
    font-size: 16px;
}




@media screen and (max-width:850px) {

    .accountHistoryPFlex p {
        font-size: 15px;
    }

    .accountTest {
        padding: 30px;
    }

}






@media screen and (max-width:650px) {

    .accountTestFlexN div {
        flex-direction: column;
    }

    .accountTestHistoryFlex {
        flex-direction: column;
        width: 100%;
    }

    .accountHistoryPFlex {
        display: flex;
        width: 100%;
        justify-content: start;

    }


    .accountHistoryPFlex p {
        padding: 6px 3px;
    }


}



@media screen and (max-width:450px) {
    .accountTest {
        padding: 15px;
    }


    .accountTest h2 {
        font-size: 18px;
        margin-top: 10px;
    }


    .accountTest p {
        font-size: 14px;
    }

    .accountTestFlexN div a,
    .accountTestFlexN div input {
        border: none;
        outline: none;
        width: 100%;
        background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        padding: 16px;
        font-size: 14px;
        font-weight: 600;
    }

    .accountTestFlexN div {
        gap: 10px;
    }


    .accountTest h3 {
        font-size: 16px;
    }
}




.darkhastNew {
    width: 100%;
    min-height: 100vh;
    background-color: var(--navBack);
    border-radius: 20px;
    padding: 30px;
}



.darkhastNew h3 {
    color: var(--text-color);
    margin-top: 80px;
    margin-bottom: 15px;
}


#SDh2 {
    color: var(--text-color);
    margin-bottom: 70px;
    margin-top: 15px;
}


@media screen and (max-width:450px) {
    .darkhastNew {
        padding: 15px;
    }

    .darkhastNew h3 {
        font-size: 16px;
    }


    #SDh2 {
        font-size: 18px;
    }
}





.profitBarP {
    margin-bottom: 70px;

}

.profitBarP p {
    color: var(--text-color);
    margin: 15px 0;
    font-size: 15px;
}





@media screen and (max-width:450px) {

    .profitBarP p {
        font-size: 14px;
    }

}




.barresiListrow {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 6px;
    background-color: var(--box-color);
    border-radius: 12px;
    margin-bottom: 20px;
    margin-top: 70px;

}

.barresiListrowBox {
    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    padding: 16px;

}


.barresiListrowBox p {
    color: var(--grayText);
    font-size: 16px;

}

.barresiListrowBox p:last-child {
    font-size: 16px;
    color: var(--text-color);

}

.barresiListrowTittle h2 {
    margin-top: 80px;
    margin-bottom: 30px;
    color: var(--text-color);
    font-size: 22px;
}


@media screen and (max-width:450px) {
    .barresiListrow {
        justify-content: center;
    }

    .barresiListrowBox p {
        color: var(--grayText);
        font-size: 14px;

    }

    .barresiListrowBox p:last-child {
        font-size: 15px;
        color: var(--text-color);

    }

    .barresiListrowTittle h2 {
        font-size: 17px;
    }

}



.platformKindSelectBoRow {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: flex-start;
    max-width: 300px;
    background-color: var(--lightBoxColor);
    border-radius: 20px;
    padding: 6px;
    margin-bottom: 25px;
}


.platformKindSelectBoRow button#metatrader,
.platformKindSelectBoRow button#matchtrader {
    color: var(--text-color);
    background-color: transparent;
    border-radius: 12px;
    padding: 0;
    height: 45px;
    width: 130px;
    outline: none;
    border: none;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    text-align: center;
}



.platformKindSelectBoRow button#matchtrader a {
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1000;
}


@media (max-width: 450px) {

    .platformKindSelectBoRow button#metatrader,
    .platformKindSelectBoRow button#matchtrader {
        font-size: 13px;
        width: 44%;
    }
}





.lineBar {
    height: 18px;
    background: #297F51;

    border-radius: 2px;
    width: 100%;
    flex: 5;



}

.strLineText {
    flex: 1;
    text-align: center;
}


.insideLineBar {
    direction: ltr;
}

.linePer {
    height: 18px;
    background: #1BE294;
    border-radius: 2px;
    position: relative;




}

.chart-container {
    width: 100%;
    max-width: 800px;
    background: var(--box-color);
    border-radius: 8px;
    display: flex;
    padding-right: 18px;
    align-items: center;
    justify-content: center;

}


#balanceChart {
    background-color: var(--box-color) !important;
    /* رنگ پس‌زمینه‌ی canvas */
}

.accountAnalysisT {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
    margin-top: 10px;
}

.accountAnalysisInfo {
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    flex: 1;
    background-color: var(--box-color);
    padding: 16px;
    border-radius: 12px;
}

.accountAnalysisFirst {
    flex: 2;
    width: 100%;
    background-color: var(--box-color);
    padding: 16px;
    border-radius: 12px;

}

.accountAnalysisSec {
    flex: 2;
    width: 100%;
    background-color: var(--box-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.accountAnalysisInfoPText {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;

}

.accountAnalysisInfoPText p {
    color: var(--text-color);
    padding: 13px 0;
    color: var(--grayText);
    font-size: 16px;

}

.accountAnalysisInfoPText p:last-child {
    color: var(--text-color);
    font-size: 18px;
    font-weight: 600;

}

.accountAnalysisFirst .strLineFlex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 25px 0;
}

.accountAnalysisFirst .strLineFlex p {
    color: var(--text-color);
}

.chart-container2 {
    width: 80%;
    flex: 1.9;
    background: var(--box-color);
    padding: 20px;
    border-radius: 8px;
    color: var(--text-color);
    text-align: center;
}

.chart-container2 h3 {
    text-align: start;
    color: var(--text-color);
    font-size: 20px;
    margin: 12px 0;
    margin-top: 60px;
}

.chart-container2 h3:first-child {
    margin-top: 0;
}

.bullet-chart {
    position: relative;
    height: 30px;
    background: #333;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
    direction: ltr;
    /* جهت چارت از چپ به راست */
}

.bullet-range {
    position: absolute;
    height: 100%;
    left: 0;
    /* شروع از سمت چپ */
}

/* برای دراودان و دراودان کل: سبز (خوب) به قرمز (بد) */
.bullet-chart.drawdown .bullet-range.good,
.bullet-chart.total-drawdown .bullet-range.good {
    width: 33%;
    background: #120c30;
    /* سرمه‌ای تیره برای مقدار کم (خوب) */
}

body.dark-theme .bullet-chart.drawdown .bullet-range.good,
body.dark-theme .bullet-chart.total-drawdown .bullet-range.good{
     background: #b3b3b3;
}

.bullet-chart.drawdown .bullet-range.medium,
.bullet-chart.total-drawdown .bullet-range.medium {
    width: 33%;
    left: 33%;
    background: #201554;
    /* سرمه‌ای متوسط */
}

body.dark-theme .bullet-chart.drawdown .bullet-range.medium,
body.dark-theme .bullet-chart.total-drawdown .bullet-range.medium {
    width: 33%;
    left: 33%;
    background: #cccccc;
    /* سرمه‌ای متوسط */
}



.bullet-chart.drawdown .bullet-range.bad,
.bullet-chart.total-drawdown .bullet-range.bad {
    width: 34%;
    left: 66%;
    background: #2f2077;
    /* سرمه‌ای روشن برای مقدار زیاد (بد) */
}

body.dark-theme .bullet-chart.drawdown .bullet-range.bad,
body.dark-theme .bullet-chart.total-drawdown .bullet-range.bad {
 
    background: #dcdcdc;
    /* سرمه‌ای روشن برای مقدار زیاد (بد) */
}

/* برای تارگت سود: قرمز (بد) به سبز (خوب) */
.bullet-chart.target-profit .bullet-range.bad {
    width: 33%;
    background: #120c30;
    /* سرمه‌ای تیره برای مقدار کم (بد) */
}

body.dark-theme .bullet-chart.target-profit .bullet-range.bad {

 background: #b3b3b3;
    /* سرمه‌ای تیره برای مقدار کم (بد) */
}

.bullet-chart.target-profit .bullet-range.medium {
    width: 33%;
    left: 33%;
    background: #201554;
    /* سرمه‌ای متوسط */
}

body.dark-theme .bullet-chart.target-profit .bullet-range.medium {
  
    background: #cccccc;
    /* سرمه‌ای متوسط */
}

.bullet-chart.target-profit .bullet-range.good {
    width: 34%;
    left: 66%;
    background: #2f2077;
    /* سرمه‌ای روشن برای مقدار زیاد (خوب) */
}

body.dark-theme .bullet-chart.target-profit .bullet-range.good {
   
    background: #dcdcdc;
    /* سرمه‌ای روشن برای مقدار زیاد (خوب) */
}


.bullet-actual {
    position: absolute;
    height: 60%;
    top: 20%;
    left: 0;
    /* شروع از سمت چپ */
    opacity: 0.8;
    border-radius: 2px;
}

#profit-actual {
    background: #26A69A;
}

#drawdown-actual {
    background: #F72C6D;
}

#total-drawdown-actual {
    background: #F72C6D;
    /* قرمز مرجانی برای دراودان کل */
}

.bullet-target {
    position: absolute;
    width: 2px;
    height: 100%;
    background: #6D52F4;
    /* نارنجی پررنگ برای تارگت */
}

.labels {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
    direction: rtl;
    /* متن‌ها همچنان راست‌چین */
}

.colFlexAnalysis {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex: 1;
    gap: 10px;
}

.eightyRolaw {
    background-color: var(--box-color);
    padding: 16px;
    border-radius: 12px;
    flex: 1;
    width: 100%;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.eightyRolaw p {

    color: var(--text-color);
    font-size: 18px;

}


 .row5 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: var(--box-color);
    border-radius: 12px;
    margin-top: 20px;
}

 .row5 h2 {
    
    color: var(--text-color);
    font-size: 22px;
    text-align: start;
    width: 100%;
    margin-bottom: 0;
    margin-top: 0;
}

 .row5 table {
    width: 100%;
    border-spacing: 0;
    margin-bottom: 20px;


}

 .row5 table th,
 .row5 table td {
    
    padding: 10px 8px;
  color: var(--text-color);
  text-align: center;
  background-color: var(--tableBack);
  font-size: 14px;
  border-bottom: 1px solid var(--dark-text);
  white-space: nowrap;


}

 .row5 table th{
    color: var(--grayText);
    border-top: 1px solid var(--dark-text);
 }


.smallTable2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
    direction: rtl;

}

.smallTable2 .tableF2 {
    border-spacing: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--tableBack);
    border-radius: 12px;


}


.smallTable2 .tableF2 svg {
    width: 15px;
    height: 15px;
    transition: 0.5s;
}

.smallTable2 a {
    transition: 0.5s;
    cursor: pointer;
    padding: 8px;
    border: 1px solid var(--dark-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    width: 50px;
    height: 50px;
    color: var(--text-color);
    text-decoration: none;

}

.for-rad {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.smallTable2 a:first-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.smallTable2 a:last-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.rizMoamelatFlex{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px;
}


.smallBoDown a , .smallBoDown button{

width: 130px;
  background: linear-gradient(45deg, var(--light-pueple), var(--dark-purple));
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  font-weight: 600;
  color: #fff;
  border-radius: 15px;
  font-size: 16px;
  cursor: pointer;

}

.lineBar{
    background: var(--navBack);
}

body.dark-theme .row5 table th,body.dark-theme .row5 table td{
    background-color: var(--navBack);
    border-bottom:1px solid var(--dark-gray);

}

body.dark-theme .row5 table th{
     border-top:1px solid var(--dark-gray);
}

body.dark-theme .smallTable2 a{
 background-color: var(--navBack);
    border:1px solid var(--dark-gray);

}

@media screen and (max-width:1050px) {
     .row5 table {
    display: flex;
    justify-content: start;
    align-items: start;
    overflow: auto;
    flex-direction: column;
  }
}


@media screen and (max-width:850px){
.accountAnalysisT{
    flex-direction: column;

}

.chart-container2 {
    width: 100%;
}


.barresiListrow{
    flex-direction: column;
    justify-content: start;
    align-items: start;
}

.barresiListrowBox{
    flex-direction: row;
}
}

@media screen and (max-width:450px) {
    .smallTable2 a {
        font-size: 12px;
    }

    .smallTable2 a {
        padding: 0;
    }

    .accountAnalysisFirst .strLineFlex p{
        font-size: 13px;
    }

    .accountAnalysisFirst{
        padding: 8px 12px;
    }

    .chart-container{
        padding-right: 0;
    }

    #balanceChart{
        width: 100%;
        height: 100%;
    }

    .accountAnalysisInfoPText p{
        font-size: 14px;
    }

    .barresiListrowBox{
        width: 100%;
        justify-content: space-between;
    }

    .accountAnalysisFirst .strLineFlex{
        gap: 4px;
    }


    .chart-container2 h3{
        font-size: 16px;
    }

    .labels {
        gap: 6px;
    }

    .labels span{
        font-size: 13px;
    }
    .chart-container2{
        padding: 14px;
    }

    .eightyRolaw{
        padding: 14px;
    }

    .row5 h2{
        font-size: 17px;
    }

    .smallBoDown a, .smallBoDown button{
        font-size: 14px;
    }

    .rizMoamelatFlex{
        padding: 14px;
    }


    
 .row5 table th,
 .row5 table td{
    font-size: 14px;
 }

 .smallTable2 a{
    padding: 0;
    font-size: 12px;
 }

 .smallTable2 a{
    width: 45px;
    height: 45px;
 }
}