.blog-header{
  font-size: 2rem;
    font-weight: bold;
     display: block;
  
}
@media only screen and (max-width: 991px) {
  .blog-header {
      font-size: 1.5rem;
  }

}


.cat-title {
  width: 100%;
  line-height: 1.7;
  font-weight: 700;
  margin: 16px 0;
  color: var(--gray);
  display: inline-block;
  font-size: 1.5rem;
}
.category-description
{
  text-align: justify;
  margin-bottom: 30px;
}

.main-posts-item{
    border-radius: 50px;
    display: flex;
    flex-direction: column;
  
    padding: 15px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    height: 351px;
}
.main-posts-button
  {
    padding-bottom: 30px;
    font-size: 1.1rem;
    z-index: 2;
  }
  
  .main-posts-title{
    width: 100%;
    font-size: 1rem;
    font-weight: 600;
    padding-top: 30px;
    z-index: 2;
  
  }
  .main-posts-desc
{
  font-size: 1rem;
  margin-top: auto;
  z-index: 2;
}

/* استایل برای پس‌زمینه طوسی */
.with-gray-back {
  background-color: #EDEDED;
  color: #020202;
}


/* استایل برای المان‌های دارای تصویر */
.with-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  overflow: hidden; 
  position: relative;
}

.with-image .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* تغییر میزان تیرگی */
  transition: all 0.3s ease-in-out; /* انیمیشن هنگام hover */
  z-index: 1; /* نمایش روی تصویر */
}
.with-image .main-posts-title ,.with-image .main-posts-button
{
  color: var(--primery)
}

/* Flip Box Style */
.flip-box {
  background-color: transparent;
 
  height: 400px;
  perspective: 1000px; /* برای افکت 3D */
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Front and Back Style */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Front Style */
.flip-box-front {
  display: flex;
 
  background-size: cover;
}


/* Back Style */
.flip-box-back {
  transform: rotateY(180deg);
  display: flex;
  justify-content: space-between;

  background-size: cover;
}




  /*----------------------------------*/

.pagination
{
  width: 100%;
    margin-top: 24px;
    margin-bottom: 24px;
    display: flex;
     justify-content: center;
        align-items: center;
}

.pagination span, .pagination a {

     height: 40px;
    width: 40px;
  border-radius: 5px;
  border: 1px solid var(--gray);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  margin: 6px 6px;
  display: flex
;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--gray);
}
.woocommerce nav.woocommerce-pagination ul li a{
color: #000;
}
.page-numbers.current {
  border: 0px solid #5c9e9d   !important;
 
  color: var(--wihte) !important;
  background-color: var(--primery) !important
}

.next.page-numbers,.prev.page-numbers{
  width: 95px;

} 
/*---------search page-------------------*/

.active>.page-link, .page-link.active {
  z-index: 3;
  color: var(--bs-pagination-active-color);
  background-color: var(--primery);
  border-color: var(--primery);
}

.news-holder
{
  height: 240px;
}

.news-box
{
  background: #EDEDED;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  position: relative;
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
}



.news-img {
  border-radius: 15px 15px 0 0 ;
  -webkit-border-radius: 15px 15px 0 0 ;
  -moz-border-radius: 15px 15px 0 0 ;
  -ms-border-radius: 15px 15px 0 0 ;
  -o-border-radius: 15px 15px 0 0 ;
  width: 100%;
  height: 250px;
  object-fit: cover;
}
.news-text
{
  font-size: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 69px;
    transition: all .3 ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.news-box:hover .news-text{

  display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 120px;


}
.news-box:hover::after{
  content: "";
  position: absolute;
  filter: brightness(0.1);
  -webkit-filter: brightness(0.1);
}


.news-title
{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 70px;
}

/*----------------*/

#load-more{
  color: var(--primery);
  cursor: pointer;
}


.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}



/*----------services---------------*/
.Services-title{
   font-family: 'GeneralSans-Semibold';
    font-size: 30px;
}
.custom-Services-header{
    background: #FFBC05;
    text-align: center;
    color: #fff;
    padding: 20px;
    border-radius: 36px;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;


}
.custom-Services-header .bread-crump {
    padding-top: 0;
}
.custom-Services-header .rank-math-breadcrumb {
    min-height: auto !important;
}

.custom-Services-header .rank-math-breadcrumb p a, .custom-Services-header .rank-math-breadcrumb p *, 
.custom-Services-header .separator {
    color: #fff !important;
}


.section2-top-img {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 50px;
}


.section2-top-left {
    font-family: 'GeneralSans-Semibold';
    font-size: 30px;
}

.section2-top-right {
    flex: 0 0 78%;
    color: #939393;
    font-size: 18px;
}




@media screen and (max-width: 991px) {
    .section4-top-img {
        align-items: flex-start;
        flex-direction: column;
    }

    .section2-top-left ,.Services-title{
        font-size: 22px;
    }
.custom-Services-header,.section2-top-img{

    margin-bottom: 30px;
}

}



.service-holder
{
  border: 1px solid #E8E8E8;
    border-radius: 24px;
    padding: 30px;
}

.service-holder-title{
  color: #000;
  font-size: 24px;
  font-family: 'GeneralSans-Semibold';

}



.services-row {
    display: flex;
    gap: 15px;
    height: 320px;
}

.service-card {
    flex: 1;
    border-radius: 24px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    transition: flex 0.6s ease;
    min-width: 120px;
     border: 1px solid #E8E8E8;
}

.service-card.active {
    flex: 2.5;
}

.overlay {
    position: absolute;
    inset: 0;

background: linear-gradient(180deg, rgba(0, 165, 80, 0) 0%, #00A550 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.service-card.active .overlay {
    opacity: 1;
}

.content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 40px 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: opacity 0.4s ease 0.15s;
}




.service-card.active .content {
    opacity: 1;
}

.service_icon_holder {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: auto;
        border: 1px solid #E8E8E8;
}

.service_icon {
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
}

.service-title {
    font-size: 22px;
    margin-bottom: 10px;
    font-family: 'GeneralSans-Semibold';
}



.service-card .service-title,
.service-card .service-text {
    color: #000;
}


.service-card.active .service-title {
    color: #fff;
}
.service-card.active .service-text {
    color: #AFF4D1
}

.service-text {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
}
.service-card.active .service-text {
    opacity: 1;
    max-height: 200px;
}
.service-card a {
    color: #000;
    text-decoration: none;
}

.service-card.active a {
    color: #fff;
}


@media screen and (max-width: 1200px) {
.service-title {
    font-size: 18px;


}

}



@media screen and (max-width: 991px) {

    .services-row {
        flex-direction: column;
        height: auto;
        gap: 15px;
    }

    .service-card {
        width: 100%;
        min-height: 140px;
        height: 140px;
        transition: height 0.5s ease;
        flex: unset;
    }

    .service-card.active {
        height: 240px;
    }

    .overlay {
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .service-card.active .overlay {
        opacity: 1;
    }

    .content {
        opacity: 1;
        transition: opacity 0.3s ease 0.15s;
            justify-content: center;
            padding-top: 30px;
        padding-bottom: 30px;
    }

    .service-card.active .content {
        opacity: 1;
    }

    .service-text {
        max-height: 0;
        opacity: 0;
        transition: all 0.3s ease;
    }

    .service-card.active .service-text {
        max-height: 200px;
        opacity: 1;
                margin-top: 15px;
    }


.service_icon_holder {
    width: 60px;
    height:60px;
     padding: 10px;
             margin-bottom: 15px;
}

.service_icon {
    width: 32px;
    height: 32px;
 
}




}