@font-face {
    font-family: iransans;
    src: url(../fontawesome-free-6.6.0-web/IRANSans.ttf);
}

@font-face {
    font-family: FontAwesome;
    src: url(../fontawesome-free-6.6.0-web/webfonts/fa-solid-900.woff2);
}

.align-item-center {
    align-items: center !important;
}

.flex-column {
    flex-direction: column !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

:root {
    --bg-bac: white;
    --bg-bac2: #f5f5f5;
    --logo-color: #4A4A4A;
    --gray1: #8A8A8A;
    --gray2: #54595F;
    --gray3: #7A7A7A;
    --gray4: #A0A0A0;
    --gray-low0: #ececec;
    --gray-low: #f5f5f4;
    --gray-low2: #e2e2e2;
    --border-input: #e2e2e2;
    --bg-card: #f5f5f5;
    --bg-card2: rgb(255, 255, 255);
    --bg-footer: #FBFBFB;
    --gray5: #636363;
    --bg-section: white;
    --bg-section2: white;
    --dark-title: #222;
    --news-footer-lable: #777;
    --slidbar-b-bottom: #f1f1f1;
    --submenu-bg: #fafafa;
    --nav-submenu-bg: white;
}


/* .dark-theme {
  --bg-bac: #22272b;
  --bg-bac2: #22272b;
  --logo-color: #F4F7F7;
  --gray1: #8A8A8A;
  --gray2: #d2d2d2;
  --gray3: #cacaca;
  --gray4: #A0A0A0;
  --gray-low0: #50616a;
  --gray-low: #f5f5f4;
  --gray-low2: #424242;
  --border-input: #696969;
  --bg-card: #373d42;
  --bg-card2: #373d42;
  --bg-footer: #1d2225;
  --gray5: #636363;
  --bg-section: #22272B;
  --bg-section2: #373D42;
  --dark-title: white;
  --news-footer-lable: #e7e7e7;
  --slidbar-b-bottom: #252b30;
  --submenu-bg: #2a3035;
  --nav-submenu-bg: #1c2024;

} */

.color-gold {
    color: #FFAE4F;
    cursor: pointer;
}

.txt-gray {
    color: #7A7A7A !important;
}

a {
    text-decoration: none;
}

p {
    margin: 0;
}

html {
    overflow-x: hidden !important;
}

body {
    font-family: iransans;
    background-color: white;
}

@media(max-width:693px) {
    body {
        overflow-x: hidden !important;
    }
}

.bac2 {
    background-color: #f5f5f5 !important;
}

/* nav */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 20px 30px 10px;
    /* background-color: #a31e22; */
}

.logo a {
    font-weight: bold;
    font-size: 18px;
    color: #4A4A4A;
    display: block;
}

.logo span {
    font-size: 9px;
    color: white;
}

.logo img {
    width: 70px;
}

.logo div {
    line-height: 20px;
}

.menu {
    display: flex;
    gap: 0px;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
}

    .menu li a {
        text-decoration: none;
        color: #f4f4f4;
        font-size: 13px;
        margin: 0 10px;
        padding: 0 8px;
        transition: all 0.1s ease-in-out;
    }

@media (min-width: 1000px) and (max-width: 1400px) {
    .menu li a {
        margin: 0;
    }
}

.menu li a:hover {
    font-weight: 600;
    color: #131313;
}

.contact-box {
    display: flex;
    align-items: center;
    width: fit-content;
    gap: 12px;
}

    .contact-box .icon {
        font-size: 24px;
        color: #d5d5d5;
        /* margin-left: 12px; */
    }

.contact-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

    .contact-text .label {
        font-size: 13px;
        color: #e1e1e1;
        margin-bottom: 4px;
    }

    .contact-text .number {
        font-size: 11px;
        color: #e7e7e7;
        direction: ltr;
    }


.hamburger {
    display: none;
    align-items: center;
    justify-content: space-between;
    font-size: 22px;
    cursor: pointer;
    color: white;
}

.nav-has-submenu {
    align-items: center;
    position: relative;
}

    .nav-has-submenu > a::after {
        content: "\f107";
        font-family: "FontAwesome";
        font-weight: 900;
        margin-right: 6px;
        font-size: 12px;
    }

.nav-submenu {
    position: absolute;
    top: 33px;
    left: -10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease-in-out;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    padding: 8px;
    min-width: 150px;
    z-index: 100;
}

    .nav-submenu li {
        list-style: none;
    }

        .nav-submenu li a {
            display: block;
            padding: 8px 15px;
            text-decoration: none;
            color: #8A8A8A;
            font-size: 14px;
            transition: background 0.2s;
        }

            .nav-submenu li a:hover {
                background: #a11e22;
                border-radius: 8px;
                color: white;
            }

.nav-has-submenu:hover .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-menu {
    display: none;
}

/* حالت موبایل */
@media (max-width: 1000px) {
    .menu {
        display: none;
        flex-direction: column;
        gap: 10px;
        position: absolute;
        top: 60px;
        right: 0;
        background: #fff;
        padding: 15px;
        border: 1px solid #ddd;
    }

        .menu.active {
            display: flex;
        }

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

    .mobile-menu {
        display: flex;
    }

    .logo {
        width: 100%;
    }

    .top-nav {
        justify-content: center !important;
        align-items: center !important;
    }
}

/* منو کناری */
/* لایه پوشاننده */
.overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 998;
}

.overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 998;
}

