@font-face {
   font-family: 'yekan_Regular';
   src: url(/Tools/Font/yekanBakh/Yekan-Bakh-FaNum-04-Regular.woff);
}

@font-face {
   font-family: 'yekan_Medium';
   src: url(/Tools/Font/yekanBakh/Yekan-Bakh-FaNum-05-Medium.woff);
}

@font-face {
   font-family: 'yekan_Bold';
   src: url(/Tools/Font/yekanBakh/Yekan-Bakh-FaNum-06-Bold.woff);
}

@font-face {
   font-family: 'yekan_Heavy';
   src: url(/Tools/Font/yekanBakh/Yekan-Bakh-FaNum-07-Heavy.woff);
}

@font-face {
   font-family: 'yekan_Fat';
   src: url(/Tools/Font/yekanBakh/Yekan-Bakh-FaNum-08-Fat.woff);
}

@font-face {
   font-family: 'rokh';
   src: url(/Tools/Font/Rokh/RokhFaNum-Bold.eot);
   src: url(/Tools/Font/Rokh/RokhFaNum-Bold.woff);
}

@font-face {
   font-family: 'morabba_Regular';
   src: url(/Tools/Font/morabba/Morabba-Regular.woff);
}

@font-face {
   font-family: 'morabba_Bold';
   src: url(/Tools/Font/morabba/Morabba-Bold.woff);
}


:root {

   --theme: #e81c4d;
   --theme_opacity: #e81c4c11;
   --theme_opacity2: #e81c4c88;
   --theme_opacity3: #e81c4c20;
   --theme_opacity4: #e81c4c4e;
   --theme_opacity5: #e81c4c10;
   --theme2: #2a2d53;
   --theme3: #f3f4f6;
   --theme4: #f3f4f65a;
   --theme5: #2a2d536e;
   --theme6: #2a2d530c;
   --theme7: #fbfcfc;
   --theme2_opacity: #2a2d5334;
   --blue: #3b71ca;
   --blue_opacity: #3b72ca18;
   --text_color1: #0f182e;
   --text_color2: #334155;
   --text_color3: #6c6e88;
   --text_color4: #93a4b8;
   --text_color5: #d9dcde;
   --text_color6: #f0f0f6;
   --text_color7: #d9dcde62;
   --text_color8: #93a4b8ab;
   --text_color9: #f0f0f693;
   --text_color10: #f0f0f647;
   --text_color11: #d0d4dc;
   --red: #f76a6a;
   --green: #22c55e;
   --orange: #f90;
   --width: 1350px;
   --grid-col: 3;
   --tr: 0.2s ease-in-out;
}

a,
a:hover,
a:focus {

   color: inherit;
   text-decoration: none;
}

::selection {

   background-color: var(--blue);
   color: #fff;
}

* {

   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'yekan_Regular';
   font-weight: 400 !important;
}

html {

   scroll-behavior: smooth;
}

body {

   direction: rtl;
   background-color: #fff;
}

html.hidden body {

   overflow: hidden;
}

.containerAll {

   width: 100%;
   height: auto;
   float: right;
   overflow: clip;
   position: relative;
}

/* alert style */

.swal2-container {

   min-width: 100% !important;
   width: 250px !important;
   padding: 1rem !important;
   z-index: 200000000 !important;
}

.swal2-container.swal2-top-end>.swal2-popup,
.swal2-container.swal2-top-right>.swal2-popup {

   justify-self: start !important;
   align-self: start !important;
   box-shadow: 0 0 60px var(--text_color7) !important;
}

.swal2-title {

   color: var(--theme2);
   font-weight: 500 !important;
   font-size: 14px !important;
   margin: .5em 1em .4em !important;
}

.swal2-modal .swal2-title {

   font-size: 20px !important;
}

.swal2-popup.swal2-toast .swal2-title {

   margin: .5em 0.5em .5em 1em;

}


.swal2-toast {

   width: auto !important;
   max-width: 100% !important;
   border-radius: 10px !important;
   /* border-right: solid 8px transparent !important; */
   padding: 0.8rem !important;
   display: flex !important;
   justify-content: flex-start !important;
   align-items: center !important;
   box-shadow: 0 0 50px 0 rgba(46, 46, 46, 0.118) !important;
}



