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


/* برای مرورگرهای مبتنی بر Firefox */
* {
scrollbar-color: #007E6E #f8f8f8; /* رنگ اسکرولبار و پس‌زمینه */
scrollbar-width: thin; /* عرض اسکرولبار */
}

/* برای مرورگرهای مبتنی بر WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
width: 10px; /* عرض اسکرولبار */
height: 10px; /* ارتفاع اسکرولبار (برای اسکرولبار افقی) */
}

::-webkit-scrollbar-track {
background: #f8f8f8; /* رنگ پس‌زمینه اسکرولبار */
border-radius: 5px; /* گرد کردن گوشه‌ها */
}

::-webkit-scrollbar-thumb {
background: #007E6E; /* رنگ اسکرولبار */
border-radius: 5px; /* گرد کردن گوشه‌ها */
}

::-webkit-scrollbar-thumb:hover {
background: #005a4d; /* رنگ اسکرولبار هنگام hover */
}

@font-face {
font-family: iransans;
font-style: normal;
font-weight: normal;
src: url("../fonts/IRANSansWeb_Medium.eot");
src: url("../fonts/IRANSansWeb_Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/IRANSansWeb_Medium.woff2") format("woff2"), url("../fonts/IRANSansWeb_Medium.woff") format("woff"), url("../fonts/IRANSansWeb_Medium.ttf") format("truetype");
}

@font-face {
font-family: Parastoo;
font-style: normal;
font-weight: normal;
src: url("../fonts/Parastoo.eot");
src: url("../fonts/Parastoo.eot?#iefix") format("embedded-opentype"), url("../fonts/Parastoo.woff2") format("woff2"), url("../fonts/Parastoo.woff") format("woff"), url("../fonts/Parastoo.ttf") format("truetype");
}

@font-face {
font-family: Parastoo-Bold;
font-style: normal;
font-weight: normal;
src: url("../fonts/Parastoo-Bold.eot");
src: url("../fonts/Parastoo-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Parastoo-Bold.woff2") format("woff2"), url("../fonts/Parastoo-Bold.woff") format("woff"), url("../fonts/Parastoo-Bold.ttf") format("truetype");
}


@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap");
:root {
--FontFamily: iransans;
--FontFamily1: Parastoo;
--FontFamily2: Parastoo-Bold;
--ThemeColor: #007E6E;
--ThemeLightColor:#007E6E;
--TextColor: #061E29;
--HoverColor:#EDEEC9;
--MainColor:#fbfbfb;
--TextShadow:  #867f6f;
--NameColor:#ed2027;
--Box-shadw: rgba(149, 157, 165, 0.2) 0px 8px 24px;
--FontSize: 1rem;
--Transition: all 0.6s ease-in-out ;
}

body {
padding: 0;
margin: 0;
direction: rtl;
text-align: right;
font-size: 0.95rem;
font-family: var(--FontFamily);
background-color: var(--MainColor);
color: var(--TextColor);
min-height:100vh;
display:-ms-flexbox;
display:-webkit-box;
display:flex;
flex-direction: column;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--FontFamily);
font-weight: 700;
}

a {
-webkit-transition: var(--Transition);
transition: var(--transition);
text-decoration: none;
outline: 0 !important;
}

p{
font-family: var(--FontFamily);
font-size: 1rem;
}

a:hover {
text-decoration: none;
}

li {
list-style-type: none !important;
list-style: none !important;
}

:focus {
outline: 0 !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

.Active{
color: var(--HoverColor) !important;
}

.space{
margin:3px;    
}

.__padding_top{
padding-top:9rem;
}

.divider{
border-bottom: 1px solid #4f4f4f;  
}

/* تعریف انیمیشن چرخش */
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

/* اعمال انیمیشن به عکس لوگو */
.navbar-brand img {
animation: spin 4s linear infinite;
}

/********* header style ********/

.time_class {
display: flex;
width: 100%;
justify-content: center;
}

.time_class1 {
display: flex;
width: 100%;
}

.time_class span {
font-size: 1rem;
opacity: 0; /* مخفی کردن ابتدایی */
transform: translateX(-100%); /* شروع از خارج صفحه (سمت چپ) */
transition: opacity 1s, transform 1s; 
color: var(--MainColor);
}

@keyframes slideIn {
    from {
        transform: translateX(-100%); /* شروع از سمت چپ */
        opacity: 0;
    }
    to {
        transform: translateX(0); /* حرکت به مرکز */
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0); /* شروع از مرکز */
        opacity: 1;
    }
    to {
        transform: translateX(100%); /* حرکت به سمت راست */
        opacity: 0;
    }
}

