* {
    outline: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    direction: rtl;
    box-sizing: border-box;
    font-family: webmehrazfont;
}

body {
    font-family: WebmehrazFont;
}

.flex-container {
    display: flex;
}

.open-chart {
    display: block;
    width: 100%;
    overflow: hidden;
    margin: 30px 0 40px 0;
    transition: 2s all ease;
    background: linear-gradient(90deg,#fceded,transparent);
    border-radius: 10px;
    padding: 6px;
    box-sizing: border-box;
}

    .open-chart img {
        width: 100%;
    }

    .open-chart:hover {
        cursor: pointer;
        filter: hue-rotate(120deg);
    }

.access-boxes {
    margin-top: 20px;
}

    .access-boxes, .access-boxes ul, .link-two-box ul {
        list-style-type: none;
        font-size: 0;
    }

        .access-boxes ul li {
            width: 23%;
            margin-left: 2.666%;
            vertical-align: top;
        }

        .access-boxes ul li, .link-two-box ul li {
            width: 48%;
            display: inline-block;
            margin-left: 4%;
        }

            .access-boxes ul li:nth-child(4n) {
                margin-left: 0;
            }

            .access-boxes ul li a {
                display: block;
                line-height: 60px;
                font-weight: 700;
                border-radius: 10px;
                max-height: 91px;
            }

            .access-boxes ul li a, .image-interviews, .image-interviews ul li a {
                font-size: 0;
                position: relative;
                overflow: hidden;
            }

                .access-boxes ul li a:before {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    top: 0;
                    left: 0;
                    right: 0;
                    background: rgba(255,255,255,.6);
                }

                .access-boxes ul li a:hover {
                    opacity: .8;
                }

                .access-boxes ul li a h2 {
                    position: absolute;
                    bottom: 0;
                    top: 0;
                    left: 0;
                    right: 0;
                    color: #111;
                    text-align: center;
                    height: 50px;
                    line-height: 50px;
                    margin: auto;
                    font-weight: 700;
                    font-size: 16px;
                }

            .access-boxes ul li img {
                width: 100%;
                border-radius: 10px;
            }

.adbox img {
    width: 100%;
    margin: 0;
    padding: 0;
    border-bottom: 0 solid #da0000;
}

.all {
    position: relative;
}

    .all .campaign {
        width: 100%;
        font-size: 0;
        z-index: 4;
        margin: 40px 0;
        position: relative;
    }

        .all .campaign a {
            width: 32%;
            margin-left: 2%;
        }

        .all .campaign a {
            display: inline-block;
            vertical-align: top;
        }

            .all .campaign a:last-child, .news ul li:last-child {
                margin-left: 0;
            }

            .all .campaign a img, .sqsh-family img {
                width: 100%;
                border-radius: 10px;
            }

    .all .cardbanner {
        background: url(/images/cardbanner.png)no-repeat;
        width: 100%;
        height: 270px;
        position: relative;
    }

        .all .cardbanner .card-pic {
            top: -80px;
            left: 30%;
        }

            .all .cardbanner .card-pic img {
                width: 230px;
            }

        .all .cardbanner .mobile-pic {
            top: -80px;
            right: 33%;
        }

            .all .cardbanner .mobile-pic img {
                width: 165px;
            }

        .all .cardbanner strong {
            left: 0;
            right: 0;
            bottom: 60px;
            margin: auto;
            text-align: center;
            font-size: 32px;
        }

    .all .padding-top {
    }

    .all .r-column {
        width: calc(100% - 370px);
        margin-left: 30px;
    }

.answer {
    display: none;
    padding: 20px 40px;
    background: #ededed;
    border-radius: 11px;
}

.articles-box {
    position: relative;
    width: 100%;
    height: 450px;
    background: url(../../images/articles-cover.jpg)no-repeat top center;
    background-size: 100%auto;
    border-radius: 4px;
}

    .articles-box .tablet {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 530px;
    }

    .articles-box a {
        top: 107px;
        display: block;
        background: #ffc600;
        color: #d21515 !important;
        padding: 5px 9px;
        box-shadow: 0 1px 2px #9e8383;
        border-radius: 2px;
        height: 40px;
        line-height: 32px;
    }

    .articles-box a, .articles-box h2 {
        font-weight: 700;
        text-shadow: 0 0 .5px #fff;
    }

    .articles-box a, .articles-box ul {
        position: absolute;
        right: 50px;
        font-size: 20px;
    }

    .articles-box h2 {
        color: #01297b;
        position: absolute;
        top: 30px;
        right: 50px;
        width: 300px;
        font-size: 24px;
    }

        .articles-box h2 span {
            color: #fff;
            text-shadow: 0 0 .5px #000;
        }

    .articles-box ul {
        top: 189px;
        color: #fff;
        text-shadow: 0 0 .5px #5c5c5c;
        border-right: 8px solid #aa1414;
        padding: 0 10px 0 0;
        list-style-type: none;
        width: 288px;
        background: rgba(50,50,150,.2);
    }

        .articles-box ul li {
            height: 32px;
            line-height: 32px;
            font-size: 16px;
            color: #fff;
            font-weight: 700;
        }

        .articles-box ul li, .banners ul li {
            display: inline-block;
            vertical-align: top;
            position: relative;
        }

            .articles-box ul li:before {
                content: "";
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 1px;
                right: 0;
                background: #7989a8;
                opacity: .2;
            }

.background-type-div {
    height: 40px;
    background: #fff;
    padding: 0 14px 0 0;
    border-radius: 2px;
    margin: 40px 0 0;
    position: absolute;
    right: 1.5vw;
    width: 70%;
    top: 40px;
}

    .background-type-div p {
        overflow: hidden;
        white-space: nowrap;
        animation: typing 5.5s steps(100,end), blink-caret 1.5s step-end infinite;
        font-size: 13px;
        font-weight: bolder;
        text-align: right;
        direction: rtl;
        height: 40px;
        line-height: 40px;
        margin: 0;
        color: #222;
        text-shadow: 0 0 .5px #e1e1e1;
    }

        .background-type-div p a {
            color: #222;
        }

.banners {
    position: relative;
    font-size: 0;
    background: #fff;
    padding: 20px 0 0;
}

    .banners ul {
        list-style-type: none;
        padding: 0;
        border-radius: 10px;
    }

        .banners ul:before {
            content: "";
            right: 0;
            top: -8px;
            width: 50%;
            bottom: -8px;
        }

        .banners ul:before, .educationtabs .one-education img {
            width: 149px;
            border-radius: 10px;
            position: absolute;
            right: 15px;
            top: 14px;
        }

        .banners ul li {
            width: 100%;
        }

            .banners ul li:nth-child(2n):before {
                display: none;
            }

            .banners ul li a {
                display: block;
                border-radius: 8px;
                transition: .5s all ease;
                -webkit-transition: .5s all ease;
                font-weight: 700;
                line-height: 100px;
                margin: 10px 0 20px;
            }

                .banners ul li a:hover {
                    transform: scale(1.04);
                    background: #fee;
                }

                .banners ul li a img {
                    border-radius: 0 4px 4px 0;
                    display: inline-block;
                    vertical-align: middle;
                    width: 100%;
                }

            .banners ul li span {
                font-size: 16px;
                vertical-align: middle;
                color: #000;
                padding-right: 5px;
                display: none;
            }

.category-list-column ul li {
    width: 32%;
    margin-left: 2%;
    display: inline-block;
    vertical-align: top;
}


.play-chart {
    position: relative;
    font-size: 13px;
    z-index: 2;
    text-align: right;
    color: #282828;
    background: #ffe0e0;
    margin: 0;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    background: #009595;
}

.chart-box-display-chart > div {
    display: inline-block;
    vertical-align: top;
    opacity: 0;
}

    .chart-box-display-chart > div section {
        display: inline-block;
        vertical-align: top;
        margin-left: 20px;
    }

    .chart-box-display-chart > div span {
        color: #fff;
        font-size: 16px;
        font-weight: 700;
    }

.chart-box-display-chart strong {
    background: #005858;
    color: #fff;
    padding: 20px;
    margin-left: 20px;
    animation: 10s infinite winking;
}

    .chart-box-display-chart strong:after {
        content: "در یک نگاه ";
    }

    .chart-box-display-chart strong:before {
        content: "سال ";
    }


.chart-box .newsboxes {
    position: relative;
    background: #fff;
    padding: 0;
    width: 100%;
    margin-top: 10px;
}

.chart-box:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 10px;
    background: -webkit-linear-gradient(left,#fff,green);
    border-radius: 0;
}

.chart-box > div > .amel {
    background: #ffe246;
    position: absolute;
    bottom: 0;
    right: 19px;
    width: 10px;
    border-radius: 2px 2px 0 0;
}

.chart-box > div > .amelcount {
    background: #da0000;
    background: linear-gradient(#811,#f44);
    max-width: 11px;
    left: 40px;
    width: 9px;
    background: #000;
    margin-left: 18%;
    position: absolute;
    bottom: 0;
    right: 12px;
    border-radius: 1px 1px 0 0;
}

.chart-box > div > .amelcount, .chart-box > div > .maxcount, .chart-box > div > span {
    display: inline-block;
    vertical-align: bottom;
    height: 50px;
    transition: 1s;
}

.chart-box > div > .max {
    border-radius: 2px 0 0 2px;
}

.chart-box > div > .maxcount {
    width: 10px;
    background: #da0000;
    background: #f00;
    max-width: 11px;
    position: absolute;
    bottom: 0;
    right: 2px;
    border-radius: 1px 1px 0 0;
}

.chart-box > div > span {
    position: relative;
    width: 11px;
    border-radius: 3px 4px 0 0 !important;
    background: #009191 url(/images/pattern1.png);
    background-size: 25px;
    background-position: center;
}

.chart-box div {
    display: inline-block;
    vertical-align: bottom;
    width: 33px;
    margin: 0 5px;
}

    .chart-box div .active, .chart-box div:hover div {
        font-size: 14px;
        position: absolute;
        right: -48px;
        display: block;
        background: #ffc;
        width: 157px;
        padding: 10px 25px 10px 10px;
        top: 30px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,.2);
        z-index: 5;
    }



        .chart-box div .active section:after, .chart-box div:hover div section:after {
            content: "";
            right: -25px;
            top: 3px;
            width: 18px;
            height: 9px;
            background: #0ca14d;
            position: absolute;
            border-radius: 2px 0 0 2px;
        }

    .chart-box div div ins, .chart-box div div span {
        font-size: 12px;
        color: #000;
    }

    .chart-box div section:nth-child(2):after {
        background: #ff4545 !important;
    }

    .chart-box div section:nth-child(3):after {
        background: #356dd3 !important;
    }

    .chart-box div section:nth-child(4):after {
        background: #ffb600 !important;
    }

.chart-box section:last-child {
    border: 0;
}

.chartsection .close-chart {
    position: fixed;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    background: #da0000 url(/icons/close.png) no-repeat center;
    background-size: 20px;
    z-index: 4;
    display: none;
}

.chart-box-display-chart {
    position: relative;
    font-size: 13px;
    z-index: 2;
    text-align: right;
    color: #282828;
    margin: 0;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    display: none;
}

    .chart-box-display-chart strong {
        background: #da0000;
        color: #fff;
        padding: 20px;
        margin-left: 20px;
        animation: 10s infinite winking;
    }

    .chart-box-display-chart > div {
        display: inline-block;
        vertical-align: top;
    }

        .chart-box-display-chart > div span {
            color: #da0000;
            font-size: 16px;
            font-weight: bold;
        }

        .chart-box-display-chart > div section {
            display: inline-block;
            vertical-align: top;
            margin-left: 20px;
        }

    .chart-box-display-chart strong:before {
        content: 'سال ';
    }

    .chart-box-display-chart strong:after {
        content: 'در یک نگاه ';
    }

    .chart-box-display-chart > div {
        display: inline-block;
        vertical-align: top;
        opacity: 0;
    }

        .chart-box-display-chart > div section {
            display: inline-block;
            vertical-align: top;
            margin-left: 20px;
        }

.chart-box {
    text-align: center;
    font-size: 0;
    position: relative;
    border-radius: 0;
    width: 90%;
    margin: 240px auto 0;
}

    .chart-box:before {
        content: '';
        position: absolute;
        left: 0;
        bottom: -10px;
        width: 100%;
        height: 10px;
        background: -webkit-linear-gradient(left,#fff,green);
        border-radius: 0;
        display: none;
    }

    .chart-box .iTitle {
        position: relative;
        left: 0;
        line-height: 30px;
        border: 0;
        border-radius: 10px;
        font-size: 23px;
        letter-spacing: 0px;
        color: #fff;
        right: 0;
        width: 100%;
        height: 70px;
        text-align: right;
        letter-spacing: -1px;
    }

        .chart-box .iTitle:before {
            text-align: center;
            font-size: 0;
            position: relative;
            border-radius: 0;
            display: none;
        }

    .chart-box #maxvalue, .chart-box #maxcount, .chart-box #amel, .chart-box #amelcount {
        display: none;
    }

    .chart-box > div {
        position: relative;
        display: inline-block;
        vertical-align: bottom;
        cursor: pointer;
        text-align: center;
        height: 220px;
        width: 28px;
        background: #C0D8C240;
        border-radius: 0 0 50px 50px;
        margin: 0 25px;
    }

        .chart-box > div:after {
            content: '';
            position: absolute;
            top: -10px;
            left: 0;
            width: 100%;
            height: 24px;
            background: #9fd6c4d9;
            border-radius: 50%;
        }

        .chart-box > div:before {
            content: '';
            position: absolute;
            bottom: -11px;
            left: 0;
            width: 100%;
            height: 24px;
            background: #B3FFF7;
            border-radius: 50%;
            z-index: 3;
        }

        .chart-box > div > .maxcount, .chart-box > div > .amelcount {
            position: relative;
            display: inline-block;
            width: 10px;
            height: 50px;
            background: #da0000;
            transition: 1s;
            background: linear-gradient(#811,#f44);
            transition: 1s;
            max-width: 11px;
            position: absolute;
            bottom: 0px;
            right: 2px;
            border-radius: 1px 1px 0 0;
            width: 60px;
            height: 260px;
            border-radius: 30px;
            position: absolute;
            bottom: 0;
            display: none;
        }

        .chart-box > div > .amelcount {
            left: 40px;
        }

        .chart-box > div > .amelcount {
            position: relative;
            display: inline-block;
            vertical-align: bottom;
            width: 6px;
            height: 50px;
            transition: 1s;
            border-radius: 0;
            transition: 1s;
            background: #f90;
            margin-left: 18%;
            position: absolute;
            bottom: 0;
            right: 12px;
            border-radius: 1px 1px 0 0;
            display: none;
        }

        .chart-box > div > span {
            position: absolute;
            display: inline-block;
            vertical-align: bottom;
            width: 50%;
            height: 50px;
            transition: 1s;
            border-radius: 3px 3px 0px 0px !important;
            transition: 1s;
            background: linear-gradient(#147288,#026f32bd);
            bottom: 0;
        }

        .chart-box > div > .max {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 55%;
            background: #bfeee0;
            border-radius: 35px;
            z-index: 2;
        }

            .chart-box > div > .max:before {
                content: '';
                position: absolute;
                top: -11px;
                left: 0;
                width: 100%;
                height: 22px;
                background: #fff1f1;
                border-radius: 50%;
            }

        .chart-box > div > .amel {
            background: #ff0;
            position: absolute;
            bottom: 0;
            right: 19px;
            width: 6px;
            border-radius: 2px 2px 0 0;
            display: none;
        }

        .chart-box > div > .max {
            border-radius: 2px 0 0 2px;
        }

    .chart-box div div {
        display: none;
    }

        .chart-box div div span, .chart-box div div ins {
            font-size: 15px;
            color: #00B1A5;
            font-weight: 700;
        }

    .chart-box div:hover div, .chart-box div .active {
        font-size: 16px;
        position: absolute;
        right: -96px;
        display: block;
        background: #fff;
        width: 225px;
        padding: 10px 25px 10px 10px;
        top: -30px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
        z-index: 5;
    }

    .chart-box section {
        position: relative;
        margin-bottom: 12px;
        font-size: 11px;
        padding: 0;
        color: #00B1A5;
        padding-right: 30px;
    }

.statistic-price {
    padding-right: 40px;
    background: url(/icons/statistic-price.png) center right 0px no-repeat;
    background-size: 20px;
}

.statistic-user {
    padding-right: 40px;
    background: url(/icons/statistics-user.png) center right 0px no-repeat;
    background-size: 20px;
}

.chart-box div:hover div:before, .chart-box div .active:before {
    content: '';
    position: absolute;
    top: 100%;
    right: 50%;
    margin-right: -15px;
    border-top: 14px solid #fff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

.chart-box div:hover div section:after, .chart-box div .active section:after {
    content: '';
    position: absolute;
    right: -25px;
    top: 3px;
    width: 18px;
    height: 9px;
    background: #0ca14d;
    position: absolute;
    border-radius: 2px 0 0 2px;
    display: none;
}

.chart-box div section:nth-child(2):after {
    background: #ff4545 !important;
}

.chart-box div section:nth-child(3):after {
    background: #356dd3 !important;
}

.chart-box div section:nth-child(4):after {
    background: #ffb600 !important;
}

.chart-box div strong {
    position: absolute;
    bottom: -42px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: lighter;
    color: #fff;
}

.chartsection.chartsection-stable {
    display: block !important;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
    z-index: 0;
    margin-top: 0;
}

    .chartsection.chartsection-stable .chart-box-display-chart {
        border-radius: 10px 10px 0 0;
        margin: 0;
    }

    .chartsection.chartsection-stable .chart-box {
        padding: 40px 0 0 0;
        vertical-align: bottom;
        z-index: 0;
        height: auto;
    }

    .chartsection.chartsection-stable .chart-box-display-chart {
        z-index: 0;
    }

.chart-box .newsboxes {
    position: relative;
    background: #fff;
    padding: 0;
    width: 100%;
    margin-top: 10px;
}

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

    .contactUsContainer > div {
        width: 48%;
        height: 240px;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #fafafa;
    }

    .contactUsContainer > div, .formContainer {
        padding: 20px;
        justify-content: center;
    }

        .contactUsContainer > div > a {
            border: 1px solid #de1b1b;
            padding: 5px 15px;
            border-radius: 10px;
            transition: background-color .3s ease;
        }

        .contactUsContainer > div > a, .contactUsContainer > div > span > a {
            font-size: 1rem;
            color: #de1b1b;
            text-decoration: none;
        }

            .contactUsContainer > div > a:hover {
                background-color: #de1b1b;
                color: #fff;
            }

        .contactUsContainer > div > div {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
        }

            .contactUsContainer > div > div > h2 {
                font-size: 1.5rem;
                color: #333;
            }

            .contactUsContainer > div > div > img {
                width: 60px;
                height: 60px;
                margin-left: 10px;
            }

        .contactUsContainer > div > p {
            font-size: 1rem;
            color: #666;
            text-align: center;
            margin-bottom: 10px;
        }

.counter-box {
    font-size: 17px;
    border-radius: 10px;
    margin-bottom: 10px;
    position: relative;
    padding: 5px 20px 20px;
    min-height: 372px;
    margin-top: 70px;
    background: #f9f9f9;
}

    .counter-box .iTitle {
        border-right: 0;
        font-weight: 700;
        color: #da0000;
        font-size: 14px;
        text-align: center;
        padding: 10px 0 0;
    }

    .counter-box .title_footer, .manager-contact-ul {
        display: none;
    }

    .counter-box:before {
        content: "";
        position: absolute;
        background: #fff url(/icons/newsletter.png)no-repeat center;
        border: 4px solid #f9c0c0;
        background-size: 20px;
        width: 40px;
        height: 40px;
        border-radius: 50px;
        left: 0;
        right: 0;
        margin: auto;
        top: -20px;
    }

    .counter-box img {
        border-radius: 10px;
        max-height: 200px;
        width: 100%;
    }

.cover-box {
    position: relative;
    font-size: 0;
}

.cover-ititle {
    width: 100%;
    position: relative;
    background: #14aa1d;
    border-radius: 10px;
    overflow: hidden;
}

.cover-ititle, .cover-statistics {
    display: inline-block;
    vertical-align: top;
    height: 146px;
}

    .cover-ititle:before {
        background: rgba(255,245,245,.85);
        border-radius: 10px;
    }

    .cover-ititle:before, .cover-statistics:before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        top: 0;
        right: 0;
    }

    .cover-ititle h1, .cover-ititle p {
        position: absolute;
        text-align: center;
        left: 0;
        right: 0;
        font-weight: 700;
        color: #000;
        top: 45px;
        font-size: 21px;
    }

    .cover-ititle img {
        min-height: 100%;
    }

    .cover-ititle p {
        color: red;
        font-size: 20px;
        bottom: 0;
        padding: 5px 0;
        top: 35px;
        margin: auto;
        height: 41px;
        width: 235px;
        border-radius: 3px;
    }

.cover-statistics {
    width: 49%;
    text-align: center;
    background-size: 100%auto;
    box-shadow: 0 3px 13px 4px rgba(0,0,0,.1);
}

    .cover-statistics, .cover-statistics p, .slider {
        position: relative;
        border-radius: 10px;
    }

        .cover-statistics:before {
            width: 100%;
            background: url(/images/statisticscover.png)no-repeat left bottom -7px;
            background-size: 100%;
            z-index: 0;
        }

        .cover-statistics div {
            background: linear-gradient(90deg,#fff,#ddd);
            height: 74px;
            line-height: 72px;
            margin-bottom: 1px;
        }

        .cover-statistics p {
            line-height: 148px;
            font-size: 21px;
            text-align: center;
            height: 100%;
            background: rgba(0,41,162,.5);
            color: #fff;
            font-weight: 700;
        }

        .cover-statistics span {
            width: 40%;
            height: 100%;
            font-size: 15px;
            border-radius: 0 10px 10px 0;
            background: rgba(255,255,255,.8);
        }

        .cover-statistics span, .cover-statistics strong {
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            font-weight: 700;
            position: relative;
            opacity: .9;
        }

        .cover-statistics strong {
            width: 60%;
            font-size: 18px;
            border-radius: 10px 0 0 10px;
            background: linear-gradient(90deg,#dad700,#fee);
            color: #000;
        }

.currency-box {
    font-size: 17px;
    width: 49%;
    display: inline-block;
    vertical-align: top;
    border-radius: 10px;
    height: 21vw;
    margin-bottom: 10px;
    position: relative;
}

    .currency-box .table {
        margin: 0;
    }

        .currency-box .table .item:first-child {
            display: none;
        }

.currnecy-box-container {
    overflow-y: scroll;
    height: 100%;
    margin-top: 10px;
}

    .currnecy-box-container .table .col:last-child {
        background: #fafffa;
        color: #08a5d5;
        text-align: center;
        font-weight: 700;
        font-size: 12px;
    }

        .currnecy-box-container .table .col:last-child:after {
            content: "ریال";
            float: left;
            color: #2a312a;
            font-size: 11px;
            margin: 1px 0 0;
        }

    .currnecy-box-container .table .col:nth-child(2n) {
        background: #d5d5d5;
        color: #333;
        text-align: center;
    }

.desktop-slideshow {
    display: block;
}

.educationtabs {
    font-size: 0;
}

    .educationtabs .one-education {
        position: relative;
        height: 220px;
        padding-right: 177px;
        padding-top: 19px;
        background: #f222;
        border-radius: 10px;
        display: inline-block;
        vertical-align: top;
        width: 48%;
        margin: 20px 0 0 4%;
        font-size: 14px;
    }

        .educationtabs .one-education:nth-child(2n) {
            margin-left: 0;
        }

        .educationtabs .one-education a {
            background: #fff;
            position: absolute;
            left: 10px;
            bottom: 10px;
            text-align: center;
            color: #999;
            font-size: 0;
            width: 103px;
            background: #da0000;
            border-radius: 10px;
            font-weight: 700;
        }

            .educationtabs .one-education a:before {
                content: "مشاهده جزییات";
                font-size: 14px;
                color: #fff;
            }

    .educationtabs .tabcontents .boxes {
        padding: 20px;
    }

    .educationtabs .tabselectors li {
        width: 25% !important;
        background: #fff;
        color: #000 !important;
    }

.faq-category ul {
    font-size: 0;
    direction: initial;
}

    .faq-category ul li::before {
        content: none !important;
    }

.faq-category ul, .faq-list ul {
    list-style-type: none;
    padding: 0 !important;
}

.faq-category ul {
    direction: rtl;
    background-color: #F9F9F9;
    padding-right: 40px !important;
}

    .faq-category ul li {
        font-size: 17px;
        margin-left: 6%;
        display: inline-block;
        text-align: center;
    }

        .faq-category ul li:last-child {
            margin-left: 0;
        }

        .faq-category ul li a {
            color: #000;
            text-align: center;
            width: 100%;
            display: block;
            height: 74px;
            line-height: 74px;
            border-radius: 10px;
        }

            .faq-category ul li a.active {
                color: #008076;
                font-weight: 500;
                position: relative;
            }

                .faq-category ul li a.active::before {
                    content: "";
                    width: 120%;
                    height: 1px;
                    display: block;
                    position: absolute;
                    background: #008076;
                    bottom: 20%;
                    left: 50%;
                    transform: translateX(-50%);
                }

                .faq-category ul li a.active::after {
                    content: "";
                    display: inline-block;
                    width: 25px;
                    height: 20px;
                    background: url('../../icons/arrow-down-green.png') center center/cover no-repeat;
                }

.attention {
    color: #828282;
    font-size: 18px;
    margin: 15px 0;
}

    .attention::before {
        content: "";
        display: inline-block;
        width: 35px;
        height: 20px;
        background: url('../../icons/arrow-left-red.png') center center/cover no-repeat;
    }

.left-answer-box {
    width: 42%;
    min-height: 500px;
    background: #EDEDED;
    border-radius: 15px;
    padding: 60px 40px;
    margin-bottom: 20px;
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 1;
    display: flex;
    /*! justify-content: center; */
    align-content: center;
    flex-direction: column;
}

    .left-answer-box audio {
        width: 80%;
        height: 40px;
        margin: 10px auto;
        border-radius: 8px;
        background-color: #007F76;
    }


        .left-answer-box audio::-webkit-media-controls-enclosure {
            background-color: #007F76;
        }


        .left-answer-box audio::-webkit-media-controls-panel {
            background-color: #007F76;
        }



    .left-answer-box p {
        width: 60%;
        text-align: center;
        margin: 30px auto;
    }

.faq-list {
    position: relative;
    margin-top: 40px;
    margin-bottom: 60px;
    min-height: 400px;
}

    .faq-list ul {
        border: 1px solid #EDEDED;
        border-radius: 20px;
        padding-bottom: 0 !important;
        width: 60%;
        z-index: 2;
        background: #FFF;
        position: relative;
        height: auto;
        max-height: 400px;
        overflow: hidden;
        overflow-y: scroll;
    }

        .faq-list ul li {
            border-bottom: 1px solid #EDEDED;
        }

            .faq-list ul li:last-child {
                border-bottom: none;
            }

/*            .faq-list ul li .active {
                background-color: #EDEDED;
            }*/

.faq-img {
    width: 100%;
}


.faq-list h3 {
    font-weight: 700;
    text-align: right;
    font-size: 20px !important;
    border-radius: 4px;
    line-height: 50px;
    height: 50px;
    padding-right: 10px;
    color: #da0000;
}

.faq-list ul li {
    cursor: pointer;
    /*! margin-bottom: 20px; */
    height: auto;
    min-height: 50px;
    line-height: 50px;
}

    .faq-list ul li:hover, .question:hover {
        cursor: pointer;
    }

.fast-links ul {
    font-size: 0;
    padding: 30px 0;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto;
}

    .fast-links ul li {
        position: relative;
        margin-bottom: 20px;
        padding-right: 30px;
    }

        .fast-links ul li:nth-child(6n), .mainpage-services .services ul li:nth-child(2n), .multimediacenter-bullets li:nth-child(3n), .services ul li:nth-child(6n) {
            margin-left: 0;
        }

        .fast-links ul li a {
            height: 80px;
            border-radius: 10px;
            background: #f7f7f7;
            margin: 0px auto 0 0;
            display: block;
            text-align: left;
            position: relative;
        }

            .fast-links ul li a:active {
                box-shadow: 5px 5px 10px -3px rgba(255,255,255,.3);
                background: #ddd;
            }

            .fast-links ul li a:hover {
                background: #da0000;
                box-shadow: 5px 5px 10px -3px #0007;
                cursor: pointer;
            }

                .fast-links ul li a:hover strong {
                    color: #fff;
                }

        .fast-links ul li img {
            width: 50px;
            border-radius: 50px;
            border: 7px solid #fff;
            position: absolute;
            right: -28px;
            top: 0;
            bottom: 0;
            margin: auto;
            background: #b9b9b9;
            padding: 5px;
        }

        .fast-links ul li:hover img {
            box-shadow: 0 0 20px #000;
            background: #eee;
        }

        .fast-links ul li strong {
            font-size: 12px;
            font-weight: 500;
            position: static;
            width: 120px;
            margin: auto;
            height: 100%;
            line-height: 2;
            display: flex;
            justify-content: center;
            color: #000;
            align-items: center;
            text-align: center;
        }

.l-column .fast-links ul {
    grid-template-columns: auto;
}

    .l-column .fast-links ul li {
        display: block;
    }


        .l-column .fast-links ul li a strong {
            font-size: 11px;
        }

.fastcontact {
    height: 15.4vw;
    width: 100%;
    font-size: 16px;
    border: 1px solid #eee;
    box-shadow: 0 5px 15px 0 rgba(31,32,35,.07);
    background: #fff url(/images/fastcontact.jpg)center top no-repeat;
    background-size: 100%auto;
    min-height: 230px;
    margin-top: 10px;
}

    .fastcontact, .fastcontact textarea {
        position: relative;
        display: block;
        border-radius: 10px;
    }

        .fastcontact input {
            bottom: 31px;
            left: 60px;
            z-index: 3;
            position: absolute;
            min-width: 100px !important;
            padding: 0 5px;
        }

        .fastcontact textarea {
            margin: 80px 20px 0;
            height: 7vw;
            resize: none;
            background: 0 0;
            border: 0;
            z-index: 1;
            box-sizing: border-box;
            width: calc(100% - 40px);
            padding: 0 10px;
            box-shadow: 0 0 5px rgba(0,0,0,.1);
            font-size: 12px;
        }

            .fastcontact textarea:focus, .manager-contact textarea:focus {
                background: #fff !important;
            }

.firstpageonepoll {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    font-size: 14px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px 0 rgba(31,32,35,.07);
    margin-bottom: 10px;
}

    .firstpageonepoll .btnSingle {
        box-sizing: border-box;
        text-align: center;
        margin: 20px auto 0 0;
        bottom: 49px;
    }

    .firstpageonepoll .onepoll {
        background: #fff url(/icons/commingsoon.jpg)left 0 bottom 0 no-repeat;
        min-height: 19.8vw;
        box-sizing: border-box;
        font-size: 12px;
        text-align: justify;
        position: relative;
        background-size: cover;
    }

        .firstpageonepoll .onepoll, .firstpageonepoll .onepoll img {
            display: block;
            border-radius: 2px;
            box-shadow: 0 5px 11px #d7d7d7;
        }

            .firstpageonepoll .onepoll .pnlResult {
                padding: 5px 16px 0;
            }

            .firstpageonepoll .onepoll .polloptions {
                list-style-type: none;
                padding-top: 20px;
                padding-right: 20px;
            }

                .firstpageonepoll .onepoll .polloptions li {
                    display: block;
                    height: 30px;
                    line-height: 30px;
                }

                    .firstpageonepoll .onepoll .polloptions li input, .firstpageonepoll .onepoll .polloptions li label {
                        display: inline-block;
                        vertical-align: middle;
                    }

                    .firstpageonepoll .onepoll .polloptions li label {
                        margin-right: 10px;
                        margin-top: 2px;
                        font-size: 14px;
                    }

            .firstpageonepoll .onepoll form {
                padding: 20px;
                min-height: 200px;
            }

                .firstpageonepoll .onepoll form div {
                    margin: 0 0 10px;
                    font-size: 15px;
                }

            .firstpageonepoll .onepoll h2 {
                font-size: 16px;
                padding: 16px;
                background: #f9d0d0;
                color: #da0000;
                -webkit-text-stroke: .5px #fff;
                border-radius: 10px 10px 0 0;
            }

            .firstpageonepoll .onepoll img {
                width: 100%;
            }

            .firstpageonepoll .onepoll textarea {
                position: relative;
                display: block;
                height: 149px;
                padding: 10px;
                border-radius: 2px;
                font-family: webmehrazfont;
                resize: none;
                margin: 15px auto;
                width: 78%;
                border: 1px solid #eee;
            }

    .firstpageonepoll .result-text {
        padding: 0 20px;
    }

.formContainer, .formContainer form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .formContainer form {
        background-color: #fff0f0;
        padding: 50px;
        border-radius: 10px;
        gap: 20px;
        font-weight: 200;
    }

        .formContainer form .btn-contact {
            padding: 10px 25px;
            background-color: #de1b1b;
            color: #fff;
            border: 0;
            border-radius: 10px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color .3s ease;
            align-self: flex-start;
            height: 44px;
            background-image: none;
        }

            .formContainer form .btn-contact:hover {
                background-color: #c00;
            }

        .formContainer form > div {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            width: 100%;
        }

            .formContainer form > div > div {
                flex: 1;
                display: flex;
                flex-direction: column;
            }

                .formContainer form > div > div input, .formContainer form textarea {
                    padding: 10px;
                    border-radius: 10px;
                    font-size: 1rem;
                    outline: 0;
                    transition: border .3s ease;
                    width: 100%;
                    border: 1px solid transparent;
                    font-size: 11px;
                }

                .formContainer form > div > div label {
                    margin-bottom: 5px;
                    font-size: 1rem;
                    color: #333;
                }

        .formContainer form input:focus, .formContainer form textarea:focus {
            border-color: #de1b1b;
        }

        .formContainer form p {
            font-size: .9rem;
            color: #666;
            margin-top: 10px;
            text-align: left;
        }

        .formContainer form textarea {
            resize: none;
            height: 150px;
        }

    .formContainer h2 {
        text-align: right;
        margin-bottom: 20px !important;
        color: #de1b1b !important;
        font-size: 1.5rem !important;
        width: 100%;
    }

    .formContainer h3 {
        margin: 0 0 20px;
        font-size: 1rem !important;
        text-align: right;
        width: 100%;
    }

.image-interviews {
    text-align: center;
    height: 446px;
    box-shadow: 0 3px 4px rgba(87,87,87,.2);
    border: 1px solid #eee;
    padding: 20px 50px;
    background: #fff;
    border-radius: 4px;
}

.image-interviews-title {
    color: #fb7979;
    font-size: 17px;
}

.image-interviews-title, .image-interviews > h2 {
    display: block;
    text-align: center;
    font-weight: 700;
}

.image-interviews .archivebtn {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: #c33;
    color: #fff;
    font-size: 12px;
    padding: 0 5px;
    border-radius: 2px;
}

.image-interviews .nxt, .image-interviews .prv {
    position: absolute;
    display: block;
    width: 20px;
    height: 40px;
    background: rgba(0,0,0,.7)url(../../icons/arrowright.png)no-repeat center center;
    right: 0;
    top: 273px;
    border-radius: 2px;
    z-index: 2;
    background-size: 17px;
}

.image-interviews .prv {
    left: 0;
    right: auto;
    transform: rotate(180deg);
}

.image-interviews > h2 {
    font-size: 16px;
    border-bottom: 1px solid #eee;
    width: 50%;
    margin: 0 auto 40px;
    padding: 10px 0;
}

.image-interviews ul {
    list-style-type: none;
    width: 2000%;
    margin-top: 80px;
}

    .image-interviews ul li {
        display: inline-block;
        vertical-align: top;
        width: 250px;
        margin-left: 10px;
    }

        .image-interviews ul li .active {
            z-index: 1;
            box-shadow: 0 3px 16px rgba(225,225,225,.8);
            height: 200px;
            transform: translateY(-10px);
            border: 1px solid #ff4545;
        }

            .image-interviews ul li .active img {
                height: 220px;
            }

        .image-interviews ul li a {
            display: block;
            transition: 1.5s all ease;
            border-radius: 2px;
            border: 1px solid #eeee;
            width: 250px;
        }

            .image-interviews ul li a h2 {
                font-size: 14px;
                position: absolute;
                bottom: -10px;
                background: rgba(50,50,100,.9);
                color: #fff;
                padding: 10px;
                font-weight: 700;
                line-height: 21px;
                display: none;
            }

            .image-interviews ul li a img {
                width: 100%;
                display: block;
                height: 180px;
            }

            .image-interviews ul li a p {
                font-size: 0;
                display: none;
            }

.iTitle {
    font-weight: 700;
    font-size: 18px;
    padding-right: 12px;
    margin: 21px 0;
    color: #333;
    border-right: 21px solid #ff4545;
}

.l-column .services {
    margin: 20px 0 0;
}

    .l-column .services .one-service:hover, .multimediacenter-bullets a:hover img {
        opacity: 1;
    }

    .l-column .services li:hover h2 strong {
        font-size: 16px;
        width: 200px;
        text-align: center;
        position: absolute;
        top: 55px;
        left: -70px;
        z-index: auto;
        background: linear-gradient(90deg,transparent,#ff0,transparent);
        height: 20px;
        line-height: 20px;
        border-radius: 6px;
    }

    .l-column .services li:nth-child(6n) {
        margin-left: 0 !important;
    }

.left-boxes {
    width: 47%;
    display: inline-block;
}

.link-box {
    position: relative;
    font-size: 0;
    margin-top: 20px;
    border-radius: 4px;
    background: #fff;
}

    .link-box ul {
        list-style-type: none;
        margin-top: 23px;
    }

        .link-box ul li {
            width: 20%;
            display: inline-block;
            vertical-align: top;
            color: #333;
            font-weight: 700;
            position: relative;
            min-height: 7vw;
            text-align: center;
            margin-left: 6.666%;
        }

            .link-box ul li:nth-child(4n), .link-two-box ul li:nth-child(2n) {
                margin-left: 0 !important;
            }

            .link-box ul li a {
                position: relative;
                font-weight: 400;
                font-size: 0;
                display: block;
                text-align: center;
            }

                .link-box ul li a:hover span {
                    font-size: 13px;
                    position: absolute;
                    top: -28px;
                    background: #477e00;
                    color: #fff;
                    padding: 2px;
                    display: block;
                    border-radius: 4px;
                    text-align: center;
                    left: 0;
                    right: 0;
                    min-width: 126px;
                }

                    .link-box ul li a:hover span:before {
                        content: "";
                        position: absolute;
                        bottom: -10px;
                        left: 50%;
                        border-top: #477e00 10px solid;
                        border-left: 10px solid transparent;
                        z-index: 10;
                    }

            .link-box ul li img {
                height: 6vw;
                border: 1px solid #c61b1b;
                margin: 0 auto;
                padding: 10px;
            }

            .link-box ul li img, .link-two-box a {
                display: block;
                border-radius: 10px;
                width: 100%;
            }

.link-two-box {
    position: relative;
    font-size: 0;
    border-radius: 12px;
    width: 100%;
    margin-top: 17px;
}

    .link-two-box > h2 {
        display: block;
        font-size: 12px;
        text-align: center;
        font-weight: 700;
        border-bottom: 1px solid #eee;
        width: 50%;
        margin: 0 auto;
        padding: 10px 0;
    }

    .link-two-box a {
        box-shadow: 0 5px 15px 0 rgba(96,96,98,.07);
        margin: 10px 0;
        overflow: hidden;
        padding: 20px 10px;
        min-height: 160px;
    }

        .link-two-box a span {
            font-size: 11px;
            color: #333;
            text-align: center;
            display: block;
            padding: 16px 20px 0;
        }

    .link-two-box ul li img {
        width: 66px;
        display: block;
        border-radius: 18px;
        filter: hue-rotate(20deg);
        margin: 0 auto;
    }


.chart-wrap {
    position: relative;
    width: 100%;
    height: 570px;
    background: linear-gradient(90deg, #00CBBD, #00655E);
    overflow: hidden;
    padding-bottom: 40px;
}

    .chart-wrap::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url("/images/pattern-statistic2.png") repeat;
        background-size: cover;
        background-position-y: -20px;
        opacity: 1;
        pointer-events: none;
    }


    .chart-wrap h2 {
        color: #fff;
        position: absolute;
        right: 160px;
        top: 40px;
        font-weight: 500;
        font-size: 22px;
        border: 0;
        padding: 0;
        min-width: 973px;
    }

        .chart-wrap h2 strong {
            color: #fff;
            position: absolute;
            right: 0;
            top: 55px;
            font-size: 14px;
            font-weight: 200;
        }

            .chart-wrap h2 strong span {
                position: relative;
                font-size: 45px;
                font-weight: 900;
                width: 250px;
                display: inline-block;
            }

                .chart-wrap h2 strong span:after {
                    content: 'همت';
                    margin-right: 10px;
                    font-size: 40px;
                    float: left;
                }

#chart {
    width: 100%;
    height: 380px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    margin-bottom: 100px;
}

.chart-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3; /* بالای ستون‌ها */
    pointer-events: none; /* هاور و کلیک ستون‌ها خراب نشه */
}

    .chart-overlay path {
        fill: none;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
        opacity: .95;
    }

    /* رنگ‌ها (هرچی دوست داری) */
    .chart-overlay .line-price {
        stroke: #0a8;
    }

    .chart-overlay .line-count {
        stroke: #d00;
    }
/* grid */
.grid line {
    stroke: rgba(255,255,255,.4);
    stroke-dasharray: 4 4;
}

/* line */
.line {
    fill: none;
    stroke: #ff4d4d;
    stroke-width: 2;
}

/* area */
/*.area {
    fill: rgba(255,255,255,.35);
}*/

/* points */
.point {
    fill: #ff4d4d;
    stroke: #fff;
    stroke-width: 2;
}

/* labels */
.label {
    fill: #fff;
    font-size: 12px;
    opacity: .8;
}

/* tooltip */
.tooltip {
    position: absolute;
    background: #fff;
    padding: 6px 12px;
    border-radius: 14px;
    transform: translate(-50%, -130%);
    white-space: nowrap;
    display: none;
}

.loginContainer {
    width: 100%;
    height: auto;
    padding: 100px 0;
    display: flex;
    margin: auto;
    border-radius: 40px;
    border: 1px solid #EDEDED;
}

.card-wrapper {
    width: 50%;
    padding: 230px 0;
    position: relative;
    perspective: 1000px;
    perspective-origin: 60% 55%;
    overflow: hidden;
}

.card-positioner {
    position: absolute;
    left: 60%;
    top: 50%;
    transform: translate(-50%, -50%) rotateZ(-20deg);
    width: 260px;
    height: 360px;
    z-index: 1;
}

.card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    animation: spin 6s linear infinite;
}

.card-shadow {
    position: absolute;
    left: 60%;
    bottom: 5px;
    width: 50%;
    height: 18px;
    transform: translateX(-50%) scaleX(1);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 70%);
    filter: blur(3px);
    z-index: 1;
    animation: shadow-sync 6s linear infinite;
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
}

.card-front {
    background: url("/images/front.png") center/cover no-repeat;
}

.card-back {
    background: url("/images/back.png") center/cover no-repeat;
    transform: rotateY(180deg);
}

@keyframes spin {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

@keyframes shadow-sync {
    0% {
        transform: translateX(-50%) scaleX(1);
        opacity: 0.8;
    }

    25% {
        transform: translateX(-50%) scaleX(0.3);
        opacity: 0.4;
    }

    50% {
        transform: translateX(-50%) scaleX(1);
        opacity: 0.8;
    }

    75% {
        transform: translateX(-50%) scaleX(0.3);
        opacity: 0.4;
    }

    100% {
        transform: translateX(-50%) scaleX(1);
        opacity: 0.8;
    }
}

.loginContainer .loginForm {
    width: 50%;
    height: 50vh;
    display: flex;
    flex-direction: column;
    font-family: WebmehrazFont;
    align-items: flex-end;
    border-radius: 0 10px 10px 0;
    justify-content: center;
}


    .loginContainer .loginForm h2 {
        margin-top: 50px;
        margin-bottom: 40px;
        font-weight: 400;
        text-align: center;
        font-size: 19px;
        text-align: justify;
    }

    .loginContainer .loginForm form {
        width: 60%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        max-width: 409px;
    }

        .loginContainer .loginForm form ul {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-end;
        }

            .loginContainer .loginForm form ul li {
                position: relative;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }

                .loginContainer .loginForm form ul li input[type=text] {
                    width: 100%;
                    height: 56px;
                    background-color: transparent;
                    outline: none;
                    border: 1px solid #757575;
                    position: relative;
                    line-height: 30px;
                    text-align: right;
                    border-radius: 40px;
                    padding-right: 10px;
                    z-index: 2;
                }

        .loginContainer .loginForm form p {
            margin: 10px 0 30px 0;
            color: #828282;
        }

            .loginContainer .loginForm form p a {
                color: #00655E;
                text-decoration: none;
            }

        .loginContainer .loginForm form ul li .loginPlaceHolder {
            font-size: 14px;
            position: absolute;
            right: 15px;
            bottom: 75%;
            background-color: #fff;
            z-index: 3;
            color: #1F1F1F;
            width: auto;
            padding: 0 10px;
            font-size: 14px;
        }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 40px;
    height: 40px;
    padding: 0 20px;
    text-decoration: none;
    box-sizing: border-box;
    line-height: 40px;
    width: 170px;
    cursor: pointer;
}

.btn-login input {
    border: none;
    font-family: WebMehrazFont;
    background-color: transparent;
    font-size: 15px;
    color: #1f1f1f;
    font-weight: 400;
}

.btn-login::after {
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #008076 url("/images/arrowNorthEast.png") center center/cover no-repeat;
    background-size: 20px;
    transition: 500ms;
    display: inline-block;
}


.btn-login:hover::after {
    transform: rotate(-45deg);
}

.btn-login {
    color: #000;
    background: url("/images/pt1.png") left center/cover no-repeat;
    font-family: WebMehrazFont;
    border: #00655E 1px solid;
    display: block;
    background-size: 350px;
    height: 56px !important;
    background-color: #F6F9F6
}

.sqsh-tabs {
    margin: auto;
    top: -28px;
}

.top-tabs {
    position: relative;
    height: 50px;
    margin-bottom: 10px;
    border-radius: 40px;
    overflow: hidden;
    background-color: #008076;
    display: flex;
    box-shadow: 0px 4px 4px 0px #00000040;
}

    .top-tabs li {
        list-style: none;
        color: #fff;
        padding: 15px 30px;
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex: 1;
    }

        .top-tabs li img {
            width: 24px;
            height: 24px;
            object-fit: contain;
        }

        .top-tabs li.active {
            background: #005C55;
            z-index: 10;
            border-bottom: 3px solid #B5EEEA;
            background: linear-gradient( to top, #014641 0%, #014641 50%, #00655E 50%, #00655E 100% );
        }

        .top-tabs li:hover:not(.active) {
            background: #005C55;
        }

.sqsh-tab {
    display: none;
    background: #F9F9F9;
    border-radius: 8px;
    /*! box-shadow: 0 2px 10px rgba(0,0,0,0.1); */
    padding: 15px;
    min-height: 220px;
    border-radius: 20px;
}

    .sqsh-tab.active {
        display: flex;
        gap: 20px;
    }

.right-tabs {
    width: 250px;
    padding: 10px 0;
}

    .right-tabs li {
        list-style: none;
        margin-bottom: 10px;
        padding: 5px 0px;
        cursor: pointer;
        transition: all 0.3s ease;
        color: #828282;
        font-size: 13px;
        position: relative;
    }

        .right-tabs li a {
            text-decoration: none;
            color: #1F1F1F;
            display: block;
        }


        .right-tabs li.active {
            color: #1F1F1F;
            font-weight: bold;
            font-size: 17px;
        }

            .right-tabs li.active a::before {
                content: "";
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: #1F1F1F;
                display: inline-block;
                margin-left: 10px;
            }

.content-area {
    flex: 1;
    padding: 20px;
    background-color: #FFFFFF;
    border-radius: 20px;
}

.content-item {
    display: none;
}

    .content-item.active {
        display: block;
        animation: fadeIn 0.4s ease;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


.content-item p {
    line-height: 1.8;
    color: #1f1f1f;
}

/*.loginContainer {
    padding: 0;
    display: flex;
    margin: auto auto 40px;
}

    .loginContainer .loginForm {
        width: 50%;
        height: 498px;
        display: flex;
        flex-direction: column;
        font-family: WebmehrazFont;
        align-items: center;
        border-radius: 0 10px 10px 0;
        background-color: #f9f9f9;
    }

        .loginContainer .loginForm .form {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

            .loginContainer .loginForm .form p a {
                color: #00655e;
                text-decoration: none;
            }

            .loginContainer .loginForm .form ul, .loginContainer .loginSlider ul.slides li {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

                .loginContainer .loginForm .form ul li {
                    position: relative;
                    width: 70%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                    .loginContainer .loginForm .form ul li .loginPlaceHolder {
                        position: absolute;
                        right: 8px;
                        bottom: 75%;
                        background-color: #f0f0f0;
                        z-index: 3;
                        color: #757575;
                        width: auto;
                        padding: 0 3px;
                        font-size: 14px;
                        border-radius: 40px;
                        background: #f9f9f9;
                    }

                    .loginContainer .loginForm .form ul li .btn-enter {
                        cursor: pointer;
                        background-color: #e51f28;
                        outline: 0;
                        width: 100%;
                        height: 45px;
                        border-radius: 7px;
                        border: 0;
                        color: #fff;
                        font-family: WebmehrazFont;
                        font-weight: 700;
                        font-size: 20px;
                        text-align: center;
                        line-height: 45px;
                    }

                    .loginContainer .loginForm .form ul li input[type=text] {
                        width: 100%;
                        height: 45px;
                        background-color: #fff;
                        outline: 0;
                        border: 1px solid #757575;
                        position: relative;
                        line-height: 30px;
                        text-align: right;
                        border-radius: 7px;
                        padding-right: 10px;
                        z-index: 2;
                        text-align: center;
                    }

                    .loginContainer .loginForm .form ul li p {
                        margin: 30px 0;
                        color: #636e72;
                        text-align: justify;
                        font-size: 10px;
                    }

        .loginContainer .loginForm h2 {
            margin-top: 80px;
            margin-bottom: 60px;
            width: 50%;
            font-weight: 700;
            text-align: center;
            font-size: 20px;
        }

    .loginContainer .loginSlider {
        width: 50%;
        background-color: #363636;
        position: relative;
        overflow: hidden;
        max-width: 1200px;
        border-radius: 10px 0 0 10px;
    }

        .loginContainer .loginSlider .dots {
            text-align: center;
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 5;
        }

            .loginContainer .loginSlider .dots span {
                display: inline-block;
                width: 10px;
                height: 10px;
                background-color: #fff;
                border-radius: 50%;
                margin: 5px;
                cursor: pointer;
            }

                .loginContainer .loginSlider .dots span.active {
                    background-color: #e3000f;
                    transform: scale(1.3);
                }

        .loginContainer .loginSlider .sandoqCard {
            width: 260px;
            height: 380px;
            position: relative;
            transform-style: preserve-3d;
            transition: 1s ease;
        }

            .loginContainer .loginSlider .sandoqCard .backCard {
                background: url(/images/back.png)center center/cover no-repeat;
                transform: rotateY(180deg);
                backface-visibility: hidden;
            }

            .loginContainer .loginSlider .sandoqCard .backCard, .loginContainer .loginSlider .sandoqCard .frontCard {
                position: absolute;
                height: 100%;
                width: 100%;
                border-radius: 6px;
            }

            .loginContainer .loginSlider .sandoqCard .frontCard {
                background: url(/images/front.png)center center/cover no-repeat;
                backface-visibility: hidden;
            }

            .loginContainer .loginSlider .sandoqCard:hover {
                transform: rotateY(180deg);
            }

        .loginContainer .loginSlider::after {
            width: 200px;
            height: 200px;
            top: -5%;
            right: -5%;
            animation: float2 40s infinite linear;
            z-index: 2;
        }

        .loginContainer .loginSlider::after, .loginContainer .loginSlider::before {
            content: "";
            opacity: .5;
            background: linear-gradient(209.32deg,#757575 16.37%,#dbdbdb 82.02%);
            position: absolute;
            border-radius: 50%;
        }

        .loginContainer .loginSlider::before {
            width: 100px;
            height: 100px;
            left: -5%;
            animation: float1 40s infinite linear;
            z-index: 2;
        }

        .loginContainer .loginSlider button.next {
            right: 10px;
        }

        .loginContainer .loginSlider button.next, .loginContainer .loginSlider button.prev {
            position: absolute;
            top: 50%;
            width: 20px;
            height: 20px;
            transform: translateY(-50%);
            background: url(/icons/arrow-right.png)center center/cover no-repeat;
            z-index: 6;
            border: 0;
            outline: 0;
            cursor: pointer;
        }

        .loginContainer .loginSlider button.prev {
            left: 10px;
            transform: translateY(-50%) rotate(180deg);
        }

        .loginContainer .loginSlider ul.slides {
            width: 100%;
            height: 100%;
            z-index: 5;
            display: flex;
            transition: transform .5s ease-in-out;
            position: relative;
        }

            .loginContainer .loginSlider ul.slides li {
                min-width: 100%;
                height: 100%;
                text-align: center;
                position: relative;
            }

                .loginContainer .loginSlider ul.slides li h2 {
                    color: #fff;
                    font-size: 15px;
                    margin: 0 0 60px;
                    position: relative;
                    width: 100%;
                    text-align: center;
                }

                    .loginContainer .loginSlider ul.slides li h2::after {
                        width: 10px;
                        height: 10px;
                        border-radius: 50%;
                        right: 30%;
                    }

                    .loginContainer .loginSlider ul.slides li h2::after, .loginContainer .loginSlider ul.slides li h2::before {
                        content: "";
                        width: 30%;
                        height: 1px;
                        background-color: #fff;
                        display: block;
                        position: absolute;
                        right: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        z-index: 10;
                    }

                .loginContainer .loginSlider ul.slides li img {
                    height: 260px;
                    object-fit: cover;
                }*/

.mainpage-services .services {
    padding: 0;
    margin-top: 30px;
}

    .mainpage-services .services .one-service h2 {
        font-size: 14px;
        padding-right: 50px;
    }

    .mainpage-services .services .one-service img {
        left: auto;
    }

    .mainpage-services .services ul li {
        display: inline-block;
        width: 48%;
        margin-left: 4%;
    }

.manager-contact {
    background: url(/images/manager2.jpg)no-repeat bottom -40px center;
    background-size: 100%;
    height: 100px;
    width: 100%;
    position: relative;
    font-size: 16px;
    border-radius: 10px;
    border: 1px solid #eee;
    display: block;
    box-shadow: 0 5px 15px 0 rgba(31,32,35,.07);
    margin-bottom: 20px;
}

    .manager-contact input {
        bottom: 20px;
        left: 17px;
        z-index: 2;
        position: absolute;
    }

    .manager-contact textarea {
        margin: 57px 17px 0 0;
        height: 5vw;
        width: 71%;
        resize: none;
        background: 0 0;
        border: 0;
        position: relative;
        z-index: 1;
    }

.manateq {
    background: transparent;
    padding: 0;
}

    .manateq h2 {
        width: 100%;
        font-size: 28px;
        letter-spacing: 0.5px;
        color: #000;
        text-align: right;
        margin-bottom: 30px;
        position: relative;
        color: #FFF;
        font-weight: 600;
    }

.manateq-content {
    display: flex;
    gap: 40px;
    align-items: center;
}

.text-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 120px;
}

    .text-column p {
        width: 100%;
        line-height: 1.8;
        font-size: 18px;
        font-weight: 400;
        text-align: justify;
        color: #000;
        margin-bottom: 20px;
        color: #FFF;
    }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 40px;
    height: 40px;
    padding: 0 20px;
    text-decoration: none;
    box-sizing: border-box;
    line-height: 40px;
    width: 170px;
}


.btn-branches::after {
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #008076 url("/images/arrowNorthEast.png") center center/cover no-repeat;
    background-size: 20px;
    transition: 500ms;
    display: inline-block;
    position: absolute;
    left: 5px;
}


.btn-branches:hover::after {
    transform: rotate(-45deg);
}

.btn-branches {
    color: #000;
    background-color: #fff;
    font-weight: 400;
    font-size: 14px;
}



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

.map-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
}

    .map-wrapper > img {
        width: 100%;
        height: auto;
        display: block;
    }

.province-marker {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    animation: cycleProvince 120s ease-in-out infinite;
}

@keyframes cycleProvince {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) translateY(5px) scale(0.95);
    }

    0.5% {
        opacity: 1;
        visibility: visible;
    }

    1% {
        transform: translateX(-50%) translateY(-8px) scale(1.03);
    }

    1.5% {
        transform: translateX(-50%) translateY(0) scale(1);
    }

    2% {
        transform: translateX(-50%) translateY(-4px) scale(1.01);
    }

    2.5% {
        transform: translateX(-50%) translateY(0) scale(1);
    }

    3% {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0) scale(1);
    }

    3.2% {
        opacity: 0;
        visibility: visible;
    }

    3.5% {
        opacity: 0;
        visibility: hidden;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.province-name {
    font-size: 10px;
    font-weight: 600;
    color: #000;
    background: #FFF;
    padding: 10px;
    border-radius: 16px;
    margin-bottom: 5px;
    white-space: nowrap;
    text-align: center;
}

.province-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .province-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
    }


