@font-face {
  font-family: "Koodak";
  src: url("/assets/font/font.woff2");
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/font/Poppins.ttf");
}
:root {
  --bgClr: #fff;
  --bgClr2: #f8f8f8;
  --bgClr3: #dcdce6;
  --bgClr4: #f4f8fd;
  --clr3: #333;
  --clr4: #444;
  --clr5: #555;
  --clr7: #777;
  --clrA: #aaa;
  --clrC: #ccc;
  --clrD: #ddd;
  --clrE: #eee;
  --redClr: #f15337;
  --redClr2: #b63721;
  --redClrOp1: #b6372117;
  --blueClr1: #175699;
  --blueClr2: #2576ce;
  --blueClr3: #67c6e3;
  --blueClr4: #dff5ff;
  --blueClr5: #f0faff;
  --blueClr6: rgb(84, 147, 211);
  --blueClr7: rgb(66, 130, 194);
  --blueClrOp1: #378ce718;
  --blackOpb9: #000000b9;
  --blackOp8e: #0000008e;
  --blackOp1E: #0000001e;
  --blackOp0A: #0000000a;
  --blackOp10: #00000010;
  --blackOp09: #00000009;
  --blackOp07: #00000007;
  --blackOp06: #00000006;
  --blackOp25: #00000025;
  --greenClr1: rgb(13, 131, 13);
  --greenClrOp1: rgba(13, 131, 13, 0.199);
}
body,
html {
  background-color: var(--bgClr);
  max-width: 100vw;
  overflow-x: clip;
  direction: rtl;
  scroll-behavior: smooth;
}

