@font-face {
    font-family: PayavaSansWeb;
    font-style: normal;
    font-weight: normal;
    src: url('font/eot/IRANSansWeb.eot');
    src: url('font/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('font/woff2/IRANSansWeb.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('font/woff/IRANSansWeb.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('font/ttf/IRANSansWeb.ttf') format('truetype');
}

@font-face {
    font-family: PayavaSansWeb;
    font-style: normal;
    font-weight: bold;
    src: url('font/eot/IRANSansWeb_Bold.eot');
    src: url('font/eot/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('font/woff2/IRANSansWeb_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('font/woff/IRANSansWeb_Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('font/ttf/IRANSansWeb_Bold.ttf') format('truetype');
}

@font-face {
    font-family: PayavaSansWeb;
    font-style: normal;
    font-weight: 500;
    src: url('font/eot/IRANSansWeb_Medium.eot');
    src: url('font/eot/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('font/woff2/IRANSansWeb_Medium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('font/woff/IRANSansWeb_Medium.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('font/ttf/IRANSansWeb_Medium.ttf') format('truetype');
}

@font-face {
    font-family: PayavaSansWeb;
    font-style: normal;
    font-weight: 300;
    src: url('font/eot/IRANSansWeb_Light.eot');
    src: url('font/eot/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('font/woff2/IRANSansWeb_Light.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('font/woff/IRANSansWeb_Light.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('font/ttf/IRANSansWeb_Light.ttf') format('truetype');
}

@font-face {
    font-family: PayavaSansWeb;
    font-style: normal;
    font-weight: 200;
    src: url('font/eot/IRANSansWeb_UltraLight.eot');
    src: url('font/eot/IRANSansWeb_UltraLight.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('font/woff2/IRANSansWeb_UltraLight.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('font/woff/IRANSansWeb_UltraLight.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('font/ttf/IRANSansWeb_UltraLight.ttf') format('truetype');
}


/* fallback */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('font/materialicon.woff2') format('woff2');
}
[class^="icon-"]:before, [class*=" icon-"]:before {
    width: 100%;
    margin: 0;
}
main {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}
:root {
    --animate-duration: 0.7s;
    --animate-delay: 0.7s;
    --animate-repeat: 1;
    --heightmenu: 450px;
    --heightmenutag: 55.44px;
    --weightmenutag: 13rem;
}

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

* {
    margin: 0;
    padding: 0;
}

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

html {
    font-size: 50%;
}

body {
    font-family: PayavaSansWeb, sans-serif;
    direction: rtl;
    position: relative;
    min-width: 1024px;
}
.btnc {
    background: #3c9042;
    color: #fff !important;
    padding: 5px;
    border:none !important;

}

.mg_w {
    margin: 0 7vw;
    flex: 0 0 calc(100% - 14vw);
    width: calc(100% - 14vw) !important;
}
.mag {
    background: #9a497c;
    border-radius: 15px;
    padding: 10px 5px;
    position: absolute;
    bottom: 8px;
    transform: translateX(-128px);
}
.fixed2 .mag
{
    display:none;
}
.alert-shop {
    width: calc(100% - 10px);
    position: relative;
    text-align: center;
    direction: rtl;
    padding: 20px;
    margin: 10px 5px;
    background: #dfe051;
    color: #b30000;
    font-size: 1.5rem;
}
.preicon {
    color: #09c00d;
    position: absolute;
    left: 0;
}

#preloader {
    position: relative;
    top: 0;
    left: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    /*background:transparent url('img/base/icon-loader.png') center center no-repeat;*/
    background-size: auto;
}

#loader-spin {
    display: block;
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    border-bottom-color: #1a171a;
    border-right-color: #1a171a;
    border-left-color: #1a171a;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    animation-direction: reverse;
}

    #loader-spin:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 2px solid transparent;
        border-top-color: #80b38d;
        border-left-color: #80b38d;
        -webkit-animation: spin 3s linear infinite;
        animation: spin 5s cubic-bezier(0.54, 2.59, 0.33, -1.46) infinite;
    }

    #loader-spin:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 2px solid transparent;
        border-top-color: #1a171a;
        border-right-color: #1a171a;
        border-left-color: #1a171a;
        -webkit-animation: spin 1.5s linear infinite;
        animation: spin 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
    }



.resize {
    transition: all 0.2s ease-out;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
}



.loader {
    background: #fff var(--loader-url) no-repeat center center;
    height: 100%;
    width: 100%;
    left: 0;
}

.contain {
    background-size: inherit;
    max-height: none;
    position: absolute;
    float: none;
    clear: none;
    top: 0;
    background-color: rgba(255, 255, 255, 0.42);
    z-index: 1;
}

.containFit {
    background-size: contain;
}
input, textarea, button, h1, h2, h3 {
    font-family: PayavaSansWeb;
    outline: none;
}
/* Utilities */
ul {
    list-style-type: none;
}

a {
    text-decoration: none;
    color: #333;
}

/* Header */

#header {
    z-index: 234;
    position: relative;
    width: 100%;
    top: 0;
}

    #header.fixed2 {
        position: fixed;
    }
        #header.fixed2 .header__content-logo  img:first-child {
            display: none;
        }

        #header.fixed2 .header__content-logo img.logoen {
            display: block;
            position: relative;
        }
#selectedssearch {
    max-width: 150px;
    min-width: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    #selectedssearch span {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
/* Header Banner */
.header__banner {
    height: 13rem;
    background: #333;
    /* is it true if i'm set direction to ltr for correct move slider (left to right move) */
    /* direction: ltr; */
}

#mask {
    background-color: rgba(0, 0, 0, 0.42);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 100000;
    color: #fff;
    font-size: 3rem;
    text-align: center;
    padding-top: 100px;
}

