شما درست می‌گویید. من باید استانداردهای نامگذاری و رنگ‌بندی شما را رعایت می‌کردم. اجازه دهید صفحه اخبار را با استانداردهای شما بازنویسی کنم:

        
        html
        
    
  
      <!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="description" content="اخبار ستاد بازسازی عتبات عالیات - آخرین اخبار پروژه‌های بازسازی و توسعه حرمین شریفین">
 <meta name="author" content="Fateh">
 <title>اخبار ستاد بازسازی عتبات عالیات</title>
 <link rel="icon" href="/Assets/SiteTheme/img/fav.png">

 <!-- Font Awesome -->
 <link rel="stylesheet" href="/assets/font/fontawesome-free-6.1.1-web/css/all.min.css">
 <!-- Custom Fonts -->
 <link href="/assets/font/vazirmatn/font-face.css" rel="stylesheet">

 <!-- Bootstrap CSS -->
 <link href="/assets/lib/bootstrap/css/bootstrap.rtl.min.css" rel="stylesheet">

 <link href="/assets/css/style.css" rel="stylesheet">
 
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

</head>
<body>

 <!-- هدر اصلی -->
 <header class="header_wrapper">
 <div class="header_container">
 <!-- نوار بالایی -->
 <div class="header_top-bar">
 <div class="content-container d-flex flex-wrap justify-content-between align-items-center header_top-section">
 <!-- تاریخ و زمان -->
 <div class="header_info d-flex flex-wrap align-items-center">
 <div class="header_date me-4">
 <i class="fa-regular fa-calendar header_icon"></i>
 <span class="header_date-text">چهارشنبه ۱۸ تیر ۱۴۰۴ | ۱۳ محرم ۱۴۴۷</span>
 </div>

 </div>
 
 <!-- زمان -->
 <div class="header_actions d-flex align-items-center">
 <div class="header_time">
 <i class="fa-regular fa-clock header_icon"></i>
 <span class="header_time-text">۱۳:۰۰</span>
 </div>
 </div>
 </div>
 </div>
 
 <!-- لوگو و شعار -->
 <div class="header_brand-section">
 <div class="content-container">
 <div class="header_brand-content d-flex flex-column align-items-center text-center">
 <a href="index.html" class="header_logo">
 <img src="" alt="عتبات عالیات" class="img-fluid">
 </a>
 <div class="header_slogan mt-3">
 <h1 class="header_title">ستاد بازسازی عتبات عالیات</h1>
 <p class="header_subtitle">خدمت به اهل بیت علیهم السلام افتخار ماست</p>
 </div>
 </div>
 </div>
 </div>
 
 <!-- منو اصلی - با دکمه جستجو در سمت چپ -->
 <nav class="navbar navbar-expand-lg header_navbar">
 <div class="content-container">
 <button class="navbar-toggler header_navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
 <i class="fa-solid fa-bars"></i>
 <span>منوی سایت</span>
 </button>
 
 <div class="collapse navbar-collapse header_navbar-collapse" id="mainNavbar">
 <ul class="navbar-nav header_nav">
 <li class="nav-item header_nav-item">
 <a class="nav-link header_nav-link" href="index.html">
 <i class="fa-solid fa-house header_nav-icon"></i>
 <span>صفحه نخست</span>
 </a>
 </li>
 <li class="nav-item header_nav-item">
 <a class="nav-link header_nav-link active" href="#" aria-current="page">
 <i class="fa-regular fa-newspaper header_nav-icon"></i>
 <span>اخبار</span>
 </a>
 </li>
 <li class="nav-item dropdown header_nav-item">
 <a class="nav-link dropdown-toggle header_nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
 <i class="fa-solid fa-building header_nav-icon"></i>
 <span>پروژه ها</span>
 </a>
 <ul class="dropdown-menu header_dropdown">
 <li><a class="dropdown-item header_dropdown-item" href="#">پروژه های جاری</a></li>
 <li><a class="dropdown-item header_dropdown-item" href="#">پروژه های تکمیل شده</a></li>
 <li><a class="dropdown-item header_dropdown-item" href="#">پروژه های آینده</a></li>
 </ul>
 </li>
 <li class="nav-item dropdown header_nav-item">
 <a class="nav-link dropdown-toggle header_nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
 <i class="fa-solid fa-images header_nav-icon"></i>
 <span>گالری</span>
 </a>
 <ul class="dropdown-menu header_dropdown">
 <li><a class="dropdown-item header_dropdown-item" href="#">تصاویر</a></li>
 <li><a class="dropdown-item header_dropdown-item" href="#">ویدیوها</a></li>
 </ul>
 </li>
 <li class="nav-item dropdown header_nav-item">
 <a class="nav-link dropdown-toggle header_nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
 <i class="fa-solid fa-map-location-dot header_nav-icon"></i>
 <span>شهرستان ها</span>
 </a>
 <ul class="dropdown-menu header_dropdown">
 <li><a class="dropdown-item header_dropdown-item" href="#">تهران</a></li>
 <li><a class="dropdown-item header_dropdown-item" href="#">مشهد</a></li>
 <li><a class="dropdown-item header_dropdown-item" href="#">قم</a></li>
 <li><a class="dropdown-item header_dropdown-item" href="#">اصفهان</a></li>
 <li><a class="dropdown-item header_dropdown-item" href="#">شیراز</a></li>
 </ul>
 </li>
 <li class="nav-item header_nav-item">
 <a class="nav-link header_nav-link" href="#">
 <i class="fa-solid fa-circle-info header_nav-icon"></i>
 <span>راهنمای خیرین</span>
 </a>
 </li>
 <li class="nav-item header_nav-item">
 <a class="nav-link header_nav-link" href="#">
 <i class="fa-solid fa-users header_nav-icon"></i>
 <span>سامانه خادمان</span>
 </a>
 </li>
 </ul>
 
 <!-- دکمه جستجو در منو و فرم جستجو -->
 <div class="header_navbar-search">
 <div class="header_navbar-search-form" id="navbarSearchForm">
 <input type="search" class="header_navbar-search-input" placeholder="جستجو در سایت..." aria-label="جستجو">
 <button type="submit" class="header_navbar-search-submit">
 <i class="fa-solid fa-magnifying-glass"></i>
 </button>
 </div>
 <button class="header_navbar-search-btn" type="button" id="navbarSearchToggle">
 <i class="fa-solid fa-magnifying-glass"></i>
 </button>
 </div>
 </div>
 </div>
 </nav>
 </div>
 </header>
 
 <!-- نوار پایین موبایل -->
 <div class="bottom-nav d-md-none">
 <div class="content-container">
 <div class="row">
 <div class="col">
 <a href="index.html">
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
 <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="currentColor"/>
 </svg>
 <div>صفحه نخست</div>
 </a>
 </div>
 <div class="col">
 <a href="#" class="active">
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
 <path d="M20 3H4c-1.1 0-1.99.9-1.99 2L2 19c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H4v-2h11v2zm0-4H4v-2h11v2zm5-4h-5V7h5v2z" fill="currentColor"/>
 </svg>
 <div>اخبار</div>
 </a>
 </div>
 <div class="col">
 <a href="#">
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
 <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="currentColor"/>
 </svg>
 <div>تماس با ما</div>
 </a>
 </div>
 </div>
 </div>
 </div> 

 <!-- بخش عنوان صفحه -->
 <section class="page_title">
 <div class="page_title-bg" style="background-image: url('/Assets/SiteTheme/img/news-header-bg.jpg');">
 <div class="page_title-overlay"></div>
 <div class="container">
 <div class="page_title-content">
 <h1 class="page_title-heading">اخبار و رویدادها</h1>
 <nav aria-label="breadcrumb">
 <ol class="breadcrumb">
 <li class="breadcrumb-item"><a href="index.html">صفحه نخست</a></li>
 <li class="breadcrumb-item active" aria-current="page">اخبار</li>
 </ol>
 </nav>
 </div>
 </div>
 </div>
 </section>

 <!-- بخش اصلی صفحه اخبار -->
 <section class="news_page">
 <div class="container">
 <div class="row">
 <!-- ستون اصلی اخبار -->
 <div class="col-lg-8">
 <!-- فیلتر و جستجوی اخبار -->
 <div class="news_filter">
 <div class="row align-items-center">
 <div class="col-md-6">
 <div class="news_filter-tabs">
 <ul class="nav nav-pills" id="newsFilterTabs" role="tablist">
 <li class="nav-item" role="presentation">
 <button class="nav-link active" id="all-news-tab" data-bs-toggle="pill" data-bs-target="#all-news" type="button" role="tab" aria-controls="all-news" aria-selected="true">همه اخبار</button>
 </li>
 <li class="nav-item" role="presentation">
 <button class="nav-link" id="featured-tab" data-bs-toggle="pill" data-bs-target="#featured" type="button" role="tab" aria-controls="featured" aria-selected="false">اخبار ویژه</button>
 </li>
 </ul>
 </div>
 </div>
 <div class="col-md-6">
 <div class="news_search">
 <form class="news_search-form">
 <div class="input-group">
 <input type="text" class="form-control" placeholder="جستجو در اخبار..." aria-label="جستجو در اخبار">
 <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i></button>
 </div>
 </form>
 </div>
 </div>
 </div>
 </div>

 <!-- لیست اخبار -->
 <div class="tab-content" id="newsFilterTabsContent">
 <!-- همه اخبار -->
 <div class="tab-pane fade show active" id="all-news" role="tabpanel" aria-labelledby="all-news-tab">
 <div class="news_list">
 <!-- خبر 1 -->
 <div class="news_item">
 <div class="row">
 <div class="col-md-5">
 <div class="news_image">
 <a href="news-detail.html">
 <img src="/Assets/SiteTheme/img/kh2.jpg" alt="پیشرفت 75 درصدی ساخت صحن حضرت زینب (س) در کربلا" class="img-fluid">
 <div class="news_category">
 <span><i class="fa-solid fa-screwdriver-wrench"></i> پروژه های عمرانی</span>
 </div>
 </a>
 </div>
 </div>
 <div class="col-md-7">
 <div class="news_content">
 <div class="news_meta">
 <span class="news_date"><i class="fa-regular fa-calendar"></i> ۱۸ تیر ۱۴۰۴</span>
 <span class="news_views"><i class="fa-regular fa-eye"></i> ۱۲۵۶ بازدید</span>
 </div>
 <h3 class="news_title">
 <a href="news-detail.html">پیشرفت 75 درصدی ساخت صحن حضرت زینب (س) در کربلا</a>
 </h3>
 <p class="news_excerpt">
 رئیس ستاد بازسازی عتبات عالیات از پیشرفت ۷۵ درصدی ساخت صحن حضرت زینب (س) در کربلا خبر داد و گفت: این پروژه یکی از بزرگترین پروژه‌های توسعه‌ای حرم مطهر امام حسین (ع) است که با همت خیرین ایرانی در حال اجراست.
 </p>
 <div class="news_more">
 <a href="news-detail.html" class="btn btn-outline-primary">ادامه مطلب <i class="fa-solid fa-arrow-left"></i></a>
 </div>
 </div>
 </div>
 </div>
 </div>

 <!-- خبر 2 -->
 <div class="news_item">
 <div class="row">
 <div class="col-md-5">
 <div class="news_image">
 <a href="news-detail.html">
 <img src="/Assets/SiteTheme/img/kh4.jpg" alt="اجرای 190 پروژه بازسازی و توسعه‌ای در عتبات" class="img-fluid">
 <div class="news_category">
 <span><i class="fa-solid fa-building"></i> پروژه های توسعه‌ای</span>
 </div>
 </a>
 </div>
 </div>
 <div class="col-md-7">
 <div class="news_content">
 <div class="news_meta">
 <span class="news_date"><i class="fa-regular fa-calendar"></i> ۱۶ تیر ۱۴۰۴</span>
 <span class="news_views"><i class="fa-regular fa-eye"></i> ۹۸۵ بازدید</span>
 </div>
 <h3 class="news_title">
 <a href="news-detail.html">اجرای 190 پروژه بازسازی و توسعه‌ای در عتبات طی دو دهه اخیر</a>
 </h3>
 <p class="news_excerpt">
 معاون اجرایی ستاد بازسازی عتبات عالیات گفت: طی دو دهه اخیر، ۱۹۰ پروژه بازسازی و توسعه‌ای در حرم‌های مطهر عراق اجرا شده است که بیش از ۷۰ درصد آن با مشارکت مردمی و خیرین ایرانی انجام شده است.
 </p>
 <div class="news_more">
 <a href="news-detail.html" class="btn btn-outline-primary">ادامه مطلب <i class="fa-solid fa-arrow-left"></i></a>
 </div>
 </div>
 </div>
 </div>
 </div>

 <!-- خبر 3 -->
 <div class="news_item news_item-featured">
 <div class="news_featured-badge"><i class="fa-solid fa-star"></i> خبر ویژه</div>
 <div class="row">
 <div class="col-md-5">
 <div class="news_image">
 <a href="news-detail.html">
 <img src="/Assets/SiteTheme/img/kh3.jpg" alt="تدارک 3 هزار موکب ایرانی برای اربعین" class="img-fluid">
 <div class="news_category">
 <span><i class="fa-solid fa-people-roof"></i> اربعین حسینی</span>
 </div>
 </a>
 </div>
 </div>
 <div class="col-md-7">
 <div class="news_content">
 <div class="news_meta">
 <span class="news_date"><i class="fa-regular fa-calendar"></i> ۱۵ تیر ۱۴۰۴</span>
 <span class="news_views"><i class="fa-regular fa-eye"></i> ۲۵۶۰ بازدید</span>
 </div>
 <h3 class="news_title">
 <a href="news-detail.html">تدارک 3 هزار موکب ایرانی برای اربعین 1404</a>
 </h3>
 <p class="news_excerpt">
 رئیس کمیته موکب‌های ستاد مرکزی اربعین اعلام کرد: برای مراسم اربعین امسال، تدارک ۳ هزار موکب ایرانی در مسیرهای منتهی به کربلای معلی دیده شده است که با همکاری ستاد بازسازی عتبات عالیات و خیرین به زائران خدمات‌رسانی خواهند کرد.
 </p>
 <div class="news_more">
 <a href="news-detail.html" class="btn btn-outline-primary">ادامه مطلب <i class="fa-solid fa-arrow-left"></i></a>
 </div>
 </div>
 </div>
 </div>
 </div>

 <!-- خبر 4 -->
 <div class="news_item">
 <div class="row">
 <div class="col-md-5">
 <div class="news_image">
 <a href="news-detail.html">
 <img src="/Assets/SiteTheme/img/200khadem.jpg" alt="ساماندهی 200 هزار خادم افتخاری" class="img-fluid">
 <div class="news_category">
 <span><i class="fa-solid fa-hands-helping"></i> خادمان افتخاری</span>
 </div>
 </a>
 </div>
 </div>
 <div class="col-md-7">
 <div class="news_content">
 <div class="news_meta">
 <span class="news_date"><i class="fa-regular fa-calendar"></i> ۱۴ تیر ۱۴۰۴</span>
 <span class="news_views"><i class="fa-regular fa-eye"></i> ۸۷۵ بازدید</span>
 </div>
 <h3 class="news_title">
 <a href="news-detail.html">ساماندهی 200 هزار خادم افتخاری برای خدمت به زائران اربعین</a>
 </h3>
 <p class="news_excerpt">
 مسئول سامانه خادمین افتخاری ستاد بازسازی عتبات عالیات از ساماندهی ۲۰۰ هزار خادم افتخاری برای خدمت‌رسانی به زائران اربعین حسینی خبر داد و گفت: ثبت‌نام در سامانه خادمین افتخاری از ابتدای مرداد ماه آغاز می‌شود.
 </p>
 <div class="news_more">
 <a href="news-detail.html" class="btn btn-outline-primary">ادامه مطلب <i class="fa-solid fa-arrow-left"></i></a>
 </div>
 </div>
 </div>
 </div>
 </div>

 <!-- خبر 5 -->
 <div class="news_item">
 <div class="row">
 <div class="col-md-5">
 <div class="news_image">
 <a href="news-detail.html">
 <img src="/Assets/SiteTheme/img/kh6.jpg" alt="آیین افتتاح صحن حضرت زهرا" class="img-fluid">
 <div class="news_category">
 <span><i class="fa-solid fa-mosque"></i> افتتاح پروژه</span>
 </div>
 </a>
 </div>
 </div>
 <div class="col-md-7">
 <div class="news_content">
 <div class="news_meta">
 <span class="news_date"><i class="fa-regular fa-calendar"></i> ۱۲ تیر ۱۴۰۴</span>
 <span class="news_views"><i class="fa-regular fa-eye"></i> ۱۳۲۰ بازدید</span>
 </div>
 <h3 class="news_title">
 <a href="news-detail.html">آیین افتتاح صحن حضرت زهرا (س) در نجف اشرف</a>
 </h3>
 <p class="news_excerpt">
 صحن حضرت زهرا (س) در حرم مطهر امیرالمؤمنین (ع) در نجف اشرف با حضور مقامات ایرانی و عراقی افتتاح شد. این پروژه بزرگ که با همت ستاد بازسازی عتبات عالیات و مشارکت مردمی اجرا شده، ظرفیت پذیرش زائران را به میزان قابل توجهی افزایش می‌دهد.
 </p>
 <div class="news_more">
 <a href="news-detail.html" class="btn btn-outline-primary">ادامه مطلب <i class="fa-solid fa-arrow-left"></i></a>
 </div>
 </div>
 </div>
 </div>
 </div>

 <!-- خبر 6 -->
 <div class="news_item news_item-featured">
 <div class="news_featured-badge"><i class="fa-solid fa-star"></i> خبر ویژه</div>
 <div class="row">
 <div class="col-md-5">
 <div class="news_image">
 <a href="news-detail.html">
 <img src="/Assets/SiteTheme/img/kh5.jpg" alt="مشارکت در بازسازی عتبات" class="img-fluid">
 <div class="news_category">
 <span><i class="fa-solid fa-hand-holding-heart"></i> مشارکت مردمی</span>
 </div>
 </a>
 </div>
 </div>
 <div class="col-md-7">
 <div class="news_content">
 <div class="news_meta">
 <span class="news_date"><i class="fa-regular fa-calendar"></i> ۱۰ تیر ۱۴۰۴</span>
 <span class="news_views"><i class="fa-regular fa-eye"></i> ۱۷۵۰ بازدید</span>
 </div>
 <h3 class="news_title">
 <a href="news-detail.html">مشارکت 5 میلیون ایرانی در بازسازی عتبات عالیات</a>
 </h3>
 <p class="news_excerpt">
 دبیر ستاد بازسازی عتبات عالیات اعلام کرد: تاکنون بیش از ۵ میلیون نفر از هموطنان در طرح‌های بازسازی و توسعه عتبات عالیات مشارکت داشته‌اند که این مشارکت‌ها از نذورات خرد گرفته تا کمک‌های کلان را شامل می‌شود.
 </p>
 <div class="news_more">
 <a href="news-detail.html" class="btn btn-outline-primary">ادامه مطلب <i class="fa-solid fa-arrow-left"></i></a>
 </div>
 </div>
 </div>
 </div>
 </div>

 <!-- خبر 7 -->
 <div class="news_item">
 <div class="row">
 <div class="col-md-5">
 <div class="news_image">
 <a href="news-detail.html">
 <img src="/Assets/SiteTheme/img/news-7.jpg" alt="اعزام گروه‌های جهادی" class="img-fluid">
 <div class="news_category">
 <span><i class="fa-solid fa-people-carry-box"></i> اقدامات جهادی</span>
 </div>
 </a>
 </div>
 </div>
 <div class="col-md-7">
 <div class="news_content">
 <div class="news_meta">
 <span class="news_date"><i class="fa-regular fa-calendar"></i> ۸ تیر ۱۴۰۴</span>
 <span class="news_views"><i class="fa-regular fa-eye"></i> ۷۸۰ بازدید</span>
 </div>
 <h3 class="news_title">
 <a href="news-detail.html">اعزام گروه‌های جهادی برای مشارکت در پروژه‌های توسعه حرم امام حسین (ع)</a>
 </h3>
 <p class="news_excerpt">
 مسئول سامانه جهادگران ستاد بازسازی عتبات عالیات از اعزام ۵۰ گروه جهادی متشکل از متخصصان و صنعتگران برای مشارکت در پروژه‌های توسعه حرم مطهر امام حسین (ع) خبر داد و گفت: این گروه‌ها در قالب دوره‌های ۱۵ روزه اعزام می‌شوند.
 </p>
 <div class="news_more">
 <a href="news-detail.html" class="btn btn-outline-primary">ادامه مطلب <i class="fa-solid fa-arrow-left"></i></a>
 </div>
 </div>
 </div>
 </div>
 </div>

 <!-- خبر 8 -->
 <div class="news_item">
 <div class="row">
 <div class="col-md-5">
 <div class="news_image">
 <a href="news-detail.html">
 <img src="/Assets/SiteTheme/img/news-8.jpg" alt="راه‌اندازی سامانه نائب الزیاره" class="img-fluid">
 <div class="news_category">
 <span><i class="fa-solid fa-person-praying"></i> نائب الزیاره</span>
 </div>
 </a>
 </div>
 </div>
 <div class="col-md-7">
 <div class="news_content">
 <div class="news_meta">
 <span class="news_date"><i class="fa-regular fa-calendar"></i> ۶ تیر ۱۴۰۴</span>
 <span class="news_views"><i class="fa-regular fa-eye"></i> ۹۱۰ بازدید</span>
 </div>
 <h3 class="news_title">
 <a href="news-detail.html">راه‌اندازی سامانه نائب الزیاره برای زیارت از راه دور حرمین شریفین</a>
 </h3>
 <p class="news_excerpt">
 ستاد بازسازی عتبات عالیات از راه‌اندازی سامانه نائب الزیاره برای زیارت از راه دور حرمین شریفین خبر داد. در این سامانه، افرادی که امکان سفر به عتبات عالیات را ندارند، می‌توانند درخواست زیارت نیابتی کنند و خادمان حرم به نیابت از آن‌ها زیارت می‌کنند.
 </p>
 <div class="news_more">
 <a href="news-detail.html" class="btn btn-outline-primary">ادامه مطلب <i class="fa-solid fa-arrow-left"></i></a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>

 <!-- پاگینیشن -->
 <div class="news_pagination">
 <nav aria-label="صفحه‌بندی اخبار">
 <ul class="pagination justify-content-center">
 <li class="page-item disabled">
 <a class="page-link" href="#" aria-label="قبلی">
 <i class="fa-solid fa-chevron-right"></i>
 </a>
 </li>
 <li class="page-item active"><a class="page-link" href="#">1</a></li>
 <li class="page-item"><a class="page-link" href="#">2</a></li>
 <li class="page-item"><a class="page-link" href="#">3</a></li>
 <li class="page-item">
 <a class="page-link" href="#" aria-label="بعدی">
 <i class="fa-solid fa-chevron-left"></i>
 </a>
 </li>
 </ul>
 </nav>
 </div>
 </div>

 <!-- اخبار ویژه -->
 <div class="tab-pane fade" id="featured" role="tabpanel" aria-labelledby="featured-tab">
 <div class="news_list">
 <!-- خبر ویژه 1 -->
 <div class="news_item news_item-featured">
 <div class="news_featured-badge"><i class="fa-solid fa-star"></i> خبر ویژه</div>
 <div class="row">
 <div class="col-md-5">
 <div class="news_image">
 <a href="news-detail.html">
 <img src="/Assets/SiteTheme/img/kh3.jpg" alt="تدارک 3 هزار موکب ایرانی برای اربعین" class="img-fluid">
 <div class="news_category">
 <span><i class="fa-solid fa-people-roof"></i> اربعین حسینی</span>
 </div>
 </a>
 </div>
 </div>
 <div class="col-md-7">
 <div class="news_content">
 <div class="news_meta">
 <span class="news_date"><i class="fa-regular fa-calendar"></i> ۱۵ تیر ۱۴۰۴</span>
 <span class="news_views"><i class="fa-regular fa-eye"></i> ۲۵۶۰ بازدید</span>
 </div>
 <h3 class="news_title">
 <a href="news-detail.html">تدارک 3 هزار موکب ایرانی برای اربعین 1404</a>
 </h3>
 <p class="news_excerpt">
 رئیس کمیته موکب‌های ستاد مرکزی اربعین اعلام کرد: برای مراسم اربعین امسال، تدارک ۳ هزار موکب ایرانی در مسیرهای منتهی به کربلای معلی دیده شده است که با همکاری ستاد بازسازی عتبات عالیات و خیرین به زائران خدمات‌رسانی خواهند کرد.
 </p>
 <div class="news_more">
 <a href="news-detail.html" class="btn btn-outline-primary">ادامه مطلب <i class="fa-solid fa-arrow-left"></i></a>
 </div>
 </div>
 </div>
 </div>
 </div>

 <!-- خبر ویژه 2 -->
 <div class="news_item news_item-featured">
 <div class="news_featured-badge"><i class="fa-solid fa-star"></i> خبر ویژه</div>
 <div class="row">
 <div class="col-md-5">
 <div class="news_image">
 <a href="news-detail.html">
 <img src="/Assets/SiteTheme/img/kh5.jpg" alt="مشارکت در بازسازی عتبات" class="img-fluid">
 <div class="news_category">
 <span><i class="fa-solid fa-hand-holding-heart"></i> مشارکت مردمی</span>
 </div>
 </a>
 </div>
 </div>
 <div class="col-md-7">
 <div class="news_content">
 <div class="news_meta">
 <span class="news_date"><i class="fa-regular fa-calendar"></i> ۱۰ تیر ۱۴۰۴</span>
 <span class="news_views"><i class="fa-regular fa-eye"></i> ۱۷۵۰ بازدید</span>
 </div>
 <h3 class="news_title">
 <a href="news-detail.html">مشارکت 5 میلیون ایرانی در بازسازی عتبات عالیات</a>
 </h3>
 <p class="news_excerpt">
 دبیر ستاد بازسازی عتبات عالیات اعلام کرد: تاکنون بیش از ۵ میلیون نفر از هموطنان در طرح‌های بازسازی و توسعه عتبات عالیات مشارکت داشته‌اند که این مشارکت‌ها از نذورات خرد گرفته تا کمک‌های کلان را شامل می‌شود.
 </p>
 <div class="news_more">
 <a href="news-detail.html" class="btn btn-outline-primary">ادامه مطلب <i class="fa-solid fa-arrow-left"></i></a>
 </div>
 </div>
 </div>
 </div>
 </div>

 <!-- خبر ویژه 3 -->
 <div class="news_item news_item-featured">
 <div class="news_featured-badge"><i class="fa-solid fa-star"></i> خبر ویژه</div>
 <div class="row">
 <div class="col-md-5">
 <div class="news_image">
 <a href="news-detail.html">
 <img src="/Assets/SiteTheme/img/featured-news-3.jpg" alt="رونمایی از ضریح جدید" class="img-fluid">
 <div class="news_category">
 <span><i class="fa-solid fa-gem"></i> پروژه های هنری</span>
 </div>
 </a>
 </div>
 </div>
 <div class="col-md-7">
 <div class="news_content">
 <div class="news_meta">
 <span class="news_date"><i class="fa-regular fa-calendar"></i> ۲ تیر ۱۴۰۴</span>
 <span class="news_views"><i class="fa-regular fa-eye"></i> ۳۱۲۰ بازدید</span>
 </div>
 <h3 class="news_title">
 <a href="news-detail.html">رونمایی از ضریح جدید حرم حضرت عباس (ع) با حضور مقامات ایرانی و عراقی</a>
 </h3>
 <p class="news_excerpt">
 آیین رونمایی از ضریح جدید حرم مطهر حضرت ابوالفضل العباس (ع) که به دست هنرمندان ایرانی ساخته شده، با حضور مقامات ایرانی و عراقی برگزار شد. این ضریح مطهر با بیش از ۵ سال کار مداوم و با استفاده از طلا، نقره و سنگ‌های قیمتی ساخته شده است.
 </p>
 <div class="news_more">
 <a href="news-detail.html" class="btn btn-outline-primary">ادامه مطلب <i class="fa-solid fa-arrow-left"></i></a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>

 <!-- پاگینیشن -->
 <div class="news_pagination">
 <nav aria-label="صفحه‌بندی اخبار ویژه">
 <ul class="pagination justify-content-center">
 <li class="page-item disabled">
 <a class="page-link" href="#" aria-label="قبلی">
 <i class="fa-solid fa-chevron-right"></i>
 </a>
 </li>
 <li class="page-item active"><a class="page-link" href="#">1</a></li>
 <li class="page-item"><a class="page-link" href="#">2</a></li>
 <li class="page-item">
 <a class="page-link" href="#" aria-label="بعدی">
 <i class="fa-solid fa-chevron-left"></i>
 </a>
 </li>
 </ul>
 </nav>
 </div>
 </div>
 </div>
 </div>

 <!-- ستون سایدبار -->
 <div class="col-lg-4">
 <!-- دسته‌بندی اخبار -->
 <div class="sidebar_widget news_categories-widget">
 <h3 class="sidebar_widget-title">
 <i class="fa-solid fa-folder-open"></i>
 <span>دسته‌بندی اخبار</span>
 </h3>
 <div class="sidebar_widget-content">
 <ul class="news_categories-sidebar">
 <li class="news_category-item">
 <a href="#" class="news_category-link active">
 <div class="news_category-icon">
 <img src="/Assets/SiteTheme/img/20942.jpg" alt="پویش های حرم">
 </div>
 <span class="news_category-text">پویش های حرم</span>
 <span class="news_category-count">24</span>
 </a>
 </li>
 <li class="news_category-item">
 <a href="#" class="news_category-link">
 <div class="news_category-icon">
 <img src="/Assets/SiteTheme/img/20942.jpg" alt="مراسمات و مناسبت ها">
 </div>
 <span class="news_category-text">مراسمات و مناسبت ها</span>
 <span class="news_category-count">36</span>
 </a>
 </li>
 <li class="news_category-item">
 <a href="#" class="news_category-link">
 <div class="news_category-icon">
 <img src="/Assets/SiteTheme/img/20942.jpg" alt="نائب الزیاره ها">
 </div>
 <span class="news_category-text">نائب الزیاره ها</span>
 <span class="news_category-count">18</span>
 </a>
 </li>
 <li class="news_category-item">
 <a href="#" class="news_category-link">
 <div class="news_category-icon">
 <img src="/Assets/SiteTheme/img/20942.jpg" alt="خادمان افتخاری">
 </div>
 <span class="news_category-text">خادمان افتخاری</span>
 <span class="news_category-count">29</span>
 </a>
 </li>
 <li class="news_category-item">
 <a href="#" class="news_category-link">
 <div class="news_category-icon">
 <img src="/Assets/SiteTheme/img/20942.jpg" alt="سامانه نذورات">
 </div>
 <span class="news_category-text">سامانه نذورات</span>
 <span class="news_category-count">15</span>
 </a>
 </li>
 <li class="news_category-item">
 <a href="#" class="news_category-link">
 <div class="news_category-icon">
 <img src="/Assets/SiteTheme/img/20942.jpg" alt="اخبار ستاد مرکزی">
 </div>
 <span class="news_category-text">اخبار ستاد مرکزی</span>
 <span class="news_category-count">42</span>
 </a>
 </li>
 <li class="news_category-item">
 <a href="#" class="news_category-link">
 <div class="news_category-icon">
 <img src="/Assets/SiteTheme/img/20942.jpg" alt="سامانه جهادگران">
 </div>
 <span class="news_category-text">سامانه جهادگران</span>
 <span class="news_category-count">17</span>
 </a>
 </li>
 <li class="news_category-item">
 <a href="#" class="news_category-link">
 <div class="news_category-icon">
 <img src="/Assets/SiteTheme/img/20942.jpg" alt="اقدامات جهادی">
 </div>
 <span class="news_category-text">اقدامات جهادی</span>
 <span class="news_category-count">23</span>
 </a>
 </li>
 </ul>
 </div>
 </div>

 <!-- اخبار پربازدید -->
 <div class="sidebar_widget popular_news-widget">
 <h3 class="sidebar_widget-title">
 <i class="fa-solid fa-chart-line"></i>
 <span>اخبار پربازدید</span>
 </h3>
 <div class="sidebar_widget-content">
 <div class="popular_news-list">
 <!-- خبر پربازدید 1 -->
 <div class="popular_news-item">
 <div class="popular_news-image">
 <a href="news-detail.html">
 <img src="/Assets/SiteTheme/img/kh3.jpg" alt="تدارک 3 هزار موکب ایرانی برای اربعین" class="img-fluid">
 </a>
 </div>
 <div class="popular_news-content">
 <div class="popular_news-meta">
 <span class="popular_news-date">۱۵ تیر ۱۴۰۴</span>
 </div>
 <h4 class="popular_news-title">
 <a href="news-detail.html">تدارک 3 هزار موکب ایرانی برای اربعین 1404</a>
 </h4>
 </div>
 </div>

 <!-- خبر پربازدید 2 -->
 <div class="popular_news-item">
 <div class="popular_news-image">
 <a href="news-detail.html">
 <img src="/Assets/SiteTheme/img/featured-news-3.jpg" alt="رونمایی از ضریح جدید" class="img-fluid">
 </a>
 </div>
 <div class="popular_news-content">
 <div class="popular_news-meta">
 <span class="popular_news-date">۲ تیر ۱۴۰۴</span>
 </div>
 <h4 class="popular_news-title">
 <a href="news-detail.html">رونمایی از ضریح جدید حرم حضرت عباس (ع)</a>
 </h4>
 </div>
 </div>

 <!-- خبر پربازدید 3 -->
 <div class="popular_news-item">
 <div class="popular_news-image">
 <a href="news-detail.html">
 <img src="/Assets/SiteTheme/img/kh2.jpg" alt="پیشرفت 75 درصدی ساخت صحن حضرت زینب (س)" class="img-fluid">
 </a>
 </div>
 <div class="popular_news-content">
 <div class="popular_news-meta">
 <span class="popular_news-date">۱۸ تیر ۱۴۰۴</span>
 </div>
 <h4 class="popular_news-title">
 <a href="news-detail.html">پیشرفت 75 درصدی ساخت صحن حضرت زینب (س)</a>
 </h4>
 </div>
 </div>

 <!-- خبر پربازدید 4 -->
 <div class="popular_news-item">
 <div class="popular_news-image">
 <a href="news-detail.html">
 <img src="/Assets/SiteTheme/img/kh6.jpg" alt="آیین افتتاح صحن حضرت زهرا" class="img-fluid">
 </a>
 </div>
 <div class="popular_news-content">
 <div class="popular_news-meta">
 <span class="popular_news-date">۱۲ تیر ۱۴۰۴</span>
 </div>
 <h4 class="popular_news-title">
 <a href="news-detail.html">آیین افتتاح صحن حضرت زهرا (س) در نجف اشرف</a>
 </h4>
 </div>
 </div>
 </div>
 </div>
 </div>

 <!-- بنر مشارکت -->
 <div class="sidebar_widget donation_widget">
 <div class="sidebar_widget-content">
 <div class="donation_banner">
 <div class="donation_overlay"></div>
 <div class="donation_content">
 <div class="donation_icon">
 <i class="fa-solid fa-hand-holding-heart"></i>
 </div>
 <h3 class="donation_title">مشارکت در بازسازی عتبات عالیات</h3>
 <p class="donation_text">خدمت به اهل بیت علیهم السلام افتخار ماست</p>
 <a href="#" class="btn btn-light donation_btn">مشارکت کنید</a>
 </div>
 </div>
 </div>
 </div>

 <!-- آرشیو ماهانه -->
 <div class="sidebar_widget archive_widget">
 <h3 class="sidebar_widget-title">
 <i class="fa-solid fa-calendar-days"></i>
 <span>آرشیو ماهانه</span>
 </h3>
 <div class="sidebar_widget-content">
 <ul class="archive_list">
 <li class="archive_item">
 <a href="#" class="archive_link">
 <span class="archive_month">تیر ۱۴۰۴</span>
 <span class="archive_count">۲۸ خبر</span>
 </a>
 </li>
 <li class="archive_item">
 <a href="#" class="archive_link">
 <span class="archive_month">خرداد ۱۴۰۴</span>
 <span class="archive_count">۳۵ خبر</span>
 </a>
 </li>
 <li class="archive_item">
 <a href="#" class="archive_link">
 <span class="archive_month">اردیبهشت ۱۴۰۴</span>
 <span class="archive_count">۴۲ خبر</span>
 </a>
 </li>
 <li class="archive_item">
 <a href="#" class="archive_link">
 <span class="archive_month">فروردین ۱۴۰۴</span>
 <span class="archive_count">۳۰ خبر</span>
 </a>
 </li>
 <li class="archive_item">
 <a href="#" class="archive_link">
 <span class="archive_month">اسفند ۱۴۰۳</span>
 <span class="archive_count">۳۸ خبر</span>
 </a>
 </li>
 </ul>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>

 <!-- فوتر -->
 <!-- فوتر سایت -->