.map-wrapper .westAzarbayjan {
    left: 7.68334%;
    top: 10.2425%;
}

.map-wrapper .eastAzarbayjan {
    left: 14.9233%;
    top: 5.11943%;
}

.map-wrapper .ardebil {
    left: 20.3433%;
    top: 0.150896%;
}

.map-wrapper .gilan {
    left: 27.5%;
    top: 9.90394%;
}

.map-wrapper .zanjan {
    left: 18.53%;
    top: 12.7857%;
}

.map-wrapper .kordestan {
    left: 13.9933%;
    top: 18.9945%;
}

.map-wrapper .mazandaran {
    left: 43.7433%;
    top: 15.3325%;
}

.map-wrapper .qazvin {
    left: 33.6367%;
    top: 17.2279%;
}

.map-wrapper .hamedan {
    left: 24.3033%;
    top: 22.3326%;
}

.map-wrapper .kermanshah {
    left: 13.6367%;
    top: 28.2029%;
}

.map-wrapper .ilam {
    left: 15.15%;
    top: 37.5143%;
}

.map-wrapper .lorestan {
    left: 20.75%;
    top: 31.4379%;
}

.map-wrapper .arak {
    left: 32.26%;
    top: 25.553%;
}

.map-wrapper .alborz {
    left: 39.9933%;
    top: 20.3158%;
}