.sidebar {
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    height: 100%;
    background: white;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
    z-index: 999;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 15px;
}

    .sidebar.open {
        right: 0;
    }

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 15px;
    background-color: #a31e22 !important;
}

    .sidebar-header .logo {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: bold;
        color: white;
        flex: 1;
    }

        .sidebar-header .logo span {
            font-size: 14px;
        }

    .sidebar-header .close-btn {
        font-size: 20px;
        cursor: pointer;
        color: rgb(219, 219, 219);
    }

.menu2 {
    list-style: none;
    padding: 4px 15px;
    margin: 0;
}

    .menu2 li {
        border-bottom: 1px dashed rgb(52, 52, 52);
    }

    .menu2 .submenu li a {
        font-size: 12px;
    }

    .menu2 li:last-child {
        border-bottom: none;
    }

    .menu2 li a {
        display: flex;
        align-items: end;
        gap: 10px;
        font-size: 13px;
        padding: 15px;
        text-decoration: none;
        color: #353535;
        transition: all 0.2s ease;
    }

        .menu2 li a.active {
            color: #d0282d;
        }


.submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    background: #f5f5f5ba;
}

.has-submenu > a::after {
    content: "\f107";
    font-family: "FontAwesome";
    font-size: 12px;
}

.has-submenu.open > a::after {
    content: "\f106";
}

/* جستجو */
.search-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #111827;
    opacity: 0.8;
    z-index: 999;
    backdrop-filter: blur(5px);
    /* محو تر */
    /* background: #1118279c;
    opacity: 1; */
}

/* پنل جستجو */
.search-box {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    width: 34%;
    height: 54px;
}

@media (max-width:700px) {
    .search-box {
        width: 80%;
    }
}

.search-box input {
    width: 100%;
    padding: 10px 70px 10px 12px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    outline: none;
    height: 54px;
}

    .search-box input:focus {
        border: 1px solid #a31e22 !important;
    }

.search-box .magnifying-glass-container {
    position: absolute;
    right: 0;
    top: 50%;
    height: 100%;
    width: 12%;
    transform: translateY(-50%);
    background: #a91c21;
    color: #fff;
    padding: 6px 8px;
    border-radius: 0 14% 14% 0;
}

.search-box input::placeholder {
    color: #A0A0A0;
}

/* header */
.header-style {
    position: relative !important;
    background-color: #a31e22 !important;
    height: auto;
}

.bg-left-header,
.bg-right-header {
    position: absolute;
    top: 0;
    height: 100%;
}

.bg-right-header {
    right: -1px;
}

@media (max-width:769px) {
    .bg-right-header {
        top: -200px !important;
    }
}

.bg-left-header {
    left: -1px;
}

nav {
    position: absolute;
    top: -2px;
}

/* header-content */
.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 90px 20px 130px 20px;
    max-width: 1220px;
    margin: auto;
    gap: 20px;
    color: #fff;
    /* margin-top: 180px; */
}

    .header-content .text {
        flex: 1;
        position: relative;
    }

        .header-content .text h1 {
            font-size: 24px;
            margin-bottom: 10px;
            color: #ffffff;
            font-weight: bold;
        }

        .header-content .text p {
            font-size: 16px;
            line-height: 1.8;
            margin-bottom: 20px;
            color: #f1f1f1;
            width: 90%;
        }

        .header-content .text a {
            display: inline-block;
            padding: 10px 20px;
            background: #120000;
            color: #fff;
            text-decoration: none;
            border-radius: 8px;
            transition: all 0.4s ease-in;
        }

            .header-content .text a:hover {
                background: #fff;
                color: #120000;
            }

    .header-content .image {
        flex: 1;
        text-align: center;
    }

        .header-content .image img {
            max-width: 85%;
            height: auto;
            border-radius: 10px;
        }

/* ریسپانسیو برای موبایل */
@media (max-width: 768px) {
    .header-content .text p {
        width: 100%;
    }

    .header-content {
        flex-direction: column;
        text-align: center;
        padding: 115px 20px 90px 20px;
    }

        .header-content .text {
            order: 1;
        }

        .header-content .image {
            order: 2;
        }
}

@media (min-width: 1400px) {

    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1220px !important;
    }
}

/* category-slider */
.category-slider-container {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0px 1px 11px 1px rgb(0 0 0 / 17%);
    position: relative;
    padding: 1.5rem 2.5rem;
    margin-top: -70px;
    margin-bottom: 30px;
}

@media (min-width: 768px) {
    .category-slider-container {
        margin-top: -110px;
    }
}

@media (max-width: 576px) {
    .category-slider-container {
        padding: 1.5rem 17px;
    }
}

.section-line {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .section-line .shap {
        position: absolute;
        right: -14px;
        top: 4px;
    }

    .section-line .shap2 {
        position: absolute;
        right: -14px;
        top: 0px;
    }

    .section-line .shap3 {
        position: absolute;
        right: -14px;
        top: 36px;
    }

@media(max-width:768px) {
    .section-line .shap {
        top: 5px;
        right: -9px;
    }

    .section-line .shap2 {
        top: -1px;
        right: -9px;
    }
}

.section-line h2 {
    font-size: 18px;
    font-weight: bold;
    white-space: nowrap;
    margin: 0;
    color: #2f2f2f;
}

.dashed-line {
    flex: 1;
    border-bottom: 1.5px dashed #606060;
}

.dashed-line2 {
    flex: 0.5;
    border-bottom: 1.5px dashed #606060;
}

.buttons {
    display: flex;
    gap: 10px;
}

.btn-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
}

.btn-more {
    width: fit-content;
    height: 35px;
    border-radius: 8px;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 4px 12px;
    font-size: 14px;
    color: rgb(27, 27, 27);
}

.btn-icon .icon {
    color: #4f4f4f !important;
}