<footer class="footer">
 <div class="container">
 <!-- بخش اصلی فوتر -->
 <div class="footer_main">
 <div class="row g-4">
 <!-- بخش لوگو و توضیحات -->
 <div class="col-lg-4 col-md-6">
 <div class="footer_about">
 <div class="footer_logo">
 <img src="assets/img/logo-light.png" alt="ستاد بازسازی عتبات عالیات" class="footer_logo-img">
 </div>
 <p class="footer_about-text">
 ستاد بازسازی عتبات عالیات با هدف مشارکت مردمی در بازسازی و توسعه حرمین شریفین و اماکن مقدسه در عراق، با محوریت حرم مطهر امام حسین (ع) فعالیت می‌کند.
 </p>
 <div class="footer_donation">
 <a href="#" class="footer_donation-link">
 <i class="fas fa-hands-helping"></i>
 <span>مشارکت در بازسازی حرم امام حسین (ع)</span>
 </a>
 </div>
 </div>
 </div>
 
 <!-- بخش لینک‌های سریع -->
 <div class="col-lg-2 col-md-6 col-6">
 <div class="footer_links">
 <h4 class="footer_title">دسترسی سریع</h4>
 <ul class="footer_links-list">
 <li class="footer_links-item">
 <a href="#" class="footer_links-link">
 <i class="fas fa-angle-left"></i>
 <span>صفحه اصلی</span>
 </a>
 </li>
 <li class="footer_links-item">
 <a href="#" class="footer_links-link">
 <i class="fas fa-angle-left"></i>
 <span>درباره ستاد</span>
 </a>
 </li>
 <li class="footer_links-item">
 <a href="#" class="footer_links-link">
 <i class="fas fa-angle-left"></i>
 <span>پروژه‌های بازسازی</span>
 </a>
 </li>
 <li class="footer_links-item">
 <a href="#" class="footer_links-link">
 <i class="fas fa-angle-left"></i>
 <span>اخبار و رویدادها</span>
 </a>
 </li>
 <li class="footer_links-item">
 <a href="#" class="footer_links-link">
 <i class="fas fa-angle-left"></i>
 <span>گالری تصاویر</span>
 </a>
 </li>
 </ul>
 </div>
 </div>
 
 <!-- بخش خدمات -->
 <div class="col-lg-3 col-md-6 col-6">
 <div class="footer_links">
 <h4 class="footer_title">خدمات ستاد</h4>
 <ul class="footer_links-list">
 <li class="footer_links-item">
 <a href="#" class="footer_links-link">
 <i class="fas fa-angle-left"></i>
 <span>نذورات مردمی و وقف</span>
 </a>
 </li>
 <li class="footer_links-item">
 <a href="#" class="footer_links-link">
 <i class="fas fa-angle-left"></i>
 <span>خادمین افتخاری حرم</span>
 </a>
 </li>
 <li class="footer_links-item">
 <a href="#" class="footer_links-link">
 <i class="fas fa-angle-left"></i>
 <span>اعزام نیروی متخصص</span>
 </a>
 </li>
 <li class="footer_links-item">
 <a href="#" class="footer_links-link">
 <i class="fas fa-angle-left"></i>
 <span>موکب‌های اربعین</span>
 </a>
 </li>
 <li class="footer_links-item">
 <a href="#" class="footer_links-link">
 <i class="fas fa-angle-left"></i>
 <span>پروژه‌های عمرانی</span>
 </a>
 </li>
 </ul>
 </div>
 </div>
 
 <!-- بخش تماس -->
 <div class="col-lg-3 col-md-6">
 <div class="footer_contact">
 <h4 class="footer_title">ارتباط با ستاد</h4>
 <ul class="footer_contact-list">
 <li class="footer_contact-item">
 <i class="fas fa-map-marker-alt footer_contact-icon"></i>
 <span>تهران، خیابان آزادی، خیابان اسکندری شمالی، پلاک 63</span>
 </li>
 <li class="footer_contact-item">
 <i class="fas fa-phone footer_contact-icon"></i>
 <span>021-66574001-4</span>
 </li>
 <li class="footer_contact-item">
 <i class="fas fa-envelope footer_contact-icon"></i>
 <span>info@atabat.org.ir</span>
 </li>
 </ul>
 <div class="footer_social">
 <a href="#" class="footer_social-link" title="اینستاگرام">
 <i class="fab fa-instagram"></i>
 </a>
 <a href="#" class="footer_social-link" title="تلگرام">
 <i class="fab fa-telegram"></i>
 </a>
 <a href="#" class="footer_social-link" title="توییتر">
 <i class="fab fa-twitter"></i>
 </a>
 <a href="#" class="footer_social-link" title="آپارات">
 <i class="fab fa-youtube"></i>
 </a>
 </div>
 </div>
 </div>
 </div>
 </div>
 
 <!-- خط جداکننده با نقش اسلامی -->
 <div class="footer_divider">
 <div class="footer_divider-pattern"></div>
 </div>
 
 <!-- بخش کپی‌رایت -->
 <div class="footer_copyright">
 <p class="footer_copyright-text">
 کلیه حقوق این سایت متعلق به ستاد بازسازی عتبات عالیات می‌باشد &copy; 1404
 </p>
 <div class="footer_quran">
 <span class="footer_quran-text">وَمَنْ يُعَظِّمْ شَعَائِرَ اللَّهِ فَإِنَّهَا مِنْ تَقْوَى الْقُلُوبِ</span>
 </div>
 </div>
 </div>
