body {
  font-size: 16px;
  margin: 0px;
  overflow-x: clip;

  /* ----------font-style --------*/
  --main-font: 'iranyekan', serif;
  /* ---------font-size ---------*/
  --title-font-size: 32px;
  --icon-head-info: 24px;
  --text-detail-1: 10px;
  --text-detail-2: 12px;
  --text-detail-3: 14px;
  --text-detail-4: 16px;
  --text-detail-5: 18px;
  /* ----------colors ----------*/
  --main-blue: #45658C;
  --second-blue: #2D4670;
  --third-blue: #243C65;
  --forth-blue: #3E5E73;
  --custom-color-primary: #F7F7F7;
  --custom-color-secondary: #E5E9EE;
  --custom-color-teritary: #C2C2C2;
  --custom-color-quaternary: #C4E1E0;
  --bg-octonary: #EAE6E1;
  --bg-octonary-1: #DAC2A8;
  --bg-octonary-2: #EAE5E1;
  --text-secondary : #ffff;
  --text-secondary-1: #AFAFAF;
  --text-secondary-2: #000000;
  --text-secondary-3: #EBE5E1;
  --text-secondary-4: #868686;
  --text-secondary-5: #4E4E4E;
  --text-secondary-6: #ECF0F4;
  --text-secondary-7: #3E5E73;
  --text-secondary-8: #909090;
  --text-secondary-9: #B5C1D1;
  --text-secondary-10: #505050;
  --text-secondary-11: #C03744;
  --text-secondary-12: #FD3B3B;
  --text-secondary-13: #ECF0F3;
  --text-secondary-14: #848484;
  --text-secondary-15: #3c4b5d;
  --text-secondary-16: #B9B9B9;
  --bg-footer: #F2EBE3;
  --btn-bg-1: #375170;
  --btn-bg-2: #837465;
  --log-in-bg: #0067A5;
  --Mainsecondary : #DAC2A8 ;
  --Mainprimary : #45658C ;
  /* background-color: #243C65; */
}


p {
  margin : 0;
}


.hide-scrollbar {

  -ms-overflow-style: none;  
  scrollbar-width: none;    
}


.hide-scrollbar::-webkit-scrollbar {
  display: none;
}



body::-webkit-scrollbar {
  width: 0.25rem;
}

body::-webkit-scrollbar-track {
  background: var(--text-secondary);
}

body::-webkit-scrollbar-thumb {
  background: var(--btn-bg-1);
}

* {
  font-family: 'iranyekan', serif; 

}

.font-size-xxsmall {
  font-size: var(--text-detail-1);
}

.font-size-xsmall {
  font-size: var(--text-detail-2);
}

.font-size-small {
  font-size: var(--text-detail-3);
}

.font-size-body {
  font-size: var(--text-detail-4);
}

.font-size-body-1 {
  font-size: var(--text-detail-5);
}

.font-size-heading {
  font-size: var(--title-font-size);
}

.font-size-subheading {
  font-size: var(--icon-head-info);
}

.zr-line-height {
  line-height: 180%;
}

.zr-line-height-detail-blog {
  line-height: 200%;
}

.zr-row {
  display: flex;
  flex-direction: row;
}

.zr-center-item {
  align-items: center;
}

.zr-a-style {
  color: inherit;
  text-decoration: none;
}

.zr-32-gap {
  gap: 32px;
}

.zr-16-gap {
  gap: 16px;
}

.zr-12-gap {
  gap: 12px;
}

.zr-10-gap {
  gap: 10px;
}

.zr-5-gap {
  gap: 5px;
}

.zr-4-gap {
  gap: 4px;
}

.zr-strikethrough {
  text-decoration: line-through;
}

.zr-bottom-border {
  border-bottom: 1px solid var(--text-secondary-1);
}

.zr-general-bottom-border {
  border-bottom: 1px solid var(--text-secondary-1);
}

.zr-general-top-border {
  border-top: 1px solid var(--text-secondary-1);
}

.zr-scratch {
  text-decoration: line-through;
}

/* .zr-ml-32 {
margin-left: 32px !important;
} */

.zr-bg-white {
  background-color: var(--custom-color-primary);
  height: 170px !important;
}

.zr-bg-contact-us {
  background-color: var(--bg-octonary-2);
}

.zr-mi-zero {
  margin-inline: 0px !important;
}


.zr-reverse-row

/* -----------HEADER---------- */

.zr-main-color {
  color: var(--main-blue);
}

.zr-main-font {
  font-family: var(--main-font);
}

.zr-detail-color {
  color: var(--text-secondary-1);
}

.zr-white-color {
  color: var(--text-secondary);
}

.zr-black-color {
  color: var(--text-secondary-2) !important;
}

.zr-align-center {
  align-items: center;
}

.zr-border-right {
  border-right: 1px solid var(--text-secondary-2);
  /* width: 95px; */
}

.zr-full-width {
  width: 100%;
}

.zr-header {
  position: fixed;
  top: 0;
  /* left: 0; */
  width: 100%;
  z-index: 1000;
  background-color: var(--text-secondary);
}

.zr-header-max-width {
  max-width: 100%;
}

.zr-bg-ad {
  background-color: var(--main-blue);

}

.zr-head-info {
  font-family: var(--main-font);
  font-size: 12px;
  color: var(--text-secondary);
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1678px;
  margin: 0 auto;

}

.zr-golde-price {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.zr-call-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.zr-welcome-text {
  display: block;
}

.zr-head-img-size {
  height: var(--icon-head-info);
  width: var(--icon-head-info);
}

.zr-head-img-size-close {
  height: var(--icon-head-info);
  width: var(--icon-head-info);
  cursor: pointer;
}

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


.zr-container {
  max-width: 1677px;
  margin: 0 auto;
}

.zr-container-banner-1 {
  max-width: 1256px;
  margin: 0 auto;
}

.zr-container-banner-2 {
  max-width: 1256px;
  margin: 0 auto;
}

.zr-container-special-products {
  /*max-width: 1635px;*/
  width: 100%;
  margin: 0 auto;
}

.zr-container-mega {
 /* max-width: 1677px;*/
  margin: 0 auto;
  padding-inline: 2rem;
}

.zr-nav {
  font-family: var(--main-font);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  direction: rtl;
  height: 5rem;
  box-sizing: border-box;
}

.zr-hamburger {
  font-family: var(--main-font);
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  direction: rtl;
  height: 5rem;
  box-sizing: border-box;
}

.zr-nav ul {
  list-style: none;
  padding: 4px;
  margin: 0px;
}

.zr-hamburger ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.zr-first-ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  direction: rtl;
  width: 650px;
  height: 57px;
}

.zr-first-ul-li {
  list-style: none;
  padding: 0px;
  margin: 0px;
  width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
  color: var(--text-secondary-1);
  transition: color 0.3s ease-in-out;
  gap: 8px;
}

.zr-first-ul .zr-first-ul-li:hover {
  color: var(--text-secondary-2);
}

.zr-first-ul .zr-first-ul-li::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background-color: var(--main-blue);
  transition: width 0.3s ease;
  margin-top: -2px;
  margin-left: auto;
}

.zr-first-ul .zr-first-ul-li:hover::after {
  width: 100%;
}

.zr-first-ul .zr-first-ul-li a {
  color: inherit;
  text-decoration: none;
}

.zr-first-ul-li.active a {
  color: var(--text-secondary-2);
}

/* ----------------------MEGA MENU ------------------*/
.zr-products-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 84px;
  gap: 10px;
  /* padding-bottom: 10px; */
}

.zr-products-nav a {
  color: inherit;
  text-decoration: none;
}

a {
  color: inherit;
  text-decoration: none;
}

.zr-products-nav .zr-img-arrow-hover {
  background: url('../IMAGES/icon/arrow-up-1.png') no-repeat center center;

  width: 24px;
  height: 24px;
  /* transition: background-image 0 ease-in-out; */
}

.zr-products-nav a {
  color: var(--text-secondary-1);
  /* transition: color 0s ease-in-out; */
}

.zr-products-nav:hover a {
  color: var(--text-secondary-2);
}

.zr-products-nav:hover .zr-img-arrow-hover {
  background: url('../IMAGES/icon/arrow-down-hover.svg') no-repeat center center;
  color: var(--text-secondary-2);
}



/* ----------------- */
.zr-mega-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 406px;
  width: 100vw;
  overflow: hidden;
  background-color: var(--text-secondary);
  transition: height 0.3s ease;
  z-index: 999;
  pointer-events: none;
  display : none;

}

.zr-products-nav:hover .zr-mega-nav,
.zr-products-nav:has(:hover) .zr-mega-nav {
  display : block;
  pointer-events: auto;
}

.zr-mega-content {
  display: flex;
  flex-direction: row;
  gap: 32px;
}

.zr-mega-category {
  display: flex;
  flex-direction: row;
  gap: 32px;
}

/* ------------------------------ */
.zr-border-bottom-mega {
  border-bottom: 1px solid var(--custom-color-teritary);
  padding-right: 64px;
  margin-bottom: 8px;
}

.zr-submenu-layout {
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  justify-items: center;
  gap: 32px;
  width: 187.3px;
  /* height: 302px; */
  direction: rtl;
  padding-top: 10px;
}

.zr-a-submenu {
 /* width: 171.3px; */
  flex: 1 1 170px;
  min-width: 120px;
  max-width: 200px;
  max-height: 37px;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.zr-a-submenu:hover {
  background-color: var(--text-secondary);
}

/* ----- */
.zr-women-mega-menu {
  /* width: 582px;*/
  transition: background-color 0.3s ease;
}

.zr-women-mega-menu:hover {
  /* width: 582px;*/
  background-color: var(--custom-color-primary)
}

.zr-women-submenu {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 320px;
  height: 763px;
  width: 100%;
  gap: 18px;
  justify-content: flex-start;
  align-items: center;
  max-width: 582px;
  align-content: flex-start;
  position : relative ;
}


/* ---- */
.zr-men-mega-menu {
  width: 384.6px;

  transition: background-color 0.3s ease;

}

.zr-men-mega-menu:hover {
  background-color: var(--custom-color-primary)
}

.zr-men-submenu {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 320px;
  height: 763px;
  width: 384px;
  gap: 18px;
  justify-content: flex-start;
  align-items: center;
}

/* ---------- */
.zr-childern-mega-menu {
  width: 188px;
  transition: background-color 0.3s ease;
}

.zr-childern-mega-menu:hover {
  background-color: var(--custom-color-primary)
}

.zr-childern-submenu {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 320px;
  height: 763px;
  width: 188px;
  gap: 18px;
  justify-content: flex-start;
  align-items: center;
}


.zr-mega-menu-pictuer {
  width: 379px;
  height: 406px;
}

/* ----------------------------- */
.zr-third-ul {
  display: flex;
  align-items: center;
  gap: 21px;
  width: 650px;
  justify-content: flex-end;
}

.zr-third-ul .zr-profile-container {
  width: 95px;
  height: 40px;
  border-right: 1px solid black;
  padding-right: 19px;
  padding-top: 4px;
  background-color: var(--text-secondary);
  position: relative;
  display: inline-block;
}

.zr-profile-icons::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px;
}

.zr-profile a {
  cursor: pointer;
}

.zr-profile-img {
  width: 32px;
  height: 32px;
  background: url('../IMAGES/icon/Profile.svg') no-repeat center center;
  transition: background-image 0s ease-in-out;
}

.zr-profile-container:hover .zr-profile-img {
  background: url('../IMAGES/icon/Profile-hover.svg') no-repeat center center;
}

.zr-profile-img-arrow {
  width: 32px;
  height: 32px;
  background: url('../IMAGES/icon/arrow-down.svg') no-repeat center center;
  transition: transform 0s ease;
}

.zr-profile-container:hover .zr-profile-img-arrow {
  background: url('../IMAGES/icon/arrow-down-profile-hover.svg') no-repeat center center;
}

.zr-profile-img-arrow.rotate-reverse {
  transform: rotate(180deg);
}

.rotate-180 {
  transform: rotate(180deg);
  /* transition: transform 0.3s ease-in-out; */
}

.zr-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-items: center;
  gap: 8px;
  position: absolute;
  left: 0px !important;
  height: 152px;
  width: 167px;
  overflow: hidden;
  border-radius: 8px;
  background-color: var(--custom-color-primary);
  transition: height 0s ease-out, width 0s ease-out;
  z-index: 1001;
  pointer-events: auto;
  filter: drop-shadow(0px 0px 10px #0000001A);
  top: 118%;
}

.zr-profile-box {
  width: 147px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--custom-color-primary);
}


.zr-profile-box-container {
  display: none;
}

/* --------------------------- */
/* cart */
.zr-basket-icon {
  padding-top: 5px;
  width: 32px;
  height: 32px;
  background: url('../IMAGES/icon/basketbadge.svg') no-repeat center !important;
  /* background-position: center; */


}

.zr-basket-icon::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px;


}



.zr-add-to-cart-container .zr-badge-number-container {
  /* background-image: url('../IMAGES/icon/hover-basket-badge.svg') !important; */
  /* display: flex;*/
}

.zr-add-to-cart-container {
  position: relative;
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
}

/*.zr-add-to-cart-container:hover {
border-radius: 4px;
background-color: var(--custom-color-primary);
}*/



.zr-child-basket-box-container {
  width: 480px;
  height: 789px;
  position: absolute;
  /* top: 106px; */
  /* left: 136px; */
  filter: drop-shadow(0px 0px 10px #0000001A);
  border-radius: 4px;
  background-color: var(--text-secondary);
  /*  */
  display: flex;
  position: absolute;
  top: 118%;
  left: 0;
  background: white;
  border: 1px solid #ccc;
  /* padding: 10px; */
  z-index: 100;
  /* min-width: 200px; */
  justify-content: center;
  margin-top: -1rem;
  margin-left: 1rem;
}

.zr-child-basket-box-container.sp-d-flex {
  display: flex !important; /* وقتی کلیک کردی، نشون داده بشه */
}

.zr-successful-discount-code-container {
  position: absolute;
  width: 400px;
  height: 99px;
  background-color: var(--text-secondary);
  top: 720px;
  left: 1326px;
  border-radius: 4px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-items: center;
  font-family: var(--main-font);
}

.zr-badge-number-container {
  background-color: var(--text-secondary-12);
  width: 15px;
  height: 15px;
  position: absolute;
  top: 21px;
  border-radius: 22px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ffff;
  font-size: 12px;
  display : none;
}

.zr-badge-number {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 8px;
  font-weight: 500;
  font-family: var(--main-font);
}

.zr-layout-cart {
  display: flex;
  flex-direction: column;
  /* gap: 10px; */
  overflow: hidden;
  height: 761px;
  justify-content: space-between;
}

.zr-title-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-left: 16px;
  padding-right: 16px;
}

.zr-basket-section-1 {
  width: 144px;
  height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 7px;
}

.zr-shopping-cart-title {
  width: 132px;
  height: 32px;
  display: flex;
  flex-direction: row-reverse;
  gap: 3px;
  align-items: center;
}