body::-webkit-scrollbar {
  width: 7px;
}
body::-webkit-scrollbar-track {
  background: #f1f1f1;
}
body::-webkit-scrollbar-thumb {
  background: #ccc;
}
body::-webkit-scrollbar-thumb:hover {
  background: #999;
}
.hideOverflow {
  overflow-y: hidden;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--bgClr2) inset !important;
}
svg {
  color: var(--clr7);
}
.container {
  width: 94%;
  margin: 0 auto;
  max-width: 1200px;
}
.flex {
  display: -webkit-flex;
  display: flex;
}
.flexCol {
  flex-direction: column;
}
.grid {
  display: -ms-grid;
  display: -moz-grid;
  display: grid;
}
.flexCenter {
  justify-content: center;
  align-items: center;
}
.justifyBetween {
  justify-content: space-between;
}
.alignCenter {
  align-items: center;
}
.mar5 {
  margin-top: 5px;
}
.mar10 {
  margin-top: 10px;
}
.mar15 {
  margin-top: 15px;
}
.mar20 {
  margin-top: 20px;
}
.mar30 {
  margin-top: 30px;
}
.mar40 {
  margin-top: 40px;
}
.mar60 {
  margin-top: 60px;
}
.gap5 {
  gap: 5px;
}
.gap10 {
  gap: 10px;
}
.gap20 {
  gap: 20px;
}
.pad10 {
  padding: 10px;
}
.pad5 {
  padding: 5px;
}
.rel {
  position: relative;
}
.rtl {
  direction: rtl;
}
button {
  outline: none;
  border: none;
  background-color: transparent;
  cursor: pointer;
  text-align: unset;
}
.priceLabel {
  background-repeat: no-repeat;
  background-position: left 5px center;
  background-size: 1.1em;
  background-image: url("/assets/icon/priceLabel.svg");
  padding-left: 28px;
}
.seeAll {
  gap: 5px;
  color: var(--blueClr2);
  position: relative;
}
.seeAll svg {
  color: var(--blueClr2);
  font-size: 0.8em;
}
.seeAll::after {
  content: "";
  width: 0;
  height: 1px;
  background-color: var(--blueClr2);
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  transition: width 0.4s;
}
.seeAll:hover::after {
  width: 100%;
}
.hide {
  display: none;
}
/* text */
.copyText {
  -ms-user-select: unset;
  -moz-user-select: unset;
  user-select: unset;
}
.faFont {
  font-family: "Koodak", Arial, Helvetica, sans-serif;
  font-weight: 500;
}
.enFont {
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  font-weight: 400;
}
.hideText {
  color: transparent;
  font-size: 0em;
}
.textClr3 {
  color: var(--clr3);
}
.textClr4 {
  color: var(--clr3);
  opacity: 0.95;
}
.textClr5 {
  color: var(--clr3);
  opacity: 0.8;
}
.textClr7 {
  color: var(--clr3);
  opacity: 0.7;
}
.textClrA {
  color: var(--bgClr);
  opacity: 0.6;
}
.textClrF {
  color: var(--bgClr);
}
.textClrC {
  color: var(--bgClr);
  opacity: 0.6;
}
.justifyText {
  text-align: justify;
}
.hideScrollBar::-webkit-scrollbar {
  display: none;
}
.hideScrollBar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.customScrollbar::-webkit-scrollbar {
  width: 7px;
}
.customScrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.customScrollbar::-webkit-scrollbar-thumb {
  background: #ccc;
}
.customScrollbar::-webkit-scrollbar-thumb:hover {
  background: #999;
}
.bold {
  font-weight: 600;
}
.leftSide {
  margin-right: auto;
}
.fitCenter {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}
.iconBtn {
  width: 35px;
  min-width: 35px;
  height: 35px;
  min-height: 35px;
  border-radius: 7px;
  background-color: transparent;
  transition: background-color 0.4s;
  background-repeat: no-repeat;
  background-position: center;
}
.iconBtn:hover {
  background-color: var(--blackOp10);
}
.ltr {
  direction: ltr;
}
.hideText {
  color: transparent;
  font-size: 0;
}
.textSize8 {
  font-size: 0.8em;
}
.textSize9 {
  font-size: 0.9em;
}
.textSize1 {
  font-size: 1em;
}
.textSize11 {
  font-size: 1.1em;
}
.textSize12 {
  font-size: 1.2em;
}
.textSize14 {
  font-size: 1.4em;
}
.textSize16 {
  font-size: 1.6em;
}
.divLink {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  background-color: var(--blackOp10);
}
.imageLink {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: 100%;
  transition: opacity 2s;
  position: absolute;
  opacity: 0;
}
.divLink.load .imageLink {
  opacity: 1;
}
.divider {
  background-color: var(--blackOp1E);
  height: 1px;
}
.textBtn {
  padding: 7px 10px;
  transition: background-color 0.4s;
  border-radius: 5px;
}
.textBtn:hover {
  background-color: var(--blackOp0A);
}
/* mainContentGrid */
@media screen and (min-width: 769px) {
  .mainContentGrid {
    grid-template-columns: 1fr 2.5fr;
    gap: 10px;
  }
}
@media screen and (min-width: 968px) {
  .mainContentGrid {
    grid-template-columns: 350px 1fr;
    gap: 20px;
  }
}
/* navigation */
.navigationCloser {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background-color: var(--blackOp8e);
  z-index: 995;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.navigationCloser.active {
  opacity: 1;
  pointer-events: unset;
  cursor: pointer;
}
.naviagationSection {
  position: fixed;
  top: 0;
  right: 0;
  width: 70%;
  height: 100dvh;
  background-color: var(--bgClr);
  z-index: 996;
  opacity: 0;
  transform: translateX(100%);
  max-width: 400px;
  transition: transform 0.4s, opacity 0.1s 0.4s;
  pointer-events: none;
  padding: 15px;
}
.naviagationSection.active {
  transition: transform 0.4s;
  transform: translateX(0);
  opacity: 1;
  pointer-events: unset;
}
.navigationCloserBtn svg {
  color: var(--redClr);
}
.navigationItem svg {
  width: 25px;
}
.navigationItem.active,
.navigationItem.active svg {
  color: var(--redClr);
  position: relative;
}
.navigationItem.active:after {
  content: "";
  position: absolute;
  right: -15px;
  width: 5px;
  height: 110%;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--redClr);
}
@media screen and (min-width: 769px) {
  .navigationCloser {
    display: none;
  }
  .naviagationSection {
    position: sticky;
    top: 0;
    right: unset;
    transform: translateX(0);
    opacity: 1;
    max-width: unset;
    width: 100%;
    padding: 10px 15px;
    background-color: var(--blackOp09);
    pointer-events: unset;
  }
  .navigationList {
    gap: 10px;
  }
  .navigationCloserBtn {
    display: none;
  }
}
/* header */
.bodyHeader {
  position: sticky;
  top: 0;
  height: 50px;
  background-color: var(--bgClr);
  z-index: 900;
}
.bodyHeader::before {
  content: "";
  width: 4%;
  background-color: var(--bgClr);
  height: 100%;
  position: absolute;
  left: -4%;
  top: 0;
}
.bodyHeader::after {
  content: "";
  width: 4%;
  background-color: var(--bgClr);
  height: 100%;
  position: absolute;
  right: -4%;
  top: 0;
}
.headerDivider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
/* modalSection */
.modalSection {
  position: fixed;
  top: 80px;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 1000;
}
.modalDiv,
.errorDiv {
  width: 96%;
  background-color: var(--bgClr);
  margin: 0 auto;
  max-width: 600px;
  border-radius: 5px;
  padding: 15px;
  box-shadow: 0 0 25px #00000050;
  opacity: 0;
  transform: translateY(-80px);
  transition: opacity 0.6s, transform 0.6s;
}
.modalDiv.active,
.errorDiv.active {
  opacity: 1;
  transform: translateY(0);
}
/* elemnts */
.addBtn {
  border-radius: 7px;
  padding: 5px 15px;
  cursor: pointer;
  width: fit-content;
  border: 1px solid var(--blackOp10);
  transition: background-color 0.4s;
}
.addBtn:hover {
  background-color: var(--blackOp09);
}
.addBtn input {
  display: none;
}
@keyframes pulse {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* bodySection */
@media screen and (min-width: 769px) {
  .menuBtn {
    display: none;
  }
}
/* noResultImg */
.noResultImg {
  width: 90%;
  max-width: 250px;
}
/* svg */
.blueSvg svg {
  color: var(--blueClr7);
}
.redSvg svg {
  color: var(--redClr);
}
.textIcon {
  border: 1px solid var(--clrD);
  padding: 5px 10px;
  border-radius: 5px;
  background-color: var(--blackOp06);
  transition: background-color 0.4s;
}
.textIcon:hover {
  background-color: var(--blackOp0A);
}
/* removeModal */
.removeModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background-color: var(--blackOpb9);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
.removeModal.active {
  pointer-events: unset;
  opacity: 1;
}
.removeForm {
  width: 96%;
  padding: 25px;
  max-width: 600px;
  background-color: var(--bgClr);
  gap: 20px;
  border-radius: 7px;
}
.formBtnDiv {
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}
.confirmRemoveBtn,
.cancelRemoveBtn {
  border-radius: 5px;
  background-color: var(--redClr);
  padding: 5px 15px;
  transition: opacity 0.4s;
}
.formBtnDiv button:hover {
  opacity: 0.6;
}
.cancelRemoveBtn {
  background-color: var(--greenClr1);
}
/* paginationSection */
.paginationSection {
  margin: 40px auto 40px;
}
.paginationList {
  gap: 10px;
}
.paginationSection .iconBtn {
  background-color: var(--bgClr4);
  transition: border 0.4s;
  border: 1px solid transparent;
  cursor: pointer;
}
.paginationSection .iconBtn:hover,
.pageBtn:hover {
  border: 1px solid var(--blackOp1E);
}
.pageBtn {
  height: 35px;
  width: 35px;
  border-radius: 5px;
  background-color: var(--bgClr4);
  transition: border 0.4s linear;
  border: 1px solid transparent;
}
.currentPage {
  color: var(--bgClr);
  background-color: var(--blueClr2);
  pointer-events: none;
}