.logo_daily{
position: absolute;    
left: 1%;
top: 0;
}

.header_class {
background-color: var(--ThemeColor) !important;
z-index: 10;
padding: 0.15rem 1rem 0.5rem 1rem;
}

.navbar-brand {
position: relative;
display: flex;
justify-content: center;
width: 100%;
}

.navbar-brand img {
position: absolute;
z-index: 2; /* Ensure the image is above the circle */
top: -20px;
left: 50%;
right: 50%;
}

.slide_menu{
font-size: 2.5rem;
cursor:pointer;
position:absolute;
top: 34%;
color: var(--TextColor);
display: inline-flex;
}

.slide_menu i{
font-size: 2rem;
line-height: 1.2;
}

.slide_menu span{
font-size: 1rem;
color: var(--TextColor);
line-height: 2.5;
}

.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 3;
top: 0;
left: -2px;
background-color: var(--ThemeColor);
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
box-shadow: var(--Box-shadw);
border-right: 2px solid var(--ThemeColor);
}

.sidenav a {
padding: 1rem 0.5rem 1rem 0.5rem;
text-decoration: none;
font-size: 1rem;
color: var(--TextColor);
display: flex;
transition: 0.3s;
opacity: 0.75;
}

.sidenav a:hover {
color: var(--TextColor);
opacity: 1;
}

.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 2rem;
margin-left: 50px;
}

/* استایل collapse */
.custome_collapse {
padding-left: 20px;
}

.custome_collapse a {
font-size: 16px;
padding: 6px 6px 6px 40px;
}

/* مطمئن شوید این استایل‌ها وجود ندارند */
.custome_collapse {
display: none;
}

/* استایل collapse */
.custome_collapse {
display: flex;
flex-direction: column;
overflow: hidden;
max-height: 0;
transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
opacity: 0;
}

/* استایل collapse هنگام باز شدن */
.custome_collapse.show {
/* مقدار مناسب برای محتوای شما */
opacity: 1;
}

/* استایل آیکون dropdown */
.dropdown-arrow {
float: right;
transition: transform 0.3s;
}

/* چرخش آیکون هنگام باز شدن */
.collapse-toggle.active .dropdown-arrow {
transform: rotate(180deg);
}

/* استایل آیکون dropdown */
.dropdown-arrow {
float: right;
transition: transform 0.3s;
}

/* چرخش آیکون هنگام باز شدن */
.collapse-toggle.active .dropdown-arrow {
transform: rotate(180deg);
}


/* جلوگیری از اسکرول صفحه هنگام باز بودن سایدبار */
body.sidenav-open {
overflow: hidden;
}

/* استایل‌های منوی دوم */
.second_menu {
display: flex;
transition: opacity 0.3s ease, visibility 0.3s ease;
background-color: var(--MainColor);
z-index: 9;
box-shadow: var(--Box-shadw);
}

.second_menu.hidden {
opacity: 0;
visibility: hidden;
}


.navbar-nav .nav-link {
color: var(--TextColor);
padding: 10px 15px 0px 15px;
transition: all 0.2s ease;
display: inline-flex;
}

.navbar-nav .nav-link:hover {
background-color: #fafafa;
color: var(--TextColor);
}

.dropdown-menu {
background-color: var(--ThemeColor);
border: 1px solid var(--ThemeColor);
border-radius: 1rem;
box-shadow: 0 0 40px #00000021;
margin-top: 5px;
}

.dropdown-item {
color: var(--TextColor);
padding: 10px 20px;
text-align: center;
}

.dropdown-item:hover {
background-color: var(--TextColor);
color: var(--MainColor);
border-radius: 1rem;
}