.zr-shopping-number {
  border-radius: 100px;
  border: 1px solid var(--text-secondary-9);
  background-color: var(--text-secondary-9);
  color: var(--text-secondary-2);
  font-family: var(--main-font);
  font-size: var(--text-detail-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  height: 20px;
  width: 20px;
}

.zr-deadline-time {
  width: 56px;
  height: 28px;
  border-radius: 24px;
  background-color: var(--bg-octonary-1);
  font-size: var(--text-detail-3);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zr-basket-section-2 {
  width: 146px;
  height: 28px;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
}

/* -- */
.zr-orders-basket-container {
  height: 520px;
  background-attachment: fixed;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-bottom: 1px solid var(--custom-color-teritary);
}

.zr-orders-basket-container::-webkit-scrollbar {
  display: none;
}

.zr-scroll-bg {
  height: 745px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  padding-bottom: 16px;
  flex: 1;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.zr-scroll-bg::-webkit-scrollbar {
  display: none;
}



.zr-order-box {
  width: 448px;
  height: 188px;
  background-color: var(--custom-color-primary);
  border-radius: 4px;
  border: 1px solid var(--custom-color-teritary);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.zr-detail-order {
  width: 424px;
  height: 122px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 10px;
}

.zr-desc-order {
  width: 294px;
  height: 122px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.zr-order-title-style {
  font-size: var(--text-detail-4);
  font-weight: 500;
}

.zr-order-desc-style {
  font-size: var(--text-detail-4);
  font-weight: 500;
  color: var(--text-secondary-1);
}

.zr-order-property-style {
  font-size: var(--text-detail-3);
  font-weight: 500;
}

.zr-toman-style {
  font-size: var(--text-detail-3);
  font-weight: 500;
}

.zr-img-order {
  max-width: 120px;
  max-height: 120px;
  border-radius: 8px;
}

.zr-img-order img {
  width: 100%; 
  height: 100%;
  object-fit: cover;

}

.zr-price-order {
  width: 424px;
  height: 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.zr-tarsh {
  width: 120px;
  height: 32px;
  display: flex;
  justify-content: center;

}

.zr-price {
  display: flex;
  gap: 8px;
  align-items: center;
}

.zr-more-detail-container {
  /* width: 480px; */
  height: auto;
  /* position: absolute; */
  z-index: 1000;
  bottom: 0;
  display: flex;
  justify-content: center;
  background-color: var(--text-secondary);
  align-items: center;
  flex-direction: column;
  gap: 8px;
  margin-top: 21px;

}


.zr-title-more-detail {
  display: flex;
  justify-content: center;
  gap: 8px;
  height: 33px;
  align-items: center;
  background-color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
}

.zr-arrow-detail-size {
  width: 16px;
  height: 16px;
}

.zr-whole-peice {
  width: 448px;
  height: auto;
  border: 1px solid var(--custom-color-teritary);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: var(--custom-color-primary);
}

.zr-more-detail-toggle {
  display: none;
}

.zr-total-price {
  height: 41px;
  /* border-top: 1px solid var(--text-secondary-1); */
  background-color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
  padding-left: 8px;
}

.zr-total-price-toggle-layout {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
}

.zr-total-btn-toggle {
  display: flex;
  justify-content: center;
  justify-items: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background-color: var(--main-blue);
}

.zr-total-btn-toggle img {
  width: 14px;
  height: 14px;
}

.zr-final-price-container {
  height: 41px;
  /* border-top: 1px solid var(--text-secondary-1); */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
  padding-left: 8px;
}

.zr-btns-submit {
  display: flex;
  justify-content: space-between;
  width: 448px;

}

.zr-cancel-btn {
  width: 220px;
  height: 61px;
  border-radius: 4px;
  color: var(--text-secondary-2);
  background-color: var(--text-secondary);
  border: 1px solid var(--custom-color-teritary);
  font-family: var(--main-font);
  /* -- */
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: color 0.3s ease;
  z-index: 1;
}

.zr-cancel-btn::before {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-color: var(--bg-footer);
  border: 1px solid var(--main-blue);

  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.5s ease;
  transform-origin: bottom center;
  z-index: -1;
}

.zr-cancel-btn:hover::before {
  transform: scale(1);
}

.zr-final-btn {
  width: 220px;
  height: 61px;
  color: var(--text-secondary);
  background-color: var(--main-blue);
  border-radius: 4px;
  border: none;
  font-family: var(--main-font);
  /*  */
  /* font-weight: 500; */
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: color 0.3s ease;
  z-index: 1;
}

.zr-final-btn::before {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-color: var(--btn-bg-1);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.5s ease;
  transform-origin: bottom center;
  z-index: -1;
}

.zr-final-btn:hover::before {
  transform: scale(1);
}


.zr-discount-code {
  width: 448px;
  height: 61px;
  display: flex;
  align-items: center;
  justify-content: center;

}

.zr-discount {
  width: 140px;
  height: 37px;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 8px;
  /* border-bottom: 1px solid var(--main-blue); */
}

.remove-discount {
  width: 140px;
  height: 37px;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  /* gap: 8px; */
  border-bottom: 1px solid var(--main-blue);
}

.zr-red {
  color: var(--text-secondary-11);
}

.zr-passive-discount {
  width: 140px;
  height: 37px;
  display: none;
  align-items: center;
  align-content: center;
  justify-content: center;
  border-bottom: 1px solid var(--text-secondary-11);
}

.zr-active-discount {
  border-bottom: 1px solid var(--main-blue);
  width: 140px;
  height: 37px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  align-content: center;
  gap: 8px;
}

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

.zr-search-container {
  position: relative;
  cursor: pointer;
  width: 40px;
  height: 40px;
  /* padding-bottom: 7px; */
}

.zr-search-container-img {
  background: url('../IMAGES/icon/search.svg') no-repeat;
  margin-top: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zr-search-container-img:hover {
  background: url('../IMAGES/icon/hover-search.svg') no-repeat;
}

.zr-search-input {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  gap: 8px;
  position: absolute;
  top: 36px;
  left: 0;
  right: -200px;
  height: 40px;
  width: 231px;
  border-radius: 4px;
  border: 1px solid var(--custom-color-teritary);
  background-color: var(--custom-color-primary);
  z-index: 999;
  filter: drop-shadow(0px 0px 10px #0000001A);
  margin-top: 10px;
  transition: visibility 0.3s, opacity 0.3s;
  padding-right: 7px;
}

.zr-search-input.show {
  visibility: visible;
  opacity: 1;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.zr-search-input input {
  background-color: var(--custom-color-primary);
  border: none;
  border-radius: 4px;
  width: 193px;
  /* height: 40px; */
  font-family: var(--main-font);
  font-size: var(--text-detail-3);
}

.zr-search-close-none[type="search"]::-webkit-search-cancel-button {
  display: none;
}

.zr-search-close-none[type="search"]::-ms-clear {
  display: none;
}

.zr-search-close-none[type="search"]::-ms-reveal {
  display: none;
}

.zr-search-close-none[type="search"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.zr-search-input input:focus {
  border: none;
  outline: none;
}

.zr-logo-img {
  width: 100%;
  height: auto;
  padding-top: 4px;
  object-fit: contain;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* .zr-discount */



/* --------------FOOTER------------------ */


.zr-footer-container {
  /*height: 425px;*/
  width: 100% !important;
  background-color: var(--bg-footer);
  display: flex;
  justify-content: center;
  padding-top: 50px;
  /* align-items: center; */

  position: relative;
  padding-block: 70px;
}


.zr-footer-container::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 1;
}

.zr-footer-container::after {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 16px;
  background-image: url('../IMAGES/icon/section-spliter.png');
  width: 296px;
  height: 34px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 2;
}




.zr-footer {
  width: 1440px;
 /* height: 333px;*/
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  gap: 41px;
  font-family: var(--main-font);
}

.zr-footer-section-one {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  border-top: 1px solid var(--text-secondary-1);
  border-bottom: 1px solid var(--text-secondary-1);
  height: 56px;
}

.zr-footer-section-one div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 40px;
  font-weight: 400;
  font-size: var(--text-detail-5);
}

.zr-right-border-solid {
  border-right: 1px solid var(--text-secondary-1);
}

.zr-footer-section-two {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
 /* height: 237px;*/
  width: 1440px;
}


.zr-footer-sec-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  /*height: 237px;*/
  width: 480px;
  justify-content: center;
}

.zr-symbol-logo {
  width: 128px;
  height: 90px;
}

.zr-social-media-footer-container {
  display: flex;
  flex-direction: row-reverse;
  gap: 32px;
}

.zr-social-media-footer {
  width: 33px !important;
  height: 33px !important;
}


.zr-footer-sec-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 480px;
  /*height: 237px;*/
  justify-content: center;
  direction: rtl;
  gap: 16px
}

.zr-footer-sec-2 div {
  width: 416px;
}

.zr-footer-call-info {
  display: flex;
  flex-direction: column;
}

.zr-footer-sec-3 {
  display: flex;
  width: 480px;
  flex-direction: column;
  align-items: center;
  direction: rtl;
  /*gap: 16px;*/
}

.zr-footer-sec-3 img {
  width: 164px;
  height: 66px;
}

.zr-footer-sec-3 p {
  width: 416px;
  height: 125px;
  text-align: justify;
}

.zr-footer-section-two {
  flex-direction: row;
}

.zr-order-title-responsive {
  font-weight: 500;
  font-size: var(--text-detail-4);
}

.zr-add-to-cart-container {
  position: relative;
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  margin-left: 16px;
}

.zr-spacer {
  display: none;
}



/* main page */
.zr-first-section {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  margin-top: 122px;
  height: 461px !important;
  background-color: var(--custom-color-primary);
  cursor: grab;
  width: 100% !important;
  opacity: 0;
  visibility: hidden;
}



.zr-first-section.initialized {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}

.zr-first-single-slider:active {
  cursor: grabbing;
}

.zr-banner-img-main-page {
  width: 100%;
  max-height: 479px;
  object-fit:cover;
}



.zr-banner-img-responsive {
  display: none !important;
}

.zr-sigle-slide-title-1 {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  direction: rtl;
  padding-right: 127px;
}

.zr-Rectangle1 {
  background: url('../IMAGES/banners/Rectangle1.svg') no-repeat;
  position: absolute;
  right: -6px;
  bottom: 296px;
  height: 114px;
  width: 630px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--main-font);
  font-size: var(--title-font-size);
  font-weight: 800;
  color: var(--main-blue);
}

.zr-Rectangle2 {
  background: url('../IMAGES/banners/Rectangle2.svg') no-repeat;
  position: absolute;
  right: 0px;
  bottom: 154px;
  height: 143.5px;
  width: 749.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-content: center;
  justify-content: center;
  gap: 16px;
  padding-right: 127px;
  font-family: var(--main-font);
  direction: rtl;
  font-weight: 400;
  font-size: var(--text-detail-4);
  line-height: 180%;
}

.zr-banner-titles {
  position: absolute;
  z-index: 2;
  width: 100%;
  top: 481px;
  left: 0;
}

.zr-title-2-desc-size {
  width: 440px;
}

/* --ANIMATION-- */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.zr-animate-fade-in-right {
  animation: fadeInRight 0.5s ease-out forwards;
}

/* -------------------- */
.zr-banner-title-one {
  font-family: var(--main-font);
  color: var(--main-blue);
  font-size: var(--title-font-size);
  position: absolute;
  right: 60px;
  bottom: 79px;
  font-weight: 800;
  width: 402px;
  height: 45px;
}

.zr-banner-title-two {
  font-family: var(--main-font);
  position: absolute;
  right: 125px;
  bottom: -30px;
  height: 58px;
  width: 441px;
  direction: rtl;
  font-weight: 400;
}

.zr-banner-btn {
  background-color: var(--main-blue);
  height: 2.625rem;
  width: 9.875rem;
  right: 0px;
  /* position: absolute; */
  /* top: 38px; */
  border: none;
  border-radius: 4px;
  color: var(--text-secondary);
  font-family: var(--main-font);
  font-size: 16px;
  font-weight: 700;
  /*  */
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: color 0.3s ease;
  z-index: 1;
}

.zr-banner-btn::before {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.5s ease;
  transform-origin: bottom center;
  z-index: -1;
}

.zr-banner-btn:hover::before {
  transform: scale(1);
}


/* ------------- */
.zr-second-section {
  /*height: 361px;*/
  align-items: center;
  display: flex;
  justify-content: center;
  /* gap: var(--title-font-size); */
  /* max-width: 1256px; */
  /* margin: 0 auto; */

}

.zr-three-imgs {
  /* width: 1920px; */
  /* height: 368px; */
  /*  display: flex;*/
  gap: 16px;
  justify-content: center;
  align-items: center;
  /* flex-wrap: wrap; */
  /* padding-right: 120px; */
  padding-block: 5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 342px;
}

.zr-jewellery-size {
  /*width: 25.5rem;
  height: 12.75rem;*/
}

/* ---------------- */
.zr-spliter-one {
  display: none;
  width: 296px;
  height: 35px;
  position: absolute;
  /* left: 812px; */
  top: 975px;
}

/* ------------------CATEGORY---------------- */

.zr-third-section {
  background-image: linear-gradient(19deg, var(--custom-color-primary) 15%, var(--custom-color-secondary) 15%, var(--custom-color-secondary) 85%, var(--custom-color-primary) 85%);
  font-family: var(--main-font);
  height: 748px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* gap: 10px; */
  position: relative;
  /* padding-top: 60px; */
  flex-direction: column;
}

.zr-third-section::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 1;
}

.zr-third-section::after {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 16px;
  background-image: url('../IMAGES/icon/section-spliter.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 2;
  width: 296px;
  height: 34px;
}


.zr-category-1-title {
  /* display: none; */
  /* position: absolute; */
  /* top: 1095px !important; */
  width: 415px;
  height: 64px;
  /* left: 752px; */
}

/* ----- */

.zr-category-container {
  display: flex;
  gap: 10px;
  /* height: 317.9px; */
  align-items: center;
}

.zr-category-product {
  /* width: 264px; */
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 424px;
  min-width: fit-content;
  /* border-radius: 4px; */
  /* background-color: var(--custom-color-primary); */

}

.zr-cat-img {
  width: 264px;
  height: 264px;
  /* background: url('../IMAGES/category/ring.svg') no-repeat center/cover; */
  transition: height 0.3s ease, width 0.3s ease;
}

.zr-cat-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zr-category-product:hover .zr-cat-img {
  width: 340px;
  height: 340px;
}

/* 70 height */
.zr-layout-category {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;

}

.zr-polygon {
  height: 15px;
  width: 183px;
  background-color: var(--text-secondary);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  transition: height 0.3s ease, width 0.3s ease, clip-path 0.3s ease;
}

.zr-category-product:hover .zr-polygon {
  height: 80px;
  width: 233px;
  background-color: var(--text-secondary);
  clip-path: polygon(50% 100%, -170% 0%, 273% 0%);
}

.zr-category-title {
  font-weight: 500;
  font-size: 18px;
  position: absolute;
  top: 283px;
  transition: top 0.3s ease;
}

.zr-category-product:hover .zr-category-title {
  top: 361px;
}

.zr-slider-img {
  position: absolute;
  top: 1500px;
  left: 814px;
}

/* ---------------- */
.zr-forth-section {
  display: flex;
  height: 776px;
  width: 100%;
  background-color: var(--bg-octonary);
  justify-content: flex-start !important;
}

.zr-forth-section-banner {
  /* background: url('../IMAGES/banners/ring-banner.svg') no-repeat center/cover; */
  width: 1260px;
  height: 100%;
}
.zr-forth-section-banner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.polygon-banner {
  display: flex;
  align-items: center;
}

/* .zr-poly-img {} */
.zr-polygon-banner {
  background-color: var(--text-secondary);
  clip-path: polygon(95% 0, 100% 50%, 95% 100%, 0 100%, 0 0);
  width: 551px;
  height: 348px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  direction: rtl;
}

.polygon-container {
  width: 525px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.zr-forth-banner-title-1 {
  /* position: absolute; */
  top: 1899px;
  right: 124px;
  font-family: var(--main-font);
  color: var(--main-blue);
  font-size: var(--title-font-size);
  font-weight: 800;
}

.zr-forth-banner-title-2 {
  /* position: absolute; */
  top: 1952px;
  right: 124px;
  font-family: var(--main-font);
  font-size: var(--text-detail-4);
  font-weight: 400;
}

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

.zr-fifth-section {
  height: 233px;
  width: 100%;
  background-image: linear-gradient(to right, var(--main-blue), var(--second-blue), var(--main-blue));
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 16px;
  position: relative;
  padding-top: 22px;
}

.zr-fifth-section::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 1;
}

.zr-fifth-section::after {
  content: "";
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 16px;
  background-image: url('../IMAGES/icon/section-spliter.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 2;
  width: 296px;
  height: 34px;
}


.zr-spliter-two {
  width: 296px;
  height: 35px;
  position: absolute;
  top: 2500px;
  /* left: 812px; */
}

.zr-shape-category-title {
  font-family: var(--main-font);
  font-size: var(--icon-head-info);
  color: var(--text-secondary);
  font-weight: 700;
}

.zr-shape-category {
  display: flex;
  flex-direction: row;
  gap: 15px;
  width: 100%;
}

.zr-shape-category-responsive {
  display: none !important;
}

.zr-each-category-shape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 96px !important;
  max-height: 124px !important;
  transition: background-color 0.3s ease-in-out;

}

.zr-each-category-shape:hover {
  background-color: var(--third-blue);

}

.zr-each-category-shape img {
  max-height: 80px;
  max-width: 80px;
  margin: auto;
  object-fit: cover;
}

.zr-shape-category-label {
  font-family: var(--main-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
}

.zr-section-sixth {
  background-color: var(--bg-octonary);
  height: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 16px;
}

.zr-special-title {
  /* width: 492.76953125px; */
  margin-top: 60px;
  width: 100% !important;
  height: 64px !important;
}

.zr-special-products-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 65px !important;
  padding-bottom: 20px;

}

.zr-special-products {
  max-width: 1340px;
  margin : auto;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  display: flex;
}




.zr-container-products {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 267px;
  max-height: 342px;
  width: 100% !important;
  /*aspect-ratio: 267 / 342;*/
}

.zr-discount-label-1 {
  position: absolute;
  top: 35px;
  right : 0;
  /*background-color: var(--text-secondary);*/
  /* padding: 5px 10px; */
  border-radius: 4px;
  font-family: var(--main-font);
  font-size: 12px;
  z-index: 2;
  transition: none;
  /*width: 141px;*/
  height: 32px;
  display: flex;
  align-content: center;
  align-items: center;
  /* flex-direction: row-reverse !important;*/
 /* gap: 5px;*/
  margin-right: 4px;
  justify-content: flex-end;
  background : #ED2E2E ;
  flex-direction: row-reverse;
  margin-right: 4px;
}

.zr-deadline-txt {
  background :  var(--text-secondary);
  width: 100%;
  height: 91%;
  margin-left: 1px;
  border-radius: 4px;
  flex-direction: row-reverse;
  padding-inline : 4px;
}

.zr-deadline-txt span {
  white-space : nowrap;
}

.zr-circle {
  background-color: #ED2E2E ;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  /* width: 30px;*/
  border-radius: 4px;
  padding: 4px;
  text-align : center;
  white-space: nowrap;
}


.zr-img-product {
  position: relative;
  height: 264px;
  max-width: 267px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* background-image: url(../IMAGES/product/special-card.jpg); */
  background-size: cover;
  clip-path: polygon(50% 0, 100% 12%, 100% 100%, 0 100%, 0 12%);
  background-position: center;
}
.zr-img-pro-layout{
  max-width: 267px;
  max-height: 272.5px;
  position: absolute;
  z-index: -1;
}
.zr-img-pro-layout img{ 
  width: 100%;
  /* height: 272.5px;*/
  /* width: 100%;
  height: 100%; */
  object-fit: cover;
  min-width: 267px;
  min-height: 272.5px;
}

.zr-container-products .zr-label-product {
  opacity: 1;
  transition: opacity 0.2s ease;
  direction: rtl;
}

.zr-container-products:hover .zr-label-product {
  opacity: 0;

}

.zr-container-products:hover .zr-title-product-card {
  height: 68px;
  gap: 10px;
}

.zr-title-product-card {
  background-color: var(--text-secondary);
  height: 35px;
  width: 100%;
  display: flex;

  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  transition: height 0.3s ease-in, gap 0.3s ease-in;
}

.zr-title-product-card span{
  padding-inline: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; 
}


.zr-see-detail {
  height: 0px;
  width: 0px;
  border: none;
  border-radius: 4px;
  font-family: var(--main-font);
  font-size: var(--text-detail-1);
  background-color: var(--main-blue);
  color: var(--text-secondary);
  opacity: 0;
  transition: height 0.4s ease, opacity 0.4s ease, width 0.4s ease, color 0.3s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;

  z-index: 1;
}

.zr-see-detail::before {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.5s ease;
  transform-origin: bottom center;
  z-index: -1;
}

.zr-see-detail:hover::before {
  transform: scale(1);
}


.zr-container-products:hover .zr-see-detail {
  height: 25px;
  opacity: 1;
  width: 99px;
}



.zr-title-product-card span {
  font-family: var(--main-font);
  font-size: 14px;
  font-weight: 500;

}

.zr-label-product {
  display: flex;
  justify-content: flex-start;
  margin-right: 5px;
  margin-bottom: 10px;
  gap: 5px;
}




/* ---DETAIL-PRODUCT-CARD--- */

.zr-details-product {
  align-items: center;
  padding-bottom: 25px;
  height: 75px;
  max-width: 267.6px;
  width: 100%;
  background-color: var(--text-secondary);
  clip-path: polygon(100% 0, 100% 60%, 50% 100%, 0 60%, 0 0);
  display: flex;
  justify-content: center;
  gap: 29px;
  font-family: var(--main-font);
}

.zr-container-products:hover .zr-details-product {
  background-color: var(--text-secondary-13);
}

.zr-detail-sec-1 {
  direction: rtl;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  /* gap: 8px; */
  height: 43px;
  justify-content: center;
}

.pd-product-card {
  padding-right: 13px;
}

.zr-detail-sec-2 {
  width: 102px;
  height: 44px;
  display: flex;
  align-items: center;
  direction: rtl;
  gap: 7px;
}

.zr-toman-color {
  color: var(--text-secondary-1);

}

.zr-show-btn {
  background-color: var(--bg-octonary-1);
  width: 152px;
  height: 48px;
  border: none;
  border-radius: 4px;
  font-family: var(--main-font);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: color 0.3s ease;
  z-index: 1;
}

.zr-show-btn:hover {
  color: var(--text-secondary);
}

.zr-show-btn::before {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-color: var(--btn-bg-2);
  border: 1px solid var(--main-blue);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.5s ease;
  transform-origin: bottom center;
  z-index: -1;
}

.zr-show-btn:hover::before {
  transform: scale(1);
}

.zr-banner-experience-responsive {
  display: none;
}

.zr-banner-experience {
  background-color: var(--text-secondary);
  clip-path: polygon(4% 0%,
    0% 50%,
    3% 100%,
    96% 100%,
    100% 50%,
    96% 0%);
  width: 1684.4px;
  height: 699px;
  display: flex;
  flex-direction: row;
}

.zr-section-seventh {
  height: 699px;
  display: flex;
  justify-content: center;
  background-color: var(--custom-color-primary);
}

.zr-banner-experience-sec-1 {
  width: 922px;
  height: 701px;
  /* background: url('../IMAGES/banners/experience-banner.svg') no-repeat; */
  -webkit-mask-image: linear-gradient(to left, transparent 0%, var(--text-secondary-2) 30%);
  mask-image: linear-gradient(to left, transparent 0%, var(--text-secondary-2) 30%);

}
.zr-banner-experience-sec-1 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.zr-banner-experience-sec-2 {
  width: 922px;
  height: 701px;
  direction: rtl;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 90px;
}

.zr-banner-experience-sec-2-layout {
  width: 453px;
}

.zr-banner-options {
  display: flex;
  flex-direction: row;
  gap: 32px;
}

.zr-options-container {
  width: 184px;
  height: 96px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.zr-options-container-item {
  display: flex;
  flex-direction: row;
  font-family: var(--main-font);
  gap: 16px;
  align-items: center;
  color: var(--text-secondary-14);
  font-size: var(--text-detail-4);
  font-weight: 500px;
}

.zr-options-container-item img {
  width: 32px;
  height: 32px;

}

.zr-experience-title {
  margin-bottom: 41px;
}

.zr-experience-desc {
  margin-bottom: 69px;
}

/* section 8  */
.zr-section-eighth {
  height: 697px;
  background-color: var(--custom-color-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.zr-diamond {
  width: 685px;
  height: 509.6px;
}

.zr-social-media-section {
  height: 651.8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  height: 401px;
  bottom: -104px;
}

.zr-social-media-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  bottom: 260px;
  font-family: var(--main-font);
  gap: 40px;
}

.zr-social-media-img-size {
  width: 488px;
  height: 64px;
}

.zr-wrapper {
  position: relative;
  width: fit-content;
  /* margin: 100px auto; */
}

.zr-social-media-logo {
  display: flex;
  gap: 60px;
  z-index: 1;
}

.zr-social-media-logo img {
  height: 100px;
  width: 100px;
  transition: all 0.3s ease;
}

.zr-social-media-logo img:hover {
  transform: translateY(-28px);
}

.zr-logo-label-container {
  display: flex;
  gap: 24px;
  position: absolute;
  top: 87%;
  left: -197px;
  /* background-color: var(--custom-color-primary); */
  transform: translate(3%, 0);
  box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, 0.2);
  z-index: 2;
  height: 100px;
  width: 1073px;
  justify-content: center;
  padding-top: 9px;

}

.zr-logo-label-container span {
  width: 137.6px;
  display: flex;
  justify-content: center;
  padding-top: 5px;
  font-weight: 700;
  font-size: var(--text-detail-4);
}

.zr-logo-label {
  display: flex;
  justify-content: center;
  gap: 100px;
}

/* section 9 */

.zr-section-nineth {
  height: auto;
  width: 100%;
  background-image: linear-gradient(340deg,
    var(--custom-color-primary) 18%,
    var(--custom-color-secondary) 10%, var(--custom-color-secondary) 58%,
    var(--custom-color-primary) 30%);
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 56px;
  /* padding-bottom: 120px; */
}

/* FROM HERE  */
.zr-question-form {
  display: flex;
  justify-content: flex-end;
  width: 1680px;
  height: 488px;
  background-color: var(--text-secondary);
  /* justify-content: flex-end; */
}

/* .zr-form-img {
width: 57%;
} */

.zr-question-form-detail {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 600px;
  padding-left: 32px;
  padding-right: 32px;
  font-family: var(--main-font);
  gap: 16px;
}

.zr-question-form-detail-layout {
  display: flex;
  flex-direction: column;
  width: 536px;
  /* height: 82px; */
  gap: 8px;
}

.zr-question-form-detail-layout input:focus {
  border-color: var(--text-secondary-2) !important;
  outline: none;
}

.zr-email-align {
  direction: ltr;
  padding-left: 16px;
}

.zr-question-form-detail h3 {
  color: var(--main-blue);
  padding: 0;
  margin: 0;
}

.zr-send-btn {
  width: 208px;
  height: 41px;
  background-color: var(--main-blue);
  color: var(--text-secondary);
  border: none;
  border-radius: 4px;
  font-family: var(--main-font);
  font-weight: 700;
  font-size: 18px;
  /*  */
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: color 0.3s ease;
  z-index: 1;
}

.zr-send-btn::before {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-color: var(--btn-bg-1);
  border: 1px solid var(--main-blue);

  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.5s ease;
  transform-origin: bottom center;
  z-index: -1;
}

.zr-send-btn:hover::before {
  transform: scale(1);
}


.zr-question-form-detail input {
  height: 44px;
  border-radius: 4px;
  border: 1px solid var(--text-secondary-1);
  font-family: var(--main-font);
  padding-right: 24px;
}

.zr-form-banner {
  /* background: url('../IMAGES/banners/form-banner.svg') no-repeat center/cover; */
  clip-path: polygon(9% 0, 100% 0, 100% 100%, 9% 100%, 0% 50%);
  width: 968px;
  height: 488px;
}
.zr-form-banner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*  */
.zr-blog-title {
  /* position: absolute; */
  /* left: 783px; */
  /* top: 5658.86px; */
  color: var(--main-font);
  font-size: 18px;
}




.zr-detail-blog-1 {
  gap: 16px;
  align-items: flex-start;
}




/* ----------------SLIEDR------------------ */
.zr-cotainer-category-slider {
  padding-top: 52px;
  width: 100%;
  ;
}



.zr-main-slider {
  width: 100% !important;
  margin: 0 auto;
  margin-left: -8px;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1384px;
  margin: auto;
  padding: 0;

}



.zr-main-slider .slick-track {
  opacity: 1;
  width: 100%;
  /* transform: translate3d(0px, 0px, 0px); */
  display: flex;
  /* gap: 32px; */
  justify-content: center;
}


.zr-category-container {
  min-width: 264px;
  width: 264px;
  /* flex-shrink: 0; */
}

.zr-main-slider .zr-category-container {
  /* padding: 0 15px; */
  /* width: 180px; */
  min-width: fit-content;
  margin-left: 16px;
}

/* ---------CUSTOM ARROW---------- */
/* arrow */
.zr-main-slider .slick-prev {
  background: url('../IMAGES/icon/next-arrow.svg') no-repeat center !important;
  height: 32px !important;
  right: -65px !important;
  top: 140px;
  /* position: unset; */
  /* order: 1; */
}

.zr-main-slider .slick-prev:before {
  content: '' !important;
  right: -65px !important;
  top: 140px;
}


.zr-main-slider .slick-prev:focus {
  background: url('../IMAGES/icon/next-arrow.svg') no-repeat center !important;
  right: -65px !important;
  top: 140px;
}

.zr-main-slider .slick-next {
  background: url('../IMAGES/icon/pre-arrow.svg') no-repeat center !important;
  height: 32px !important;
  left: -73px !important;
  top: 140px;
  /* position: unset; */
  /* order: 2; */
}

.zr-main-slider .slick-next:before {
  content: '' !important;
  left: -73px !important;
  top: 140px;
}


.zr-main-slider .slick-next:focus {
  background: url('../IMAGES/icon/pre-arrow.svg') no-repeat center !important;
  left: -73px !important;
  top: 140px;
}

.zr-main-slider {
  position: absolute;
}

/* zr-main-slider -> dots */

.zr-main-slider .slick-dots {
  order: 3;
  position: unset;
  width: auto;
  min-width: 200px;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.zr-main-slider .slick-dots li {
  margin: 0;
  padding: 0;
  width: 8px;
  height: 8px;
  background: var(--text-secondary-1);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.zr-main-slider .slick-dots li.slick-active {
  width: 47px !important;
  height: 8px !important;
  border-radius: 4px;
  background: var(--main-blue) !important;
}

.zr-main-slider .slick-dots li button {
  display: none;
}


.zr-main-slider .slick-dots {
  /* bottom: 17px;
  left: 76px; */
  /* width: 14%; */
  display: flex !important;
  align-items: center;
  justify-content: center;
}




.zr-first-section .slick-slider {
  width: 100%;
  height: 300px;
}

.zr-first-section .slick-slide {
  position: relative;
}

.zr-first-section .slick-dots {
  width: auto;
  min-width: 105px;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
  order: 2;
  position: unset;
  margin-left: 1px !important;
  margin-top: -7px !important;
  margin-right: 18px !important;
}

.zr-first-section .slick-dots li {
  margin: 0;
  padding: 0;
  width: 8px;
  height: 8px;
  background: var(--text-secondary-1);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.zr-first-section .slick-dots li.slick-active {
  width: 47px !important;
  height: 8px !important;
  border-radius: 4px;
  background: var(--main-blue) !important;
}

.zr-first-section .slick-dots li button {
  display: none;
}


.zr-first-section .slick-dots {
  /* bottom: 17px; */
  /* left: 76px; */
  /* width: 14%; */
  display: flex !important;
  align-items: center;
  justify-content: center;
  order: 2;
  position: unset;
  margin-left: 1px !important;

  margin-right: 18px !important;
}

.zr-first-section .slick-prev,
.zr-first-section .slick-next {
  z-index: 1;
  width: 32px;
  height: 32px;
  margin-top: 34px;
}

.zr-first-section .slick-prev {
  background: url('../IMAGES/icon/pre-arrow.svg') no-repeat !important;
  position: unset;
  order: 1;
  margin-left: 121px !important;
}


.zr-first-section .slick-prev:focus,
.zr-first-section .slick-prev:hover {
  background: url('../IMAGES/icon/pre-arrow.svg') no-repeat !important;
}

.zr-first-section .slick-prev::before {
  content: '' !important;
  /* top: 502px; */
}

.zr-first-section .slick-next {
  background: url('../IMAGES/icon/next-arrow.svg') no-repeat !important;
  /* left: 279px; */
  /* top: 502px; */
  position: unset;
  order: 3;
  margin-top: 34px; 
}

.zr-first-section .slick-next::before {
  content: '' !important;
  /* top: 502px; */
}


.zr-first-section .slick-next:focus,
.zr-first-section .slick-next:hover {
  background: url('../IMAGES/icon/next-arrow.svg') no-repeat !important;
  /* top: 502px; */
}

.zr-item-slider {
  margin: 0 5px;
  gap: 10px;
}


.zr-main-special-products-slider {
  display: none !important;
}

.zr-main-special-products-slider .slick-slider {
  display: none !important;
}

.zr-left-arrow {
  display: none;
}

.zr-right-arrow {
  display: none;
}

/* ---- */
.zr-each-category-shape-responsive .slick-next,
.zr-each-category-shape-responsive .slick-prev {
  top: 82% !important;
}

.zr-each-category-shape-responsive .slick-prev {
  background: url('../IMAGES/icon/next-arrow.svg') no-repeat !important;
  width: 32px;
  height: 32px;
  z-index: 1;
  right: 259px !important;
}

.zr-each-category-shape-responsive .slick-prev:before {
  content: '' !important;
  right: 259px !important;

}

.zr-each-category-shape-responsive .slick-prev:focus {
  background: url('../IMAGES/icon/next-arrow.svg') no-repeat !important;
  right: 259px !important;
}

.zr-each-category-shape-responsive .slick-next {
  background: url('../IMAGES/icon/pre-arrow.svg') no-repeat !important;
  width: 32px;
  height: 32px;
  z-index: 1;
  transform: translateY(-50%);
  cursor: pointer;
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;

  right: 680px !important;
}

.zr-each-category-shape-responsive .slick-next:before {
  content: '' !important;
  display: none;

  right: 680px !important;
}


.zr-each-category-shape-responsive .slick-next:focus {
  background: url('../IMAGES/icon/pre-arrow.svg') no-repeat !important;
  opacity: 0.8;
  right: 680px !important;
}

.zr-btn-show-all-2 {
  display: none;
}




.zr-main-special-products-slider .slick-slide {
  margin: 0 8px;

}

.zr-main-special-products-slider .slick-track {
  display: flex !important;
  gap: 16px;

}



.zr-main-special-products-slider {
  width: 100% !important;
  overflow: hidden;
}

.zr-main-special-products-slider .slick-list {
  margin: 0 -8px;

}

.zr-main-special-products-slider .slick-slide {
  padding: 0 8px;
  width: auto !important;
}

.zr-main-special-products-slider .slick-track {
  display: flex !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  gap: 0 !important;

}


.zr-main-special-products-slider .slick-slide {
  margin: 0 !important;
}

/* PRODUCT LIST */

.zr-main-container {
  background-color: var(--custom-color-primary);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  max-width: 1920px;
  margin : auto;
}

.zr-banner-product-container {
  margin-top: 23px;
  /* margin-bottom: 23px; */
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1856px;

}

.zr-banner-product {
  background: url('../IMAGES/banners/product-banner.svg') no-repeat center;
  width: 100%;
  height: 310px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  /* margin: 0 70px; */
  /* padding-left: 64px; */
}

.zr-title-1 {
  position: absolute;
  left: 167px;
  font-family: IranNastaliq;
  font-size: 53px;
  font-weight: 400;
  color: var(--main-blue);

}

.zr-title-2 {
  font-family: var(--main-font);
  position: absolute;
  left: 189px;
  top: 192px;
}

.zr-sort-filter-container {
  width: 100%;
  height: 116px;
  padding: 0 29px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* border-bottom: 1px solid var(--custom-color-teritary); */
}

.zr-sort-filter-layout {
  display: flex;
  width: 100%;
  justify-content: space-between;
  border-bottom: 1px solid var(--custom-color-teritary);
  height: 100%;
  align-items: center;
}

.zr-sort-filter {
  background-color: var(--text-secondary);
  font-family: var(--main-font);
  width: 400px;
  height: 54px;
  border: 1px solid var(--custom-color-teritary);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
  cursor: pointer;
}



.zr-sort-filter-sec-1 {
  width: 192px;
  height: 38px;
  display: flex;
  align-self: center;
  align-items: center;
  justify-content: center;
}

.zr-sort-filter-parent {
  position: relative;
}

.zr-sort-filter-parent.open .zr-child-sort-filter {
  display: block;
}



.zr-child-sort-filter {
  width: 400px;
  /* height: 192px;*/
  padding-bottom: 0.5rem;
  display: none;
  background-color: var(--text-secondary);
  position: absolute;
  top: 122%;
  right: 0;
  background: #fff;
  box-shadow: 0 4px 16px #0002;
  border-radius: 0 0 8px 8px;
  z-index: 100;
  border: 1px solid #C2C2C2;
  border-radius: 4px;
}

.zr-child-sort-filter-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 4px;
}



.zr-gap-sort-filter {
  gap: 8px;
}

.zr-text-sort {
  color: var(--text-secondary-1);
  font-weight: 500;
  font-size: var(--text-detail-4);
}

.zr-sort-item {
  height: 38px;
  width: 384px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary-1);
  font-size: var(--text-detail-4);
  font-family: var(--main-font);
  font-weight: 400;
}

.item-orderby.active{
  font-weight: 700 !important;
  color: #000 !important;
}

.zr-sort-item:hover {
  background-color: var(--custom-color-primary);
  color: var(--text-secondary-2)
}

/*--------------- products gallery-------------------- */
.zr-product-gallery-container {
  font-family: var(--main-font);
  display: flex;
  flex-direction: row;
  gap: 32px;
  /* background-attachment: fixed;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none; */
  width: 100%;
  height: auto;
  padding: 0px 32px;
  justify-content: space-around;
  margin-bottom: 20px;
  max-width: 1920px;
}

.zr-whole-products {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  gap: 32px;
  align-items: center;
}


/* ----label-------- */
.zr-label-filter {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  /* gap: 10px; */
  align-items: center;
  justify-content: space-between;
  /* padding-left: 25px; */
  padding-top: 16px;
  /* overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background-attachment: fixed; */
  max-width: 1502px;
}


.zr-filter-label-text {
  width: 184px;
  height: 34px;
  padding-left: 10px;
  /* border-left: 1px solid var(--text-secondary-5); */
  display: flex;
  justify-content: center;
  align-items: center;

}

.zr-item-filter {
  display: flex;
  flex-direction: row;
  width: auto;
  height: 34px;
  padding: 8px 12px 8px 12px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 4px;
  background-color: var(--text-secondary-6);
  border: 1px solid var(--text-secondary-7);
  direction: rtl;
}

/* --------------product card css -----------------*/
.zr-product-row-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.zr-space-item {
  margin-right: 10px;
}

.zr-products-row-1 {
  display: flex;
  flex-direction: row;
  gap: 12px;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}

.zr-Honeycomb:nth-child(9n-3) {
  margin-right: 6%;
}

.zr-Honeycomb:nth-child(9n) {
  margin-left: 6%;
}

.zr-special-products-slider {
  width: 1332px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 32px;
  margin: 0 auto;
  padding: 0;
}



.zr-13-gap {
  gap: 13px;
}



.zr-img-pro{
  object-fit: cover;
  max-height: 264px;
}

.zr-container-products .zr-label-product {
  opacity: 1;
  transition: opacity 0.2s ease;
}

.zr-container-products:hover .zr-label-product {
  opacity: 0;

}

.zr-container-products:hover .zr-title-product-card {
  /* height: 72.9px;
  gap: 10px;*/
}




.zr-see-detail {
  height: 0px;
  width: 0px;
  border: none;
  border-radius: 4px;
  font-family: var(--main-font);
  font-size: var(--text-detail-1);
  background-color: var(--main-blue);
  color: var(--text-secondary);
  opacity: 0;
  transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out, width 0.3s ease-in-out, color 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
  cursor: pointer;

  z-index: 1;
}

.zr-see-detail::before {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.5s ease;
  transform-origin: bottom center;
  z-index: -1;
}

.zr-see-detail:hover::before {
  transform: scale(1);
}


.zr-container-products:hover .zr-see-detail {
  height: 25px;
  opacity: 1;
  width: 99px;
}


.zr-title-product-card span {
  font-family: var(--main-font);
  font-size: 14px;
  font-weight: 500;

}





.zr-inventory-products-3 {
  padding: 3px;
  padding-inline: 9px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--main-font);
  color: var(--text-secondary-2);
  font-size: 10px;
  font-weight: 500;
  direction: rtl;
}

/* ---DETAIL-PRODUCT-CARD--- */



.zr-container-products:hover .zr-details-product {
  background-color: var(--text-secondary-13);
}





.zr-toman-color {
  color: var(--text-secondary-1);

}

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

.pagination-number a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.active-page-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
  background-color: var(--main-blue) !important;
  color: var(--text-secondary) !important;
  border-radius: 4px;
}

.pagination-number a:hover {
  background-color: var(--text-secondary);
  color: var(--text-secondary-2);
  border-radius: 4px;
}

.zr-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}

.zr-arrow-size {
  width: 24px;
  height: 24px;
}

.zr-arrow img {
  height: 12px;
}

/* --------------------- */
.zr-filters-container {
  background-color: var(--text-secondary);
  width: 350px;
  height: 100%;
  max-height: fit-content;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  margin-top: 16px;
  border-radius: 4px;
  position: sticky;
  top: 130px;
  max-height : 770px;
  overflow: auto;       /* یا scroll */
  scrollbar-width: none; /* برای فایرفاکس */
  -ms-overflow-style: none; /* برای IE و Edge قدیمی */
  padding-inline: 6rem;

}

.zr-filters-container::-webkit-scrollbar {
  display: none; /* برای کروم، سافاری و اپرا */
}







.zr-filter-max-width {
  width: 318px;

  flex-direction: column;
  gap: 32px;
  padding: 0 20px;
  padding-bottom: 25px;
}

.zr-title-filter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;

}

.rotate-reverse {
  transform: rotate(180deg);
}

.icon-filter {
  transition: 0.5s;
}

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

.zr-child-title {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--custom-color-teritary);
  direction: rtl;
  cursor: pointer;
}


.zr-layout-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

}

.zr-child-detail-filter {
  display: none;
  background-color: var(--text-secondary);
  direction: ltr;
  padding-left: 4px;
  height: 120px;
}

.zr-br {
  border-bottom: 1px solid var(--custom-color-teritary);
}

.zr-scroll-category {
  display: none;
  height: 185px;
  background-color: var(--text-secondary);
  background-repeat: no-repeat;
  background-attachment: fixed;
  direction: rtl;
  overflow-y: auto;
  /* scrollbar-width: thin;     */
  /* padding-right: 18px;*/
  margin-bottom: 50px;
  border-bottom: 1px solid var(--custom-color-teritary);
  overflow-x: hidden;
}



.zr-scroll-category>* {
  margin: 8px 0 !important;
  direction: ltr;
  /* width: 5px !important; */

}

.zr-scroll-category::-webkit-scrollbar {
  margin: 8px 0 !important;
  width: 5px;
  height: 204px;
  /* width: 5px !important; */
}

.zr-scroll-category::-webkit-scrollbar-track {
  margin: 8px 0 !important;
  background: var(--custom-color-teritary);
  border-radius: 4px;
  height: 204px;
  /* width: 5px !important; */
}

.zr-scroll-category::-webkit-scrollbar-thumb {
  margin: 8px 0 !important;
  background: var(--main-blue);
  border-radius: 4px;
  /* width: 5px !important; */

}

.zr-scroll-category::-webkit-scrollbar-thumb:hover {
  margin: 8px 0 !important;
  background: var(--main-blue);
  /* width: 5px !important; */
}


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

.zr-child-detail-filter-list {
  display: none;
  height: 185px;
  background-color: var(--text-secondary);
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow-y: auto;
  direction: rtl;
  padding-left: 4px;
  margin-bottom: 50px;
  border-bottom: 1px solid var(--custom-color-teritary);

}

.zr-child-detail-filter-list>* {
  margin: 8px 0 !important;
  direction: rtl;
}

.zr-child-detail-filter-list::-webkit-scrollbar {
  margin: 8px 0 !important;
  width: 5px;
  height: 204px;
}

.zr-child-detail-filter-list::-webkit-scrollbar-track {
  margin: 8px 0 !important;
  background: var(--custom-color-teritary);
  border-radius: 4px;
  height: 204px;
}

.zr-child-detail-filter-list::-webkit-scrollbar-thumb {
  margin: 8px 0 !important;
  background: var(--main-blue);
  border-radius: 4px;

}

.zr-child-detail-filter-list::-webkit-scrollbar-thumb:hover {
  margin: 8px 0 !important;
  background: var(--main-blue);
}



/* ------------checkbox-layout------------------ */
.zr-checkbox-layout-submenu {
  width: 286px;
  height: 40px;
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  gap: 170px;
}

.zr-checkbox-layout {
  /* width: 286px; */
  padding-top: 10px;

}



.zr-check-box-childern {
  display: none;
  width: 199px;
  border-right: 1px solid var(--text-secondary-1);
  justify-content: flex-start;
  margin-right: 32px;
  padding-right: 12px;
}

.zr-sub-checkbox-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 92px;
}

.zr-sub-checkbox {
  width: 86px;
  /* height: 40px; */
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.zr-div-layout {
  display: flex;
  align-items: center;
}


.zr-checkbox-layout input {
  border: 1px solid var(--text-secondary-2);
}

.zr-5-gap {
  gap: 5px;
}

.zr-10-gap {
  gap: 10px;
}

/* ----------RANGE-SLIDER------------------ */

.P-range {
  min-height: 20px;
  margin-block: 0.75rem;
  width: 286px;
  height: 8px;
  padding-left: 5px;
}

.P-range svg,
.P-range input[type=range] {
  position: absolute;
  left: 0;
  bottom: 2px;
  background: var(--custom-color-primary);
  box-shadow: none;
  direction: ltr;
}

.P-range input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
}

.P-range input[type=range]:focus {
  outline: none;
}

.P-range input[type=range]:focus::-webkit-slider-runnable-track {
  background: var(--custom-color-primary);
}

.P-range input[type=range]:focus::-ms-fill-lower {
  background: var(--custom-color-primary);
}

.P-range input[type=range]:focus::-ms-fill-upper {
  background: var(--custom-color-primary);

}

.P-range input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: var(--custom-color-primary);
  border-radius: 20px;
  box-shadow: none;
  border: 0;
}