</footer>

 <script src="/assets/lib/jquery/jquery-3.7.1.min.js"></script>
 <script src="/assets/lib/properjs/popper.min.js"></script>
 <script src="/assets/lib/bootstrap/js/bootstrap.min.js"></script>
 <!-- Your Custom JavaScript -->
 <script src="/assets/js/script.js"></script>
</body>
</html>
    
    
  
  
استایل CSS برای صفحه اخبار با رعایت استانداردهای نامگذاری و رنگ‌بندی

        
        css
        
    
  
      /* استایل صفحه عنوان */
.page_title {
 position: relative;
 margin-bottom: 3rem;
}

.page_title-bg {
 position: relative;
 padding: 6rem 0;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}

.page_title-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
}

.page_title-content {
 position: relative;
 text-align: center;
 color: var(--white);
}

.page_title-heading {
 font-size: 2.5rem;
 font-weight: 700;
 margin-bottom: 1rem;
 color: var(--white);
 text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 position: relative;
}

.page_title-heading:after {
 content: '';
 display: block;
 width: 80px;
 height: 4px;
 background: var(--secondary-gold);
 margin: 1rem auto;
 border-radius: 2px;
}

.breadcrumb {
 display: inline-flex;
 background-color: rgba(255, 255, 255, 0.1);
 padding: 0.5rem 1rem;
 border-radius: 30px;
 margin: 0;
}