/* باز شدن منوها با هاور */
.nav-item.dropdown:hover .dropdown-menu {
display: block;
opacity: 1;
visibility: visible;
}

/* انیمیشن برای نمایش نرم منوها */
.dropdown-menu {
display: block;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* استایل‌های اضافی برای منو */
.navbar {
background-color: #f8f9fa; /* رنگ پس‌زمینه */
}

.dropdown-menu {
background-color: var(--MainColor); /* رنگ پس‌زمینه منو */
border: 1px solid #ddd; /* حاشیه منو */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* سایه منو */
}

.dropdown-item {
color: #333; /* رنگ متن آیتم‌ها */
}

.dropdown-item:hover {
background-color: rgba(79, 189, 150, 0.2); /* رنگ پس‌زمینه هنگام هاور */
border-radius: 0;
color: var(--TextColor);
}

@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}

/* تغییر آیکون فلش منو */
.dropdown-toggle::after {
display: none; /* مخفی کردن آیکون پیش‌فرض */
}

.dropdown-arrow {
margin-right: 0.5rem; /* فاصله از متن */
transition: transform 0.3s ease; /* انیمیشن چرخش */
}

.dropdown-toggle[aria-expanded="true"] .dropdown-arrow {
transform: rotate(180deg); /* چرخش آیکون هنگام باز شدن منو */
}

/* استایل‌های آیکون‌های شبکه‌های اجتماعی */
.navbar-nav .nav-link i {
font-size: 1.2rem; /* اندازه آیکون‌ها */
color: var(--TextColor); /* رنگ آیکون‌ها */
transition: color 0.3s ease; /* انیمیشن تغییر رنگ */
margin-left: 0.4rem;
}

.navbar-nav .nav-link:hover{
color: var(--ThemeLightColor); /* تغییر رنگ آیکون‌ها هنگام hover */
}

.navbar-nav .nav-link:hover i {
color: var(--ThemeLightColor); /* تغییر رنگ آیکون‌ها هنگام hover */
}

.search-box {
position: absolute;
top: 60px;
right: 20px;
background-color: var(--MainColor);
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 1000;
}

.dark-mode-icon i{
font-size:1.2rem;
}

.search-icon{
padding-left: 0.5rem;
}

.search-icon i{
font-size:1.2rem;  
}

/********** dark mode ********/

/* استایل‌های دارک مود */
body.dark-mode {
background-color: var(--TextColor);
color: var(--MainColor);
}

body.dark-mode .header_class {
background-color: var(--TextColor) !important;
box-shadow: var(--Box-shadw);
}

body.dark-mode .slide_menu,
body.dark-mode .slide_menu span,
body.dark-mode .nav-link {
color: var(--MainColor);
}

body.dark-mode .search-box {
background-color: var(--TextColor);
color: var(--MainColor);
}

body.dark-mode .navbar {
background-color: var(--TextColor);
}

body.dark-mode .footer_class{
background-color: var(--TextColor);
}

body.dark-mode .navbar-nav .nav-link i {
color: var(--MainColor);
}

body.dark-mode .navbar-nav .nav-link:hover i,
body.dark-mode .navbar-nav .nav-link:hover {
color: var(--ThemeLightColor);
background-color: transparent;
}

body.dark-mode .span_team2 {
color: var(--MainColor);
}

body.dark-mode .carousel-indicators button {
background-color: var(--MainColor) !important;
opacity: 1;
}

body.dark-mode .carousel-indicators button.active {
background-color: var(--ThemeLightColor) !important;
}

body.dark-mode .footer_class .text-muted{
color: var(--MainColor) !important;
}

body.dark-mode .copyright a,.design a{
color: var(--MainColor) !important;
}

body.dark-mode .course_style .title i,
body.dark-mode .library_style .title i,
body.dark-mode .voice_style .title i,
body.dark-mode .video_style .title i,
body.dark-mode .graphic_style .title i
{
color: var(--MainColor);
}

body.dark-mode .card,
body.dark-mode .card a
{
background-color: var(--TextColor) !important;
color: var(--MainColor)!important;
}
    