.btn-icon.active {
    background: #d0282d;
}

    .btn-icon.active .icon {
        color: #f3f3f3 !important;
    }

/*  */
.cat-slider .item {
    margin-top: 20px;
}

    .cat-slider .item .cat-item {
        background: #f2f2f2;
        border-radius: 12px;
        padding: 20px;
        text-align: center;
        transition: all 0.3s ease;
        cursor: pointer;
        height: 130px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* border: 1px solid #a11e22; */
    }

    .cat-slider .item .cat-item2 {
        background: transparent;
        border-radius: 12px;
        padding: 5px;
        text-align: center;
        transition: all 0.3s ease;
        cursor: pointer;
        height: 130px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border: 2px solid #a11e22;
    }

.cat-item-bg {
    background: #f2f2f2;
    background-position: center;
    background-size: cover;
    border-radius: 7px;
    width: 100%;
    height: 130px;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.cat-item-bg-overlay {
    background-color: rgba(0, 0, 0, 0.582);
    width: 100%;
    height: 130px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

.icon-box {
    /* position: relative;
  display: inline-block; */
    font-size: 24px;
    color: #f2f2f2;
}

.bg-icon-box {
    padding: 13px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2f2f2faf;
    background: #d0282d;
    font-size: 28px;
    width: 45px;
    height: 45px;
    position: relative;
    z-index: 3;
}

@media(max-width:768px) {
    .bg-icon-box {
        width: 25px;
        height: 25px;
    }

    .icon-box {
        font-size: 13px;
    }
}

.small-rect {
    position: absolute;
    bottom: 11px;
    right: 35px;
    width: 18px;
    height: 40px;
    background: rgba(0, 0, 0, 0.048);
    border-radius: 4px;
}

.item .cat-item h3, .item .cat-item2 h3 {
    margin: 15px 0 5px;
    font-size: 15px;
    color: #ffffff;
    position: relative;
    z-index: 3;
}

@media(max-width:768px) {
    .cat-slider .item .cat-item, .cat-slider .item .cat-item2 {
        height: 93px;
        width: 100%;
        padding: 3px;
    }

    .item .cat-item h3, .item .cat-item2 h3 {
        font-size: 12px;
        margin: 8px 0 5px;
    }
}

.item .cat-item p {
    margin: 0;
    font-size: 11px;
    color: #a1a1a1;
}

/* حالت هاور */
.cat-slider .item .cat-item2:hover {
    background: #a31e22;
    transform: translateY(-10px);
}

.cat-slider .item .cat-item:hover .icon-box,
.cat-slider .item .cat-item:hover h3,
.cat-slider .item .cat-item:hover p {
    color: #fff;
}

.cat-slider .item .cat-item:hover .small-rect {
    background: rgba(255, 255, 255, 0.137);
}
/*  */
.cat-slider .item .cat-item:hover {
    background: #a31e22;
    transform: translateY(-10px);
}
/* story */
.story-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999;
}

.story-header {
    position: absolute;
    top: 15px;
    width: 95%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}

.progress-container {
    display: flex;
    gap: 5px;
    width: 90%;
    height: 4px;
    /* margin-top: 10px; */
}

.progress-bar {
    flex: 1;
    height: 100%;
    background: rgba(255,255,255,0.3);
    border-radius: 4px;
    overflow: hidden;
}

    .progress-bar span {
        display: block;
        width: 0;
        height: 100%;
        background: #fff;
        transition: width linear;
    }

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

.story-slide {
    width: 50%;
    height: 100%;
    object-fit: contain;
    display: none;
}

@media (max-width:768px) {
    .story-slide {
        width: 90%;
        height: 100%;
    }
}

.story-img.active {
    display: block;
}

.close-story {
    font-size: 22px;
    cursor: pointer;
    margin-right: 10px;
    position: relative;
    z-index: 100;
}

.story-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px;
    color: white;
    padding: 15px;
    cursor: pointer;
    z-index: 10000;
    opacity: 0.7;
    transition: 0.3s;
}

    .story-nav:hover {
        opacity: 1;
    }

    .story-nav.left {
        left: 15px;
    }

    .story-nav.right {
        right: 15px;
    }

/* slider2 */

.owl-carousel .owl-stage {
    overflow: visible !important;
}

/* مهم: اجازه می‌ده آیتم بزرگ دیده بشه */
.slider2 .item {
    position: relative;
    width: 180px;
    height: 250px;
    overflow: hidden;
    border-radius: 8px;
    margin: 0 8px;
    box-sizing: border-box;
    transition: all 400ms ease-in-out;
    will-change: transform, width;
    cursor: pointer;
    z-index: 1;
}

    .slider2 .item:hover {
        width: 280px !important;
    }

@media(min-width:768px) {
    .slider2 .item:hover {
        width: 340px !important;
    }
}

.slider2 .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* وقتی آیتم "گسترش" پیدا کرده => فقط عرضش رو زیاد می‌کنیم و z-index بالا می‌بریم */
.slider2 .item.expanded {
    width: 340px;
    /* عرض هاور (قابل تغییر) */
    z-index: 50;
}

@media (max-width: 330px) {
    .slider2 .item {
        width: 133px !important;
    }
}

@media (min-width: 330px) and (max-width: 440px) {
    .slider2 .item {
        width: 168px !important;
    }
}

@media (min-width: 441px) and (max-width: 599px) {
    .slider2 .item {
        width: 210px !important;
    }
}

@media (min-width: 769px) and (max-width: 1000px) {
    .slider2 .item {
        width: 210px !important;
    }
}

@media (max-width: 767px) {

    .slider2 .item.expanded {
        width: 287px !important;
    }
}