.swal2-toast.swal2-icon-success {

   border-color: var(--green) !important;
}


.swal2-toast.swal2-icon-error {

   border-color: var(--red) !important;
}


.swal2-toast.swal2-icon-warning {

   border-color: var(--orange) !important;
}


.swal2-toast .swal2-icon {

   border: none !important;
}

.swal2-toast .swal2-icon svg {

   width: 26px;
   height: 26px;
   float: right;
   fill: var(--theme2);
}

.swal2-toast.swal2-icon-success .swal2-icon svg {

   fill: var(--green) !important;
}

.swal2-toast.swal2-icon-error .swal2-icon svg {

   fill: var(--red) !important;
}

.swal2-toast.swal2-icon-warning .swal2-icon svg {

   fill: var(--orange) !important;
}

.swal2-toast .swal2-timer-progress-bar-container {

   background: none !important;
   border-bottom-right-radius: 0px !important;
   height: 3px !important;
}

.swal2-timer-progress-bar {

   background: #fff !important;
}

.swal2-toast.swal2-icon-success .swal2-timer-progress-bar-container {

   background: var(--green) !important;
}

.swal2-toast.swal2-icon-error .swal2-timer-progress-bar-container {

   background: var(--red) !important;
}

.swal2-toast.swal2-icon-warning .swal2-timer-progress-bar-container {

   background: var(--orange) !important;
}



/* toast js */

.swal2-container.swal2-center>.swal2-popup {

   align-self: start !important;
}

.swal2-container.swal2-center>.swal2-modal {

   align-self: center !important;
}

.swal2-toast .swal2-actions {

   display: none !important;
}


/* alerts */

.alert-warning {

   width: 100%;
   height: auto;
   float: right;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   padding: 1rem;
   gap: 15px;
   color: var(--orange);
   background-color: rgba(255, 153, 0, 0.084);
   font-size: 14px;
   border-radius: 10px;
   margin: 10px 0 15px;
   font-family: 'yekan_Bold';
}

.alert-warning svg {

   fill: var(--orange);
   width: 28px;
   height: 28px;
   float: right;
}

.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {

   background-color: var(--theme2) !important;
}


/* cards */

.Card {

   width: 300px;
   height: auto;
   float: right;
   position: relative;
   transition: 0.2s ease;
   z-index: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-direction: column;
   gap: 10px;
   padding: 1.5rem 1.5rem 1.2rem 1.5rem;
   border-radius: 0;
   
  
}

.Card:hover {

   box-shadow: 0 13px 51px rgba(165, 165, 165, 0.14);
   z-index: 2;
}


.Card .top_content {

   width: 100%;
   height: auto;
   float: right;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}