body.dark-mode .article_style,
body.dark-mode .article_style span{
color: var(--MainColor)!important;
border-radius: 1rem;
}

body.dark-mode .shope_class .text-muted{
color: var(--MainColor) !important;
}

body.dark-mode .shope_class .text-success{
color: var(--NameColor) !important;    
}

body.dark-mode .nav_pills_group .nav-link.active, .nav-pills .show > .nav-link {
background-color: var(--TextColor) !important;
color: var(--MainColor);
}

body.dark-mode .nav_pills_group .nav-link{
background-color: var(--MainColor) !important;
color: var(--TextColor);
}

body.dark-mode .nav_pills_group{
border: 1px solid var(--MainColor);
}

body.dark-mode .appbox_style .card a{
background-color: var(--MainColor) !important;
}

body.dark-mode .appbox_style .span_team2 {
color: var(--MainColor);
}

body.dark-mode .daily_hadith_class {
background-color: var(--TextColor) !important;
}

body.dark-mode .dailyvisit_class{
background-color: var(--TextColor) !important;
}

body.dark-mode .nav_pills_daily .nav-link.active, .nav-pills .show > .nav-link {
background-color: var(--TextColor) !important;
color: var(--MainColor);
}

body.dark-mode .nav_pills_daily .nav-link{
background-color: var(--MainColor) !important;
color: var(--TextColor);
}

body.dark-mode .nav_pills_daily{
border: 1px solid var(--MainColor);
}

body.dark-mode .language-selector select{
color: var(--MainColor) !important; 
background-color: var(--TextColor) !important;  
}

body.dark-mode .breadcrumb-item a{
color: var(--MainColor) !important; 
}

body.dark-mode .breadcrumb-item::before{
color: var(--MainColor) !important; 
}

body.dark-mode .multimedia-content-box{
color: var(--TextColor) !important; 
}

body.dark-mode .__ul li a {
  color: var(--MainColor) !important;
}

body.dark-mode .__ul li a > i {
  color: var(--MainColor) !important;
}

body.dark-mode .child_title {
  color: var(--MainColor) !important;
}

body.dark-mode .article-title,
body.dark-mode .article-meta {
  color: var(--MainColor) !important;
}

body.dark-mode .article-content-box {
color: var(--TextColor) !important; 
}

body.dark-mode .article_box{
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px !important;
}

body.dark-mode .article_box h6{
color: var(--MainColor) !important;
}

body.dark-mode .events-container .date-display,
body.dark-mode .events-list .event-item h6{
   color: var(--TextColor) !important; 
}

body.dark-mode .quran-page .verse .text-ar,
body.dark-mode .quran-page .verse .text-ar .text-muted{
   color: var(--MainColor) !important; 
}

body.dark-mode .moghavemat-card-title,
body.dark-mode .moghavemat-card-footter{
color: var(--MainColor) !important; 
}

body.dark-mode .footer_class{
background-color: rgba(79, 189, 150, 0.2) !important;  
}

/********** dark mode ********/




/********** header style ********/




/*********** slider style *********/

.slider_right{
display: flex;    
background: rgba(79, 189, 150, 0.2);
border-radius: 1rem;
padding: 0 1rem 1rem 1rem;
justify-content: center;
flex-direction: column;
align-items: center;
}

.child_title{

  font-size: 1.5rem;
  font-family: var(--FontFamily2);
  display: flex;
  justify-content: center;
  padding: 0 0 1rem 0;
  color: var(--TextColor);

}

.nav_pills_slider{
position: relative;
top: -20px;
}

.nav_pills_slider .nav-item {
padding: 0 0.5rem;
position: relative; /* برای قرار دادن ::before در داخل nav-item */
}

.nav_pills_slider .nav-item .nav-link {
background: rgba(79, 189, 150, 0.7);
padding: 1rem;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 0 5px;
position: relative; /* برای قرار دادن ::before زیر nav-link */
z-index: 2; /* دایره سبز بالای دایره سفید قرار می‌گیرد */
}