.breadcrumb-item {
 font-size: 0.9rem;
}

.breadcrumb-item a {
 color: var(--secondary-gold);
 text-decoration: none;
}

.breadcrumb-item.active {
 color: var(--white);
}

.breadcrumb-item + .breadcrumb-item::before {
 color: #ccc;
}

/* استایل بخش اصلی صفحه اخبار */
.news_page {
 padding: 3rem 0 5rem;
}

/* استایل فیلتر اخبار */
.news_filter {
 background-color: var(--light);
 border-radius: 10px;
 padding: 1.5rem;
 margin-bottom: 2rem;
 box-shadow: var(--shadow);
}

.news_filter-tabs .nav-link {
 color: var(--dark);
 font-weight: 600;
 border-radius: 20px;
 padding: 0.5rem 1.2rem;
 margin-right: 0.5rem;
 border: none;
}

.news_filter-tabs .nav-link.active {
 background-color: var(--primary);
 color: var(--white);
}

.news_search {
 margin-top: 1rem;
}

@media (min-width: 768px) {
 .news_search {
 margin-top: 0;
 text-align: left;
 }
}

.news_search-form .input-group {
 border-radius: 20px;
 overflow: hidden;
}

.news_search-form .form-control {
 border-top-right-radius: 20px;
 border-bottom-right-radius: 20px;
 border: 1px solid #ced4da;
 padding: 0.5rem 1rem;
}