/* هاله و متن */
.slider2 .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 300ms ease;
    display: flex;
    align-items: flex-end;
    justify-content: end;
    padding: 12px;
    pointer-events: none;
}

.slider2 .overlay2 {
    position: absolute;
    background: rgba(0, 0, 0, 0.473);
    opacity: 1;
    top: 0;
    right: 0;
    width: 100%;
    height: 250px;
}


.slider2 .title {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap: 15px; */
    gap: 0px;
    font-size: 13px;
    position: absolute;
    right: 20px;
    bottom: 10px;
    color: white;
    transition: all 0.2s;
    /* overflow: hidden;    */
    /* متن اضافه دیده نشه */
}

    .slider2 .title p {
        writing-mode: vertical-rl;
        transform: rotate(360deg);
        width: 20px;
        height: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        font-size: 13px;
        color: #ffffff;
        /* white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 135px;
  transform: rotate(90deg); */
    }

.gotoright {
    width: 25px;
    height: 25px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #d0282d;
}

    .gotoright .icon {
        color: #ffffff;
        font-size: 11px
    }

.rotate180 {
    transform: rotate(180deg);
}

.slider2 .item:hover .title {
    opacity: 0;
}

.slider2 .overlay span {
    width: 100%;
    color: #fff;
    font-size: 14px;
    transform: translateY(12px);
    opacity: 0;
    transition: all 300ms ease;
    position: relative;
    z-index: 100;
}

@media(max-width:768px) {
    .slider2 .overlay {
        justify-content: center;
    }
}

.slider2 .item.expanded .overlay {
    opacity: 1;
}

    .slider2 .item.expanded .overlay span {
        opacity: 1;
        transform: translateY(0);
    }

/*  */
.news-box {
    width: 100%;
}

.news-title {
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 16px;
    text-align: right;
}

.news-meta {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    text-align: center;
}

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

    .meta-item .label {
        font-size: 10px;
        color: #e9e9e9;
        margin-bottom: 4px;
    }

    .meta-item .value {
        font-size: 10px;
        /* font-weight: bold; */
        color: #dcdcdc;
    }

.news-meta .meta-item:not(:first-child) {
    border-left: 1px dashed rgba(255, 255, 255, 0.742);
    padding-left: 10px;
    margin-left: 10px;
}

@media(max-width:768px) {
    .mr-ml-sm0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.section4-card {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 1px 0px 9px rgb(0 0 0 / 18%);
    background-color: #fff;
    margin: 20px auto;
    transition: transform 0.3s ease;
    padding: 13px;
}

    .section4-card:hover {
        transform: translateY(-5px);
    }

.section4-card-img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.section4-card-body hr {
    width: 100%;
    border: 1px dashed #606060;
}


.section4-card-body-content {
    padding: 16px 0;
}

.section4-card-body-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #4A4A4A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section4-card-body-desc {
    margin-bottom: 12px;
    font-size: 12px;
    color: #A0A0A0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section4-card-body-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: #777;
}

    .section4-card-body-footer .meta {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

        .section4-card-body-footer .meta .des,
        .section4-card-body-footer .meta .link {
            display: flex;
            align-items: center;
            background-color: rgb(255, 255, 255);
            border-radius: 4px;
            ;
            gap: 5px;
            padding: 0.25rem 0.375rem;
            font-size: 11px;
        }

        .section4-card-body-footer .meta .link {
            background-color: #d0282d;
            color: white;
            border-radius: 5px;
            gap: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 23px;
            height: 23px;
            font-size: 11px;
        }

    .section4-card-body-footer a {
        color: #777;
    }

    .section4-card-body-footer .meta .tag,
    .section4-card-body-footer .tag {
        color: #d0282d;
        border-radius: 20px;
        padding: 0.25rem 0.4rem;
        border-radius: 4px;
        white-space: nowrap;
        font-size: 10px;
        background-color: rgb(255, 219, 219);
    }

/*  */
.section-banner {
    display: flex;
    border-radius: 8px;
    /* overflow: hidden; */
    background: #d0282d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    margin: 0 auto;
    gap: 20px;
    height: 150px;
    align-items: center;
    padding: 20px;
}

    .section-banner .banner-image {
        display: flex;
        justify-content: end;
        width: 80%;
        flex: 1;
    }

        .section-banner .banner-image img {
            width: 65%;
            height: auto;
            border-radius: 12px;
            object-fit: cover;
        }

    .section-banner .banner-content {
        /* flex: 2; */
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 12px;
    }

        .section-banner .banner-content h2 {
            font-size: 23px;
            margin: 0;
            color: #ffffff;
            font-weight: bold;
        }

        .section-banner .banner-content p {
            font-size: 14px;
            color: #f6f6f6;
            line-height: 1.6;
            margin: 0;
        }

        .section-banner .banner-content .btn {
            display: inline-block;
            padding: 8px 16px;
            background: #160001;
            color: #fff;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            text-decoration: none;
            text-align: center;
            width: fit-content;
            transform: all 0.3s;
        }

            .section-banner .banner-content .btn:hover {
                background: #ffffff;
                color: #160001;
            }

@media (max-width: 768px) {
    .section-banner {
        flex-direction: column-reverse;
        text-align: center;
        height: auto;
    }

        .section-banner .banner-content {
            align-items: center;
            width: 66%;
        }

        .section-banner .banner-image {
            justify-content: center;
            width: 100%;
        }

            .section-banner .banner-image img {
                width: 80%;
                margin-top: -68px;
            }
}

/* logos */
.logos-container {
    background-color: #a91c21;
}

.news-agency-slider .item {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .news-agency-slider .item img {
        width: 35% !important;
    }

@media (max-width:768px) {
    .news-agency-slider .item img {
        width: 70% !important;
    }
}

/*  */
.mt-8 {
    margin-top: 5rem;
}

.md-end-sm-center {
    justify-content: end;
}

@media(max-width:992px) {
    .md-end-sm-center {
        justify-content: center;
    }

    .mt-8 {
        margin-top: 6rem;
    }
}

.bg-gray-index {
    height: 363px;
    background-color: #f7f7f7;
}

@media(max-width:992px) {
    .bg-gray-index {
        height: auto;
    }

    .mt-sm-3 {
        margin: 1.5rem;
    }
}

.province-slider {
    margin: auto;
    height: 330px;
    overflow: hidden;
    width: 100%;
}

.swiper-slide {
    background: #fff;
    border-radius: 8px;
    padding: 10px 20px 0 20px;
    text-align: center;
    /* height: auto !important; */
}

.item-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 13px;
    border-bottom: 1px dashed gray;
}

    .card-top .thumb {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .card-top .title {
        font-size: 13px;
        font-weight: 700;
        color: #1d2225;
        line-height: 1.2;
        margin: 0;
    }

.card-bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.meta-group {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

    .meta-group .icon {
        font-size: 14px;
        color: #a91c21;
    }

/* weblog */
.weblog-card {
    width: 100%;
    height: 220px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
    cursor: pointer;
    margin: 20px auto;
}

    .weblog-card:hover {
        transform: translateY(-8px);
    }

    .weblog-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        filter: grayscale(95%);
        transition: filter 0.4s ease;
    }

    .weblog-card:hover img {
        filter: grayscale(0%);
    }

.weblog-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

.weblog-card-title {
    font-size: 14px;
    /* font-weight: bold; */
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
}

.weblog-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #f1f1f1;
}

    .weblog-card-meta .views {
        display: flex;
        gap: 5px;
    }

        .weblog-card-meta .views .icon {
            font-size: 13px;
            color: #f1f1f1;
        }

    .weblog-card-meta .date {
        background-color: #c0191f;
        border-radius: 8px;
        padding: 4px 18px 4px 12px;
        margin-right: -16px;
    }

/* map */

.map-img {
    width: 410px;
    margin-top: -40px;
    object-fit: contain;
}

@media(max-width:992px) {
    .map-img {
        width: 270px;
        margin-top: 20px;
        object-fit: contain;
    }
}

.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

.highcharts-legend .highcharts-no-tooltip,
.highcharts-credits {
    display: none !important;
}

/* top footer */
.top-footer {
    background-color: #c0191f;
    color: white;
    position: relative;
    overflow: hidden;
}

.newsletter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0px;
    gap: 20px;
    position: relative;
}