.map-wrapper .tehran {
    left: 46.89%;
    top: 20.6691%;
}

.map-wrapper .qom {
    left: 40.32%;
    top: 28.4127%;
}

.map-wrapper .semnan {
    left: 53.7367%;
    top: 26.1786%;
}

.map-wrapper .golestan {
    left: 56.21%;
    top: 12.7747%;
}

.map-wrapper .northKhorasan {
    left: 68.7933%;
    top: 9.44757%;
}

.map-wrapper .khorasanRazavi {
    left: 74.6%;
    top: 19.4362%;
}

.map-wrapper .southKhorasan {
    left: 78.3867%;
    top: 41.4891%;
}

.map-wrapper .esfehan {
    left: 46.4967%;
    top: 38.7251%;
}

.map-wrapper .yazd {
    left: 58.6067%;
    top: 45.7105%;
}

.map-wrapper .chaharMahal {
    left: 33.81%;
    top: 42.5159%;
}

.map-wrapper .ahmad {
    left: 36.1233%;
    top: 50.0607%;
}

.map-wrapper .khuzestan {
    left: 30%;
    top: 57%;
}

.map-wrapper .bushehr {
    left: 41%;
    top: 71%;
}

.map-wrapper .fars {
    left: 46.4567%;
    top: 58.165%;
}