#loader {
    z-index: 100001;
    text-align: center;
    position: absolute;
    padding: 10px;
    background: #fff;
    display: none;
}

#loader-spam {
    text-align: center;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    position: absolute;
    /* display: none; */
    padding: 10px;
    border-radius: 100%;
    left: 50px;
    bottom: 0;
    display: none;
}

.preloader {
    position: relative;
    top: 0;
    left: 0;
    margin: auto;
    width: 130px;
    height: 130px;
    background: transparent url(img/base/icon-loader.png) center center no-repeat;
    background-size: auto;
    filter: grayscale(1);
    opacity: 0.2;
}

.loader-spin {
    display: block;
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    border-bottom-color: #1a171a;
    border-right-color: #1a171a;
    border-left-color: #1a171a;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 5s linear infinite;
    animation-direction: reverse;
}

    .loader-spin:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 2px solid transparent;
        border-top-color: #80b38d;
        border-left-color: #80b38d;
        -webkit-animation: spin 5s ease-in-out infinite;
        animation: spin 5s ease-in-out infinite;
    }

    .loader-spin:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 2px solid transparent;
        border-top-color: #1a171a;
        border-right-color: #1a171a;
        border-left-color: #1a171a;
        -webkit-animation: spin 10s ease-in-out infinite;
        animation: spin 10s ease-in-out infinite;
    }

#fram_wrap_content {
    width: 100%;
    display: block;
    border: 0;
    margin: 0;
    padding: 0;
    height: auto;
    z-index: 100001;
    position: fixed;
    text-align: center;
    top: 3rem;
}

.card-1 {
    -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
    -ms-box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
    transition: all 0.2s ease-in-out;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
}

    .card-1:hover {
        -webkit-box-shadow: 0 3px 5px 0 rgba(0,0,0,.3);
        -ms-box-shadow: 0 3px 5px 0 rgba(0,0,0,.3);
        box-shadow: 0 3px 5px 0 rgba(0,0,0,.3);
        z-index: 5;
    }

