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

body {
    font-family: WebmehrazFont;
    background-color: #f9f9f9
}

.mobile {
    display: none;
}

.flex-container {
    display: flex;
}
.w100{
    width:100%!important;
}
.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: 6px;
    width: 90%;
    margin: 240px auto 0;
    background: #fff;
    padding: 52px;
}

    .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: 40px;
        background: #C0D8C240;
        border-radius: 0 0 50px 50px;
        margin: 0 25px;
    }

        .chart-box > div:hover > span {
            background-color: #00B1A5;
        }

        .chart-box > div:hover::before {
            background-color: #00B1A5;
        }

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

        .chart-box > div:before {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 100%;
            height: 13px;
            background: #00655E;
            border-radius: 50%;
            z-index: 1;
            transition: 700ms
        }

        .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: 700ms;
            border-radius: 3px 3px 0px 0px !important;
            transition: 1s;
            background: #00655E;
            bottom: 0;
        }

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

            .chart-box > div > .max:before {
                content: '';
                position: absolute;
                top: -6px;
                left: 0;
                width: 100%;
                height: 13px;
                background: #fff1f1;
                border: 3px solid #FFF;
                border-radius: 50%;
                box-sizing: border-box;
                z-index: 1----
            }

        .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;
            display: block;
        }

.chart-growth {
    font-size: 11px !important;
    color: #828282 !important;
    font-size: 10px !important;
    display: block
}

.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: auto;
    bottom: calc(60% + 18px);
    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: #353535;
    padding-right: 30px;
    display: block
}

.statistic-price {
    padding-right: 46px;
}

    .statistic-price:before {
        content: '';
        position: absolute;
        right: -15px;
        top: 50%;
        transform: translateY(-50%);
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: #E6F5F4 url(/icons/coin.png) no-repeat center;
        background-size: 18px;
    }

.statistic-user {
    padding-right: 46px;
}

    .statistic-user:before {
        content: '';
        position: absolute;
        right: -15px;
        top: 50%;
        transform: translateY(-50%);
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: #E6F5F4 url(/icons/user-green.png) no-repeat center;
        background-size: 18px;
    }

.statistic-bank-count,
.statistic-bank-price {
    padding-right: 46px !important;
}

    .statistic-bank-count:before,
    .statistic-bank-price:before {
        content: '';
        position: absolute;
        right: -15px;
        top: 50%;
        transform: translateY(-50%);
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background-color: #E6F5F4;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 18px;
    }

    .statistic-bank-count:before {
        background-image: url(/icons/moneys-green.png);
    }

    .statistic-bank-price:before {
        background-image: url(/icons/bank-green.png);
    }

.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: #000;
}

.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;
    }

.managmentfull {
    width: 100% !important;
}

.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;
    }

.title-section {
    font-size: 20px;
    font-weight: 500;
}

.category-section {
    background-color: #F9F9F9;
    margin: 80px 0;
}

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

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

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

    .category-section ul {
        direction: rtl;
        background-color: #F9F9F9;
        width: 83%;
        margin: auto;
    }

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

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

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

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

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

                    .category-section 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;
                    }


.messages-list {
    display: flex;
    flex-direction: column;
}

    .messages-list li {
        height: 220px;
        border-bottom: 1px solid #EDEDED;
        position: relative;
    }

        .messages-list li:before {
            content: 'بیشتر';
            position: absolute;
            bottom: 12px;
            font-size: 16px;
            left: 35px;
            color: #595959;
            font-weight: 400;
        }

        .messages-list li:after {
            content: "";
            position: absolute;
            bottom: 12px;
            left: 0;
            width: 25px;
            height: 25px;
            background: url('/icons/arrow-left.png') center center no-repeat;
            background-size: contain;
        }

        .messages-list li a {
            display: block;
            cursor: pointer;
            height: 220px;
        }

            .messages-list li a h2 {
                font-size: 20px;
                color: #1F1F1F;
                font-weight: 500;
                margin-bottom: 25px;
                margin-top: 15px;
            }

            .messages-list li a p {
                font-size: 16px;
                font-weight: 400;
                color: #353535;
            }

            .messages-list li a span {
                font-size: 14px;
                font-weight: 400;
                color: #A6A6A6;
                position: absolute;
                bottom: 12px;
            }


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

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

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

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

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

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

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

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

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

                .category-tab 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;
    overflow: hidden;
    padding-bottom: 40px;
}

    .chart-wrap::before {
        content: "";
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position-y: -20px;
        opacity: 1;
        pointer-events: none;
    }


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

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

            .chart-wrap h2 strong span {
                position: relative;
                font-size: 35px;
                font-weight: 600;
                width: 200px;
                display: block;
            }

                .chart-wrap h2 strong span:after {
                    content: 'همت';
                    font-size: 35px;
                    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;
        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;
    }

.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;
}


.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: default;
    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%;
    display: flex;
    border-bottom: 2px solid transparent;
    border-image-slice: 1;
    margin: 50px 0;
}

    .management-container .management-right {
        width: 25%;
        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;
            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: 100%;
            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: 110px;
                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: 100px;
                    margin-left: 5px;
                    height: 100px;
                    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;
        padding-left: 20px;
        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: 8px;
    background-color: #fff;
    margin-top: 40px;
    color: #000;
    width: 90%;
    margin: 100px auto;
}

.btn-region {
    display: inline-block;
    width: 20%
}

.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 {
    width: 90%;
    margin: 100px auto;
    background-size: 100%;
    position: relative;
}

.news-head {
    margin-bottom: 20px;
}

.news-head-det {
    width: 40%;
    display: block;
    margin-bottom: 40px;
}

.see-all {
    position: absolute;
    left: 0%;
    top: 12%;
    color: #000;
    display: block;
    color: #1F1F1F;
    font-size: 15px
}

    .see-all::after {
        content: "";
        width: 15px;
        height: 7px;
        background: url('../../icons/arrow-left-black.png') center center/cover no-repeat;
        display: inline-block;
        margin-right: 7px;
    }

.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 !important;
        opacity: 1;
    }

.news-image {
    position: absolute;
    left: 20px;
    top: 20px;
    border-radius: 15px;
    z-index: 10;
    bottom: 20px;
    margin: auto;
    max-width: 50%;
}


    .news-image img {
        display: block;
        border-radius: 8px;
        height: 100%;
    }

.news-content {
    position: absolute;
    right: 0%;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    border-radius: 8px;
    min-height: 100%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #FFF;
    padding: 50px;
    padding-right: 20px;
    padding-left: 40%;
}

    .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: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-shrink: 1;
        width: 70%;
    }

.topTitr {
    font-size: 14px;
    color: #4F4F4F;
}

.news-content .btn,
.news-content .btn-action {
    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;
    min-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: 45px;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 0;
    flex-direction: row;
    position: absolute;
    bottom: 70px
}

.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;
    margin: 0 0 50px 0;
    box-sizing: border-box;
    border-radius: 10px;
    z-index: 4;
}

.blur-page {
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 18.06%, rgba(0, 0, 0, 0.7) 84.4%);
    z-index: 9;
    display: block;
}

.mobile-slideshow {
    display: none;
}

.slideshow .display .oneslideshowbullet {
    display: block;
    width: 100%;
    font-size: 0;
    position: relative;
}

.slider-bottom {
    position: absolute;
    left: 50%;
    bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 30;
    width: 90%;
    transform: translateX(-50%);
}

.slidebox {
    position: relative;
}

.slideshow .display div.slide-content {
    display: inline-block;
    width: calc(90%);
    border-radius: 8px;
    color: #fff;
    position: absolute;
    z-index: 10;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    text-align: justify;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .slideshow .display div.slide-content h4 {
        padding: 50px 30px;
        color: #1F1F1F;
        font-size: 26px;
        font-weight: 600;
        color: #fff;
        text-align: center;
    }

.slideshow .display p {
    font-size: 18px;
    color: #000;
    font-weight: 400;
    padding: 3px 30px;
    text-align: right;
    color: #fff;
    margin-bottom: 50px;
    text-align: center;
    width: 70%
}

.slideshow .display img {
    display: inline-block;
    width: 100%;
    height: calc(100vh - 70px);
    vertical-align: top;
}

.slideshow a.readmore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 22px;
    background-color: #007F76;
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.3s ease;
    width: 10% !important;
}

    .slideshow a.readmore::after {
        content: "";
        width: 18px;
        height: 18px;
        margin-right: 8px;
        background: url('../../icons/arrow-left-white.png') center center / contain no-repeat;
        transition: transform .25s ease;
    }

    .slideshow a.readmore:hover::after {
        transform: translateX(-4px);
    }



.slider-navigation {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 20;
}





.slideshow-left,
.slideshow-right {
    position: static;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin: 0;
    background-image: none;
    cursor: pointer;
    transition: 0.25s;
    transform: none;
}


.slideshow-left {
    background: #fff;
    opacity: 0.75
}


.slideshow-right {
    background: #fff;
    opacity: 0.75
}


.slideshow-left::before {
    content: "";
    background: url('../../icons/arrow-left1.png') center center/cover no-repeat;
    width: 60%;
    height: 60%;
    transform: rotate(180deg);
}


.slideshow-right::before {
    content: "";
    background: url('../../icons/arrow-left1.png') center center/cover no-repeat;
    width: 60%;
    height: 60%;
}


.slideshow-left:hover,
.slideshow-right:hover {
    opacity: 1;
    transform: scale(1.08);
}





.slideshowbullets {
    position: static;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    margin: 0;
    list-style: none;
    height: auto;
}


    .slideshowbullets li {
        width: 7px;
        height: 7px;
        padding: 0;
        margin: 0;
        background: rgba(255,255,255,0.40);
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.3s ease;
    }


        .slideshowbullets li.active {
            width: 25px;
            background: #fff !important;
        }


        .slideshowbullets li:hover {
            background: rgba(255,255,255,0.75) !important;
        }


        .slideshowbullets li > * {
            display: none;
        }

.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% );
    }





/* ===================== messages / sokhan-rooz card ===================== */
/* Homepage: daily quote on the right, tabbed notices on the left. */
.messages-container.home-bulletins {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.95fr);
    gap: 24px;
    width: 90%;
    margin: 50px auto;
    font-family: WebmehrazFont, Tahoma, sans-serif;
}
.home-bulletins * { box-sizing: border-box; }
.home-bulletins .daily-message,
.home-bulletins .notice-message {
    display: grid;
    min-width: 0;
    height: 250px;
    padding: 7px;
    border: 3px solid #fff;
    border-radius: 7px;
    background: #f8f8f8;
    gap: 8px;
}
.home-bulletins .daily-message { grid-template-columns: 170px minmax(0, 1fr); }
.home-bulletins .notice-message { grid-template-columns: 86px minmax(0, 1fr); }
.home-bulletins a { text-decoration: none; color: inherit; }
.home-bulletins .daily-message-side { display: grid; grid-template-rows: 36px minmax(0, 1fr); gap: 7px; min-height: 0; }
.home-bulletins .daily-message-side h2 {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    margin: 0; border-radius: 5px; background: #fff; color: #00afa5; font-size: 13px; font-weight: 400;
}
.home-bulletins .daily-message-side h2 img,
.home-bulletins .notice-tab img { width: 19px; height: 19px; object-fit: contain; }
.home-bulletins .daily-message-image { display: block; min-height: 0; }
.home-bulletins .daily-message-image img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.home-bulletins .daily-message-copy,
.home-bulletins .notice-copy { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 6px 8px; background: #fff; border-radius: 5px; }
.home-bulletins .daily-message-copy p,
.home-bulletins .notice-copy p {
    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
    margin: 0; font-size: 12px; line-height: 1.85; color: #494949;
}
.home-bulletins .daily-message-copy p { -webkit-line-clamp: 6; }
.home-bulletins .bulletin-date { display: block; margin-top: auto; padding-top: 6px; font-size: 10px; color: #999; }
.home-bulletins .notice-tabs { display: flex; flex-direction: column; justify-content: space-between; gap: 3px; }
.home-bulletins .notice-tab {
    display: flex; flex: 1; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 8px 4px; border: 0; border-radius: 5px; background: transparent;
    font: inherit; font-size: 12px; color: #888; cursor: pointer;
}
.home-bulletins .notice-tab img { filter: grayscale(1); opacity: .7; }
.home-bulletins .notice-tab.active { background: #fff; color: #00afa5; }
.home-bulletins .notice-tab.active img,
.home-bulletins .notice-tab:hover img { filter: none; opacity: 1; }
.home-bulletins .notice-tab:hover { background: #fff; }
.home-bulletins .notice-panels, .home-bulletins .notice-panel { min-width: 0; height: 100%; min-height: 0; }
.home-bulletins .notice-panel[hidden] { display: none; }
.home-bulletins .notice-link { display: grid; grid-template-columns: minmax(0, 1fr) 38%; gap: 8px; height: 100%; }
.home-bulletins .notice-copy h2 { margin: 0 0 8px; font-size: 14px; font-weight: 500; line-height: 1.8; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.home-bulletins .notice-copy p { -webkit-line-clamp: 4; }
.home-bulletins .notice-image { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 5px; }
.home-bulletins .bulletin-empty { align-self: center; margin: 0; padding: 16px; color: #777; font-size: 13px; }
.home-bulletins a:focus-visible, .home-bulletins button:focus-visible { outline: 2px solid #009f95; outline-offset: 2px; }
@media (max-width: 1100px) {
    .messages-container.home-bulletins { grid-template-columns: 1fr; gap: 18px; }
    .home-bulletins .daily-message { grid-template-columns: 170px minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .messages-container.home-bulletins { width: calc(100% - 32px); margin: 30px auto; }
    .home-bulletins .daily-message { grid-template-columns: 120px minmax(0, 1fr); height: 250px; }
    .home-bulletins .notice-message { grid-template-columns: 1fr; grid-template-rows: 42px auto; height: auto; }
    .home-bulletins .notice-tabs { flex-direction: row; }
    .home-bulletins .notice-link { grid-template-columns: minmax(0, 1fr) 33%; min-height: 180px; }
    .home-bulletins .notice-image { max-height: 210px; }
    .home-bulletins .notice-copy h2 { font-size: 13px; }
}

/*podcast*/
.pod-section {
    max-width: 100%;
    margin: 50px auto;
    padding: 50px 20px;
    display: flex;
    background-size: 100%;
    background: url('../../images/bg-padcast.png') center center/cover no-repeat;
    height: 803px;
    position: relative
}

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


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

.btn-pod {
    color: #FFF;
    background-color: #007F76;
    font-weight: 400;
    font-size: 14px;
    position: absolute;
    bottom: 315px;
}


.pod-container {
    justify-content: flex-start;
    gap: 30px;
    display: flex;
    align-items: center;
}

    .pod-container span {
        margin-bottom: 79px;
        font-size: 20px;
    }


.pod-image {
    position: absolute;
    left: 20px;
    top: -5px;
    width: 575px;
    border-radius: 15px;
    z-index: 10;
    bottom: 0;
    margin: auto;
    height: 340px;
    cursor: pointer;
}

    .pod-image::after {
        content: "";
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: 0.3;
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 10px;
    }

    .pod-image::before {
        content: "";
        width: 60px;
        height: 60px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        background-image: url('../../icons/play-circle.png');
        z-index: 2;
        background-size: 60px;
    }

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


/*search*/
.search-container {
    width: 100% !important;
}

.total-art {
    color: #757575;
    font-size: 14px;
    margin-bottom: 65px;
    margin-top: 15px;
}

    .total-art strong {
        margin-top: 15px;
        color: #000;
    }

.quick-range {
    display: inline-flex;
    gap: 12px;
    justify-content: space-between;
    padding-left: 0;
}

.form-100-1 {
    display: flex;
    width: 100%;
    flex-wrap: wrap
}

.form-70-1 {
    display: flex;
    width: 70%;
    flex-wrap: wrap
}

.form-60-1 {
    display: flex;
    width: 60%;
    flex-wrap: wrap
}

.form-50-1 {
    display: flex;
    width: 49%;
    flex-wrap: wrap
}

.form-40-1 {
    display: flex;
    width: 40%;
    flex-wrap: wrap
}

.form-25-1 {
    display: flex;
    width: 23%;
    flex-wrap: wrap
}

.form-20-1 {
    display: flex;
    width: 18%;
    margin-left: 2%;
    flex-wrap: wrap
}

.form-15-1 {
    display: flex;
    width: 15%;
    flex-wrap: wrap
}

.quick-range li {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #353535;
    background-color: #F9F9F9;
    border-radius: 40px;
    text-align: center;
    justify-content: center;
    transition: 200ms;
    font-weight: 400;
    padding: 13px
}

    .quick-range li.active {
        background-color: #007F76;
        color: #fff;
    }

.search-date-picker {
    position: relative;
}

    .search-date-picker input {
        padding-right: 30%;
        cursor: pointer;
    }

    .search-date-picker:before {
        content: "";
        width: 30px;
        height: 30px;
        background-size: 30px;
        background: url('../../icons/arrow-square-down.png') center center/cover no-repeat;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 10px;
    }

.search-to-date::after {
    content: " تا تاریخ :";
    position: absolute;
    color: #A6A6A6;
    font-size: 14px;
    font-weight: 400;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.search-from-date::after {
    content: "از تاریخ :";
    position: absolute;
    color: #A6A6A6;
    font-size: 14px;
    font-weight: 400;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.full-width {
    width: 100% !important;
}

.pod-details {
    display: flex;
    justify-content: space-between;
    padding: 40px;
    align-items: center;
    position: relative;
    min-height: 500px;
    height: auto;
}

    .pod-details .date-time-news {
        position: absolute;
        right: 40px;
        bottom: -50px;
        flex-direction: row !important;
    }

        .pod-details .date-time-news .hour-span {
            margin-right: 20px;
        }

    .pod-details div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        color: #353535;
    }

    .pod-details img {
        width: 800px;
        height: auto;
    }

.podcast-container .archive-tools {
    padding: 0 !important;
}

@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;
    }

    .pod-details img {
        width: 600px;
    }
}

@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;
        }

    .pod-container span {
        font-size: 15px;
    }
}

@media (min-width: 860px) and (max-width: 1215px) {
    .chart-box > div:nth-child(n+11) {
        display: none !important;
    }
}

@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 {
        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) {

    .management-container .management-right .management-right-header .management-user-profile-pic {
        width: 200px;
        height: 200px;
    }

    .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;
    }




    .news-image img {
        width: 100%;
        height: auto;
    }

    .news-image {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        left: 0;
    }

    .pod-details img {
        width: 400px
    }
}

@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) {
    .hooshad-div h4 {
        color: #fff !important;
    }


    .hooshad-div p {
        color: #fff !important;
    }

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

    .eservices-section {
        margin-top: 160px !important;
    }

    .eservices-container img {
        left: 4% !important;
        ;
    }

    .eservices-desc {
        width: 100% !important;
    }

    .text-column {
        padding-right: 50px;
    }

    .slideshow {
        margin-bottom: 100px
    }

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


    .slideshow {
        width: 100%;
        margin: 10px 0 40px 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 {
        width: 100%;
        vertical-align: top;
        top: 25%
    }

        .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%;
        }

        .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 {
            transform: translateY(0);
            bottom: 0;
            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 li:hover .directors-caption {
            transform: translateY(0);
        }

        .directors:not(:has(li:hover)) li:last-child .directors-caption {
            transform: translateY(0);
            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 {
            width: 45%;
        }

        .directors li:hover {
            width: 45%;
        }

    .slider-navigation {
        bottom: 5px;
    }
}


@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%;
    }

    .pod-image {
        width: 500px;
        height: 300px;
    }

    .news-content {
        padding-left: 5%;
    }

    .management-container .management-right .management-right-header .management-user-profile-pic {
        width: 300px;
        height: 300px;
    }
}

@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;
    }

    .slider-controls {
        top: 100px;
        left: 50%;
        transform: translateX(-50%)
    }

    .pod-image {
        width: 400px;
        height: 250px;
    }

    .form-20-1 {
        width: 48% !important;
    }

    .form-60-1 {
        width: 100% !important;
    }

    .quick-range {
        justify-content: space-between
    }

        .quick-range li {
            padding: 10px 0;
        }
}

@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;
            }

    .pod-details {
        flex-direction: column
    }

        .pod-details img {
            width: 100%;
            margin-top: 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) {
    .chart-box > div:nth-child(n+8) {
        display: none !important;
    }

    .charter {
        padding: 45px 50px;
    }

        .charter p {
            width: 100%;
        }

    .statistics ul {
        padding: 0 20px;
    }

    .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);
    }

    .news-image img {
        width: 100%;
        height: auto;
    }

    .pod-container span {
        width: 40%;
    }
}

@media (max-width: 820px) {

    .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 {
        margin: 10px 0 250px 0;
    }

        .slideshow .display a {
            min-height: 0;
        }

    .slideshowbullets {
        text-align: left;
        height: 30px;
        padding: 0 15px;
        border: 0;
        bottom: -60px
    }

        .slideshowbullets .active:before, .slideshowbullets li:hover a:before {
            display: none;
        }

        .slideshowbullets li {
            display: inline-block;
            font-size: 0;
            width: 20px;
            height: 4px;
        }

            .slideshowbullets li a {
                background: #b7b7b7;
                width: 12px;
                border-radius: 50px;
                display: block;
                margin: 0 auto;
                height: 0;
            }

                .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) {
    .confirmPlaceholder {
        top: 52px;
    }

    .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;
            bottom: 10px;
        }
}