.Card a {

   width: 100%;
   height: auto;
   float: right;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

.top_content img {

   width: 85%;
   height: auto;
   min-height: 200px;
   max-height: 300px;
   float: right;
   object-fit: contain;
}

.Color_sec {

   width: 10px;
   position: absolute;
   top: 20px;
   left: 17px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   gap: 8px;
}

.color_box {

   width: 8px;
   height: 8px;
   float: left;
   border-radius: 50px;
}

.Color_sec svg {

   width: 13px;
   height: 13px;
   float: left;
   fill: var(--theme2);
   transform: translateX(0.5px);
}

.product_name {

   width: 100%;
   text-align: right;
   float: right;
   color: var(--theme2);
   font-family: 'yekan_Medium';
   font-size: 15px;
   line-height: 26px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -moz-box;
   display: -webkit-box;
   line-clamp: 2;
   -webkit-line-clamp: 2;
   box-orient: vertical;
   -webkit-box-orient: vertical;
   margin-top: 15px;
}

.middle_infos {

   width: 100%;
   height: auto;
   float: right;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 15px 0;
}

.status {

   width: auto;
   height: 26px;
   float: right;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 7px;
   padding: 0 0 0 0.6rem;
   font-size: 12px;
   font-family: 'yekan_Medium';
   color: var(--theme2);
   gap: 6px;
}

.status svg {

   width: 15px;
   height: 15px;
   float: right;
   fill: var(--theme2);
   transform: translateY(-0.5px);
}

.status.green {

   color: var(--green);
}

.status.green svg {

   fill: var(--green);
}

.status.warning {

   color: var(--theme);
}

.status.warning svg {

   fill: var(--theme);
}

/* stars */

.starSec {

   width: auto;
   height: auto;
   float: left;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: 0.2s ease;
}

.Stars-empty {

   width: 18px !important;
   height: 18px !important;
   float: left;
   fill: var(--text_color4);
}


.Stars-fill {

   width: 18px !important;
   height: 18px !important;
   float: left;
   fill: var(--orange);
}

.Stars-fill path {

   opacity: 1 !important;
}

.starSec svg path {

   transition: 0.1s ease;
}

.Stars-half {

   width: 18px !important;
   height: 18px !important;
   float: left;
   fill: var(--text_color4);
}

.Stars-half path:nth-child(1) {

   fill: var(--orange) !important;
}

.Card .bottom_content {

   width: 100%;
   height: auto;
   float: right;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.priceAllInfos {

   width: auto;
   height: auto;
   float: left;
   display: flex;
   justify-content: center;
   align-items: flex-end;
   flex-direction: column;
   gap: 2px;
   margin-bottom: -6px;
}

.main_price {

   width: auto;
   height: auto;
   float: left;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 6px;
}

.price_icon {

   width: 21px;
   height: 21px;
   float: left;
   fill: var(--text_color4);
}

.main_price span {

   font-family: 'yekan_Fat';
   color: var(--theme2);
   float: left;
   font-size: 22px;
}

.offerSec {

   width: auto;
   height: auto;
   float: left;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 10px;
}

.off_box {

   width: auto;
   height: 23px;
   float: left;
   background-color: var(--theme);
   box-shadow: 0 0 30px 0 #e81c4cb9;
   border-radius: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 0.1rem 0.5rem 0;
   color: #fff;
   font-size: 12px;
}

.offed_price {

   font-size: 16px;
   color: var(--text_color4);
   float: left;
   font-family: 'yekan_Medium';
   text-decoration: line-through;
}

.Card .bottom_content .likeProduct {

   width: 45px;
   height: 45px;
   float: right;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50px;
   color: var(--theme2);
   border: solid 1.5px var(--text_color5);
   transition: 0.2s ease;
   cursor: pointer;
   position: relative;
}

.Card .bottom_content .likeProduct svg {

   width: 24px;
   height: 24px;
   float: right;
   stroke: var(--theme2);
   fill: transparent;
   transform: translateX(0.5px) translateY(-0.5px);
   transition: 0.2s ease-in-out;
}

.Card .bottom_content .likeProduct.liked svg {

   stroke: transparent !important;
   fill: var(--theme) !important;
}

.Card:hover .bottom_content .likeProduct:not(.liked):not(.loader_addFav) {

   background-color: var(--theme2);
   border-color: var(--theme2);
}

.Card:hover .bottom_content .likeProduct.liked:not(.loader_addFav) {

   background-color: var(--theme);
   border-color: var(--theme);
}

.Card:hover .bottom_content .likeProduct:not(.liked):not(.loader_addFav) svg {

   stroke: #fff !important;
   fill: transparent !important;
}

.Card:hover .bottom_content .likeProduct.liked svg {

   stroke: transparent !important;
   fill: #fff !important;
}


@media(max-width: 1420px) {

   :root {

      --width: 95%
   }
}



.loading-spinner {
   width: 25px;
   height: 25px;
   position: absolute;
   border-radius: 100px;
   border: solid 3px transparent;
   border-top-color: var(--theme2);
   border-bottom-color: var(--theme2);
   animation: loading-spi 1s linear infinite;
   animation-play-state: paused;
}

.Card .bottom_content .likeProduct .loading-spinner {

   display: none;
}

.Card .bottom_content .likeProduct.loader_addFav .loading-spinner {

   display: block;
   animation-play-state: running;
}

.Card .bottom_content .likeProduct.loader_addFav svg {

   display: none;
}

@keyframes loading-spi {
   to {

      transform: rotate(360deg);
   }
}


/* article cards */

.card_article {

   width: 100%;
   height: 100%;
   float: right;
}

.card_article a {

   width: 100%;
   height: 100%;
   float: right;
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-direction: column;
}

.top_all_article {

   width: 100%;
   height: auto;
   float: right;
   position: relative;
}

.image_box {

   width: 100%;
   height: 190px;
   float: right;
   border-radius: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
}
.image_box img {

   width: 100%;
   height: 100%;
   float: right;
   object-fit: cover;
   border-radius: inherit;
}

.point_box {

   width: auto;
   height: 35px;
   float: left;
   background-color: #ffffff88;
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   position: absolute;
   top: 13px;
   left: 13px;
   border-radius: 14px;
   padding: 1rem;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 5px;
}


.point_box svg {

   width: 16px;
   height: 16px;
   float: left;
   transform: translateY(-1px);
}

.point_box span {

   color: var(--theme2);
   font-size: 14px;
   transform: translateY(1px);
}

.title_article {

   width: 100%;
   text-align: right;
   float: right;
   font-size: 16px;
   color: var(--theme2);
   display: box;
   display: -webkit-box;
   line-clamp: 2;
   -webkit-line-clamp: 2;
   box-orient: vertical;
   overflow: hidden;
   font-family: 'yekan_Medium';
   margin: 16px 0 8px;
}

.about_article {

   width: 100%;
   text-align: right;
   float: right;
   font-size: 14px;
   color: var(--text_color4);
   display: box;
   display: -webkit-box;
   line-clamp: 2;
   -webkit-line-clamp: 2;
   box-orient: vertical;
   overflow: hidden;
   -webkit-box-orient: vertical;
}

.bottom_all_article {

   width: 100%;
   height: auto;
   float: right;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px;
   background-color: var(--text_color5);
   padding: 0.7rem 1.3rem;
   border-radius: 50px;
   margin-top: 15px;
   transition: 0.2s ease;
}

.bottom_all_article .date {

   float: right;
   font-size: 13px;
   color: var(--theme2);
   font-family: 'yekan_Medium';
   display: flex;
   justify-content: flex-start;
   align-items: center;
   gap: 8px;
   transition: 0.2s ease;
}
.bottom_all_article .date svg {

   width: 15px;
   height: 15px;
   float: right;
   fill: var(--theme2);
   transition: 0.2s ease;
}
.card_article:hover .bottom_all_article .date svg {

   fill: var(--theme);
}

.bottom_all_article .left_content_article {

   float: left;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 8px;
}

.bottom_all_article .left_content_article .like_article {

   float: left;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 5px;
   font-size: 14px;
   color: var(--theme2);
   font-family: 'yekan_Medium';
   transition: 0.2s ease;
}

.bottom_all_article .left_content_article .like_article svg {

   width: 17px;
   height: 17px;
   float: left;
   stroke: var(--theme2);
   fill: transparent;
   transform: translateY(-1.5px);
   transition: 0.2s ease;
}

.bottom_all_article .left_content_article .like_article.liked svg {

   stroke: transparent;
   fill: var(--theme);
}

.card_article:hover .bottom_all_article .left_content_article .like_article.liked svg {

   stroke: transparent;
   fill: var(--theme);
}

.card_article:hover .bottom_all_article .left_content_article .like_article:not(.liked) svg {

   stroke: var(--theme);
   fill: transparent;
}


.bottom_all_article .left_content_article .comments_article {

   float: left;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 5px;
   font-size: 14px;
   color: var(--theme2);
   font-family: 'yekan_Medium';
   transition: 0.2s ease;
}

.bottom_all_article .left_content_article .comments_article svg {

   width: 17px;
   height: 17px;
   float: left;
   stroke: var(--theme2);
   transform: translateY(-1px);
   transition: 0.2s ease;
}

.card_article:hover .bottom_all_article .left_content_article .comments_article svg  {
   stroke: var(--theme);
}

.card_article:hover .bottom_all_article {

   background-color: var(--theme_opacity5);
}
.card_article:hover .bottom_all_article * {

   color: var(--theme);
}

.btn_seeMore_article {

   width: auto;
   height: 48px;
   float: right;
   background-color: var(--theme2);
   border-radius: 10px;
   margin-top: 70px;
   cursor: pointer;
   transition: 0.2s ease;
}
.btn_seeMore_article:hover {
   
   background-color: var(--theme);
}

.btn_seeMore_article a {
   
   width: auto;
   height: 100%;
   float: right;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 6px;
   padding: 1.3rem;
   border-radius: inherit;
}

.btn_seeMore_article span {

   float: right;
   font-size: 15px;
   color: #fff;
   font-family: 'yekan_Medium';
}
.btn_seeMore_article svg {

   fill: #fff;
   width: 20px;
   height: 20px;
   transform: translateY(-1.5px);
}

.section_article .top_section {

   padding: 1.1rem 1rem 1.4rem;
}

.progressBar_fixed {

   position: fixed;
   top: 0;
   left: 0;
   height: 4px;
   background: var(--theme);
   width: 0%;
   z-index: 10000;
   border-radius: 0 0 20px 0;
   box-shadow: 0 0 20px 0 var(--theme_opacity3);
}


/* pagination */


.pagination_con , .pagination_con .pagination {

   width: 100%;
   height: auto;
   float: right;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   margin-top: 20px;
}
.pagination-items-con {

   width: auto;
   height: auto;
   float: right;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px;
   margin: 15px 0;
}
.pagination_con .pagination {

   gap: 10px;
}

.pagination_con .pagination li {

   width: 50px;
   height: 50px;
   float: right;
   border-radius: 7px;
   background-color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
   list-style: none;
   cursor: pointer;
   position: relative;
   transition: 0.2s ease;
   z-index: 0;
}
.pagination_con .pagination li span , .pagination_con .pagination li a {

   width: 100%;
   height: 100%;
   float: right;
   display: flex;
   justify-content: center;
   align-items: center;
   color: var(--theme2);
   font-family: 'yekan_Heavy';
   transition: 0.2s ease;
   font-size: 17px;
}


.pagination_con .pagination li::after {
   
   width: 50%;
   height: 3px;
   background-color: #fff;
   position: absolute;
   content: "";
   bottom: 0;
   border-radius: 30px 30px 0 0;
   transition: 0.2s ease;
   opacity: 0;
   visibility: hidden;
}
.pagination_con .pagination li.active::after {

   opacity: 1;
   visibility: visible;
}
.pagination_con .pagination li.active {

   background-color: var(--theme);
   box-shadow: 0 0 52px -12px var(--theme_opacity4);
   z-index: 2;
}
.pagination_con .pagination li.active span {

   color: #fff;
}

.pagination_con .pagination li:not(.active):hover {

   background-color: var(--theme_opacity5);
   z-index: 1;
}
.pagination_con .pagination li:not(.active):hover span , .pagination_con .pagination li:not(.active):hover a {

   color: var(--theme);
}


.arrow-pagination-btn , .arrow-pagination-btn:hover {

   background-color: transparent !important;
   box-shadow: none !important;
}
.arrow-pagination-btn svg {

   fill: var(--theme2);
   width: 20px;
   height: 20px;
   transition: 0.2s ease;
   float: right;
}

.arrow-pagination-btn.disabled {

   opacity: 0.5;
   pointer-events: none;
}

.arrow-pagination-btn.back-btn {

   transform: rotate(-180deg);
}



@media(max-width: 560px) {

   .pagination-items-con {

       width: 100%;
   }

   .pagination_con .pagination li.page-item {

       order: 0;
   }
   .pagination_con .pagination li.arrow-pagination-btn.back-btn {
       
       order: 2;
   }
   .pagination_con .pagination li.arrow-pagination-btn.next-btn {
       
       order: 3;
   }
}


@media(max-width: 1200px) {

   :root {
      --grid-col: 2;
   }
}

@media(max-width: 900px) {

   :root {
      --grid-col: 1;
   }
   .list_all_contents {

      display: block !important;
   }
   .lists  {

      width: 100% !important;
   }
}