.card-2 {
    -webkit-box-shadow: 0 1px 5px 1px rgba(0,0,0,.1);
    -ms-box-shadow: 0 1px 5px 1px rgba(0,0,0,.1);
    box-shadow: 0 1px 5px 1px rgba(0,0,0,.1);
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
#contact .inner .c-contact {
    flex-direction: column;
    display: flex;
    gap: 20px;
}
.c-contact {
    display: flex;
    justify-content: space-between;
}
    .c-contact > li {
        flex: 0 0 48%;
        display: flex;
        flex-direction: column;
    }
.contactus{
    display:flex;
}
    #contact .inner p:first-child {
        flex: 0 0 calc(90% - 30px);
    }

    #contact .inner p {
        border: 1px solid #7c9a49;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        background: #eff3e9;
        display: flex;
        overflow: hidden;
        align-items: center;
        flex: 0 0 calc(50% - 120px);
        padding: 10px 0px;
        justify-content: center;
    }

        #contact .inner p:not(:first-child) span {
            width: 150px;
        }

        #contact .inner p a {
            width: 150px;
            text-align: center;
        }

        #contact .inner p i {
            border-radius: 50%;
            color: #476e2d;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 5px;
        }



.pnlButton {
    display: flex;
    justify-content: center;
}


.f_1 {
    flex: 1 1 auto;
}

.w_100 {
    width: 100%;
}















   










.board_con {
    height: 70px;
}

    .board_con img {
        height: 100%;
    }

.holderheader._circle_right {
    flex-direction: row-reverse;
}

._circle_right > ul {
    right: -50px;
    top: 4px;
    background: #fff;
    border: 1px solid #000;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    padding: 5px;
    width: 162px;
    height: 162px;
    position: absolute;
}

._circle_right .li__container > ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

    ._circle_right .li__container > ul li {
        margin: unset;
    }




.search__grouping {
    position: absolute;
    top: 0;
    right: 4.5rem;
    display: flex;
    display: none;
    align-items: center;
    height: 100%;
    border-left: 1px solid rgb(153, 153, 153);
}
.leftbar {
    display: flex;
/*    gap: 50px;   */ 
}
    .leftbar > li > a {
        color: #fff;
        font-size: 1.5rem;
        font-weight: 500;
    }




.hide {
    background-color: transparent;
}



.container__inner {
    display: flex;
    flex: 1 1 100%;
}

    .container__inner ul {
        background: rgb(242, 242, 242);
        /*flex: 0 0 20%;
    padding: .5rem 2.5rem;*/
        padding: 0.5rem 2.5rem .5rem 10rem;
        margin-top: -4rem;
    }


        .container__inner ul li {
            margin-bottom: 1.5rem;
        }

.spam {
    max-height: 45.6rem;
    flex: 0 0 25rem;
    z-index: -1;
    position: relative;
}

.container__inner-items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: hidden;
    flex: 1;
    justify-content: center;
    gap:30px;
    background: #fff;
}
.green-shadow {
    position: absolute;
    z-index: 5;
    bottom: 0;
    left: 1.5%;
    width: 97%;
    height: 15px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    box-shadow: 10px -20px 11px -17px rgba(124,154,73,0.7) inset;
}


.container__inner-item1 {
    flex: 0 0 100%;
    width: 100%;
}



.container__inner-item1 .swiper-container {
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
}


   
        .container__inner-box.Landing {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
        }
.topbrands a {
    width: 20%;
    display: flex;
    justify-content: center;
}

.topbrands .container__inner-box {
    flex-grow: 0;
}
.container__inner-box.topvoltage {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}
.topvoltage a {
    width: 24%;
}
    .topvoltage a img {
        width: 100%;
    }
    .box-img {
        width: 100%;
        height: 100%;
        display: block;
    }

.container__special-sell {
    margin-top: 1rem;
    height: auto;
}
    .img_specific {
        flex: 1 1 auto;
        display: block;
        position: relative;
        height: 250px;
    }
    .img_specific img {
        height: 100%;
    }