.newsletter-title {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
}

.newsletter-input {
    position: relative;
    flex: 1;
    max-width: 350px;
}

    .newsletter-input input {
        width: 100%;
        padding: 12px 15px 12px 15px;
        border: 1px solid #ccc;
        border-radius: 8px;
        font-size: 14px;
        outline: none;
        transition: border 0.3s;
    }

        .newsletter-input input:focus {
            border-color: #d0282d;
            box-shadow: 0 0 4px rgba(208, 40, 45, 0.3);
        }

    .newsletter-input button {
        position: absolute;
        left: 5px;
        top: 50%;
        transform: translateY(-50%);
        padding: 8px 15px;
        background: #d0282d;
        border: none;
        border-radius: 6px;
        color: #fff;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.3s;
    }

        .newsletter-input button:hover {
            background: #a71e23;
        }

/* حالت موبایل */
@media (max-width: 768px) {
    .newsletter {
        flex-direction: column;
        text-align: center;
    }

    .newsletter-title {
        margin-bottom: 15px;
    }

    .newsletter-input {
        max-width: 100%;
    }
}

/* footer */
.footer-style {
    background-color: #141414;
    color: white;
}

.column1 h5,
.column3 h5 {
    font-size: 16px;
    margin-bottom: 18px;
    font-weight: bold;
}

.column1 ul li {
    margin-bottom: 8px;
}

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

    .column1 ul li a {
        color: rgb(205, 205, 205);
        list-style: none;
        font-size: 12px;
        transition: all 0.2s ease-in;
    }

        .column1 ul li a:hover {
            color: rgb(255, 255, 255);
        }

.column2 p {
    line-height: 29px;
    font-size: 12px;
    text-align: justify;
    color: rgb(239, 239, 239);
}

@media(min-width:768px) {
    .column3 {
        padding-right: 40px;
    }
}

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

.footer-social .icon {
    font-size: 21px;
    color: gray;
    transition: all 0.2s ease-in-out;
}

    .footer-social .icon:hover {
        transform: scale(1.1);
        color: rgb(249, 249, 249);
    }

.justify-c-start-between {
    justify-content: start;
}

@media(max-width:768px) {

    .column2,
    .column3 {
        margin-top: 35px;
    }

    .justify-c-start-between {
        justify-content: space-between;
    }
}

.features-grid {
    display: grid;
    grid-column: span 5 / span 5;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
    width: 80%;
}

.image-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 20%;
    background: #292929;
    border-radius: 12px;
    padding: 15px 12px;
    justify-content: space-around;
    align-items: center;
}

    .image-column img {
        object-fit: cover;
    }

.feature-box {
    background: #292929;
    border-radius: 12px;
    font-size: 12;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    padding: 15px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
}

    .feature-box i {
        font-size: 20px;
        color: #d0282d;
    }

    .feature-box span {
        font-weight: 500;
        font-size: 12px;
        color: white;
    }

/* .feature-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
} */