.news_search-form .btn {
 border-top-left-radius: 20px;
 border-bottom-left-radius: 20px;
 background-color: var(--primary);
 border-color: var(--primary);
 padding: 0.5rem 1.2rem;
}

/* استایل لیست اخبار */
.news_list {
 margin-bottom: 2rem;
}

.news_item {
 background-color: var(--white);
 border-radius: 10px;
 padding: 1.5rem;
 margin-bottom: 1.5rem;
 box-shadow: var(--shadow);
 position: relative;
 transition: var(--transition);
 border: 1px solid #eee;
}

.news_item:hover {
 box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
 transform: translateY(-3px);
}

.news_item-featured {
 border: 1px solid var(--secondary-gold);
 background-color: #fffdf8;
}

.news_featured-badge {
 position: absolute;
 top: -10px;
 right: 20px;
 background-color: var(--secondary-gold);
 color: var(--primary-dark);
 font-size: 0.8rem;
 font-weight: 700;
 padding: 0.3rem 1rem;
 border-radius: 20px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 z-index: 1;
}

.news_image {
 position: relative;
 border-radius: 8px;
 overflow: hidden;
 height: 0;
 padding-top: 65%;
}

.news_image img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: all 0.5s ease;
}

.news_item:hover .news_image img {
 transform: scale(1.05);
}