.swiper__general {
    width: 100%;
    height: 100%;
    background: #fff;
}




  
@media only screen and (max-width: 85em) {
    .pro__text {
        font-size: 1.15rem;
    }
    .notivt {
        font-size: 1.3rem;
    }
}
    pro__model {
        font-size: 1.4rem;
        padding: .5rem;
        margin: 0;
    }

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



    .old--price {
        text-decoration: line-through;
        float: right;
        color: #777474;
    }

.pishnahad--percent {
    background-color: #f23636;
    color: #fff;
    float: right;
    position: relative;
    font-size: .9em;
    font-weight: 500;
    -webkit-border-radius: 50%;
    -moz-border-radius: 20px;
    border-radius: 50%;
    width: 32px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 8px;
}

    .old__price {
        text-decoration: line-through;
        color: #8a8a8a;
    }

    .pishnahad__discount {
    }

    .pishnahad__percent {
        background: #f23636;
        padding: 5px;
        width: auto;
        flex: 0 0 auto;
        color: #fff;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    .swiper-slide div img {
        height: 150px;
        margin: 5px 0;
    }


    

    .pro1__right {
        flex: 0 0 100%;
        margin-left: 1rem;
        overflow: hidden;
    }

   

    .swiper__container-general {
    }

    .banner__special {
        margin-top: 1rem;
        height: auto;
    }

    .swiper__header-special {
        height: auto;
    }

    .option__icon i {
        font-size: 3.5rem;
        color: saddlebrown;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    .option__icon-android {
        margin-left: .5rem;
    }

        .option__boxdesc a {
            color: deepskyblue;
        }












  
    /*a:not(:last-of-type) {
    margin-left: 1rem;
}
*/
    .btn i {
        display: flex;
        align-items: center;
        margin-left: .7rem;
    }

    .btn__android {
        background: #93cb52;
    }

    .btn__apple {
        background: grey;
    }
        .c-navi-categories__overlay {
            position: fixed;
            right: 0;
            height: 100%;
            width: 100%;
            top: 0;
            bottom: 0;
            content: "";
            background: rgb(57 58 57 / 57%);
            opacity: 0;
            z-index: 233;
            -webkit-transition: opacity .2s cubic-bezier(.215,.61,.355,1) .1s;
            transition: opacity .2s cubic-bezier(.215,.61,.355,1) .1s;
            pointer-events: none;
        }

    #header.fixed2 .header__banner {
        height: 0;
        overflow: hidden;
    }

  


    .loading {
        background-position: center center;
        width: 100%;
        height: 100%;
        position: absolute;
        vertical-align: middle;
        text-align: center;
        background-image: url(img/base/loading.gif);
        background-repeat: no-repeat;
        background-color: #fff;
        z-index: 1;
        display: none;
    }

 

   
    /*Confirm Modal*/
    #confirm {
        display: none;
    }

    /* Overlay */
    #confirm-overlay {
        background-color: #000000;
        cursor: wait;
    }

    /* Container */
    #confirm-container {
        height: 140px;
        width: 420px;
        text-align: left;
        border: 2px solid #336699;
        background: #fff url(img/base/info.png) 5% 40% no-repeat;
    }

        #confirm-container .header {
            height: 30px;
            line-height: 30px;
            width: 100%;
            direction: rtl;
            text-align: right;
            background: url(img/base/header.gif) repeat-x;
            color: #FFFFFF;
            text-indent: 25px;
            font-size: large;
        }

            #confirm-container .header span {
                padding-left: 8px;
            }

        #confirm-container .message {
            color: #333;
            direction: rtl;
            text-align: right;
            font-size: 14px;
            margin: 0;
            padding: 12px 4px 12px 8px;
        }

        #confirm-container .buttons {
            line-height: 26px;
            width: 100%;
            float: right;
            padding: 10px 8px 0;
            display: flex;
            justify-content: space-around;
        }

            #confirm-container .buttons div {
                float: right;
                margin-left: 4px;
                width: 70px;
                height: 26px;
                color: #666;
                font-weight: normal;
                text-align: center;
                background: url(img/base/button.gif) repeat-x;
                border: 1px solid #bbb;
                cursor: pointer;
                font-size: large;
            }

        #confirm-container a.modal-close,
        #confirm-container a.modal-close:link,
        #confirm-container a.modal-close:active,
        #confirm-container a.modal-close:visited {
            text-decoration: none;
            font-weight: bold;
            position: absolute;
            right: 10px;
            top: 2px;
            color: #fff;
        }

            #confirm-container a.modal-close:hover {
                color: #ccc;
            }