.nav_pills_slider .nav-item .nav-link::before {
content: '';
background: rgba(79, 189, 150, 0.2); /* رنگ دایره سفید */
border-radius: 50%;
width: 55px; /* اندازه دایره سفید */
height: 55px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* مرکز کردن دایره سفید */
z-index: 1; /* دایره سفید زیر دایره سبز قرار می‌گیرد */
}

.nav_pills_slider .nav-link.active, .nav-pills .show > .nav-link {
background-color: #00ad78 !important;
padding: 1rem;
border-radius: 50%;
width: 65px;
height: 65px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 0 5px;
position: relative; /* برای قرار دادن ::before */
z-index: 2; /* دایره سبز فعال بالای دایره سفید قرار می‌گیرد */
}

.nav_pills_slider .nav-link.active::before, .nav-pills .show > .nav-link::before {
content: ''; /* ضروری برای نمایش ::before */
background: rgba(79, 189, 150, 0.2); /* رنگ دایره سفید */
border-radius: 50%;
width: 75px; /* اندازه دایره سفید */
height: 75px;
position: absolute; /* موقعیت مطلق نسبت به nav-link */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* مرکز کردن دایره سفید */
z-index: -1; /* دایره سفید زیر دایره سبز قرار می‌گیرد */
}

.nav_pills_slider .nav-item .nav-link i{
font-size: 1.4rem;
color: rgba(0, 0, 0, 0.4);;
}

.nav_pills_slider .nav-link.active i, .nav_pills_slider .show > .nav-link i{
font-size: 2.3rem;
color: var(--MainColor);
}

.carousel-item img{
border-radius: 1rem;
overflow: hidden;    
}

/* برای اضافه کردن فاصله بین ستون‌ها */
.row > div {
margin-bottom: 1rem;
}

/* برای تغییر ترتیب در حالت‌های خاص */
@media (max-width: 991.98px) {
.order-tablet-1 {
order: 1;
}
.order-tablet-2 {
order: 2;
}
.order-tablet-3 {
order: 3;
}
}

/*************** slider style ********/



/******************* banner style ********/

.img_banner{
display: flex;    
}

.img_banner img{
display: flex;    
width: 100%;
border-radius: 1rem;
overflow: hidden;
object-fit: cover;
}
    
/********************** banner style *********/


/******************** group style *************/

.nav_pills_group {
display: inline-flex;
border:1px solid var(--TextShadow);
padding: 0.5rem 1rem;
border-radius: 0.5rem;
}

.nav_pills_group .nav-item .nav-link {
background: rgba(79, 189, 150, 0.7);
margin: 10px 5px;
color: var(--MainColor);
}

.nav_pills_group .nav-link.active, .nav-pills .show > .nav-link {
background-color: var(--MainColor) !important;
color: var(--ThemeLightColor);
}

@media (max-width: 768px) {
.nav_pills_group {
    align-items: flex-start;
    padding: 0.5rem;
}
}

.daily_hadith_class{
display: flex;
flex-direction: column;    
align-items: center;
background-color: var(--MainColor);
border-radius:1rem;
box-shadow: var(--Box-shadw);
padding:1rem;
}

.dailyvisit_class{
display: flex;
}

.dailyvisit_class span{
text-align: justify;
white-space:pre-line;
line-height: 2;
padding: 1rem;
}

.nav_pills_daily {
flex: 0 0 210px; /* عرض ثابت برای تب‌ها */
display: inline-flex;
border: 1px solid var(--TextShadow);
padding:0.5rem 1rem;
border-radius:0.5rem;

}

.nav_pills_daily .nav-link {
background: rgba(79, 189, 150, 0.7) !important;
margin: 10px 5px;
color: var(--MainColor);
font-size: small;
}

.nav_pills_daily .nav-link.active, .nav-pills .show > .nav-link {
background-color: var(--MainColor) !important;
color: var(--ThemeLightColor);
}
    

/************************* group style *************/



/******************* last item voice and video and graphic ***********/

.voice_style{
display: flex;
background: rgba(79, 189, 150, 0.2);
flex-direction: column;
border-radius: 1rem;
overflow: hidden;
padding: 0 1.5rem 1rem 1.5rem;
}

.voice_style .title{
display: inline-flex; 
padding: 1rem;
justify-content: center;
}