.P-range input[type=range]::-webkit-slider-thumb {
  z-index: 2;
  position: relative;
  box-shadow: 0px 0px 20px 0px #13384D33;
  height: 20px;
  width: 20px;
  border: 5px solid var(--custom-color-primary);
  border-radius: 25px;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}

.P-range input[type=range]::-moz-range-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  background: var(--gray4);
  border-radius: 20px;
  box-shadow: none;
  border: 0;
}

.P-range input[type=range]::-moz-range-thumb {
  z-index: 2;
  position: relative;
  box-shadow: 0px 0px 0px #000;
  height: 20px;
  width: 20px;
  border: 5px solid var(--text-secondary);
  border-radius: 25px;
  background: var(--main-blue);
  cursor: pointer;
  box-shadow: 0px 0px 20px 0px #13384D33;
}

.P-range input[type=range]::-ms-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

.P-range input[type=range]::-ms-thumb {
  z-index: 2;
  position: relative;
  border: 1px solid var(--main-blue);
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: var(--main-blue);
  cursor: pointer;
}

.in-minvalue::-webkit-slider-thumb {
  border: 2px solid var(--main-blue);
  background: var(--main-blue);
}

.in-minvalue::-moz-range-thumb {
  border: 2px solid var(--main-blue);
  background: var(--main-blue);
}