.news_category {
 position: absolute;
 bottom: 10px;
 right: 10px;
 background-color: rgba(0, 112, 60, 0.85);
 color: var(--white);
 font-size: 0.75rem;
 padding: 0.3rem 0.8rem;
 border-radius: 20px;
}

.news_category span {
 display: flex;
 align-items: center;
}

.news_category i {
 margin-left: 5px;
}

.news_content {
 padding: 1rem 0 0;
}

@media (min-width: 768px) {
 .news_content {
 padding: 0 0 0 1rem;
 }
}

.news_meta {
 display: flex;
 flex-wrap: wrap;
 margin-bottom: 0.8rem;
 font-size: 0.85rem;
 color: var(--gray);
}

.news_date, .news_views {
 margin-left: 1rem;
 display: inline-flex;
 align-items: center;
}

.news_meta i {
 margin-left: 5px;
 color: var(--primary);
}

.news_title {
 font-size: 1.3rem;
 font-weight: 700;
 margin-bottom: 1rem;
 line-height: 1.4;
}

.news_title a {
 color: var(--dark);
 text-decoration: none;
 transition: color 0.3s ease;
}

.news_title a:hover {
 color: var(--primary);
}

.news_excerpt {
 color: #666;
 margin-bottom: 1.2rem;
 line-height: 1.8;
 text-align: justify;
}