.footer__middle__second {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background: #f9f9f9;
    padding: 20px 10px;
    margin: 0.7em 2vw;
}

    .footermap {
        display: flex;
        flex: 0 0 40%;
        justify-content: center;
        margin-top: -25px;
    }

    .footertext .companyname {
        padding: 0 20px 0 20px;
        background: #162345;
        font-size: 2.5rem;
        color: #fff;
        letter-spacing: 7px;
        height: 50px;
        text-align: center;
        margin: 0;
        width: 100%;
        margin-bottom: 20px;
    }
.companyname span {
    width: 100%;
}
.companyname:before {
    content: '';
    width: 0;
    height: 0;
    border-top: 50px solid #162345;
    border-right: 50px solid transparent;
    right: -50px;
    position: absolute;
}
.companyname:after {
    content: '';
    width: 0;
    height: 0;
    border-top: 50px solid #162345;
    border-left: 50px solid transparent;
    left: -50px;
    position: absolute;
}
    .secondfoot.socialpart > div {
        gap: 10px;
        width: 92%;
    }

    .AddressHeader {
        display: flex;
        justify-content: space-between;
        flex: 0 0 auto;
        font-size: 1.5rem;
    }

    .support {
        font-size: 1.4rem;
    }

    .AddressHeader > span {
        display: flex;
        justify-content: center;
        font-weight: 500;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        padding: 5px 0;
        background: #7c9a49;
        color: #fff;
        width: 100%;
    }

    .telbox {
        padding: 5px;
        width: 100%;
        margin: 5px;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }

    .telul > li {
        display: flex;
        flex-direction: row;
    }

    .greenboxfooter {
        margin: 5px 0;
        background: #eff3e9;
        display: flex;
        overflow: hidden;
        flex-direction: column;
        align-items: center;
        padding: 7px 5px;
        justify-content: flex-start;
        font-weight: 400;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }
    .footertext > a {
        flex: 1 1 auto;
        margin-top: 20px;
        font-size: 1.5rem;
    }



    .c-contact span {
        font-size: 1.4rem;
    }

    .footertext.half_item > div {
        flex: 1 1 50%;
        margin-top: 20px;
        font-size: 1.5rem;
    }

    .footertext.half_item > a {
        flex: 1 1 50%;
        margin-top: 20px;
        font-size: 1.5rem;
    }

    .totop {
        right: 10px;
        bottom: 10px;
        position: absolute;
        z-index: 99;
        background: url(img/base/totop.png) no-repeat;
        width: 42px;
        height: 42px;
        cursor: pointer;
    }

        .totop button {
            width: 100%;
            height: 100%;
            background: transparent;
            border: 0;
        }

    .margin__bot {
        margin-bottom: 20px;
    }

    .margin__top {
        margin-top: 20px;
    }


   



    .hidden {
        display: none !important;
    }

    .hidden2 {
        display: none !important;
    }

    .baloon__icon {
        border: none;
        position: absolute;
        width: 50px;
        right: -30px;
        top: 0;
        height: 100%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #1b8cba;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        transition: all 0.3s ease-out;
    }

    .baloon:before {
        position: absolute;
        color: #fff;
        font-size: 2rem;
        height: 30px;
        width: 30px;
        left: -45px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #1b8cba;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        transition: all 0.3s ease-out;
    }

    .baloon:after {
        content: '';
        border-bottom: 5px solid #1b8cba;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        position: absolute;
        bottom: -10px;
        left: -29px;
        transition: all 0.3s ease-out;
    }

    .baloon.icon-green:after {
        border-bottom: 5px solid #86a32f;
    }

    .baloon.icon-red:after {
        border-bottom: 5px solid #b61721;
    }

    .baloon:hover:before {
        height: 50px;
        width: 50px;
        left: -55px;
        font-size: 2.5rem;
        background: #20a9e1;
    }

    .baloon:hover:after {
        bottom: -19px;
        border-bottom-color: #20a9e1;
    }

    .baloon.icon-red:hover:after {
        border-bottom-color: #e41d29;
    }

    .baloon.icon-green:hover:after {
        border-bottom-color: #a4c73a;
    }

    .baloon i:after {
        content: '';
        position: absolute;
        width: 20px;
        height: 10px;
        border-top-left-radius: 110px;
        border-top-right-radius: 110px;
        border: 1px solid gray;
        border-bottom: 0;
        bottom: -16px;
        left: -30px;
        transform: rotate( 45deg );
        transition: all 0.3s ease-out;
    }

    .baloon:hover i:after {
        bottom: -26px;
        border-color: #20a9e1;
    }

    .icon-green:before {
        background: #86a32f;
    }

    .icon-green:hover:before {
        background: #a4c73a;
    }

    .icon-red:before {
        background: #b61721;
    }

    .icon-red:hover:before {
        background: #e41d29;
    }
   

    .parag {
        height: 500px;
        width: calc(100% - 14vw);
        margin: 20px 7vw;
        position: relative;
        float: none;
        padding: 40px;
        background: #d5eadf;
        text-align: right;
        direction: rtl;
        font-size: 1.5rem;
        font-weight: 400;
    }

        .parag .message {
            font-size: 1.5rem;
            font-weight: 500;
        }

    .gotohome {
        cursor: pointer;
        text-align: center;
        padding: 20px;
        margin: 10px auto;
        float: none;
        background: #acd79a;
        width: 100%;
        float: right;
        position: relative
    }

    .qLink {
        background: #f3f3f3;
        text-align: left;
        width: calc(100% - 10px);
        float: none;
        display: block;
        padding: 5px;
        margin: 5px auto;
        text-decoration: underline;
        font-size: 1.2rem;
    }

    .copyb {
        cursor: pointer;
        text-align: center;
        padding: 5px;
        margin: 10px auto;
        float: none;
        border: 1px;
        background: #efefef;
        width: 100px;
    }

    @-webkit-keyframes pulseshadow {
        0% {
            transform: scale(0.95);
        }

        70% {
            transform: scale(1);
            box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);
        }

        100% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(232, 76, 61, 0);
        }
    }

    @-moz-keyframes pulseshadow {
        0% {
            transform: scale(0.95);
        }

        70% {
            transform: scale(1);
            box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);
        }

        100% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(232, 76, 61, 0);
        }
    }

    @-ms-keyframes pulseshadow {
        0% {
            transform: scale(0.95);
        }

        70% {
            transform: scale(1);
            box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);
        }

        100% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(232, 76, 61, 0);
        }
    }

    @keyframes pulseshadow {
        0% {
            transform: scale(0.95);
        }

        70% {
            transform: scale(1);
            box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);
        }

        100% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(232, 76, 61, 0);
        }
    }

.roleG {
    padding: 0 2px;
    font-size: 2rem;
    color: #fff;
    border-radius: 50px;
    cursor: pointer;
    background: #fff;
    text-align: center;
}

        .roleG.user {
            color: #e28332;
        }

        .roleG.silver {
            color: #ccc;
        }

        .roleG.bronz {
            color: #645f4c;
        }

        .roleG.gold {
            color: #c4b339;
        }

        .roleG.hamkar {
            color: #2993cd;
        }

        .roleG.sherkat {
            color: #80b38d;
        }

    .closetag {
        display: none !important;
    }
.desc span a {
    color: #008eb2;

}
.desc span p a {
    color: #008eb2;
}

  

    @media only screen and (min-width: 1285px) {

        html {
            font-size: 62.5%;
        }
    }

    @media only screen and (min-width: 1550px) {
        :root {
            --heightmenu: 430px;
        }
    }