/* ********* blog page ************ */
#blog-page {}



/* *********
@@@@@@@  dont write dash dashboard css code here
because there is a separate file for dashboard styles called style-dashboard.css
@@@@@@@@
************ */

/* ********* auth page ************ */

/* ********* fetch-api page ************ */



/* ********* our-services-page ************ */
/* we control the width of all images in our-services page with below single code
instead of assigning my custom classes: img-md-width-*
*/
@media (min-width: 768px) {
  #our-services-page img {
   max-width: 80% !important;
 }
}

/* برای عکس های درون مقالات در صفحات موبایل
styles-images.css عرض زیر از فایل
اعمال می شود:
img {
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

/* ********* password-reset page ************ */


/* ********* temp page ************ */
#return-to-forgot-pwd-page:hover { color: #fff !important; }

#return-to-forgot-pwd-page {
  height: 45%;
  padding: 0.313rem 12px;
  margin: 12px 0.313rem 0 0.938rem;
  color: #fff;
  background-color: #1e88e5;
  border-radius: 3px;
}

/* هشدار : این خط را چک ئ در صورت عدم نیاز حذف کنم */

@media (max-width: 576px) {
  .temp-page-errors-inner-div {
    text-align: right !important;
  }
}

/* ********* homepage ************ */
#homepage-categories-container i {
  color: #FF5A5F;
}

#home-page .card {
  padding: 1rem 0;
}

#home-page .card:hover {
  transition: ease .1s;
  transform: scale(1.01);
}



/* ********* website-design-contract page ************ */

/*
To replace the default bullet circles in your list with a Font Awesome checkmark icon, you can use HTML and CSS.
 you can use the ::before pseudo-element to insert the checkmark icon before each list item.
*/
#website-design-contract .specs-list-ul {
  list-style: none; /* Remove default list bullets */
  padding-left: 0;  /* Remove default list padding */
  }

#website-design-contract .specs-list-ul li::before {
  content: "\f058"; /* Unicode for the Font Awesome checkmark icon */
  font-family: 'Font Awesome 6 Free'; /* Use the FontAwesome font family */
  margin-left: 5px; /* Add some spacing between the icon and the text */
  color: #0093ee; /* Change the color of the checkmark icon */
}
/*
In the CSS code above, we use the ::before pseudo-element to insert the checkmark icon before each list item. */


/* about-us page */

   /* Custom CSS for marquee animation */
       @keyframes marquee-animation {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); } /* Move half the width (due to duplication) */
      }

    .marquee-container {
      overflow: hidden; /* Hide images outside viewport */
      width: 100%;
      direction: ltr; /* Ensure consistent right-to-left motion */
    }

    .marquee-content {
      display: flex;
      flex-wrap: nowrap;
      /* Double width for duplicated images */
      /* width: 200%;  */
      /* if we set 100% or 200%, it forces the small width and heigh of all images */
      width: 300%; /* Double width for duplicated images */
      animation: marquee-animation 40s linear infinite; /* Adjust duration for speed */
    }

    .marquee-content img {
      /* width: 250px !important; /* Adjust size as needed */
      /* height: auto; */

      /* Space between images  */
      /* margin-right: 10px; */
    }


/* to add some space at the bottom of all h2 headings located in pages */
.site-page h2 {margin-bottom: 1.5rem;}
.site-page p {margin-bottom: 2.5rem;}