.news_more .btn {
 border-color: var(--primary);
 color: var(--primary);
 font-weight: 600;
 padding: 0.4rem 1.2rem;
 border-radius: 20px;
 transition: var(--transition);
}

.news_more .btn:hover {
 background-color: var(--primary);
 color: var(--white);
}

.news_more i {
 margin-right: 5px;
 font-size: 0.8rem;
}

/* استایل پاگینیشن */
.news_pagination {
 margin-top: 3rem;
}

.pagination .page-item .page-link {
 color: var(--primary);
 border-radius: 50%;
 margin: 0 3px;
 width: 40px;
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 600;
 border-color: #eee;
}

.pagination .page-item.active .page-link {
 background-color: var(--primary);
 border-color: var(--primary);
}

.pagination .page-item .page-link:hover {
 background-color: var(--primary-light);
 color: var(--primary);
}

.pagination .page-item.active .page-link:hover {
 background-color: var(--primary);
 color: var(--white);
}

/* استایل سایدبار */
.sidebar_widget {
 background-color: var(--white);
 border-radius: 10px;
 padding: 1.5rem;
 margin-bottom: 2rem;
 box-shadow: var(--shadow);
 border: 1px solid #eee;
}

.sidebar_widget-title {
 font-size: 1.2rem;
 font-weight: 700;
 margin-bottom: 1.5rem;
 padding-bottom: 1rem;
 border-bottom: 2px solid #eee;
 color: var(--dark);
 display: flex;
 align-items: center;
}

.sidebar_widget-title i {
 margin-left: 10px;
 color: var(--primary);
 font-size: 1.1rem;
}

/* استایل دسته‌بندی اخبار در سایدبار */
.news_categories-sidebar {
 list-style: none;
 padding: 0;
 margin: 0;
}

.news_categories-sidebar .news_category-item {
 margin-bottom: 0.8rem;
}

.news_categories-sidebar .news_category-link {
 display: flex;
 align-items: center;
 padding: 0.8rem;
 border-radius: 8px;
 text-decoration: none;
 color: var(--dark);
 transition: var(--transition);
 background-color: var(--light);
 position: relative;
}

.news_categories-sidebar .news_category-link:hover,
.news_categories-sidebar .news_category-link.active {
 background-color: var(--primary);
 color: var(--white);
}