@media (max-width:768px) {
    .top-tabs {
        flex-direction: column;
        height: auto;
        border-radius: 20px;
        background-color: transparent;
        background: #008076;
        margin-bottom: 0 !important;
    }

    .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%
    }

    .category-tab ul li {
        font-size: 17px;
        /*! width: 21%; */
        margin-left: 0;
    }

        .category-tab 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;
    }

    .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: 20%;
        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;
        }

    .display .btn {
        width: 100%;
    }

    .text-column {
        padding-right: 0;
    }


    .category-tab ul li {
        width: 50%;
    }

    .category-tab ul {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px !important;
        ;
        flex-wrap: wrap;
    }

        .category-tab ul li a.active::before {
            width: 100%;
        }

    .directors li {
        height: 700px;
        width: 100%;
        margin-top: 20px;
    }

    .directors:not(:has(li:hover)) li:last-child {
        width: 100%;
    }


    .directors li:hover {
        width: 100%;
    }


    .directors:not(:has(li:hover)) li:last-child {
        width: 100%;
    }

    .directors li:hover {
        width: 100%;
    }

    .slideshow {
        height: 250px !important;
    }

    .pod-container {
        flex-direction: column;
        justify-content: center;
    }

    .pod-image {
        position: relative;
        padding: 0 !important;
        left: 0;
        top: 0;
        margin: 0;
    }

    .pod-container span {
        margin: 0;
        width: 100%;
        text-align: center;
        font-size: 20px;
    }

    .btn-pod {
        position: relative;
        bottom: 10px;
        right: 0;
        width: 115px;
        min-width: 50px;
        order: 3;
    }
}

@media (max-width:650px) {
    .chart-box > div {
        width: 28px;
    }

    .news-image img {
        width: 100%;
        height: 100%;
    }

    .news-content .btn,
    .news-content .btn-action {
        bottom: 20px;
    }

    .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;
        height: 100%
    }

    .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;
        max-width: 95%;
    }

    .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;
    }

    .directors {
        width: 100%
    }

    .form-20-1 {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .form-25-1 {
        width: 48% !important;
    }
}


@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;
        }
}

@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;
        }

    .pod-details {
        padding: 15px;
    }

        .pod-details .date-time-news {
            bottom: -80px
        }

    .form-70-1 {
        width: 100%
    }

    .form-50-1 {
        width: 100%;
    }

    .pod-container .archive-tools {
        padding: 10px !important;
    }
}

@media (max-width:500px) {
    .fast-links ul {
        grid-template-columns: auto auto;
    }
}

@media (max-width:480px) {
    .container {
        padding: 0;
    }

    .sqsh-tabs {
        top: 20px;
    }

    .top-tabs {
        flex-direction: column;
        height: auto;
        border-radius: 20px;
        background-color: transparent;
        background: #008076;
    }

        .top-tabs .sqsh-tab li {
            /*            background-color: #FFF;*/
            /*! 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;
        display: none;
        flex-direction: column;
        background-color: #fff;
        border-radius: 0 !important;
        /*        min-height: 300px !important;*/
        max-height: 420px !important;
        background-color: transparent;
    }

        .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;
    }

    .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 370px 0;
        height: 155px !important;
    }

        .slideshow .display img {
            height: auto;
            padding: 0 10px;
        }

    .mobile {
        display: flex;
    }

    .loginContainer .loginForm form {
        width: 95%;
    }

    .category-tab ul {
        padding: 0 !important;
    }

        .category-tab ul li {
            width: 100%;
        }

    .slider-controls {
        top: 100px;
        left: 20%;
        transform: translateX(-50%)
    }

    .top-tabs li.active {
        border-bottom: none;
        background: linear-gradient( to top, #014641 0%, #014641 50%, #00655E 50%, #00655E 100% );
    }

    .right-tabs li.active {
        background: transparent !important;
    }

    .form-25-1 {
        width: 100% !important;
    }

    .away25 {
        width: 25%;
        height: 25%;
        font-weight: 400
    }

    .quick-range {
        padding: 0 !important;
    }

    .pod-image {
        position: relative;
        padding: 0 !important;
        left: 0;
        top: 0;
        margin: 0;
        width: 80%;
        height: 180px;
    }

    .chart-wrap h2 strong span::after {
        float: none;
    }

    .pod-section {
        margin: 10px auto;
        padding: 10px 20px;
        height: 760px;
    }

    .top-tabs {
        margin-bottom: 0 !important;
    }

    .chart-box > div:nth-child(n+6) {
        display: none !important;
    }

    .slideshowbullets {
        bottom: -30px;
    }

    .timer span {
        background: transparent;
    }

    .timer {
        left: -105px;
    }
}

@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;
    }
}

/* ===================== eservices section ===================== */
.eservices-section {
    width: 90%;
    background-color: #fff;
    padding: clamp(44px, 6vw, 90px) 0;
    border-radius: 8px;
    margin: auto;
    margin-top: clamp(70px, 10vw, 150px);
    position: relative;
    overflow: visible;
}

.eservices-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 70px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(32px, 6vw, 90px);
    position: relative;
}




.eservices-content {
    flex: 1 1 0;
    max-width: 620px;
    min-width: 0;
    margin-right: 0;
}

.eservices-container img {
    flex: none;
    width: 250px;
    max-width: none;
    height: auto;
    max-height: none;
    object-fit: contain;
    display: block;
    position: absolute;
    left: 13%;
    bottom: -30%;
    margin: 0;
}

.eservices-title {
    font-family: WebmehrazFont;
    font-size: 28px;
    font-weight: 700;
    color: #222;
    margin: 0 0 20px;
}

.eservices-desc {
    font-family: WebmehrazFont;
    font-size: 15px;
    line-height: 2;
    color: #6b6b6b;
    text-align: justify;
    margin: 0 0 30px;
}

.eservices-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* general-purpose button (used across sections: eservices, newsslider, regions, ...) */
.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 26px;
    border-radius: 8px;
    font-family: WebmehrazFont;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: 200ms;
    box-sizing: border-box;
}

.btn-action-outline {
    background-color: #fff;
    color: #444;
    border: 1px solid #e0e0e0;
}

    .btn-action-outline:hover {
        border-color: #009595;
        color: #009595;
    }

.btn-action-fill {
    background-color: #007F76;
    color: #fff;
}

    .btn-action-fill::after {
        content: "";
        background: url('../../icons/arrow-left-white.png') center center/cover no-repeat;
        width: 20px;
        height: 20px;
    }

    .btn-action-fill:hover {
        background-color: #007F76;
        border-color: #007F76;
    }
/* end general-purpose button */

.eservices-arrow {
    transform: rotate(180deg);
    flex-shrink: 0;
}

@media (max-width: 960px) {
    .eservices-section {
        margin-top: 80px;
        overflow: visible;
        padding-top: 200px;
    }

    .eservices-section,
    .chart-box,
    {
        width: 90% !important;
        ;
    }

    .news-head {
        margin-right: 2.5%;
    }

    .news-head-det {
        margin-right: 2.5%
    }

    .see-all {
        margin-right: 2.5% !important;
        ;
    }

    .news-content {
        width: 93% !important;
        ;
        margin: auto;
        border-radius: 8px !important;
    }

    .eservices-container {
        flex-direction: column;
        text-align: center;
        gap: 24px;
        overflow: visible !important;
    }

    .eservices-content {
        max-width: 100%;
        overflow: visible !important;
    }

    .eservices-container img {
        order: -1;
        flex: none;
        position: absolute;
        width: auto;
        max-width: 100%;
        height: clamp(240px, 48vw, 340px);
        left: 24px !important;
        /*! right: 0 !important; */
        margin: auto;
        top: -531px;
    }

    .eservices-desc {
        text-align: justify;
    }

    .eservices-actions {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    .eservices-section {
        width: calc(100% - 24px);
        padding: 202px 0;
        margin-top: 56px;
    }

    .eservices-container {
        padding: 0 20px;
    }

        .eservices-container img {
            height: clamp(210px, 62vw, 290px);
        }

    .eservices-title {
        font-size: 24px;
        margin-bottom: 14px;
    }

    .eservices-desc {
        font-size: 14px;
        line-height: 1.9;
        margin-bottom: 22px;
    }

    .eservices-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 10px;
    }

        .eservices-actions .btn-action {
            width: 100%;
            min-width: 0;
            padding: 0 12px;
            font-size: 13px;
        }
}

@media (max-width: 380px) {
    .eservices-actions {
        grid-template-columns: 1fr;
    }
}
/* =================== end eservices section ==================== */

/* ===================== newsslider controls (styled like the main slideshow buttons) ===================== */
.news-slider {
    flex-direction: column;
    align-items: stretch;
}

.news-slider-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    /*! margin-top: 15px; */
    flex-shrink: 0;
    margin-right: 20px;
}

.news-nav-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: 0.25s;
}

    .news-nav-btn::before {
        content: "";
        display: block;
        width: 60%;
        height: 60%;
        background: url("/icons/arrow-left1.png") center center/cover no-repeat;
    }

    .news-nav-btn.news-prev::before {
        transform: rotate(180deg);
    }

    .news-nav-btn:hover {
        transform: scale(1.08);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    }

.news-slider-bullets {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    margin: 0;
    list-style: none;
}

    .news-slider-bullets li {
        width: 7px;
        height: 7px;
        padding: 0;
        margin: 0;
        background: rgba(0, 0, 0, 0.15);
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

        .news-slider-bullets li.active {
            width: 25px;
            background: #009595 !important;
        }

        .news-slider-bullets li:hover {
            background: rgba(0, 0, 0, 0.3);
        }

@media (max-width: 768px) {
    .news-slider-nav {
        justify-content: center;
    }
}

@media (max-width: 1300px) {
    .news-content h2 {
        width: 80%;
    }
}

@media (max-width: 1050px) {
    /* From tablet down, image and content always occupy separate layout cells. */
    .news-section {
        margin: 80px auto;
    }

    .news-content h2 {
        width: 100%;
    }

    .slider-container,
    .slider-track {
        min-height: clamp(360px, 42vw, 460px);
    }

    .news-slide.active {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(240px, .85fr);
        align-items: stretch;
        gap: 24px;
    }

    .news-content,
    .news-image {
        position: static;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        transform: none;
        max-width: none;
        min-width: 0;
    }

    .news-content {
        width: auto;
        min-height: 0;
        padding: 32px;
        justify-content: center;
    }

    .news-image {
        height: 100%;
        min-height: 0;
        overflow: hidden;
        border-radius: 14px;
    }

        .news-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            border-radius: inherit;
            border-radius: 8px;
        }

    .news-content .btn,
    .news-content .btn-action {
        position: static;
        align-self: flex-start;
        margin-top: 4px;
    }

    .news-head-det {
        width: 60%;
    }
}

@media (max-width: 1050px) {
    .news-section {
        width: calc(100% - 32px);
        margin: 64px auto;
    }

    .news-head-det {
        width: 100%;
        max-width: 680px;
        margin-bottom: 18px;
    }

    .see-all {
        position: static;
        width: fit-content;
        margin: 0 0 26px;
    }

    .slider-container,
    .slider-track {
        min-height: 0;
    }

    .news-slide.active {
        position: relative;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .news-image {
        order: -1;
        height: clamp(220px, 32vw, 320px);
        min-height: 0;
        border-radius: 14px 14px 0 0;
    }

    .news-content {
        margin-top: 30px;
        padding: 26px 24px;
        border-radius: 0 0 14px 14px;
    }

        .news-content .btn,
        .news-content .btn-action {
            margin-top: 2px;
        }

    .news-slider-nav {
        margin: 16px 0 0;
        justify-content: center;
    }
}

/* Keep the news slider aligned with the surrounding white cards on tablets. */
@media (min-width: 961px) and (max-width: 1050px) {
    .news-section {
        width: 90%;
    }

    .chart-wrap h2 {
        right: 5%;
        width: 90%;
        min-width: 0;
    }
}

@media (max-width: 960px) {
    .chart-wrap h2 {
        right: 5%;
        width: 90%;
        min-width: 0;
    }
}

@media (max-width: 650px) {
    .news-section .news-image,
    .news-section .news-content {
        width: 100% !important;
        max-width: 100%;
        margin-right: 0;
        margin-left: 0;
        box-sizing: border-box;
    }
}

@media (min-width: 1051px) {
    .chart-wrap h2 {
        right: 5%;
        width: 90%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .news-section {
        width: calc(100% - 24px);
        margin: 48px auto;
    }

    .news-head {
        margin-bottom: 12px;
    }

    .news-head-det {
        font-size: 13px;
        line-height: 1.9;
    }

    .news-image {
        height: clamp(190px, 58vw, 270px);
    }

    .news-content {
        padding: 22px 18px;
    }

        .news-content h2 {
            font-size: 19px;
            margin-bottom: 10px;
        }

        .news-content p {
            font-size: 13px;
            line-height: 1.85;
            margin-bottom: 16px;
            -webkit-line-clamp: 3;
        }

        .news-content .btn-action {
            width: 100%;
        }
}
/* =================== end newsslider controls ==================== */
.our-services {
    position: relative;
    width: 90%;
    margin: auto;
    margin-bottom: 100px;
}

.hooshad-banner {
    position: relative !important;
}

.slideshow .display > .oneslideshowbullet > .hooshad-div {
    position: absolute !important;
    right: 8% !important;
    left: auto !important;
    top: 40% !important;
    transform: translateY(-50%) !important;
    width: 40% !important;
    text-align: right !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    z-index: 15;
}


    .slideshow .display > .oneslideshowbullet > .hooshad-div h4 {
        color: #000;
        text-align: right !important;
        padding: 0 !important;
        margin-bottom: 20px;
    }


    .slideshow .display > .oneslideshowbullet > .hooshad-div p {
        color: #000;
        text-align: right !important;
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 25px;
        line-height: 2;
        width: 70% !important;
    }


    .slideshow .display > .oneslideshowbullet > .hooshad-div .readmore {
        width: auto !important;
    }
/* ===================== our-services cards ===================== */
.our-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.service-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 30px;
    text-align: right;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

    .service-card:hover,
    .service-card:focus-visible {
        transform: translateY(-4px);
        box-shadow: 0 10px 24px rgba(0, 80, 76, .12);
    }

.service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background-color: #E6F5F4;
    color: #009595;
    margin-bottom: 25px;
}

    .service-icon img {
        width: 60%;
    }

.service-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: #1F1F1F;
    margin-bottom: 12px;
}

.service-card p {
    font-size: 13px;
    line-height: 1.9;
    color: #828282;
}

.services-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

    .services-modal.is-open {
        display: flex;
    }

.services-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 28, 27, .62);
    backdrop-filter: blur(4px);
}

.services-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(1120px, 100%);
    min-height: min(500px, calc(100vh - 48px));
    max-height: min(720px, calc(100vh - 48px));
    overflow: auto;
    padding: 52px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(0, 149, 149, .12);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .25);
    text-align: right;
}

.services-modal__close {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #edf7f6;
    color: #007f76;
    font-size: 30px;
    font-family: Arial, sans-serif;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.services-modal__single {
    max-width: 620px;
    margin: 0 auto;
}

.services-modal h2 {
    margin: 18px 0 14px;
    color: #1f1f1f;
    font-size: 25px;
}

.services-modal p {
    color: #4f4f4f;
    font-size: 16px;
    line-height: 2;
}

.services-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

    .services-modal__grid .services-modal__single {
        width: 100%;
        padding: 24px;
        border-radius: 14px;
        background: #f8fbfb;
    }

        .services-modal__grid .services-modal__single h2 {
            font-size: 19px;
        }

        .services-modal__grid .services-modal__single p {
            font-size: 14px;
        }

.services-modal__groups {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}

.services-modal__group {
    min-width: 0;
    padding: 8px 0;
}

.services-modal__group-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid #e5f3f1;
}

.services-modal__group-icon {
    display: inline-flex;
    position: relative;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

    .services-modal__group-icon::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        background: #e8f7f5;
    }

    .services-modal__group-icon img {
        position: relative;
        z-index: 1;
        width: 24px;
        height: 24px;
        object-fit: contain;
    }

    .services-modal__group h2 {
        margin: 0;
        padding: 0;
        border: 0;
        color: #006f68;
        font-size: 17px;
        line-height: 1.6;
    }

    .services-modal__group ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .services-modal__group li + li {
        margin-top: 5px;
    }

    .services-modal__group a {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 7px 0;
        color: #4f4f4f;
        font-size: 13px;
        line-height: 1.8;
        text-decoration: none;
        transition: color .2s ease;
    }

        .services-modal__group a::before {
            content: "";
            flex: 0 0 5px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #00a79d;
            transition: transform .2s ease;
        }

        .services-modal__group a:hover {
            color: #009595;
        }

            .services-modal__group a:hover::before {
                transform: scale(1.45);
            }

body.services-modal-open {
    overflow: hidden;
}

@media (max-width: 992px) {
    .our-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .our-services-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .services-modal {
        padding: 12px;
    }

    .services-modal__dialog {
        max-height: calc(100vh - 24px);
        min-height: min(420px, calc(100vh - 24px));
        padding: 46px 24px 28px;
        border-radius: 16px;
    }

    .services-modal__grid {
        grid-template-columns: 1fr;
    }

    .services-modal__groups {
        grid-template-columns: 1fr;
        gap: 22px;
    }

}

@media (min-width: 601px) and (max-width: 820px) {
    .services-modal__groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}
/* =================== end our-services cards ==================== */

/* Chart columns: keep one row and show only the number that fits. */
.chart-box {
    white-space: nowrap;
}

@media (min-width: 1420px) and (max-width: 1519px) {
    .chart-box > div:nth-child(n+14) {
        display: none !important;
    }
}

@media (min-width: 1320px) and (max-width: 1419px) {
    .chart-box > div:nth-child(n+13) {
        display: none !important;
    }
}

@media (min-width: 1220px) and (max-width: 1319px) {
    .chart-box > div:nth-child(n+12) {
        display: none !important;
    }
}

@media (min-width: 1020px) and (max-width: 1219px) {
    .chart-box > div:nth-child(n+9) {
        display: none !important;
    }
}

@media (min-width: 920px) and (max-width: 1019px) {
    .chart-box > div:nth-child(n+10) {
        display: none !important;
    }
}

@media (min-width: 820px) and (max-width: 919px) {
    .chart-box > div:nth-child(n+8) {
        display: none !important;
    }
}

@media (min-width: 716px) and (max-width: 819px) {
    .chart-box > div:nth-child(n+7) {
        display: none !important;
    }
}

@media (min-width: 651px) and (max-width: 715px) {
    .chart-box > div:nth-child(n+6) {
        display: none !important;
    }
}

@media (min-width: 567px) and (max-width: 650px) {
    .chart-box > div:nth-child(n+8) {
        display: none !important;
    }
}

@media (min-width: 503px) and (max-width: 566px) {
    .chart-box > div:nth-child(n+7) {
        display: none !important;
    }
}

@media (min-width: 438px) and (max-width: 502px) {
    .chart-box > div:nth-child(n+6) {
        display: none !important;
    }
}

@media (min-width: 374px) and (max-width: 437px) {
    .chart-box > div:nth-child(n+5) {
        display: none !important;
    }
}

@media (max-width: 373px) {
    .chart-box > div:nth-child(n+4) {
        display: none !important;
    }
}

@media (max-width: 860px) {
    .chart-box {
        padding-bottom: 90px;
    }
}

/* Home slideshow: tablet layout. Keep the action inside the content panel and
   reserve a separate row for navigation, so they never overlap. */
@media (min-width: 821px) and (max-width: 1000px) {
    .desktop-slideshow.slideshow {
        height: clamp(520px, 62vw, 620px) !important;
        min-height: 0;
        margin: 0 0 36px;
        overflow: hidden;
    }

    .desktop-slideshow .slidebox,
    .desktop-slideshow .display,
    .desktop-slideshow .display .oneslideshowbullet {
        width: 100%;
        height: 100%;
    }

    .desktop-slideshow .display {
        position: absolute;
        inset: 0;
    }

        .desktop-slideshow .display .oneslideshowbullet {
            display: block;
            position: relative;
            overflow: hidden;
        }

        .desktop-slideshow .display img {
            display: block;
            width: 100%;
            height: 100% !important;
            object-fit: cover;
            object-position: center;
        }

        .desktop-slideshow .display div,
        .desktop-slideshow .display > .oneslideshowbullet > .hooshad-div {
            top: auto !important;
            right: 32px !important;
            bottom: 92px !important;
            left: 32px !important;
            width: auto !important;
            padding: 20px 28px;
            transform: none !important;
            border-radius: 14px;
            background: rgba(0, 32, 30, .70);
            backdrop-filter: blur(5px);
            text-align: right;
            align-items: flex-start;
            box-sizing: border-box;
        }

            .desktop-slideshow .display div h4 {
                margin: 0 0 8px;
                padding: 0;
                font-size: 24px;
                line-height: 1.5;
                text-align: right;
            }

        .desktop-slideshow .display p {
            width: 100%;
            max-width: none;
            margin: 0 0 14px;
            padding: 0;
            font-size: 15px;
            line-height: 1.9;
            text-align: right;
            color: #fff !important;
        }

    .desktop-slideshow span.readmore {
        width: auto !important;
        min-width: 142px;
        padding: 0 16px;
    }

    .desktop-slideshow .slider-bottom {
        right: 0;
        bottom: 24px;
        left: 0;
        width: auto;
        transform: none;
        justify-content: center;
    }

    .desktop-slideshow .slider-navigation {
        position: static;
        transform: none;
    }

    .desktop-slideshow .slideshowbullets li > .oneslideshowbullet {
        display: none !important;
    }
}