.in-maxvalue::-webkit-slider-thumb {
  border: 2px solid var(--main-blue);
  background: var(--main-blue);
}

.in-maxvalue:-moz-range-thumb {
  border: 2px solid var(--main-blue);
  background: var(--main-blue);
}


.zr-range-highlight {
  height: 100%;
  left: 0%;
  right: 0%;
  position: absolute;
  border-radius: 4px;
  background: var(--main-blue);
  pointer-events: none;
  z-index: 1;

}


.zr-slider-container-filter {
  height: 8px;
  background: var(--custom-color-primary);
  width: 100%;
  top: 7px;
}

/* --------------------------------------------------------------- */
.zr-range-price-number-container {

  display: flex;
  flex-direction: row;
  gap: 16px;
}

.zr-range-number-box {
  width: 135px;
  height: 43px;
  border: 1px solid var(--custom-color-teritary);
  border-radius: 4px;
  display: flex;
  align-items: center;
  align-content: center;
}

.zr-number-size {
  width: 119px;
  height: 19px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  align-content: center;
  gap: 20.5px;
  justify-content: center;
}


.zr-checkbox-style {
  appearance: none !important;
  -webkit-appearance: none!important;
  width: 19px!important;
  height: 19px!important;
  border-radius: 6px!important;
  border: 1px solid var(--text-secondary-15)!important;
  background: transparent!important;
  position: relative!important;
  cursor: pointer!important;
  outline: none!important;
  transition: background 0.2s, border-color 0.2s!important;
  vertical-align: middle !important;
}