.news_categories-sidebar .news_category-icon {
 width: 35px;
 height: 35px;
 border-radius: 50%;
 overflow: hidden;
 margin-left: 10px;
 flex-shrink: 0;
}

.news_categories-sidebar .news_category-icon img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.news_categories-sidebar .news_category-text {
 flex-grow: 1;
 font-weight: 600;
 font-size: 0.95rem;
}

.news_categories-sidebar .news_category-count {
 background-color: rgba(0, 0, 0, 0.1);
 padding: 0.2rem 0.6rem;
 border-radius: 20px;
 font-size: 0.75rem;
 font-weight: 700;
}

.news_categories-sidebar .news_category-link:hover .news_category-count,
.news_categories-sidebar .news_category-link.active .news_category-count {
 background-color: var(--secondary-gold);
 color: var(--primary-dark);
}

/* استایل اخبار پربازدید */
.popular_news-list {
 display: flex;
 flex-direction: column;
 gap: 1rem;
}

.popular_news-item {
 display: flex;
 align-items: flex-start;
 gap: 1rem;
 padding-bottom: 1rem;
 border-bottom: 1px solid #eee;
}

.popular_news-item:last-child {
 border-bottom: none;
 padding-bottom: 0;
}

.popular_news-image {
 width: 80px;
 height: 60px;
 border-radius: 6px;
 overflow: hidden;
 flex-shrink: 0;
}

.popular_news-image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: all 0.5s ease;
}

.popular_news-item:hover .popular_news-image img {
 transform: scale(1.05);
}

.popular_news-content {
 flex-grow: 1;
}

.popular_news-meta {
 font-size: 0.75rem;
 color: var(--gray);
 margin-bottom: 0.3rem;
}

.popular_news-title {
 font-size: 0.95rem;
 font-weight: 600;
 margin: 0;
 line-height: 1.5;
}

.popular_news-title a {
 color: var(--dark);
 text-decoration: none;
 transition: color 0.3s ease;
}

.popular_news-title a:hover {
 color: var(--primary);
}

/* استایل بنر مشارکت */
.donation_banner {
 position: relative;
 border-radius: 10px;
 overflow: hidden;
 padding: 2rem;
 background-image: url('/Assets/SiteTheme/img/donation-bg.jpg');
 background-size: cover;
 background-position: center;
 height: 250px;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
}

.donation_overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(to bottom, rgba(0, 112, 60, 0.8), rgba(0, 112, 60, 0.95));
}

.donation_content {
 position: relative;
 z-index: 1;
 color: var(--white);
}
.donation_icon {
 font-size: 2.5rem;
 color: var(--secondary-gold);
 margin-bottom: 1rem;
}

.donation_title {
 font-size: 1.5rem;
 font-weight: 700;
 margin-bottom: 0.5rem;
}

.donation_text {
 font-size: 0.9rem;
 margin-bottom: 1.5rem;
 opacity: 0.9;
}

.donation_btn {
 background-color: var(--white);
 color: var(--primary);
 font-weight: 600;
 padding: 0.5rem 1.5rem;
 border-radius: 30px;
 border: 2px solid var(--white);
 transition: var(--transition);
}

.donation_btn:hover {
 background-color: transparent;
 color: var(--white);
 border-color: var(--white);
}

/* استایل آرشیو ماهانه */
.archive_list {
 list-style: none;
 padding: 0;
 margin: 0;
}

.archive_item {
 margin-bottom: 0.5rem;
}

.archive_link {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0.8rem 1rem;
 border-radius: 8px;
 background-color: var(--light);
 color: var(--dark);
 text-decoration: none;
 transition: var(--transition);
}

.archive_link:hover {
 background-color: var(--primary-light);
 color: var(--primary);
}

.archive_month {
 font-weight: 600;
}

.archive_count {
 background-color: rgba(0, 0, 0, 0.1);
 padding: 0.2rem 0.6rem;
 border-radius: 20px;
 font-size: 0.75rem;
 font-weight: 700;
}

.archive_link:hover .archive_count {
 background-color: var(--primary);
 color: var(--white);
}

/* تنظیمات پاسخگو */
@media (max-width: 991px) {
 .page_title-heading {
  font-size: 2rem;
 }
 
 .news_title {
  font-size: 1.1rem;
 }
}

@media (max-width: 767px) {
 .page_title-bg {
  padding: 4rem 0;
 }
 
 .news_item {
  padding: 1rem;
 }
 
 .news_image {
  margin-bottom: 1rem;
 }
 
 .news_content {
  padding: 0;
 }
 
 .news_meta {
  margin-bottom: 0.5rem;
 }
 
 .news_excerpt {
  margin-bottom: 1rem;
 }
}

/* Banner Section - اصلاح شده */
.gallery_page-banner {
 position: relative;
 background-color: var(--primary-dark);
 height: 160px;
 display: flex;
 align-items: center;
 margin-bottom: 2rem;
 overflow: hidden;
}

.gallery_page-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(45deg, rgba(0, 112, 60, 0.95), rgba(0, 90, 48, 0.9));
 z-index: 1;
}

.gallery_page-pattern {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 background-repeat: repeat;
 z-index: 2;
}

.gallery_page-banner-content {
 position: relative;
 z-index: 3;
 text-align: center;
 color: var(--white);
}

.gallery_page-icon {
 width: 60px;
 height: 60px;
 background-color: var(--secondary-gold);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 auto 0.75rem;
 font-size: 1.75rem;
 color: var(--white);
 box-shadow: 0 0 15px rgba(194, 155, 64, 0.5);
}

.gallery_page-title {
 font-size: 1.75rem;
 font-weight: 700;
 margin-bottom: 0.75rem;
 position: relative;
 display: inline-block;
}

.gallery_page-title::after {
 content: '';
 position: absolute;
 bottom: -8px;
 left: 50%;
 transform: translateX(-50%);
 width: 60px;
 height: 2px;
 background-color: var(--secondary-gold);
}

.gallery_page-breadcrumb {
 display: flex;
 justify-content: center;
 margin-top: 1rem;
}

.breadcrumb {
 background-color: transparent;
 margin-bottom: 0;
 padding: 0.25rem 0.75rem;
 border-radius: 20px;
 display: inline-flex;
 background-color: rgba(255, 255, 255, 0.15);
}

.breadcrumb-item {
 font-size: 0.85rem;
}

.breadcrumb-item a {
 color: var(--white);
 text-decoration: none;
 transition: var(--transition);
}

.breadcrumb-item a:hover {
 color: var(--secondary-gold);
}

.breadcrumb-item.active {
 color: var(--secondary-gold);
}

.breadcrumb-item+.breadcrumb-item::before {
 color: rgba(255, 255, 255, 0.7);
 content: "/";
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
 .gallery_page-banner {
  height: 140px;
 }
 
 .gallery_page-icon {
  width: 50px;
  height: 50px;
  font-size: 1.5rem;
 }
 
 .gallery_page-title {
  font-size: 1.5rem;
 }
}

@media (max-width: 575.98px) {
 .gallery_page-banner {
  height: 120px;
 }
 
 .gallery_page-icon {
  width: 40px;
  height: 40px;
  font-size: 1.25rem;
 }
 
 .gallery_page-title {
  font-size: 1.25rem;
 }
 
 .breadcrumb-item {
  font-size: 0.75rem;
 }
}