/* Home slideshow: compact layout for tablet and mobile */
@media (max-width: 820px) {
    .btn-region {
        margin-right: 3%
    }

    .desktop-slideshow.slideshow {
        width: 100%;
        height: clamp(430px, 68vw, 560px) !important;
        min-height: 0;
        margin: 0 0 36px;
        border-radius: 0;
        overflow: hidden;
    }

    .desktop-slideshow .slidebox,
    .desktop-slideshow .display,
    .desktop-slideshow .display .oneslideshowbullet {
        width: 100%;
        height: 100%;
    }

    .desktop-slideshow .display {
        position: absolute;
        inset: 0;
    }

        .desktop-slideshow .display .oneslideshowbullet {
            display: block;
            position: relative;
            overflow: hidden;
        }

        .desktop-slideshow .display img {
            display: block;
            width: 100%;
            height: 100% !important;
            object-fit: cover;
            object-position: center;
            border-radius: 0;
        }

        .desktop-slideshow .display div {
            top: auto;
            right: 20px;
            bottom: 76px;
            left: 20px;
            width: auto;
            padding: 18px 20px;
            transform: none;
            border-radius: 14px;
            background: rgba(0, 32, 30, .7);
            backdrop-filter: blur(5px);
            text-align: right;
            align-items: flex-start;
            box-sizing: border-box;
        }

            .desktop-slideshow .display div h4 {
                margin: 0 0 8px;
                padding: 0;
                font-size: 23px;
                line-height: 1.5;
                text-align: right;
            }

        .desktop-slideshow .display p {
            width: 100%;
            max-width: none;
            margin: 0 0 14px;
            padding: 0;
            font-size: 14px;
            line-height: 1.9;
            text-align: right;
            color: #FFF !important;
        }

        .desktop-slideshow .display > .oneslideshowbullet > .hooshad-div h4,
        .desktop-slideshow .display > .oneslideshowbullet > .hooshad-div p {
            color: #fff !important;
            width: 100% !important;
            margin-bottom: 12px;
        }

        .desktop-slideshow .display > .oneslideshowbullet > .hooshad-div {
            top: auto !important;
            right: 20px !important;
            bottom: 76px !important;
            left: 20px !important;
            width: auto !important;
            transform: none !important;
        }

    .desktop-slideshow span.readmore {
        width: auto !important;
        min-width: 142px;
        padding: 0 16px;
    }

    .desktop-slideshow .slider-bottom {
        right: 0;
        bottom: 18px;
        left: 0;
        width: auto;
        transform: none;
        justify-content: center;
    }

    .desktop-slideshow .slider-navigation {
        position: static;
        transform: none;
    }

    /* لینک‌های اصلی اسلاید فقط منبع جاوااسکریپت هستند؛ در موبایل نباید پایین اسلایدر دیده شوند. */
    .desktop-slideshow .slideshowbullets li > .oneslideshowbullet {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .desktop-slideshow.slideshow {
        height: clamp(400px, 125vw, 480px) !important;
        background: #f9f9f9;
        margin-bottom: 68px;
        overflow: visible;
        /*! padding-bottom: 40px; */
        height: 500px;
        min-height: 500px;
    }

    /* در موبایل کوچک، تصویر و متن دو بخشِ متصل از یک اسلاید هستند. */
    .desktop-slideshow .blur-page {
        display: none !important;
    }

    .desktop-slideshow .display .oneslideshowbullet {
        display: flex;
        flex-direction: column;
        background: #f9f9f9;
    }

    .desktop-slideshow .display img {
        height: auto !important;
        object-fit: contain;
        object-position: top center;
    }

    .desktop-slideshow .display div {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        flex: 1;
        width: calc(100% - 24px) !important;
        margin: 10px 12px 60px;
        padding: 14px 16px;
        border-radius: 14px;
        background: rgba(0, 32, 30, .78);
        backdrop-filter: blur(7px);
        justify-content: center;
    }

    .desktop-slideshow .display > .oneslideshowbullet > .hooshad-div {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: calc(100% - 24px) !important;
        transform: none !important;
    }

    .desktop-slideshow .slider-bottom {
        bottom: -42px;
    }

    .desktop-slideshow .slideshowbullets li {
        background: rgba(0, 0, 0, .38);
    }

        .desktop-slideshow .slideshowbullets li.active,
        .desktop-slideshow .slideshowbullets li:hover {
            background: #111 !important;
        }

    .desktop-slideshow .display p {
        font-size: 12px;
        line-height: 1.75;
    }

    .desktop-slideshow .slider-navigation {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -5px
    }
}

/* Small mobile slideshow: keep image, copy and navigation in normal flow.
   This prevents desktop positioning rules from narrowing or clipping copy. */
@media (max-width: 480px) {
    .desktop-slideshow.slideshow {
        height: auto !important;
        min-height: 0;
        margin-bottom: 18px;
        overflow: visible;
    }

    .desktop-slideshow .slidebox,
    .desktop-slideshow .display,
    .desktop-slideshow .display .oneslideshowbullet {
        height: auto !important;
    }

    .desktop-slideshow .display {
        position: relative;
        inset: auto;
    }

        .desktop-slideshow .display .oneslideshowbullet {
            display: flex;
            flex-direction: column;
            width: 100%;
            margin: 10px;
            padding: 0
        }


    .desktop-slideshow .display img {
        width: 100%;
        height: auto !important;
        flex: 0 0 auto;
    }

    .desktop-slideshow .display div,
    .desktop-slideshow .display > .oneslideshowbullet > .hooshad-div {
        position: relative !important;
        inset: auto !important;
        flex: 0 0 auto;
        width: calc(100% - 24px) !important;
        max-width: none;
        margin: 10px 12px 14px;
        padding: 16px;
        transform: none !important;
        box-sizing: border-box;
    }

    .desktop-slideshow .display div h4 {
        padding: 0;
        font-size: 20px;
        line-height: 1.55;
    }

    .desktop-slideshow .display p {
        width: 100%;
        margin-bottom: 12px;
        font-size: 12px;
    }

    .desktop-slideshow .slider-bottom {
        position: relative;
        inset: auto;
        width: 100%;
        min-height: 48px;
        margin: 0;
        transform: none;
        justify-content: center;
    }

    .desktop-slideshow .slider-navigation {
        position: static;
        transform: none;
    }
}

/* Use the same stable flow on larger phones and small tablets. */
@media (min-width: 481px) and (max-width: 820px) {
    .desktop-slideshow.slideshow {
        height: clamp(450px, 70vw, 620px) !important;
        min-height: 0;
        margin-bottom: 36px;
        overflow: hidden;
    }

    .desktop-slideshow .slidebox,
    .desktop-slideshow .display,
    .desktop-slideshow .display .oneslideshowbullet {
        height: 100% !important;
    }

    .desktop-slideshow .display {
        position: absolute;
        inset: 0;
    }

    .desktop-slideshow .display .oneslideshowbullet {
        display: block;
        position: relative;
        width: 100%;
    }

    .desktop-slideshow .display img {
        width: 100%;
        height: 100% !important;
        object-fit: contain;
        object-position: center;
    }

    .desktop-slideshow .blur-page {
        display: none !important;
    }

    .desktop-slideshow .display div,
    .desktop-slideshow .display > .oneslideshowbullet > .hooshad-div {
        position: absolute !important;
        top: auto !important;
        right: 20px !important;
        bottom: 82px !important;
        left: 20px !important;
        width: calc(100% - 40px) !important;
        max-width: none;
        margin: 0;
        padding: 20px;
        transform: none !important;
        box-sizing: border-box;
        background: linear-gradient(135deg, rgba(0, 57, 54, .88), rgba(0, 30, 28, .68)) !important;
        backdrop-filter: blur(5px);
    }

    .desktop-slideshow .display div h4 {
        padding: 0;
        font-size: 22px;
        line-height: 1.55;
        text-shadow: 0 2px 8px rgba(0, 0, 0, .65);
    }

    .desktop-slideshow .display p {
        width: 100%;
        margin-bottom: 14px;
        font-size: 14px;
        text-shadow: 0 2px 8px rgba(0, 0, 0, .65);
    }

    .desktop-slideshow .slider-bottom {
        position: absolute;
        right: 0;
        bottom: 20px;
        left: 0;
        width: 100%;
        min-height: 0;
        margin: 0;
        transform: none;
        justify-content: center;
    }

    .desktop-slideshow .slider-navigation {
        position: static;
        transform: none;
    }
}

/* Unified tablet / large-phone slider: image fills the frame and only the
   copy receives a compact contrast panel. */
@media (min-width: 481px) and (max-width: 1000px) {
    .desktop-slideshow.slideshow {
        height: clamp(460px, 60vw, 600px) !important;
        min-height: 0;
        margin-bottom: 36px;
        overflow: hidden;
    }

    .desktop-slideshow .slidebox,
    .desktop-slideshow .display,
    .desktop-slideshow .display .oneslideshowbullet {
        width: 100%;
        height: 100% !important;
    }

    .desktop-slideshow .display {
        position: absolute;
        inset: 0;
    }

    .desktop-slideshow .display .oneslideshowbullet {
        display: block;
        position: relative;
        overflow: hidden;
        background: transparent !important;
    }

    .desktop-slideshow .display img {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100% !important;
        object-fit: cover;
        object-position: center;
    }

    .desktop-slideshow .blur-page {
        display: none !important;
    }

    .desktop-slideshow .display div,
    .desktop-slideshow .display > .oneslideshowbullet > .hooshad-div {
        position: absolute !important;
        top: auto !important;
        right: 5% !important;
        bottom: 86px !important;
        left: 5% !important;
        width: auto !important;
        max-width: none;
        margin: 0;
        padding: clamp(18px, 3vw, 28px);
        transform: none !important;
        box-sizing: border-box;
        border-radius: 16px;
        background: linear-gradient(135deg, rgba(0, 61, 58, .90), rgba(0, 28, 27, .72)) !important;
        backdrop-filter: blur(5px);
    }

    .desktop-slideshow .display div h4 {
        margin: 0 0 8px;
        padding: 0;
        color: #fff !important;
        font-size: clamp(20px, 2.4vw, 27px);
        line-height: 1.5;
        text-align: right;
    }

    .desktop-slideshow .display p {
        display: -webkit-box;
        width: 100%;
        margin: 0 0 14px;
        padding: 0;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        color: #fff !important;
        font-size: clamp(13px, 1.55vw, 15px);
        line-height: 1.9;
        text-align: right;
    }

    .desktop-slideshow span.readmore,
    .desktop-slideshow a.readmore {
        width: auto !important;
        min-width: 138px;
        padding: 0 16px;
    }

    .desktop-slideshow .slider-bottom {
        position: absolute;
        right: 0;
        bottom: 22px;
        left: 0;
        width: 100%;
        margin: 0;
        transform: none;
        justify-content: center;
    }

    .desktop-slideshow .slider-navigation {
        position: static;
        transform: none;
    }
}

/* Compact homepage slideshow spacing on large phones and tablets. */
@media (min-width: 480px) and (max-width: 1000px) {
    .desktop-slideshow.slideshow { margin: 0 0 12px; padding: 0; }
    .desktop-slideshow.slideshow .display div.slide-content,
    .desktop-slideshow.slideshow .display > .oneslideshowbullet > .hooshad-div {
        margin: 0;
        padding: 10px 12px;
    }
    .desktop-slideshow.slideshow .display div.slide-content h4,
    .desktop-slideshow.slideshow .display .hooshad-div h4 {
        padding: 0;
        margin: 0 0 6px;
    }
    .desktop-slideshow.slideshow .display div.slide-content p,
    .desktop-slideshow.slideshow .display .hooshad-div p {
        padding: 0;
        margin: 0 0 8px;
    }
    .desktop-slideshow.slideshow .slider-navigation { margin: 0; }
}

/* ===== صفحه اصلی – موبایل (تا 480px): فاصله یکسان همه بخش‌ها از چپ و راست =====
   قبلاً بعضی بخش‌ها 12px و بعضی 5% از لبه فاصله داشتند و باکس‌های سفید هم‌راستا نبودند.
   برای تغییر فاصله فقط مقدار --home-gutter را عوض کنید. */
@media (max-width: 480px) {
    .all {
        --home-gutter: 16px;
    }

        .all > .eservices-section,
        .all > .news-section,
        .all > .our-services,
        .all > .regions,
        .all > .messages-container,
        .all .chart-wrap .chart-box {
            width: calc(100% - (var(--home-gutter) * 2));
            margin-right: auto;
            margin-left: auto;
            box-sizing: border-box;
        }

        .all .chart-wrap h2 {
            right: var(--home-gutter);
            width: calc(100% - (var(--home-gutter) * 2));
        }

        /* اسلایدشو بالای صفحه */
        .all .desktop-slideshow .display .oneslideshowbullet {
            width: calc(100% - (var(--home-gutter) * 2)) !important;
            margin-right: var(--home-gutter);
            margin-left: var(--home-gutter);
        }

            .all .desktop-slideshow .display .oneslideshowbullet img {
                padding-right: 0;
                padding-left: 0;
            }

            .all .desktop-slideshow .display .oneslideshowbullet > div {
                width: 100% !important;
                margin-right: 0;
                margin-left: 0;
            }
}

/* Bale bot: mirrored companion to the electronic services section. */
.bazoo-section {
    position: relative;
    width: 90%;
    box-sizing: border-box;
    margin: clamp(100px, 10vw, 150px) auto 64px;
    padding: 0 0 24px;
    border-radius: 8px;
    background: url('../../images/baleback.png') center center/cover no-repeat;
    color: #fff;
    overflow: visible;
}
.bazoo-container {
    position: relative;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    min-height: 420px;
    align-items: center;
    gap: clamp(32px, 6vw, 90px);
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 70px);
    box-sizing: border-box;
}
.bazoo-section .bazoo-image {
    position: relative;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    display: block;
    width: 280px;
    max-width: 100%;
    height: auto;
    margin: -105px 0 0;
    align-self: start;
    object-fit: contain;
}
.bazoo-content { grid-column: 2; min-width: 0; max-width: 620px; padding: 32px 0 8px; }
.bazoo-section .bazoo-title {
    font-family: WebmehrazFont;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.6;
    color: #fff;
    margin: 0 0 14px;
}
.bazoo-section .bazoo-desc {
    font-family: WebmehrazFont;
    font-size: 15px;
    line-height: 2;
    color: #f0f8f5;
    text-align: justify;
    overflow-wrap: anywhere;
    margin: 0 0 22px;
}
.bazoo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; }
.bazoo-section .bazoo-button {
    background: #fff;
    color: #007F76;
    border: 1px solid #fff;
    cursor: pointer;
}
.bazoo-section .bazoo-button:hover { background: #e5f4ee; border-color: #e5f4ee; color: #024c3e; }
.bazoo-section .bazoo-about { display: inline-flex; visibility: visible; opacity: 1; background: #fff; color: #444; border: 1px solid #e0e0e0; cursor: pointer; }
.bazoo-section .btn-action:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (max-width: 960px) {
    .bazoo-section { margin-top: 110px; margin-bottom: 32px; padding: 0 0 28px; }
    .bazoo-container { grid-template-columns: 1fr; min-height: 0; gap: 20px; justify-items: center; }
    .bazoo-section .bazoo-image {
        position: relative;
        right: auto;
        top: auto;
        bottom: auto;
        transform: none;
        width: min(220px, 65%);
        margin-top: -28px;
    }
    .bazoo-content { grid-column: 1; max-width: 100%; padding: 0; text-align: center; }
    .bazoo-actions { justify-content: center; }
}
@media (max-width: 600px) {
    .bazoo-section { width: calc(100% - 32px); margin-top: 90px; padding-bottom: 24px; }
    .bazoo-container { padding: 0 20px; gap: 16px; }
    .bazoo-section .bazoo-image { width: min(180px, 65%); margin-top: -24px; }
    .bazoo-section .bazoo-title { font-size: 24px; margin-bottom: 12px; }
    .bazoo-section .bazoo-desc { font-size: 14px; line-height: 1.9; margin-bottom: 18px; }
    .bazoo-section .btn-action { max-width: 100%; height: auto; min-height: 46px; padding: 10px 20px; text-align: center; }
}



/* ==================== START: Profile.cshtml — staff profile ==================== */
.staff-profile {
    background: #f8f8f8;
    color: #303030;
    font-family: WebmehrazFont, Tahoma, sans-serif;
    padding: 32px 0 64px;
}
.staff-profile *, .staff-profile *::before, .staff-profile *::after { box-sizing: border-box; }
.staff-profile__layout {
    width: 80%; max-width: none; margin-inline: auto;
    display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 36px; align-items: start;
}
.staff-profile__sidebar, .staff-profile__content { min-width: 0; }
.staff-profile__sidebar { display: grid; gap: 10px; }
.staff-profile__identity, .staff-profile__side-card { background: #fff; border: 1px solid #e7e7e7; border-radius: 5px; }
.staff-profile__identity { padding: 7px; overflow: hidden; }
.staff-profile__portrait { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 3px; }
.staff-profile__person { padding: 12px 9px 6px; }
.staff-profile__person h2 { font-size: 17px; font-weight: 500; margin: 0 0 6px; }
.staff-profile__person p { margin: 4px 0; line-height: 1.9; font-size: 13px; }
.staff-profile .staff-profile__muted { color: #929292; font-size: 12px; }
.staff-profile__extension { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 15px; padding: 8px; border: 1px solid #e5e5e5; border-radius: 4px; font-size: 12px; color: #666; }
.staff-profile__extension img { width: 18px; height: 18px; object-fit: contain; }
.staff-profile__side-card { padding: 17px 18px; }
.staff-profile__side-card h2 { margin: 0 0 13px; font-size: 15px; font-weight: 500; }
.staff-profile__side-card ul { padding: 0 16px 0 0; margin: 0; color: #777; font-size: 12px; line-height: 2; }
.staff-profile__side-card li + li { margin-top: 5px; }
.staff-profile__intro, .staff-profile__duty, .staff-profile__document { background: #fff; border-radius: 4px; box-shadow: 0 3px 22px #00000005; }
.staff-profile__intro { padding: 20px 24px; }
.staff-profile__intro h1 { margin: 0 0 14px; font-size: 21px; line-height: 1.7; font-weight: 500; }
.staff-profile__intro p { margin: 0; font-size: 14px; line-height: 2.1; color: #656565; }
.staff-profile__duties { margin-top: 36px; }
.staff-profile__section-title { margin: 0 0 18px; font-size: 18px; font-weight: 500; }
.staff-profile__duty-list { display: grid; gap: 10px; }
.staff-profile__duty { display: block; border-right: 4px solid #aceee7; padding: 16px 18px; }
.staff-profile__icon { display: grid; place-items: center; width: 38px; height: 38px; background: #e6f6f4; border-radius: 5px; }
.staff-profile__icon img { width: 20px; height: 20px; object-fit: contain; }
.staff-profile__duty h3 { margin: 0 0 4px; font-size: 15px; font-weight: 500; line-height: 1.8; }
.staff-profile__duty p { margin: 0; color: #686868; font-size: 13px; line-height: 1.9; }
.staff-profile__documents { display: grid; gap: 10px; margin-top: 38px; }
.staff-profile__document { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 17px 18px; min-height: 84px; }
.staff-profile__file-icon { position: relative; display: grid; place-items: center; width: 42px; height: 48px; }
.staff-profile__file-icon img { width: 42px; height: 48px; object-fit: contain; }
.staff-profile__document h3 { margin: 0; font-size: 13px; font-weight: 400; line-height: 1.9; }
.staff-profile__document-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    color: #1F1F1F;
    font-size: 12px;
    line-height: 1.8;
}
.staff-profile p, .staff-profile h1, .staff-profile h2, .staff-profile h3, .staff-profile li { overflow-wrap: anywhere; }
@media (max-width: 1000px) {
    .staff-profile__layout { grid-template-columns: 215px minmax(0, 1fr); gap: 22px; }
    .staff-profile__document { grid-template-columns: 38px minmax(0, 1fr); gap: 6px 12px; }
    .staff-profile__file-icon { grid-row: span 2; }
    .staff-profile__document-meta { grid-column: 2; }
}
@media (max-width: 700px) {
    .staff-profile { padding: 20px 0 40px; }
    .staff-profile__layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .staff-profile__sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .staff-profile__identity { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); align-items: center; gap: 12px; }
    .staff-profile__person { padding: 8px; }
    .staff-profile__intro { padding: 18px; }
    .staff-profile__duties { margin-top: 26px; }
    .staff-profile__documents { margin-top: 26px; }
}
@media (max-width: 400px) {
    .staff-profile__sidebar { grid-template-columns: minmax(0, 1fr); }
    .staff-profile__person h2 { font-size: 15px; }
    .staff-profile__person p { font-size: 12px; }
    .staff-profile__duty { padding: 14px 12px; }
    .staff-profile__icon { width: 30px; height: 32px; }
    .staff-profile__intro h1 { font-size: 19px; }
}
.staff-profile a.staff-profile__document { color: inherit; text-decoration: none; cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease; }
.staff-profile a.staff-profile__document:hover { background: #f0faf8; box-shadow: 0 3px 16px #007f7612; }
.staff-profile a.staff-profile__document:focus-visible { outline: 2px solid #007f76; outline-offset: 3px; }
.staff-profile__duties .staff-profile__documents { margin-top: 0; }
/* Document card: file icon | title with date/time below | view + download icons (used on profile and management pages) */
.staff-profile__documents .staff-profile__document { grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.staff-profile__documents .staff-profile__file-icon { grid-row: auto; }
.staff-profile__document-body { display: grid; gap: 6px; min-width: 0; }
.staff-profile__documents .staff-profile__document-meta { grid-column: auto; color: #8a8a8a; }
.staff-profile__document-actions { display: flex; align-items: center; gap: 6px; align-self: end; }
.staff-profile__document-actions a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; transition: background-color .15s ease; }
.staff-profile__document-actions a:hover { background: #f0faf8; }
.staff-profile__document-actions a:focus-visible { outline: 2px solid #007f76; outline-offset: 2px; }
.staff-profile__document-actions img { width: 22px; height: 22px; object-fit: contain; }
@media (max-width: 700px) {
    .staff-profile__documents .staff-profile__document { grid-template-columns: 40px minmax(0, 1fr); gap: 8px 12px; }
    .staff-profile__documents .staff-profile__file-icon { grid-row: span 2; align-self: start; }
    .staff-profile__document-actions { grid-column: 2; justify-self: end; }
}
.staff-profile__empty { display: grid; place-items: center; min-height: 128px; margin: 0; padding: 20px; border: 1px dashed #cfcfcf; border-radius: 5px; background: #fff; color: #777; font-size: 12px; text-align: center; }
.staff-profile .staff-profile__intro { background: none; box-shadow: none; padding: 0; }
/* ==================== END: Profile.cshtml — staff profile ==================== */


/* ==================== START: news.cshtml — combined news archive ==================== */
.news-archive { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; width: 80%; max-width: none; margin: 32px auto 56px; padding: 20px; border-radius: 5px; background: #fff; font-family: WebmehrazFont, Tahoma, sans-serif; color: #333; }
.news-archive * { box-sizing: border-box; }
.news-archive__tabs { display: flex; flex-direction: column; align-self: start; gap: 6px; }
.news-archive .news-archive__tab { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 10px 6px; color: #777; font-size: 14px; text-decoration: none; border-radius: 4px; cursor: pointer; }
.news-archive__tab img { width: 18px; height: 18px; object-fit: contain; filter: grayscale(1); }
.news-archive .news-archive__tab.is-active { color: #00aaa0; background: #f5fbfa; }
.news-archive__tab.is-active img { filter: none; }
.news-archive__panels, .news-archive__panel { min-width: 0; }
.news-archive .news-archive__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.news-archive__item { min-width: 0; }
.news-archive .news-archive__card { display: flex; flex-direction: column; height: 100%; padding: 6px; border: 1px solid #e6e6e6; border-radius: 5px; text-decoration: none; color: #333; background: #fff; transition: box-shadow .18s ease, border-color .18s ease; }
.news-archive__card:hover { box-shadow: 0 1px 10px #0002; border-color: #d6d6d6; }
.news-archive__image { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; }
.news-archive__card h2 { margin: 12px 3px 18px; font-size: 14px; font-weight: 400; line-height: 1.9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 5.7em; overflow-wrap: anywhere; }
.news-archive__meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-top: auto; padding: 0 2px 3px; font-size: 10px; color: #777; }
.news-archive__meta span { display: inline-flex; align-items: center; gap: 4px; }
.news-archive__meta svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.news-archive .news-archive__more { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 22px auto 0; padding: 9px 24px; width: 240px; max-width: 100%; border: 1px solid #e5e5e5; border-radius: 5px; background: #fff; color: #555; font: inherit; font-size: 13px; cursor: pointer; }
.news-archive__more:hover { background: #f3faf9; }
.news-archive [hidden] { display: none !important; }
.news-archive__empty { padding: 48px 16px; text-align: center; color: #888; }
.news-archive__status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.news-archive a:focus-visible, .news-archive button:focus-visible { outline: 2px solid #009d92; outline-offset: 3px; }
@media (max-width: 850px) { .news-archive { grid-template-columns: 80px minmax(0, 1fr); padding: 14px; } .news-archive .news-archive__grid { gap: 12px; } .news-archive__card h2 { font-size: 12px; } }
@media (max-width: 600px) { .news-archive { grid-template-columns: minmax(0, 1fr); width: 80%; margin-top: 20px; padding: 12px; } .news-archive__tabs { flex-direction: row; } .news-archive__tab { flex: 1; } .news-archive .news-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .news-archive .news-archive__grid { grid-template-columns: minmax(0, 1fr); } .news-archive__card h2 { min-height: 0; font-size: 14px; } }
/* ==================== END: news.cshtml — combined news archive ==================== */


/* ==================== START: content.cshtml — news detail ==================== */
.news-detail { width: 80%; margin: 0 auto 48px; padding: 36px 32px; background: #fff; color: #303030; direction: rtl; font-family: WebmehrazFont, Tahoma, sans-serif; box-sizing: border-box; }
.news-detail *, .news-detail *::before, .news-detail *::after { box-sizing: border-box; }
.news-detail__header { height: auto !important; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; align-items: start; margin-bottom: 30px; }
.news-detail__header--text { grid-template-columns: minmax(0, 1fr); }
.news-detail__intro { min-width: 0; }
.news-detail h1 { margin: 0 0 28px; font-size: clamp(19px, 1.6vw, 25px); line-height: 1.65; font-weight: 700; color: #222; overflow-wrap: anywhere; }
.news-detail__subtitle { margin: 0 0 10px; font-size: 13px; line-height: 1.9; color: #777; }
.news-detail__summary { margin-bottom: 18px; font-size: 14px; line-height: 2; }
.news-detail__summary p { margin: 0; }
.news-detail__date { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 13px; color: #555; }
.news-detail__date span { display: inline-flex; align-items: center; gap: 6px; }
.news-detail__date svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.news-detail__hero { display: block; min-width: 0; border-radius: 5px; overflow: hidden; }
.news-detail__hero img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.news-detail__body { font-size: 15px; line-height: 2; text-align: right; overflow-wrap: anywhere; }
.news-detail__body p { margin: 0 0 12px; }
.news-detail__body img, .news-detail__summary img { max-width: 100% !important; height: auto !important; }
.news-detail__body iframe, .news-detail__body video { max-width: 100%; }
.news-detail__body table { display: block; max-width: 100%; overflow-x: auto; }
.news-detail__body ul, .news-detail__body ol { padding-inline-start: 24px; }
.news-detail__media:empty { display: none; }
.news-detail__media video, .news-detail__media audio { display: block; width: 100%; max-width: 100%; margin-top: 28px; }
.news-detail__embed { margin-top: 28px; }
.news-detail a:focus-visible { outline: 2px solid #009f95; outline-offset: 4px; }
@media (max-width: 1000px) { .news-detail { width: 90%; padding: 26px 22px; } .news-detail__header { gap: 24px; } .news-detail h1 { margin-bottom: 18px; } }
.news-detail__gallery { display:block; margin-top:32px; width:100%; min-width:0; }
.news-detail__slides { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; width:100%; }
.news-detail__slide { margin:0; width:100%; }
.news-detail__slide[hidden] { display:none; }
.news-detail__slide a { display:block; overflow:hidden; border-radius:5px; }
.news-detail__slide img { display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover; }
.news-detail__slider-controls { display:none; justify-content:center; align-items:center; gap:18px; margin-top:12px; }
.news-detail__slider-controls button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid #dce9e6; border-radius:50%; background:#f0f8f6; color:#007f76; cursor:pointer; font:24px/1 Arial,sans-serif; }
.news-detail__slider-controls button:hover { background:#e1f0ec; }
.news-detail__slide-count { min-width:60px; text-align:center; font-size:13px; color:#666; }
.news-detail__gallery:focus-visible,.news-detail__slider-controls button:focus-visible { outline:2px solid #009f95; outline-offset:3px; }
/* Tablet: full-width reading column; album remains a grid. */
@media(min-width:701px) and (max-width:1100px) {
    .news-detail { width:calc(100% - 40px); padding:24px; }
    .news-detail__header { grid-template-columns:minmax(0,1fr); gap:24px; margin-bottom:26px; }
    .news-detail__hero { grid-row:1; width:100%; max-width:720px; justify-self:center; }
    .news-detail__hero img { max-height:420px; object-fit:contain; }
    .news-detail h1 { font-size:23px; line-height:1.85; margin-bottom:18px; }
    .news-detail__summary { font-size:16px; line-height:2; }
    .news-detail__body { font-size:16px; line-height:2.15; }
    .news-detail__body * { max-width:100%; }
    .news-detail__slides { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
}
@media(max-width:700px) {
    .news-detail { display:flex; flex-direction:column; width:calc(100% - 20px); margin:12px auto 30px; padding:8px; border:1px solid #e5e5e5; border-radius:5px; }
    .news-detail__header,.news-detail__intro { display:contents; }
    .news-detail__hero { order:0; width:100%; margin-bottom:16px; }
    .news-detail__hero img { aspect-ratio:3 / 2; }
    .news-detail__subtitle { order:1; padding-inline:5px; }
    .news-detail h1 { order:2; font-size:17px; line-height:1.9; margin:0 5px 16px; }
    .news-detail__summary { order:3; padding-inline:5px; font-size:13px; line-height:2; margin-bottom:16px; }
    .news-detail__body { order:4; min-width:0; padding-inline:5px; font-size:14px; line-height:2.1; }
    .news-detail__body * { max-width:100%; }
    .news-detail__date { order:5; margin:16px 5px 8px; font-size:12px; }
    .news-detail__gallery { order:6; margin-top:20px; }
    .news-detail__media { order:7; min-width:0; }
    .news-detail__slides { display:block; overflow:hidden; background:#f5f7f6; border-radius:5px; touch-action:pan-y; }
    .news-detail__slider-controls { display:flex; }
    .news-detail__slide img { height:auto; aspect-ratio:3 / 2; object-fit:contain; }
}
/* Responsive news heading and back navigation */
.news-detail__titlebar { display:contents; }
.news-detail__back { display:none; }
@media(max-width:1100px) {
    .news-detail { display:flex; flex-direction:column; }
    .news-detail__header,.news-detail__intro { display:contents; }
    .news-detail__titlebar { display:flex; align-items:flex-start; gap:12px; order:0; margin-bottom:12px; }
    .news-detail .news-detail__titlebar h1 { flex:1; min-width:0; margin:0; order:0; }
    .news-detail__back { display:flex; align-items:center; justify-content:center; flex:0 0 36px; width:36px; height:36px; border:0; background:transparent; border-radius:4px; cursor:pointer; }
    .news-detail__back img { width:18px; height:18px; object-fit:contain; opacity:.55; }
    .news-detail__back:hover { background:#f3f7f6; }
    .news-detail__subtitle { order:1; }
    .news-detail__hero { order:2; align-self:center; margin-bottom:20px; }
    .news-detail__summary { order:3; }
    .news-detail__body { order:4; }
    .news-detail__date { order:5; margin-top:16px; }
    .news-detail__gallery { order:6; }
    .news-detail__media { order:7; }
}
/* ==================== END: content.cshtml — news detail ==================== */


/* ==================== START: contact.cshtml — contact page ==================== */
.contact-page { width: 80%; max-width: 1100px; margin: 30px auto 50px; direction: rtl; color: #3a3a3a; font-family: WebmehrazFont, Tahoma, sans-serif; }
.contact-page *, .contact-page *::before, .contact-page *::after { box-sizing: border-box; }
.contact-page__intro { margin-bottom: 28px; }
.contact-page__intro h1 { margin: 0 0 18px; font-size: 22px; font-weight: 500; line-height: 1.7; }
.contact-page__intro p { margin: 0; font-size: 14px; line-height: 2; color: #777; }
.contact-page__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.contact-page__card { display: flex; flex-direction: column; align-items: stretch; min-width: 0; min-height: 265px; padding: 24px; background: #fff; box-shadow: 0 3px 22px #00000006; border-radius: 4px; }
.contact-page__icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 20px; background: #e3f5f3; border-radius: 5px; }
.contact-page__icon svg { display: block; width: 23px; height: 23px; fill: none; stroke: #00aaa0; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.contact-page__card h2 { font-size: 18px; font-weight: 500; margin: 0 0 12px; line-height: 1.7; }
.contact-page__card p { margin: 0 0 22px; color: #777; font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.contact-page .contact-page__action { display: flex; align-items: center; justify-content: center; margin-top: auto; padding: 9px 12px; min-height: 40px; width: 100%; border: 1px solid #e6e6e6; border-radius: 4px; background: #fff; font: inherit; font-size: 12px; color: #666; text-decoration: none; cursor: pointer; }
.contact-page__action:hover { background: #f0faf8; border-color: #bcded8; }
.contact-page__map { width: 100%; height: clamp(260px, 27vw, 380px); margin-top: 32px; border-radius: 5px; overflow: hidden; z-index: 0; box-shadow: 0 3px 18px #00000008; }
.contact-page__dialog { width: min(580px, calc(100% - 32px)); max-height: calc(100dvh - 40px); margin: auto; padding: 26px; overflow-y: auto; border: 0; border-radius: 12px; color: #333; font-family: inherit; box-shadow: 0 20px 70px #0003; }
.contact-page__dialog::backdrop { background: #0007; }
.contact-page__dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.contact-page__dialog-heading h2 { margin: 0; font-size: 20px; }
.contact-page__close { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #eff5f4; color: #36605a; cursor: pointer; font: 24px/1 Arial, sans-serif; }
.contact-page__form-lead { color: #777; font-size: 13px; line-height: 1.9; }
.contact-page__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 20px 0 16px; }
.contact-page__form label { display: block; margin-bottom: 7px; font-size: 13px; }
.contact-page__form input, .contact-page__form textarea { display: block; width: 100%; min-width: 0; border: 1px solid #ddd; border-radius: 5px; padding: 10px 12px; background: #fff; font: inherit; font-size: 13px; color: #333; }
.contact-page__form textarea { resize: vertical; min-height: 120px; }
.contact-page__form input[type=email], .contact-page__form input[type=tel] { direction: ltr; }
.contact-page__form .field-validation-error { display: block; color: #b42626; font-size: 12px; }
.contact-page__submit { display: block; margin: 20px 0 0; padding: 11px 28px; border: 0; border-radius: 5px; background: #007f76; color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.contact-page a:focus-visible, .contact-page button:focus-visible, .contact-page input:focus-visible, .contact-page textarea:focus-visible { outline: 2px solid #009e92; outline-offset: 3px; }
@media (max-width: 900px) { .contact-page { width: 90%; } .contact-page__cards { gap: 16px; } .contact-page__card { padding: 18px; } .contact-page__card h2 { font-size: 16px; } }
@media (max-width: 600px) { .contact-page { width: calc(100% - 32px); margin-top: 22px; } .contact-page__cards { grid-template-columns: minmax(0, 1fr); } .contact-page__card { min-height: 0; padding: 22px; } .contact-page__icon { margin-bottom: 12px; } .contact-page__map { margin-top: 22px; height: 280px; } .contact-page__fields { grid-template-columns: minmax(0, 1fr); } .contact-page__dialog { padding: 20px; } }
.contact-page .contact-page__icon > .contact-page__phone-icon { display: block; position: static; width: 23px; height: 23px; max-width: 23px; object-fit: contain; transform: none; }
/* ==================== END: contact.cshtml — contact page ==================== */

/* Contact: navigation app chooser */
.contact-page__directions { max-width: 440px; }
.contact-page__direction-options { display: grid; gap: 12px; margin-top: 24px; }
.contact-page__direction-options a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px; background: #eff8f6; border: 1px solid #d5eae5; border-radius: 7px; color: #007f76; text-decoration: none; font-size: 15px; }
.contact-page__direction-options a:hover { background: #dff2ed; }
/* ==================== START: Introduction.cshtml — fund introduction tabs ==================== */
.fund-intro { display:grid; grid-template-columns:170px minmax(0,1fr); gap:18px; width:80%; max-width:1200px; margin:36px auto 60px; padding:14px; background:#fff; border-radius:5px; color:#444; font-family:WebmehrazFont,Tahoma,sans-serif; }
.fund-intro * { box-sizing:border-box; }
.fund-intro__tabs { display:flex; flex-direction:column; gap:4px; align-self:start; background:#fafafa; border-radius:4px; }
.fund-intro .fund-intro__tab { display:flex; align-items:center; gap:9px; padding:14px 10px; color:#888; text-decoration:none; font-size:13px; line-height:1.8; cursor:pointer; border-radius:4px; }
.fund-intro .fund-intro__tab.is-active { background:#fff; color:#00a99d; }
.fund-intro__tab:hover { background:#f0f9f7; }
.fund-intro svg { width:18px; height:18px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.fund-intro__panel[hidden] { display:none; }
.fund-intro__panels,.fund-intro__panel { min-width:0; }
.fund-intro__panel { padding:3px 8px 8px; }
.fund-intro__panel h1 { margin:0 0 18px; font-size:17px; font-weight:500; line-height:2; }
.fund-intro__summary,.fund-intro__content { font-size:13px; line-height:2.1; overflow-wrap:anywhere; }
.fund-intro__summary { margin-bottom:22px; }
.fund-intro__content img { max-width:100% !important; height:auto !important; }
.fund-intro__content table { display:block; overflow:auto; max-width:100%; }
.fund-intro__content iframe { max-width:100%; }
.fund-intro__document { border:1px solid #eee; border-radius:5px; box-shadow:0 2px 14px #00000005; }
.fund-intro__document summary { display:flex; align-items:center; gap:14px; padding:14px; list-style:none; cursor:pointer; }
.fund-intro__document summary::-webkit-details-marker { display:none; }
.fund-intro__document summary img { width:38px; height:44px; object-fit:contain; }
.fund-intro__document summary span { flex:1; }
.fund-intro__document strong { display:block; font-size:14px; font-weight:400; }
.fund-intro__document small { display:block; margin-top:7px; font-size:11px; color:#999; }
.fund-intro__document summary svg { color:#999; }
.fund-intro__document summary .fund-intro__see { width:22px; height:22px; margin-inline-start:auto; }
.fund-intro__document > .fund-intro__content { padding:16px; border-top:1px solid #eee; }
.fund-intro .sqsh-regdoc-list { display:grid; gap:12px; list-style:none; padding:0; margin:20px 0 0; }
.fund-intro .sqsh-regdoc-item { display:flex; align-items:center; gap:14px; padding:14px; border:1px solid #eee; border-radius:5px; box-shadow:0 2px 14px #00000005; }
.fund-intro .sqsh-regdoc-item::before { content:""; flex:0 0 38px; height:44px; background:url('/icons/file-types/pdf.png') center/contain no-repeat; }
.fund-intro .sqsh-regdoc-content { flex:1; min-width:0; }
.fund-intro .sqsh-regdoc-link { color:#444; text-decoration:none; }
.fund-intro .sqsh-regdoc-info { display:flex; gap:10px; color:#999; font-size:11px; margin-top:4px; }
.fund-intro .sqsh-regdoc-download { color:#888; text-decoration:none; font-size:20px; padding:8px; }
.fund-intro .sqsh-regdoc-counter,.fund-intro .sqsh-regdoc-file,.fund-intro .sqsh-pdf-popup { display:none; }
.fund-intro a:focus-visible,.fund-intro summary:focus-visible { outline:2px solid #00a99d; outline-offset:3px; }
@media(max-width:800px) { .fund-intro { width:90%; grid-template-columns:150px minmax(0,1fr); gap:10px; } }
@media(max-width:600px) { .fund-intro { width:calc(100% - 24px); grid-template-columns:minmax(0,1fr); margin-top:20px; padding:10px; } .fund-intro__tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .fund-intro .fund-intro__tab { padding:10px 8px; font-size:12px; } .fund-intro__panel { padding-top:16px; } .fund-intro__document summary { gap:9px; padding:10px; } .fund-intro__document strong { font-size:12px; } }
/* ==================== END: Introduction.cshtml — fund introduction tabs ==================== */
/* ==================== START: BoardMembers.cshtml — responsive members grid ==================== */
.board-members { width:80%; max-width:1100px; margin:36px auto 60px; font-family:WebmehrazFont,Tahoma,sans-serif; color:#333; }
.board-members * { box-sizing:border-box; }
.board-members h1 { font-size:19px; line-height:1.9; font-weight:500; margin:0 0 20px; }
.board-members__intro { font-size:13px; line-height:2.2; margin:0 0 32px; }
.board-members__grid { border:1px solid #ddd; border-radius:5px; overflow:hidden; box-shadow:0 3px 18px #00000005; }
.board-members__row { display:grid; grid-template-columns:104px minmax(0,1fr) minmax(0,1fr) 155px; }
.board-members--trustees .board-members__row { grid-template-columns:104px repeat(3,minmax(0,1fr)) 155px; }
.board-members__cell { display:flex; align-items:center; justify-content:center; min-width:0; padding:12px; border-inline-end:1px solid #e4e4e4; text-align:center; font-size:13px; line-height:1.9; overflow-wrap:anywhere; }
.board-members__cell:last-child { border-inline-end:0; }
.board-members__head { background:#e5f5f4; color:#777; }
.board-members__head .board-members__cell { font-size:12px; padding:10px 6px; gap:5px; }
.board-members__head svg { width:14px; height:14px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
#board-rows > .board-members__row { border-top:1px solid #e4e4e4; }
#board-rows > .board-members__row:nth-child(odd) { background:#f8f8f8; }
#board-rows > .board-members__row:nth-child(even) { background:#fff; }
#board-rows > .board-members__row:hover { background:#f0f8f7; }
.board-members__portrait { position:relative; display:inline-grid; place-items:center; width:76px; height:86px; flex-shrink:0; overflow:hidden; border-radius:4px; background:#eaf0ef; color:#60877f; }
.board-members__portrait img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.board-members .board-members__action { padding:12px; }
.board-members .board-members__profile { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-width:0; margin:0; padding:7px 6px; border:1px solid #e2e2e2; background:#fff; border-radius:4px; color:#666; font:11px WebmehrazFont,Tahoma,sans-serif; text-decoration:none; cursor:pointer; white-space:nowrap; }
.board-members__profile:hover { color:#007f76; border-color:#9acbc4; }
.board-members__profile span { font:17px Arial,sans-serif; }
.board-members__sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.board-members a:focus-visible { outline:2px solid #008f82; outline-offset:3px; }
@media(max-width:1000px) { .board-members { width:90%; } }
.board-members__head .board-members__profile-heading-icon { display:block; width:20px; height:20px; object-fit:contain; opacity:.55; }
.board-members__mobile-head { display:none; }
.board-members__profile img { width:16px; height:16px; object-fit:contain; }
.board-members__profile .board-members__profile-label { font:inherit; }
@media(max-width:760px) {
    .board-members { width:calc(100% - 24px); margin-top:24px; }
    .board-members__intro { font-size:12px; margin-bottom:22px; }
    .board-members .board-members__head { display:none; }
    .board-members__mobile-head { display:grid; grid-template-columns:80px minmax(0,1fr) 64px; background:#e5f5f4; color:#777; }
    .board-members__mobile-head > div { display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; padding:10px 4px; border-inline-end:1px solid #ddd; font-size:13px; }
    .board-members__mobile-head > div:last-child { border:0; }
    .board-members__mobile-head img { width:20px; height:20px; object-fit:contain; opacity:.55; }
    .board-members .board-members__row { grid-template-columns:80px minmax(0,1fr) 64px; grid-template-rows:auto auto; padding:0; gap:0; }
    .board-members--trustees .board-members__row { grid-template-rows:auto auto auto; }
    .board-members .board-members__cell { font-size:13px; line-height:1.85; }
    .board-members .board-members__photo { grid-column:1; grid-row:1 / -1; padding:10px 6px; }
    .board-members__portrait { width:64px; height:76px; }
    .board-members .board-members__field { grid-column:2; padding:0 8px; color:#666; }
    .board-members .board-members__field:nth-child(2) { grid-row:1; padding-top:10px; font-size:15px; font-weight:600; color:#222; }
    .board-members .board-members__field:nth-child(3) { grid-row:2; }
    .board-members .board-members__field:nth-last-child(2) { padding-bottom:10px; }
    .board-members--trustees .board-members__field:nth-child(4) { grid-row:3; }
    .board-members .board-members__action { grid-column:3; grid-row:1 / -1; padding:10px; }
    .board-members .board-members__profile { width:40px; height:40px; padding:10px; border-radius:7px; }
    .board-members__profile .board-members__profile-label { display:none; }
    .board-members__profile img { width:18px; height:18px; }
}
@media(max-width:360px) {
    .board-members__mobile-head,.board-members .board-members__row { grid-template-columns:72px minmax(0,1fr) 54px; }
    .board-members .board-members__action { padding:7px; }
    .board-members__portrait { width:56px; height:66px; }
    .board-members .board-members__field { font-size:12px; padding-inline:5px; }
    .board-members .board-members__field:nth-child(2) { font-size:14px; }
}
/* ==================== END: BoardMembers.cshtml — responsive members grid ==================== */
/* ==================== BEGIN: ManagementOffice.cshtml — CEO office page ==================== */
.mgmt-office { width:80%; max-width:1100px; margin:24px auto 60px; font-family:WebmehrazFont,Tahoma,sans-serif; color:#333; }
.mgmt-office * { box-sizing:border-box; }
.mgmt-office h1,.mgmt-office h2,.mgmt-office h3,.mgmt-office p { margin:0; }
.mgmt-office__crumbs { display:flex; flex-wrap:wrap; gap:6px; padding-bottom:20px; margin-bottom:28px; border-bottom:1px solid #eee; font-size:13px; color:#999; }
.mgmt-office__crumbs a { color:#888; text-decoration:none; }
.mgmt-office__crumbs a:hover { color:#007f76; }
.mgmt-office > h1 { font-size:19px; font-weight:600; line-height:1.9; margin-bottom:16px; }
.mgmt-office__intro p { font-size:13px; line-height:2.2; color:#444; text-align:justify; }
.mgmt-office .mgmt-office__members { width:auto; max-width:none; margin:28px 0 0; }
.mgmt-office .board-members__row { grid-template-columns:112px minmax(0,1fr) minmax(0,1fr) 155px; }
.mgmt-office .board-members__portrait { width:84px; height:96px; border-radius:6px; }
.mgmt-office__tasks { margin-top:40px; }
.mgmt-office h2 { font-size:16px; font-weight:600; line-height:1.9; margin-bottom:16px; }
.mgmt-office__task { margin-top:10px; padding:14px 18px; border:1px solid #eee; border-inline-start:4px solid #B5EEEA; border-radius:6px; background:#fff; }
.mgmt-office__task h3 { font-size:14px; font-weight:600; line-height:1.9; color:#222; }
.mgmt-office__task p { font-size:12px; line-height:2; color:#666; }
.mgmt-office__cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:40px; }
.mgmt-office__card { padding:22px 22px 18px; border:1px solid #eee; border-radius:6px; background:#fff; }
.mgmt-office__card h2 { font-size:15px; margin-bottom:12px; }
.mgmt-office__card p { font-size:12px; line-height:2.2; color:#555; text-align:justify; }
.mgmt-office__tasks--continued { margin-top:16px; }
.mgmt-office__text { font-size:13px; line-height:2.2; color:#444; text-align:justify; }
.mgmt-office__text + .mgmt-office__text { margin-top:8px; }
.mgmt-office__goals { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.mgmt-office__goal { display:flex; flex-direction:column; justify-content:center; gap:4px; min-height:92px; padding:16px 14px; border:1px solid #eee; border-radius:6px; background:#fff; text-align:center; }
.mgmt-office__goal h3 { font-size:13px; font-weight:600; line-height:1.9; color:#222; }
.mgmt-office__goal--titled { justify-content:flex-start; text-align:right; }
.mgmt-office__goals--lists { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.mgmt-office__goal ul { margin:6px 0 0; padding:0; list-style:none; }
.mgmt-office__goal li { position:relative; padding:3px 14px 3px 0; font-size:12px; line-height:2; color:#666; }
.mgmt-office__goal li::before { content:""; position:absolute; right:2px; top:13px; width:5px; height:5px; border-radius:50%; background:#B5EEEA; }
.mgmt-office__task-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.mgmt-office__task-grid .mgmt-office__task { margin-top:0; display:flex; align-items:center; min-height:52px; }
.mgmt-office__task-grid .mgmt-office__task h3 { font-size:13px; }
.mgmt-office__goal p { font-size:12px; line-height:2; color:#666; }
.mgmt-office__chips { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; padding:0; list-style:none; }
.mgmt-office__chips li { padding:4px 12px; border:1px solid #B5EEEA; border-radius:20px; background:#f2fbfa; font-size:12px; color:#2b5f5a; }
.mgmt-office__documents { margin-top:40px; }
.mgmt-office__documents .staff-profile__documents { margin-top:0; }
.mgmt-office a.staff-profile__document { color:inherit; text-decoration:none; cursor:pointer; transition:background-color .15s ease, box-shadow .15s ease; }
.mgmt-office a.staff-profile__document:hover { background:#f0faf8; box-shadow:0 3px 16px #007f7612; }
.mgmt-office a.staff-profile__document:focus-visible { outline:2px solid #007f76; outline-offset:3px; }
.mgmt-office .staff-profile__document h3 { overflow-wrap:anywhere; }
@media(max-width:1000px) { .mgmt-office { width:90%; } }
@media(max-width:760px) {
    .mgmt-office { width:calc(100% - 24px); margin-top:16px; }
    .mgmt-office__crumbs { font-size:12px; padding-bottom:14px; margin-bottom:20px; }
    .mgmt-office > h1 { font-size:16px; margin-bottom:10px; }
    .mgmt-office__intro p { font-size:12px; }
    .mgmt-office .mgmt-office__members { margin-top:22px; }
    .mgmt-office .board-members__mobile-head,.mgmt-office .board-members__row { grid-template-columns:88px minmax(0,1fr) 64px; }
    .mgmt-office .board-members__portrait { width:72px; height:84px; }
    .mgmt-office__tasks { margin-top:30px; }
    .mgmt-office h2 { font-size:15px; }
    .mgmt-office__task { padding:12px 14px; }
    .mgmt-office__goals { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .mgmt-office__goal { min-height:0; padding:14px 10px; }
    .mgmt-office__goals--lists, .mgmt-office__task-grid { grid-template-columns:minmax(0,1fr); }
    .mgmt-office__text { font-size:12px; }
    .mgmt-office__cards { grid-template-columns:minmax(0,1fr); gap:14px; margin-top:20px; }
    .mgmt-office__card { padding:18px 16px 14px; }
}
/* ==================== END: ManagementOffice.cshtml — CEO office page ==================== */
/* ==================== BEGIN: CeoProfile.cshtml — CEO profile page ==================== */
.ceo-profile { --ceo-green:#008f82; --ceo-green-soft:#e5f5f4; --ceo-red:#e30613; width:80%; max-width:1100px; margin:36px auto 60px; font-family:WebmehrazFont,Tahoma,sans-serif; color:#333; }
.ceo-profile * { box-sizing:border-box; }
.ceo-profile h1,.ceo-profile h2,.ceo-profile h3,.ceo-profile p,.ceo-profile ul { margin:0; }
.ceo-hero { position:relative; display:flex; min-height:440px; padding:40px 36px; border-radius:12px; overflow:hidden; background:#eef3f2 url(/images/karimibanner.png) left center / cover no-repeat; }
.ceo-hero__body { width:52%; margin-inline-end:auto; }
.ceo-hero h1 { font-size:26px; font-weight:700; line-height:1.7; color:#222; }
.ceo-hero__role { margin-top:4px; font-size:14px; font-weight:600; color:#333; line-height:2; }
.ceo-hero__intro { margin-top:14px; font-size:13px; line-height:2.2; color:#555; text-align:justify; }
.ceo-hero__facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:26px !important; padding:0; list-style:none; }
.ceo-hero__facts li { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px; border-radius:8px; background:#ffffffe6; box-shadow:0 3px 14px #00000010; text-align:center; }
.ceo-hero__facts img { width:30px; height:30px; padding:5px; border-radius:8px; background:var(--ceo-green-soft); object-fit:contain; }
.ceo-hero__facts strong { font-size:12px; font-weight:600; color:#222; }
.ceo-hero__facts span { font-size:11px; line-height:1.8; color:#777; }
.ceo-quote { position:relative; margin:28px 0 0; padding:30px 120px 26px 32px; border:1px solid #eee; border-radius:12px; background:#fff; box-shadow:0 3px 18px #00000008; overflow:hidden; }
.ceo-quote::before { content:""; position:absolute; top:-14px; right:-14px; width:110px; height:110px; background:url(/images/rotateLogo.png) center / contain no-repeat; opacity:.15; }
.ceo-quote p { font-size:16px; font-weight:600; line-height:2.1; color:#222; }
.ceo-quote cite { display:block; margin-top:8px; font-size:12px; font-style:normal; color:#888; }
.ceo-section { margin-top:40px; }
.ceo-section h2,.ceo-card h3 { position:relative; padding-inline-start:12px; font-size:17px; font-weight:700; line-height:1.9; color:#222; }
.ceo-section h2::before,.ceo-card h3::before { content:""; position:absolute; inset-inline-start:0; top:22%; bottom:22%; width:3px; border-radius:3px; background:#B5EEEA; }
.ceo-section__lead { margin-top:4px !important; font-size:12px; color:#888; line-height:2; }
.ceo-timeline { display:grid; gap:12px; margin-top:18px; }
.ceo-timeline__item { padding:16px 20px; border:1px solid #e8eeed; border-inline-start:4px solid #B5EEEA; border-radius:8px; background:#fff; }
.ceo-timeline__item h3 { font-size:14px; font-weight:600; line-height:1.9; color:#222; }
.ceo-timeline__item p { margin-top:2px; font-size:12px; line-height:2; color:#777; }
.ceo-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:32px; }
.ceo-card { padding:22px 22px 18px; border:1px solid #eee; border-radius:10px; background:#fff; box-shadow:0 3px 18px #00000008; }
.ceo-card h3 { font-size:15px; }
.ceo-card > p { margin-top:2px; font-size:12px; color:#999; line-height:2; }
.ceo-card ul { margin-top:12px; padding:0; list-style:none; }
.ceo-card li { position:relative; padding:5px 16px 5px 0; font-size:13px; line-height:2; color:#555; }
.ceo-card li::before { content:""; position:absolute; right:2px; top:17px; width:6px; height:6px; border-radius:50%; background:var(--ceo-green); }
.ceo-banner { display:block; width:100%; height:auto; margin-top:40px; border-radius:12px; }
@media(max-width:1000px) {
    .ceo-profile { width:90%; }
    .ceo-hero { flex-direction:column; min-height:0; padding:0; background:#f4f8f7; border:1px solid #eee; }
    .ceo-hero::before { content:""; display:block; aspect-ratio:1056 / 465; background:url(/images/karimibanner.png) left center / cover no-repeat; }
    .ceo-hero__body { width:100%; padding:26px 28px 30px; }
    .ceo-quote { padding-right:100px; }
    .ceo-quote::before { width:90px; height:90px; }
}
@media(max-width:760px) {
    .ceo-profile { width:calc(100% - 24px); margin-top:24px; }
    .ceo-hero { padding:66% 0 0; border:0; background:#e8f2f0 url(/images/karimibannerres.png) top center / 100% auto no-repeat; }
    .ceo-hero::before { display:none; }
    .ceo-hero__body { padding:18px 14px 20px; }
    .ceo-hero h1 { font-size:20px; }
    .ceo-hero__role { font-size:13px; }
    .ceo-hero__intro { font-size:12px; }
    .ceo-hero__facts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:18px !important; }
    .ceo-hero__facts li { padding:12px 6px; }
    .ceo-quote { padding:22px 78px 18px 16px; }
    .ceo-quote::before { top:-10px; right:-10px; width:76px; height:76px; }
    .ceo-quote p { font-size:14px; }
    .ceo-section { margin-top:30px; }
    .ceo-timeline__item { padding:14px 16px; }
    .ceo-groups { grid-template-columns:minmax(0,1fr); gap:14px; margin-top:24px; }
    .ceo-card { padding:18px 16px 14px; }
    .ceo-banner { margin-top:28px; }
}
/* ==================== END: CeoProfile.cshtml — CEO profile page ==================== *//* ==================== BEGIN: Header nav — pinned header, #00B1A5 hover, submenu design ==================== */
.header-shell { position: sticky; top: 0; z-index: 1000; }
.mobile-navigation { z-index: 1001; } /* the slide-in menu stays above the pinned header */
.nav > li:hover, .nav > li a:hover { color: inherit; }
.nav > li > a { transition: color .15s ease; }
.nav > li:hover > a, .nav > li > a:hover, .nav > li > a:focus-visible { color: #00B1A5; }
/* Chevron follows the link colour (the png is used as a mask) */
.nav > li.hassubmenu > a:before { background: currentColor; -webkit-mask: url(/icons/downicon.png) no-repeat center / 25px; mask: url(/icons/downicon.png) no-repeat center / 25px; opacity: .7; }
.nav > li:hover > a:before { opacity: 1; }
.nav > li > .submenu { top: 34px; width: 180px; padding: 4px 0; border: 1px solid #e6e6e6; border-radius: 4px; background: #fff; box-shadow: 0 6px 18px #0000000f; }
.nav > li > .submenu a { height: 36px; line-height: 36px; padding: 0 12px; border-bottom: 0; color: #6b6b6b; font-size: 13px; transition: background-color .15s ease, color .15s ease; }
.nav > li > .submenu a:hover, .nav > li > .submenu a:focus-visible { background: #f7f7f7; color: #00B1A5 !important; }
/* ==================== END: Header nav ==================== */
/* ==================== BEGIN: branches.cshtml — colleagues (معرفی همکاران) ==================== */
.colleagues__intro { color:#444; font-size:13px; line-height:2.2; }
.colleagues__search { display:flex; width:200px; max-width:100%; height:30px; margin:36px 0 18px; border:1px solid #dcdcdc; border-radius:4px; overflow:hidden; background:#fff; }
.colleagues__search input { flex:1; min-width:0; height:100%; padding:0 10px; border:0; outline:0; background:none; font:11px WebmehrazFont,Tahoma,sans-serif; color:#333; }
.colleagues__search input::placeholder { color:#aaa; }
.colleagues__search:focus-within { border-color:#00B1A5; }
.colleagues__search-icon { display:grid; place-items:center; width:32px; border-inline-start:1px solid #dcdcdc; background:#f1f1f1; }
.colleagues__search-icon img { width:15px; height:15px; opacity:.7; }
.colleagues .mgmt-office__members { margin-top:0; }
.colleagues.mgmt-office { width:88%; max-width:1240px; }
.colleagues .board-members__row { grid-template-columns:124px minmax(0,1.3fr) minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1fr) 150px; }
.colleagues .board-members__cell { font-size:14px; }
.colleagues .board-members__head .board-members__cell { font-size:13px; padding:12px 6px; }
.colleagues .board-members__photo { padding:12px; }
.colleagues .board-members__portrait { width:92px; height:104px; border-radius:6px; }
.colleagues .colleagues__name { font-weight:600; color:#222; }
.colleagues .colleagues__place { display:none; }
.colleagues__city { flex-direction:column; gap:2px; }
.colleagues__address { display:block; color:#999; font-size:11px; line-height:1.7; }
.colleagues__see { width:16px; height:16px; opacity:.6; }
.colleagues__none { margin:0; padding:26px 12px; border-top:1px solid #e4e4e4; text-align:center; color:#888; font-size:12px; }
.colleagues__more { display:flex; align-items:center; justify-content:center; gap:8px; width:194px; height:36px; margin:18px auto 0; border:1px solid #ddd; border-radius:4px; background:#fff; color:#333; font:13px WebmehrazFont,Tahoma,sans-serif; cursor:pointer; }
.colleagues__more:hover { border-color:#00B1A5; color:#00B1A5; }
.colleagues__more svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.colleagues__map { margin-top:48px; }
.colleagues__rows > .board-members__row { border-top:1px solid #e4e4e4; }
.colleagues__rows > .board-members__row:nth-child(odd) { background:#f8f8f8; }
.colleagues__rows > .board-members__row:nth-child(even) { background:#fff; }
.colleagues__rows > .board-members__row:hover { background:#f0f8f7; }
.colleagues__intro + .colleagues__table { margin-top:32px; }
.colleagues__select { position:relative; width:260px; max-width:100%; margin:40px 0 18px; }
.colleagues__select select { width:100%; height:32px; padding:0 10px 0 30px; border:1px solid #dcdcdc; border-radius:4px; background:#fff; color:#555; font:11px WebmehrazFont,Tahoma,sans-serif; appearance:none; -webkit-appearance:none; cursor:pointer; }
.colleagues__select select:focus { outline:0; border-color:#00B1A5; }
.colleagues__select::after { content:""; position:absolute; left:11px; top:50%; width:7px; height:7px; margin-top:-6px; border:solid #888; border-width:0 1.5px 1.5px 0; transform:rotate(45deg); pointer-events:none; }
@media(max-width:1000px) {
    .colleagues .board-members__row { grid-template-columns:100px minmax(0,1.3fr) minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1fr) 64px; }
    .colleagues .board-members__portrait { width:76px; height:86px; }
    .colleagues .board-members__profile-label { display:none; }
}
@media(max-width:760px) {
    .colleagues__search { width:100%; height:36px; margin-top:24px; }
    .colleagues .board-members__mobile-head,.colleagues .board-members__row { grid-template-columns:96px minmax(0,1fr) 64px; }
    .colleagues .board-members__portrait { width:76px; height:86px; }
    .colleagues .board-members__cell { font-size:13px; }
    .colleagues .colleagues__rows > .board-members__row { grid-template-rows:repeat(3,auto); }
    .colleagues__select { width:100%; }
    .colleagues .colleagues__province,.colleagues .colleagues__city { display:none; }
    .colleagues .colleagues__place { display:block; grid-column:2; grid-row:3; padding:0 8px 12px; font-size:12px; color:#777; }
    .colleagues .board-members__field.colleagues__name { grid-row:1; }
    .colleagues .board-members__field.colleagues__role { grid-row:2; }
    .colleagues .colleagues__place .colleagues__address { font-size:11px; }
    .colleagues__more { width:100%; }
}
/* City dropdown (styled list over a hidden native select) */
.colleagues__dropdown { position:relative; width:280px; max-width:100%; margin:40px 0 18px; }
.colleagues__native { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.colleagues__dropdown-toggle { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; height:36px; padding:0 12px; border:1px solid #dcdcdc; border-radius:4px; background:#fff; color:#999; font:12px WebmehrazFont,Tahoma,sans-serif; cursor:pointer; text-align:right; transition:border-color .15s ease; }
.colleagues__dropdown.has-value .colleagues__dropdown-toggle { color:#222; }
.colleagues__dropdown-toggle:hover, .colleagues__dropdown.is-open .colleagues__dropdown-toggle, .colleagues__dropdown-toggle:focus-visible { border-color:#00B1A5; outline:0; }
.colleagues__dropdown-label { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.colleagues__dropdown-toggle svg { flex-shrink:0; width:16px; height:16px; fill:none; stroke:#888; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s ease; }
.colleagues__dropdown.is-open .colleagues__dropdown-toggle svg { transform:rotate(180deg); stroke:#00B1A5; }
.colleagues__dropdown-panel { position:absolute; z-index:20; top:calc(100% + 4px); right:0; left:0; padding:6px 0; border:1px solid #e6e6e6; border-radius:4px; background:#fff; box-shadow:0 6px 18px #0000000f; }
.colleagues__dropdown-filter { display:flex; align-items:center; gap:6px; margin:0 8px 6px; padding:0 8px; height:32px; border:1px solid #e6e6e6; border-radius:4px; background:#fafafa; }
.colleagues__dropdown-filter input { flex:1; min-width:0; height:100%; border:0; outline:0; background:none; font:11px WebmehrazFont,Tahoma,sans-serif; color:#333; }
.colleagues__dropdown-filter img { width:14px; height:14px; opacity:.6; }
.colleagues__dropdown-panel ul { max-height:260px; margin:0; padding:0; overflow-y:auto; list-style:none; }
.colleagues__dropdown-panel li { padding:0 12px; height:36px; line-height:36px; font-size:13px; color:#6b6b6b; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background-color .15s ease, color .15s ease; }
.colleagues__dropdown-panel li:hover, .colleagues__dropdown-panel li.is-active { background:#f7f7f7; color:#00B1A5; }
.colleagues__dropdown-panel li[aria-selected="true"] { color:#00B1A5; font-weight:600; }
@media(max-width:760px) { .colleagues__dropdown { width:100%; margin-top:28px; } }
/* ==================== END: branches.cshtml — colleagues ==================== */
/* ==================== BEGIN: Header.cshtml — mobile drawer menu ==================== */
.mobile-navigation.m-drawer { left:auto; right:0; top:0; bottom:0; display:flex; flex-direction:column; width:min(260px,52vw); height:100vh; height:100dvh; margin:0; padding:0; background:#fff; box-shadow:none; opacity:1; overflow-y:auto; transform:translateX(100%); visibility:hidden; transition:transform .25s ease, visibility .25s ease; z-index:1001; }
.m-drawer.show-mobile-navigation { left:auto; transform:none; visibility:visible; box-shadow:-4px 0 18px #0000001a; }
.m-drawer__top { display:flex; justify-content:flex-end; padding:10px 12px; border-bottom:1px solid #f0f0f0; }
.m-drawer__close { display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:6px; background:none; cursor:pointer; }
.m-drawer__close svg { width:18px; height:18px; fill:none; stroke:#9a9a9a; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.m-drawer__close:hover svg { stroke:#00B1A5; }
.m-drawer .m-drawer__list { margin:0; padding:8px 0; list-style:none; }
.m-drawer .m-drawer__link { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; height:42px; margin:0; padding:0 16px; border:0; background:none; color:#333; font:13px WebmehrazFont,Tahoma,sans-serif; line-height:42px; text-align:right; text-decoration:none; cursor:pointer; transition:color .15s ease; }
.m-drawer__item--parent > .m-drawer__link::after { content:""; flex-shrink:0; width:6px; height:6px; margin-left:2px; border:solid currentColor; border-width:0 0 1.5px 1.5px; transform:rotate(45deg); opacity:.7; }
.m-drawer .m-drawer__link:hover, .m-drawer .m-drawer__link:focus-visible, .m-drawer__item.is-active > .m-drawer__link { color:#00B1A5; outline:0; }
.m-drawer__item.is-active > .m-drawer__link::after { opacity:1; }
.m-drawer__sub { display:none; }
.m-drawer .m-drawer__extra { margin:4px 16px 0; padding:8px 0 0; border-top:1px solid #f0f0f0; list-style:none; }
.m-drawer .m-drawer__extra a { display:flex; align-items:center; gap:8px; height:34px; padding:0; border:0; color:#7a7a7a; font-size:12px; line-height:34px; text-decoration:none; }
.m-drawer .m-drawer__extra a:hover { color:#00B1A5; }
.m-drawer .m-drawer__call img { width:16px; height:16px; margin:0; float:none; opacity:.45; }
.m-drawer__home { display:flex; justify-content:center; margin-top:auto; padding:20px 0 24px; }
.m-drawer__home img { width:70px; height:70px; object-fit:contain; }
.m-drawer__flyout { position:fixed; z-index:1002; display:none; width:min(210px, calc(100vw - min(260px,52vw) - 16px)); max-height:calc(100vh - 24px); padding:6px 0; overflow-y:auto; border-radius:10px 0 0 10px; background:#fff; box-shadow:-6px 6px 22px #0000001f; }
.m-drawer__flyout.is-open { display:block; }
.m-drawer__flyout-list { margin:0; padding:0; list-style:none; }
.m-drawer__flyout-list a { display:block; height:40px; padding:0 16px; color:#555; font-size:13px; line-height:40px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none; transition:background-color .15s ease, color .15s ease; }
.m-drawer__flyout-list a:hover, .m-drawer__flyout-list a:focus-visible, .m-drawer__flyout-list a.is-current { background:#f7f7f7; color:#00B1A5; outline:0; }
.m-drawer__overlay { position:fixed; inset:0; z-index:1000; background:#0000005c; opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; }
.m-drawer__overlay.is-open { opacity:1; visibility:visible; }
body.m-drawer-locked { overflow:hidden; }
/* ==================== END: Header.cshtml — mobile drawer menu ==================== */
/* ==================== BEGIN: Footer.cshtml — footer redesign ==================== */
/* Sizes and spacing measured from the footer design (content 1131px wide; columns 417/234/182/298px, right to left). */
footer { padding:40px 0 34px; border-top:0; background:#fff; }
footer .footer-container { width:min(1240px, calc(100% - 48px)); max-width:none; margin:0 auto; }
footer .logoBonyad { display:flex; justify-content:flex-start; gap:0; margin:0 0 41px; }
footer .logoBonyad img { display:block; height:41px; width:auto; }
footer .footer-top { display:grid; grid-template-columns:417fr 234fr 182fr 298fr; gap:0; align-items:start; justify-content:stretch; }
footer .footer-col { min-width:0; }
footer .footer-col h3 { margin:0 0 15px; color:#222; font-size:16px; font-weight:600; line-height:24px; }
footer .footer-col ul { display:flex; flex-direction:column; gap:0; margin:0; padding:0; list-style:none; }
footer .footer-col ul li { display:block; margin:0; padding:0; line-height:27.5px; }
footer .footer-col ul li a { display:block; width:fit-content; color:#4F4F4F; font-size:13px; line-height:27.5px; text-decoration:none; transition:color .15s ease; }
footer .footer-col ul li a:hover { color:#00B1A5; }
/* contact column */
footer .footer-info { padding-inline-end:24px; text-align:right; }
footer .footer-info .footer-contact { gap:16px !important; margin:0 0 51px; }
footer .footer-info .footer-contact li, footer .footer-info .footer-contact li a { display:flex; align-items:center; gap:9px; min-height:20px; color:#1F1F1F; font-size:14px; line-height:20px; text-decoration:none; }
footer .footer-info .footer-contact li a:hover { color:#00B1A5; }
footer .footer-info .footer-contact p { display:inline; margin:0; } /* the phone number comes from the panel wrapped in <p> */
footer .footer-info .footer-contact li img { order:-1; flex-shrink:0; width:18px; height:18px; padding:0; border-radius:0; background:none; object-fit:contain; }
footer .footer-social { flex-direction:row !important; flex-wrap:wrap; gap:11px !important; }
footer .footer-info .footer-social li a { display:flex; align-items:center; justify-content:center; width:26px; height:26px; box-sizing:border-box; border:1px solid #c4c4c4; border-radius:7px; transition:border-color .15s ease; }
footer .footer-info .footer-social li a:hover { border-color:#00B1A5; }
footer .footer-social li img { width:14px; height:14px; object-fit:contain; opacity:.75; }
/* newsletter column */
footer .footer-newsletter { flex:none; }
footer .footer-newsletter h3 { margin-bottom:8px; }
footer .footer-newsletter p { margin:0 0 13px; color:#4F4F4F; font-size:12px; line-height:20px; }
footer .footer-newsletter form { display:flex; align-items:stretch; height:27px; padding:0; border-radius:4px; background:#F9F9F9; overflow:hidden; }
footer .footer-newsletter input[type="email"] { flex:1 1 auto; min-width:0; height:100%; padding:0 10px; border:0; background:none; font:11px WebmehrazFont,Tahoma,sans-serif; color:#333; }
footer .footer-newsletter input[type="email"]::placeholder { color:#a8a8a8; }
footer .footer-newsletter .confirmFooter { display:flex; flex-shrink:0; }
footer .footer-newsletter input[type="submit"] { width:34px !important; min-width:34px !important; height:100%; padding:0; border-radius:0; background:#007F76; color:#fff; font:11px WebmehrazFont,Tahoma,sans-serif; cursor:pointer; }
footer .footer-newsletter input[type="submit"]:hover { background:#00B1A5; }
footer .footer-newsletter .footer-badges { flex-direction:row !important; flex-wrap:nowrap; justify-content:space-between; gap:0 !important; margin:26px 0 0; padding:0; }
footer .footer-newsletter .footer-badges li a { display:flex; align-items:center; justify-content:center; width:53px; height:53px; box-sizing:border-box; border:1px solid #bcbcbc; border-radius:10px; background:#fff; }
footer .footer-badges li img { max-width:30px; max-height:30px; }
/* divider + copyright */
footer .footer-bottom { margin-top:28px; padding-top:13px; border-top:1px solid #c7c7c7; color:#a6a6a6; font-size:12px; line-height:20px; text-align:right; }
@media (max-width:992px) {
    footer .footer-top { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:34px; }
    footer .footer-info, footer .footer-newsletter { grid-column:1 / -1; }
    footer .footer-info { padding:0; }
    footer .footer-info .footer-contact { margin-bottom:28px; }
    footer .footer-newsletter { max-width:298px; }
}
@media (max-width:560px) {
    footer { padding-top:32px; }
    footer .logoBonyad { margin-bottom:30px; }
    footer .logoBonyad img { height:36px; }
    footer .footer-newsletter { max-width:none; }
    footer .footer-bottom { text-align:center; }
}
/* ==================== END: Footer.cshtml — footer redesign ==================== */
/* ==================== BEGIN: search.cshtml — news & messages search ==================== */
.news-search { width:80%; max-width:1100px; margin:24px auto 60px; font-family:WebmehrazFont,Tahoma,sans-serif; color:#333; }
.news-search * { box-sizing:border-box; }
.news-search > h1 { margin:0 0 20px; font-size:19px; font-weight:600; line-height:1.9; }
.news-search__form { margin:0; }
/* category tabs: one white strip, equal cells, active in teal */
.news-search__tabs { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:4px; padding:4px; border-radius:6px; background:#fff; }
.news-search__tab { display:flex; align-items:center; justify-content:center; height:52px; padding:0 8px; border:0; border-radius:4px; background:#f4f4f4; color:#555; font:14px WebmehrazFont,Tahoma,sans-serif; line-height:1; text-align:center; cursor:pointer; white-space:nowrap; transition:color .15s ease, background-color .15s ease; }
.news-search__tab:hover, .news-search__tab:focus-visible { color:#00B1A5; outline:0; }
.news-search__tab.is-active { background:#fff; color:#00B1A5; font-weight:600; }
/* keyword box with the search button on its left */
.news-search__keyword { display:flex; width:420px; max-width:100%; height:38px; margin:40px 0 0; border:1px solid #dcdcdc; border-radius:5px; overflow:hidden; background:#fff; }
.news-search__keyword:focus-within { border-color:#00B1A5; }
.news-search__keyword input { flex:1; min-width:0; padding:0 12px; border:0; outline:0; background:none; font:12px WebmehrazFont,Tahoma,sans-serif; color:#333; }
.news-search__keyword input::placeholder { color:#aaa; }
.news-search__keyword button { display:grid; place-items:center; text-align:center; width:40px; border:0; border-inline-start:1px solid #dcdcdc; background:#f1f1f1; cursor:pointer; }
.news-search__keyword button img { width:16px; height:16px; opacity:.7; }
/* from / to dates and the quick range segment */
.news-search__dates { display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin:20px 0 22px; }
.news-search__date { display:flex; align-items:center; gap:8px; margin:0; color:#888; font-size:12px; white-space:nowrap; }
.news-search__date-box { display:flex; height:38px; border:1px solid #dcdcdc; border-radius:5px; overflow:hidden; background:#fff; }
.news-search__date-box:focus-within { border-color:#00B1A5; }
.news-search__date-box input { width:120px; padding:0 10px; border:0; outline:0; background:none; color:#333; font:13px WebmehrazFont,Tahoma,sans-serif; text-align:center; }
.news-search__date-toggle { display:grid; place-items:center; width:34px; border:0; border-inline-start:1px solid #dcdcdc; background:#f7f7f7; cursor:pointer; }
.news-search__date-toggle svg { width:14px; height:14px; fill:none; stroke:#777; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.news-search__ranges { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; margin-inline-start:auto; padding:4px; border-radius:6px; background:#fff; }
.news-search__range { display:flex; align-items:center; justify-content:center; height:32px; min-width:84px; padding:0 10px; border:0; border-radius:4px; background:#f4f4f4; color:#888; font:12px WebmehrazFont,Tahoma,sans-serif; line-height:1; text-align:center; cursor:pointer; white-space:nowrap; transition:color .15s ease, background-color .15s ease; }
.news-search__range:hover, .news-search__range:focus-visible { color:#00B1A5; outline:0; }
.news-search__range.is-active { background:#fff; color:#00B1A5; font-weight:600; }
/* results table */
.news-search__table { border:1px solid #ddd; border-radius:6px; overflow:hidden; background:#fff; }
.news-search__row { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 150px 190px 92px; }
.news-search__row > div { display:flex; align-items:center; justify-content:center; min-width:0; padding:10px 14px; border-inline-start:1px solid #e4e4e4; font-size:13px; line-height:1.9; text-align:center; }
.news-search__row > div:first-child { border-inline-start:0; }
.news-search__row + .news-search__row { border-top:1px solid #e4e4e4; }
.news-search__row:not(.news-search__head):hover { background:#f6fbfa; }
.news-search__head { background:#e5f5f4; color:#777; }
.news-search__head > div { gap:6px; padding:9px 10px; font-size:12px; }
.news-search__head svg { width:14px; height:14px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.news-search__row .news-search__title { justify-content:flex-start; min-height:54px; text-align:right; }
.news-search__title a { color:#222; font-weight:600; text-decoration:none; }
.news-search__title a::after { content:""; position:absolute; inset:0; }
.news-search__title a:hover { color:#00B1A5; }
.news-search__title a:focus-visible { outline:2px solid #00B1A5; outline-offset:2px; }
.news-search__meta { display:none; }
.news-search__row .news-search__category { color:#555; font-size:12px; }
.news-search__date-cell, .news-search__time { color:#444; }
.news-search__empty { margin:0; padding:40px 16px; border:1px dashed #cfcfcf; border-radius:6px; background:#fff; color:#777; font-size:13px; text-align:center; }
/* pagination: next, pages, previous (as in the design) */
.news-search__pagination { margin-top:28px; }
.news-search__pagination form { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin:0; }
.news-search__pagination button { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; padding:0 6px; border:1px solid transparent; border-radius:5px; background:none; color:#555; font:13px WebmehrazFont,Tahoma,sans-serif; line-height:1; text-align:center; cursor:pointer; }
.news-search__pagination button:hover { color:#00B1A5; }
.news-search__pagination button[aria-current="page"] { border-color:#00B1A5; color:#00B1A5; font-weight:600; }
.news-search__pagination .news-search__page-step { color:#00B1A5; }
.news-search__pagination button:disabled { color:#bbb; cursor:default; }
.news-search__pagination span { color:#999; }
@media(max-width:1000px) {
    .news-search { width:90%; }
    .news-search__row { grid-template-columns:minmax(0,1fr) 120px 150px 70px; }
}
@media(max-width:760px) {
    .news-search { width:calc(100% - 24px); margin-top:16px; }
    .news-search > h1 { font-size:16px; margin-bottom:14px; }
    .news-search__tabs { grid-auto-flow:row; grid-template-columns:repeat(4,minmax(0,1fr)); }
    .news-search__tab { height:40px; font-size:12px; }
    .news-search__keyword { width:100%; margin-top:20px; }
    .news-search__dates { flex-direction:column; align-items:stretch; gap:12px; margin:14px 0 18px; }
    .news-search__date { flex-direction:column; align-items:stretch; gap:6px; }
    .news-search__date-box input { flex:1; width:auto; }
    .news-search__ranges { margin:0; }
    .news-search__range { min-width:0; padding:0 4px; font-size:11px; }
    .news-search__row { grid-template-columns:minmax(0,1fr) 84px; }
    .news-search__row .news-search__date-cell, .news-search__row .news-search__time, .news-search__head > div:nth-child(3), .news-search__head > div:nth-child(4) { display:none; }
    .news-search__row .news-search__title { flex-direction:column; align-items:flex-start; gap:4px; padding:10px 12px; }
    .news-search__title a { font-size:12px; line-height:1.9; }
    .news-search__meta { display:flex; gap:14px; color:#888; font-size:11px; font-weight:400; }
    .news-search__row .news-search__category { padding:8px 6px; font-size:11px; }
    .news-search__pagination form { gap:6px; }
}
/* ==================== END: search.cshtml — news & messages search ==================== */
/* ==================== BEGIN: Report/Index.cshtml — reports list and login modal ==================== */
.reports-page { width:80%; max-width:1100px; margin:24px auto 60px; font-family:WebmehrazFont,Tahoma,sans-serif; color:#333; }
.reports-page * { box-sizing:border-box; }
.reports-page > h1 { margin:0 0 28px; font-size:19px; font-weight:600; line-height:1.9; }
.reports-page__list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; width:520px; max-width:100%; margin:0 auto; padding:0; list-style:none; }
.reports-page__list li:last-child:nth-child(odd) { grid-column:1 / -1; }
.reports-page__item { display:flex; align-items:center; justify-content:center; width:100%; height:100%; min-height:42px; padding:9px 12px; border:1px solid #dcdcdc; border-radius:5px; background:#fff; color:#333; font:13px WebmehrazFont,Tahoma,sans-serif; line-height:1.7; text-align:center; cursor:pointer; transition:background-color .15s ease, border-color .15s ease, color .15s ease; }
.reports-page__item:hover, .reports-page__item:focus-visible { border-color:#B5EEEA; background:#eef9f8; color:#007F76; outline:0; }
/* login modal */
body.reports-login-open { overflow:hidden; }
.reports-login { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:16px; }
.reports-login__backdrop { position:absolute; inset:0; background:#00000073; }
.reports-login__dialog { position:relative; width:500px; max-width:100%; margin:0; padding:30px 34px 34px; border-radius:6px; background:#fff; box-shadow:0 12px 40px #0000002e; font-family:WebmehrazFont,Tahoma,sans-serif; direction:rtl; text-align:right; }
.reports-login__close { position:absolute; top:16px; left:16px; display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; background:none; cursor:pointer; }
.reports-login__close svg { width:26px; height:26px; fill:none; stroke:#9a9a9a; stroke-width:1.4; stroke-linecap:round; }
.reports-login__close:hover svg, .reports-login__close:focus-visible svg { stroke:#00B1A5; }
.reports-login__dialog h2 { margin:22px 0 22px; color:#222; font-size:18px; font-weight:600; line-height:1.6; }
.reports-login__dialog label { display:block; margin:0 0 10px; color:#444; font-size:12px; }
.reports-login__dialog input[type="password"] { display:block; width:100%; height:40px; padding:0 12px; border:1px solid #dcdcdc; border-radius:5px; background:#fff; color:#333; font:13px WebmehrazFont,Tahoma,sans-serif; text-align:right; outline:0; }
.reports-login__dialog input[type="password"]::placeholder { color:#aaa; }
.reports-login__dialog input[type="password"]:focus { border-color:#00B1A5; }
.reports-login__error { margin:8px 0 0; color:#c0392b; font-size:12px; }
.reports-login__submit { display:flex; align-items:center; justify-content:center; width:100%; height:40px; margin-top:22px; border:0; border-radius:5px; background:#007F76; color:#fff; font:14px WebmehrazFont,Tahoma,sans-serif; line-height:1; cursor:pointer; transition:background-color .15s ease; }
.reports-login__submit:hover, .reports-login__submit:focus-visible { background:#00B1A5; outline:0; }
.reports-login__submit:disabled { opacity:.6; cursor:default; }
@media(max-width:760px) {
    .reports-page { width:calc(100% - 24px); margin-top:16px; }
    .reports-page > h1 { font-size:16px; margin-bottom:18px; }
    .reports-page__list { grid-template-columns:minmax(0,1fr); }
    .reports-login__dialog { padding:24px 20px 26px; }
}
/* ==================== END: Report/Index.cshtml — reports list and login modal ==================== */
/* ==================== BEGIN: category.cshtml / content.cshtml — glass room (اتاق شیشه‌ای) ==================== */
/* list page: report cards use the shared document card; a report page gets the green arrow */
/* green "open page" arrow used for report pages and outside links (the old arrow image is white) */
.staff-profile__link-icon svg { width:30px; height:30px; fill:none; stroke:#00B1A5; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
/* report page */
.glass-report__header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.glass-report__heading { min-width:0; }
.glass-report__heading h1 { margin:0 0 8px; font-size:19px; font-weight:600; line-height:1.9; }
.glass-report__summary { margin:0 0 6px; color:#666; font-size:13px; line-height:2; }
.glass-report__range { margin:6px 0 0; color:#444; font-size:13px; line-height:2; }
.glass-report__range bdi { color:#222; }
.glass-report__cover { flex-shrink:0; display:block; width:120px; border-radius:6px; overflow:hidden; border:1px solid #eee; }
.glass-report__cover img { display:block; width:100%; height:auto; }
.glass-report__notes p { margin:14px 0 0; color:#444; font-size:13px; line-height:2.2; text-align:justify; }
.glass-report__body { display:flex; align-items:flex-start; gap:0; margin-top:28px; padding:0; background:transparent; }
.glass-report__tabs { display:flex; flex-direction:column; gap:0; flex:0 0 150px; position:relative; z-index:1; padding:4px 4px 4px 0; background:#fff; border-radius:0 4px 4px 0; }
.glass-report__tab { display:flex; align-items:center; gap:8px; width:100%; height:42px; padding:0 14px; border:0; border-radius:0 5px 5px 0; background:#f8f8f8; color:#666; font:13px WebmehrazFont,Tahoma,sans-serif; line-height:1; text-align:right; cursor:pointer; transition:background-color .15s ease, color .15s ease; }
.glass-report__tab svg { flex-shrink:0; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.glass-report__tab:hover, .glass-report__tab:focus-visible { color:#00B1A5; outline:0; }
.glass-report__tab.is-active { background:#fff; color:#00B1A5; font-weight:600; border:1px solid #e7efed; border-left:0; box-shadow:-2px 0 0 #fff; }
.glass-report__tabs.is-single { display:none; }
.glass-report__panel { flex:1 1 auto; min-width:0; padding:14px; border:0; background:#fff; border-radius:4px 0 4px 4px; }
.glass-report__filters { display:flex; flex-wrap:wrap; gap:12px 18px; margin:0 0 16px; }
.glass-report__table .news-search__row { grid-template-columns:repeat(3,minmax(0,1fr)); }
.glass-report__table .news-search__row > div { direction:rtl; }
.glass-report__rows .news-search__row:nth-child(odd) { background:#fff; }
.glass-report__rows .news-search__row:nth-child(even) { background:#fafafa; }
.glass-report__rows .news-search__row > div { padding:9px 12px; font-size:12px; color:#333; }
.glass-report__pager { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; }
.glass-report .news-search__pagination { margin-top:18px; }
.glass-report .news-search__empty { margin-top:4px; }
@media(max-width:760px) {
    .glass-report__header { flex-direction:column; gap:12px; }
    .glass-report__cover { width:140px; }
    .glass-report__body { flex-direction:column; align-items:stretch; margin-top:20px; }
    .glass-report__tabs { flex-direction:row; flex-basis:auto; padding:4px 4px 0; border-radius:4px 4px 0 0; }
    .glass-report__tab { justify-content:center; border-radius:5px 5px 0 0; } .glass-report__tab.is-active { border:1px solid #e7efed; border-bottom:0; box-shadow:0 2px 0 #fff; }
    .glass-report__panel { padding:14px 10px; border:0; border-radius:0 0 4px 4px; }
    .glass-report__filters { flex-direction:column; align-items:stretch; }
    .glass-report__filters .news-search__date { flex-direction:column; align-items:stretch; gap:6px; }
    .glass-report__filters .news-search__date-box input { flex:1; width:auto; }
    .glass-report__table .news-search__row { grid-template-columns:1.25fr .7fr 1fr; }
    .glass-report__table .news-search__row > div { padding:8px 6px; font-size:11px; }
    .glass-report__table .news-search__head > div { display:flex !important; font-size:11px; }
}
/* ==================== END: category.cshtml / content.cshtml — glass room ==================== */

/* Glass report: existing Persian calendar theme */
.pdp-glass {
    position: absolute;
    direction: rtl;
    width: 310px;
    padding: 14px;
    color: #353535;
    background: #fff;
    border: 1px solid #B5EEEA;
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(0, 68, 63, .18);
    box-sizing: content-box;
    overflow: hidden;
    z-index: 99999;
    animation: glassCalendarOpen .18s ease-out;
}

@keyframes glassCalendarOpen {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.pdp-glass .pdp-header {
    position: relative;
    height: 46px !important;
    line-height: 46px !important;
    margin: -14px -14px 10px;
    padding: 0 12px;
    color: #fff;
    background: linear-gradient(135deg, #007F76, #00B1A5);
}

.pdp-glass .monthYear {
    width: 72%;
    margin: auto;
    text-align: center;
    font-weight: 600;
}

    .pdp-glass .monthYear > span {
        display: inline-block;
        padding: 0 3px;
        cursor: pointer;
    }

.pdp-glass .nextArrow,
.pdp-glass .prevArrow {
    position: absolute;
    top: 7px;
    width: 32px;
    height: 32px;
    line-height: 29px;
    border-radius: 50%;
    text-align: center;
    font-size: 26px;
    cursor: pointer;
    transition: background-color .2s;
}

.pdp-glass .nextArrow {
    right: auto;
    left: 10px;
}

.pdp-glass .prevArrow {
    right: 10px;
    left: auto;
}

    .pdp-glass .nextArrow:hover,
    .pdp-glass .prevArrow:hover {
        background: rgba(255, 255, 255, .18);
    }

.pdp-glass .disabled {
    opacity: .35;
    cursor: not-allowed;
}

.pdp-glass .cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: default;
}

.pdp-glass .dows {
    padding: 4px 0;
    color: #007F76;
    background: #E6F5F4;
    border-radius: 10px;
}

.pdp-glass .dow {
    font-weight: 600;
}

.pdp-glass .days {
    padding-top: 6px;
    background: #fff;
}

.pdp-glass .day {
    margin: 2px;
    width: 36px !important;
    height: 34px !important;
    line-height: 34px !important;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: color .15s, background-color .15s, border-color .15s;
}

    .pdp-glass .day:hover {
        color: #007F76;
        background: #E6F5F4;
        border-color: #B5EEEA;
    }

.pdp-glass .today {
    color: #007F76;
    background: #fff;
    border-color: #00B1A5;
    font-weight: 700;
}

.pdp-glass .selday,
.pdp-glass .selday:hover {
    color: #fff;
    background: #007F76;
    border-color: #007F76;
    box-shadow: 0 5px 12px rgba(0, 127, 118, .24);
}

.pdp-glass .friday {
    color: #FF626C;
}

.pdp-glass .nul {
    margin: 2px;
    width: 36px !important;
}

.pdp-glass .disday {
    color: #bbb;
    background: #f7f7f7;
    cursor: not-allowed;
}

.pdp-glass .yearSelect,
.pdp-glass .monthSelect {
    position: absolute;
    top: 46px;
    bottom: 35px;
    right: 0;
    left: 0;
    width: 100% !important;
    height: auto !important;
    max-height: none;
    margin: 0 !important;
    padding: 10px;
    overflow-y: auto;
    box-sizing: border-box;
    list-style: none;
    text-align: center;
    background: #fff;
    border: 1px solid #B5EEEA;
    box-shadow: 0 12px 30px rgba(0, 68, 63, .14);
    z-index: 2;
}

    .pdp-glass .yearSelect li,
    .pdp-glass .monthSelect li {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 3px;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
    }

        .pdp-glass .yearSelect li:hover,
        .pdp-glass .monthSelect li:hover,
        .pdp-glass .yearSelect .selected,
        .pdp-glass .monthSelect .selected {
            color: #fff;
            background: #007F76;
        }

.pdp-glass .pdp-footer {
    height: 35px !important;
    line-height: 35px !important;
    margin: 8px -14px -14px;
    text-align: center;
    background: #F2FAF9;
}

.pdp-glass .goToday {
    color: #007F76;
    font-weight: 600;
    text-decoration: none;
}
/* ==================== BEGIN: eservices.cshtml / bazoo.cshtml — mobile (≤500px) ==================== */
/* Text and phone side by side (the phone rises above the card), full-width buttons below. */
@media (max-width: 500px) {
    .all > .eservices-section,
    .all > .bazoo-section {
        width: auto;
        margin-right: 16px;
        margin-left: 16px;
        border-radius: 8px;
    }
    .all > .eservices-section { margin-top: 72px; padding: 26px 16px 24px; }
    .all > .bazoo-section { margin-top: 66px; margin-bottom: 40px; padding: 27px 16px 25px; }

    .eservices-section .eservices-container,
    .bazoo-section .bazoo-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 110px;
        grid-template-areas: "title phone" "desc phone" "actions actions";
        grid-template-rows: auto 1fr auto;
        align-items: start;
        gap: 0 8px;
        min-height: 0;
        max-width: none;
        padding: 0;
        text-align: right;
    }
    .bazoo-section .bazoo-container {
        grid-template-columns: 99px minmax(0, 1fr);
        grid-template-areas: "phone title" "phone desc" "actions actions";
    }
    .eservices-section .eservices-content,
    .bazoo-section .bazoo-content { display: contents; }

    /* phone images: rise above the card top like the mockup */
    .eservices-section .eservices-container img {
        grid-area: phone;
        position: static;
        width: 120px;
        height: auto;
        max-width: none;
        margin: -69px 0 0;
        order: 0;
    }
    .bazoo-section .bazoo-image {
        grid-area: phone;
        width: 132px;
        max-width: none;
        margin: -74px 0 0;
        right: 5px;
    }

    .eservices-section .eservices-title,
    .bazoo-section .bazoo-title {
        grid-area: title;
        margin: 0 0 12px;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.4;
    }
    .eservices-section .eservices-title { color: #222; }
    .eservices-section .eservices-desc,
    .bazoo-section .bazoo-desc {
        grid-area: desc;
        margin: 0;
        font-size: 14px;
        line-height: 23px;
        text-align: right;
    }
    .bazoo-section .bazoo-title { text-align: right; }
    .eservices-section .eservices-desc { color: #222; font-size: 13.5px; }
    .bazoo-section .bazoo-desc { color: #dfeceb; }

    .eservices-section .eservices-actions,
    .bazoo-section .bazoo-actions {
        grid-area: actions;
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        width: 100%;
        margin-top: 24px;
    }
    .eservices-section .eservices-actions .btn-action,
    .bazoo-section .bazoo-actions .btn-action {
        width: 100%;
        height: 40px;
        min-height: 0;
        padding: 0 12px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
    }
    .bazoo-section .bazoo-actions { margin-top: 20px; }
    .eservices-section .eservices-actions .btn-action-outline { border-color: #eaeaea; color: #222; }

    /* Bale: white "ورود" with a dark arrow, translucent "about" button */
    .bazoo-button__more { display: none; }
    .bazoo-section .bazoo-button { color: #222; }
    .bazoo-section .bazoo-button::after {
        content: "";
        width: 20px;
        height: 20px;
        background: url('../../icons/arrow-left-black.png') center center/contain no-repeat;
    }
    .bazoo-section .bazoo-about {
        background: rgba(255, 255, 255, .16);
        border-color: rgba(255, 255, 255, .5);
        color: #fff;
    }
}
/* ==================== END: eservices.cshtml / bazoo.cshtml — mobile ==================== */
/* ==================== BEGIN: slideshow.cshtml — mobile (≤500px) ==================== */
/* Full-bleed 572px slides: the Hooshad slide fades into white with dark right-aligned copy;
   panel slides show the photo on top and a dark gradient with centred white copy. */
.readmore-mobile { display: none; }
@media (max-width: 500px) {
    .all .desktop-slideshow.slideshow {
        height: auto !important;
        min-height: 0;
        margin: 0;
        padding: 0;
        overflow: visible;
    }
    .all .desktop-slideshow .blur-page { display: none !important; }
    .all .desktop-slideshow .slidebox { position: relative; width: 100%; height: auto !important; }
    .all .desktop-slideshow .display {
        position: relative !important;
        inset: auto;
        width: 100%;
        height: 572px !important;
        overflow: hidden;
    }
    .all .desktop-slideshow .display .oneslideshowbullet {
        position: relative;
        display: block;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        border-radius: 0;
        overflow: hidden;
        background: linear-gradient(180deg, #9aa19f 255px, #1c3230 480px) !important;
    }
    .all .desktop-slideshow .display .oneslideshowbullet img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 255px !important;
        max-width: none;
        margin: 0;
        padding: 0;
        border-radius: 0;
        object-fit: cover;
        object-position: center;
    }
    .all .desktop-slideshow .display .oneslideshowbullet > div {
        position: absolute !important;
        top: auto !important;
        right: 16px !important;
        bottom: 24px !important;
        left: 16px !important;
        z-index: 2;
        display: flex;
        flex-direction: column;
        width: auto !important;
        max-width: none;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        border-radius: 0;
        background: none !important;
        backdrop-filter: none;
        text-align: center;
    }
    .all .desktop-slideshow .display .oneslideshowbullet > div h4 {
        margin: 0 0 18px !important;
        padding: 0 !important;
        color: #fff !important;
        font-size: 24px;
        font-weight: 700;
        line-height: 33px;
        text-align: center;
    }
    .all .desktop-slideshow .display .oneslideshowbullet > div p {
        display: -webkit-box;
        width: 100%;
        margin: 0 0 40px !important;
        padding: 0 !important;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        color: #fff !important;
        font-size: 17px;
        line-height: 33px;
        text-align: center;
    }
    .all .desktop-slideshow .display .oneslideshowbullet > div a.readmore {
        position: static !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100% !important;
        min-width: 0;
        height: 40px;
        margin: 0 !important;
        padding: 0 12px !important;
        border: 0;
        border-radius: 6px;
        background: #007f76 !important;
        color: #fff !important;
        font-size: 14px !important;
        font-weight: 400;
        line-height: 1;
        box-sizing: border-box;
    }
    .all .desktop-slideshow .display .oneslideshowbullet > div a.readmore::after {
        content: "";
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        background: url('../../icons/arrow-left-white.png') center center/contain no-repeat;
    }
    .all .desktop-slideshow .readmore-desktop { display: none; }
    .all .desktop-slideshow .readmore-mobile { display: inline; }

    /* Hooshad slide: the banner's phone on white, dark copy aligned right */
    .all .desktop-slideshow .display .oneslideshowbullet:has(> .hooshad-div) { background: #fff !important; }
    .all .desktop-slideshow .display .oneslideshowbullet:has(> .hooshad-div)::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 200px, #fff 290px);
        pointer-events: none;
    }
    .all .desktop-slideshow .display .oneslideshowbullet:has(> .hooshad-div) img {
        top: -13px;
        left: -32px;
        width: 686px;
        height: auto !important;
        object-fit: fill;
    }
    .all .desktop-slideshow .display .oneslideshowbullet > .hooshad-div { text-align: right; }
    .all .desktop-slideshow .display .oneslideshowbullet > .hooshad-div h4 {
        margin-bottom: 13px !important;
        color: #171717 !important;
        text-align: right;
    }
    .all .desktop-slideshow .display .oneslideshowbullet > .hooshad-div p {
        margin-bottom: 23px !important;
        color: #111 !important;
        text-align: right;
        -webkit-line-clamp: 6;
    }

    /* navigation: white square arrows, dots with a white pill for the current slide */
    .all .desktop-slideshow .slider-bottom {
        position: static !important;
        display: flex;
        justify-content: center;
        width: 100%;
        height: auto;
        margin: 0 !important;
        padding: 19px 0 24px;
        transform: none !important;
        background: transparent;
    }
    .all .desktop-slideshow .slider-navigation {
        position: static !important;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: auto;
        margin: 0 !important;
        transform: none !important;
    }
    .all .desktop-slideshow .slideshowbullets {
        display: flex;
        align-items: center;
        gap: 12px;
        width: auto;
        margin: 0;
        padding: 0;
    }
    .all .desktop-slideshow .slideshowbullets > li {
        flex-shrink: 0;
        width: 7px;
        height: 7px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 0;
        border-radius: 50%;
        background: #ededed !important;
        font-size: 0;
        cursor: pointer;
    }
    .all .desktop-slideshow .slideshowbullets > li > * { display: none !important; }
    .all .desktop-slideshow .slideshowbullets > li.active {
        width: 24px;
        border: 1px solid #e6e6e6;
        border-radius: 4px;
        background: #fff !important;
        box-sizing: border-box;
    }
    .all .desktop-slideshow .slideshow-left,
    .all .desktop-slideshow .slideshow-right {
        position: static !important;
        display: block;
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        margin: 0;
        border: 0;
        border-radius: 6px;
        background: #fff center center/20px 20px no-repeat;
        box-shadow: none;
        opacity: 1;
        transform: none !important;
    }
    .all .desktop-slideshow .slideshow-left::before,
    .all .desktop-slideshow .slideshow-right::before { display: none; }
    /* previous (right side) points right, next (left side) points left */
    .all .desktop-slideshow .slideshow-left {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23555' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    .all .desktop-slideshow .slideshow-right {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12H5M11 6l-6 6 6 6' fill='none' stroke='%23555' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    /* at either end the arrow that would wrap around is greyed out */
    .all .desktop-slideshow.is-first .slideshow-left {
        background-color: #a6a6a6;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23676767' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        pointer-events: none;
    }
    .all .desktop-slideshow.is-last .slideshow-right {
        background-color: #a6a6a6;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12H5M11 6l-6 6 6 6' fill='none' stroke='%23676767' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        pointer-events: none;
    }
}
/* ==================== END: slideshow.cshtml — mobile ==================== */
/* ==================== BEGIN: regions.cshtml — mobile (≤500px) ==================== */
/* One white card: the map on top, then title, text and a full-width "مشاهده همه" button. */
.btn-region__more { display: none; }
@media (max-width: 500px) {
    .all > .regions {
        width: auto;
        min-height: 0;
        margin: 40px 16px;
        padding: 24px 16px;
        border-radius: 8px;
        background: #fff;
    }
    .all > .regions > div { width: 100%; margin: 0; padding: 0; }
    .regions .manateq-content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .regions .map-column { order: -1; width: 100%; margin: 0; padding: 0; }
    .regions .map-wrapper { width: 100%; max-width: none; margin: 0; }
    .regions .text-column { width: 100%; margin: 0; padding: 0; }
    .regions .manateq h2 {
        margin: 19px 0 8px;
        padding: 0;
        color: #222;
        font-size: 18px;
        font-weight: 700;
        line-height: 28px;
        letter-spacing: 0;
        text-align: right;
    }
    .regions .text-column p {
        margin: 0;
        padding: 0;
        color: #222;
        font-size: 13px;
        line-height: 21px;
        text-align: right;
    }
    .regions .text-column p:empty { display: none; }
    .regions .text-column .btn-region {
        display: flex;
        width: 100%;
        height: 40px;
        margin: 24px 0 0;
        padding: 0 12px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 400;
    }
    .btn-region__more { display: inline; }
}
/* ==================== END: regions.cshtml — mobile ==================== */
/* ==================== BEGIN: messages.cshtml — mobile (≤500px) ==================== */
/* Daily message and notices become white cards: the full-width image, then title, text and a date row (date right, time left). */
@media (max-width: 500px) {
    .messages-container.home-bulletins { gap: 16px; }
    .home-bulletins .daily-message,
    .home-bulletins .notice-message {
        display: flex;
        flex-direction: column;
        gap: 0;
        height: auto;
        padding: 12px 18px 24px;
        border: 0;
        border-radius: 8px;
        background: #fff;
    }

    /* heading / tabs row */
    .home-bulletins .daily-message-side { display: block; }
    .home-bulletins .daily-message-side h2 {
        height: 40px;
        margin: 0 0 12px;
        border-radius: 6px;
        background: #f8f8f8;
    }
    .home-bulletins .notice-tabs {
        flex-direction: row;
        gap: 4px;
        margin: 0 0 12px;
        padding: 4px;
        border-radius: 6px;
        background: #f8f8f8;
    }
    .home-bulletins .notice-tab { height: 34px; padding: 0 4px; }
    .home-bulletins .notice-panels, .home-bulletins .notice-panel { height: auto; }

    /* image on top, full width */
    .home-bulletins .notice-link { display: flex; flex-direction: column; min-height: 0; height: auto; gap: 0; }
    .home-bulletins .notice-image,
    .home-bulletins .daily-message-image img {
        order: -1;
        width: 100%;
        height: auto;
        max-height: none;
        border-radius: 6px;
        object-fit: cover;
    }
    .home-bulletins .notice-image { margin-bottom: 14px; }
    .home-bulletins .daily-message-image { margin-bottom: 14px; }

    /* copy */
    .home-bulletins .daily-message-copy,
    .home-bulletins .notice-copy { padding: 0; border-radius: 0; background: none; }
    .home-bulletins .notice-copy h2 {
        margin: 0 0 12px;
        color: #222;
        font-size: 17px;
        font-weight: 700;
        line-height: 30px;
        -webkit-line-clamp: 3;
    }
    .home-bulletins .daily-message-copy p,
    .home-bulletins .notice-copy p {
        color: #333;
        font-size: 13px;
        line-height: 24px;
        -webkit-line-clamp: 6;
    }
    .home-bulletins .bulletin-date {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 0;
        padding-top: 22px;
        color: #999;
        font-size: 12px;
    }
}
/* ==================== END: messages.cshtml — mobile ==================== */
/* ==================== BEGIN: Header.cshtml — header width ==================== */
/* The header content shares the page sections' 90% width (instead of the global 1600px container cap),
   so its edges line up with the cards below on wide screens too. */
@media (min-width: 1201px) {
    .header-shell > .container {
        width: 90% !important;
        max-width: none !important;
    }
}
/* ==================== END: Header.cshtml — header width ==================== */
/* ==================== BEGIN: _Layout.cshtml — breadcrumb bar ==================== */
.page-crumbs { background:#fff; }
.page-crumbs__inner { width:90%; margin:0 auto; }
.page-crumbs .navigation-bar,
.page-crumbs .mgmt-office__crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:0 6px; min-height:42px; margin:0; padding:11px 0; border:0; overflow:visible; color:#888; font-size:13px; line-height:20px; box-sizing:border-box; }
.page-crumbs .navigation-bar > a,
.page-crumbs .navigation-bar > a:last-child,
.page-crumbs .mgmt-office__crumbs a { display:inline; height:auto; margin:0; padding:0; background:none; color:#888; font-size:13px; line-height:20px; letter-spacing:0; text-decoration:none; }
.page-crumbs .navigation-bar > a:hover,
.page-crumbs .mgmt-office__crumbs a:hover { color:#00B1A5; }
.page-crumbs .navigation-bar > a + a::before { content:"/"; margin-left:6px; color:#888; }
@media (max-width:500px) {
    .page-crumbs__inner { width:calc(100% - 32px); }
}
/* ==================== END: _Layout.cshtml — breadcrumb bar ==================== */

/* ==================== BEGIN: Header.cshtml — mobile header ==================== */
/* Red strip on top; menu button and emblem on the right; search, login and Hooshad as square buttons on the left. */
@media (max-width:1200px) {
    .header-shell > .container { width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; }
    .header-shell .header { border-top:3px solid #da0000; border-bottom:1px solid #eee; box-sizing:border-box; }
    .header-shell .header .navbtn { top:14px; right:16px; width:42px; height:42px; box-sizing:border-box; border:1px solid #eaeaea; border-radius:8px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 7h14M5 12h14M5 17h14' fill='none' stroke='%23777' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center / 22px; }
    .header-shell .header .mobilelogo { top:18px; right:72px; left:auto; width:32px; height:34px; margin:0; overflow:hidden; }
    .header-shell .header .mobilelogo img { position:absolute; top:-20px; left:-24px; display:block; width:79px; max-width:none; margin:0; }
    .header-shell .header .mobile-nav-left-actions { top:14px; left:16px; display:flex; align-items:center; gap:7px; }
    .header-shell .header .mobile-nav-action { display:flex; align-items:center; justify-content:center; width:42px; height:42px; box-sizing:border-box; border:1px solid #eaeaea; border-radius:8px; background:#fff; color:#555; }
    .mobile-nav-action svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
    .header-shell .header .mobile-nav-action--hooshad { border-color:#007f76; background:#007f76; }
    .mobile-nav-action--hooshad img { width:24px; height:auto; }
}
/* ==================== END: Header.cshtml — mobile header ==================== */
/* ==================== BEGIN: document cards — whole card clickable ==================== */
/* The card's last action (view) stretches over the whole card; the download icon stays above it as its own link. */
.staff-profile__document { position:relative; cursor:pointer; transition:background-color .15s ease, box-shadow .15s ease; }
.staff-profile__document:hover { background:#f0faf8; box-shadow:0 3px 16px #007f7612; }
.staff-profile__document-actions a:not(:last-child) { position:relative; z-index:1; }
.staff-profile__document-actions a:last-child::after { content:""; position:absolute; inset:0; border-radius:4px; }
.staff-profile__document-actions a:last-child:hover { background:none; }
.staff-profile__document-actions a:last-child:focus-visible { outline:0; }
.staff-profile__document-actions a:last-child:focus-visible::after { outline:2px solid #007f76; outline-offset:2px; }
/* ==================== END: document cards — whole card clickable ==================== */

/* ==================== BEGIN: category.cshtml — publications ==================== */
.doc-list .staff-profile__documents { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.doc-list .staff-profile__document h3 { font-size:14px; }
.doc-list .news-search__pagination button[aria-current="page"] { background:#fff; }
.doc-list .news-search__pagination .news-search__page-step { color:#777; }
.doc-list .news-search__pagination .news-search__page-step:disabled { color:#bbb; }
@media (max-width:760px) {
    .doc-list .staff-profile__documents { grid-template-columns:minmax(0,1fr); gap:10px; }
}
/* ==================== END: category.cshtml — publications ==================== */
/* ==================== BEGIN: category.cshtml / content.cshtml — media literacy ==================== */
.media-list .news-archive--plain { display:block; width:100%; margin:0; padding:20px; }
.media-list .news-archive--plain .news-archive__grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.media-list .news-archive--plain .news-archive__card h2 { min-height:0; margin:12px 3px 16px; font-weight:500; -webkit-line-clamp:2; }
.news-detail--media .news-detail__header { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
.news-detail--media h1 { font-weight:600; }
.news-detail--media .news-detail__summary { color:#666; }
@media (max-width:900px) {
    .media-list .news-archive--plain .news-archive__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
}
@media (max-width:500px) {
    .media-list .news-archive--plain { padding:12px; }
    .media-list .news-archive--plain .news-archive__grid { grid-template-columns:minmax(0,1fr); }
    .media-list .news-archive--plain .news-archive__card h2 { font-size:14px; }
}
/* ==================== END: category.cshtml / content.cshtml — media literacy ==================== */
/* ==================== BEGIN: sqshfamily.cshtml — family page ==================== */
.family-page.familyContainer { display:block; }
.family-page .familyTopBanner { margin:0 0 28px; border-radius:8px; }
.family-page h1 { margin:0 0 20px; }
.news-detail__body p:empty { display:none; }
.news-detail__documents { margin-top:32px; }
.news-detail__documents h2 { margin:0 0 14px; font-size:15px; font-weight:600; color:#222; }
.news-detail__documents .staff-profile__documents { margin-top:0; }
.news-detail__documents .staff-profile__document { box-shadow:0 2px 14px #0000000f; }
/* ==================== END: sqshfamily.cshtml — family page ==================== */
/* ==================== BEGIN: category.cshtml (crm) / fquestions.cshtml ==================== */
.doc-list--single .staff-profile__documents { grid-template-columns:minmax(0,1fr); gap:12px; }
.faq-page .faq-page__tabs { display:flex; gap:5px; overflow-x:auto; margin:0 0 28px; padding:5px; border-radius:6px; background:#fff; }
.faq-page .faq-page__tabs a { flex:1 0 auto; display:flex; align-items:center; justify-content:center; min-height:50px; padding:0 16px; border-radius:4px; background:#f1f1f1; color:#777; font-size:14px; text-decoration:none; white-space:nowrap; transition:color .15s ease, background-color .15s ease; }
.faq-page .faq-page__tabs a:hover { color:#00B1A5; }
.faq-page .faq-page__tabs a.is-active { background:#fff; color:#00B1A5; }
@media (min-width:761px) { .faq-page .faq-page__tabs a { flex:1 1 0; min-width:0; } }
.faq-page__hint { margin:0 0 20px; color:#222; font-size:15px; font-weight:600; line-height:24px; }
.faq-page__panel { display:grid; grid-template-columns:minmax(0,62fr) minmax(0,38fr); border-radius:6px; overflow:hidden; background:#ededed; box-shadow:0 2px 14px #00000008; }
.faq-page__questions { height:312px; margin:0; padding:0; overflow-y:auto; list-style:none; background:#fff; scrollbar-width:thin; scrollbar-color:#c7c7c7 #fafafa; }
.faq-page__questions li { margin:0; padding:0; border-bottom:1px solid #f1f1f1; }
.faq-page__questions li:last-child { border-bottom:0; }
.faq-page__questions button { display:flex; align-items:center; width:100%; min-height:52px; padding:10px 16px; border:0; background:#fff; color:#222; font:400 14px/22px WebmehrazFont,Tahoma,sans-serif; text-align:right; cursor:pointer; transition:background-color .15s ease; }
.faq-page__questions button:hover { background:#f6f6f6; }
.faq-page__questions button.is-active { background:#ededed; font-weight:600; }
.faq-page__questions button:focus-visible { outline:2px solid #007f76; outline-offset:-2px; }
.faq-page__status { display:flex; align-items:center; min-height:52px; padding:10px 16px; color:#888; font-size:13px; }
.faq-page__answer { min-width:0; padding:24px 20px; }
.faq-player { display:flex; align-items:center; gap:12px; min-height:64px; margin:0 0 22px; padding:0 12px; border-radius:6px; background:#007f76; color:#fff; }
.faq-player__toggle { flex:0 0 42px; display:flex; align-items:center; justify-content:center; width:42px; height:42px; padding:0; border:0; border-radius:50%; background:#fff; color:#007f76; cursor:pointer; }
.faq-player__toggle svg { width:24px; height:24px; fill:currentColor; }
.faq-player__pause, .faq-player.is-playing .faq-player__play { display:none; }
.faq-player.is-playing .faq-player__pause { display:block; }
.faq-player__toggle:focus-visible, .faq-player__wave:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.faq-player__track { flex:1 1 auto; min-width:0; }
.faq-player__wave { display:flex; align-items:center; gap:2px; height:24px; cursor:pointer; }
.faq-player__wave span { flex:1 1 0; min-width:1px; border-radius:1px; background:#ffffff66; }
.faq-player__wave span.is-played { background:#fff; }
.faq-player__time { display:block; margin-top:2px; font-size:10px; line-height:14px; text-align:left; direction:ltr; }
.faq-page__text { color:#444; font-size:14px; line-height:26px; }
.faq-page__text p { margin:0 0 8px; }
.faq-page .mgmt-office__documents { margin-top:32px; }
@media (max-width:760px) {
    .faq-page__panel { grid-template-columns:minmax(0,1fr); }
    .faq-page__questions { height:auto; max-height:312px; }
    .faq-page .faq-page__tabs { margin-bottom:20px; }
    .faq-page .faq-page__tabs a { min-height:48px; font-size:13px; }
    .faq-page__answer { padding:18px 16px; }
}
/* ==================== END: category.cshtml (crm) / fquestions.cshtml ==================== */
/* ==================== BEGIN: category.cshtml — storytelling ==================== */
.story-list .staff-profile__documents { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0; }
.story-card { display:flex; flex-direction:column; justify-content:space-between; gap:10px; min-height:84px; padding:14px 16px; border-right:3px solid #b5eeea; border-radius:4px; background:#fff; color:#222; text-decoration:none; box-shadow:0 3px 22px #00000005; box-sizing:border-box; transition:box-shadow .15s ease; }
.story-card:hover { box-shadow:0 3px 18px #00000017; }
.story-card:focus-visible { outline:2px solid #007f76; outline-offset:2px; }
.story-card h3 { margin:0; color:#222; font-size:14px; font-weight:500; line-height:24px; overflow-wrap:anywhere; }
.story-card .staff-profile__document-meta { color:#8a8a8a; }
@media (max-width:900px) {
    .story-list .staff-profile__documents { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
}
@media (max-width:560px) {
    .story-list .staff-profile__documents { grid-template-columns:minmax(0,1fr); }
}
/* ==================== END: category.cshtml — storytelling ==================== */
/* ==================== BEGIN: category.cshtml — research intro ==================== */
.doc-list--single .mgmt-office__intro h1,
.doc-list--single .mgmt-office__intro h2,
.doc-list--single .mgmt-office__intro h3,
.doc-list--single .mgmt-office__intro h4 { margin:14px 0 6px; color:#222; font-size:14px; font-weight:600; line-height:26px; }
.doc-list--single .mgmt-office__intro > :first-child { margin-top:0; }
.doc-intro--collapsed { position:relative; max-height:104px; overflow:hidden; }
.doc-intro--collapsed::after { content:""; position:absolute; inset:auto 0 0; height:36px; background:linear-gradient(180deg, #f9f9f900, #f9f9f9); pointer-events:none; }
.doc-intro__toggle { display:inline-flex; align-items:center; gap:6px; align-self:flex-start; margin:10px 0 0; padding:0; border:0; background:none; color:#007f76; font:13px WebmehrazFont,Tahoma,sans-serif; cursor:pointer; }
.doc-intro__toggle:hover { color:#00B1A5; }
/* ==================== END: category.cshtml — research intro ==================== */
/* ==================== BEGIN: content.cshtml — story detail ==================== */
/* Banner on top, then the text directly on the page background; the PDF button sits under the date. */
.news-detail--story { margin-top:24px; padding:0; background:transparent; }
.news-detail--media .news-detail__header--text { grid-template-columns:minmax(0,1fr); }
.news-detail__banner { display:block; width:100%; height:auto; margin:0 0 30px; border-radius:8px; }
.news-detail--story .news-detail__header { margin-bottom:28px; }
.news-detail--story h1 { margin-bottom:16px; font-size:19px; line-height:32px; }
.news-detail--story .news-detail__summary { margin-bottom:14px; }
.news-detail__download { display:inline-flex; align-items:center; gap:6px; min-height:36px; margin-top:26px; padding:0 12px; border:1px solid #eaeaea; border-radius:6px; background:#fff; color:#2f8fe6; font-size:13px; text-decoration:none; transition:border-color .15s ease, background-color .15s ease; }
.news-detail__download:hover { border-color:#2f8fe6; background:#f4f9fe; }
.news-detail__download svg { flex-shrink:0; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:1000px) {
    .news-detail--story { padding:0; }
}
@media (max-width:700px) {
    .news-detail--story { width:calc(100% - 32px); margin-top:16px; padding:0; border:0; box-shadow:none; }
    .news-detail__banner { margin-bottom:20px; }
    .news-detail--story .news-detail__intro { display:block; }
    .news-detail__download { margin:20px 0 22px; }
}
/* ==================== END: content.cshtml — story detail ==================== */
/* ==================== BEGIN: content.cshtml — members' survey report ==================== */
/* Layout only: the report's HTML, text and charts come from the panel; these rules override its inline styles.
   Font sizes are measured from the mockup: each string's width against the content width. */
.news-detail--survey .news-detail__body > p:first-child { margin:0; }
.news-detail--survey h1 { font-size:22px; line-height:36px; }
.news-detail--survey .news-detail__summary { font-size:15px; line-height:30px; }
.news-detail--survey .news-detail__date { font-size:14px; }
.news-detail--survey .news-detail__body { font-size:15px; line-height:28px; }
.news-detail--survey #sqshSurvey1404Report { border-radius:0; color:#222; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-hero { margin-bottom:24px; padding:24px 28px; border-radius:6px; background:#fff; color:#222; box-shadow:0 3px 22px #00000008; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-eyebrow { margin:0 0 10px; padding:4px 12px; border-radius:4px; background:#f0faf8; color:#007f76; font-size:13px; line-height:22px; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-title { margin:0 0 12px; color:#222; font-size:20px; font-weight:600; line-height:34px; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-lead { color:#555; font-size:15px; line-height:30px; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-highlight { color:inherit; font-weight:600; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-kpi-grid { gap:20px; margin-bottom:24px; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-card { padding:24px 28px; border:0; border-radius:6px; box-shadow:0 3px 22px #00000008; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-kpi { text-align:right; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-kpi-value { margin-bottom:8px; color:#222; font-size:20px; font-weight:700; line-height:30px; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-kpi-label { color:#666; font-size:16px; line-height:26px; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-section-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-bottom:24px; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-section-title { margin:0 0 18px; color:#222; font-size:20px; font-weight:600; line-height:32px; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-text { margin:14px 0 0; color:#555; font-size:15px; line-height:28px; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-point { margin:0 0 14px; padding:0; border:0; border-radius:0; background:none; color:#444; font-size:17px; line-height:30px; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-point:not(.sqsh-rp-action) { position:relative; padding-right:16px; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-point:not(.sqsh-rp-action)::before { content:"•"; position:absolute; right:0; color:#999; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-chart-wrap { height:300px; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-final { margin-bottom:24px; padding:24px 28px; border-radius:6px; background:#fff; color:#555; font-size:15px; line-height:30px; box-shadow:0 3px 22px #00000008; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-final strong { display:block; margin-bottom:12px; color:#222; font-size:20px; font-weight:600; line-height:32px; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-question-section { margin-top:32px; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-question-section .sqsh-rp-card { padding:0; background:transparent; box-shadow:none; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-question-section .sqsh-rp-section-title { margin-bottom:8px; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-question-section .sqsh-rp-text { margin:0; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-group-title { margin:28px 0 14px; padding:0; border:0; border-radius:0; background:none; color:#222; font-size:20px; font-weight:600; line-height:32px; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-question-grid { grid-template-columns:minmax(0,1fr); gap:14px; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-question-item { padding:18px 20px; border:0; border-right:3px solid #b5eeea; border-radius:4px; color:#333; font-size:17px; line-height:28px; box-shadow:0 3px 22px #00000008; }
.news-detail--survey #sqshSurvey1404Report .sqsh-rp-question-number { width:auto; height:auto; margin-left:8px; background:none; color:#00b1a5; font-size:15px; font-weight:600; }
.news-detail--survey .news-search__pagination button[aria-current="page"] { background:#fff; }
.news-detail--survey .news-search__pagination .news-search__page-step { color:#777; }
.news-detail--survey .news-search__pagination .news-search__page-step:disabled { color:#bbb; }
@media (max-width:900px) {
    .news-detail--survey #sqshSurvey1404Report { padding:0; }
    .news-detail--survey #sqshSurvey1404Report .sqsh-rp-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .news-detail--survey #sqshSurvey1404Report .sqsh-rp-section-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
}
@media (max-width:500px) {
    .news-detail--survey h1 { font-size:19px; line-height:32px; }
    .news-detail--survey #sqshSurvey1404Report .sqsh-rp-hero, .news-detail--survey #sqshSurvey1404Report .sqsh-rp-card, .news-detail--survey #sqshSurvey1404Report .sqsh-rp-final { padding:18px; }
    .news-detail--survey #sqshSurvey1404Report .sqsh-rp-title, .news-detail--survey #sqshSurvey1404Report .sqsh-rp-section-title, .news-detail--survey #sqshSurvey1404Report .sqsh-rp-final strong, .news-detail--survey #sqshSurvey1404Report .sqsh-rp-group-title { font-size:18px; line-height:30px; }
    .news-detail--survey #sqshSurvey1404Report .sqsh-rp-point, .news-detail--survey #sqshSurvey1404Report .sqsh-rp-question-item { font-size:15px; line-height:26px; }
    .news-detail--survey #sqshSurvey1404Report .sqsh-rp-question-item { padding:14px 16px; }
    .news-detail--survey #sqshSurvey1404Report .sqsh-rp-kpi-label { font-size:14px; line-height:22px; }
}
/* ==================== END: content.cshtml — members' survey report ==================== */
/* ==================== BEGIN: content.cshtml — AI conference page ==================== */
/* The panel's content in the design's order (arranged by the page script); these rules override its inline styles. */
.news-detail--conference h1 { font-size:22px; line-height:36px; }
.news-detail--conference .news-detail__summary { font-size:17px; line-height:34px; }
.news-detail--conference .news-detail__date { font-size:14px; }
.news-detail--conference .news-detail__body { font-size:15px; line-height:28px; }
.conf-card { margin:0 0 28px; padding:24px 28px; border-radius:6px; background:#fff; color:#444; box-shadow:0 3px 22px #00000008; }
.conf-card p { margin:0 0 10px; color:#444; font-size:16px; line-height:30px; text-align:right; }
.conf-card p:last-child { margin-bottom:0; }
.news-detail--conference .conf-card h2 { margin:0 0 14px; color:#222; font-size:18px; font-weight:600; line-height:30px; }
.conf-gallery { margin:0 0 28px; }
.conf-gallery__track { display:grid; gap:20px; }
.conf-gallery__track a { display:block; overflow:hidden; border-radius:6px; background:#ededed; }
.conf-gallery__track img { display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover; }
.conf-gallery__nav { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:20px; }
.conf-gallery__nav button { display:flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:0; border-radius:6px; background:#fff; color:#555; font-size:16px; line-height:1; cursor:pointer; }
.conf-gallery__nav button:disabled { background:#a6a6a6; color:#676767; cursor:default; }
.conf-gallery__dots { display:flex; align-items:center; gap:12px; }
.conf-gallery__dots span { width:7px; height:7px; border-radius:50%; background:#ededed; }
.conf-gallery__dots span.is-active { width:24px; border:1px solid #e6e6e6; border-radius:4px; background:#fff; box-sizing:border-box; }
.news-detail--conference .conference-articles { margin:0 0 28px; padding:0; border:0; background:none; box-shadow:none; font-family:inherit; }
.news-detail--conference .conference-articles .conference-wrap { max-width:none; margin:0; padding:0; }
.news-detail--conference .conference-articles .conference-header { margin:0 0 20px; padding:0; border:0; background:none; box-shadow:none; text-align:right; }
.news-detail--conference .conference-articles .conference-header h1 { margin:0 0 10px; color:#222; font-size:20px; font-weight:600; line-height:32px; }
.news-detail--conference .conference-articles .conference-header p { max-width:none; margin:0; color:#555; font-size:16px; line-height:30px; }
.news-detail--conference .conference-articles .conf-documents-title { margin:0 0 14px; color:#222; font-size:20px; font-weight:600; line-height:32px; }
.news-detail--conference .conference-articles .article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0; }
.news-detail--conference .conference-articles .article-card { position:relative; display:grid; grid-template-columns:48px minmax(0,1fr); gap:0 14px; align-content:start; min-height:128px; margin:0; padding:18px 18px 46px; border:0; border-radius:6px; background:#fff; box-shadow:0 3px 22px #00000008; transition:background-color .15s ease, box-shadow .15s ease; }
.news-detail--conference .conference-articles .article-card:hover { background:#f0faf8; box-shadow:0 3px 16px #007f7612; transform:none; }
.conf-article__icon img { display:block; width:42px; height:auto; }
.conf-article__body { min-width:0; }
.news-detail--conference .conference-articles .tag { display:block; margin:0 0 6px; padding:0; border:0; border-radius:0; background:none; color:#222; font-size:19px; font-weight:500; line-height:30px; }
.news-detail--conference .conference-articles .authors { display:block; margin:0; padding:0; border:0; border-radius:0; background:none; color:#777; font-size:16px; line-height:26px; }
.conf-article__more { display:none; }
.conf-article__open { position:static; padding:0; border:0; background:none; cursor:pointer; }
.conf-article__open img { position:absolute; left:18px; bottom:14px; width:22px; height:22px; object-fit:contain; }
.conf-article__open::after { content:""; position:absolute; inset:0; border-radius:6px; }
.conf-article__open:focus-visible { outline:0; }
.conf-article__open:focus-visible::after { outline:2px solid #007f76; outline-offset:2px; }
.conf-gallery--videos { margin-bottom:0; }
.news-detail--conference .videos { display:grid; gap:16px; margin:0; }
.news-detail--conference .videos video { display:block; width:100% !important; max-width:none !important; height:auto !important; margin:0; aspect-ratio:3 / 2; object-fit:cover; border-radius:6px; background:#ededed; }
.conf-dialog { position:fixed; inset:0; width:min(640px, calc(100vw - 32px)); height:fit-content; max-height:calc(100vh - 64px); margin:auto; padding:28px; overflow-y:auto; border:0; border-radius:10px; background:#fff; color:#333; box-shadow:0 18px 50px #00000040; }
.conf-dialog[open] { animation:conf-dialog-in .2s ease-out; }
.conf-dialog[open]::backdrop { animation:conf-backdrop-in .2s ease-out; }
@keyframes conf-dialog-in { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes conf-backdrop-in { from { opacity:0; } to { opacity:1; } }
.conf-dialog::backdrop { background:#00000066; }
.conf-dialog__close { position:absolute; top:14px; left:14px; display:flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:0; border-radius:6px; background:#f4f4f4; color:#555; font-size:20px; line-height:1; text-align:center; cursor:pointer; transition:background-color .15s ease; }
.conf-dialog__close:hover { background:#e9e9e9; }
.conf-dialog__tag { margin:0 0 8px 40px; color:#007f76; font-size:13px; line-height:22px; }
.conf-dialog h2 { margin:0 0 8px 40px; color:#222; font-size:18px; font-weight:600; line-height:30px; }
.conf-dialog__authors { margin:0 0 14px; color:#777; font-size:13px; line-height:24px; }
.conf-dialog p { margin:0; font-size:15px; line-height:28px; text-align:right; }
@media (max-width:900px) {
    .news-detail--conference .conference-articles .article-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
    .news-detail--conference h1 { font-size:19px; line-height:32px; }
    .conf-card { padding:18px; }
    .news-detail--conference .conference-articles .article-grid { grid-template-columns:minmax(0,1fr); }
}
/* ==================== END: content.cshtml — AI conference page ==================== */