.zr-checkbox-style:checked {
  background: var(--main-blue) !important;
  border-color: var(--main-blue) !important;
}


.zr-checkbox-style::before {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 6px !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

.zr-checkbox-style:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  top: 5px !important;
  width: 9px !important;
  height: 5px;
  border-left: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
  border-radius: 1px !important;
  transform: rotate(-45deg) !important;

}



.zr-second-filter-container {
  display: none;
}

.zr-gallery-title {
  font-weight: 800;
  font-size: var(--title-font-size);
  font-family: var(--main-font);
}

.zr-text-filter-none-2 {
  display: none;
}

.zr-text-filter-none-1 {
  display: flex;
}

.pd-product-card {
  padding-right: 13px;
}

@keyframes bounceOpen {
  0% {
    transform: scaleY(0.3);
    opacity: 0;
  }

  50% {
    transform: scaleY(1.2);
    opacity: 1;
  }

  70% {
    transform: scaleY(0.95);
  }

  85% {
    transform: scaleY(1.05);
  }

  100% {
    transform: scaleY(1);
  }
}

.bounce-open {
  animation: bounceOpen 0.6s ease-out 0.1s both;
  transform-origin: top;
}

/* PRODUCT DETAIL */

.zr-main-container {
  background-color: var(--custom-color-primary);
  background-color: var(--custom-color-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 120px;
  /* height: 897px; */
  width: 100%;
}
.zr-pro-pd{
  padding-bottom: 120px;

}

.zr-main-container-2 {
  background-image: linear-gradient(16deg,
    var(--custom-color-primary) 9%,
    var(--custom-color-secondary) 8%,
    var(--custom-color-secondary) 66%,
    var(--custom-color-primary) 64%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-attachment: fixed;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-top: 67px;
  padding-bottom: 14px;

}

.zr-main-container-2::-webkit-scrollbar {
  display: none;
}

/* SECTION 1 */

.zr-details-product-container {
  /* width: 100%; */
  margin: 0 240px;
  height: 740px;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  font-family: var(--main-font);
  gap: 10px;
  padding-top: 30px;
}

.zr-link {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
}

.zr-desc-pro-layout {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2rem;
}

.zr-link img {
  width: 24px;
  height: 24px;
}

.zr-link a {
  color: var(--text-secondary-1);
  font-size: var(--font-size-xsmall);
  font-weight: 500;
}

/* LIGHT BOX */
.zr-img-product-container {
  width: 548px;
  height: 722px;
  /* padding-top: 30px;*/
}

.zr-img-product-light-box {
  width: 548px;
  height: fit-content;
  /* max-width: 250px; */
  cursor: pointer;
  transition: 0.3s;
  border-radius: 8px;
}

/* لایت‌باکس جدید */
.zr-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.35);
  justify-content: center;
  align-items: center;
}

.zr-modal-content-box {
  background: #fff;
  /* border-radius: 18px; */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  width: 963px;
  height: 850px;
  /* max-width: 90vw; */
  min-height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 31px 0px 0px 0px;
  /* top: 70px; */
  /* left: 470px; */
}

.zr-modal-title {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: var(--text-secondary-2);
  height: 42px;
  display: flex;
  width: 943px;
  justify-content: center;
}

.zr-modal-main-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 963px;
  gap: 16px;
  justify-content: center;
  padding-bottom: 5px;

}

.zr-modal-img-content {
  width: 778px;
  height: 778px;
  /* object-fit: contain;
  border-radius: 12px;
  background: #fafafa;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); */
}

.zr-modal-thumbnails {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 0;
  margin-right: 12px;
}

.zr-thumb-modal {
  width: 112px;
  height: 112px;
  /* border-radius: 8px; */
  object-fit: cover;
  border: 2px solid var(--text-secondary-1);
  cursor: pointer;
  transition: border 0.2s;
}

.zr-thumb-modal.active,
.zr-thumb-modal:hover {
  border: 2px solid #c9a14a;
  width: 112px;
  height: 112px;
}

.zr-thumb-modal.active,
.zr-thumb-modal:hover {
  border: 2px;
}

.zr-close-modal-img {
  position: absolute;
  top: 8px;
  left: 925px;
  font-size: 32px;
  color: var(--text-secondary-2);
  cursor: pointer;
  z-index: 2;
}

.zr-close-modal-img:hover {
  color: #c9a14a;
}

.zr-title-size {
  width: 100%;
  height: 780px;
  display: flex;
  flex-direction: column;
  padding-top: 30px;
}

.zr-sec-1-details-product {
  border-bottom: 1px solid var(--custom-color-teritary);
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.zr-sec-2-details-product {
  display: flex;
  flex-direction: column;
  padding-top: 16px;
  gap: 16px;
}

.zr-code {
  color: var(--text-secondary-4);
  font-size: var(--text-detail-3);
  font-weight: 400;
  padding-right: 10px;
}

.zr-price-layout {
  width: 405px;
}

.zr-btns-responsive {
  /* width: 362px; */
  justify-content: center;
}

.zr-add-to-card {
  width: 425px;
  height: 75px;
  border-radius: 4px;
  background-color: var(--main-blue);
  border: none;
  color: var(--text-secondary);
  font-size: var(--icon-head-info);
  font-family: var(--main-font);
  font-weight: 500;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: color 0.3s ease;
  z-index: 1;
}

.zr-add-to-card::before {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.5s ease;
  transform-origin: bottom center;
  z-index: -1;
}

.zr-add-to-card:hover::before {
  transform: scale(1);
}

.zr-details-text {
  width: 100%;
  height: 46px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  /* direction: rtl; */
}

.zr-drop-down-parent {
  /* direction: rtl; */
  font-family: var(--main-font);
  display: flex;
  position: relative;
  cursor: pointer;
  /* align-items: center; */
  /* justify-content: center; */
  flex-direction: column;
  /* height: 551px; */
}

.zr-drop-down {
  width: 280px;
  height: 46px;
  background-color: var(--text-secondary);
  border: 1px solid var(--text-secondary-2);
  border-radius: 4px;

  display: flex;
  flex-direction: row;
  gap: 77px;
  align-items: center;
  justify-content: center;
}

.zr-drop-down-child {
  position: absolute;
  top: 94%;
  right: 0;
  background-color: var(--text-secondary);
  border: 1px solid var(--text-secondary-2);
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  z-index: 100;
  display: none;
  height: 258px;
  width: 280px;
}

.zr-arrow-up-size {
  width: 24px;
  height: 24px;
}

.zr-checkbox-style {
  appearance: none;
  -webkit-appearance: none;
  width: 19px;
  height: 19px;
  border-radius: 6px;
  border: 1px solid var(--text-secondary-15);
  background: transparent;
  position: relative;
  cursor: pointer;
  outline: none;
  transition: background 0.2s, border-color 0.2s;
  vertical-align: middle;
}

.zr-checkbox-style:checked {
  background: var(--main-blue);
  border-color: var(--main-blue);
}

.zr-checkbox-style::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  position: absolute;
  top: 0;
  left: 0;
}

.zr-checkbox-style:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  border-radius: 1px;
  transform: rotate(-45deg);

}

.zr-check-box-childern-products {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 250px;
  height: 46px;
  background-color: var(--text-secondary);
  border-radius: 4px;
  align-items: center;
  padding: 8px;
}

.zr-check-box-childern-products:hover {
  background-color: var(--custom-color-primary);
}

.zr-drop-down-child-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  padding-top: 15px;
}

/* SECTION 2 */
.zr-stepper {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  height: 166px;
  position: sticky;
  top: 86px;
  width: 100%;
  z-index: 99;

}

.zr-stepper-scrolled {
  background-color: white !important;
  transition: background-color 0.1s ease;
}


.zr-step-big {
  width: 230px;
  height: 70px;
  background-color: var(--bg-octonary-1);
  clip-path: polygon(11% 0%,
    0% 50%,
    11% 100%,
    89% 100%,
    100% 50%,
    89% 0%);
  z-index: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;

}


.zr-step-small {
  font-family: var(--main-font);
  font-size: var(--text-detail-5);
  background: var(--text-secondary);
  font-weight: 400;
  width: 224px;
  height: 67px;
  clip-path: polygon(11% 0%, 0% 50%, 11% 100%, 89% 100%, 100% 50%, 89% 0%);
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary-1);
}

.zr-step-small-select {
  font-family: var(--main-font);
  font-size: var(--icon-head-info);
  font-weight: 700;
  width: 224px;
  height: 67px;
  clip-path: polygon(11% 0%, 0% 50%, 11% 100%, 89% 100%, 100% 50%, 89% 0%);
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--forth-blue);
  color: var(--text-secondary);
}

.zr-step-small:hover {
  background: var(--forth-blue);
  color: var(--text-secondary);
  /* font-size: var(--icon-head-info); */
  font-weight: 700;
}


.zr-step-wrapper {
  display: flex;
  align-items: center;
  position: relative;
}

.zr-step-wrapper:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: #dabd9f;
  transform: rotate(45deg);
  margin-left: -14px;
  margin-right: -14px;
  flex-shrink: 0;
}

.zr-step-wrapper-mini {
  display: flex;
  align-items: center;
  position: relative;
}

.zr-step-wrapper-mini:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #dabd9f;
  transform: rotate(45deg);
  margin-left: -4px;
  margin-right: -4px;
  flex-shrink: 0;
}

.zr-frame-desc {
  width: 230px;
  height: 70px;
}

.zr-step-icon {
  width: 24px;
  height: 24px;
  z-index: 2;
}

.zr-rhombus-1 {
  position: absolute;
  display: none;
  left: 736px;
}

.zr-rhombus-2 {
  position: absolute;
  display: none;
  left: 965px;
}

.zr-rhombus-3 {
  position: absolute;
  display: none;
  left: 1196px;
}

.zr-small-rhombus-1 {
  position: absolute;
  display: none;
  width: 12px;
  height: 12px;
  left: 515px;
}

.zr-small-rhombus-2 {
  position: absolute;
  display: none;
  width: 12px;
  height: 12px;
  right: 514px;
}

.zr-hr {
  width: 518px;
  height: 5px;
  background-color: var(--bg-octonary-1);
  border: none;
}

/* SECTION 3 */
.zr-whole-details-container {
  /* width: 800px; */
  max-height: 3029px;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 60px;
  /* background-color: var(--text-secondary); */
}

.zr-container-1 {
  display: flex;
  flex-direction: column;
  gap: 32px;
  direction: rtl;
  font-family: var(--main-font);
  align-items: center;
}

.zr-text-desc-container-1 {
  width: 736px;
  height: 145px;
  font-weight: 500;
  line-height: 180%;
}

.zr-text-desc-container-2 {
  width: 736px;
  height: 113px;
  font-weight: 500;
  line-height: 180%;
}