/* واکنش‌گرا */
@media (max-width: 900px) {
    .features-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}

.copyright {
    border-top: 1px dashed rgb(166, 166, 166);
    padding: 20px;
    color: white;
}

    .copyright div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
    }

/* aboutus */
.nav-style {
    background-color: rgb(255, 255, 255);
    padding: 1rem 1.75rem;
    border-radius: .5rem;
    box-shadow: 0px 4px 16px 0px hsla(0, 0%, 8%, .08);
}

@media (max-width:768px) {
    .nav-style {
        width: 95%;
        box-shadow: 0px 0px 8px 1px #9a9a9a4d;
    }

    .copyright div {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 20px 0;
    }
}

.nav-style .menu li a {
    color: black;
    font-size: 14px;
}

.nav-style .nav-submenu li a:hover {
    background: #a11e22;
    border-radius: 8px;
    color: white;
}

.nav-style .menu li a.active {
    font-weight: bold;
    color: #d0282d;
}

.nav-style .contact-text .label {
    color: black;
}

.nav-style .contact-box .icon {
    color: #4b4b4b;
}

.nav-style .contact-text .number {
    color: rgb(50, 50, 50);
}

.nav-style .hamburger {
    color: rgb(208 40 45);
}

.pages-link {
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    flex-wrap: wrap;
}

    .pages-link p,
    .pages-link a {
        color: rgba(4, 10, 31, 0.38);
        margin: 0 8px !important;
    }

    .pages-link .icon {
        font-size: 11px;
        color: rgba(4, 10, 31, 0.315);
    }

    .pages-link p.active {
        color: #a11e22;
    }

.aboutus-detail {
    text-align: justify;
    color: #4a4a4a;
    font-size: 14px;
    line-height: 32px;
}

/*  */
.video-section {
    border: 1px dashed #d0282d;
    border-radius: 12px;
    padding: 19px 0 2px 0;
    display: flex;
    width: 90%;
    justify-content: end;
    align-items: center;
    background: #fff;
}

.video-wrapper {
    position: relative;
    width: 500px;
    margin-left: -8px;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 15px -12px 0px rgb(208 40 45);
}

    .video-wrapper video {
        width: 100%;
        display: block;
        border-radius: 12px;
    }

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: #d0282d;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
    z-index: 2;
}

    .play-btn:hover {
        background: #a71e23;
        transform: translate(-50%, -50%) scale(1.1);
    }

.statistics {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    position: relative;
    padding: 0;
}

    .statistics::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        border-top: 2px dotted #ccc;
        z-index: 0;
    }

.statistics-item {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    width: 22%;
    padding: 25px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
    margin: 0px 0;
}

    .statistics-item:hover {
        transform: translateY(-5px);
    }

.statistics-icon {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d0282d;
    font-size: 24px;
}

    .statistics-icon::before {
        content: "";
        position: absolute;
        right: 8px;
        top: 4px;
        width: 20px;
        height: 40px;
        background: rgba(208, 40, 46, 0.055);
        border-radius: 6px;
        z-index: -1;
    }

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

.statistics-number {
    font-size: 18px;
    font-weight: 700;
    color: #474747;
    line-height: 1.3;
}

.statistics-title {
    font-size: 13px;
    color: #777;
}

.mt-md-5-sm-0 {
    margin-top: 3rem;
}

@media (max-width: 900px) {
    .statistics {
        flex-wrap: wrap;
        /* gap: 30px; */
    }

    .statistics-item {
        width: 45%;
    }

    .statistics::before {
        display: none;
    }

    .mt-md-5-sm-0 {
        margin-top: 0;
    }
}