.voice_style .title i{
padding-left: 0.5rem;
font-size: 1.4rem;
color: var(--TextColor);
}

.video_style{
display: flex;
background: rgba(79, 189, 150, 0.2);
flex-direction: column;
border-radius: 1rem;
overflow: hidden;
padding: 0 1.5rem 1rem 1.5rem;
}

.video_style .title{
display: inline-flex; 
padding: 1rem;
justify-content: center;
}

.video_style .title i{
padding-left: 0.5rem;
font-size: 1.4rem;
color: var(--TextColor);
}
    
.graphic_style{
display: flex;
background: rgba(79, 189, 150, 0.2);
flex-direction: column;
border-radius: 1rem;
overflow: hidden;
padding: 0 1.5rem 1rem 1.5rem;
}

.graphic_style .title{
display: inline-flex; 
padding: 1rem;
justify-content: center;
}

.graphic_style .title i{
padding-left: 0.5rem;
font-size: 1.4rem;
color: var(--TextColor);
}

.library_style{
display: flex;
background: rgba(79, 189, 150, 0.2);
flex-direction: column;
border-radius: 1rem;
overflow: hidden;
padding: 0 1.5rem 1rem 1.5rem;
}

.library_style .title{
display: inline-flex; 
padding: 1rem;
justify-content: center;
}

.library_style .title i{
padding-left: 0.5rem;
font-size: 1.4rem;
color: var(--TextColor);
}

.course_style{
display: flex;
background: rgba(79, 189, 150, 0.2);
flex-direction: column;
border-radius: 1rem;
overflow: hidden;
padding: 0 1.5rem 1rem 1.5rem;
}

.course_style .title{
display: inline-flex; 
padding: 1rem;
justify-content: center;
}

.course_style .title i{
padding-left: 0.5rem;
font-size: 1.4rem;
color: var(--TextColor);
}

/******************* last item voice and video and graphic and library and course ***********/


/******************* article style ***********/

.article_title{
display: flex;
justify-content: center;

}

.article_style{
display: inline-flex;    
text-decoration: none; /* حذف زیرخط لینک */
color: inherit; /* رنگ متن را به ارث می‌برد */
}

.article_style img{
display: flex;
width: 100%;
object-fit: cover;

}

.article_style span{
font-size: 0.8rem;
color: var(--TextColor);
display: flex;
justify-content: center;
align-items: center;    
height: 85%;
text-align: center;
}

.article_style p{
font-size: 0.6rem;
text-align: center;
}

.fixed-size-img {
width: 100%; /* عرض عکس را به اندازه والد خود تنظیم می‌کند */
height: 100px; /* ارتفاع ثابت برای همه عکس‌ها */
object-fit: cover; /* تصویر را به اندازه مشخص شده برش می‌دهد و نسبت تصویر را حفظ می‌کند */
border-radius: 5px; /* اختیاری: برای گرد کردن گوشه‌های عکس */
}

/* استایل‌های اختیاری برای بهبود ظاهر */
.card {
transition: transform 0.2s ease-in-out;
}

.card:hover {
transform: scale(1.02); /* بزرگ‌نمایی جزئی هنگام هاور */
}

/******************* article style ***********/


/****************** footter ******************/

.footer-09 {
    background-color: var(--ThemeColor);
}

.footer-09 .copyright {
    letter-spacing: 0.3px;
}

/* لینک‌ها */
.footer-link {
    color: var(--MainColor); /* خاکستری شیک */
    text-decoration: none;
    transition: color 0.3s ease;
    margin: 0 0.35rem;
}

.footer-link:hover {
    color: var(--MainColor, #4fbd96);
}

/* دامنه سایت */
.footer-domain {
    font-weight: 500;
}

/* جداکننده | */
.footer-separator {
    color: var(--HoverColor);
    margin: 0 0.4rem;
}

/* دارک مود */
body.dark-mode .footer-link {
    color: #cbd5f5;
}

body.dark-mode .footer-09 {
    background-color: var(--TextColor);
}

body.dark-mode .footer-separator {
    color: var(--HoverColor);
}



/******************* footter ******************/