.zr-text-desc-container-3 {
  width: 736px;
  height: 77px;
  font-weight: 500;
  line-height: 180%;
}

.zr-container-1-desc-1 {
  width: 800px;
  height: 209px;
  background-color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.zr-container-1-desc-2 {
  width: 800px;
  height: 177px;
  background-color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.zr-container-1-desc-3 {
  width: 800px;
  height: 141px;
  background-color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------- */
.zr-container-2 {
  display: flex;
  flex-direction: column;
  gap: 60px;
  font-family: var(--main-font);
}

.zr-container-2-desc-1 {
  width: 800px;
  /* height: 781px; */
  background-color: var(--text-secondary);
  border: 1px solid var(--custom-color-teritary);
  border-radius: 4px;

}

.zr-border-bottom {
  border-bottom: 1px solid var(--custom-color-teritary);
}

.zr-border-left {
  border-left: 1px solid var(--custom-color-teritary);
}

.zr-container-2-desc-2 {
  width: 800px;
  height: 244px;
  background-color: var(--text-secondary);
  border: 1px solid var(--custom-color-teritary);
  border-radius: 4px;
}

.zr-container-2-desc-3 {
  width: 800px;
  height: 1233px;
  background-color: var(--text-secondary);
  flex-direction: column;
  gap: 32px;
  display: flex;
  align-items: center;
}

.zr-title-product-info {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  height: 61px;
}

.zr-product-info-sec-1 {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  height: 61px;
  padding-left: 32px;
  padding-right: 32px;
}

.zr-product-info-sec-2 {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  height: 61px;
}

.zr-cell {
  width: 161.25px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* commments */
.zr-title-comment {
  width: 780px;
  height: 70px;
  direction: rtl;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 32px;
  margin-bottom: 11px;
}

.zr-title-comment img {
  width: 70px;
  height: 70px;
}

.zr-comment-sec-1 {
  width: 780px;
  /* height: 174px; */
  border: 1px solid var(--custom-color-teritary);
  border-radius: 4px;
}


.zr-name-user {
  width: 100%;
  height: 81px;
  gap: 10px;
  background: linear-gradient(180deg, var(--text-secondary) 0%, var(--custom-color-primary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

.zr-user-text {
  height: 93px;
  display: flex;
  align-items: center;
  padding-right: 16px;
  direction: rtl;
  font-size: var(--text-detail-4);
  font-weight: 500;
}

.zr-answer {
  display: flex;
  flex-direction: row;
  direction: rtl;
  height: 90px;
  align-items: center;
}

.zr-answer-sec-1 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 151px;
}

.zr-answer-sec-2 {
  width: 581px;
  height: 58px;
  padding-right: 32px;
  line-height: 180%;
}


.zr-comment-sec-4 {
  width: 780px;
  height: 397px;
  border: 1px solid var(--custom-color-teritary);
  border-radius: 4px;
}

.zr-user-comments {
  /* width: 780px; */
  height: 57px;
  background-color: var(--custom-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--custom-color-teritary);
}

.zr-user-comments span {
  font-size: var(--text-detail-5);
  font-weight: 700;
}

.zr-user-info {
  width: 780px;
  height: 114px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  direction: rtl;
  align-items: center;
  justify-content: center;
}

.zr-user-info input {
  width: 366px;
  height: 44px;
  border: 1px solid var(--text-secondary-1);
  font-family: var(--main-font);
  padding-right: 16px;
  border-radius: 4px;
  margin-top: 8px;
  font-weight: 500;
}

.zr-input-comment {
  width: 100%;
  height: 92px;
  border: none;
  direction: rtl;
  font-family: var(--main-font);
  background-color: var(--custom-color-primary);
  padding-right: 16px;
  font-size: var(--text-detail-4);
  font-weight: 500;
}

.zr-check-box-container {
  width: 780px;
  height: 80px;
  direction: rtl;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 16px;
  gap: 4px;
}

.zr-check-box-container span {
  padding-right: 35px;
  font-size: var(--text-detail-4);
  color: var(--text-secondary-4);
  font-weight: 300;
}

.zr-check-box {
  height: 22px;
  display: flex;
  flex-direction: row;
  direction: rtl;
  gap: 10px;
  align-items: center;
}

.zr-check-box input {
  width: 19px;
  height: 19px;
  border: 1.5px solid var(--text-secondary-2);
  border-radius: 4px;

}

.zr-submit-comment-button {
  width: 164px;
  height: 38px;
  background-color: var(--main-blue);
  color: var(--text-secondary);
  font-size: var(--text-detail-4);
  font-family: var(--main-font);
  font-weight: 400;
  border-radius: 4px;
  border: none;

  position: relative;
  overflow: hidden;
  cursor: pointer;

  z-index: 1;
}

.zr-submit-comment-button::before {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.5s ease;
  transform-origin: bottom center;
  z-index: -1;
}

.zr-submit-comment-button:hover::before {
  transform: scale(1);
}


.zr-container-3 {
  width: 100%;
  /* height: 588px; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
  /* margin: 81px 0; */
  padding-block: 50px;
  background-color: var(--custom-color-primary);

}

/* ---------SLIDER--------- */
.zr-special-products-slider {
  max-width: 1471px;
  width: 100%;
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row;
  justify-content: center !important;
  gap: 32px;
  /* margin-left: -32px; */
}



.zr-special-products-slider .slick-prev {
  background: url('../IMAGES/icon/pre-arrow.svg') no-repeat !important;
  width: 32px;
  height: 32px;
  z-index: 1;
  /* left: -692px !important; */
}


.zr-special-products-slider .slick-prev:before {
  content: '' !important;
  /* left: -692px !important; */
}

.zr-special-products-slider .slick-prev:hover,
.zr-special-products-slider .slick-prev:focus {
  background: url('../IMAGES/icon/pre-arrow.svg') no-repeat !important;
  /* left: -692px !important; */
}

.zr-special-products-slider .slick-next {
  background: url('../IMAGES/icon/next-arrow.svg') no-repeat !important;
  width: 32px;
  height: 32px;
  z-index: 1;
  /* top: 32px; */
  /* right: -652px; */
  transform: translateY(-50%);
  cursor: pointer;
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.zr-special-products-slider .slick-next:before {
  content: '' !important;
  top: 32px;
  right: -652px;
}

.zr-special-products-slider .slick-next:hover,
.zr-special-products-slider .slick-next:focus {
  background: url('../IMAGES/icon/next-arrow.svg') no-repeat !important;
  opacity: 0.8;
  /* top: 32px; */
  /* right: -652px; */
}



.zr-container-products .zr-label-product {
  opacity: 1;
  transition: opacity 0.2s ease;
}

.zr-container-products:hover .zr-label-product {
  opacity: 0;

}


.zr-container-products:hover .zr-title-product-card {
  /* height: 72.9px;
  gap: 10px;*/
}


.zr-see-detail {
  height: 0px;
  width: 0px;
  border: none;
  border-radius: 4px;
  font-family: var(--main-font);
  font-size: var(--text-detail-1);
  background-color: var(--main-blue);
  color: var(--text-secondary);
  opacity: 0;
  transition: height 0.4s ease, opacity 0.4s ease, width 0.4s ease, color 0.3s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;

  z-index: 1;
}

.zr-see-detail::before {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.5s ease;
  transform-origin: bottom center;
  z-index: -1;
}

.zr-see-detail:hover::before {
  transform: scale(1);
}

.zr-container-products:hover .zr-see-detail {
  height: 25px;
  opacity: 1;
  width: 99px;
}


.zr-title-product-card span {
  font-family: var(--main-font);
  font-size: 14px;
  font-weight: 500;

}






/* ---DETAIL-PRODUCT-CARD--- */


.zr-container-products:hover .zr-details-product {
  background-color: var(--text-secondary-13);
}





.zr-toman-color {
  color: var(--text-secondary-1);

}

/* light box */
.zr-thumbnail-layout {
  width: 548px;
  height: 141px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background-attachment: fixed;
  background-repeat: repeat-x;
  direction: rtl;
  align-items: center;
  justify-content: center;
  display: block;
  /* overflow-x: auto; */
  /* white-space: nowrap;  */
  /* padding: 10px 0; */
}

.zr-thumbnails {
  display: flex;
  gap: 8px;
  display: inline-flex;
  /* gap: 10px; */
  /* margin-top: 12px; */
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background-attachment: fixed;
  background-repeat: repeat-x;
}

.zr-thumb {
  width: 112px;
  height: 112px;
  object-fit: cover;
  /* border: 2px solid var(--text-secondary-1); */
  border-radius: 6px;
  cursor: pointer;
  transition: border 0.2s;
}

.zr-thumb.active,
.zr-thumb:hover {
  border: 2px solid var(--text-secondary-1);
  display: block;
}

/* Border styles */
.zr-white-border:has(.zr-thumb.active) {
  border: 4px solid #ffffff00;
  border-radius: 6px;
}

.zr-gray-border:has(.zr-thumb.active) {
  border: 2px solid var(--text-secondary-1);
  border-radius: 8px;
}

/* Hover styles */
/* .zr-white-border:hover {
border: 4px solid #ffffff00;
border-radius: 6px;
}

.zr-gray-border:hover {
border: 2px solid var(--text-secondary-1);
border-radius: 8px;
} */

.zr-modal-thumbnails {
  display: flex;
  gap: 12px;
  /* margin-top: 24px; */
  justify-content: center;
}

.zr-thumb-modal {
  width: 112px;
  height: 112px;
  object-fit: cover;
  border: 2px solid var(--text-secondary-1);
  border-radius: 8px;
  cursor: pointer;
  transition: border 0.2s;
}

.zr-picture-gallery-slider {
  display: none !important;
}

.zr-fav-none-2 {
  display: none;
}

.zr-ring-text {
  font-size: var(--title-font-size);
  font-weight: 700;
}

.zr-fav-icon-web {
  width: auto;
  height: 40px;
  border: 1.5px solid var(--custom-color-teritary);
  border-radius: 4px;

  align-items: center;
  gap: 10px;
  padding: 8px;
  cursor: pointer;
}

.zr-fav-icon-web:hover {
  border: 1.5px solid var(--main-blue);

}

/* ---SLICK DOTS--- */
.zr-special-products-slider .slick-dots {
  /* top: 470px; */
  /* left: 400px; */
  width: 16%;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
  position: unset;
  order: 2;
  margin-left: -28px;
}

.zr-special-products-slider .slick-dots li {
  margin: 0;
  padding: 0;
  width: 47px;
  height: 7px;
  margin-right: 2px;
  position: relative;
  margin: 0;
  padding: 0;
  width: 8px;
  height: 8px;
  background: var(--text-secondary-1);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.zr-special-products-slider .slick-dots li:last-child {
  margin-right: 0;
}

.zr-special-products-slider .slick-dots li button {
  padding: 0;
  width: 41%;
  height: 100%;
}

.zr-special-products-slider .slick-dots li.slick-active {
  width: 24px !important;
  height: 8px !important;
  border-radius: 4px !important;
  background: var(--main-blue) !important;
}

.zr-special-products-slider .slick-dots li button {
  display: none;
}

.pd-product-card {
  padding-right: 13px;
}

/* CONTACT US */
.zr-main {
  /* height: 2591px; */
  height: auto;
  background: linear-gradient(to bottom,
    var(--custom-color-primary) 0%,
    var(--custom-color-primary) 16%,
    var(--bg-octonary-2) 12%,
    var(--bg-octonary-2) 89%,
    var(--custom-color-primary) 80%,
    var(--custom-color-primary) 100%);
}

/* -------CALL US TEXT-------------- */
.zr-contactus-welcome-text {
  font-family: var(--main-font);
  height: 404px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 32px;
  padding-top: 116px;
  padding-left: 8px;
}

.zr-callus-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 656px;
  /* gap: 8px; */
  /* direction: rtl; */
}

/* -------SECTIONS CONTACT US---------- */

.zr-main-body-contact-us {
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  /* height: 1840px; */
  /* background-color: var(--bg-octonary-2); */
  padding-top: 33PX;
  gap: 54px
}

/* SECTION 1 */
.zr-first-section-contact-us {
  width: 1680px;
  height: 463px;
  display: flex;
  flex-direction: row;
  background-color: var(--text-secondary);
}

.zr-bg-sec-1 {
  background: url('../IMAGES/banners/bg-left-sec-1-contact-us.svg');
  width: 562.5px;
  clip-path: polygon(95% 0, 100% 50%, 95% 100%, 0 100%, 0 0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.zr-items {
  font-family: var(--main-font);
  font-weight: 700;
  display: flex;
  flex-direction: column;
  direction: rtl;
  align-items: center;
  gap: 22px;
  padding-top: 9px;
}

.zr-items-phone-call {
  font-family: var(--main-font);
  font-weight: 700;
  display: flex;
  flex-direction: column;
  direction: rtl;
  align-items: center;
  gap: 22px;
  padding-top: 30px;
}

.zr-img-overlay-1 {
  transform: scaleX(-1);
  position: absolute;
  /* left: 345px; */
  padding-left: 835px;
}

.zr-img-overlay-1 img {
  width: 60px;
  height: 60px;
}

.zr-bg-sec-2 {
  width: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zr-bg-sec-3 {
  background: url('../IMAGES/banners/bg-left-sec-2-contact-us.png') no-repeat center/cover;
  width: 562.5px;
  clip-path: polygon(5% 0, 0% 50%, 5% 100%, 100% 100%, 100% 0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.zr-img-overlay-2 {
  position: absolute;
  /* right: 343px; */
  z-index: 1;
  padding-left: 850px;
}

/* SECTION 2 */
.zr-second-section-contact-us {
  margin-top: 60px;
  margin-bottom: 90px;
}

.zr-social-media-section {
  height: 651.8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  height: 379px;
  bottom: -118px;
}




/* .zr-social-media-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
bottom: 394px;
font-family: var(--main-font);
gap: 40px;
} */

.zr-wrapper {
  position: relative;
  width: fit-content;
  /* margin: 100px auto; */
}

.zr-social-media-logo {
  display: flex;
  gap: 60px;
  z-index: 1;
}

.zr-social-media-logo img {
  height: 100px;
  width: 100px;
  transition: all 0.3s ease;
}

.zr-social-media-logo img:hover {
  transform: translateY(-28px);
}

/* .zr-logo-label-container {
display: flex;
gap: 24px;
position: absolute;
top: 87%;
left: -197px;
background-color: var(--bg-octonary-2) !important;
transform: translate(3%, 0);
box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, 0.2);
z-index: 2;
height: 161px !important;
width: 1073px;
justify-content: center;
padding-top: 9px;
} */

.zr-logo-label-container span {
  width: 137.6px;
  display: flex;
  justify-content: center;
  padding-top: 5px;
  font-weight: 700;
  font-size: var(--text-detail-4);
}

.zr-logo-label {
  display: flex;
  justify-content: center;
  gap: 100px;
}

/* SECTION 3 */
/* .zr-third-section-contact-us{

} */

.zr-question-form {
  display: flex;
  justify-content: flex-end;
  width: 1680px;
  height: 488px;
  background-color: var(--text-secondary);
}

.zr-question-form-detail {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 600px;
  padding-left: 32px;
  padding-right: 32px;
  font-family: var(--main-font);
  gap: 16px;
}

.zr-question-form-detail-layout {
  display: flex;
  flex-direction: column;
  width: 536px;
  /* height: 82px; */
  gap: 8px;
}


.zr-question-form-detail h3 {
  color: var(--main-blue);
  padding: 0;
  margin: 0;
}

.zr-send-btn {
  width: 208px;
  height: 41px;
  background-color: var(--main-blue);
  color: var(--text-secondary);
  border: none;
  border-radius: 4px;
  font-family: var(--main-font);
  font-weight: 700;
  font-size: var(--text-detail-5);
  /*  */
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: color 0.3s ease;
  z-index: 1;
}

.zr-send-btn::before {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-color: var(--btn-bg-1);
  border: 1px solid var(--main-blue);

  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.5s ease;
  transform-origin: bottom center;
  z-index: -1;
}

.zr-send-btn:hover::before {
  transform: scale(1);
}

.zr-question-form-detail input {
  height: 44px;
  border-radius: 4px;
  border: 1px solid var(--text-secondary-1);
  font-family: var(--main-font);
  padding-right: 24px;
}

.zr-input-email {
  direction: ltr;
  padding-left: 16px;
}

.zr-form-banner {
  /* background: url('../IMAGES/banners/form-banner.svg') no-repeat center/cover; */
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0% 50%);
  width: 968px;
  height: 488px;
}

/* SECTION 4 */
.zr-forth-section-contact-us {
  width: 1680px;
  height: 537px;
  /* position: absolute; */
  /* top: 1863px; */
  /* border: 20px solid var(--custom-color-primary); */
}

.zr-forth-section-contact-us iframe {
  width: 100%;
  height: 100%;
  border-style: solid;
  border-width: 20px 20px 0 20px;
  border-color: var(--custom-color-primary);
}

.i4ewOd-pzNkMb-haAclf {
  display: none;
}

/* ----------------- */
.zr-last-bg {
  height: 277px;
  /* position: absolute; */
}


.zr-diamond {
  /* width: 488px !important; */
  /* height: 430px; */
}

.zr-title-diamond {
  width: 488.76953125px;
  height: 64px;
}

/* ABOUT US */

.zr-main-body-aboutus {
  padding-top: 120px;
  font-family: var(--main-font);
}

/* -------------SECTION 1--------------- */
.zr-first-section-aboutus {
  /* background: url('../IMAGES/background/about-us-bg-sec-1.svg') no-repeat center/cover;*/
  width: 100%;
  height: 798px;
  display: flex;
  align-items: center;
}

.zr-sec-1-layout {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zr-container-sec-1 {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  gap: 150px;
  padding-right: 119px;
}

.zr-sec-1 {
  width: 513px;
  display: flex;
  flex-direction: column;
  direction: rtl;
  /* gap: 16px; */
}

.zr-hirad-heading {
  font-size: 60px;

}

.zr-justify-text {
  text-align: justify;
}

.zr-sec-2 {
  position: relative;
}

.zr-img-position-1 {
  position: absolute;
  top: -58px;
  right: -13px;
}

.zr-img-position-2 {
  position: absolute;
  right: 413px;
  top: 84px;
}


/* ------------------SECTION 2------------------- */

.zr-second-section-aboutus {
  /*background: url('../IMAGES/background/about-us-bg-sec-2.svg') no-repeat center center;*/
  width: 100%;
  height: 901px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row-reverse;
  overflow: visible;

}

.zr-polygon-img {
  z-index: 1;
  transform: translate(-40px, 20px);
  display: block;
  height: 424px;
  margin-top: -40px;
  margin-right: -336px;
  pointer-events: none;
}

.zr-text-container {
  background-color: var(--text-secondary);
  clip-path: polygon(5% 0, 0% 50%, 5% 100%, 100% 100%, 100% 0);
  /* width: 38%; */
  width: 720px;
  height: 424px;
  display: flex;
  align-items: center;
  justify-content: center;
  direction: rtl;
  opacity: 0.85;

}

.zr-text-container span {
  text-align: justify;
  width: 536px;
  height: 266px;
  font-weight: 500;
  font-size: var(--text-detail-4);
  color: var(--text-secondary-2);
  line-height: 180%;
  margin-right: 14px;
  margin-top: 17px;
}


/* ------------------SECTION 3------------------- */
.zr-third-section-aboutus {
  /* background: url('../IMAGES/background/about-us-bg-sec-3.svg') no-repeat center center;*/
  width: 100%;
  height: 901px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row-reverse;
  overflow: visible;
}

/* ------------------SECTION 4------------------- */
.zr-forth-section-aboutus {
  height: 752px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.zr-bg-color-slider {
  width: 1440px;
  height: 688px;
  background-color: var(--bg-octonary);
  z-index: 0;
  position: absolute;
  display: flex;
  justify-content: center;

}

.zr-bg-color-slider h1 {
  padding-top: 20px;
  font-size: var(--title-font-size);
  color: var(--text-secondary-1);
  font-weight: 500;
}

.zr-slider-container {
  /* height: 505px; */
  width: 1512px;
  z-index: 1;
  top: 30px;
  left: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  display: flex;
  gap: 16px;
}

.zr-slider-aboutus .slick-slide {
  /* margin: 0 8px; */
  height: 505px;
  width: 235.75;
  transition: all 0.3s ease;
}


.zr-slider-aboutus .slick-center {
  /* margin: 0 -8px; */
  width: 505px !important;

}

.zr-slider-aboutus img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zr-slider-container .slick-prev .slick-next {
  width: 32px !important;
  height: 32px !important;
}

.zr-slider-container .slick-prev {
  left: -84px !important;
  width: 32px;
  height: 32px;
  background: url('../IMAGES/icon/pre-arrow.svg') no-repeat center center !important;
}

.zr-slider-container .slick-next {
  right: -85px !important;
  height: 32px;
  width: 32px;
  background: url('../IMAGES/icon/next-arrow.svg') no-repeat center center !important;
}

.zr-slider-container .slick-prev:before,
.zr-slider-container .slick-next:before {
  content: '' !important;
  width: 32px;
  height: 32px;
}

.zr-slider-container .slick-prev:hover{
  background: url('../IMAGES/icon/pre-arrow.svg') no-repeat center center !important;
}
.zr-slider-container .slick-prev:focus {
  background: url('../IMAGES/icon/pre-arrow.svg') no-repeat center center !important;
  width: 32px;
  height: 32px;
  left: -84px;
}

.zr-slider-container .slick-next:hover{
  background: url('../IMAGES/icon/next-arrow.svg') no-repeat center center !important;
}
.zr-slider-container .slick-next:focus {
  right: -85px;
  background: url('../IMAGES/icon/next-arrow.svg') no-repeat center center !important;
  width: 32px;
  height: 32px;
}


.zr-about-img {
  width: 235.75px;
  height: 505px;
}


.zr-slider-aboutus {
  max-width: 100%;
  margin: 0 auto;
}

.zr-slider-aboutus .slick-track {
  display: flex;
  align-items: center;
}

.zr-slider-aboutus .slick-slide {
  transition: all 0.3s ease;
  width: 235.75px !important;
  height: 505px;
  padding: 0 5px;
  box-sizing: border-box;
}

.zr-slider-aboutus .slick-center {
  width: 505px !important;
  z-index: 2;
}

.zr-slider-aboutus img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* BLOG LIST */
.zr-main-bloglist {
  background-color: var(--custom-color-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
  height: auto;
  justify-content: center;
  font-family: var(--main-font);


}

.zr-blog-image-wrapper-2 {
  display: grid;
  place-items: center;
  margin-top: -44px;
  margin-bottom: -48px;
  width: 379px;
}

.zr-blog-image-wrapper-2 img {
  grid-area: 1 / 1;
  width: 100%;
  display: block;
}

.zr-blog-image-wrapper-2 img.zr-blog-overlay {
  pointer-events: none;
  z-index: 1;
}

.zr-blog-head-card-2 {
  height: 60px;
  width: 65%;
  margin: 0 auto;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: var(--text-secondary);
}

.zr-blog-content-2 {
  background-color: var(--text-secondary);
  font-family: var(--main-font);
  height: 236px;
  direction: rtl;
  padding: 60px 17px 24px 17px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  width: 379px;
}

/* ------------------BANNER CONTAINER------------------ */
/* .slick-prev,
.slick-next {
display: none !important;
} */

.zr-blog-banner-slider {
  width: 1123px;
  height: 798px;
  margin: 0;
  padding: 0;
  cursor: grab;
}

.zr-blog-banner-slider:active {
  cursor: grabbing;
}


.zr-banner-container {
  margin-top: 120px;
  width: 1674px !important;
  height: 798px;
  background-color: var(--text-secondary-3);
  display: flex !important;
  /* flex-direction: row-reverse; */
  align-items: center;
  position: relative;
  flex-direction: row;
  overflow: hidden;
}

.zr-banner-img {
  width: 1032px;
  height: 798px;
  object-fit: cover;
}

.zr-banner-text-container {
  background-color: var(--main-blue);
  width: 550px;
  height: 351px;
  clip-path: polygon(6% 0, 0% 50%, 6% 100%, 100% 100%, 100% 0);
  margin: 0;
  padding: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  direction: rtl;
  position: absolute;
  left: 0;
  z-index: 2;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding-right: 32px;

}

.zr-blog-animation {
  opacity: 0;
  transform: translateX(200px);
  transition: all 0.4s ease;
}

.zr-blog-animation.active {
  opacity: 1 !important;
  transform: translateX(0) !important;
}


.zr-banner-text-container .zr-banner-text {
  width: 478px;
  height: 193px;
  display: flex !important;
  flex-direction: column;
  gap: 32px;
  /* transform: translateX(200px); */
  /* opacity: 0;
  visibility: hidden; */
  /* transition: all 0.8s ease; */
}

/* .zr-banner-text-container .zr-banner-text.active {
transform: translateX(0);
opacity: 1;
visibility: visible;
} */

.zr-show-btn {
  background-color: var(--bg-octonary-1);
  width: 152px;
  height: 48px;
  border: none;
  border-radius: 4px;
  font-family: var(--main-font);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: color 0.3s ease;
  z-index: 1;
}

.zr-show-btn::before {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-color: var(--btn-bg-2);
  border: 1px solid var(--main-blue);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.5s ease;
  transform-origin: bottom center;
  z-index: -1;
}

.zr-show-btn:hover::before {
  transform: scale(1);
}

.zr-show-btn:hover {
  color: var(--text-secondary);
}

/* ------------------SLIDER CONTROLS------------------ */



/* ------------------RECENT BLOG CONTAINER------------------ */
.zr-blog-head-title {
  position: unset;
  top: 946px;
}

.zr-recent-blog-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 39px;
  margin-bottom: 30px;
  width: 100%;
}

.zr-blog-head-card {
  height: 60px;
  width: 65%;
  margin: 0 auto;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: var(--text-secondary);
}

/* -------------- */
/* .zr-blog-card {
flex-direction: row;
gap: 32px;
overflow: hidden;
position: relative;
width: 1369px;
height: 1087px;
} */

.zr-blog-image-wrapper {
  display: grid;
  place-items: center;
  margin-top: -35px;
  margin-bottom: -48px;

}

.zr-blog-detail-slider li{
  aspect-ratio: 374 / 660;
  max-width: 374px;
  max-height: 660px;
  flex-grow: 1;
}

.zr-blog-image-wrapper img {
  grid-area: 1 / 1;
  width: 100%;
  display: block;
}

.zr-blog-image-wrapper img.zr-blog-overlay {
  pointer-events: none;
  z-index: 1;
}

/* blog content */

.zr-blog-content {
  background-color: var(--text-secondary);
  font-family: var(--main-font);
  /*  height: 236px;*/
  direction: rtl;
  padding: 60px 17px 24px 17px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.zr-blog-content div {
  /* display: flex;
  flex-direction: column; */
  /* width: 345px; */
}

.zr-read-more {
  color: var(--main-blue);
}

.zr-read-more:hover {
  color: var(--btn-bg-1);
}

.zr-blog-title {
  color: var(--main-font);
  font-size: 18px;
}

.zr-detail-blog-1 {
  gap: 16px;
  align-items: flex-start;
}

.zr-detail-blog-2 {
  gap: 169px;
}

.zr-blog-gap {
  gap: 50px;
}

.zr-blogs-section {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: 100%;
  /* max-width: 1656px; */
  flex-wrap: wrap;
  justify-content: center;
}

/* ------------------PAGE NUMBER------------------ */
.zr-page-number {
  /*width: 358px;*/
  height: 50px;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}

.zr-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.zr-num:hover {
  background-color: var(--text-secondary);
  color: var(--text-secondary-2);
  border-radius: 4px;
}

.zr-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}

.zr-arrow img {
  height: 12px;
}

.zr-num-select {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
  background-color: var(--main-blue);
  color: var(--text-secondary);
  border-radius: 4px;
}


/* ---------CUSTOM ARROW---------- */
/* prev btn */
.zr-pre-btn {
  width: 52.162113189697315px !important;
  height: 55.676761627197315px !important;
  background: url('../IMAGES/icon/left-arrow.svg') no-repeat !important;
  position: absolute;
  left: 30px !important;
  bottom: 12px !important;
  border: none !important;
}

.zr-pre-btn:before {
  content: '' !important;
  background: url('../IMAGES/icon/left-arrow.svg') no-repeat !important;
  position: absolute;
  left: 30px !important;
  bottom: 12px !important;
}

.zr-pre-btn:hover {
  background: url('../IMAGES/icon/left-arrow.svg') no-repeat !important;
}


.zr-pre-btn:focus {
  background: url('../IMAGES/icon/left-arrow.svg') no-repeat !important;
  position: absolute;
  left: 30px !important;
  bottom: 12px !important;
}

/* next btn */
.zr-next-btn {
  transform: scaleX(-1) !important;
  background: url('../IMAGES/icon/left-arrow.svg') no-repeat !important;
  width: 52.162113189697315px !important;
  height: 55.676761627197315px !important;
  border: none;
  position: absolute !important;
  bottom: 12px !important;
  left: 210px;
}

.zr-next-btn:before {
  content: '' !important;
  /* bottom: 12px !important; */

  /* left: 210px; */
  transform: scaleX(-1) !important;
  content: '' !important;
  background: url('../IMAGES/icon/left-arrow.svg') no-repeat !important;
}

.zr-next-btn:hover {
  background: url(../IMAGES/icon/left-arrow.svg) no-repeat !important;
}

.zr-next-btn:focus {
  bottom: 12px !important;

  left: 210px;
  transform: scaleX(-1) !important;
  background: url('../IMAGES/icon/left-arrow.svg') no-repeat !important;

}

.zr-custom-arrows-blog {
  position: absolute;
}
.zr-banner-text-container .slick-prev,
.zr-banner-text-container .slick-next.zr-main-container{
  display: none;
}
/* --------dots------------ */
.slick-dotted.slick-slider {
  margin-bottom: 0 !important;
}

/* ----slick dots------*/


.zr-blog-banner-slider .slick-dots {
  bottom: 37px !important;
  left: -475px !important;
  width: 16%;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.zr-blog-banner-slider .slick-dots li {
  margin: 0;
  padding: 0;
  width: 47px;
  height: 7px;
  margin-right: 2px;
  position: relative;
  margin: 0;
  padding: 0;
  width: 8px;
  height: 8px;
  background: var(--text-secondary-1);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.zr-blog-banner-slider .slick-dots li:last-child {
  margin-right: 0;
}

.zr-blog-banner-slider .slick-dots li button {
  padding: 0;
  width: 41%;
  height: 100%;
}

.zr-blog-banner-slider .slick-dots li.slick-active {
  width: 47px !important;
  height: 8px !important;
  border-radius: 4px !important;
  background: var(--main-blue);
}

.zr-blog-banner-slider .slick-dots li button {
  display: none;
}


.zr-blog-banner-slider .slick-dots {
  bottom: 17px;
  left: 76px;
  width: 14%;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* BLOG DETAIL */
.zr-main-blog-detail {
  background-color: var(--custom-color-primary);
  font-family: var(--main-font);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* height: 4608px; */
  background:
    linear-gradient(342deg,
      var(--custom-color-primary) 6%,
      var(--custom-color-secondary) 0%,
      var(--custom-color-secondary) 24%,
      var(--custom-color-primary) 20%);
  position: relative;
  overflow: hidden;
  /* text-align: center; */
}

.zr-head-banner {
  width: 100%;
}

.zr-head-banner-img {
  /*  background: url('../IMAGES/banners/head-banner-blog-detail.svg') no-repeat;*/
  width: 100%;
  max-height: 701px;
  margin-top: 120px;
  clip-path: polygon(3% 0%,
    0% 50%,
    3% 100%,
    96% 100%,
    100% 50%,
    96% 0%);

  align-items: center;
}
.zr-head-banner-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------BLOG TITLE CONTAINER------------------ */
.zr-blog-detail-title-container {
  width: 1152px;
  height: 194px;
  background-color: var(--text-secondary-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* ------------------BLOG DETAIL CONTAINER------------------ */
.zr-blog-detail-text-container {
  width: 1152px;
  /* height: 2734px; */
  background-color: var(--text-secondary);
  direction: rtl;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: 32px; */
}

.zr-blog-detail-text {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 1088px;
  /* height: 2734px; */
}

/* ------------------BLOG SLIDER CONTAINER------------------ */


.zr-blog-head-card {
  height: 47px;
  width: 50%;
  /* margin-inline: 80px !important; */
  margin: 0 auto;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: var(--text-secondary);
}

/* .zr-blog-image-wrapper {
display: grid;
place-items: center;
margin-top: -34px !important;
margin-bottom: -40px;
}

.zr-blog-image-wrapper img {
grid-area: 1 / 1;
width: 100%;
display: block;
}

.zr-blog-image-wrapper img.zr-blog-overlay {
pointer-events: none;
z-index: 1;
} */

/* blog content */





.zr-blog-title {
  color: var(--main-font);
  font-size: 18px;
}

.zr-detail-blog-1 {
  gap: 16px;
  align-items: flex-start;
}



/* ----arrow---- */
.zr-blog-custom-arrows {
  position: relative;
}


.zr-blog-custom-arrows .slick-prev {
  background: url('../IMAGES/icon/pre-arrow.svg') no-repeat !important;
  width: 32px !important;
  height: 32px !important;
  position: absolute;
  top: -361px;
  left: -864px;
}

.zr-blog-custom-arrows .slick-prev::before {
  width: 32px !important;
  height: 32px !important;
  position: absolute;
  top: -361px;
  left: -864px;
}

.zr-blog-custom-arrows .slick-next {
  background: url('../IMAGES/icon/next-arrow.svg') no-repeat !important;
  width: 32px !important;
  height: 32px !important;
  position: absolute;
  top: -361px;
  left: 848px;
}

.zr-blog-custom-arrows .slick-next::before {
  width: 32px !important;
  height: 32px !important;
  position: absolute;
  top: -361px;
  left: 848px;
}



/*------------------ show button ---------------------*/
.zr-show-btn {
  background-color: var(--bg-octonary-1);
  width: 152px;
  height: 48px;
  border: none;
  border-radius: 4px;
  font-family: var(--main-font);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: color 0.3s ease;
  z-index: 1;
  /* margin-top: 44px; */
  margin-bottom: 41px;

}

.zr-space-btn {
  margin-top: 42px;

}

.zr-show-btn:hover {

  color: var(--text-secondary);
}

.zr-show-btn::before {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-color: var(--btn-bg-2);
  border: 1px solid var(--main-blue);

  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.5s ease;
  transform-origin: bottom center;
  z-index: -1;
}

.zr-show-btn:hover::before {
  transform: scale(1);
}

/* ------------------FOOTER------------------ */
.zr-spliter-three {
  width: 296px;
  height: 35px;
  position: absolute;
  left: 812px;
  top: 4606px;
}

/* -------------- */
.zr-blog-detail-slider {
  width: 100%;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
  max-width: 1540px;
}

.zr-blog-detail-slider .slick-track {
  display: flex !important;
  justify-content: flex-start;
  align-items: stretch;
  margin-left: -8px;
}

.zr-blog-detail-slider .slick-slide {
  box-sizing: border-box;
  margin-right: 8px;
}

.zr-blog-card {
  display: flex !important;
  flex-direction: column;
  gap: 72px;
  align-items: center;
  gap: 62px;
  position: relative;
  width: 100%;
  height: auto;
}

/* .zr-blog-image-wrapper {
display: grid;
place-items: center;
margin-top: -34px !important;
margin-bottom: -40px;
}

.zr-blog-image-wrapper img {
grid-area: 1 / 1;
width: 100%;
display: block;
}

.zr-blog-image-wrapper img.zr-blog-overlay {
pointer-events: none;
z-index: 1;
} */

/* blog content */



.zr-blog-title {
  color: var(--main-font);
  font-size: 18px;
}

.zr-detail-blog-1 {
  gap: 16px;
  align-items: flex-start;
}



.zr-blog-detail-slider .slick-next,
.zr-blog-detail-slider .slick-next:focus,
.zr-blog-detail-slider .slick-next:hover {
  background: url('../IMAGES/icon/pre-arrow.svg') no-repeat !important;
  width: 32px;
  height: 32px;
}

.zr-blog-detail-slider .slick-prev::before {
  content: '' !important;
}

.zr-blog-detail-slider .slick-prev,
.zr-blog-detail-slider .slick-prev:focus,
.zr-blog-detail-slider .slick-prev:hover {
  background: url('../IMAGES/icon/next-arrow.svg') no-repeat !important;
  right: -43px !important;
  width: 32px;
  height: 32px;
}

.zr-blog-detail-slider .slick-next::before {
  content: '' !important;
}






.slick-list {
  margin: 0;
}

.zr-title-size {
  padding: 32px 0;
}

.zr-blog-detail-slider .slick-dots {
  bottom: -52px !important;
  left: 50% !important;
  transform: translateX(-50%);
  width: auto;
  display: flex !important;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.zr-blog-detail-slider .slick-dots li {
  margin: 0;
  padding: 0;
  width: 8px;
  height: 8px;
  background: #D6D6D6;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.zr-blog-detail-slider .slick-dots li.slick-active {
  width: 47px !important;
  height: 8px !important;
  border-radius: 4px !important;
  background: var(--main-blue);
}

.zr-blog-detail-slider .slick-dots li button {
  display: none;
}

/*-------------------------new-------------------------*/
.zr-title-1-desc{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blog-frame{
  object-fit: cover; 
  max-height: 374px ;
  height: 100%;
  max-width: 374px;
}


ul, ol {
  list-style: none; 
  padding: 0;       
  margin: 0;      
}

.zr-blog-card-layout{
  max-width: 374px;
}

.zr-blog-card-title{

  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  text-align: right;

}

.zr-no-wrap{
  white-space: nowrap !important;    
}


.banner-text-blog-detail{

  max-width: 1088px;
  max-height: 590px;
  object-fit: cover; 
}



.zr-item-hasfilter {
  width: 10px;
  height: 10px;
  background: var(--main-blue);
  display: none; 
  border-radius: 50%;
  margin: auto;
}

.zr-hasfilter .zr-item-hasfilter {
  display: flex
    ;
}



.zr-item-filter-list{
  gap:0.5rem; 
  overflow: hidden;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  /*width: 80%;*/
  padding-block: 1px;
  padding-right: 1px;
}



body::-webkit-scrollbar {
  width: 0.25rem;
}

body::-webkit-scrollbar-track {
  background: var(--custom-color-primary);
}

body::-webkit-scrollbar-thumb {
  background: var(--main-blue);
}

.zr-hide-scroll-bar {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.zr-hide-scroll-bar::-webkit-scrollbar {
  display: none;
}

.zr-horizental-scroll{

  max-width: 1362px; 
}


.zr-item-filter div{
  white-space: nowrap !important;  

}

input:checked+.switch-slider:before {
  left: calc(100% + -21px);
}
.switch-slider.round:before {
  border-radius: 50%;
}
.switch-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.switch-slider {
  background-color: #45658C;
}

.switch-slider.round {
  border-radius: 32px;
}
.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: gray;
  -webkit-transition: .4s;
  transition: .4s;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.zr-zero-m {
  margin: 0;  
}
.zr-none-exist{
  background-color: #D6D6D6CC;  
}

.tree-item {
  justify-content: center;   
}
.filter-option-list{
  width: 100%;
}

.zr-cancle-layout {

  display: none;
}

.zr-filter-box-title{
  text-align: center !important;
}

.search-box{
  border: 1px solid gray;
}

.range-input-style{
  direction: rtl;
  border: 1px solid #C2C2C2;
  border-radius: 4px !important;
  width: 135px;
  height: 43px;
  display: flex;
}

.range-input-style input{
  border: none; 
}

.gray-txt{
  color:#AFAFAF; 
}

.gap-1{
  gap:1rem; 
}

.sp-dialog-overlay{
  z-index: 9999 !important;
}


.liked-btn{
  background: #45658C !important; 
}

.liked-btn span {
  color: #fff !important; 

}

.stone-property {
  display: flex;
  gap: 8px;
  direction: rtl; 
}

.sp-dialog-button{
  display: none !important; 
}

.zr-child-basket-box-container.active {
  display: flex;
}

.zw-cart-main{
  margin-top: 8rem !important; 
}
.zr-easy-links{
  max-height: 180px;
  flex-wrap: wrap;
  display: flex;
  flex-direction: column;
  direction: rtl;
  gap: 0.5rem;
  /* column-width: 204px; */
  width: 416px;
  align-items: center;
}

.zr-easy-links li>a{
  font-size: 14px; 
}

.zr-nowrap {
  white-space: nowrap; 
}

.align-txt{
  text-align : center;
}

.submit-filters {
  background: #ffff;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; 
  height: 116px;
}

.submit-filters a {
  width: 100%;
  display: flex;
  /* text-align: right; */
  justify-content: center;
  height: 52px;
  background: #45658C;
  margin-inline: 2rem;
  border-radius: 4px;
  color: #fff;
  align-items: center;

}

.zw-account {
  margin-top: 9rem; 
}

.tree-checkbox {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 6px !important;
  border: 1px solid #999 !important;
  background: #ffff !important;
  cursor: pointer !important;
  position: relative !important;
  vertical-align: middle !important;
  transition: background 0.2s ease, border 0.2s ease !important;
}

.tree-checkbox:checked {
  background: #44678c !important;
  border-color: #44678c !important;
}

.tree-checkbox:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 6px !important;
  top: 3px !important;
  width: 5px !important;
  height: 10px !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}


.sp-f-check:before {
  background-color: transparent !important;
  border: none !important;
}

.tree-item div {
  height: 40px;
  margin: 0 !important; 
}

.parent-slide li{
  height: 40px;

}

.zr-shape-category {
  overflow: auto;     
  scrollbar-width: none; 
  -ms-overflow-style: none; 
}

.zr-shape-category::-webkit-scrollbar {
  display: none;
}

.zr-banner-img-layout {
  max-width : 406px ; 
  max-height : 204px;
}

.zr-banner-img-layout img {
  width : 100%;
  height : 100%;
  object-fit : cover;
  max-height: 204px;	
}

.zr-res-sub-menu-layout{
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden; 
}


.zr-deadline-txt {
  gap : 5px; 
}

.zr-discount-box {
  display : none;
  position: absolute;
  top: 100%;
  right: 0;
  background : var(--text-secondary); 
  box-shadow: 0px 0px 8px 0px #00000040;
  border-radius : 4px;
  width : 250px;
  margin-top: 4px;
}

.zr-x {
  width : 12px; 
  height : 12px;
  display : none;
}



.zr-title-discount {
  background : #C30000;
  min-height : 30px;
  margin : 4px;
  color : var(--text-secondary);
  border-radius : 4px;
  padding-inline : 4px;
}

.zr-discount-detail-row {
  gap : 10px; 
}

.zr-discount-row {
  border-bottom : 1px solid #E5E5EA; 
}

.zr-discount-row:last-child {
  border-bottom : none; 
}

.zr-discount-label-1:hover  .zr-discount-box {
  display : block; 
}

.zr-discount-label-1::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 10px;
  top: 100%;
}


.zr-timer-box {
  position : absolute;
  top : 0; 
  margin-top: 1rem;
  margin-right: 1rem;
  background : #C30000 ;
  border-radius : 4px;
  min-height : 32px;
  padding-inline: 2px;
  width: 188px;
  gap : 4px;
}

.zr-timer-box p {
  color : #fff; 
}

.zr-time {
  background : #F3F3F3;
  color : #000 !important;
  border-radius : 4px;
  flex : 1;
  min-height: 28px;
}

.zr-discount-price {
  color : #868686;
  flex: 1;
  text-align: center;
}

.zr-flex-start {
  justify-content: flex-start; 
}

.zr-center {
  align-items: center;
}

.zr-discount-txt-detail {
  background: #C30000;
  color: #fff;
  border-radius: 4px;
  min-height: 32px;
  padding-inline: 6px;
}

.zr-detail-p-discount {
  max-width: 263px;
  margin-left : auto;
}

.zr-details-discount-box {
  display : none ;
  position: absolute;
  background: var(--text-secondary);
  color: var(--text-secondary-2);
  top: 100%;
  width: 266px;
  box-shadow: 0px 0px 8px 0px #00000040;
  border-radius : 8px;
  margin-top : 4px;
  left : 0;
  z-index : 99;
}


.zr-discount-title-2 {
  background: #C30000;
  color: var(--text-secondary);
  text-align: center;
  min-height: 30px;
  border-radius: 8px;
  margin: 4px;
}


.zr-discount-txt-detail:hover .zr-details-discount-box {
  display : block; 
}

.zr-sub-2 {
 position: relative ; 
}

.zr-sub-2::before {
  content : ' ';
  background : url('/themes/website/safayer/images/icon/pre-arrow.svg') no-repeat ;
  width: 14px;
  height: 12px;
  position: absolute;
  left: 4px;
  background-size: contain;
}

.zr-sub-2 {
  position : relative;
}


.zr-third-stage {
  display : none;
}


.zr-sub-2:hover .zr-third-stage {
  display : flex;
  position: absolute;
  right: 100%;
  top : 0;
  background: var(--text-secondary);
  width: 181px;
  height : 310px;
  box-shadow: 0px 0px 10px 0px #00000029;
  border: 1px solid #C2C2C2;
  margin-right : 0.5rem;
  z-index : 99;
}