@media (max-width: 600px) {
    .statistics {
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .statistics-item {
        width: 46%;
    }
}

@media (max-width: 768px) {
    .column-revers {
        flex-direction: column-reverse;
    }

    .play-btn {
        font-size: 18px;
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 330px) {
    .statistics-item {
        flex-direction: column;
    }
}

/* contact us */
.contact {
    display: flex;
    align-items: center;
    justify-content: center;
    /* gap: 30px; */
}

/* ستون سمت راست */
.contact-box2 {
    width: 65%;
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    padding: 30px 35px 30px 60px;
    position: relative;
    z-index: 1;
}

@media (max-width:768px) {
    .contact-box2 {
        width: 100%;
        padding: 20px;
    }

    .fd-sm-col {
        flex-direction: column;
    }
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #444;
}

    .contact-info-item i {
        color: #d0282d;
        font-size: 18px;
        width: 25px;
        text-align: center;
    }

/* فرم پایین */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

    .contact-form p {
        margin-bottom: 5px;
        color: #555;
        font-size: 15px;
    }

    .contact-form input,
    .contact-form textarea {
        width: 100%;
        border: none;
        border-radius: 10px;
        padding: 12px 14px;
        font-size: 14px;
        outline: none;
        background-color: #f7f7f7;
        transition: border 0.3s, box-shadow 0.3s;
    }

        .contact-form input:focus,
        .contact-form textarea:focus {
            border-color: #d0282d;
            box-shadow: 0 0 6px rgba(208, 40, 45, 0.25);
        }

.placeholder-rtl {
    direction: rtl;
    text-align: left;
}

    .placeholder-rtl::placeholder {
        text-align: right;
    }

.contact-form textarea {
    min-height: 120px;
    resize: vertical;
    position: relative;
    padding-bottom: 50px;
}

.send-btn {
    position: absolute;
    bottom: 15px;
    left: 25px;
    background: #d0282d;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s;
}

.send-btn2 {
    background: #d0282d;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 14px;
    cursor: pointer;
    float: left;
}

.send-btn:hover {
    background: #a71e23;
}

.contact-red-box {
    width: 35%;
    margin-right: -34px;
    /* background: #d0282d; */
    border: 1px dashed #a31e22;
    border-radius: .5rem;
    position: relative;
    z-index: 100;
    height: 290px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f7f7;
    padding: 8px;
}


@media (max-width: 768px) {
    .contact {
        flex-direction: column-reverse;
        align-items: center;
    }

    .contact-red-box {
        width: 100%;
        height: 250px;
        margin: 20px 0 !important;
    }

    .contact-box {
        width: 100%;
    }
}

/*  */
.post-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F7F7F7;
    border-radius: .5rem;
    padding: 15px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.post-info-title {
    font-weight: 600;
    font-size: 16px;
    color: #333;
}

.post-info-details {
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #8c8c8c;
}

.divider {
    width: 1px;
    height: 20px;
    border-left: 1px dashed #ccc;
}

@media (max-width:768px) {
    .post-info {
        flex-direction: column;
        justify-content: center;
        align-items: start;
        gap: 20px;
    }

    .post-info-title {
        font-size: 14px;
    }

    .info-item {
        font-size: 12px;
    }
}

.img-news {
    padding: 0;
}

    .img-news img {
        object-fit: cover;
        width: 100%;
        border-radius: 8px;
        /* height: 550px; */
    }
/* sidebar */
.sidebar-category,
.news-des-container,
.sidebar-tag {
    background: white;
    border-radius: .5rem;
    padding: 16px;
    box-shadow: 0 2px 20px rgb(0 0 0 / 14%);
    margin-bottom: 20px;
}

.ad {
    border-radius: .5rem;
    box-shadow: 0 2px 20px rgb(0 0 0 / 14%);
    overflow: hidden;
}

    .ad img {
        width: 100%;
    }

.news-des-container {
    line-height: 32px;
    padding: 2rem 1.25rem;
    color: #7A7A7A;
}

    .news-des-container p {
        font-size: 15px;
        text-align: justify;
        margin-top: 15px;
    }

        .news-des-container p a {
            color: #a91c21;
            text-decoration: none;
            font-size: 16px;
        }

    .news-des-container h2 {
        color: #222;
        font-size: 18px;
        font-weight: bold;
        margin-top: 20px;
        line-height: 30px;
    }

    .news-des-container .icon {
        color: #d0282d;
    }

.sidebar-category h5,
.sidebar-tag h5 {
    font-size: 14px;
    font-weight: bold;
    color: rgb(46, 46, 46);
    width: 100%;
    border-bottom: 1px dashed rgba(173, 173, 173, 0.582);
    padding: 10px 0;
}

.no-border {
    border: none !important;
}

.sidebar-tag {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

    .sidebar-tag .tag {
        width: fit-content;
        color: white;
        height: 25px;
        font-size: 12px;
        padding: 7px 12px;
        border-radius: .5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #d0282d;
        border: 1px solid #d0282d;
        font-weight: bold;
        transition: all 0.2s ease-in-out;
    }

        .sidebar-tag .tag:hover {
            background-color: transparent;
            color: #d0282d;
        }

.sidebar-title {
    color: #a91c21;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 4px;
}

    .sidebar-title span {
        color: #8A8A8A;
        font-size: 12px;
        margin-bottom: 0px;
    }

.sidebar-subtitle {
    color: #7A7A7A;
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: bold;
}

.sidebar-category .category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .sidebar-category .category-list li {
        border-bottom: 1px solid #f1f1f1;
    }

        .sidebar-category .category-list li:last-child {
            border-bottom: none;
        }

    .sidebar-category .category-list a {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 10px 0;
        text-decoration: none;
        color: #7A7A7A;
        transition: color 0.3s ease;
        font-size: 13px;
    }

        .sidebar-category .category-list a:hover {
            color: #a71e23;
        }

.sidebar-category .cat-number {
    display: inline-block;
    margin-left: 8px;
    min-width: 28px;
    color: #aaa;
    font-size: 12px;
    height: 28px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgb(186, 186, 186);
    transition: all 0.2s ease-in;
}

.sidebar-category .category-list a:hover .cat-number {
    color: #a71e23;
    border-color: #a71e23;
}

.sidebar-category-list2 {
    background: white;
    border-radius: .5rem;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 6px rgb(0 0 0 / 22%);
    margin-bottom: 12px;
}

    .sidebar-category-list2 img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: .5rem;
        flex-shrink: 0;
    }

    .sidebar-category-list2 a,
    .sidebar-category-list3 a {
        flex: 1;
        font-size: 12px;
        font-weight: bold;
        color: #575757;
        text-decoration: none;
        line-height: 1.6;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: color 0.3s;
        margin-bottom: 7px;
    }

        .sidebar-category-list2 a:hover {
            color: #000000;
        }

/*  */
.news-share {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px dashed #d0282d;
    padding: 15px 0;
    margin-top: 20px;
}

    .news-share .share-title {
        font-weight: 600;
        color: #333;
        font-size: 15px;
    }

    .news-share .share-icons {
        display: flex;
        gap: 12px;
    }

        .news-share .share-icons a {
            color: #555;
            font-size: 18px;
            transition: all 0.3s ease;
        }

            .news-share .share-icons a:hover {
                transform: scale(1.3);
                color: #d0282d;
            }

.comment-box {
    border-radius: 12px;
    overflow: hidden;
    background: white;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.replay {
    background: #f5f5f5;
    margin-right: 20px;
}

.comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background-color: #eeeeee;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.user-details {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-weight: bold;
    font-size: 15px;
    color: #222;
}

.user-role {
    font-size: 13px;
    color: #7A7A7A;
}

.comment-date {
    font-size: 13px;
    color: #7A7A7A;
}


.comment-body {
    margin-top: 12px;
    font-size: 15px;
    color: #7A7A7A;
    line-height: 1.6;
    padding: 0 16px 16px 16px;
}

.respons-btn {
    display: block;
    background-color: #c0191f;
    font-size: 12px;
    border-radius: .6rem;
    float: left;
    padding: 5px 12px;
    color: white;
    transition: all 0.2s ease-in-out;
}

    .respons-btn:hover {
        background-color: #9b1115;
        color: white;
    }

.comment-input {
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(71, 71, 71, 0.049);
    border: 1px solid #8888885c;
    padding: 10px 12px;
    font-size: 14px;
    width: 100%;
    transition: all 0.3s ease;
    background-color: white;
    color: #7A7A7A;
    height: 50px;
}

textarea {
    height: 190px !important;
}

.comment-input::placeholder {
    color: #8A8A8A;
    font-size: 13px;
}

.comment-input:focus {
    outline: none;
    border-color: #a11e22;
    background-color: white !important;
    box-shadow: 0 0 6px #a11e2255;
}

.w-fit-content {
    width: fit-content;
}

.text-size-controller {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 16px;
    border: 1px solid white;
    border-radius: 27px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    width: fit-content;
    background-color: white;
    color: #7A7A7A;
}

    .text-size-controller button {
        border: none;
        background: #6a5bcd;
        color: #fff;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        cursor: pointer;
        font-size: 18px;
        line-height: 1;
        transition: 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .text-size-controller button:hover {
            background: #5446b1;
        }

    .text-size-controller .label {
        font-size: 14px;
        color: #7A7A7A;
    }

.reply-title {
    padding: 0 12px;
    font-size: 15px;
    color: rgb(52, 52, 52);
}
/* all news page */
.search-input1 {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #ccc;
    padding: 8px 12px;
    width: 100%;
    max-width: 350px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

    .search-input1 .icon {
        color: #888;
        font-size: 16px;
    }

    .search-input1 .divider {
        height: 20px;
        border-left: 1px dashed #ccc;
        margin: 0 10px;
    }

    .search-input1 input {
        border: none;
        outline: none;
        flex: 1;
        font-size: 14px;
        color: #333;
        background: transparent;
    }

        .search-input1 input::placeholder {
            color: #aaa;
        }

.all-news-cadr-header {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.4s ease;
}

.sec1 {
    height: 320px;
}

@media(max-width:768px) {
    .sec1 {
        height: 220px;
    }
}

@media(min-width:999px) {
    .sec1 {
        height: 420px;
    }
}

.all-news-cadr-header .news-image {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    height: 100%;
}

.all-news-cadr-header img {
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
    object-fit: cover;
}

.all-news-cadr-header:hover img {
    transform: scale(1.05);
}

.news-tag {
    position: absolute;
    z-index: 1;
    top: 12px;
    right: 12px;
    background: #d0282d;
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 11.5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* بخش پایین تصویر با بک محو */
.news-info, .news-info2 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    background: linear-gradient(to top, rgb(0 0 0 / 91%), rgb(0 0 0 / 1%));
    color: #fff;
    display: flex;
    justify-content: space-between;
    /* align-items: flex-start; */
    flex-direction: column;
}

    .news-info h3 {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.5;
        margin: 0;
        flex: 1;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: white;
    }

    .news-info2 a h3 {
        font-size: 13px;
        font-weight: 500;
        line-height: 1.5;
        margin: 0;
        flex: 1;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        color: white;
    }

.icon-box2, .icon-box3 {
    width: 28px;
    height: 28px;
    background: #d0282d;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    margin-left: 3px;
    flex-shrink: 0;
    float: left;
}

.icon-box3 {
    width: 18px;
    height: 18px;
}

.icon-box2 .icon {
    color: #fff;
    font-size: 15px;
}

.icon-box3 .icon {
    color: #fff;
    font-size: 12px !important;
}

@media (max-width:768px) {
    .sec2 {
        height: 180px !important;
        margin-top: 12px;
    }

    .sec3 {
        height: 120px !important;
    }

    .pl-sm-0 {
        padding-left: 2px !important;
    }

    .pr-sm-0 {
        padding-right: 2px !important;
    }

    .news-tag {
        font-size: 9px;
    }
}

.section4-card-new {
    margin: 0 auto 20px;
}

.pagination {
    display: flex;
    list-style: none;
    gap: 8px;
}

    .pagination li {
        display: inline-block;
    }

    .pagination a {
        display: block;
        padding: 8px 14px;
        border-radius: 6px;
        background: rgb(255, 255, 255);
        color: #818181;
        border: 1px solid #f5f5f5;
        text-decoration: none;
        transition: all 0.3s;
    }

    .pagination .prev a,
    .pagination .next a {
        background: transparent;
        color: #d0282d;
    }

        .pagination .prev a.pass,
        .pagination .next a.pass {
            background: transparent;
            color: #8A8A8A;
        }

            .pagination .prev a.pass:hover,
            .pagination .next a.pass:hover {
                background: transparent;
                color: #8A8A8A;
                cursor: default;
            }

    .pagination a:hover {
        background: #eee;
        color: #000;
    }

    .pagination .prev a:hover,
    .pagination .next a:hover {
        background: transparent;
        color: #695ac1;
    }

    .pagination a.active {
        background: #a91c21;
        color: #fff;
        border-color: #a91c21;
    }

    .pagination a.disabled {
        color: #aaa;
        cursor: not-allowed;
    }