.map-wrapper .kerman {
    left: 66.6233%;
    top: 55.8021%;
}

.map-wrapper .hormozgan {
    left: 59.9367%;
    top: 72.7908%;
}

.map-wrapper .sistan {
    left: 83.4733%;
    top: 72.0106%;
}




.map-wrapper .westAzarbayjan {
    animation-delay: 0s;
}

.map-wrapper .eastAzarbayjan {
    animation-delay: 4s;
}

.map-wrapper .ardebil {
    animation-delay: 8s;
}

.map-wrapper .gilan {
    animation-delay: 12s;
}

.map-wrapper .zanjan {
    animation-delay: 16s;
}

.map-wrapper .kordestan {
    animation-delay: 20s;
}

.map-wrapper .mazandaran {
    animation-delay: 24s;
}

.map-wrapper .qazvin {
    animation-delay: 28s;
}

.map-wrapper .hamedan {
    animation-delay: 32s;
}

.map-wrapper .kermanshah {
    animation-delay: 36s;
}

.map-wrapper .ilam {
    animation-delay: 40s;
}

.map-wrapper .lorestan {
    animation-delay: 44s;
}

.map-wrapper .arak {
    animation-delay: 48s;
}

.map-wrapper .alborz {
    animation-delay: 52s;
}

.map-wrapper .tehran {
    animation-delay: 56s;
}

.map-wrapper .qom {
    animation-delay: 60s;
}

.map-wrapper .semnan {
    animation-delay: 64s;
}

.map-wrapper .golestan {
    animation-delay: 68s;
}

.map-wrapper .northKhorasan {
    animation-delay: 72s;
}

.map-wrapper .khorasanRazavi {
    animation-delay: 76s;
}

.map-wrapper .southKhorasan {
    animation-delay: 80s;
}

.map-wrapper .esfehan {
    animation-delay: 84s;
}

.map-wrapper .yazd {
    animation-delay: 88s;
}

.map-wrapper .chaharMahal {
    animation-delay: 92s;
}

.map-wrapper .ahmad {
    animation-delay: 96s;
}

.map-wrapper .khuzestan {
    animation-delay: 100s;
}

.map-wrapper .bushehr {
    animation-delay: 104s;
}

.map-wrapper .fars {
    animation-delay: 108s;
}

.map-wrapper .kerman {
    animation-delay: 112s;
}

.map-wrapper .hormozgan {
    animation-delay: 116s;
}

.map-wrapper .sistan {
    animation-delay: 120s;
}

.members-messages {
    font-size: 14px;
    height: 283px;
    padding: 43px 60px 40px;
    border-radius: 10px;
    position: relative;
    text-align: center;
    margin-bottom: 40px;
    margin-top: 50px;
    background: linear-gradient(#eee,transparent);
}

    .members-messages * {
        text-align: justify;
        font-size: 13px;
    }

.members-messages-bullets {
    list-style-type: none;
    position: absolute;
    bottom: 11px;
    text-align: center;
    margin: auto;
    right: 0;
    left: 0;
}

    .members-messages-bullets li {
        width: 8px;
        height: 8px;
        background: #d2d2d2;
        margin: 3px 1px;
        display: inline-block;
        border-radius: 11px;
    }

        .members-messages-bullets li.active {
            background: #da0000;
        }

.members-messages .members-messages-display > p {
    background: #14aa57;
    width: 500px;
    margin: 0 auto;
    padding: 10px;
    border-radius: 20px;
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    line-height: 50px;
}

.members-messages .members-messages-display h2 {
    font-size: 15px;
    color: #da0000;
    text-align: right;
}

    .members-messages .members-messages-display h2 span {
        display: inline-block;
        font-size: 12px;
        color: #999;
        margin-right: 20px;
        line-height: 80px;
        text-align: center;
        position: relative;
    }

        .members-messages .members-messages-display h2 span:before {
            content: "";
            position: absolute;
            right: -10px;
            width: 2px;
            height: 40px;
            background: linear-gradient(transparent,#ddd,transparent);
            top: 20px;
        }

.members-messages:after {
    right: -4px;
    top: -5px;
    transform: rotate(180deg);
    animation: 60s tekoon2 infinite;
}

.members-messages:after, .members-messages:before {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    background: url(/icons/left-quote.png)no-repeat center left;
    background-size: 100%;
}

.members-messages:before {
    left: -11px;
    bottom: -17px;
    animation: 45s tekoon infinite;
}

.members-messages > h2 {
    background: #e5e5e5;
    color: #9e9e9e;
    border-radius: 2px 2px 0 0;
    font-size: 12px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    margin: auto;
    height: 40px;
    line-height: 40px;
    text-align: right;
    padding-right: 57px;
}

    .members-messages > h2:before {
        content: "";
        position: absolute;
        top: 0;
        height: 2px;
        width: 100%;
        left: 0;
        background: linear-gradient(90deg,#eee,#da0000,#eee);
    }

.management-container .management-right .management-units .management-box:hover {
    background: linear-gradient(-90deg,#f9e2e2,#fee) !important;
    color: #000 !important;
}

.management-container {
    width: 100%;
    height: 100vh;
    display: flex;
    border-bottom: 2px solid transparent;
    border-image-slice: 1;
    margin: 50px 0;
}

    .management-container .management-right {
        width: 20%;
        height: auto;
        border-left: 2px solid transparent;
        border-image-slice: 1;
        margin-left: 40px;
    }

        .management-container .management-right .management-right-header {
            width: 100%;
            height: auto;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 50px;
            border-bottom: 2px solid transparent;
            border-image: linear-gradient(90deg,transparent,#eee,transparent);
            border-image-slice: 1;
            padding-top: 20px;
            position: relative;
        }

        .management-container .management-right .header-parent .management-user-profile-pic {
            width: 70px !important;
            height: 70px !important;
        }

        .management-container .management-right .header-parent .management-manager-fullname {
            font-size: 12px !important;
            background: #fff;
            position: relative;
        }

        .management-container .management-right .header-parent:before {
            content: '';
            width: 10px;
            height: 174px;
            left: 0;
            right: 0;
            border-left: 5px dashed #14aa5755;
            position: absolute;
            margin: auto;
        }

        .management-container .management-right .management-right-header .management-user-profile-pic {
            width: 160px;
            height: 160px;
            border-bottom: #14aa57 4px solid;
            border-radius: 50%;
            position: relative;
            display: block;
            margin: 0 auto 20px;
            object-fit: contain;
        }

            .management-container .management-right .management-right-header .management-user-profile-pic img {
                width: 100%;
                border-radius: 50%;
                position: absolute;
                bottom: 1px;
            }

        .management-container .management-right .management-right-header span {
            margin-right: 30px;
            display: block;
        }

        .management-container .management-right .management-right-header .management-manager-fullname {
            font-size: 17px;
            font-weight: bold;
            text-align: center;
            width: 100%;
            min-width: 200px;
        }

        .management-container .management-right .management-right-header .management-manager-post {
            color: #d60000;
            font-weight: bold;
        }

        .management-container .management-right .management-units {
            width: 100%;
            margin: auto;
            padding-top: 20px;
        }

            .management-container .management-right .management-units .management-box {
                width: 100%;
                height: 45px;
                border-radius: 6px;
                display: flex;
                align-items: center;
                padding: 0 10px;
                background: rgb(239,239,239);
                background: linear-gradient(-90deg,#f9e2e2,#fee);
                margin-bottom: 20px;
                color: #000;
                font-weight: 700;
                font-size: 14px;
            }

                .management-container .management-right .management-units .management-box img {
                    width: 25px;
                    margin-left: 5px;
                    border-radius: 50px;
                    height: 25px;
                    object-fit: cover;
                }

                .management-container .management-right .management-units .management-box:hover {
                    background: rgb(20,170,87);
                    background: linear-gradient(90deg, rgba(20,170,87,1) 0%, rgba(20,170,87,1) 100%);
                    color: white;
                }

                .management-container .management-right .management-units .management-box span.boxIcon::after {
                    content: "\f00c";
                    font-family: fontAwsome;
                    display: inline-block;
                    position: absolute;
                    font-size: 25px;
                    color: #14aa57;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%,-50%);
                }

    .management-container .management-left {
        text-align: justify;
        font-size: 12px;
        line-height: 40px;
        height: 570px;
        overflow: auto;
        padding: 20px;
        background: #eee;
        border-radius: 10px;
        width: 80%;
    }

        .management-container .management-left .management-description {
            text-align: justify;
            font-size: 12px;
            line-height: 40px;
            height: 570px;
            overflow: auto;
            padding: 20px;
            background: #eee;
            border-radius: 10px;
        }

            .management-container .management-left .management-description * {
                text-align: justify;
            }

            .management-container .management-left .management-description h3 {
                color: #511;
                font-size: 12px;
            }

.multimediacenter {
    min-height: 500px;
    color: #fff;
    border-radius: 20px;
    position: relative;
    margin-top: 6px;
}

.multimediacenter-bullets {
    display: inline-block;
    vertical-align: top;
    width: 70%;
}

    .multimediacenter-bullets a h2 {
        font-size: 13px;
        border-radius: 4px;
        padding: 0 20px;
        position: relative;
        color: #444;
        text-align: center;
        line-height: 2.2;
        display: block;
        font-weight: 200;
    }

    .multimediacenter-bullets img {
        width: calc(100% - 30px);
        border-radius: 10px;
        height: 150px;
        margin: 15px;
        transition: .5s all ease;
    }

    .multimediacenter-bullets li {
        width: 31.5%;
        margin-left: 2.666%;
    }

    .multimediacenter-bullets li, .multimediacenter-main {
        vertical-align: top;
        display: inline-block;
        position: relative;
    }

        .multimediacenter-bullets li:before {
            content: "";
            position: absolute;
            left: -5%;
            height: 100%;
            width: 2px;
            background: linear-gradient(#111,#000,#111);
            opacity: .2;
            display: none;
        }

        .multimediacenter-bullets li a {
            font-size: 13px;
            padding: 0;
            height: 310px;
            color: #fff;
            background: #fff;
            display: block;
            border-radius: 10px;
            margin-bottom: 23px;
            box-shadow: 0 5px 15px 0 rgba(96,96,98,.07);
        }

            .multimediacenter-bullets li a:hover {
                background: #fee;
            }

            .multimediacenter-bullets li a p {
                display: none;
            }

.multimediacenter-main {
    width: 27%;
    margin-left: 3%;
    font-size: 11px;
    background: #fee;
    padding: 20px;
    min-height: 642px;
    border-radius: 10px;
}

    .multimediacenter-main .tagaudio, .multimediacenter-main .tagpic, .multimediacenter-main .tagvideo {
        position: absolute;
        top: 256px;
        left: 20px;
    }

    .multimediacenter-main h2 {
        font-size: 20px;
        margin: 14px 0 15px 15px;
        color: #811;
        line-height: 2;
    }

    .multimediacenter-main img {
        width: 100%;
        margin-top: 60px;
        border-radius: 15px;
    }

    .multimediacenter-main p {
        font-size: 14px;
        color: #464444;
    }

.multimediacenter > h2 {
    position: absolute;
    color: #811;
    font-size: 17px;
    z-index: 1;
    top: 20px;
    right: 17px;
    padding-right: 62px;
}

    .multimediacenter > h2:before {
        content: "";
        width: 15px;
        height: 10px;
        border-radius: 50px;
        background: linear-gradient(#d00,#ff4545);
        position: absolute;
        top: 9.5px;
        right: 31px;
        border-right: 4px solid #424242;
        animation: 1s infinite winking;
    }

.news {
    background: #b1000c;
    height: 530px;
    padding: 20px 0;
    position: relative;
}

.news-list {
    display: block;
    border-radius: 0 0 10px 10px;
    padding: 0;
}

    .news-list .oneslide, .tabcontents .oneslide {
        display: block;
        position: relative;
        width: 100%;
        padding: 5px 0;
    }

        .news-list .oneslide .date, .tabcontents .oneslide .date {
            font-size: 11px;
            color: #444;
            font-weight: 200;
            display: block;
            letter-spacing: -.5px;
            text-align: right;
            border-radius: 5px;
            padding: 2px 20px;
            margin-bottom: 20px;
        }

        .news-list .oneslide.hightlight h2, .tabcontents .oneslide.hightlight h2 {
            color: #da0000;
            font-weight: 700;
        }

            .news-list .oneslide.hightlight h2:before, .tabcontents .oneslide.hightlight h2:before {
                background: #14aa57;
            }

        .news-list .oneslide:before, .tabcontents .oneslide:before {
            content: "";
            position: absolute;
            bottom: 0;
            right: -20px;
            left: -20px;
            margin: auto;
            height: 1px;
            background: #fdd;
        }

        .news-list .oneslide h2 .imagenews, .tabcontents .oneslide h2 .imagenews {
            display: inline-block;
            vertical-align: middle;
            color: #da0000;
            padding: 0 5px;
            direction: ltr;
            font-size: 0;
            letter-spacing: .2px;
            border-right: 0;
            background: url(/icons/image.png)no-repeat right center;
            width: 20px;
            height: 15px;
            background-size: 15px;
        }

        .news-list .oneslide h2, .tabcontents .oneslide h2 {
            color: #000;
            font-size: 12px;
            padding-bottom: 5px;
            position: relative;
            text-align: justify;
            display: inline-block;
            vertical-align: top;
            padding-right: 20px;
            line-height: 1.9;
            font-weight: 400;
            letter-spacing: -.2px;
        }

            .news-list .oneslide h2:after, .tabcontents .oneslide h2:after {
                content: "";
                position: absolute;
                right: -3px;
                top: 7px;
                background: linear-gradient(#ffa1a1,#eee);
                border-radius: 20px;
                width: 1px;
                height: 130px;
            }

            .news-list .oneslide h2:before, .tabcontents .oneslide h2:before {
                content: "";
                position: absolute;
                right: -6px;
                top: 7px;
                background: #da0000;
                border-radius: 20px;
                width: 7px;
                height: 7px;
                z-index: 4;
            }

        .news-list .oneslide h4, .tabcontents .oneslide h4 {
            font-size: 9px;
            color: #8a0505;
            font-weight: 400;
            height: 14px;
            padding-right: 7px;
        }

        .news-list .oneslide img, .tabcontents .oneslide img {
            width: 85px;
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 10px;
            border: 1px solid #444;
            max-height: 85px;
            min-height: 75px;
            display: none;
        }

    .news-list ul, .tabcontents ul {
        list-style-type: none;
    }

        .news-list ul li:last-child .oneslide:before, .tabcontents ul li:last-child .oneslide:before {
            display: none;
        }

.news .news-container {
    width: 80%;
    margin: 48px auto;
    overflow: hidden;
    position: relative;
}

    .news .news-container ul {
        font-size: 0;
        width: 5000%;
        transition: transform .5s ease-in-out;
    }

.news .next, .news .previous {
    background: url(/icons/next.png)no-repeat;
    left: 110px;
    background-size: 15px !important;
    width: 20px;
    height: 30px;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

.news .previous {
    left: 50px;
    transform: rotate(180deg);
}

.news .titr-news-section {
    color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    display: block;
    align-content: center;
    right: 60px;
}

.newsboxes .archivebtn {
    position: absolute;
    bottom: 15px;
    left: 20px;
    background: #c33;
    color: #fff;
    font-size: 12px;
    padding: 0 5px;
    border-radius: 2px;
}

.newsboxes a h4 {
    font-size: 12px;
    color: #888;
}

.newsboxes li .category-picture {
    padding: 0;
    min-height: 0;
    border: 0;
}

    .newsboxes li .category-picture * {
        display: none !important;
    }

    .newsboxes li .category-picture:hover {
        border: 0 !important;
        opacity: .8;
    }

    .newsboxes li .category-picture img {
        width: 100%;
        display: block !important;
    }

.newsboxes ul {
    list-style-type: none;
    font-size: 0;
    padding: 0 !important;
}

    .newsboxes ul li:nth-child(3n) {
        margin-left: 0;
    }

    .newsboxes ul li a {
        display: block;
        position: relative;
        margin-bottom: 15px;
        border-radius: 9px;
        padding: 0;
        min-height: 425px;
        background: #fff;
        transition: .5s all ease;
        padding: 20px;
        box-shadow: 0 0 12.5px #0001;
    }

        .newsboxes ul li a .date {
            padding: 0;
            font-size: 13px;
            color: #444;
            display: inline-table;
            font-weight: 400;
            position: absolute;
            right: -3px;
            text-align: center;
            height: 35px;
            line-height: 35px;
            width: 100%;
            bottom: 0;
            border-radius: 0 0 8px 8px;
        }

            .newsboxes ul li a .date:before {
                content: "";
                background: url(/icons/date.png)no-repeat center center;
                width: 20px;
                height: 20px;
                position: absolute;
                right: 7px;
                top: 7px;
                background-size: 15px;
                opacity: .4;
            }

        .newsboxes ul li a:hover {
            background: #55aa88;
            color: #fff;
        }

            .newsboxes ul li a:hover .date, .newsboxes ul li a:hover h2, .typewriter p a {
                color: #fff;
                background: transparent !important;
            }

                .newsboxes ul li a:hover .date .timespan {
                    color: #fff;
                }

            .newsboxes ul li a:hover img {
                filter: grayscale(0);
            }

        .newsboxes ul li a h2 {
            font-size: 15px;
            line-height: 1.7;
            margin: 0 0 10px;
            padding: 20px 0;
            transition: 1s all ease;
            color: #2d2d2d;
        }

        .newsboxes ul li a img {
            border-radius: 6px;
            display: block;
            margin-bottom: 0;
            width: 100%;
            max-height: 350px;
            background: #f7f7f7;
            object-fit: cover;
            height: 215px;
        }

.taghdirbox ul li a img {
    height: 400px !important;
    max-height: 400px !important;
}

.taghdirboxagency ul li a img {
    height: 100px !important;
    min-height: 150px !important;
    object-fit: contain;
}

.newsboxes ul li a p {
    font-size: 16px;
    color: #444;
    text-align: justify;
}

.newsContainer {
    width: 100%;
    height: auto;
    margin: 40px auto !important;
    display: flex;
}

    .newsContainer .mainnews {
        width: 57%;
        position: relative;
        max-width: 1200px;
        margin-left: 4%;
    }

        .newsContainer .mainnews ul a {
            display: flex;
            width: 100%;
            padding: 30px 0 0;
            position: relative;
            color: #353535;
        }

        .newsContainer .mainnews ul .detailnews a h4 {
            font-size: 12px;
            text-align: justify;
            color: #353535;
            font-weight: 700;
            color: #d44;
        }

        .newsContainer .mainnews ul .detailnews a h2 {
            font-size: 18px;
            text-align: justify;
            margin-bottom: 40px;
            color: #353535;
            font-weight: 700;
        }

        .newsContainer .mainnews ul .detailnews a img {
            max-width: 35%;
            max-height: 400px;
            object-fit: cover;
            margin-left: 30px;
            border-radius: 10px;
        }

        .newsContainer .mainnews ul .detailnews .date {
            font-size: 15px;
            position: absolute;
            bottom: 20px;
            left: 30px;
            color: #aeb2c0;
        }

        .newsContainer .mainnews .detailnews a p, .news ul li h2, .news ul li p {
            text-align: justify;
            font-size: 15px;
            color: #353535;
        }

        .newsContainer .mainnews .newsHeader {
            width: 100%;
            height: 50px;
            background-color: #f9f9f9;
            display: flex;
            align-items: center;
            padding-right: 30px;
            font-size: 12px;
        }

            .newsContainer .mainnews .newsHeader::before {
                content: "";
                height: 20px;
                width: 20px;
                background-color: #ff626c;
                border-radius: 50%;
                display: block;
                position: absolute;
                right: -10px;
            }

        .newsContainer .mainnews .newsPublishDate {
            position: absolute;
            left: 0;
            color: #353535;
            font-size: 12px;
            bottom: 0;
        }

    .newsContainer .sidenews {
        width: 39%;
        display: flex;
        flex-direction: column;
        font-family: WebmehrazFont;
        align-items: flex-start;
        background-color: #f5f5f5;
        position: relative;
        border-radius: 10px;
        overflow: hidden;
    }

        .newsContainer .sidenews .newsPage {
            width: 100%;
            display: none;
            position: relative;
        }

            .newsContainer .sidenews .newsPage ul {
                width: 100%;
                padding: 20px;
            }

                .newsContainer .sidenews .newsPage ul li {
                    display: flex;
                    margin-bottom: 20px;
                    font-size: 12px;
                    padding: 0 175px 0 0;
                    min-height: 100px;
                    position: relative;
                }

                    .newsContainer .sidenews .newsPage ul li a {
                        color: #000;
                        width: 100%;
                        transition: 0.5s all ease;
                    }

                    .newsContainer .sidenews .newsPage ul li h4 {
                        color: #d44;
                        font-size: 11px;
                    }

                    .newsContainer .sidenews .newsPage ul li h2 {
                        font-size: 14px;
                        font-weight: 500;
                        text-align: justify;
                    }

                    .newsContainer .sidenews .newsPage ul li a img {
                        width: 150px;
                        margin-left: 20px;
                        border-radius: 10px;
                        position: absolute;
                        right: 0;
                        height: 100px;
                        object-fit: cover;
                    }

                    .newsContainer .sidenews .newsPage ul li a p {
                        line-height: 30px;
                        width: 100%;
                    }

                    .newsContainer .sidenews .newsPage ul li a > span {
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        opacity: 0.4;
                    }

                    .newsContainer .sidenews .newsPage ul li a span .timespan {
                        margin-right: 10px;
                    }

                    .newsContainer .sidenews .newsPage ul li a:hover {
                        opacity: 0.8;
                    }

        .newsContainer .sidenews .newsTab {
            width: 100%;
            height: 50px;
            background-color: #f5f5f5;
            display: flex;
            justify-content: flex-end;
            font-size: 15px;
            align-items: top;
            overflow: hidden;
            padding: 0 10px;
        }

            .newsContainer .sidenews .newsTab span {
                margin-right: 30px;
                cursor: pointer;
                font-weight: 500;
                border-radius: 0 0 6px 6px;
                height: 45px;
                vertical-align: top;
                display: inline-block;
                padding: 0 10px;
                line-height: 45px;
            }

                .newsContainer .sidenews .newsTab span.active {
                    background-color: #fff;
                    box-shadow: 0 0 12.5px #0001;
                }

    .newsContainer .detailnews {
        padding: 30px;
        background: linear-gradient(90deg,#fafafa,#fff);
        margin-top: 20px;
        min-height: 400px;
        border-radius: 10px;
    }

.news ul li {
    width: 270px;
    margin-left: 20px;
    background: #e9eaee;
    border-radius: 10px;
    height: 400px;
}

.news ul li, .shahid-comment div div {
    vertical-align: top;
    display: inline-block;
}

    .news ul li h2 {
        font-size: 14px;
        padding: 15px 15px 15px;
        margin-bottom: 0;
        font-weight: 500;
        color: #000;
    }

    .news ul li img {
        display: block;
        width: 100%;
        border-radius: 10px 10px 0 0;
        object-fit: cover;
        height: 170px;
    }

    .news ul li p {
        font-size: 12px;
        color: #5b6176;
        padding: 15px;
        max-height: 128px;
        overflow: hidden;
    }

.oneanswerresult {
    position: relative;
    display: block;
    font-size: 14px;
    margin-top: 10px;
}

    .oneanswerresult span {
        display: block;
        width: 100%;
        height: 8px;
        background: #fff;
        box-shadow: 0 0 0 1px #ddd;
    }

        .oneanswerresult span b {
            display: inline-block;
            vertical-align: top;
            height: 8px;
            background: #f90;
        }

.OneUser {
    position: relative;
    padding: 15px 64px 5px 0;
    min-height: 140px;
    margin-bottom: 10px;
    border-radius: 4px;
    box-sizing: border-box;
}

    .OneUser img {
        right: 5px;
        top: 5px;
        height: 120px;
        border: 5px solid #fff;
        border-radius: 100px;
    }

    .OneUser img, .firstpageonepoll .btnSingle {
        width: 120px;
        display: block;
        position: absolute;
    }

    .OneUser p {
        margin-top: 11px;
        font-weight: 300;
        color: #393939;
        margin-right: 65px;
        font-size: 18px;
    }

    .OneUser strong {
        background: #e4e4e4;
        color: #636363;
        padding: 0 70px 0 10px;
        font-size: 14px;
        border-top: 4px solid #da0000;
        display: block;
    }

.OpenChartBanner {
    position: relative;
    margin: 10px 0 0;
}

    .OpenChartBanner a, .report-list li a, .services .one-service img {
        border-radius: 10px;
        display: block;
    }

    .OpenChartBanner img, .cover-ititle img, .slider-display img {
        width: 100%;
        border-radius: 10px;
    }

.question {
    display: block;
    color: #555;
    padding: 0 40px 0 40px;
    background: #eee;
    /*! margin-bottom: 5px; */
    background: transparent;
    transition: .5s all ease;
    cursor: pointer;
    background-size: 20px;
    position: relative;
    font-weight: 500;
}

    .question::before {
        content: "";
        width: 20px;
        height: 20px;
        display: inline-block;
        background-color: #00B1A5;
        border-radius: 50%;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .question.active {
        background-color: #ededed;
    }

        .question.active::before {
            background-color: #005C55;
        }

    .question::after {
        content: "";
        width: 20px;
        height: 20px;
        background: url('../../icons/arrow-right.png') center center/cover no-repeat;
        border-radius: 50%;
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%) rotate(180deg);
    }

.regions {
    min-height: 500px;
    padding: 50px 0;
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: auto;
    border-radius: 32px;
    background: #00655E url("/images/layer.png") left bottom no-repeat;
    background-size: 1500px;
    margin-top: 40px;
}

.report-list {
    position: relative;
    text-align: center;
}

    .report-list li:before {
        display: none;
    }

    .report-list li a {
        width: 350px;
        height: 50px;
        line-height: 50px;
        color: #333;
        background: #ffc9c9;
        margin: 0 auto 10px;
        text-align: center;
    }

        .report-list li a:hover {
            background: #da0000;
            color: #fff;
        }

.right-boxes {
    width: 45%;
    display: inline-block;
    margin-left: 6%;
    vertical-align: top;
}

.services {
    position: relative;
    padding: 0;
    border-radius: 10px;
    margin: 0 0 40px;
}

    .services, .services ul {
        font-size: 0;
    }

        .services .active {
            border: 1px solid #f90;
            background: #fff;
        }

        .services .nxt {
            left: 11px;
            background: url(/icons/prv.png)center;
        }

        .services .nxt, .services .prv {
            width: 26px;
            height: 95px;
            position: absolute;
            display: block;
            top: 74px;
            transition: .5s all ease;
            border-radius: 4px;
            box-shadow: 0 0 4px 10px rgba(0,0,0,.02);
        }

            .services .nxt:hover, .services .prv:hover {
                cursor: pointer;
            }

        .services .one-service {
            position: relative;
            font-size: 0;
            display: block;
            opacity: 1;
            transition: 1s all ease;
        }

            .services .one-service:after {
                content: "";
                position: absolute;
                left: 0;
                bottom: -6px;
                width: 100%;
                height: 1px;
                background: linear-gradient(-90deg,#fee,#fcc,#fee);
                display: none;
            }

            .services .one-service:before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 2px;
                background: linear-gradient(#fff,#eee,#fff);
                display: none;
            }

            .services .one-service:hover {
                opacity: .5;
            }

            .services .one-service h2 {
                font-weight: 700;
                color: #333;
                font-size: 0;
                margin: 0;
                text-align: right;
                line-height: 74px;
                height: 65px;
            }

                .services .one-service h2 span {
                    font-size: 0;
                    color: #a4a4a4;
                    margin-top: 7px;
                    text-align: center;
                    font-weight: 400;
                    display: none;
                }

            .services .one-service img {
                width: 40px;
                height: 40px;
                margin: auto;
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                padding: 6px;
                background: #ffc1c1;
            }

            .services .one-service p {
                text-align: justify;
                margin-top: 10px;
                color: #333;
                display: none;
            }

        .services .prv {
            right: 11px;
            background: url(/icons/nxt.png)center;
        }

        .services ul li {
            position: relative;
            display: inline-block;
            vertical-align: top;
            width: 16%;
            margin-left: .8%;
        }

.committees-list {
    list-style-type: none !important;
    width: 100%;
    font-size: 0;
    margin-top: 40px;
    padding: 0 !important;
}

    .committees-list li {
        display: inline-block;
        vertical-align: top;
        width: 48%;
        margin-left: 4%;
    }

        .committees-list li:nth-child(2n) {
            margin-left: 0 !important;
        }

        .committees-list li:before {
            display: none;
        }

        .committees-list li a {
            height: 65px;
            line-height: 65px;
            color: #333;
            background: #ffeeee;
            margin: 0 auto 10px;
            text-align: center;
            position: relative;
            display: block;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 700;
        }

            .committees-list li a:hover {
                background: #da0000;
                color: #fff;
            }

            .committees-list li a img {
                width: 60px;
                position: absolute;
                right: 3px;
                top: 2px;
            }

.news-section {
    max-width: 100%;
    margin: 50px auto;
    padding: 0 20px;
    display: flex;
    background: #f9f9f9 url("/images/layer1.png") no-repeat;
    background-size: 100%;
}

.news-header {
    text-align: right;
    margin-bottom: 30px;
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .news-header h2 {
        font-size: 32px;
        color: #828282;
        margin-bottom: 10px;
        font-weight: 700;
    }

    .news-header p {
        font-size: 16px;
        color: #353535;
        font-weight: 400;
    }

.news-slider {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: 400px;
}

.slider-track {
    position: relative;
    width: 100%;
    min-height: 400px;
}

.news-slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    opacity: 0;
    display: none;
    transform: translateX(0);
    height: 100%;
}

    .news-slide.active {
        display: flex;
        opacity: 1;
    }

.news-image {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 45%;
    height: 85%;
    border-radius: 15px;
    overflow: hidden;
    z-index: 10;
}


    .news-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 5px 15px rgba(0, 0, 0, 0.15);
    }

.news-content {
    position: absolute;
    right: 0%;
    top: 50%;
    transform: translateY(-50%);
    width: 60%;
    padding: 15px 25px 15px 15px;
    padding-left: 10%;
    background-color: #DEDEDE;
    border-radius: 25px;
    min-height: 65%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .news-content h2 {
        font-size: 22px;
        color: #1F1F1F;
        margin-bottom: 15px;
        line-height: 1.6;
        font-weight: 600;
        flex-shrink: 0;
    }

    .news-content p {
        font-size: 14px;
        color: #4F4F4F;
        line-height: 1.8;
        margin-bottom: 20px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-shrink: 1;
    }

    .news-content .btn {
        flex-shrink: 0;
        position: absolute;
        bottom: 20px;
    }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 40px;
    height: 40px;
    padding: 0px 18px;
    text-decoration: none;
    box-sizing: border-box;
    line-height: 40px;
    width: 150px;
    color: #000;
    text-decoration: none;
}


.btn-readmore::after {
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E3000F url("/icons/arrowNorthEast.png") center center/cover no-repeat;
    background-size: 20px;
    transition: 200ms;
    display: inline-block;
    position: absolute;
    left: 5px;
}


.btn-readmore:hover::after {
    transform: rotate(-45deg);
}

.btn-readmore {
    color: #000;
    background-color: #fff;
    font-size: 13px;
    font-weight: 400;
}

.slider-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-end;
    height: 63%;
}

.slider-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.prev-btn {
    background: #DEDEDE url("/icons/Vector.png") center center/cover no-repeat;
    background-size: 14px;
}

    .prev-btn:hover {
        transform: scale(1.1);
    }

.next-btn {
    background: #DEDEDE url("/icons/Vector.png") center center/cover no-repeat;
    background-size: 14px;
    transform: rotate(180deg);
}

    .next-btn:hover {
        transform: rotate(180deg) scale(1.1);
    }

.shahid-comment {
    margin: 65px auto;
    font-size: 0;
}



.comment-container {
    width: 100%;
    overflow: hidden;
    padding: 40px;
}

.comment-list {
    display: flex;
    flex-direction: row;
    direction: rtl; /* راست به چپ */
    transition: transform 0.5s ease;
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment-item {
    flex: 0 0 33.333%; /* هر باکس یک سوم کانتینر */
    box-sizing: border-box;
    margin-left: 30px; /* فاصله بین باکس‌ها در RTL */
    background: #EDEDED;
    padding: 30px 35px;
    border-radius: 28px;
    position: relative;
    transition: all 0.5s ease;
    opacity: 0.5;
    z-index: 1;
}

.comment-list .comment-item.active {
    transform: scale(1) !important;
    opacity: 1 !important;
    z-index: 10 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    background: #F9F9F9;
}

.comment-item::after {
    content: '';
    position: absolute;
    z-index: 10;
    left: 11px;
    top: 10px;
    display: block;
    width: 45px;
    background: url("/images/cama.png") no-repeat;
    background-size: 45px;
    height: 45px;
    pointer-events: none;
}

.comment-item div {
    width: 100%;
    padding: 0 80px 0 0;
    margin-bottom: 20px;
    position: relative;
}

    .comment-item div img {
        height: 70px;
        border-radius: 50%;
        position: absolute;
        top: -20px;
        right: 0;
    }

    .comment-item div h3 {
        color: #1F1F1F;
        font-size: 15px;
        margin-bottom: 5px;
    }

    .comment-item div span {
        color: #828282;
        font-size: 12px;
        display: block;
    }

    .comment-item div::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background: #DEDEDE;
        width: 100%;
        left: 0;
        bottom: -20px;
    }

.comment-item p {
    color: #000;
    font-size: 15px;
    line-height: 1.8;
    margin-top: 30px;
}

.slider-controls {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 0;
    flex-direction: row;
}

.slider-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.prev-btn {
    background: #DEDEDE url("/icons/Vector.png") center center/cover no-repeat;
    background-size: 14px;
}

    .prev-btn:hover {
        transform: scale(1.1);
    }

.next-btn {
    background: #DEDEDE url("/icons/Vector.png") center center/cover no-repeat;
    background-size: 14px;
    transform: rotate(180deg);
}

    .next-btn:hover {
        transform: rotate(180deg) scale(1.1);
    }

.shahid-comment > div {
    font-size: 0;
    display: inline-block;
    width: 48%;
    vertical-align: top;
    margin-left: 4%;
}

.slider-container-shahid {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 300px;
    margin-top: 75px;
}

.shahid-list ul {
    list-style: none;
    position: relative;
    width: 100%;
    max-width: 800px;
    overflow: hidden;
    min-height: 300px;
}

    .shahid-list ul li.slide {
        background: #f9f9f9;
        border-radius: 40px;
        padding: 30px 30px 20px 145px;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        transform: translateX(100px);
        pointer-events: none;
        height: 300px
    }

        .shahid-list ul li.slide.active {
            opacity: 1;
            transform: translateX(0);
            pointer-events: auto;
            z-index: 2;
        }

        .shahid-list ul li.slide.slide-out-left {
            opacity: 0;
            transform: translateX(-100px) scale(0.95);
        }

        .shahid-list ul li.slide.slide-out-right {
            opacity: 0;
            transform: translateX(100px) scale(0.95);
        }

    .shahid-list ul li h2 {
        color: #222;
        font-size: 18px;
        margin-bottom: 15px;
        font-weight: 600;
    }

    .shahid-list ul li img {
        position: absolute;
        width: 125px;
        left: 20px;
        height: auto;
        border-radius: 20px;
        transition: transform 0.3s ease;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    .shahid-list ul li.slide.active img {
        animation: imageZoom 0.6s ease-out;
    }

@keyframes imageZoom {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.shahid-list ul li p {
    color: #222;
    font-size: 14px;
    margin-bottom: 15px;
}

.prev-btn {
    order: -1;
}

.next-btn {
    order: 1;
}

.shahid-list ul li a {
    text-decoration: none;
    display: block;
    height: 100%;
    min-height: 300px;
}

.slider-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.prev-btn {
    background: #DEDEDE url("/icons/Vector.png") center center/cover no-repeat;
    background-size: 14px;
}

    .prev-btn:hover {
        transform: scale(1.1);
    }

.next-btn {
    background: #DEDEDE url("/icons/Vector.png") center center/cover no-repeat;
    background-size: 14px;
    transform: rotate(180deg);
}

    .next-btn:hover {
        transform: rotate(180deg) scale(1.1);
    }

.btn-shahid-readmore {
    color: #000;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 20px;
    right: 30px;
}

    .btn-shahid-readmore::after {
        content: "";
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 10px;
        background: #008076 url("/icons/arrowNorthEast.png") center center/cover no-repeat;
        background-size: 20px;
        transition: 500ms;
        display: inline-block;
    }

.show {
    transform: translateY(0) scale(1) translateX(0) !important;
    opacity: 1 !important;
}

.slidebox {
    position: relative;
    overflow: visible;
    height: auto;
}

.slider {
    margin: 10px 0 30px;
}

.slider-display {
    position: relative;
    min-height: 600px;
    padding: 50px;
    background: linear-gradient(#f7e8e8,snow);
    border-radius: 10px;
    margin-top: 30px;
}

    .slider-display h2 {
        font-size: 18px;
        font-weight: 700;
        padding-top: 0;
        width: 95%;
        line-height: 1.4;
        color: #0e4f2e;
        margin-top: 0;
        max-height: 70px;
    }

    .slider-display h2, .slider-display p {
        transition: .5s all ease;
        transform: translateY(200px);
        opacity: 0;
    }

    .slider-display img {
        position: relative;
        transition: 2.5s all ease;
        opacity: 0;
    }

    .slider-display p {
        font-size: 14px;
        color: #000 !important;
        margin-top: 20px;
        padding: 0;
        text-align: justify;
        width: 98%;
        height: 90px;
        line-height: 25px;
        font-weight: 200;
    }

    .slider-display span {
        font-size: 12px !important;
        color: #da0000;
        display: block;
        padding: 20px 0 0;
        height: 50px;
    }

.slider:before {
    content: "اخبار ویژه";
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    background: linear-gradient(90deg,#fff,#b9d0ff);
    width: 22%;
    color: #4ca9ff;
    font-size: 37px;
    padding-right: 30px;
    line-height: 180px;
    background-size: auto 88%;
    -webkit-text-stroke: 2px #1568b6;
    display: none;
}

.slider ul {
    list-style-type: none;
    position: absolute;
    left: 15px;
    right: 15px;
    width: 260px;
    text-align: left;
    bottom: 10px;
}

    .slider ul .active {
        background: #da0000 !important;
    }

    .slider ul li {
        display: inline-block;
        height: 10px;
        width: 10px;
        color: #fff;
        background: #f7cccc;
        margin: 3px 6px 0 0;
        border-radius: 22px;
    }

        .slider ul li * {
            display: none !important;
        }

        .slider ul li a {
            position: relative;
            background: #424242;
            display: block;
            padding: 10px;
            height: 62px;
            color: #fff;
            border-bottom: 1px solid #777;
            border-radius: 4px;
        }

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


.esfand11 {
    font-size: 14px;
    line-height: 60px;
    margin: 15px 0;
    background: linear-gradient(45deg, #fff5ce, #eef);
    border-radius: 10px;
    padding: 10px 30px;
    font-weight: 700;
}

    .esfand11 strong {
        color: #da0000;
    }

    .esfand11 a {
        float: left;
        background: linear-gradient(45deg, #14aa57, #305560);
        color: #fff;
        height: 40px;
        line-height: 40px;
        border-radius: 6px;
        padding: 0 15px;
        margin: 10px;
    }

        .esfand11 a.khabar-link {
            background: linear-gradient(45deg,#0090e6,#36c);
        }

        .esfand11 a:hover {
            background: linear-gradient(45deg, #ff4545, #da0000);
        }

.slideshow {
    position: relative;
    width: 100%;
    background: #fff;
    overflow:;
    margin: 0 0 50px 0;
    box-sizing: border-box;
    border-radius: 10px;
    z-index: 4;
}

.mobile-slideshow {
    display: none;
}

.slideshow .display a {
    display: block;
    width: 100%;
    font-size: 0;
}

.slideshow .display div {
    display: inline-block;
    width: calc(50%);
    vertical-align: top;
}

    .slideshow .display div h4 {
        padding: 60px 30px;
        color: #1F1F1F;
        font-size: 26px;
        font-weight: 600;
    }

.slideshow .display p {
    font-size: 18px;
    color: #000;
    font-weight: 400;
    padding: 3px 30px;
    text-align: right;
    text-align: justify;
}

.slideshow .display img {
    display: inline-block;
    width: 50%;
    border-radius: 10px;
    height: 400px;
    vertical-align: top;
}

.slideshowbullets {
    position: absolute;
    left: 50%;
    bottom: -40px;
    font-size: 0;
    height: 30px;
    line-height: 30px;
    text-align: center;
    z-index: 10;
}

    .slideshowbullets .active, .slideshowbullets li:hover {
        background-color: #828282 !important;
        color: #fff;
    }

    .slideshowbullets li {
        display: inline-block;
        width: 33px;
        font-size: 0;
        text-align: center;
        color: #180000;
        position: relative;
        background-color: #DEDEDE;
        height: 4px;
        border-radius: 50px;
        margin: 5px 10px 0 0;
    }

        .slideshowbullets li * {
            display: none;
        }

.slideshow-right, .slideshow-left {
    width: 50px;
    height: 50px;
    background: url(/icons/go-right.png) no-repeat center;
    position: absolute;
    left: 50px;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: 0.5s all ease;
    transform: rotate(180deg);
    display: none;
}

.slideshow-left {
    left: auto;
    right: 50px;
    transform: rotate(0);
}

    .slideshow-right:hover, .slideshow-left:hover {
        opacity: 0.5;
        cursor: pointer;
    }

.slidesubtitle {
    font-size: 12px;
    color: #888;
    padding-top: 10px;
}

.social-responsibility-link img {
    display: block;
    margin: 0;
    border-radius: 7px;
    width: 100%;
}

.statistics {
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .statistics ul {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: end;
    }

        .statistics ul li {
            display: flex;
            width: 85%;
            justify-content: space-between;
            margin-top: 15px;
            align-items: end;
        }

            .statistics ul li.firstLiSprite div, .statistics ul li.secLiSprite div {
                width: 40%;
                background-color: #00655e;
                display: flex;
                justify-content: end;
                border-radius: 10px;
            }

                .statistics ul li.firstLiSprite div.imageContainer, .statistics ul li.secLiSprite div.imageContainer {
                    width: 40%;
                    height: 60px;
                    background-color: #fff;
                    background-position: center center;
                    background-size: cover;
                    animation: fadeInSequence 5s linear infinite;
                    border-radius: 10px 0 0 10px;
                }

            .statistics ul li.line {
                justify-content: end;
                align-items: center;
                cursor: pointer;
                width: 155px;
                height: 40px;
                padding: 0 15px;
            }

                .statistics ul li.line span {
                    display: block;
                    width: 20px;
                    height: 1px;
                    background-color: #000;
                    position: relative;
                    margin-left: 15px;
                    font-size: 14px;
                }

                    .statistics ul li.line span::after {
                        top: 5px;
                    }

                    .statistics ul li.line span::after, .statistics ul li.line span::before {
                        content: "";
                        display: block;
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        background-color: #000;
                    }

                    .statistics ul li.line span::before {
                        top: -5px;
                    }

            .statistics ul li.secLiSprite div {
                width: 70%;
                justify-content: start;
            }

                .statistics ul li.secLiSprite div.imageContainer {
                    border-radius: 0 10px 10px 0;
                }

            .statistics ul li:first-child {
                justify-content: end;
            }

            .statistics ul li span {
                margin-left: 25px;
            }

.sug-box a {
    font-size: 25px;
    text-align: center;
    line-height: 300px;
    width: 48.5%;
    display: inline-block;
    color: #000;
    background-size: 180px;
    font-weight: bolder;
    border-radius: 20px;
    margin-top: 10px;
    transition: 1s ease;
    animation: 40s infinite flower;
}

    .sug-box a:first-child {
        background-color: #efe;
        margin-left: 3%;
        filter: hue-rotate(45deg);
        animation: 60s infinite flower;
    }

    .sug-box a:hover {
        background-color: #da0000 !important;
        color: #fff;
    }

.tabcontents .archivebtn {
    font-size: 13px !important;
    position: absolute;
    bottom: -13px;
    left: 0;
    border: 1px solid #333;
    color: #333;
    padding: 0 25px 0 0;
    border-radius: 6px;
    height: 40px;
    line-height: 40px;
    font-weight: 700;
    text-align: center;
    width: 166px;
    margin: auto;
    background: #fff url(/icons/navbtn-black.png)no-repeat center right 15px;
    right: 0;
    background-size: 15px;
}

.tabcontents > .active {
    display: block;
    padding: 30px 20px 20px;
    background: #fff3f3;
    border-radius: 10px;
    overflow: hidden;
}

.tabcontents > div {
    display: none;
}

.tabs {
    position: relative;
    margin-top: 20px;
    border-radius: 0 0 10px 10px;
}

    .tabs .tabselectors {
        list-style-type: none;
        margin: 0 0-10px;
        line-height: 1.2;
        font-size: 0;
        padding: 0;
    }

        .tabs .tabselectors .active {
            color: #333 !important;
            font-weight: 700;
            font-size: 12px;
            background: #fff3f3;
            border-radius: 6px 6px 0 0;
        }

        .tabs .tabselectors li {
            display: inline-block;
            vertical-align: top;
            width: 33.333%;
            cursor: pointer;
            font-size: 12px;
            background: #fff;
            color: #000;
            padding: 5px 10px;
            transition: .2s all ease;
            height: 40px;
            line-height: 30px;
            text-align: center;
            font-weight: 700;
        }

            .tabs .tabselectors li:last-child {
                margin-right: 0;
            }

.tagaudio, .tagpic, .tagvideo {
    display: inline-block;
    background: #fff;
    font-size: 13px;
    border-radius: 5px;
    padding: 0 0 0 4px;
    height: 25px;
    line-height: 23px;
    position: absolute;
    top: -35px;
    left: 8px;
    background: #14aa57;
    font-weight: 200;
    color: #fff;
    width: 68px;
    margin: auto;
}

    .tagaudio:before {
        background: #14aa57 url(/icons/tagaudio.png)no-repeat center center;
    }

    .tagaudio:before, .tagpic:before, .tagvideo:before {
        content: "";
        width: 25px;
        height: 25px;
        background: #000 url(/icons/tagpc.png)no-repeat center center;
        background-size: 11px;
        display: inline-block;
        vertical-align: top;
        margin-left: 4px;
        border-radius: 0 4px 4px 0;
        filter: invert(1);
    }

    .tagvideo:before {
        background: #da0000 url(/icons/tagvideo.png)no-repeat center center;
    }

.textarea-contact {
    display: block !important;
}

.title-color {
    color: coral;
}

.typewriter {
    position: relative;
    height: 40px;
    background: #fff;
    padding: 0 16px 0 0;
    background: #fff3dc;
    border-radius: 4px;
}

    .typewriter:before {
        content: "";
        width: 15px;
        height: 15px;
        border-radius: 10px;
        background: #ff626c;
        position: absolute;
        top: 12px;
        right: -7px;
        animation: 1s infinite winking;
    }

    .typewriter p {
        overflow: hidden;
        white-space: nowrap;
        animation: typing 6.5s steps(100,end), blink-caret 2.5s step-end infinite;
        font-size: 13px;
        text-align: right;
        direction: rtl;
        height: 40px;
        line-height: 40px;
        margin: 0;
        color: #979393;
        text-shadow: 0 0 .5px #e1e1e1;
        font-weight: 200;
    }

        .typewriter p a {
            color: #000;
        }

.typewriterul {
    display: none;
}

.userpanel {
    background: rgba(0,0,0,.4);
    display: none;
    font-size: 0;
    height: 100vh;
    top: 0;
    width: 100%;
    z-index: 10;
    position: fixed;
}

    .refcode, .userpanel h2 {
        height: 50px;
        line-height: 50px;
    }

.refcode {
    right: 0;
    font-size: 12px;
    font-weight: 500;
    width: 500px;
    max-width: 100%;
    margin: auto;
    border-radius: 10px;
    color: #999 !important;
}

    .refcode span {
        color: #fff;
    }

    .refcode p {
        display: inline-block;
        vertical-align: middle;
        color: #50ffc5;
        font-weight: 200;
        min-height: 50px;
        line-height: 50px;
        padding: 0 25px 0 0;
        margin-right: 40px;
        border-radius: 10px 0 0 10px;
        text-align: right;
        background: url(/icons/tick.png) center right/20px no-repeat;
        letter-spacing: -1px;
        font-size: 15px;
    }

    .refcode.faild p {
        color: #f99;
        background: url(/icons/close.png) center right/15px no-repeat;
    }

.code-box .btncloseuserpanel, .forgot-box .btncloseuserpanel, .login-box .btncloseuserpanel, .signup-box .btncloseuserpanel {
    background: url(/images/close.png) center center no-repeat #fff;
    box-shadow: 0 7px 8px 2px rgba(0,0,0,.04);
    cursor: pointer;
    font-size: 0;
    height: 36px;
    left: 50%;
    opacity: 1;
    position: absolute;
    top: -17px;
    width: 36px;
    margin-left: -18px;
    border-radius: 20px;
    filter: grayscale(1);
    z-index: 4;
}

.login-box .btncloseuserpanel {
    top: -15px;
}

.btncloseuserpanel:hover, .register-box .btncloseregisterbox:hover {
    cursor: pointer;
    filter: grayscale(0);
}

.timer {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
    position: absolute !important;
    top: -45px;
    left: -80px;
    text-align: center;
    height: 40px;
}

    .timer:before {
        content: ': ';
        position: absolute;
        right: 40px;
        top: 10px;
        font-size: 12px;
        font-weight: 500;
    }

    .timer span {
        margin-left: 10px;
        display: inline-block;
        vertical-align: top;
        width: 42px;
        background: #fff;
        border-radius: 10px;
        font-weight: 300;
        height: 44px;
        line-height: 44px;
    }

        .timer span:last-child {
            opacity: 0;
        }

    .timer .sendcodeagain {
        width: 137px;
        position: absolute;
        font-size: 8px;
        color: #f00;
        cursor: pointer;
        background: transparent;
        left: 41px;
        top: -70%;
    }

.userpanel .checkboxes .active {
    background: #f60;
    color: #fff;
}

.userpanel .checkboxes span {
    background: #eee;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 15px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    width: 48%;
}

    .userpanel .checkboxes span img {
        float: right;
        height: 20px;
        margin: 5px 10px 0 0;
        width: auto;
    }

    .userpanel .checkboxes span:first-child {
        margin-left: 4%;
    }

.userpanel .item, .userpanelwithpassword .item {
    padding: 20px 20px 0;
}

.userpanel .passwordinput {
    background: url(/images/pass.png) left 10px center no-repeat;
}

.userpanel .userinput {
    background: url(/icons/028-user-1.png) left 10px center no-repeat;
}

.userpanel > div {
    border-radius: 30px;
    bottom: 0;
    box-shadow: 0 37px 89px #484848;
    box-sizing: unset;
    margin: auto;
    padding: 0px 50px;
    right: 0;
    top: 0;
    width: 470px;
    z-index: 2;
    max-width: 400px;
    max-height: 265px;
    background: #fff;
    display: none;
    position: fixed;
    left: 0;
}

.userpanel h2 {
    color: #555;
    font-size: 20px;
    padding-right: 35px;
    position: relative;
    margin-top: 30px;
    font-weight: 400;
}

    .userpanel h2 img {
        width: 27px;
        position: absolute;
        top: 10px;
        right: 0;
    }

.userpanel .opensignwithpassword {
    font-size: 11px;
    bottom: 50px;
    right: 30px;
    position: absolute;
    background: url(/icons/006-key.png) center right 0/10px no-repeat;
    height: 30px;
    line-height: 30px;
    border-radius: 6px;
    padding: 0 20px 0 10px;
    color: #000;
    cursor: pointer;
    display: none;
}

.forgot a:hover, .userpanel .login .opensignwithpassword:hover {
    opacity: .8;
}

.userpanel .login h2, .userpanelwithpassword .login h2 {
    font-size: 16px;
    text-align: right;
    color: #0e22b4;
    position: relative;
}

    .userpanel .login h2:before, .userpanelwithpassword .login h2:before {
        content: '';
        position: absolute;
        left: 0;
        bottom: -6px;
        height: 5px;
        background: linear-gradient(90deg,#faf7cc,#f8f2b0,#faf6c7);
        right: 0;
    }

    .userpanel .login h2 img, .userpanelwithpassword .login h2 img {
        float: right;
        height: 18px;
        margin-left: 10px;
        opacity: .4;
        position: absolute;
        right: 0;
        top: 17px;
    }

.userpanel .code-box {
    display: block;
    max-height: 265px;
}

.userpanel .login-box {
    min-height: 422px !important;
}

.userpanel .signup-box {
    min-height: 518px !important;
}

.userpanel p {
    font-size: 14px;
    line-height: 2;
    padding-bottom: 10px;
    text-align: justify;
    min-height: 50px;
    color: #777;
    font-weight: 200;
}

.entry, .forgot a {
    color: #000;
}

.mobilesignbox {
    position: relative;
    margin-top: 30px;
}

.userpanel input {
    width: 100%;
    height: 56px;
    background-color: transparent;
    outline: none;
    border: 1px solid #757575;
    position: relative;
    line-height: 30px;
    text-align: right;
    border-radius: 40px;
    padding-right: 20px;
    z-index: 2;
}

.signmobilePlaceholder {
    position: absolute;
    top: -10px;
    right: 20px;
    background-color: #FFF;
    display: inline;
    padding: 0 5px;
    font-size: 14px;
    z-index: 3;
    color: #000;
}

.btn-sendcodebtn {
    background-color: #F9F9F9;
    color: #000;
    font-size: 15px;
    position: absolute;
    left: 52px;
    bottom: 30px;
    font-weight: 300;
}

.confirmcodebox {
    position: relative;
}

.confirmPlaceholder {
    position: absolute;
    top: 40px;
    right: 20px;
    background-color: #FFF;
    display: inline;
    padding: 0 5px;
    font-size: 14px;
    z-index: 3;
    color: #000;
}

.btn-sendcodebtn::after {
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #008076 url("/images/arrowNorthEast.png") center center/cover no-repeat;
    background-size: cover;
    background-size: 20px;
    transition: 500ms;
    display: inline-block;
    position: absolute;
    left: 5px;
}

.btn-sendcodebtn:hover::after {
    transform: rotate(-45deg);
}

.btn-entry {
    background-color: #F9F9F9;
    color: #000;
    font-size: 15px;
    position: absolute;
    left: 52px;
    bottom: 30px;
    font-weight: 300;
}

    .btn-entry::after {
        content: "";
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #008076 url("/images/arrowNorthEast.png") center center/cover no-repeat;
        background-size: cover;
        background-size: 20px;
        transition: 500ms;
        display: inline-block;
        position: absolute;
        left: 5px;
    }

    .btn-entry:hover::after {
        transform: rotate(-45deg);
    }

.intro, .intro-back, .register-box {
    left: 0;
    right: 0;
    top: 0;
}

.entry:before {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    background: url(/icons/previous.png) left 10px center/15px no-repeat;
    left: 5px;
    top: 0;
    bottom: 0;
    margin: auto;
    filter: invert(1);
    opacity: .5;
}

.forgot {
    cursor: pointer;
    display: block;
    font-size: 13px;
    height: 30px;
    margin: 0 !important;
    width: 100%;
}

.reg-box {
    background-color: #fefefe;
    border-radius: 5px;
    box-shadow: 0 1px 2.5px 0 rgba(0,0,0,.15);
    box-sizing: border-box;
    padding: 30px;
    position: relative;
}

    .reg-box p {
        color: #5e5d69;
        font-size: 16px;
        padding-right: 10px;
        padding-top: 5px;
    }

    .reg-box:hover {
        -webkit-box-shadow: 0 6px 15px rgba(0,0,0,.15);
        box-shadow: 0 6px 15px rgba(0,0,0,.15);
    }

.register-box {
    background: #fff;
    bottom: 0;
    font-size: 0;
    margin: auto;
    position: relative;
    z-index: 25;
}

    .register-box .btncloseregisterbox {
        background: url(/images/close.png) center center no-repeat #ddd;
        border-radius: 10px;
        cursor: pointer;
        filter: grayscale(1);
        height: 36px;
        left: 10px;
        opacity: .5;
        position: absolute;
        top: 10px;
        width: 36px;
    }

.userpanel .loginwithconfirmcode, .userpanel .registerlink {
    font-size: 11px;
    right: 50px;
    height: 30px;
    line-height: 30px;
    border-radius: 6px;
    padding: 0 20px 0 10px;
    position: absolute;
    color: #000;
    cursor: pointer;
}

.register-box h2 {
    -webkit-text-stroke: 1px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    padding: 0;
}

.register-student img, .register-teacher img {
    filter: invert(1);
    height: 50%;
    left: 3%;
    opacity: .2;
    position: absolute;
    top: 20px;
    width: auto;
}

.register-student p, .register-teacher p, .webmehraz-statement h2 strong {
    color: #fff;
}

.register-student, .register-teacher {
    background: #fff600;
    cursor: pointer;
    display: inline-block;
    height: 85px;
    padding: 17px 10% 0 0;
    position: relative;
    text-align: right;
    transition: .5s;
    vertical-align: top;
    width: 50% !important;
}

    .register-student, .register-student:hover {
        background: #002e7c;
    }

    .register-teacher h2, .register-teacher p {
        color: #444 !important;
    }

    .register-teacher:hover {
        background: #db5806;
    }

.userpanel .registerlink {
    bottom: 30px;
    background: url(/icons/user.png) top 8px right 0/10px no-repeat;
}

.userpanel .loginwithconfirmcode {
    bottom: 24px;
    background: url(/icons/168-padlock.png) top 8px right 0/10px no-repeat;
}

    .userpanel .loginwithconfirmcode strong {
        font-weight: 500;
    }

.forgot-box {
    display: block;
    margin-top: 29px;
    width: 100%;
}

.management-member-fullname {
    text-align: center;
    margin-bottom: 20px;
}

@keyframes blink {
    0%, to {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@keyframes blinker {
    0%, to {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }
}

@keyframes fadeInSequence {
    0%, to {
        background-image: url(/images/filling1.png);
    }

    5% {
        background-image: url(/images/filling2.png);
    }

    10% {
        background-image: url(/images/filling3.png);
    }

    15% {
        background-image: url(/images/filling4.png);
    }

    20% {
        background-image: url(/images/filling5.png);
    }

    25% {
        background-image: url(/images/filling6.png);
    }

    30% {
        background-image: url(/images/filling7.png);
    }

    35% {
        background-image: url(/images/filling8.png);
    }

    40% {
        background-image: url(/images/filling9.png);
    }

    45% {
        background-image: url(/images/filling10.png);
    }

    50% {
        background-image: url(/images/filling11.png);
    }

    55% {
        background-image: url(/images/filling12.png);
    }

    60% {
        background-image: url(/images/filling13.png);
    }

    65% {
        background-image: url(/images/filling14.png);
    }

    70% {
        background-image: url(/images/filling15.png);
    }

    75% {
        background-image: url(/images/filling16.png);
    }

    80% {
        background-image: url(/images/filling17.png);
    }

    85% {
        background-image: url(/images/filling18.png);
    }

    90%, 95% {
        background-image: url(/images/filling19.png);
    }
}

@keyframes float1 {
    0%, to {
        transform: translate(0,0);
    }

    25% {
        transform: translate(200px,100px);
    }

    50% {
        transform: translate(-30px,300px);
    }

    75% {
        transform: translate(200px,-20px);
    }
}

@keyframes float2 {
    0%, to {
        transform: translate(0,0);
    }

    25% {
        transform: translate(-40px,170px);
    }

    50% {
        transform: translate(50px,400px);
    }

    75% {
        transform: translate(-150px,100px);
    }
}

@keyframes flower {
    0%, to {
        background: #fee url(/icons/clipart-tulip.png)no-repeat center bottom;
        background-size: 180px;
    }

    50% {
        background: #fee url(/icons/clipart-tulip.png)no-repeat left -200px bottom;
        background-size: 120px;
        opacity: .8;
    }

    75% {
        background: #fee url(/icons/clipart-tulip.png)no-repeat right -200px bottom;
        background-size: 120px;
    }
}

@keyframes heartbeat {
    0%, to {
        transform: scale(0);
        opacity: 1;
    }

    50% {
        transform: scale(1);
        opacity: .7;
    }
}

@keyframes tekoon {
    0% {
        transform: rotate(360deg);
    }

    40% {
        transform: translateY(-20px) rotate(5deg);
    }

    60% {
        transform: translateY(5px) rotate(9deg);
        filter: hue-rotate(180deg);
    }

    70% {
        transform: translateY(-5px) rotate(-9deg);
    }

    to {
        transform: rotate(0);
    }
}

@keyframes tekoon2 {
    0%, to {
        transform: rotate(180deg);
    }

    20% {
        filter: hue-rotate(180deg);
    }

    40% {
        transform: translateY(-20px) rotate(185deg) scale(.8);
    }

    60% {
        transform: translateY(5px) rotate(189deg) scale(1);
    }

    70% {
        transform: translateY(-5px) rotate(189deg);
    }
}

/* Directors */

.directors {
    display: flex;
    width: 70%;
    height: 700px;
    overflow: hidden;
    margin: auto;
}

    .directors li {
        height: 100%;
        width: 100px;
        transition: width 0.35s ease;
        overflow: hidden;
        border-radius: 0;
        position: relative;
        margin-left: 15px;
    }

        .directors li img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            filter: blur(4px);
        }

    .directors:not(:has(li:hover)) li:last-child {
        width: calc(100% - 400px);
    }

    .directors li:hover {
        width: calc(100% - 400px);
    }

    .directors:not(:has(li:hover)) li:last-child img {
        filter: blur(0) !important;
    }

    .directors li:hover img {
        filter: blur(0) !important;
    }

    .directors li .directors-caption {
        position: absolute;
        left: 0;
        width: 100%;
        color: #fff;
        text-align: center;
        font-size: 14px;
        line-height: 1.4;
        padding: 6px;
        display: flex;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transform: translateY(-50%);
        transition: all 0.3s ease;
        font-family: webMehrazFont;
        font-weight: 500;
        text-align: right;
        padding-right: 20px;
        flex-direction: column;
        border-radius: 0 0 16px 16px;
        padding-bottom: 30px;
        bottom: 70px;
    }

        .directors li .directors-caption .directors-name {
            font-size: 20px;
            font-weight: 700;
            text-align: right;
            margin-bottom: 10px
        }

        .directors li .directors-caption .directors-role {
            font-size: 12px;
            opacity: 0.85;
            text-align: right;
        }

    .directors li:hover .directors-caption {
        transform: translateY(80%);
        background: linear-gradient( to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0) 100% );
    }

    .directors:not(:has(li:hover)) li:last-child .directors-caption {
        transform: translateY(80%);
        background: linear-gradient( to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0) 100% );
    }








@media (max-width:3000px) {
    .container, .main {
        max-width: 1600px !important;
    }

    .newsboxes ul li a p {
        font-size: 16px;
    }
}

@media (max-width:1600px) {
    .newsboxes ul li a p {
        font-size: 14px;
    }
}

@media (max-width:1400px) {
    .fast-links ul {
        grid-template-columns: auto auto auto auto auto auto auto;
    }

    .l-column .fast-links ul {
        grid-template-columns: auto auto;
    }

    .newsboxes ul li a {
        min-height: 17vw;
    }

    .slider-display h2 {
        font-size: 16px;
    }

    .fast-links ul li img {
        right: 0;
        top: -80px;
        left: 0;
        margin: auto;
    }

    .fast-links ul li a strong {
        padding-top: 40px;
    }

    .fast-links ul li a {
        text-align: center;
        padding-bottom: 20px;
    }

    .fast-links ul li {
        margin-bottom: 45px;
    }
}

@media (max-width:1300px) {
    .newsContainer .mainnews {
        padding-bottom: 50px;
    }

        .newsContainer .mainnews .detailnews {
            flex-direction: column;
        }

            .newsContainer .mainnews .detailnews img, .newsContainer .sidenews .newsPage ul li p {
                /*! margin: 20px auto; */
                /*! width: 80%; */
            }

    .newsContainer .sidenews .newsPage ul li {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

        .newsContainer .sidenews .newsPage ul li img {
            margin: 10px auto;
        }
}

@media (max-width:1280px) {
    .chart-box > div > ins {
        width: 30%;
    }

    .chart-box > div > span {
        width: 40%;
    }

    .newsboxes ul li a {
        padding-bottom: 60px;
    }

        .newsboxes ul li a h2 {
            font-size: 13px;
        }
}

@media (max-width:1200px) {
    .esfand11 {
        text-align: center;
        font-size: 13px;
        line-height: 40px;
    }

        .esfand11 a {
            float: none;
            display: block;
            width: 175px;
            margin: 10px auto 0;
            text-align: center;
        }

    .slideshow {
        margin: 10px 20px 60px 0;
        width: auto;
    }

    .news .titr-news-section {
        right: 0;
    }

    .news .next {
        margin-left: 50px;
    }

    .news .next, .news .previous {
        bottom: 40px;
        left: 45% !important;
        top: unset;
    }

    .news .previous {
        margin-right: 20px;
    }

    .news .titr-news-section {
        position: relative;
        margin: auto;
        display: block;
        text-align: center;
    }

    .news {
        height: 610px;
    }
}

@media (max-width: 1200px) {
    .body-content {
        padding-top: 20px;
    }

    .management-container .management-right .management-right-header .management-user-profile-pic {
        width: 100px;
        height: 100px;
    }

    .management-container .management-right .management-right-header .management-manager-fullname {
        font-size: 18px;
    }

    .management-container .management-right .management-right-header .management-manager-post {
        font-size: 12px;
    }

    .management-container .management-right .management-units .management-box span.boxIcon {
        width: 30px;
        height: 30px;
        margin-left: 20px;
    }

        .management-container .management-right .management-units .management-box span.boxIcon::after {
            font-size: 17px;
        }

    .management-container .management-right .management-units .management-box span.boxDetail {
        font-size: 15px;
    }
}

@media (max-width:1140px) {
    .fast-links ul li img {
        right: 0;
        bottom: 0;
    }

    .fast-links ul li a strong {
    }

    .shahid-comment > div {
        width: 100%;
        margin-left: 0;
        margin-bottom: 30px;
    }

    .all .l-column {
        width: 100%;
    }

    .all .padding-top {
        padding-top: 100px;
    }

    .all .r-column {
        width: 100%;
        margin-left: 0;
    }

    .currency-box {
        height: 33vw;
    }

    .link-box ul li a {
        margin-bottom: 25px;
    }

    .link-box ul li img, .manager-contact {
        height: 18vw;
    }

    .mainnav ul li {
        margin-left: 20px;
        padding-left: 15px;
    }

        .mainnav ul li a {
            font-size: 13px;
        }

    .manager-contact .background-type-div {
        top: 5vw;
    }

    .multimediacenter-bullets, .multimediacenter-main {
        width: 100%;
    }

    .multimediacenter-main {
        margin-left: 0;
    }

    .news .next {
        left: 60px;
    }

    .news .previous {
        left: 35px;
    }

    .slider {
        min-height: 23vw;
        padding: 0;
    }
}


@media (max-width:1100px) {
    .slideshow .display img {
        display: block;
        width: 100%;
        margin-block-end:
    }

    .slideshow {
        margin-bottom: 100px
    }

    .fast-links ul {
        grid-template-columns: auto auto auto auto auto auto;
    }


    .slideshow {
        width: 100%;
        margin: 10px 0 310px 0;
        padding: 0;
    }

        .slideshow .display a {
            height: auto;
        }

    .slideshowbullets li a h4 {
        font-size: 10px;
    }

    .slideshow .display a {
        display: flex;
        width: 100%;
        height: auto;
        font-size: 0;
        flex-direction: column
    }

    display {
        height: auto;
    }

    .slideshow .display div {
        display: block;
        width: 100%;
        vertical-align: top;
    }

        .slideshow .display div h4 {
            padding: 30px;
        }

    .news-content {
        padding: 15px 25px 100px 50px;
    }

    .directors {
        width: 90%;
        height: auto;
        flex-wrap: wrap;
    }

        .directors li img {
            width: 100%;
            height: 100%;
            filter: blur(0);
        }

        .directors li {
            height: 500px;
            width: 45%;
            margin: 2%;
        }
}


@media (max-width:1024px) {
    .sqsh-tabs {
        width: 80%;
    }

    .top-tabs li {
        padding: 15px 20px;
        font-size: 14px;
    }

        .top-tabs li img {
            width: 20px;
            height: 20px;
        }

    .all .campaign {
        top: -10px;
    }

    .contactUsContainer > div {
        width: 45%;
    }
}

@media (max-width:991px) {
    .fast-links ul {
        grid-template-columns: auto auto auto auto auto;
    }

    .management-container {
        flex-direction: column;
        border: none;
    }

        .management-container .management-left {
            width: 90%;
            margin: auto;
            padding: 50px 0;
        }

        .management-container .management-right {
            width: 100%;
            padding: 0;
            border-bottom: 2px solid transparent;
            border-image: linear-gradient(0.25turn, rgba(99,99,99,0), rgba(99,99,99), rgba(99,99,99,0));
            border-image-slice: 1;
        }

            .management-container .management-right .management-units {
                width: 90%;
                margin: auto;
                padding-top: 20px;
            }

    .all .campaign {
        position: relative;
    }

    .all .padding-top {
        padding-top: 50px;
    }

    .members-messages:after, .members-messages:before {
        content: none;
    }

    .newsContainer {
        margin: 50px auto !important;
    }
}

@media (max-width:950px) {
    .newsContainer, .newsContainer .sidenews .newsPage ul li {
        flex-direction: column;
    }

        .newsContainer .mainnews, .newsContainer .sidenews {
            width: 100%;
        }

            .newsContainer .sidenews .newsPage ul li p {
                margin-right: 20px;
            }
}

@media (max-width:900px) {
    .left-answer-box {
        display: none;
    }

    .faq-list ul {
        width: 100%;
        overflow: visible;
        max-height: none;
    }

        .faq-list ul li .answer {
            display: block;
        }
}

@media (max-width:860px) {
    .charter {
        padding: 45px 50px;
    }

        .charter p {
            width: 100%;
        }

    .statistics ul {
        padding: 0 20px;
    }

    footer .footerRight ul ul {
        justify-content: space-between;
        width: 100%;
    }

        footer .footerRight ul ul:last-child {
            margin: 0;
        }

        footer .footerRight ul ul li {
            display: inline-block;
            width: auto;
        }

    .adbox img {
        padding: 0;
    }

    .all .campaign a {
        width: 100%;
        margin: 0 auto 20px;
    }

    .all .l-column {
        display: block;
        width: 100%;
    }

    .all .r-column {
        display: block;
    }

    .articles-box {
        background-size: 100% 400px;
    }

        .articles-box .tablet {
            width: 50%;
        }

    .banners ul li {
        display: inline-block;
        vertical-align: top;
        width: 48%;
        margin-left: 3%;
    }

        .banners ul li:nth-child(2n), .banners ul li:nth-child(4n) {
            margin-left: 0 !important;
        }

        .banners ul li:nth-child(3n) {
            margin-left: 3% !important;
        }



    .chart-box-display-chart, .slider ul li *, .slider ul li a:before {
        display: none;
    }

    .chart-box .iTitle {
        font-size: 16px;
    }



    .chart-box > div > strong {
        transform: rotate(-60deg);
        bottom: -52px;
        background: 0 0;
    }

    .content-page .title {
        padding-left: 0 !important;
    }

    .l-column .services li:hover h2 strong {
        font-size: 16px;
        width: 200px;
        text-align: center;
        position: relative;
        top: auto;
        left: auto;
        z-index: auto;
        background: linear-gradient(90deg,transparent,#ff0,transparent);
        height: 20px;
        line-height: 20px;
        border-radius: 6px;
    }

    .l-column .services li h2 {
        font-size: 13px;
        padding-right: 50px;
    }

    .l-column .services li img {
        left: auto;
    }

    .left-boxes {
        width: 100%;
        display: block;
        margin-top: 0;
    }

    .left-boxes, .right-boxes {
        margin: 0 0 30px;
        min-height: 300px;
    }

    .manager-contact {
        height: 35vw;
    }

        .manager-contact .background-type-div {
            top: 12vw;
            right: 3vw;
        }

    .regions {
        padding: 50px 20px;
    }

    .manateq-content {
        gap: 30px;
    }

    .province-icon {
        width: 20px !important;
        height: 20px !important;
    }

    .province-name {
        font-size: 9px;
        padding: 3px 8px;
    }

    .multimediacenter-bullets img {
        height: auto;
    }

    .multimediacenter-bullets li {
        width: 30%;
        margin: 10px 1.6666% !important;
    }

        .multimediacenter-bullets li:nth-child(3n) {
            margin-left: 0;
        }

        .multimediacenter-bullets li:nth-child(4n) {
            margin-left: 2% !important;
        }

        .multimediacenter-bullets li a {
            height: auto;
            padding-bottom: 20px;
        }

    .news, .regions {
        height: auto;
        padding-bottom: 100px;
    }

    .newsboxes {
        margin-top: 40px;
    }

    .newsContainer .mainnews .detailnews div {
        width: 100%;
        margin: 20px auto;
        padding: 0 10px 0 0;
    }

    .newsContainer .mainnews .detailnews img {
        width: 100% !important;
        margin: 20px auto;
        margin: 0 !important;
    }

    .newsContainer .mainnews .newsPublishDate {
        left: 10px;
        bottom: 10px;
    }

    .newsContainer .sidenews .newsPage ul li img {
        width: 350px;
        margin: 0 !important;
    }

    .newsContainer .sidenews .newsPage ul li p {
        margin: 20px 0 !important;
        width: 350px !important;
    }

    .regions {
        padding: 50px 0;
    }

        .regions > div {
            flex-wrap: wrap;
            padding: 0 !important;
        }

    .right-boxes {
        display: block;
        width: 100%;
    }

    .services {
        height: 90.5vw !important;
        margin: 20px 0 0;
        height: auto !important;
    }

        .services, .services ul li p {
            text-align: center;
        }

            .services ul li {
                width: 31.3333% !important;
                margin: 0 1% !important;
            }

    .shahid-comment div div {
        width: 100%;
    }

    .slider-display {
        padding: 20px;
        min-height: 542px;
        overflow: hidden;
    }

        .slider-display h2 {
            font-size: 20px;
        }

        .slider-display h2, .slider-display p {
            width: 100% !important;
            margin-right: 0;
        }

        .slider-display img {
            border-radius: 20px;
            height: auto !important;
            max-height: 1000px !important;
            right: 0;
            top: 0;
            left: 0;
            margin: 0;
            bottom: 0;
            position: relative;
            min-height: 5px;
        }

        .slider-display img, .slider ul li a {
            height: 12px;
            padding: 0;
            width: 100%;
        }

        .slider-display p {
            font-size: 15px;
        }

    .slider::before {
        width: 40px;
    }

    .slider ul {
        list-style-type: none;
        position: absolute;
        left: 40px;
        right: 40px;
        margin: auto;
        text-align: center;
        width: 70px;
    }

        .slider ul li {
            display: inline-block;
            height: 12px;
            width: 12px;
            color: #fff;
            margin: 0 2px;
        }

    .chart-box > div[data-title="1391"],
    .chart-box > div[data-title="1392"],
    .chart-box > div[data-title="1393"],
    .chart-box > div[data-title="1394"],
    .chart-box > div[data-title="1395"],
    .chart-box > div[data-title="1396"],
    .chart-box > div[data-title="1397"],
    .chart-box > div[data-title="1398"] {
        display: none !important;
    }


    .news-header {
        display: none;
    }

    .loginContainer {
        flex-direction: column;
    }

        .loginContainer .loginForm {
            width: 100%;
            order: 2;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .loginContainer .loginSlider {
            width: 100%;
        }

    .card-wrapper {
        width: 100%;
    }

    .card-positioner {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotateZ(-20deg);
    }
}

@media (max-width: 800px) {

    .fast-links ul {
        grid-template-columns: auto auto auto auto;
    }

    .management-container {
        flex-direction: column;
        border: none;
    }

        .management-container .management-left {
            width: 100%;
            margin: auto;
            padding: 50px 10px;
        }

        .management-container .management-right {
            width: 100%;
            padding: 0;
            border-bottom: 2px solid transparent;
            border-image: linear-gradient(0.25turn, rgba(99,99,99,0), rgba(99,99,99), rgba(99,99,99,0));
            border-image-slice: 1;
        }

            .management-container .management-right .management-units {
                width: 100%;
                margin: auto;
                padding-top: 20px;
            }
}

@media (max-width:800px) {
    .navigation-bar > a {
        font-size: 12px;
    }

    .loginContainer {
        flex-direction: column;
    }

        .loginContainer .loginForm {
            width: 100%;
            order: 2;
        }

        .loginContainer .loginSlider {
            width: 100%;
            border-radius: 0;
        }

    .mobile-slideshow {
        display: block;
    }
}

@media (max-width:820px) {
    .slideshow .display a {
        min-height: 0;
    }

    .slideshowbullets {
        text-align: left;
        height: 30px;
        padding: 0 15px;
        border: 0;
    }

        .slideshowbullets .active:before, .slideshowbullets li:hover a:before {
            display: none;
        }

        .slideshowbullets li {
            display: inline-block;
            font-size: 0;
            width: 12px;
            height: 12px;
        }

            .slideshowbullets li a {
                background: #b7b7b7;
                width: 12px;
                height: 12px;
                border-radius: 50px;
                display: block;
                margin: 0 auto;
            }

                .slideshowbullets li a h4 {
                    font-size: 0;
                    height: 8px;
                }

    .comment-item {
        flex: 0 0 calc(80% - 20px);
        transform: scale(0.9);
    }

    .comment-list .comment-item.active {
        transform: scale(1.05) !important;
    }

    .comment-container {
        padding: 30px 0;
    }

    .comment-item {
        padding: 25px 30px;
    }

        .comment-item div {
            padding: 0 70px 0 0;
            margin-bottom: 15px;
        }

            .comment-item div img {
                height: 60px;
            }

            .comment-item div h3 {
                font-size: 14px;
            }

        .comment-item p {
            font-size: 14px;
            line-height: 1.7;
        }

    .slider-btn {
        width: 35px;
        height: 35px;
    }
}

@media (max-width:780px) {
    .userpanel {
        z-index: 200;
    }

        .userpanel > div, .userpanelwithpassword > div {
            top: 128px;
            bottom: 35px;
            max-height: inherit !important;
            height: inherit;
            height: auto;
        }

        .userpanel > div {
            max-height: 476px !important;
            width: 97% !important;
            box-sizing: border-box;
        }

        .userpanel .code-box {
            max-height: 283px !important;
            padding: 20px !important;
            width: 86%;
        }

        .userpanel .forgot-box {
            max-height: 320px !important;
            padding: 20px !important;
        }

        .userpanel > div .entry {
            left: 20px !important;
        }
}

@media (max-width:768px) {
    .sqsh-tabs {
        width: 95%;
    }

    .top-tabs {
        height: auto;
        flex-wrap: wrap;
    }

        .top-tabs li {
            padding: 12px 15px;
            font-size: 13px;
            flex: 1 1 45%;
        }

    .sqsh-tab.active {
        flex-direction: column;
    }

    .right-tabs {
        width: 100%;
        padding-left: 0;
        margin-bottom: 15px;
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 10px;
    }

        .right-tabs li {
            white-space: nowrap;
            margin-bottom: 0;
            padding: 10px 15px;
            background: #e0e0e0;
            border-radius: 10px;
        }


            .right-tabs li.active::before {
                display: none;
            }

    .content-area {
        padding: 15px;
    }

    .newsContainer .mainnews ul .detailnews a img {
        max-width: 100%
    }

    .faq-category ul li {
        font-size: 17px;
        /*! width: 21%; */
        margin-left: 0;
    }

        .faq-category ul li:nth-child(2n) {
            margin-left: 0;
        }

    .shahid-all::before {
        right: 85px;
    }

    .newsContainer .mainnews ul a {
        display: block;
    }

    .contactUsContainer {
        height: auto;
    }

    .contactUsContainer, .formContainer form > div {
        flex-direction: column;
    }

        .contactUsContainer > div {
            width: 80%;
            margin: 20px 0;
        }

    .manateq-content {
        flex-direction: column;
    }

    .text-column,
    .map-column {
        width: 100%;
    }

    .manateq h2 {
        font-size: 22px;
        padding: 0 20px;
        margin-bottom: 30px;
    }

    .text-column p {
        padding: 0 20px;
    }

    .btn-branches {
        margin: 0 auto;
    }

    .province-icon {
        width: 20px !important;
        height: 20px !important;
    }

    .province-name {
        font-size: 8px;
        padding: 2px 6px;
    }

    .chart-wrap h2 {
        right: 10px;
    }

    .news-slider {
        display: flex;
        flex-direction: column;
    }

    .slider-controls {
        order: 2;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        margin-bottom: 30px;
    }

    .slider-container {
        order: 1;
    }

    .slider-container-shahid {
        flex-direction: column;
        height: auto;
        gap: 20px;
        margin-top: 50px;
    }

    .shahid-list ul {
        order: 1;
        min-height: 450px;
    }


    .slider-container-shahid .prev-btn {
        position: absolute;
        left: 55%;
        transform: translateX(-50%);
        bottom: -50px;
    }

    .slider-container-shahid .next-btn {
        position: absolute;
        left: 45%;
        transform: translateX(-50%) rotate(180deg);
        bottom: -50px;
    }

    .slider-container-shahid::after {
        content: '';
        display: flex;
        order: 2;
        width: 100%;
        justify-content: center;
        gap: 15px;
    }

    .slider-container-shahid {
        justify-content: flex-start;
        padding: 0 20px;
        position: relative
    }

    .shahid-list ul li.slide {
        padding: 30px 20px 60px 20px;
        height: auto;
        max-height: 450px;
    }

    .shahid-list ul li img {
        position: relative;
        /*! width: 100%; */
        max-width: 200px;
        left: 0;
        right: 0;
        margin: 0 auto 15px;
        display: block;
    }

    .shahid-list ul li h2 {
        font-size: 16px;
        text-align: center;
        margin-bottom: 10px;
    }

    .shahid-list ul li p {
        font-size: 13px;
        text-align: center;
        padding: 0 10px;
    }

    .btn-shahid-readmore {
        position: relative;
        bottom: auto;
        right: auto;
        justify-content: center;
        margin-top: 15px;
    }

    .shahid-list ul li a {
        min-height: auto;
    }


    .slideshow {
        width: 100%;
        margin: 10px 0 330px 0;
        padding: 0;
    }

        .slideshow .display div h4 {
            font-size: 20px;
            font-weight: 600;
        }

        .slideshow .display p {
            font-size: 15px;
            color: #000;
            font-weight: 400;
            padding: 3px 30px;
            text-align: right;
            text-align: justify;
        }

    .text-column {
        padding-right: 0;
    }


    .faq-category ul li {
        width: 50%;
    }

    .faq-category ul {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px !important;
        ;
        flex-wrap: wrap;
    }

        .faq-category ul li a.active::before {
            width: 100%;
        }
}

@media (max-width:650px) {
    .chart-box > div {
        width: 28px;
    }

    .chart-box div:hover div, .chart-box div .active {
        font-size: 16px;
        position: absolute;
        right: -90px;
        display: block;
        background: #fff;
        width: 210px;
        padding: 10px 25px 10px 10px;
        top: -30px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
        z-index: 5;
    }

    .fast-links ul {
        grid-template-columns: auto auto auto;
    }

    .chart-box > div {
        margin: 0 15px;
    }

    .multimediacenter-bullets li {
        width: 49%;
    }

        .multimediacenter-bullets li:nth-child(2n), .newsboxes ul li:nth-child(2n) {
            margin-left: 0 !important;
        }

        .multimediacenter-bullets li:nth-child(3n), .multimediacenter-bullets li:nth-child(4n), .newsboxes ul li:nth-child(3n) {
            margin-left: 2%;
        }

    .multimediacenter-main {
        margin-left: 0;
        margin-right: 0;
    }

    .news-list .oneslide .date, .tabcontents .oneslide .date {
        display: none;
    }

    .news-list .oneslide h2, .tabcontents .oneslide h2 {
        width: 94%;
    }

    .newsboxes ul li {
        display: inline-block;
        vertical-align: top;
        width: 49%;
        margin-left: 2%;
    }

    .services ul li {
        width: 48% !important;
        margin: 0 1% !important;
    }

    .subscribebox {
        background: url(../../images/subscribeback.jpg)no-repeat top left;
        background-size: auto 100%;
    }

    .news-slide.active {
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
    }

    .news-image {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        height: 300px;
        margin-bottom: 10px;
        order: 1;
    }

    .news-content {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        width: 100%;
        padding: 20px;
        order: 2;
        min-height: 250px;
    }

        .news-content h2 {
            font-size: 18px;
            margin-bottom: 10px;
        }

        .news-content p {
            font-size: 13px;
            margin-bottom: 15px;
        }

    .slider-container {
        min-height: 575px;
    }

    .slider-track {
        min-height: 550px;
    }
}


@media (max-width:600px) {
    .charter {
        margin-top: 30px;
        padding: 45px 5px;
    }

    .slider-container-shahid {
        padding: 0px;
    }

    .regions {
        margin-bottom: 30px;
    }

    .shahid-list ul li img {
        position: relative;
        width: 100%;
        border-radius: 20px;
        transition: transform 0.3s ease;
        left: 0;
        right: 0;
        margin: auto;
        height: 200px;
        object-fit: cover
    }

    .shahid-list ul li a {
        text-decoration: none;
        display: block;
        height: 100%;
        min-height: 500px;
    }

    .shahid-list ul li.slide {
        background: #f9f9f9;
        border-radius: 40px;
        padding: 20px 20px 20px 20px;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        transform: translateX(100px);
        pointer-events: none;
        height: 500px;
        text-align: center
    }

    .shahid-list ul {
        min-height: 500px;
    }

    .members-messages {
        height: auto;
    }

        .members-messages .members-messages-display h2 span {
            position: relative;
            height: auto !important;
            line-height: normal !important;
            border-radius: 4px;
        }

        .members-messages .members-messages-display p {
            width: 100%;
        }

    .comment-item {
        flex: 0 0 calc(90% - 15px);
        transform: scale(0.92);
    }

    .comment-list .comment-item.active {
        transform: scale(1) !important;
    }

    .comment-list {
        gap: 20px;
    }

    .comment-item {
        padding: 20px 25px;
    }

        .comment-item div h3 {
            font-size: 13px;
        }

        .comment-item p {
            font-size: 13px;
        }

    footer .footerRight ul li {
        width: 90%;
    }
}

@media (max-width:570px) {
    .shahid-comment .shahid-list ul li {
        height: 250px;
    }
}

@media (max-width:550px) {

    .slideshow .display a {
        height: auto;
    }

    .slideshowbullets {
        text-align: center;
    }

    .newsContainer .sidenews .newsPage ul li {
        padding: 0;
        min-height: auto;
        position: relative;
    }

        .newsContainer .sidenews .newsPage ul li a img {
            width: 100%;
            position: relative;
            height: auto;
        }

        .newsContainer .sidenews .newsPage ul li a > span {
            display: none;
        }
}

@media (max-width:500px) {
    .fast-links ul {
        grid-template-columns: auto auto;
    }


    .footerInputHolder {
        width: 100%;
        margin-bottom: 50px;
    }

    .confirmFooter {
        position: relative;
    }
}

@media (max-width:480px) {
    .container {
        padding: 0;
    }

    .sqsh-tabs {
        top: 20px;
    }

    .top-tabs {
        flex-direction: column;
        height: auto;
        border-radius: 20px;
        background-color: transparent;
        gap: 10px;
        background: #008076;
    }

        .top-tabs li {
            background-color: #008076;
            /*! border-radius: 12px; */
            /*! padding: 18px 20px; */
            margin: 0;
            flex: none;
            justify-content: flex-start;
        }

            .top-tabs li.active {
                background: #008076;
                /*! border-radius: 12px 12px 0 0; */
            }

            .top-tabs li img {
                width: 28px;
                height: 28px;
            }

    .sqsh-tab {
        padding: 0;
        min-height: auto;
        background: transparent;
        display: none;
        flex-direction: column;
    }

        .sqsh-tab.active {
            display: flex;
        }

    .right-tabs {
        width: 100%;
        padding: 0;
        background-color: #EDEDED;
        margin-bottom: 10px;
        padding: 10px 20px 15px;
        flex-direction: column;
        overflow: hidden;
    }

        .right-tabs li {
            background-color: #EDEDED;
            border-radius: 8px;
            padding: 12px 15px;
            margin-bottom: 8px;
            color: #fff;
        }

            .right-tabs li:hover {
                background-color: transparent !important;
            }

            .right-tabs li:last-child {
                margin-bottom: 0;
            }

            .right-tabs li a {
                color: #1F1F1F;
            }

            .right-tabs li.active {
                background-color: transparent;
                border-radius: 8px 8px 0 0;
                font-size: 14px;
            }

                .right-tabs li.active a::before {
                    display: none;
                }

    .content-area {
        display: none !important;
    }

    .content-item {
        display: none !important;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            max-height: 0;
        }

        to {
            opacity: 1;
            max-height: 500px;
        }
    }

    .right-tabs li::after {
        content: "";
        width: 200%;
        height: 1px;
        background-color: #FFF;
        position: absolute;
        bottom: -10px;
        right: -50px;
    }

    .right-tabs li:last-child::after {
        display: none;
    }

    .right-tabs li.active a::before {
        display: none;
    }

    .right-tabs li a::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #1F1F1F;
        display: inline-block;
        margin-left: 10px;
    }


    .loginContainer .loginSlider ul.slides li img {
        width: 250px;
        object-fit: cover;
    }

    .newsboxes ul li {
        width: 100%;
    }

    .banners:before {
        display: none;
    }

    .banners ul li, .multimediacenter-bullets li {
        width: 100%;
    }

        .banners ul li a {
            height: auto;
            line-height: 50px !important;
            padding: 0 !important;
            margin: 4px 0;
        }

        .banners ul li a, .link-two-box a {
            text-align: center;
        }

            .banners ul li a img {
                display: block;
                margin: auto;
            }

        .banners ul li span {
            margin: 0;
        }

    .chart-box > div > ins {
        width: 20%;
    }

    .chart-box > div > span {
        width: 40%;
    }

    .chart-box div strong {
        font-size: 12px;
    }

    .contactUsContainer > div, .formContainer form {
        width: 95%;
    }

        .contactUsContainer > div > a, .contactUsContainer > div > p {
            font-size: .9rem;
        }

        .contactUsContainer > div > div > h2 {
            font-size: 1.2rem;
        }

        .contactUsContainer > div > div > img {
            width: 50px;
            height: 50px;
        }

    .link-two-box a span {
        margin: 10px 0;
    }

    .loginContainer .loginSlider ul.slides li img {
        width: 250px;
        object-fit: cover;
    }

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

    .text-column p {
        font-size: 13px;
        line-height: 1.6;
    }

    .btn-branches {
        width: 155px;
        font-size: 13px;
    }

    .province-icon {
        width: 20px !important;
        height: 20px !important;
    }

    .province-name {
        font-size: 7px;
        padding: 2px 5px;
    }

    .newsboxes ul li {
        display: inline-block;
        vertical-align: top;
        width: 100%;
        margin-left: 0 !important;
    }

        .newsboxes ul li:nth-child(2n), .newsboxes ul li:nth-child(3n) {
            margin-left: 0 !important;
        }

    .services ul li {
        width: 98% !important;
        margin: 0 1% !important;
    }

    .newsboxes ul li {
        width: 100% !important;
        margin-left: 0;
    }

    .chart-wrap h2 {
        right: 10px;
        font-size: 15px;
    }

        .chart-wrap h2 strong span {
            font-size: 25px;
        }

            .chart-wrap h2 strong span::after {
                font-size: 20px;
            }

    .chart-box > div[data-title="1399"] {
        display: none !important;
    }

    .loginContainer .loginForm form ul li {
        padding: 0
    }

    .comment-item::after {
        width: 30px;
        background-size: 30px;
        height: 30px;
    }

    .slideshow .display a h4 {
        padding-right: 10px;
    }

    .slideshow .display p {
        padding: 3px 10px;
    }

    .slideshow {
        margin: 10px 0 340px 0;
    }



    .loginContainer .loginForm form {
        width: 95%;
    }

    .faq-category ul {
        padding: 0 !important;
        ;
    }

        .faq-category ul li {
            width: 100%;
        }

    footer .footerLeft {
        padding: 0;
    }
}

@media (max-width:400px) {
    .newsContainer .sidenews .newsPage ul li p {
        padding: 0px 20px !important;
        width: 100% !important;
    }
}

@media (max-width:380px) {
    .articles-box h2 {
        right: 10px;
    }

    .articles-box ul {
        right: 20px;
        width: 270px;
    }

    .card-positioner {
        width: 230px;
        height: 330px;
    }
}