@charset "UTF-8";
@font-face {
  font-family: "notoarabic";
  src: url("../font/arabic/NotoSansArabic-CondensedMedium.eot");
  src: url("../font/arabic/NotoSansArabic-CondensedMedium.eot?#iefix") format("embedded-opentype"), url("../font/arabic/NotoSansArabic-CondensedMedium.woff2") format("woff2"), url("../font/arabic/NotoSansArabic-CondensedMedium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

input[type=checkbox] {
  display: none;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
}

body {
  font-size: 1.3rem;
  overflow-x: hidden;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: #0d62da;
  transition: color 0.3s ease;
}

button,
textarea,
input {
  font-family: inherit;
}

.container {
  width: 100%;
  height: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media only screen and (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media only screen and (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
@media only screen and (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

.sticky {
  position: sticky;
  top: 0;
}

.flex {
  display: flex;
}

.rowّ {
  flex-direction: row;
}

.row-reverse {
  flex-direction: row-reverse;
}

.column {
  flex-direction: column;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-start {
  justify-content: start;
}

.align-items-start {
  align-items: start;
}

.align-self-end {
  align-self: end;
}

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

.text-center {
  text-align: center;
}

.flex-grow-1 {
  flex-grow: 1;
}

.pt-10 {
  padding-top: 1rem;
}

.pt-20 {
  padding-top: 2rem;
}

.pt-30 {
  padding-top: 3rem;
}

.pt-40 {
  padding-top: 4rem;
}

.pt-50 {
  padding-top: 5rem;
}

.pr-10 {
  padding-right: 1rem;
}

.pr-20 {
  padding-right: 2rem;
}

.pr-30 {
  padding-right: 3rem;
}

.pr-50 {
  padding-right: 5rem;
}

.pb-10 {
  padding-bottom: 1rem;
}

.pb-20 {
  padding-bottom: 2rem;
}

.pb-30 {
  padding-bottom: 3rem;
}

.pb-40 {
  padding-bottom: 4rem;
}

.pb-50 {
  padding-bottom: 5rem;
}

.mt-10 {
  margin-top: 1rem;
}

.mt-20 {
  margin-top: 2rem;
}

.mt-30 {
  margin-top: 3rem;
}

.mt-40 {
  margin-top: 4rem;
}

.mt-50 {
  margin-top: 5rem;
}

.mt-100 {
  margin-top: 10rem;
}

.mt-200 {
  margin-top: 20rem;
}

.p {
  padding: 1rem 1rem 1rem 1rem;
}

.mb-10 {
  margin-bottom: 1rem;
}

.mb-20 {
  margin-bottom: 2rem;
}

.mb-30 {
  margin-bottom: 3rem;
}

.mb-40 {
  margin-bottom: 4rem;
}

.mb-50 {
  margin-bottom: 5rem;
}

.mb-100 {
  margin-bottom: 10rem;
}

.mr-5 {
  margin-right: 0.5rem;
}

.mr-10 {
  margin-right: 1rem;
}

.mr-20 {
  margin-right: 2rem;
}

.mr-30 {
  margin-right: 3rem;
}

.ml-5 {
  margin-left: 0.5rem;
}

.m {
  margin: 1rem 1rem 1rem 1rem;
}

.mr-5 {
  margin-right: 0.5rem;
}

.w-30 {
  width: 30rem;
}

.w-35 {
  width: 3.5rem;
}

.w-100-precent {
  width: 100%;
}

.h-auto {
  height: auto;
}

.border {
  border: 1px solid red;
}

.bg-green {
  background-color: #8cb369;
}

.bg-warning {
  background-color: #f4d35e;
}

.bg-blue {
  background-color: #51abcb;
}

.bg-blue-2 {
  background-color: #1982c4;
}

.bg-blue-3 {
  background-color: #a8d5e5;
}

.header {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  width: auto;
  height: auto;
}

.menubar {
  display: flex;
  justify-content: center;
  align-items: space-between;
  flex-direction: row;
  width: 100%;
  height: 5rem;
  margin-top: 2rem;
  background-color: white;
}
.menubar__content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 90%;
  height: auto;
}
.menubar__items {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40%;
  height: auto;
  background-color: #fafafa;
  border-radius: 5rem 5rem;
}
@media only screen and (max-width: 1200px) {
  .menubar__items {
    width: auto;
    padding: 0 2rem 0 2rem;
  }
}
@media only screen and (max-width: 768px) {
  .menubar__items {
    display: none;
  }
}
.menubar__item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  padding: 0.5rem 0.5rem;
  margin: 0 2rem 0 2rem;
  color: black;
  cursor: pointer;
  font-family: "notoarabic";
  font-size: 1.2rem;
}
.menubar__item .sub-item-img {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  transform: rotate(-90deg);
}
@media only screen and (max-width: 1200px) {
  .menubar__item {
    padding: 1rem 2rem 1rem 2rem;
  }
}
@media only screen and (max-width: 885px) {
  .menubar__item {
    margin: 0 1rem 0 1rem;
  }
}
.menubar__subitems {
  position: absolute;
  z-index: 200;
  width: 100%;
  top: 7rem;
  height: auto;
  right: 0;
  transform: scale(1, 0);
  transition: ease 0.3s;
  transform-origin: top;
  padding: 4rem 0 4rem 0;
  background-color: white;
  overflow: none;
}
@media only screen and (max-width: 768px) {
  .menubar__subitems {
    display: none;
  }
}
.menubar__categoris {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: row;
  flex-wrap: wrap;
  width: 50%;
  margin: 0 0 0 2rem;
  height: auto;
  background-color: white;
}
@media only screen and (max-width: 990px) {
  .menubar__categoris {
    margin: 0 0 0 0;
  }
}
.menubar__categoris-tab {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: auto;
  height: auto;
  margin: 2rem 4rem 2rem 0;
}
@media only screen and (max-width: 990px) {
  .menubar__categoris-tab {
    margin: 2rem 2rem 2rem 0;
  }
}
.menubar__categoris-tab > a {
  position: relative;
  color: black;
  font-weight: bold;
  font-family: "notoarabic";
  font-size: 1.2rem;
}
.menubar__categoris-tab > a::before {
  content: "";
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  background-color: #b19276;
  border-radius: 50% 50%;
  top: 0.5rem;
  right: -30%;
}
.menubar__categoris-items {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: auto;
  height: auto;
}
.menubar__container-item {
  position: relative;
  background-color: white;
  width: 100%;
  height: auto;
}
.menubar__container-item::before {
  position: absolute;
  content: "";
  top: 0;
  right: -20rem;
  width: 20rem;
  height: 100%;
  background-color: white;
}
.menubar__container-item::after {
  position: absolute;
  content: "";
  top: 0;
  left: -20rem;
  width: 20rem;
  height: 100%;
  background-color: white;
}
.menubar__categoris-item {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  display: inline-block;
  width: 100%;
  height: auto;
  margin: 2rem 0 0 0;
  padding: 0 2rem 0 2rem;
  color: black;
  cursor: pointer;
}
.menubar__categoris-view {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 50%;
  margin-top: 4rem;
  height: 100%;
}
@media only screen and (max-width: 1180px) {
  .menubar__categoris-view {
    margin-top: 0;
    margin-bottom: 14rem;
  }
}
.menubar__categoris-view-item {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.menubar__categoris-view-item > a {
  margin-bottom: 2rem;
  color: black;
  font-family: "notoarabic";
  font-size: 1.2rem;
}
.menubar__categoris-view-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.menubar__categoris-view-tabs .first-pic {
  position: relative;
  width: 30rem;
  height: 40rem;
  border-radius: 2rem 2rem;
  filter: brightness(70%);
}
@media only screen and (max-width: 990px) {
  .menubar__categoris-view-tabs .first-pic {
    width: 20rem;
  }
}
.menubar__categoris-view-tabs .secend-pic {
  width: 25rem;
  height: 17rem;
  border-radius: 2rem 2rem;
  margin-bottom: 2rem;
  filter: brightness(97%);
}
@media only screen and (max-width: 990px) {
  .menubar__categoris-view-tabs .secend-pic {
    width: 20rem;
  }
}
.menubar__categoris-view-tabs .therd-pic {
  width: 25rem;
  height: 17rem;
  border-radius: 2rem 2rem;
  margin-top: 2rem;
  filter: brightness(70%);
}
@media only screen and (max-width: 990px) {
  .menubar__categoris-view-tabs .therd-pic {
    width: 20rem;
  }
}
.menubar__tabprofile {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .menubar__tabprofile {
    display: none;
  }
}
.menubar__tabprofile-mobile {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
}
@media only screen and (min-width: 768px) {
  .menubar__tabprofile-mobile {
    display: none;
  }
}
.menubar__tabprofile-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: auto;
  height: auto;
  margin: 0 1rem 0 1rem;
}
.menubar__tabprofile-item img {
  cursor: pointer;
  background-color: white;
  width: 2rem;
  height: 2rem;
  border: none;
}
.menubar__tabprofile-item-click {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: auto;
  height: auto;
  margin: 0 1rem 0 1rem;
}
.menubar__tabprofile-item-click input[id=bergermenu] {
  display: none;
}
.menubar__tabprofile-item-click .close-menu {
  display: none;
  cursor: pointer;
  background-color: white;
  width: 2rem;
  height: 2rem;
  border: none;
}
.menubar__tabprofile-item-click .berger-menu {
  cursor: pointer;
  background-color: white;
  width: 2rem;
  height: 2rem;
  border: none;
}
.menubar__tabprofile-item-click input[id=bergermenu]:checked ~ .berger-menu {
  display: none;
}
.menubar__tabprofile-item-click input[id=bergermenu]:checked ~ .close-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.menubar__category-mobile {
  display: none;
}
@media only screen and (max-width: 768px) {
  .menubar__category-mobile {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    top: -20rem;
    width: 100%;
    height: 100%;
    z-index: 400;
    left: 0;
    right: -80rem;
    transition: all 0.3s ease-in;
    margin: 0 10rem 0 10rem;
  }
  .menubar__category-mobile::before {
    position: absolute;
    content: "";
    width: 20%;
    height: 100%;
    background-color: white;
    right: -20%;
  }
  .menubar__category-mobile::after {
    position: absolute;
    content: "";
    width: 20%;
    height: 100%;
    background-color: white;
    left: -20%;
  }
}
.menubar__category-items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  background-color: white;
}
.menubar__category-item {
  width: 100%;
  height: auto;
  border-top: 1px solid #ceced1;
}
.menubar__category-item input[id=category-select] {
  display: none;
}
.menubar__category-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 5rem;
}
.menubar__category-select a {
  font-family: "notoarabic";
  color: black;
  cursor: pointer;
  padding: 0 1rem 0 0;
}
.menubar__category-select img {
  width: 1.5rem;
  height: 1.5rem;
  transition: all ease-in 0.3s;
  margin-left: 1rem;
}
.menubar__category-item input:checked ~ .menubar__category-sub-menu {
  transform: scale(1, 1);
}
.menubar__category-item input:checked ~ .menubar__category-sub-menu a {
  display: flex;
}
.menubar__category-item input:checked ~ .menubar__category-select img {
  transform: rotate(90deg);
}
.menubar__category-sub-menu {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  transform: scale(0, 1);
  overflow: none;
  transition: all ease 0.3s;
  transform-origin: top;
}
.menubar__category-sub-menu a {
  display: none;
  height: 5rem;
  width: 100%;
  font-family: "notoarabic";
  color: black;
  padding: 0 1rem 0 0;
}

.category-mobile-active {
  right: 0;
}

.menu-active {
  transform: scale(1, 1);
}

.hide {
  display: none;
}

.secend-item {
  display: flex;
  justify-content: space-between;
  align-items: space-between;
  flex-direction: column;
  margin-right: 2rem;
}

.first-pic-item,
.secend-pic-item,
.therd-pic-item {
  position: relative;
  z-index: 105;
}
.first-pic-item span,
.secend-pic-item span,
.therd-pic-item span {
  position: absolute;
  bottom: 3rem;
  right: 2rem;
  color: white;
  font-family: "notoarabic";
  font-size: 1.2rem;
}

.sub-item {
  color: black;
  cursor: pointer;
}

.menubar__subitems::before {
  position: absolute;
  content: "";
  width: 20rem;
  height: 100%;
  right: -20rem;
  top: 0;
  background-color: white;
  z-index: 100;
}
.menubar__subitems::after {
  position: absolute;
  content: "";
  width: 20rem;
  height: 100%;
  left: -20rem;
  top: 0;
  background-color: white;
  z-index: 100;
}

.search {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: white;
}
.search::before {
  position: absolute;
  content: "";
  top: 0;
  right: -20rem;
  width: 20rem;
  height: 100%;
  background-color: white;
}
.search::after {
  position: absolute;
  content: "";
  top: 0;
  left: -20rem;
  width: 20rem;
  height: 100%;
  background-color: white;
  z-index: -10;
}
.search__item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.search__box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 5rem;
  border: 0.2rem solid #ceced1;
  border-radius: 0.7rem 0.7rem;
}
.search__box img {
  width: 2rem;
  height: 2rem;
}
.search__box input {
  width: 95%;
  border: none;
  outline: none;
  padding-right: 3rem;
}
.search__box input::-moz-placeholder {
  color: #ceced1;
  font-family: "notoarabic";
}
.search__box input::placeholder {
  color: #ceced1;
  font-family: "notoarabic";
}
.search__faworaite {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 5rem;
  border-bottom: 1px solid #ceced1;
}
.search__faworaite h3 {
  font-family: "notoarabic";
  color: black;
  margin-bottom: 3rem;
}
.search__faworaite-items {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-bottom: 3rem;
}
.search__faworaite-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  padding: 0.5rem 1rem 0.5rem 1rem;
  background-color: #fafafa;
  margin: 0 1.5rem 0 1.5rem;
  border-radius: 3rem 3rem;
  color: black;
  font-family: "notoarabic";
}
.search__faworaite-item img {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.search__popiolar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.search__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 3rem;
}
.search__title h3 {
  color: black;
  font-family: "notoarabic";
}
.search__title a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  color: black;
  font-family: "notoarabic";
  width: auto;
}
.search__title a img {
  margin-right: 0.5rem;
  width: 1rem;
  height: 1rem;
}
.search__content {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 3rem;
}
.search__content-item {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: auto;
  height: auto;
  margin: 0 6rem 0 0;
}
@media only screen and (max-width: 1076px) {
  .search__content-item {
    margin: 0 4rem 0 0;
  }
}
.search__content-item img {
  width: 20rem;
  height: 25rem;
  border-radius: 1.5rem 1.5rem;
}
@media only screen and (max-width: 1300px) {
  .search__content-item img {
    width: 15rem;
    height: 20rem;
  }
}
@media only screen and (max-width: 998px) {
  .search__content-item img {
    width: 10rem;
    height: 15rem;
  }
}
.search__content-item h4, .search__content-item a {
  color: black;
  font-family: "notoarabic";
}

@media only screen and (max-width: 768px) {
  .serch-mobile-hide {
    display: none;
  }
}

.searchmobile {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  position: absolute;
  top: 8rem;
  right: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding-bottom: 3rem;
  transform: scale(1, 0);
  transform-origin: top;
  transition: all 0.3s ease-in;
  z-index: 100;
  background-color: white;
}
@media only screen and (max-width: 768px) {
  .searchmobile {
    padding: 0 1rem;
  }
}
@media only screen and (min-width: 768px) {
  .searchmobile {
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  .searchmobile::before {
    position: absolute;
    content: "";
    width: 20rem;
    height: 100%;
    right: -20rem;
    top: 0;
    background-color: white;
    z-index: 100;
  }
  .searchmobile::after {
    position: absolute;
    content: "";
    width: 20rem;
    height: 100%;
    left: -20rem;
    top: 0;
    background-color: white;
    z-index: 100;
  }
}
.searchmobile__item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.searchmobile__box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 4rem;
  border: 0.2rem solid #ceced1;
  border-radius: 0.7rem 0.7rem;
}
.searchmobile__box img {
  width: 2rem;
  height: 2rem;
}
.searchmobile__box input {
  width: 95%;
  border: none;
  outline: none;
  padding-right: 3rem;
}
.searchmobile__box input::-moz-placeholder {
  color: #ceced1;
  font-family: "notoarabic";
}
.searchmobile__box input::placeholder {
  color: #ceced1;
  font-family: "notoarabic";
}
.searchmobile__faworaite {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 5rem;
  border-bottom: 1px solid #ceced1;
}
.searchmobile__faworaite h3 {
  font-family: "notoarabic";
  color: black;
  margin-bottom: 3rem;
}
.searchmobile__faworaite-items {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  margin-bottom: 3rem;
}
.searchmobile__faworaite-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  padding: 0.5rem 1rem 0.5rem 1rem;
  background-color: #fafafa;
  margin: 0 1.5rem 0 1.5rem;
  border-radius: 3rem 3rem;
  color: black;
  font-family: "notoarabic";
  margin-top: 1rem;
}
.searchmobile__faworaite-item img {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.searchmobile__popiolar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.searchmobile__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 3rem;
}
.searchmobile__title h3 {
  color: black;
  font-family: "notoarabic";
}
.searchmobile__title a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  color: black;
  font-family: "notoarabic";
  width: auto;
}
.searchmobile__title a img {
  margin-right: 0.5rem;
  width: 1rem;
  height: 1rem;
}
.searchmobile__content {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 3rem;
}
@media only screen and (max-width: 768px) {
  .searchmobile__content {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.searchmobile__content-item {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: auto;
  height: auto;
  margin: 0 6rem 0 0;
}
@media only screen and (max-width: 1076px) {
  .searchmobile__content-item {
    margin: 0 4rem 0 0;
  }
}
.searchmobile__content-item img {
  width: 20rem;
  height: 25rem;
  border-radius: 1.5rem 1.5rem;
}
@media only screen and (max-width: 1300px) {
  .searchmobile__content-item img {
    width: 15rem;
    height: 20rem;
  }
}
@media only screen and (max-width: 998px) {
  .searchmobile__content-item img {
    width: 10rem;
    height: 15rem;
  }
}
.searchmobile__content-item h4, .searchmobile__content-item a {
  color: black;
  font-family: "notoarabic";
}

.searchmobile-active {
  transform: scale(1, 1);
}

.menumobile {
  display: none;
}
@media only screen and (max-width: 768px) {
  .menumobile {
    transform: scale(1, 0);
    transition: all ease 0.3s;
    transform-origin: top;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 250;
    background-color: white;
  }
  .menumobile::before {
    position: absolute;
    content: "";
    width: 20rem;
    height: 100%;
    right: -20rem;
    top: 0;
    background-color: white;
    z-index: 100;
  }
  .menumobile::after {
    position: absolute;
    content: "";
    width: 20rem;
    height: 100%;
    left: -20rem;
    top: 0;
    background-color: white;
    z-index: 100;
  }
  .menumobile__menu-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: auto;
  }
  .menumobile__menu-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    width: 100%;
    height: 5rem;
    padding: 0 1rem 0 1rem;
    border-top: 1px solid #e7e7e8;
  }
  .menumobile__menu-item a {
    color: black;
    font-family: "notoarabic";
    cursor: pointer;
  }
  .menumobile__menu-item img {
    width: 1.5rem;
    color: black;
    height: 1.5rem;
  }
}

.menu-mobile-active {
  transform: scale(1, 1);
}

.shodow {
  position: fixed;
  top: 8rem;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.384);
  z-index: 12;
}

.banner {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 4rem;
}
@media only screen and (max-width: 768px) {
  .banner {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: row;
    margin-top: -57rem;
    border-top: 1px solid #e7e7eb;
    padding-top: 5rem;
  }
}
.banner__rigth {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  width: 40%;
  height: auto;
}
@media only screen and (max-width: 1349px) {
  .banner__rigth {
    width: 35rem;
  }
}
@media only screen and (max-width: 768px) {
  .banner__rigth {
    display: none;
  }
}
.banner__rigth img {
  width: 100%;
  height: 60rem;
  border-radius: 1rem 1rem;
}
.banner__left {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: column;
  width: 60%;
  height: auto;
  margin-right: 2rem;
}
@media only screen and (max-width: 768px) {
  .banner__left {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    width: 100%;
  }
}
.banner__top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: row;
  width: 100%;
  height: 30rem;
}
.banner__content {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: column;
  width: auto;
  height: inherit;
}
.banner__content h1 {
  font-family: "notoarabic";
  color: black;
  font-size: 3.5rem;
}
@media only screen and (max-width: 994px) {
  .banner__content h1 {
    font-size: 2.5rem;
  }
}
.banner__content h1 span {
  background-color: #efe9e4;
}
.banner__content p {
  font-family: "notoarabic";
  color: black;
  font-size: 1.3rem;
}
@media only screen and (max-width: 994px) {
  .banner__content p {
    font-size: 1.1rem;
  }
}
.banner__tags {
  position: relative;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  white-space: nowrap;
  margin-top: 1rem;
}
@media only screen and (max-width: 1310px) {
  .banner__tags {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
@media only screen and (max-width: 768px) {
  .banner__tags {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: row;
    white-space: nowrap;
  }
}
.banner__tags a {
  background-color: #fafafa;
  border-radius: 1rem 1rem;
  padding: 0.5rem 1.5rem 0.5rem 1.5rem;
  margin: 0 1rem 0 1rem;
  color: black;
  font-size: 1.1rem;
  font-family: "notoarabic";
}
.banner__tags .tag-last {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  background-color: #fafafa;
  border-radius: 1rem 1rem;
  padding: 0.5rem 1rem 0.5rem 1rem;
  margin: 0.5rem 1rem 0.5rem 1rem;
  color: black;
  font-size: 1.1rem;
  font-family: "notoarabic";
  width: auto;
  white-space: nowrap;
}
.banner__tags .tag-colors {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
}
.banner__tags .tag-colors img {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
}
.banner__tags .color-orange, .banner__tags .color-brown-orang, .banner__tags .color-brown {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50% 50%;
  margin-right: 0.5rem;
}
.banner__tags .color-orange {
  background-color: #d0bead;
}
.banner__tags .color-brown-orang {
  background-color: #b19276;
}
.banner__tags .color-brown {
  background-color: #8e755e;
}
.banner__button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  height: 30rem;
  width: 100%;
  margin-top: 4rem;
}
@media only screen and (max-width: 999px) {
  .banner__button {
    height: 25rem;
  }
}
.banner__button img {
  width: 20rem;
  height: 20rem;
  border-radius: 1rem 1rem;
  margin: 0 2rem 0 2rem;
}
@media only screen and (max-width: 999px) {
  .banner__button img {
    width: 15rem;
    height: 15rem;
    margin-top: 8rem;
  }
}
@media only screen and (max-width: 768px) {
  .banner__button img {
    width: 20rem;
    height: 20rem;
  }
}
@media only screen and (max-width: 651px) {
  .banner__button img {
    width: 15rem;
    height: 20rem;
  }
}
@media only screen and (max-width: 588px) {
  .banner__button img {
    width: 10rem;
    height: 20rem;
  }
}
@media only screen and (max-width: 459px) {
  .banner__button img {
    width: 8rem;
    height: 15rem;
  }
}
.banner__svg {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  height: 30rem;
}
@media only screen and (max-width: 768px) {
  .banner__svg {
    display: none;
  }
}
.banner__svg img {
  width: 26rem;
  height: 40rem;
}
.banner__svg-svg {
  position: absolute;
  width: 12rem;
  height: 12rem;
  left: -15rem;
  top: -7rem;
}

.category {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 10rem;
}
@media only screen and (max-width: 768px) {
  .category {
    display: none;
  }
}
.category__title {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 87%;
  height: 5rem;
}
.category__title h2 {
  font-family: "notoarabic";
  font-size: 1.5rem;
}
.category__product {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  width: 90%;
  height: auto;
}
.category__product-first a, .category__product-secend a, .category__product-therd a, .category__product-fhorth a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.category__product-first, .category__product-secend, .category__product-therd, .category__product-fhorth {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 25%;
  height: auto;
}
.category__product-first img {
  width: 100%;
  height: 44rem;
  border-radius: 1rem 1rem;
  filter: brightness(0.8);
  margin-left: 2rem;
  margin-top: 2rem;
}
.category__product-secend div img {
  width: 90%;
  height: 21rem;
  margin-top: 2rem;
  border-radius: 1rem 1rem;
}
.category__product-therd div img {
  width: 90%;
  height: 13.5rem;
  margin-top: 2rem;
  border-radius: 1rem 1rem;
}
.category__product-first-img {
  width: 90%;
  height: 13rem;
  margin-top: 2rem;
  border-radius: 1rem 1rem;
}
.category__product-last-img {
  width: 90%;
  height: 29rem;
  margin-top: 2rem;
  border-radius: 1rem 1rem;
}
.category__product-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.category__product-text {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  position: absolute;
  bottom: 1rem;
  right: 2rem;
  width: 100%;
}
.category__product-text span {
  font-family: "notoarabic";
  font-size: 1.2rem;
  color: white;
}
.category__product-tags {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.category__product-tags a {
  font-family: "notoarabic";
  font-size: 1.2rem;
  color: white;
  width: auto;
  padding: 0 1rem 0 1rem;
  background-color: rgba(231, 231, 235, 0.337254902);
  margin-left: 0.5rem;
  border-radius: 5rem 5rem;
}

.categorymobile {
  display: none;
}
@media only screen and (max-width: 768px) {
  .categorymobile {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin-top: 10rem;
  }
}
.categorymobile__title {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 87%;
  height: 5rem;
}
.categorymobile__title h2 {
  font-family: "notoarabic";
  font-size: 1.5rem;
}
.categorymobile__items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.categorymobile__rigth, .categorymobile__left {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 50%;
  height: auto;
}
.categorymobile__rigth {
  margin-left: 1rem;
}
.categorymobile__right-first, .categorymobile__right-secend, .categorymobile__right-therd, .categorymobile__right-fhorted {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.categorymobile__right-first a, .categorymobile__right-secend a, .categorymobile__right-therd a, .categorymobile__right-fhorted a {
  width: 100%;
  height: auto;
}
.categorymobile__right-first img, .categorymobile__right-secend img, .categorymobile__right-therd img, .categorymobile__right-fhorted img {
  border-radius: 2rem 2rem;
  filter: brightness(0.8);
  margin-top: 1rem;
}
.categorymobile__left-first, .categorymobile__left-secend, .categorymobile__left-therd, .categorymobile__left-fhorted {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.categorymobile__left-first a, .categorymobile__left-secend a, .categorymobile__left-therd a, .categorymobile__left-fhorted a {
  width: 100%;
  height: auto;
}
.categorymobile__left-first img, .categorymobile__left-secend img, .categorymobile__left-therd img, .categorymobile__left-fhorted img {
  border-radius: 2rem 2rem;
  filter: brightness(0.8);
  margin-top: 1rem;
}
.categorymobile__right-first img {
  width: 90%;
  height: 30rem;
}
.categorymobile__right-secend img {
  width: 90%;
  height: 15rem;
}
.categorymobile__right-therd img {
  width: 90%;
  height: 20rem;
}
.categorymobile__right-fhorted img {
  width: 90%;
  height: 15rem;
}
.categorymobile__left-first img {
  width: 90%;
  height: 25rem;
}
.categorymobile__left-secend img {
  width: 90%;
  height: 15rem;
}
.categorymobile__left-therd img {
  width: 90%;
  height: 17rem;
}
.categorymobile__left-fhorted img {
  width: 90%;
  height: 30rem;
}
.categorymobile__item {
  position: absolute;
  width: 100%;
  height: auto;
  bottom: 1rem;
  right: 1rem;
}
.categorymobile__item span {
  font-family: "notoarabic";
  font-size: 1.2rem;
  color: white;
}
.categorymobile__text {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  height: auto;
  width: 100%;
}
.categorymobile__text a {
  font-family: "notoarabic";
  font-size: 1.2rem;
  color: white;
  width: auto;
  padding: 0 1rem 0 1rem;
  background-color: rgba(231, 231, 235, 0.337254902);
  margin-left: 0.5rem;
  border-radius: 5rem 5rem;
}

.cover-info {
  width: 100%;
  height: 70rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #f7f7f8;
  margin-top: 10rem;
}

.info {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 70rem;
}
.info__text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.info__text span {
  font-family: "notoarabic";
  font-size: 1.6rem;
  color: #d0bead;
}
.info__text h2 {
  font-family: "notoarabic";
  font-size: 1.6rem;
}
.info__text p {
  text-align: center;
  font-family: "notoarabic";
  font-size: 1.2rem;
  margin-top: 2rem;
  width: 70%;
}
.info__content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.info__first-img {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: auto;
  height: auto;
  margin: 0 1rem 0 1rem;
}
@media only screen and (max-width: 768px) {
  .info__first-img {
    display: none;
  }
}
.info__first-img img {
  width: 20rem;
  height: 20rem;
  border-radius: 1rem 1rem;
  filter: brightness(0.8);
}
@media only screen and (max-width: 768px) {
  .info__first-img img {
    display: none;
  }
}
.info__secend-img {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: auto;
  height: auto;
  margin: 0 1rem 0 1rem;
}
.info__secend-img img {
  width: 20rem;
  height: 30rem;
  border-radius: 1rem 1rem;
  filter: brightness(0.8);
}
@media only screen and (max-width: 768px) {
  .info__secend-img img {
    width: 15rem;
    height: 20rem;
  }
}
@media only screen and (max-width: 562px) {
  .info__secend-img img {
    width: 10rem;
    height: 15rem;
  }
}
.info__main-img {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: auto;
  height: auto;
  margin: 0 1rem 0 1rem;
}
.info__main-img img {
  width: 30rem;
  height: 40rem;
  border-radius: 1rem 1rem;
  filter: brightness(0.8);
}
@media only screen and (max-width: 768px) {
  .info__main-img img {
    width: 20rem;
    height: 30rem;
  }
}
@media only screen and (max-width: 562px) {
  .info__main-img img {
    width: 15rem;
    height: 20rem;
  }
}

.discountproduct {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 10rem;
  margin-bottom: 10rem;
}
.discountproduct__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-bottom: 3rem;
}
.discountproduct__title h2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  font-family: "notoarabic";
  color: black;
  font-size: 1.7rem;
  width: auto;
  white-space: nowrap;
}
.discountproduct__title h2 img {
  width: 2rem;
  height: 2rem;
  margin-left: 0.5rem;
}
.discountproduct__slide {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.discountproduct__botton {
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-bottom: 4rem;
}
.discountproduct__botton-item {
  position: relative;
}
.discountproduct__next, .discountproduct__pervios {
  position: absolute;
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 3rem;
  height: 3rem;
  border: 1px solid #e7e7eb;
  border-radius: 0.5rem 0.5rem;
  margin: 0 0.3rem 0 0.3rem;
  cursor: pointer;
}
.discountproduct__next img, .discountproduct__pervios img {
  width: 1.5rem;
  height: 1.5rem;
}
.discountproduct__next {
  transform: rotate(180deg);
  top: -6rem;
  left: 3.5rem;
}
.discountproduct__pervios {
  top: -6rem;
  left: 0;
}
.discountproduct__items {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  height: auto;
  width: 100%;
}

.list-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 60rem;
  padding: 3rem 0 3rem 0;
  background-color: #f7f7f8;
}
@media only screen and (max-width: 768px) {
  .list-cover {
    height: auto;
  }
}

.list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
.list__content {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 60%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .list__content {
    width: 100%;
  }
}
.list__title {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding-left: 4rem;
}
.list__title h2 {
  font-family: "notoarabic";
  color: black;
}
.list__title p {
  font-family: "notoarabic";
  color: black;
  font-size: 1.2rem;
}
.list__title h2 span {
  color: #b19276;
}
.list__text {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
}
.list__text-item {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 50%;
  height: 20rem;
  padding-left: 4rem;
}
.list__text-border {
  position: relative;
}
.list__text-border::before {
  position: absolute;
  right: -2rem;
  content: "";
  width: 0.1rem;
  height: 10rem;
  background-color: #e7e7e8;
}
.list__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem 0.5rem;
  background-color: white;
}
.list__icon img {
  width: 2rem;
  height: 2rem;
}
.list__body {
  margin-top: 2rem;
  width: 100%;
  height: auto;
}
.list__body h3 {
  font-family: "notoarabic";
  color: black;
  font-size: 1.5rem;
}
.list__body p {
  font-family: "notoarabic";
  color: black;
  font-size: 1.2rem;
  margin-top: 1.5rem;
}
.list__img {
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: row;
  width: 40%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .list__img {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
  }
}
.list__img-first {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: auto;
  height: auto;
  margin-bottom: 4rem;
}
@media only screen and (max-width: 768px) {
  .list__img-first {
    margin-bottom: 0;
  }
}
.list__img-first img {
  width: 19rem;
  height: 18rem;
  margin-top: 1rem;
  border-radius: 1.5em 1.5rem;
}
@media only screen and (max-width: 993px) {
  .list__img-first img {
    width: 14rem;
    height: 15rem;
  }
}
@media only screen and (max-width: 768px) {
  .list__img-first img {
    height: 15.5rem;
    margin-top: 2rem;
    width: 19rem;
  }
}
.list__img-secend {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: auto;
  height: auto;
  margin-top: 2rem;
}
@media only screen and (max-width: 993px) {
  .list__img-secend {
    margin-top: 0;
  }
}
@media only screen and (max-width: 768px) {
  .list__img-secend {
    margin-left: 2rem;
  }
}
.list__img-secend img {
  width: 19rem;
  height: 36rem;
  margin-right: 1.5rem;
  border-radius: 1.5em 1.5rem;
}
@media only screen and (max-width: 993px) {
  .list__img-secend img {
    width: 14rem;
    height: 30rem;
  }
}
@media only screen and (max-width: 768px) {
  .list__img-secend img {
    height: 33.5rem;
    width: 19rem;
    margin-top: 1.5rem;
  }
}

.comment-cover {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 60rem;
}

.comment-cover-right {
  width: 50%;
  height: 60rem;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
}
.comment-cover-right img {
  width: 40rem;
  height: 55rem;
}
@media only screen and (max-width: 768px) {
  .comment-cover-right {
    display: none;
  }
}

.comment-cover-left {
  height: 60rem;
  width: 50%;
  display: flex;
  justify-content: end;
  align-items: start;
  flex-direction: row;
}
.comment-cover-left img {
  width: 20rem;
  height: 20rem;
}
@media only screen and (max-width: 768px) {
  .comment-cover-left {
    display: none;
  }
}

.comments {
  position: relative;
  top: -35rem;
  z-index: 50;
  width: 100%;
  height: auto;
}
.comments__title {
  display: flex;
  justify-content: start;
  align-items: center;
  font-family: "notoarabic";
  font-size: 1.4rem;
  color: black;
  height: 5rem;
  margin-bottom: 3rem;
}
.comments__items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.comments__item {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 30rem;
  height: auto;
  padding: 0 2rem 0 2rem;
  background-color: white;
}
@media only screen and (max-width: 1200px) {
  .comments__item {
    width: 25rem;
  }
}
.comments__icon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  height: 6rem;
}
.comments__img {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
}
.comments__img embed {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem 1rem;
}
.comments__symbol {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: auto;
  height: auto;
}
.comments__symbol embed {
  width: 2.5rem;
  height: 2.5rem;
}
.comments__text {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: auto;
  height: auto;
  margin-right: 0.5rem;
}
.comments__text p {
  text-align: start;
  white-space: nowrap;
  font-family: "notoarabic";
  font-size: 1.2rem;
  color: black;
  height: 2rem;
}
.comments__content {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: auto;
  height: auto;
}
.comments__content h4 {
  font-family: "notoarabic";
  font-size: 1.3rem;
  color: black;
}
.comments__content p {
  font-family: "notoarabic";
  font-size: 1.2rem;
  color: black;
}
.comments__stars {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row-reverse;
  width: auto;
  height: auto;
}
.comments__stars img {
  width: 2rem;
  height: 2rem;
}

.cover-blog {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  background-color: #f7f7f8;
  padding: 2rem 0 2rem 0;
}

.blog {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.blog__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 5rem;
  margin-bottom: 2rem;
}
.blog__title h2 {
  font-family: "notoarabic";
  font-size: 2rem;
  color: black;
  margin-right: 1rem;
}
.blog__title .blog-title-link {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  white-space: nowrap;
  font-family: "notoarabic";
  color: black;
}
.blog__title .blog-title-link img {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.blog__content {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 1365px) {
  .blog__content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.blog__item {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  width: 35rem;
  height: auto;
  box-shadow: 0 0 0.6rem rgba(224, 224, 224, 0.856);
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  margin: 1.5rem 1rem 1.5rem 1rem;
}
.blog__img {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 15rem;
}
.blog__img img {
  width: 100%;
  height: 100%;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.blog__text {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: column;
  padding: 1rem 2rem 1rem 2rem;
}
.blog__text h4 {
  font-family: "notoarabic";
  color: black;
  margin-top: 0.5rem;
}
.blog__text p {
  font-family: "notoarabic";
  color: black;
  margin-top: 0.5rem;
  font-size: 1rem;
}
.blog__tags {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
}
.blog__tags a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem 0.5rem 1rem;
  background-color: rgba(239, 233, 228, 0.4196078431);
  border-radius: 5rem 5rem;
  margin: 0 0.5rem 0 0;
  color: #d0bead;
  font-family: "notoarabic";
  font-size: 1rem;
}

.fother-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  background-color: black;
  padding: 5rem 0 5rem 0;
}

.fother {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.fother__content {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: row;
  width: auto;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .fother__content {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
  }
}
.fother__about {
  width: 30%;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
}
@media only screen and (max-width: 768px) {
  .fother__about {
    width: 100%;
    margin-bottom: 3rem;
  }
}
.fother__about img {
  width: 10rem;
  height: 5rem;
  margin-left: 5rem;
}
.fother__about p {
  font-family: "notoarabic";
  color: white;
  font-size: 1.1rem;
  margin-top: 3rem;
  padding: 0 0 0 2rem;
}
.fother__newsletter {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 4rem;
  margin-top: 3rem;
}
.fother__newsletter input {
  width: 75%;
  height: 4rem;
  border: 1px solid #85858d;
  background-color: transparent;
  border-radius: 0.5rem 0.5rem;
  padding-right: 2rem;
}
.fother__newsletter input::-moz-placeholder {
  color: white;
  font-family: "notoarabic";
  font-size: 1.2rem;
}
.fother__newsletter input::placeholder {
  color: white;
  font-family: "notoarabic";
  font-size: 1.2rem;
}
.fother__link {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: start;
  flex-direction: row;
  width: 70%;
  height: auto;
  border-right: solid 1px #85858d;
  cursor: pointer;
}
@media only screen and (max-width: 967px) {
  .fother__link {
    padding-right: 5rem;
  }
}
@media only screen and (max-width: 768px) {
  .fother__link {
    width: 100%;
    border: none;
    display: flex;
    justify-content: space-around;
    align-items: start;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.fother__link .fother-arrow-cicle {
  position: absolute;
  top: 0;
  right: -1.1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 2rem;
  height: 4rem;
  background-color: rgb(70, 70, 70);
  border-radius: 1rem 1rem;
}
@media only screen and (max-width: 768px) {
  .fother__link .fother-arrow-cicle {
    display: none;
  }
}
.fother__link .fother-arrow-cicle img {
  transform: rotate(90deg);
}
.fother__link-helper, .fother__cantact-us, .fother__cantact-info, .fother__category {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: auto;
  height: auto;
}
.fother__link-helper h3, .fother__cantact-us h3, .fother__cantact-info h3, .fother__category h3 {
  position: relative;
  color: white;
  font-size: 1.1rem;
  font-family: "notoarabic";
  margin-bottom: 3rem;
}
.fother__link-helper h3::before, .fother__cantact-us h3::before, .fother__cantact-info h3::before, .fother__category h3::before {
  position: absolute;
  content: "";
  top: 1rem;
  right: -1rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50% 50%;
  background-color: white;
}
.fother__link-helper a, .fother__cantact-us a, .fother__cantact-info a, .fother__category a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  font-family: "notoarabic";
  font-size: 1rem;
  color: white;
  margin-top: 1.5rem;
}
.fother__link-helper a img, .fother__cantact-us a img, .fother__cantact-info a img, .fother__category a img {
  margin-top: 1rem;
  margin-left: 0.5rem;
}
@media only screen and (max-width: 768px) {
  .fother__link-helper, .fother__category {
    width: 50%;
  }
}
@media only screen and (max-width: 768px) {
  .fother__cantact-info {
    width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  .fother__cantact-us {
    display: none;
  }
}
.fother__licence {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 2rem;
  border-top: 1px solid #85858d;
  margin-top: 1rem;
}
.fother__licence p img {
  width: 2rem;
  height: 2rem;
}
.fother__licence p {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  font-family: "notoarabic";
  font-size: 1rem;
  color: #85858d;
}
.fother__social {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  margin-top: 0.5rem;
}
.fother__instagram, .fother__telegram, .fother__whatsapp {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #85858d;
  border-radius: 0.6rem 0.6rem;
  margin: 0.5rem 0.4rem 0 0.4rem;
  cursor: pointer;
}
.fother__instagram img, .fother__telegram img, .fother__whatsapp img {
  width: 1.4rem;
  height: 1.4rem;
}

.menubar-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6rem;
  height: 4rem;
}
.menubar-logo img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15rem;
  height: 10rem;
}

.btn-collection {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  padding: 0.5rem 1.5rem 0.5rem 1.5rem;
  background-color: #d0bead;
  white-space: nowrap;
  border-radius: 0.3rem 0.3rem;
  color: white;
  font-family: "notoarabic";
  margin-top: 1rem;
}
@media only screen and (max-width: 768px) {
  .btn-collection {
    padding: 0.5rem 10rem 0.5rem 10rem;
  }
}
.btn-collection img {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}

.btn-scissors {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  padding: 0.5rem 2rem 0.5rem 2rem;
  background-color: black;
  border-radius: 0.5rem 0.5rem;
  color: white;
  margin-top: 2rem;
  font-family: "notoarabic";
  cursor: pointer;
}
.btn-scissors img {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.5rem;
}

.btn-news {
  width: 17%;
  height: 4rem;
  border: 1px solid #85858d;
  border-radius: 0.5rem 0.5rem;
  background-color: transparent;
  color: white;
  cursor: pointer;
  margin-right: 1.5rem;
  font-family: "notoarabic";
}

.remove-filter-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 2rem 0.5rem 2rem;
  border: 1px solid #b19276;
  border-radius: 0.5rem 0.5rem;
  outline: none;
  cursor: pointer;
  font-family: "notoarabic";
  color: black;
  margin: 1rem 1rem;
}

.apply-filter-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 2rem 0.5rem 2rem;
  background-color: #b19276;
  border: none;
  border-radius: 0.5rem 0.5rem;
  outline: none;
  cursor: pointer;
  font-family: "notoarabic";
  color: white;
  margin: 1rem 1rem;
}

.compors-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 30%;
  height: 4rem;
  border: 1px solid #b19276;
  border-radius: 0.5rem 0.5rem;
  color: #b19276;
  font-family: "notoarabic";
  font-size: 1.2rem;
  cursor: pointer;
  outline: none;
  margin-left: 1rem;
}
@media only screen and (max-width: 768px) {
  .compors-btn {
    width: 10%;
  }
}
.compors-btn img {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.5rem;
}

.add-cart-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 70%;
  height: 4rem;
  background-color: #b19276;
  color: white;
  border-radius: 0.5rem 0.5rem;
  font-family: "notoarabic";
}
@media only screen and (max-width: 768px) {
  .add-cart-btn {
    width: 90%;
  }
}
.add-cart-btn img {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.5rem;
}

.comment-send-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding: 0.5rem 3rem;
  border-radius: 0.4rem 0.4rem;
  font-family: "notoarabic";
  color: white;
  background-color: #b19276;
}

.cart-btn-plus,
.cart-btn-mines {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #ceced1;
  background-color: transparent;
  border-radius: 0.5rem 0.5rem;
  cursor: pointer;
}
.cart-btn-plus img,
.cart-btn-mines img {
  width: 1.5rem;
  height: 1.5rem;
}

.store-cunfirm-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 4rem;
  color: white;
  background-color: #b19276;
  border-radius: 0.5rem 0.5rem;
  font-family: "notoarabic";
  outline: none;
  border: none;
}

.address-add-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: auto;
  height: auto;
  color: white;
  padding: 0.5rem 2rem;
  background-color: #b19276;
  border-radius: 0.5rem 0.5rem;
  font-family: "notoarabic";
  outline: none;
  border: none;
}

.factor-btn-store {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: auto;
  height: auto;
  border: 1px solid #b19276;
  border-radius: 0.5rem;
  font-family: "notoarabic";
  background-color: white;
  color: #b19276;
  padding: 0.3rem 3rem;
  margin-left: 1.5rem;
}
@media only screen and (max-width: 768px) {
  .factor-btn-store {
    width: 100%;
    margin-top: 1rem;
    margin-left: 0;
  }
}

.factor-btn-home {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: auto;
  height: auto;
  background-color: #b19276;
  border-radius: 0.5rem 0.5rem;
  font-family: "notoarabic";
  color: white;
  padding: 0.3rem 1rem;
  cursor: pointer;
}
@media only screen and (max-width: 768px) {
  .factor-btn-home {
    width: 100%;
    padding: 0.3rem 3rem;
  }
}

.profile-btn-cancel {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  padding: 0.5rem 4rem;
  background-color: white;
  color: #b19276;
  border: 1px solid #b19276;
  border-radius: 0.7rem 0.7rem;
  font-family: "notoarabic";
  font-size: 1.1rem;
  margin-left: 1rem;
}
@media only screen and (max-width: 768px) {
  .profile-btn-cancel {
    width: 100%;
    height: 4rem;
    margin-top: 1rem;
  }
}

.profile-btn-save {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  padding: 0.5rem 4rem;
  background-color: #b19276;
  color: white;
  border-radius: 0.7rem 0.7rem;
  font-family: "notoarabic";
  font-size: 1.1rem;
  margin-left: 1rem;
}
@media only screen and (max-width: 768px) {
  .profile-btn-save {
    width: 100%;
    height: 4rem;
  }
}

.detaill-order-view-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 4rem;
  border: 1px solid #b19276;
  border-radius: 1rem 1rem;
  color: #b19276;
  background-color: white;
  font-family: "notoarabic";
  font-size: 1.1rem;
  outline: none;
  cursor: pointer;
}

.address-btn-add {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  padding: 0.5rem 4rem;
  background-color: #b19276;
  color: white;
  border-radius: 0.7rem 0.7rem;
  font-family: "notoarabic";
  font-size: 1.1rem;
  margin-left: 1rem;
  cursor: pointer;
}

.profile-address-add-address {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 4rem;
  color: white;
  font-family: "notoarabic";
  font-size: 1.1rem;
  cursor: pointer;
  background-color: #b19276;
  border-radius: 1rem 1rem;
  outline: none;
}
.profile-address-add-address svg {
  margin-left: 0.5rem;
}

.add-to-continue-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  padding: 0.5rem 2rem;
  background-color: black;
  color: white;
  border-radius: 0.5rem 0.5rem;
  margin-top: 4rem;
  font-family: "notoarabic";
  font-size: 1.1rem;
  cursor: pointer;
  outline: none;
}
@media only screen and (max-width: 768px) {
  .add-to-continue-btn {
    width: 100%;
  }
}
.add-to-continue-btn svg {
  margin-right: 0.5rem;
}

.blog-detaill-copy-link-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  background-color: white;
  color: black;
  border: none;
  outline: none;
  cursor: pointer;
  margin-left: 0.5rem;
  padding: 0.5rem 1rem;
  font-family: "notoarabic";
  font-size: 1.1rem;
}
.blog-detaill-copy-link-btn svg {
  margin-left: 0.5rem;
}

.blog-detaill-copy-share-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  color: white;
  border: none;
  outline: none;
  cursor: pointer;
  margin-left: 0.5rem;
  padding: 0.5rem 1rem;
  font-family: "notoarabic";
  font-size: 1.1rem;
  background-color: black;
  border-radius: 0.5rem 0.5rem;
}
.blog-detaill-copy-share-btn svg {
  margin-left: 0.5rem;
}

.contact-us-send {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 4rem;
  background-color: #b19276;
  color: white;
  font-family: "notoarabic";
  font-size: 1.1rem;
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 0.5rem 0.5rem;
}

.note-font-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 5rem;
  border-radius: 0.5rem 0.5rem;
  background-color: #b19276;
  outline: none;
  border: none;
  color: white;
  font-family: "notoarabic";
  font-size: 1.1rem;
  cursor: pointer;
  margin-top: 4rem;
}
@media only screen and (max-width: 768px) {
  .note-font-btn {
    width: 90%;
  }
}

.modal-login-ok-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 4rem;
  background-color: #b19276;
  outline: none;
  border: none;
  color: white;
  border-radius: 0.5rem 0.5rem;
  cursor: pointer;
  font-family: "notoarabic";
  font-size: 1.1rem;
}

.modal-login-google-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 4rem;
  border: 1px solid #b19276;
  border-radius: 0.5rem 0.5rem;
  cursor: pointer;
  outline: none;
  background-color: white;
  font-family: "notoarabic";
  font-size: 1.1rem;
  color: #b19276;
}
.modal-login-google-btn svg {
  margin-left: 0.5rem;
}

.regal-btn-by {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 4rem;
  background-color: black;
  color: white;
  font-family: "notoarabic";
  font-size: 1.1rem;
  cursor: pointer;
  outline: none;
  border-radius: 5rem 5rem;
  margin-left: 0.5rem;
}

.regal-btn-demo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 17rem;
  height: 3.5rem;
  border-radius: 5rem 5rem;
  background-color: black;
  cursor: pointer;
  outline: none;
  color: white;
  font-family: "notoarabic";
  font-size: 1.1rem;
  border: none;
  margin-left: 2rem;
}

.regal-btn-property {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 17rem;
  height: 3.5rem;
  border-radius: 5rem 5rem;
  background-color: transparent;
  cursor: pointer;
  outline: none;
  color: black;
  font-family: "notoarabic";
  font-size: 1.1rem;
  border: 1px solid black;
}

.regal-btn-buy {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 17rem;
  height: 3.5rem;
  border-radius: 5rem 5rem;
  background-color: black;
  cursor: pointer;
  outline: none;
  color: white;
  font-family: "notoarabic";
  font-size: 1.1rem;
  border: none;
  margin-top: 3rem;
}

.discountproduct-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: auto;
  height: auto;
  margin: 0 2rem 0 2rem;
  margin-top: 2rem;
}

.discountproduct-img {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 995px) {
  .discountproduct-img {
    width: 100%;
    height: 35rem;
  }
}
.discountproduct-img img {
  width: 200px;
  height: 40rem;
  border-radius: 1.5rem 1.5rem;
  filter: brightness(0.9);
}
@media only screen and (max-width: 995px) {
  .discountproduct-img img {
    width: 200px;
    height: 35rem;
  }
}
@media only screen and (max-width: 992px) {
  .discountproduct-img img {
    width: 300px;
    height: 35rem;
  }
}
@media only screen and (max-width: 986px) {
  .discountproduct-img img {
    width: 20rem;
  }
}
@media only screen and (max-width: 518px) {
  .discountproduct-img img {
    width: 100%;
  }
}

.discountproduct-icon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  position: absolute;
  top: 2rem;
  width: 100%;
  height: auto;
  z-index: 50;
}
.discountproduct-icon embed {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 2rem;
  height: 2rem;
  margin-right: 1rem;
}
.discountproduct-icon span {
  padding: 0.5rem 0.7rem 0.5rem 0.7rem;
  background-color: #d0bead;
  border-radius: 1rem 1rem;
  color: white;
  width: 4rem;
  white-space: nowrap;
  margin-left: 1rem;
}

.discountproduct-text {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 90%;
  height: auto;
  margin-top: 1rem;
}

.discountproduct-text-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.discountproduct-text-title h3 {
  font-family: "notoarabic";
  color: black;
  font-size: 1.3rem;
}

.discountproduct-colors {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.discountproduct-colors div {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.3rem 0.3rem;
  margin: 0 0.2rem 0 0.2rem;
}

.discountproduct-color-first {
  background-color: #9d9ea2;
}

.discountproduct-color-secend {
  background-color: #85858d;
}

.discountproduct-color-therd {
  background-color: #b99d84;
}

.discountproduct-color-forthed {
  background-color: #b19276;
}

.discountproduct-price {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}

.new-price {
  margin-right: 2rem;
  font-family: "notoarabic";
  color: black;
  font-size: 1.2rem;
  margin-right: 2rem;
}

.old-price {
  position: relative;
  font-family: "notoarabic";
  color: #85858d;
  font-size: 1.2rem;
}
.old-price::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 0.1rem;
  background-color: #85858d;
  top: 1rem;
}

.cover-bredcrump {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 5rem;
  background-color: #fafafa;
  margin-top: 2rem;
}
@media only screen and (max-width: 768px) {
  .cover-bredcrump {
    margin-top: -60rem;
  }
}

.bredcrump {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.bredcrump img {
  width: 1rem;
  height: 1rem;
  margin: 0 0.5rem 0 0.5rem;
}
.bredcrump .bredcrump-item {
  font-family: "notoarabic";
  font-size: 1.1rem;
  color: #85858d;
  cursor: pointer;
}

.bredcrump-active {
  color: black;
  font-family: "notoarabic";
  font-size: 1.1rem;
}

.sort-modal {
  position: fixed;
  bottom: -100rem;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  z-index: 50;
  background-color: white;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
  transition: all 0.2s ease-in;
}

.sort {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.sort__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 3rem;
  border-bottom: 1px solid #f2f2f3;
  padding-bottom: 2rem;
}
.sort__title img {
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}
.sort__title h3 {
  font-family: "notoarabic";
  font-size: 1.4rem;
  color: black;
}
.sort__content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 3rem;
  margin-bottom: 1rem;
}
.sort__content select {
  width: 100%;
  height: 5rem;
  font-family: "notoarabic";
  font-size: 1.2rem;
  border: 1px solid #f2f2f3;
  outline: none;
}

.sort-active {
  bottom: 0;
}

.description__masonery {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
}

.description__masonery-menu {
  position: relative;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 4rem;
  background-color: #fafafa;
}
.description__masonery-menu label {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin: 0 1.5rem 0 1.5rem;
  cursor: pointer;
  font-family: "notoarabic";
  font-size: 1.2rem;
  color: #85858d;
  white-space: nowrap;
}

.masonery-tab {
  position: absolute;
  top: 4rem;
  width: 8rem;
  height: 0.2rem;
  background-color: black;
  transform: translateX(-1rem);
  transition: all ease-in 0.3s;
}

.description__content {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 3rem;
}

input[id=description],
input[id=property],
input[id=protected],
input[id=help],
input[id=comment],
input[id=faq],
input[id=style],
input[id=accessory] {
  display: none;
}

.description__item[data-tab=description],
.description__item[data-tab=property],
.description__item[data-tab=protected],
.description__item[data-tab=help],
.description__item[data-tab=comment],
.description__item[data-tab=faq],
.description__item[data-tab=style],
.description__item[data-tab=accessory] {
  display: none;
}

input[id=description]:checked ~ .description__content .description__item[data-tab=description],
input[id=property]:checked ~ .description__content .description__item[data-tab=property],
input[id=protected]:checked ~ .description__content .description__item[data-tab=protected],
input[id=help]:checked ~ .description__content .description__item[data-tab=help],
input[id=comment]:checked ~ .description__content .description__item[data-tab=comment],
input[id=faq]:checked ~ .description__content .description__item[data-tab=faq],
input[id=style]:checked ~ .description__content .description__item[data-tab=style],
input[id=accessory]:checked ~ .description__content .description__item[data-tab=accessory] {
  display: flex;
}

input[id=description]:checked ~ .description__masonery-menu > .label[for=description],
input[id=property]:checked ~ .description__masonery-menu > .label[for=property],
input[id=protected]:checked ~ .description__masonery-menu > .label[for=protected],
input[id=help]:checked ~ .description__masonery-menu > .label[for=help],
input[id=comment]:checked ~ .description__masonery-menu > .label[for=comment],
input[id=faq]:checked ~ .description__masonery-menu > .label[for=faq],
input[id=style]:checked ~ .description__masonery-menu > .label[for=style],
input[id=accessory]:checked ~ .description__masonery-menu > .label[for=accessory] {
  color: black;
}

input[id=description]:checked ~ .description__masonery-menu > .masonery-tab {
  transform: translateX(-1rem);
}

input[id=property]:checked ~ .description__masonery-menu > .masonery-tab {
  transform: translateX(-12.5rem);
}

input[id=protected]:checked ~ .description__masonery-menu > .masonery-tab {
  transform: translateX(-24.5rem);
}

input[id=help]:checked ~ .description__masonery-menu > .masonery-tab {
  transform: translateX(-36.5rem);
}

input[id=comment]:checked ~ .description__masonery-menu > .masonery-tab {
  transform: translateX(-45.5rem);
}

input[id=faq]:checked ~ .description__masonery-menu > .masonery-tab {
  transform: translateX(-55.5rem);
}

input[id=style]:checked ~ .description__masonery-menu > .masonery-tab {
  transform: translateX(-65.5rem);
}

input[id=accessory]:checked ~ .description__masonery-menu > .masonery-tab {
  transform: translateX(-75.5rem);
}

.description-comments {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-bottom: 3rem;
}

.description-comments-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.description-comments-title h1 {
  font-family: "notoarabic";
  font-size: 1.5rem;
}
.description-comments-title select {
  width: 20rem;
  height: 4rem;
  border: 1px solid #f2f2f3;
  outline: none;
  font-family: "notoarabic";
}

.description-messages {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
}

.description-message-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 20rem;
  margin-top: 2rem 0;
  border: 1px solid #f2f2f3;
  border-radius: 1.5rem 1.5rem;
  margin: 1rem 0 1rem 0;
  padding: 1rem 1rem;
}
@media only screen and (max-width: 768px) {
  .description-message-item {
    height: auto;
  }
}

.description-message-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.description-message-title h2 {
  font-family: "notoarabic";
  font-size: 1.4rem;
}
.description-message-title h2 span {
  font-family: "notoarabic";
  color: #b19276;
  font-size: 1rem;
  font-weight: 100;
}

.description-message-rating {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: auto;
}
.description-message-rating span {
  margin: 0 0.5rem 0 0.5rem;
  font-family: "notoarabic";
  font-size: 1.1rem;
}
.description-message-rating .comment-rating-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
}
.description-message-rating .comment-rating-item img {
  width: 1.5rem;
  height: 1.5rem;
}

.description-message-body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: auto;
  height: auto;
}
.description-message-body p {
  font-family: "notoarabic";
  font-size: 1.1rem;
}

.description-message-time {
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  font-family: "notoarabic";
  font-size: 1.1rem;
  color: #ceced1;
}
.description-message-time img {
  width: 1.4rem;
  height: 1.4rem;
  margin-left: 0.5rem;
}

.decription-comments-send {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 4rem;
}

.description-comments-send-title {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.description-comments-send-title h2 {
  font-family: "notoarabic";
  font-size: 1.5rem;
}

.description-comments-send-input-min {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  height: auto;
  width: 100%;
}
.description-comments-send-input-min input {
  width: 49%;
  height: 4rem;
  border: 1px solid #f2f2f3;
  margin: 0 1rem 0 1rem;
  border-radius: 0.5rem 0.5rem;
  padding-right: 0.5rem;
  font-family: "notoarabic";
}

.description-comments-send-input {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  height: auto;
  width: 100%;
}
.description-comments-send-input textarea {
  width: 99%;
  height: 15rem;
  border: 1px solid #f2f2f3;
  margin: 2rem 1rem 0 1rem;
  border-radius: 0.5rem 0.5rem;
  padding-right: 0.5rem;
  font-family: "notoarabic";
}

.description-comments-send-btn {
  display: flex;
  justify-content: center;
  align-items: end;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 1rem;
}

.description-faqs {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
}

.description-faq-item {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  border: 1px solid #f7f7f8;
  border-radius: 0.5rem 0.5rem;
  margin: 1rem 1rem;
  padding: 1rem 1rem;
  background-color: white;
}

.description-faq-item-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 4rem;
  cursor: pointer;
}
.description-faq-item-question h2 {
  font-family: "notoarabic";
  font-size: 1.3rem;
}
.description-faq-item-question img {
  width: 1.5rem;
  height: 1.5rem;
  transform: rotate(-90deg);
  transition: all ease-in 0.3s;
}

.description-faq-item-answer {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-in;
}
.description-faq-item-answer p {
  font-family: "notoarabic";
  font-size: 1.1rem;
}

input[name=faq]:checked ~ .description-faq-item-answer {
  height: auto;
}

input[name=faq]:checked ~ .description-faq-item-question > img {
  transform: rotate(90deg);
}

.cart-mobile {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 1px solid #f2f2f3;
  border-radius: 1.5rem 1.5rem;
  margin-bottom: 4rem;
  padding: 1.5rem 1.5rem;
}
@media only screen and (min-width: 768px) {
  .cart-mobile {
    display: none;
  }
}

.cart-mobile-price {
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: row;
  width: 90%;
}
.cart-mobile-price .mobile-old-price {
  position: relative;
  margin: 0 0.5rem;
  font-family: "notoarabic";
  font-size: 1.4rem;
  color: #ceced1;
}
.cart-mobile-price .mobile-old-price::before {
  position: absolute;
  top: 1.3rem;
  right: 0;
  content: "";
  width: 4rem;
  height: 0.2rem;
  background-color: #ceced1;
}
.cart-mobile-price .mobile-new-price {
  font-family: "notoarabic";
  font-size: 1.4rem;
}
.cart-mobile-price .mobile-discount-bag {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0.5rem 1rem;
  border-radius: 2rem 2rem;
  color: white;
  background-color: #b19276;
}

.cart-mobile-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 90%;
  height: auto;
  margin-top: 3rem;
}

.cart-helper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin: 2rem 0;
}
@media only screen and (max-width: 768px) {
  .cart-helper {
    margin-top: -110rem;
  }
}

.cart-helper-mobile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin: 2rem 0;
}

.cart-cart-icon,
.cart-info-icon,
.cart-payment-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 50%;
  height: auto;
  white-space: nowrap;
  font-family: "notoarabic";
}
.cart-cart-icon img,
.cart-info-icon img,
.cart-payment-icon img {
  width: 2rem;
  height: 2rem;
  margin-left: 0.5rem;
}

.cart-info-icon span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.cart-info-icon div {
  width: 100%;
}

.cart-cart-icon {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  position: relative;
  color: #b19276;
  white-space: nowrap;
  width: 25%;
}
.cart-cart-icon span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.cart-cart-icon div {
  width: 100%;
}

.cart-payment-icon {
  position: relative;
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: row;
  white-space: nowrap;
  width: 25%;
}
.cart-payment-icon span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.cart-payment-icon div {
  width: 100%;
}

.profile-input-min {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 45%;
  height: 5rem;
  border: 1px solid #f2f2f3;
  border-radius: 1rem 1rem;
  margin-left: 2rem;
  margin-top: 1rem;
}
@media only screen and (max-width: 768px) {
  .profile-input-min {
    width: 100%;
    margin-top: 2rem;
  }
}
.profile-input-min label {
  position: absolute;
  top: 1.6rem;
  right: 2rem;
  font-family: "notoarabic";
  font-size: 1.1rem;
  background-color: white;
  transition: 0.2s ease-in all;
  color: #ceced1;
}
.profile-input-min input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  padding: 2rem;
  border-radius: 1rem 1rem;
}
.profile-input-min:focus-within label {
  top: -1.4rem;
}

.address-input-min {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 45%;
  height: 5rem;
  border: 1px solid #f2f2f3;
  border-radius: 1rem 1rem;
  margin-top: 1rem;
}
@media only screen and (max-width: 768px) {
  .address-input-min {
    width: 100%;
    margin-top: 2rem;
  }
}
.address-input-min label {
  position: absolute;
  top: 1.6rem;
  right: 2rem;
  font-family: "notoarabic";
  font-size: 1.1rem;
  background-color: white;
  transition: 0.2s ease-in all;
  color: #ceced1;
}
.address-input-min input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  padding: 2rem;
  border-radius: 1rem 1rem;
}
.address-input-min:focus-within label {
  top: -1.4rem;
}

.form-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .form-group {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}

.profile-input-max {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 99%;
  height: auto;
  border: 1px solid #f2f2f3;
  border-radius: 1rem 1rem;
}
@media only screen and (max-width: 768px) {
  .profile-input-max {
    width: 100%;
    margin-top: 2rem;
  }
}
.profile-input-max label {
  position: absolute;
  top: 1.6rem;
  right: 2rem;
  font-family: "notoarabic";
  font-size: 1.1rem;
  background-color: white;
  transition: 0.2s ease-in all;
  color: #ceced1;
}
.profile-input-max input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  padding: 2rem;
  border-radius: 1rem 1rem;
}
.profile-input-max textarea {
  width: 100%;
  height: 10rem;
  border: none;
  outline: none;
  padding: 2rem;
  border-radius: 1rem 1rem;
  resize: none;
}
.profile-input-max:focus-within label {
  top: -1.4rem;
}

.profile-btn-form {
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 5rem;
  margin-top: 5rem;
}
@media only screen and (max-width: 768px) {
  .profile-btn-form {
    display: flex;
    justify-content: end;
    align-items: center;
    flex-direction: column-reverse;
  }
}

.address-btn-form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 5rem;
  margin-top: 5rem;
}

.profile-order-desktop {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}

.profile-order-mobile {
  display: none;
}
@media only screen and (max-width: 768px) {
  .profile-order-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: auto;
  }
}

.profile-order-cart {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding: 1rem 1rem;
  border: 1px solid #f2f2f3;
  border-radius: 1rem 1rem;
  margin-top: 1rem;
}
@media only screen and (max-width: 768px) {
  .profile-order-cart {
    display: none;
  }
}

.profile-detail-items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}

.profile-detaill {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
}
.profile-detaill span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  margin-left: 1rem;
  font-family: "notoarabic";
  font-size: 1.2rem;
}
.profile-detaill span svg {
  margin-left: 0.5rem;
}

.profile-status {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
}

.profile-delivery-status {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.1rem 0.5rem;
  background-color: #efe9e4;
  border-radius: 3rem 3rem;
  color: #b19276;
  font-family: "notoarabic";
  font-size: 1.2rem;
  font-size: 1rem;
  margin-left: 0.5rem;
  white-space: nowrap;
}

.profile-delivery-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.1rem 1rem;
  background-color: #f2f2f3;
  border-radius: 3rem 3rem;
  color: black;
  font-family: "notoarabic";
  font-size: 1.2rem;
  font-size: 1rem;
  margin-left: 0.5rem;
  white-space: nowrap;
}

.profile-delivery-reciver {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.1rem 1rem;
  background-color: rgba(58, 247, 20, 0.137);
  border-radius: 3rem 3rem;
  color: green;
  font-family: "notoarabic";
  font-size: 1.2rem;
  font-size: 1rem;
  margin-left: 0.5rem;
  white-space: nowrap;
}

.profile-delivery-cancel {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.1rem 1rem;
  background-color: rgba(255, 0, 0, 0.158);
  border-radius: 3rem 3rem;
  color: red;
  font-family: "notoarabic";
  font-size: 1.2rem;
  font-size: 1rem;
  margin-left: 0.5rem;
  white-space: nowrap;
}

.profile-delivery-backed {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.1rem 1rem;
  background-color: rgba(170, 170, 13, 0.075);
  border-radius: 3rem 3rem;
  color: rgb(216, 216, 27);
  font-family: "notoarabic";
  font-size: 1.2rem;
  font-size: 1rem;
  margin-left: 0.5rem;
  white-space: nowrap;
}

.profile-address {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 1rem;
}
.profile-address span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  white-space: nowrap;
  font-family: "notoarabic";
  font-size: 1.2rem;
}
.profile-address span svg {
  margin-left: 0.5rem;
}
.profile-address span p {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
}
.profile-address span p span {
  color: #b19276;
  margin-right: 0.3rem;
}

.profile-time {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  font-family: "notoarabic";
  margin-top: 1rem;
  font-size: 1.2rem;
}

.profile-detaill-tabel {
  display: none;
  width: 100%;
  height: 0;
}

.profile-header-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 4rem;
  background-color: #fafafa;
  padding: 0 1rem;
}
.profile-header-title h5 {
  display: flex;
  justify-content: start;
  align-items: center;
  font-family: "notoarabic";
  font-weight: 100;
  font-size: 1.2rem;
  width: 100%;
}

.profile-content-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 4rem;
  padding: 0 1rem;
}
.profile-content-body p {
  display: flex;
  justify-content: start;
  align-items: center;
  font-family: "notoarabic";
  font-weight: 100;
  font-size: 1.1rem;
  width: 100%;
}

.profile-detaill-order {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.profile-detaill-order label {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 4rem;
  cursor: pointer;
  font-family: "notoarabic";
}
.profile-detaill-order label img {
  width: 1.5rem;
  height: 1.5rem;
  transform: rotate(-90deg);
  margin-right: 0.5rem;
  transition: 0.3s ease-in all;
}

input[name=detail-order]:checked ~ label > img {
  transform: rotate(90deg);
}

input[name=detail-order]:checked ~ .profile-detaill-tabel {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: auto;
}

.profile-order-mobile {
  display: none;
}
@media only screen and (max-width: 768px) {
  .profile-order-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin-bottom: 10rem;
  }
}

.profile-order-mobile-cart {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  border: 1px solid #f2f2f3;
  border-radius: 1rem 1rem;
  margin-top: 1rem;
  padding: 1rem 1rem;
}

.profile-order-mobile-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}

.profile-order-mobile-time {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  font-family: "notoarabic";
  font-size: 1.1rem;
}
.profile-order-mobile-time svg {
  margin-left: 0.5rem;
}

.profile-order-mobile-delivery {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
}

.profile-order-mobile-date {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 0.5rem;
  font-family: "notoarabic";
  font-size: 1.1rem;
}

.profile-order-mobile-address {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 0.5rem;
  font-family: "notoarabic";
  font-size: 1.1rem;
}

.profile-order-mobile-status {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
}

.profile-order-mobile-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
}

.profile-order-modal-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  border-top: 1px solid #f2f2f3;
}

.profile-list-item,
.profile-list-item-discount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  padding: 0.5rem 0;
  font-family: "notoarabic";
  font-size: 1rem;
}

.profile-list-item-discount {
  color: #b19276;
}

.modal-add-address {
  position: fixed;
  top: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 70rem;
  height: auto;
  padding: 1rem 1rem;
  background-color: white;
  border-radius: 1rem 1rem;
  border: 1px solid #f2f2f3;
  z-index: 50;
}
@media only screen and (min-width: 890px) {
  .modal-add-address {
    right: 40rem;
  }
}
@media only screen and (max-width: 768px) {
  .modal-add-address {
    width: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
  }
}

.modal-address-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 95%;
  height: auto;
  margin-bottom: 3rem;
}

.modal-address-arrow-back {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  font-family: "notoarabic";
  cursor: pointer;
}
.modal-address-arrow-back svg {
  margin-left: 0.5rem;
}

.modal-address-close {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  cursor: pointer;
}
.modal-address-close img {
  width: 1.5rem;
  height: 1.5rem;
}

.modal-address-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .modal-address-content {
    overflow-y: scroll;
  }
}

.model-address-hidden {
  display: none;
}

.modal-login {
  position: fixed;
  display: none;
  width: 80rem;
  height: 50rem;
  background-color: white;
  top: 20%;
  right: 25%;
  z-index: 150;
  border-radius: 0.5rem 0.5rem;
}
@media only screen and (max-width: 1200px) {
  .modal-login {
    right: 10%;
  }
}
@media only screen and (max-width: 768px) {
  .modal-login {
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }
}

.modal-login-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 50%;
  height: 50rem;
}
@media only screen and (max-width: 768px) {
  .modal-login-content {
    width: 100%;
  }
}

.modal-login-box {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  width: 90%;
  height: 100%;
  padding: 1rem 1rem;
}

.modal-login-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 3rem;
}
@media only screen and (max-width: 768px) {
  .modal-login-logo {
    margin-bottom: 5rem;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
  }
}
.modal-login-logo h2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  font-family: "notoarabic";
}
.modal-login-logo h2 span {
  color: #b19276;
}

.modal-login-logo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .modal-login-logo-item {
    width: 58%;
  }
}
.modal-login-logo-item a {
  display: none;
  cursor: pointer;
}
@media only screen and (max-width: 768px) {
  .modal-login-logo-item a {
    display: flex;
  }
}

.modal-login-input {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 2rem;
}
.modal-login-input p {
  font-family: "notoarabic";
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.modal-login-input-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 4rem;
  border: 1px solid #f2f2f3;
  border-radius: 0.5rem 0.5rem;
}
.modal-login-input-box input {
  width: 90%;
  height: 100%;
  border: none;
  padding-right: 1rem;
  outline: none;
}
.modal-login-input-box input::-moz-placeholder {
  font-family: "notoarabic";
  font-size: 1.1rem;
}
.modal-login-input-box input::placeholder {
  font-family: "notoarabic";
  font-size: 1.1rem;
}
.modal-login-input-box .modal-login-number {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10%;
  height: 100%;
  background-color: #f2f2f3;
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  font-family: "notoarabic";
}

.modal-login-title {
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  height: auto;
  margin-top: 1rem;
}
.modal-login-title h4 {
  font-family: "notoarabic";
}

.modal-login-remember {
  position: relative;
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  height: auto;
  margin-top: 1rem;
}
.modal-login-remember label {
  margin-right: 2.5rem;
  font-family: "notoarabic";
  font-size: 1.1rem;
  border-radius: 1rem 1rem;
  cursor: pointer;
}
.modal-login-remember label::before {
  position: absolute;
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid #f2f2f3;
  right: -0.1rem;
  top: 0.3rem;
  border-radius: 0.3rem 0.3rem;
}

.modal-login-img {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 50%;
  height: 100%;
}
.modal-login-img img {
  width: 100%;
  height: 100%;
  border-bottom-left-radius: 0.5rem;
  border-top-left-radius: 0.5rem;
}
@media only screen and (max-width: 768px) {
  .modal-login-img {
    display: none;
  }
}

.svg-close-btn {
  position: absolute;
  top: 3.4rem;
  left: 3.4rem;
  cursor: pointer;
}

.modal-login-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 2rem;
}
@media only screen and (max-width: 768px) {
  .modal-login-btn {
    margin-top: 10rem;
  }
}
.modal-login-btn P {
  position: relative;
  font-family: "notoarabic";
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.modal-login-btn P::before {
  top: 1.5rem;
  right: 1rem;
  position: absolute;
  content: "";
  width: 15rem;
  height: 0.2rem;
  background-color: #f2f2f3;
}
.modal-login-btn P::after {
  top: 1.5rem;
  left: 1rem;
  position: absolute;
  content: "";
  width: 15rem;
  height: 0.2rem;
  background-color: #f2f2f3;
}

input[id=remember]:checked ~ label::before {
  background-color: #b19276;
}

.modal-login-active {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
@media only screen and (max-width: 768px) {
  .modal-login-active {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}

.modal-cunfirm {
  position: fixed;
  display: none;
  width: 80rem;
  height: 50rem;
  background-color: white;
  top: 20%;
  right: 25%;
  z-index: 200;
}
@media only screen and (max-width: 1200px) {
  .modal-cunfirm {
    right: 10%;
  }
}
@media only screen and (max-width: 768px) {
  .modal-cunfirm {
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }
}

.modal-login-timer {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  font-family: "notoarabic";
  font-size: 1.1rem;
}
.modal-login-timer svg {
  margin-left: 0.5rem;
}
.modal-login-timer span {
  margin-left: 0.5rem;
  color: blue;
  font-family: "notoarabic";
}

.modal-cunfirm-input-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.modal-cunfirm-input-box .modal-cunfirm-input-item {
  width: 4rem;
  height: 4rem;
  border-radius: 0.5rem 0.5rem;
  padding-left: 2rem;
  border: 1px solid #f2f2f3;
  outline: none;
  font-size: 2rem;
}

.modal-cunfirm-active {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
@media only screen and (max-width: 768px) {
  .modal-cunfirm-active {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}

.border-orange {
  border: 1px solid #b19276;
}

.categoryfilter {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.categoryfilter__filter {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 25%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .categoryfilter__filter {
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  .categoryfilter__filter-mobile {
    display: none;
  }
}
@media only screen and (max-width: 768px) {
  .categoryfilter__filter-mobile {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    width: 100%;
    height: auto;
  }
}
.categoryfilter__title {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: 5rem;
}
@media only screen and (max-width: 768px) {
  .categoryfilter__title {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: row;
  }
}
.categoryfilter__title img {
  width: 2rem;
  height: 2rem;
  margin-left: 0.5rem;
  cursor: pointer;
}
.categoryfilter__title h2 {
  font-family: "notoarabic";
  font-size: 1.4rem;
}
.categoryfilter__content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 75%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .categoryfilter__content {
    width: 100%;
  }
}
.categoryfilter__sort {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.categoryfilter__desktop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .categoryfilter__desktop {
    display: none;
  }
}
.categoryfilter__search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 70%;
  height: 4rem;
  border: 1px solid #e7e7eb;
  padding: 0 0.5rem 0 0.5rem;
  border-radius: 1rem 1rem;
}
.categoryfilter__search img {
  width: 2rem;
  height: 2rem;
}
.categoryfilter__search input {
  width: 95%;
  height: 100%;
  border: none;
  outline: none;
}
.categoryfilter__search input::-moz-placeholder {
  font-family: "notoarabic";
  font-size: 1.1rem;
  color: #ceced1;
}
.categoryfilter__search input::placeholder {
  font-family: "notoarabic";
  font-size: 1.1rem;
  color: #ceced1;
}
.categoryfilter__selecte {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 30%;
  height: 4rem;
}
.categoryfilter__selecte select {
  width: 95%;
  height: 100%;
  border: 1px solid #e7e7eb;
  border-radius: 1rem 1rem;
  font-family: "notoarabic";
  font-size: 1.1rem;
  transition: 0.3s all ease-in;
  outline: 1px solid #e7e7eb;
  cursor: pointer;
}
.categoryfilter__selecte select option:checked {
  background-color: #b19276;
  color: white;
}
.categoryfilter__products {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 518px) {
  .categoryfilter__products {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.categoryfilter__paginations {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 5rem;
  margin-top: 3rem;
}
.categoryfilter__paginations .categoryfilter-paginate-preve {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem 0.5rem;
  background-color: #f2f2f3;
  margin-left: 0.5rem;
  font-family: "notoarabic";
  font-size: 1.1rem;
}
.categoryfilter__paginations .categoryfilter-paginate-preve img {
  width: 1rem;
  height: 1rem;
  transform: rotate(180deg);
}
.categoryfilter__paginations .categoryfilter-paginate-next {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem 0.5rem;
  background-color: #f2f2f3;
  margin-left: 0.5rem;
  font-family: "notoarabic";
  font-size: 1.1rem;
}
.categoryfilter__paginations .categoryfilter-paginate-next img {
  width: 1rem;
  height: 1rem;
}
.categoryfilter__paginations .categoryfilter-paginate {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem 0.5rem;
  background-color: #f2f2f3;
  margin-left: 0.5rem;
  color: black;
  font-family: "notoarabic";
  font-size: 1.1rem;
}
@media only screen and (min-width: 768px) {
  .categoryfilter__mobile {
    display: none;
  }
}
@media only screen and (max-width: 768px) {
  .categoryfilter__mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    width: 100%;
    height: 4rem;
  }
  .categoryfilter__mobile p {
    width: auto;
    font-family: "notoarabic";
    font-size: 1.1rem;
    color: #85858d;
  }
}
@media only screen and (max-width: 768px) {
  .categoryfilter__icon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
    width: auto;
    height: 4rem;
  }
  .categoryfilter__icon .categortfilter-sort, .categoryfilter__icon .categoryfilter-filter {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 3rem;
    height: 3rem;
    border: 1px solid #e7e7eb;
    border-radius: 0.4rem 0.4rem;
    cursor: pointer;
  }
  .categoryfilter__icon .categortfilter-sort img, .categoryfilter__icon .categoryfilter-filter img {
    width: 2rem;
    height: 2rem;
  }
  .categoryfilter__icon .categoryfilter-filter {
    margin-left: 0.5rem;
  }
}
.categoryfilter__items {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 90%;
  height: auto;
  background-color: #fafafa;
  padding: 1rem 1rem;
  border-radius: 1.5rem 1.5rem;
  margin-left: 2rem;
}
@media only screen and (max-width: 768px) {
  .categoryfilter__items {
    background-color: white;
  }
}
.categoryfilter__item {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding-bottom: 0.5rem;
}
.categoryfilter__item-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  border-bottom: 1px solid #e7e7eb;
}
.categoryfilter__item-title h2 {
  font-family: "notoarabic";
  font-size: 1.5rem;
}
.categoryfilter__icon-close {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  color: #b19276;
  font-family: "notoarabic";
  font-size: 1.2rem;
  cursor: pointer;
}
.categoryfilter__icon-close img {
  width: 2rem;
  height: 2rem;
  margin-right: 0.5rem;
}
.categoryfilter__tags {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
}
.categoryfilter__tags a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  border: 1px solid #e7e7eb;
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
  padding: 0.2rem 0.5rem;
  border-radius: 2rem 2rem;
  color: black;
  font-family: "notoarabic";
  font-size: 1.1rem;
}
.categoryfilter__tags a .filter-tag-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
}
.categoryfilter__tags a .filter-tag-text div {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.4rem;
  border-radius: 0.4rem 0.4rem;
}
.categoryfilter__tags a .filter-tag-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
}
.categoryfilter__tags a .filter-tag-icon img {
  width: 1.4rem;
  height: 1.4rem;
  margin-right: 0.4rem;
}
.categoryfilter__item-click {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.categoryfilter__tab-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  border-bottom: 1px solid #e7e7eb;
  padding: 1rem 0 1rem 0;
  cursor: pointer;
}
.categoryfilter__tab-text {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  width: auto;
}
.categoryfilter__tab-text h3 {
  color: black;
  font-family: "notoarabic";
  font-size: 1.5rem;
}
.categoryfilter__tab-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  width: auto;
}
.categoryfilter__tab-icon img {
  width: 1rem;
  height: 1rem;
  transform: rotate(-90deg);
  transition: 0.3s all ease-in;
}
.categoryfilter__tab-botton {
  display: none;
  width: 100%;
  height: auto;
}
.categoryfilter__checkbox {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.categoryfilter__checkbox-item {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 0.5rem;
}
.categoryfilter__checkbox-item label {
  cursor: pointer;
  font-family: "notoarabic";
  font-size: 1.2rem;
}
.categoryfilter__checkbox-item input {
  position: relative;
  display: flex;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin-left: 1.9rem;
}
.categoryfilter__checkbox-item input::before {
  position: absolute;
  top: -0.7rem;
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.3rem 0.3rem;
  border: 1px solid #ceced1;
}
.categoryfilter__checkbox-item input::after {
  display: none;
  position: absolute;
  top: -0.6rem;
  right: 0.4rem;
  content: "";
  width: 0.6rem;
  height: 0.9rem;
  border-top: none;
  border-left: none;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  transform: rotate(30deg);
}
.categoryfilter__checkbox-item input:checked::after {
  display: flex;
}
.categoryfilter__color-item {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
}
.categoryfilter__color-item label {
  position: relative;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem 0.5rem;
  margin: 0.5rem 0.5rem;
  cursor: pointer;
}
.categoryfilter__color-item .color-item1 {
  background-color: #f2f2f3;
}
.categoryfilter__color-item input[id=color1]:checked ~ .color-item1::before {
  content: "";
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid #f2f2f3;
  border-radius: 0.5rem 0.5rem;
}
.categoryfilter__color-item input[id=color1]:checked ~ .color-item1::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  right: 0.6rem;
  width: 0.6rem;
  height: 0.8rem;
  transform: rotate(30deg);
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
.categoryfilter__color-item .color-item2 {
  background-color: #85858d;
}
.categoryfilter__color-item input[id=color2]:checked ~ .color-item2::before {
  content: "";
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid #85858d;
  border-radius: 0.5rem 0.5rem;
}
.categoryfilter__color-item input[id=color2]:checked ~ .color-item2::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  right: 0.6rem;
  width: 0.6rem;
  height: 0.8rem;
  transform: rotate(30deg);
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}
.categoryfilter__color-item .color-item3 {
  background-color: #b19276;
}
.categoryfilter__color-item input[id=color3]:checked ~ .color-item3::before {
  content: "";
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid #b19276;
  border-radius: 0.5rem 0.5rem;
}
.categoryfilter__color-item input[id=color3]:checked ~ .color-item3::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  right: 0.6rem;
  width: 0.6rem;
  height: 0.8rem;
  transform: rotate(30deg);
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}
.categoryfilter__color-item .color-item4 {
  background-color: #c2b2a5;
}
.categoryfilter__color-item input[id=color4]:checked ~ .color-item4::before {
  content: "";
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid #c2b2a5;
  border-radius: 0.5rem 0.5rem;
}
.categoryfilter__color-item input[id=color4]:checked ~ .color-item4::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  right: 0.6rem;
  width: 0.6rem;
  height: 0.8rem;
  transform: rotate(30deg);
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}
.categoryfilter__color-item .color-item5 {
  background-color: #f1ab91;
}
.categoryfilter__color-item input[id=color5]:checked ~ .color-item5::before {
  content: "";
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid #f1ab91;
  border-radius: 0.5rem 0.5rem;
}
.categoryfilter__color-item input[id=color5]:checked ~ .color-item5::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  right: 0.6rem;
  width: 0.6rem;
  height: 0.8rem;
  transform: rotate(30deg);
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}
.categoryfilter__color-item .color-item6 {
  background-color: #6a6a6a;
}
.categoryfilter__color-item input[id=color6]:checked ~ .color-item6::before {
  content: "";
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid #6a6a6a;
  border-radius: 0.5rem 0.5rem;
}
.categoryfilter__color-item input[id=color6]:checked ~ .color-item6::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  right: 0.6rem;
  width: 0.6rem;
  height: 0.8rem;
  transform: rotate(30deg);
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}
.categoryfilter__color-item .color-item7 {
  background-color: #050505;
}
.categoryfilter__color-item input[id=color7]:checked ~ .color-item7::before {
  content: "";
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid #050505;
  border-radius: 0.5rem 0.5rem;
}
.categoryfilter__color-item input[id=color7]:checked ~ .color-item7::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  right: 0.6rem;
  width: 0.6rem;
  height: 0.8rem;
  transform: rotate(30deg);
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}
.categoryfilter__color-item .color-item8 {
  background-color: #988faa;
}
.categoryfilter__color-item input[id=color8]:checked ~ .color-item8::before {
  content: "";
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid #988faa;
  border-radius: 0.5rem 0.5rem;
}
.categoryfilter__color-item input[id=color8]:checked ~ .color-item8::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  right: 0.6rem;
  width: 0.6rem;
  height: 0.8rem;
  transform: rotate(30deg);
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}
.categoryfilter__color-item .color-item10 {
  background-color: #f2f2f3;
}
.categoryfilter__color-item input[id=color10]:checked ~ .color-item10::before {
  content: "";
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid #f2f2f3;
  border-radius: 0.5rem 0.5rem;
}
.categoryfilter__color-item input[id=color10]:checked ~ .color-item10::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  right: 0.6rem;
  width: 0.6rem;
  height: 0.8rem;
  transform: rotate(30deg);
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
.categoryfilter__color-item .color-item12 {
  background-color: #85858d;
}
.categoryfilter__color-item input[id=color12]:checked ~ .color-item12::before {
  content: "";
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid #85858d;
  border-radius: 0.5rem 0.5rem;
}
.categoryfilter__color-item input[id=color12]:checked ~ .color-item12::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  right: 0.6rem;
  width: 0.6rem;
  height: 0.8rem;
  transform: rotate(30deg);
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}
.categoryfilter__color-item .color-item13 {
  background-color: #b19276;
}
.categoryfilter__color-item input[id=color13]:checked ~ .color-item13::before {
  content: "";
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid #b19276;
  border-radius: 0.5rem 0.5rem;
}
.categoryfilter__color-item input[id=color13]:checked ~ .color-item13::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  right: 0.6rem;
  width: 0.6rem;
  height: 0.8rem;
  transform: rotate(30deg);
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}
.categoryfilter__color-item .color-item14 {
  background-color: #c2b2a5;
}
.categoryfilter__color-item input[id=color14]:checked ~ .color-item14::before {
  content: "";
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid #c2b2a5;
  border-radius: 0.5rem 0.5rem;
}
.categoryfilter__color-item input[id=color14]:checked ~ .color-item14::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  right: 0.6rem;
  width: 0.6rem;
  height: 0.8rem;
  transform: rotate(30deg);
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}
.categoryfilter__color-item .color-item15 {
  background-color: #f1ab91;
}
.categoryfilter__color-item input[id=color15]:checked ~ .color-item15::before {
  content: "";
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid #f1ab91;
  border-radius: 0.5rem 0.5rem;
}
.categoryfilter__color-item input[id=color15]:checked ~ .color-item15::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  right: 0.6rem;
  width: 0.6rem;
  height: 0.8rem;
  transform: rotate(30deg);
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}
.categoryfilter__color-item .color-item16 {
  background-color: #6a6a6a;
}
.categoryfilter__color-item input[id=color16]:checked ~ .color-item16::before {
  content: "";
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid #6a6a6a;
  border-radius: 0.5rem 0.5rem;
}
.categoryfilter__color-item input[id=color16]:checked ~ .color-item16::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  right: 0.6rem;
  width: 0.6rem;
  height: 0.8rem;
  transform: rotate(30deg);
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}
.categoryfilter__color-item .color-item17 {
  background-color: #050505;
}
.categoryfilter__color-item input[id=color17]:checked ~ .color-item17::before {
  content: "";
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid #050505;
  border-radius: 0.5rem 0.5rem;
}
.categoryfilter__color-item input[id=color17]:checked ~ .color-item17::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  right: 0.6rem;
  width: 0.6rem;
  height: 0.8rem;
  transform: rotate(30deg);
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}
.categoryfilter__color-item .color-item18 {
  background-color: #988faa;
}
.categoryfilter__color-item input[id=color18]:checked ~ .color-item18::before {
  content: "";
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid #988faa;
  border-radius: 0.5rem 0.5rem;
}
.categoryfilter__color-item input[id=color18]:checked ~ .color-item18::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  right: 0.6rem;
  width: 0.6rem;
  height: 0.8rem;
  transform: rotate(30deg);
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}
.categoryfilter__size-item {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
}
.categoryfilter__size-item label {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.5rem 0.5rem;
  margin: 0.5rem 0.5rem;
  cursor: pointer;
  border: 1px solid #f2f2f3;
  font-family: "notoarabic";
  font-size: 1rem;
}
.categoryfilter__size-item input[id=size1]:checked ~ .size-item1 {
  background-color: #685846;
  color: white;
}
.categoryfilter__size-item input[id=size1]:checked ~ .size-item1::before {
  border-radius: 0.5rem 0.5rem;
  position: absolute;
  width: 2.6rem;
  height: 2.6rem;
  content: "";
  top: -0.2rem;
  border: 1px solid #685846;
}
.categoryfilter__size-item input[id=size2]:checked ~ .size-item2 {
  background-color: #685846;
  color: white;
}
.categoryfilter__size-item input[id=size2]:checked ~ .size-item2::before {
  border-radius: 0.5rem 0.5rem;
  position: absolute;
  width: 2.6rem;
  height: 2.6rem;
  content: "";
  top: -0.2rem;
  border: 1px solid #685846;
}
.categoryfilter__size-item input[id=size3]:checked ~ .size-item3 {
  background-color: #685846;
  color: white;
}
.categoryfilter__size-item input[id=size3]:checked ~ .size-item3::before {
  border-radius: 0.5rem 0.5rem;
  position: absolute;
  width: 2.6rem;
  height: 2.6rem;
  content: "";
  top: -0.2rem;
  border: 1px solid #685846;
}
.categoryfilter__size-item input[id=size4]:checked ~ .size-item4 {
  background-color: #685846;
  color: white;
}
.categoryfilter__size-item input[id=size4]:checked ~ .size-item4::before {
  border-radius: 0.5rem 0.5rem;
  position: absolute;
  width: 2.6rem;
  height: 2.6rem;
  content: "";
  top: -0.2rem;
  border: 1px solid #685846;
}
.categoryfilter__size-item input[id=size10]:checked ~ .size-item10 {
  background-color: #685846;
  color: white;
}
.categoryfilter__size-item input[id=size10]:checked ~ .size-item10::before {
  border-radius: 0.5rem 0.5rem;
  position: absolute;
  width: 2.6rem;
  height: 2.6rem;
  content: "";
  top: -0.2rem;
  border: 1px solid #685846;
}
.categoryfilter__size-item input[id=size12]:checked ~ .size-item12 {
  background-color: #685846;
  color: white;
}
.categoryfilter__size-item input[id=size12]:checked ~ .size-item12::before {
  border-radius: 0.5rem 0.5rem;
  position: absolute;
  width: 2.6rem;
  height: 2.6rem;
  content: "";
  top: -0.2rem;
  border: 1px solid #685846;
}
.categoryfilter__size-item input[id=size13]:checked ~ .size-item13 {
  background-color: #685846;
  color: white;
}
.categoryfilter__size-item input[id=size13]:checked ~ .size-item13::before {
  border-radius: 0.5rem 0.5rem;
  position: absolute;
  width: 2.6rem;
  height: 2.6rem;
  content: "";
  top: -0.2rem;
  border: 1px solid #685846;
}
.categoryfilter__size-item input[id=size14]:checked ~ .size-item14 {
  background-color: #685846;
  color: white;
}
.categoryfilter__size-item input[id=size14]:checked ~ .size-item14::before {
  border-radius: 0.5rem 0.5rem;
  position: absolute;
  width: 2.6rem;
  height: 2.6rem;
  content: "";
  top: -0.2rem;
  border: 1px solid #685846;
}
.categoryfilter__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}

input[name=shows]:checked ~ .categoryfilter__tab-botton {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
}

input[name=shows]:checked ~ .categoryfilter__tab-top .categoryfilter__tab-icon img {
  transform: rotate(90deg);
}

.paginate-active {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem 0.5rem;
  background-color: #f2f2f3;
  margin-left: 0.5rem;
  color: white;
  background-color: black;
  font-family: "notoarabic";
  font-size: 1.1rem;
}

.cate-title {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 3rem;
}
@media only screen and (max-width: 768px) {
  .cate-title {
    display: none;
  }
}
.cate-title h3 {
  font-family: "notoarabic";
  color: black;
  font-size: 1.5rem;
}
.cate-title h3 span {
  font-size: 1.1rem;
  color: #ceced1;
  font-weight: 100;
}

@media only screen and (min-width: 768px) {
  .cate-title-mobile {
    display: none;
  }
}
@media only screen and (max-width: 768px) {
  .cate-title-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    width: 100%;
    height: auto;
    cursor: pointer;
    margin-top: 3rem;
  }
  .cate-title-mobile h3 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    font-family: "notoarabic";
    color: black;
    font-size: 1.5rem;
  }
  .cate-title-mobile h3 img {
    width: 1.5rem;
    height: 1.5rem;
    transform: rotate(180deg);
    margin-left: 0.5rem;
  }
}

@media only screen and (max-width: 768px) {
  .categoryfilter-mobile {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    right: -66rem;
    bottom: 0;
    left: -40rem;
    z-index: 200;
    background-color: white;
    overflow: scroll;
    transition: all 0.3s ease-in;
  }
}

.category-filter-mobile-active {
  right: 0;
}

.detaill {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 3rem;
}
@media only screen and (max-width: 768px) {
  .detaill {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
.detaill__gallery {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  width: 50%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .detaill__gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
    width: 100%;
  }
}
.detaill__slider {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 10%;
  height: 100%;
}
@media only screen and (max-width: 768px) {
  .detaill__slider {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 100%;
  }
}
.detaill__img {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 70%;
  height: 100%;
}
@media only screen and (max-width: 768px) {
  .detaill__img {
    width: 100%;
  }
}
.detaill__slider-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 8rem;
  height: 8rem;
  margin: 1rem 0 1rem 0;
}
@media only screen and (max-width: 768px) {
  .detaill__slider-item {
    margin: 0 1rem 0 1rem;
  }
}
@media only screen and (max-width: 534px) {
  .detaill__slider-item {
    width: 6rem;
  }
}
@media only screen and (max-width: 415px) {
  .detaill__slider-item {
    width: 5rem;
  }
}
.detaill__slider-item img {
  width: 100%;
  height: 100%;
  border-radius: 1rem 1rem;
  cursor: pointer;
}
.detaill__img-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50rem;
  border-radius: 2rem 2rem;
}
.detaill__img-item img {
  width: 60rem;
  height: 50rem;
  border-radius: 2rem 2rem;
}
@media only screen and (max-width: 768px) {
  .detaill__img-item img {
    width: 100rem;
  }
}
.detaill__content {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 50%;
  height: auto;
  padding-right: 1.5rem;
}
@media only screen and (max-width: 768px) {
  .detaill__content {
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 2rem;
  }
}
.detaill__content-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.detaill__content-title h1 {
  font-family: "notoarabic";
  font-size: 2rem;
  color: black;
}
.detaill__shairit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
.detaill__shairit .detail-shairit, .detaill__shairit .detaill-haert {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #b19276;
  border-radius: 0.5rem 0.5rem;
  margin: 0 0.5rem 0 0.5rem;
  cursor: pointer;
}
.detaill__shairit .detail-shairit img, .detaill__shairit .detaill-haert img {
  width: 1.5rem;
  height: 1.5rem;
}
.detaill__stars {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.detaill__stars img {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.4rem;
}
.detaill__price {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 2rem;
}
@media only screen and (max-width: 768px) {
  .detaill__price {
    display: none;
  }
}
.detaill__price .detaill-old-price, .detaill__price .detaill-new-price {
  font-family: "notoarabic";
  font-size: 1.3rem;
}
.detaill__price .detaill-old-price {
  position: relative;
  margin-left: 0.5rem;
  color: #ceced1;
}
.detaill__price .detaill-old-price::after {
  position: absolute;
  top: 1.2rem;
  right: 0;
  content: "";
  background-color: #ceced1;
  width: 4rem;
  height: 0.2rem;
}
.detaill__body {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  padding: 0 0 1rem 1rem;
  margin-top: 2rem;
}
.detaill__body p {
  font-family: "notoarabic";
  font-size: 1.2rem;
}
.detaill__property {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.detaill__property .detaill-property-item {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 0.5rem;
  font-family: "notoarabic";
  font-size: 1.2rem;
}
.detaill__property .detaill-property-item img {
  width: 2rem;
  height: 2rem;
  margin-left: 0.7rem;
}
.detaill__colors {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  height: auto;
  width: 100%;
  margin-top: 1rem;
}
.detaill__colors p {
  font-family: "notoarabic";
  font-size: 1.2rem;
}
.detaill__colors .detaill-colors-item {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  height: auto;
  width: auto;
}
.detaill__colors .detaill-colors-item label {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem 0.5rem;
  margin-left: 0.5rem;
  cursor: pointer;
}
.detaill__sizes {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  height: auto;
  width: 100%;
  margin-top: 1rem;
}
.detaill__sizes p {
  font-family: "notoarabic";
  font-size: 1.2rem;
}
.detaill__sizes .detaill-sizes-item {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  height: auto;
  width: auto;
}
.detaill__sizes label {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 0.5rem 0.5rem;
  margin-left: 0.5rem;
  cursor: pointer;
  border: 1px solid #f2f2f3;
}
.detaill__btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 3rem;
}
@media only screen and (max-width: 768px) {
  .detaill__btn {
    display: none;
  }
}

input[name=color],
input[name=size] {
  display: none;
}

input[id=color-1]:checked ~ label[for=color-1],
input[id=color-2]:checked ~ label[for=color-2],
input[id=color-3]:checked ~ label[for=color-3],
input[id=color-4]:checked ~ label[for=color-4],
input[id=color-5]:checked ~ label[for=color-5] {
  position: relative;
}
input[id=color-1]:checked ~ label[for=color-1]::before,
input[id=color-2]:checked ~ label[for=color-2]::before,
input[id=color-3]:checked ~ label[for=color-3]::before,
input[id=color-4]:checked ~ label[for=color-4]::before,
input[id=color-5]:checked ~ label[for=color-5]::before {
  position: absolute;
  top: 0.1rem;
  right: 0.5rem;
  content: "";
  width: 1rem;
  height: 1.3rem;
  border-right: 2px white solid;
  border-bottom: 2px white solid;
  transform: rotate(30deg);
}

input[id=size-1]:checked ~ label[for=size-1],
input[id=size-2]:checked ~ label[for=size-2],
input[id=size-3]:checked ~ label[for=size-3],
input[id=size-4]:checked ~ label[for=size-4],
input[id=size-5]:checked ~ label[for=size-5],
input[id=size-6]:checked ~ label[for=size-6],
input[id=size-7]:checked ~ label[for=size-7],
input[id=size-8]:checked ~ label[for=size-8],
input[id=size-9]:checked ~ label[for=size-9] {
  background-color: #685846;
  color: white;
}

.description {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 3rem;
  margin-bottom: 5rem;
}
@media only screen and (max-width: 768px) {
  .description {
    display: none;
  }
}
.description p {
  font-family: "notoarabic";
  font-size: 1.2rem;
}
.description__item, .description__content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}

.detaill-property-items {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
}

.detaill-property {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  padding: 1rem 2rem 1rem 2rem;
  background-color: #f2f2f3;
  color: black;
  border-radius: 2rem 2rem;
  margin: 0.5rem 0.5rem;
  font-family: "notoarabic";
  font-size: 1.2rem;
}

.description-mobile-tab {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 4rem;
  margin-bottom: 4rem;
}
@media only screen and (min-width: 768px) {
  .description-mobile-tab {
    display: none;
  }
}

.description-mobile-item {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin: 0.5rem 0 0.5rem 0;
  padding: 0 1rem;
}

.description-mobile-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 5rem;
  padding: 0 1rem;
  border-bottom: 1px solid #f2f2f3;
  cursor: pointer;
}
.description-mobile-top h3 {
  font-family: "notoarabic";
  font-size: 1.2rem;
}
.description-mobile-top img {
  width: 1.2rem;
  height: 1.2rem;
  transform: rotate(-90deg);
  transition: all ease-in 0.3s;
}

.description-mobile-bottom {
  display: none;
  width: 100%;
  height: 0;
  padding: 1rem 1rem;
  overflow: hidden;
  transition: all ease-in 0.3s;
}
.description-mobile-bottom p {
  display: none;
}

input[name=menu-tab-description]:checked ~ .description-mobile-bottom {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
}
input[name=menu-tab-description]:checked ~ .description-mobile-bottom p {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
}

input[name=menu-tab-description]:checked ~ .description-mobile-top > img {
  transform: rotate(90deg);
}

.cart {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 2rem;
  margin-bottom: 4rem;
}
@media only screen and (max-width: 768px) {
  .cart {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 5rem;
  }
}
.cart__list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 75%;
  height: auto;
  border: 1px solid #f2f2f3;
  border-radius: 1.5rem 1.5rem;
  margin-left: 1rem;
}
@media only screen and (max-width: 768px) {
  .cart__list {
    width: 100%;
    border: none;
  }
}
.cart__delivery {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 75%;
  height: auto;
  margin-left: 1rem;
}
@media only screen and (max-width: 768px) {
  .cart__delivery {
    width: 100%;
    border: none;
  }
}
.cart__basket {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 25%;
  height: auto;
  border: 1px solid #f2f2f3;
  margin-right: 1rem;
  border-radius: 1rem 1rem;
  padding: 1rem 1rem;
}
@media only screen and (max-width: 768px) {
  .cart__basket {
    width: 100%;
    border: none;
    margin-top: 1rem;
  }
}
.cart__delivery-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 5rem;
  margin-top: 2rem;
}
.cart__delivery-title h2 {
  font-family: "notoarabic";
  font-size: 1.4rem;
}
.cart__delivery-title .cart-add-address-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  white-space: nowrap;
  color: #b19276;
  cursor: pointer;
}
.cart__delivery-title .cart-add-address-item img {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.4rem;
}
.cart__delivery-change {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 6rem;
  border-radius: 1rem 1rem;
  border: 1px solid #f2f2f3;
  padding: 1rem 1rem;
}
.cart__payment-change {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 6rem;
  border-radius: 1rem 1rem;
  border: 1px solid #f2f2f3;
  padding: 1rem 1rem;
}
.cart__discount-box {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: 6rem;
  border: 1px solid #f2f2f3;
  border-radius: 1rem 1rem;
  padding: 0 1rem;
}
.cart__discount-box .cart-discount-item {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
}
.cart__discount-box .cart-discount-item input {
  width: 40rem;
  height: 3.5rem;
  border: 1px solid #f2f2f3;
  outline: none;
  border-radius: 0.5rem 0.5rem;
  padding-right: 1rem;
}
.cart__discount-box .cart-discount-item button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.3rem 3rem;
  border: 1px solid #b19276;
  margin-right: 1rem;
  background-color: white;
  color: #b19276;
  border-radius: 0.5rem 0.5rem;
  font-family: "notoarabic";
  font-size: 1.2rem;
  font-weight: 100;
  cursor: pointer;
  white-space: nowrap;
}
.cart__gateway {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 4rem;
  border: 1px solid #f2f2f3;
  padding: 1rem 1rem;
  border-radius: 1rem 1rem;
}
.cart__gateway label {
  width: 7rem;
  height: 7rem;
  cursor: pointer;
  margin-right: 1rem;
}
.cart__gateway label img {
  width: 100%;
  height: 100%;
}
.cart__payment-offline {
  display: none;
  width: 100%;
  height: auto;
  background-color: #fafafa;
  padding: 2rem 2rem;
  border-radius: 1rem 1rem;
  margin-top: 2rem;
}
.cart__payment-offline span {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  font-family: "notoarabic";
  font-size: 1.1rem;
}
.cart__payment-offline span img {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.5rem;
}
.cart__payment-offline p {
  font-family: "notoarabic";
  font-size: 1rem;
  color: #85858d;
}
.cart__address {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 15rem;
  border-radius: 1rem 1rem;
  border: 1px solid #f2f2f3;
}
.cart__address-items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.cart__address-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 8rem;
  border: 1px solid #f2f2f3;
  margin-top: 0.5rem;
  border-radius: 1rem 1rem;
  padding: 1rem 1rem;
  cursor: pointer;
}
.cart__address-item .cart-address-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 4rem;
}
.cart__address-item .cart-address-content .cart-address-location {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  font-family: "notoarabic";
  font-size: 1.1rem;
}
.cart__address-item .cart-address-content .cart-address-location img {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.4rem;
}
.cart__address-item .cart-address-content .cart-address-edit {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
}
.cart__address-item .cart-address-content .cart-address-edit img {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 0.5rem;
}
.cart__address-item .cart-address-contact {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 4rem;
}
.cart__address-item .cart-address-contact span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  white-space: nowrap;
  font-family: "notoarabic";
  font-size: 1.1rem;
  margin-left: 0.5rem;
}
.cart__address-item .cart-address-contact span img {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.5rem;
}
.cart__address-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: auto;
  height: 8rem;
}
.cart__address-btn p {
  font-family: "notoarabic";
  margin-bottom: 1rem;
  font-size: 1.1rem;
}
.cart__add-time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.cart__add-time .cart-input-time, .cart__add-time .cart-input-duration {
  position: relative;
  width: 50%;
  height: 4rem;
  border: 1px solid #f2f2f3;
  border-radius: 1rem 1rem;
}
.cart__add-time .cart-input-time select, .cart__add-time .cart-input-duration select {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-family: "notoarabic";
  font-size: 1.1rem;
}
.cart__add-time .cart-input-time select option, .cart__add-time .cart-input-duration select option {
  padding: 1.5rem 1.5rem;
  height: 2rem;
  font-family: "notoarabic";
  font-size: 1rem;
}
.cart__add-time .cart-input-time select option::-moz-selection, .cart__add-time .cart-input-duration select option::-moz-selection {
  font-family: "notoarabic";
  font-size: 1rem;
}
.cart__add-time .cart-input-time select option::selection, .cart__add-time .cart-input-duration select option::selection {
  font-family: "notoarabic";
  font-size: 1rem;
}
.cart__add-time .cart-input-time label, .cart__add-time .cart-input-duration label {
  position: absolute;
  width: auto;
  white-space: nowrap;
  height: 2rem;
  top: -1.2rem;
  right: 0.6rem;
  background-color: white;
  font-family: "notoarabic";
  font-size: 0.9rem;
  color: #ceced1;
}
.cart__description {
  width: 100%;
  height: 15rem;
}
.cart__description textarea {
  width: 100%;
  height: 100%;
  border: 1px solid #f2f2f3;
  border-radius: 1rem 1rem;
  padding: 1rem 1rem;
  outline: none;
  resize: none;
  font-family: "notoarabic";
  font-size: 1.1rem;
}
.cart__description textarea::-moz-placeholder {
  font-family: "notoarabic";
  font-size: 1.1rem;
}
.cart__description textarea::placeholder {
  font-family: "notoarabic";
  font-size: 1.1rem;
}
.cart__address-store {
  display: none;
  width: 100%;
  height: auto;
  border: 1px solid #f2f2f3;
  border-radius: 1rem 1rem;
  padding: 1rem 1rem;
}
.cart__address-store .cart-address-box {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: column;
  width: auto;
  height: 100%;
}
.cart__address-store .cart-address-box .cart-address-box-item {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  margin-top: 1rem;
  font-family: "notoarabic";
  font-size: 1.2rem;
}
.cart__address-store .cart-address-box .cart-address-box-item img {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.4rem;
}
.cart__address-store .cart-address-map {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  border-radius: 1rem 1rem;
}
@media only screen and (max-width: 768px) {
  .cart__address-store .cart-address-map {
    margin-top: 1rem;
  }
}
.cart__address-store .cart-address-map iframe {
  width: 35rem;
  height: 15rem;
  border-radius: 1rem 1rem;
}
@media only screen and (max-width: 768px) {
  .cart__address-store .cart-address-map iframe {
    width: 100%;
  }
}
.cart__list-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  padding: 1rem 1rem;
}
.cart__list-hd .cart-hd-list {
  font-family: "notoarabic";
  font-size: 1.2rem;
}
.cart__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  padding: 1.5rem 1.5rem;
  border-bottom: 1px solid #f2f2f3;
}
.cart__img {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  margin-left: 0.5rem;
}
.cart__img img {
  width: 6rem;
  height: 6rem;
  border-radius: 0.5rem 0.5rem;
}
.cart__title {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  margin-right: 1rem;
}
.cart__title span {
  font-family: "notoarabic";
  font-size: 1.2rem;
}
.cart__title .cart-coor-item {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.3rem 0.3rem;
}
.cart__price {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: auto;
  height: auto;
}
.cart__price .cart-price-new {
  font-family: "notoarabic";
  font-size: 1.2rem;
}
.cart__old-price {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.cart__old-price .cart-price-old {
  position: relative;
  font-family: "notoarabic";
  font-size: 1.2rem;
  margin-left: 0.5rem;
  color: #ceced1;
}
.cart__old-price .cart-price-old::after {
  content: "";
  position: absolute;
  top: 1rem;
  right: -0.5rem;
  width: 4rem;
  height: 0.2rem;
  background-color: #ceced1;
}
.cart__old-price span {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.3rem 0.5rem;
  border-radius: 1rem 1rem;
  background-color: #b19276;
  color: white;
}
.cart__price-total {
  font-family: "notoarabic";
  font-size: 1.2rem;
}
.cart__price-new {
  width: 9rem;
}
.cart__number {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  margin-right: 1rem;
}
.cart__number input {
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  outline: none;
  width: 4rem;
  padding: 0 1.8rem 0 0;
}
.cart__basket-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 4rem;
  border-bottom: 1px solid #f2f2f3;
}
@media only screen and (max-width: 768px) {
  .cart__basket-title {
    display: none;
  }
}
.cart__basket-title h2 {
  font-family: "notoarabic";
  font-size: 1.4rem;
  color: black;
}
.cart__basket-title img {
  width: 2rem;
  height: 2rem;
}
.cart__basket-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .cart__basket-list {
    display: none;
  }
}
.cart__basket-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 0.5rem;
}
.cart__basket-list-item p {
  font-family: "notoarabic";
  font-size: 1rem;
}
.cart__detail {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 4rem;
}
@media only screen and (max-width: 768px) {
  .cart__detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
  }
}
.cart__detail h3 {
  font-family: "notoarabic";
  font-size: 1.4rem;
  color: black;
  font-weight: 100;
}
.cart__detail .cart-list-items {
  display: none;
  white-space: nowrap;
  color: #b19276;
  cursor: pointer;
}
.cart__detail .cart-list-items img {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.4rem;
}
@media only screen and (max-width: 768px) {
  .cart__detail .cart-list-items {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: auto;
    height: auto;
  }
}
.cart__detail-number, .cart__detail-discount, .cart__detail-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 4rem;
}
.cart__detail-number p, .cart__detail-discount p, .cart__detail-price p {
  font-family: "notoarabic";
  font-size: 1.2rem;
  color: black;
}
.cart__detail-discount P {
  color: #b19276;
}
.cart__detail-delivery {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.cart__detail-delivery span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 4rem;
  font-family: "notoarabic";
  font-size: 1.2rem;
  color: black;
}
.cart__detail-delivery .cart-info-delivery {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 90%;
  height: auto;
}
.cart__detail-delivery .cart-info-delivery img {
  width: 2rem;
  height: 2rem;
  margin-top: 0.5rem;
}
.cart__detail-delivery .cart-info-delivery p {
  font-family: "notoarabic";
  font-size: 1rem;
  color: #b19276;
  line-height: 1.4rem;
}
.cart__detail-total-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 4rem;
  border-bottom: 1px solid #f2f2f3;
}
.cart__detail-total-price p {
  font-family: "notoarabic";
  font-size: 1.2rem;
  color: black;
}
.cart__detail-information {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: 4rem;
  margin-top: 0.5rem;
}
.cart__detail-information p {
  font-family: "notoarabic";
  font-size: 1rem;
  color: black;
  line-height: 1.4rem;
}
.cart__detail-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 0.5rem;
}
.cart__detail-btn .cart-btn-price {
  display: none;
}
@media only screen and (max-width: 768px) {
  .cart__detail-btn {
    border: 1px solid #f2f2f3;
    height: 10rem;
    border-radius: 1rem 1rem;
    padding: 1rem 1rem;
  }
  .cart__detail-btn .cart-btn-price {
    display: flex;
    font-family: "notoarabic";
    font-size: 1rem;
    margin-bottom: 1rem;
    margin-left: auto;
  }
}

.hidden-trash {
  display: none;
}

.cart-mobile-title {
  display: none;
}
@media only screen and (max-width: 768px) {
  .cart-mobile-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    margin-top: -45rem;
    width: 100%;
  }
  .cart-mobile-title h2 {
    font-family: "notoarabic";
    font-size: 1.4rem;
  }
  .cart-mobile-title .cart-mobile-title-arrow {
    width: 2rem;
    height: 2rem;
    transform: rotate(180deg);
    cursor: pointer;
  }
  .cart-mobile-title .cart-mobile-title-trash {
    width: 2rem;
    height: 2rem;
  }
}

input[id=delivery-online],
input[id=delivery-offline],
input[id=payment-online],
input[id=payment-offline],
input[id=adress],
input[id=adress1],
input[id=ayande],
input[id=torism],
input[id=mellat],
input[id=saman] {
  display: none;
}

input[id=adress]:checked ~ label[for=adress],
input[id=adress1]:checked ~ label[for=adress1],
input[id=adress2]:checked ~ label[for=adress2],
input[id=adress3]:checked ~ label[for=adress3],
input[id=adress4]:checked ~ label[for=adress4],
input[id=adress5]:checked ~ label[for=adress5] {
  border: 1px solid #b19276;
}

label[for=delivery-online] {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  margin-right: 2rem;
  cursor: pointer;
  font-family: "notoarabic";
}
label[for=delivery-online] span {
  font-size: 1rem;
}
label[for=delivery-online]::after {
  position: absolute;
  content: "";
  top: 0.5rem;
  right: -2.3rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50% 50%;
  border: 1px solid #f2f2f3;
}

label[for=delivery-offline] {
  position: relative;
  margin-right: 4rem;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  cursor: pointer;
  font-family: "notoarabic";
}
label[for=delivery-offline] span {
  font-size: 1rem;
}
label[for=delivery-offline]::after {
  position: absolute;
  content: "";
  top: 0.5rem;
  right: -2.3rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50% 50%;
  border: 1px solid #f2f2f3;
}

input[id=delivery-online]:checked ~ .cart__delivery-change > label[for=delivery-online]::before {
  position: absolute;
  content: "";
  top: 0.6rem;
  right: -2.1rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50% 50%;
  background-color: #b19276;
}

input[id=delivery-offline]:checked ~ .cart__delivery-change > label[for=delivery-offline]::before {
  position: absolute;
  content: "";
  top: 0.6rem;
  right: -2.1rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50% 50%;
  background-color: #b19276;
}

input[id=delivery-offline]:checked ~ .cart__address-items[data-address=online],
input[id=delivery-offline]:checked ~ .cart__delivery-title[data-address=online],
input[id=delivery-offline]:checked ~ .cart__add-time[data-timer=online],
input[id=delivery-offline]:checked ~ .cart__delivery-title[data-timer=online],
input[id=delivery-offline]:checked ~ .cart__address[data-address=online] {
  display: none;
}

.cart__delivery-title[data-store=offline] {
  display: none;
}

input[id=delivery-offline]:checked ~ .cart__delivery-title[data-store=offline],
input[id=delivery-offline]:checked ~ .cart__address-store[data-store=offline] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
@media only screen and (max-width: 768px) {
  input[id=delivery-offline]:checked ~ .cart__delivery-title[data-store=offline],
  input[id=delivery-offline]:checked ~ .cart__address-store[data-store=offline] {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
  }
}

label[for=payment-online] {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  margin-right: 2rem;
  cursor: pointer;
  font-family: "notoarabic";
}
label[for=payment-online] span {
  font-size: 1rem;
}
label[for=payment-online]::after {
  position: absolute;
  content: "";
  top: 0.5rem;
  right: -2.3rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50% 50%;
  border: 1px solid #f2f2f3;
}

label[for=payment-offline] {
  position: relative;
  margin-right: 4rem;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  cursor: pointer;
  font-family: "notoarabic";
}
label[for=payment-offline] span {
  font-size: 1rem;
}
label[for=payment-offline]::after {
  position: absolute;
  content: "";
  top: 0.5rem;
  right: -2.3rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50% 50%;
  border: 1px solid #f2f2f3;
}

input[id=payment-online]:checked ~ .cart__payment-change > label[for=payment-online]::before {
  position: absolute;
  content: "";
  top: 0.6rem;
  right: -2.1rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50% 50%;
  background-color: #b19276;
}

input[id=payment-offline]:checked ~ .cart__payment-change > label[for=payment-offline]::before {
  position: absolute;
  content: "";
  top: 0.6rem;
  right: -2.1rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50% 50%;
  background-color: #b19276;
}

input[id=ayande]:checked ~ label[for=ayande],
input[id=torism]:checked ~ label[for=torism],
input[id=mellat]:checked ~ label[for=mellat],
input[id=saman]:checked ~ label[for=saman] {
  border: 2px solid #b19276;
  border-radius: 1rem 1rem;
}

input[id=payment-offline]:checked ~ .cart__gateway {
  display: none;
}

input[id=payment-offline]:checked ~ .cart__payment-offline {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
}

.factor {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 40rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
@media only screen and (max-width: 768px) {
  .factor {
    margin-top: -60rem;
  }
}

.factor-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}

.factor-text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 2rem;
}
.factor-text p {
  font-family: "notoarabic";
  font-size: 1.7rem;
}

.factor-transaction {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 8rem;
  margin-top: 2.5rem;
}
.factor-transaction p {
  font-family: "notoarabic";
  font-size: 1.2rem;
}
.factor-transaction a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  font-family: "notoarabic";
  font-size: 1.2rem;
  color: #b19276;
}
.factor-transaction a img {
  width: 2rem;
  height: 2rem;
  margin-left: 0.5rem;
}

.factor-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 2rem;
}
@media only screen and (max-width: 768px) {
  .factor-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
  }
}

.profile {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 4rem;
  margin-bottom: 4rem;
}
@media only screen and (max-width: 768px) {
  .profile {
    margin-top: -50rem;
  }
}
.profile__menu {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 30%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .profile__menu {
    display: none;
  }
}
.profile__content {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding: 1rem 1rem;
  margin-right: 1rem;
  border: 1px solid #f2f2f3;
  border-radius: 1rem 1rem;
}
@media only screen and (max-width: 768px) {
  .profile__content {
    display: none;
  }
}
.profile__content-products {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  padding: 1rem 1rem;
  margin-right: 1rem;
  margin-top: 0.5rem;
}
@media only screen and (max-width: 768px) {
  .profile__content-products {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.profile__items {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding: 1rem 1rem;
  margin-right: 1rem;
  border: 1px solid #f2f2f3;
  border-radius: 1rem 1rem;
}
@media only screen and (max-width: 768px) {
  .profile__items {
    border: none;
    margin-top: -10rem;
  }
}
.profile__items .profile-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 40rem;
}
.profile__items .profile-empty svg {
  margin-top: 2rem;
}
.profile__items .profile-empty p {
  margin-top: 2rem;
  font-family: "notoarabic";
  margin-bottom: 2rem;
}
.profile__items .profile-address {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.profile__items .profile-address .profile-address-item {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding: 1rem 1rem;
  border: 1px solid #f2f2f3;
  border-radius: 1rem 1rem;
  margin-top: 0.5rem;
}
.profile__items .profile-address .profile-address-item .profile-address-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.profile__items .profile-address .profile-address-item .profile-address-content span {
  font-family: "notoarabic";
}
.profile__items .profile-address .profile-address-item .profile-address-social {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 0.5rem;
}
.profile__items .profile-address .profile-address-item .profile-address-social .profile-social-last-child {
  margin-right: 1rem;
}
.profile__items .profile-address .profile-address-item-btn {
  display: none;
}
@media only screen and (max-width: 768px) {
  .profile__items .profile-address .profile-address-item-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin-top: 2rem;
  }
}
.profile__forms {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 2rem;
}
@media only screen and (max-width: 768px) {
  .profile__forms {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.profile__menu-user {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 6rem;
  border: 1px solid #f2f2f3;
  padding: 1rem 1rem;
  border-radius: 0.7rem 0.7rem;
}
.profile__menu-user .profile-user-icon {
  width: auto;
  height: auto;
  margin-left: 0.5rem;
}
.profile__menu-user .profile-user-text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: auto;
  height: auto;
}
.profile__menu-user .profile-user-text p {
  font-family: "notoarabic";
  font-size: 1rem;
  font-weight: 100;
  height: 1.5rem;
}
.profile__menu-items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 2rem;
  border: 1px solid #f2f2f3;
  border-radius: 0.7rem 0.7rem;
  padding: 1rem 1rem;
}
.profile__menu-items .profile-menu-item {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 3rem;
  margin-top: 1rem;
  padding: 1rem 1rem;
}
.profile__menu-items .profile-menu-item .profile-menu-item-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
}
.profile__menu-items .profile-menu-item .profile-menu-item-icon svg {
  margin-left: 0.5rem;
}
.profile__menu-items .profile-menu-item .profile-menu-item-text {
  font-family: "notoarabic";
  color: black;
}
.profile__menu-items .profile-menu-item .profile-menu-item-text-exit {
  font-family: "notoarabic";
  color: red;
}
.profile__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 6rem;
  border-bottom: 1px solid #f2f2f3;
  font-family: "notoarabic";
  font-size: 1rem;
  font-weight: 100;
}
@media only screen and (max-width: 768px) {
  .profile__title {
    width: 60%;
  }
}
.profile__title .profile-back {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  cursor: pointer;
}
@media only screen and (min-width: 768px) {
  .profile__title .profile-back {
    display: none;
  }
}
.profile__title .profile-edit-information-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  color: #b19276;
  font-family: "notoarabic";
}
.profile__title .profile-edit-information-icon svg {
  margin-left: 0.5rem;
}
.profile__title-order {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 6rem;
  border-bottom: 1px solid #f2f2f3;
  font-family: "notoarabic";
  font-size: 1rem;
  font-weight: 100;
}
@media only screen and (max-width: 768px) {
  .profile__title-order {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    height: 15rem;
  }
}
.profile__title-order .profile-title-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  margin-bottom: 2rem;
}
@media only screen and (max-width: 768px) {
  .profile__title-order .profile-title-item {
    width: 60%;
  }
}
.profile__title-order .profile-title-item .profile-back {
  display: none;
}
@media only screen and (max-width: 768px) {
  .profile__title-order .profile-title-item .profile-back {
    display: flex;
  }
}
@media only screen and (max-width: 768px) {
  .profile__title-order .profile-title-item {
    margin-bottom: 2rem;
  }
}
.profile__title-order .profile-title-item .profile-add-address {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  color: #b19276;
  font-family: "notoarabic";
  cursor: pointer;
}
@media only screen and (max-width: 768px) {
  .profile__title-order .profile-title-item .profile-add-address {
    display: none;
  }
}
.profile__title-order .profile-title-item .profile-add-address svg {
  margin-left: 0.5rem;
  cursor: pointer;
}
.profile__title-order .profile-title-sort {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30rem;
  border: 1px solid #f2f2f3;
  height: 4rem;
  border-radius: 0.5rem 0.5rem;
}
@media only screen and (max-width: 768px) {
  .profile__title-order .profile-title-sort {
    width: 100%;
  }
}
.profile__title-order .profile-title-sort label {
  position: absolute;
  font-family: "notoarabic";
  top: -1.2rem;
  right: 0.5rem;
  background-color: white;
}
.profile__title-order .profile-title-sort select {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 0.5rem 0.5rem;
  border: none;
  outline: none;
  font-family: "notoarabic";
}
.profile__information {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 2rem;
}
.profile__information .profile-tab-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 50%;
  height: 4rem;
}
.profile__information .profile-tab-item p {
  font-family: "notoarabic";
  font-size: 1.2rem;
}

.profilemobilemenu {
  display: none;
}
@media only screen and (max-width: 768px) {
  .profilemobilemenu {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin-top: -55rem;
    margin-bottom: 50rem;
  }
  .profilemobilemenu__user {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: row;
    width: 100%;
    height: 7rem;
    border: 1px solid #f2f2f3;
    border-radius: 1rem 1rem;
    padding: 1rem 1rem;
  }
  .profilemobilemenu__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
  }
  .profilemobilemenu__text {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    width: auto;
    height: auto;
    margin-right: 1rem;
  }
  .profilemobilemenu__text p {
    font-family: "notoarabic";
    height: 1.7rem;
    font-size: 1.1rem;
  }
  .profilemobilemenu__edit {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    height: auto;
    width: auto;
    margin-right: auto;
    font-family: "notoarabic";
    font-size: 1.1rem;
    color: #b19276;
  }
  .profilemobilemenu__edit svg {
    margin-left: 0.5rem;
  }
  .profilemobilemenu__items {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: auto;
    border: 1px solid #f2f2f3;
    border-radius: 1rem 1rem;
    margin-top: 1rem;
    padding: 1rem 1rem;
  }
  .profilemobilemenu__items .profile-menu-mobile {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: row;
    width: 100%;
    height: 4rem;
    border-bottom: 1px solid #f2f2f3;
    color: black;
    font-family: "notoarabic";
  }
  .profilemobilemenu__items .profile-menu-mobile svg {
    margin-left: 0.5rem;
  }
  .profilemobilemenu__items .profile-menu-mobile-exit {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: row;
    width: 100%;
    height: 4rem;
    color: red;
    font-family: "notoarabic";
  }
  .profilemobilemenu__items .profile-menu-mobile-exit svg {
    margin-left: 0.5rem;
  }
}

.menu-active {
  height: 3rem;
  border-radius: 0.4rem 0.4rem;
  border-right: 2px solid black;
  background-color: #fafafa;
}

.blogheader {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 40rem;
  background-color: #f7f7f8;
  margin-top: 4rem;
  margin-bottom: 4rem;
}
@media only screen and (max-width: 768px) {
  .blogheader {
    height: auto;
    background-color: white;
  }
}
.blogheader__context {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 30%;
  height: auto;
  padding-left: 1rem;
}
@media only screen and (max-width: 1199px) {
  .blogheader__context {
    width: 50%;
  }
}
@media only screen and (max-width: 993px) {
  .blogheader__context {
    width: 50%;
  }
}
@media only screen and (max-width: 768px) {
  .blogheader__context {
    width: 100%;
    margin-top: 6rem;
  }
}
.blogheader__context h1 {
  font-family: "notoarabic";
  line-height: 3.5rem;
}
.blogheader__context p {
  font-family: "notoarabic";
  font-size: 1.2rem;
  line-height: 2rem;
  margin-top: 2rem;
}
.blogheader__trand {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  margin-top: 1rem;
}
.blogheader__trand .blogheader-trand-first-child {
  margin-left: 1rem;
}
.blogheader__trand span {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "notoarabic";
  font-size: 1.1rem;
}
.blogheader__trand span svg {
  margin-left: 0.5rem;
}
.blogheader__img {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 40%;
  height: auto;
}
@media only screen and (max-width: 1199px) {
  .blogheader__img {
    width: 50%;
  }
}
@media only screen and (max-width: 768px) {
  .blogheader__img {
    width: 100%;
  }
}
.blogheader__img img {
  width: 50rem;
  height: 40rem;
  border-radius: 1rem 1rem;
  margin-top: 8rem;
}
@media only screen and (max-width: 1285px) {
  .blogheader__img img {
    width: 45rem;
    height: 35rem;
  }
}
@media only screen and (max-width: 993px) {
  .blogheader__img img {
    width: 40rem;
    height: 35rem;
  }
}
@media only screen and (max-width: 768px) {
  .blogheader__img img {
    margin-top: 0;
    width: 100%;
    height: 40rem;
  }
}

.blogdirect {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
@media only screen and (max-width: 768px) {
  .blogdirect {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
  }
}

.blogcategory {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 10rem;
  margin-bottom: 5rem;
}
.blogcategory__title {
  display: flex;
  justify-content: center;
  align-items: row;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.blogcategory__title h2 {
  font-family: "notoarabic";
}
.blogcategory__items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .blogcategory__items {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
.blogcategory__item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 60rem;
  height: 20rem;
}
@media only screen and (max-width: 768px) {
  .blogcategory__item {
    margin-top: 1rem;
    width: 100%;
  }
}
.blogcategory__img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
}
.blogcategory__img img {
  width: 30rem;
  height: 20rem;
  border-radius: 1rem 1rem;
}
@media only screen and (max-width: 1200px) {
  .blogcategory__img img {
    width: 25rem;
  }
}
@media only screen and (max-width: 994px) {
  .blogcategory__img img {
    width: 15rem;
  }
}
.blogcategory__text {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 1rem 1rem;
}
.blogcategory__text h3 {
  font-family: "notoarabic";
}
.blogcategory__trand {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  margin-top: 1rem;
}
.blogcategory__trand .blog-category-trand-girst-child {
  margin-left: 1rem;
}
.blogcategory__trand span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  font-family: "notoarabic";
  font-size: 1.1rem;
}
.blogcategory__trand span svg {
  margin-left: 0.5rem;
}
.blogcategory p {
  font-family: "notoarabic";
  font-size: 1.2rem;
  margin-top: 1rem;
}

.blogmain {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.blogmain__title {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-bottom: 2rem;
}
@media only screen and (max-width: 768px) {
  .blogmain__title {
    display: none;
  }
}
.blogmain__title h2 {
  font-family: "notoarabic";
}
.blogmain__title p {
  font-family: "notoarabic";
  font-size: 1.2rem;
}
.blogmain__title-mobile {
  display: none;
}
@media only screen and (max-width: 768px) {
  .blogmain__title-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
  }
  .blogmain__title-mobile h2 {
    font-family: "notoarabic";
  }
  .blogmain__title-mobile img {
    width: 2rem;
    height: 2rem;
    cursor: pointer;
  }
}
.blogmain__tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.blogmain__masonery-tab {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 75%;
  height: 4rem;
  background-color: #fafafa;
  padding: 1rem 1rem;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .blogmain__masonery-tab {
    width: 100%;
  }
}
.blogmain__masonery-tab label {
  font-family: "notoarabic";
  margin-left: 2rem;
  font-size: 1.1rem;
  cursor: pointer;
  white-space: nowrap;
}
@media only screen and (max-width: 452px) {
  .blogmain__masonery-tab label {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 410px) {
  .blogmain__masonery-tab label {
    font-size: 0.8rem;
  }
}
.blogmain__masonery-tab .blogmain-sort-tab {
  position: absolute;
  width: 4rem;
  height: 0.2rem;
  background-color: black;
  transition: all ease-in 0.3s;
}
.blogmain__sort {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25rem;
  height: 4rem;
  border: 1px solid #f2f2f3;
  border-radius: 0.5rem 0.5rem;
}
@media only screen and (max-width: 768px) {
  .blogmain__sort {
    display: none;
  }
}
.blogmain__sort select {
  width: 100%;
  height: 100%;
  border-radius: 0.5rem 0.5rem;
  border: none;
  outline: none;
}
.blogmain__items {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  margin-top: 3rem;
}
@media only screen and (max-width: 768px) {
  .blogmain__items {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.blogmain__item {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 30rem;
  height: auto;
  padding: 1rem 1rem;
  margin-top: 1rem;
  margin-left: 1rem;
}
.blogmain__item h3 {
  font-family: "notoarabic";
}
.blogmain__item p {
  font-family: "notoarabic";
  font-size: 1.1rem;
}
.blogmain__item img {
  width: 30rem;
  height: 30rem;
  border-radius: 1rem 1rem;
}
.blogmain__item .blogmain-tags {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.blogmain__item .blogmain-tags a {
  padding: 0.2rem 1rem;
  border-radius: 1rem 1rem;
  background-color: rgba(177, 146, 118, 0.2);
  margin-left: 0.5rem;
  color: #b19276;
  font-family: "notoarabic";
  font-size: 1.1rem;
}

input[id=all],
input[id=personaly],
input[id=week-mod],
input[id=desine-trand],
input[id=wash],
input[id=accessory],
input[id=form-fot] {
  display: none;
}

input[id=all]:checked ~ .blogmain__tab > .blogmain__masonery-tab > .blogmain-sort-tab {
  top: 3.7rem;
  right: 0.1rem;
}

input[id=personaly]:checked ~ .blogmain__tab > .blogmain__masonery-tab > .blogmain-sort-tab {
  top: 3.7rem;
  right: 5rem;
}
@media only screen and (max-width: 410px) {
  input[id=personaly]:checked ~ .blogmain__tab > .blogmain__masonery-tab > .blogmain-sort-tab {
    right: 4rem;
  }
}

input[id=week-mod]:checked ~ .blogmain__tab > .blogmain__masonery-tab > .blogmain-sort-tab {
  top: 3.7rem;
  right: 12rem;
}
@media only screen and (max-width: 410px) {
  input[id=week-mod]:checked ~ .blogmain__tab > .blogmain__masonery-tab > .blogmain-sort-tab {
    right: 10rem;
  }
}

input[id=desine-trand]:checked ~ .blogmain__tab > .blogmain__masonery-tab > .blogmain-sort-tab {
  top: 3.7rem;
  right: 18rem;
}
@media only screen and (max-width: 410px) {
  input[id=desine-trand]:checked ~ .blogmain__tab > .blogmain__masonery-tab > .blogmain-sort-tab {
    right: 15rem;
  }
}

input[id=wash]:checked ~ .blogmain__tab > .blogmain__masonery-tab > .blogmain-sort-tab {
  top: 3.7rem;
  right: 27rem;
}
@media only screen and (max-width: 410px) {
  input[id=wash]:checked ~ .blogmain__tab > .blogmain__masonery-tab > .blogmain-sort-tab {
    right: 22rem;
  }
}

input[id=accessory]:checked ~ .blogmain__tab > .blogmain__masonery-tab > .blogmain-sort-tab {
  top: 3.7rem;
  right: 35.5rem;
}
@media only screen and (max-width: 410px) {
  input[id=accessory]:checked ~ .blogmain__tab > .blogmain__masonery-tab > .blogmain-sort-tab {
    right: 28rem;
  }
}

input[id=form-fot]:checked ~ .blogmain__tab > .blogmain__masonery-tab > .blogmain-sort-tab {
  top: 3.7rem;
  right: 40.5rem;
}

input[id=personaly]:checked ~ .blogmain__items > .blogmain__item:not([data-blog=personaly]),
input[id=week-mod]:checked ~ .blogmain__items > .blogmain__item:not([data-blog=week-mod]),
input[id=desine-trand]:checked ~ .blogmain__items > .blogmain__item:not([data-blog=desine-trand]),
input[id=wash]:checked ~ .blogmain__items > .blogmain__item:not([data-blog=wash]),
input[id=accessory]:checked ~ .blogmain__items > .blogmain__item:not([data-blog=accessory]),
input[id=form-fot]:checked ~ .blogmain__items > .blogmain__item:not([data-blog=form-fot]) {
  display: none;
}

.blogdetaill {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-bottom: 4rem;
}
@media only screen and (max-width: 768px) {
  .blogdetaill {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
  }
}
.blogdetaill__content {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 70%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .blogdetaill__content {
    width: 100%;
  }
}
.blogdetaill__content img {
  width: 100%;
  height: 50rem;
  border-radius: 1rem 1rem;
}
.blogdetaill__content p {
  font-family: "notoarabic";
  margin-top: 1rem;
}
.blogdetaill__left {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 30%;
  height: auto;
  padding: 1rem 1rem;
  margin-right: 3rem;
}
@media only screen and (max-width: 768px) {
  .blogdetaill__left {
    width: 100%;
  }
}
.blogdetaill__fother {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 1rem;
}
.blogdetaill__fother p {
  font-size: 1rem;
}
.blogdetaill__fother-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
}
.blogdetaill__similar-blog {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.blogdetaill__similar-blog .blogdetaill-similar-blog-title {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.blogdetaill__similar-blog .blogdetaill-similar-blog-title h2 {
  font-family: "notoarabic";
}
.blogdetaill__similar-blog .blogdetaill-items {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.blogdetaill__similar-blog .blogdetaill-items .blogdetaill-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 1rem;
  border-radius: 1rem 1rem;
  border: 1px solid #f2f2f3;
}
.blogdetaill__similar-blog .blogdetaill-items .blogdetaill-item img {
  width: 10rem;
  height: 10rem;
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
}
.blogdetaill__similar-blog .blogdetaill-items .blogdetaill-item .blogdetaill-item-content {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: column;
  padding-right: 2rem;
}
.blogdetaill__similar-blog .blogdetaill-items .blogdetaill-item .blogdetaill-item-content h5 {
  font-family: "notoarabic";
  font-family: 1.4rem;
}
.blogdetaill__similar-blog .blogdetaill-items .blogdetaill-item .blogdetaill-item-content p {
  font-family: "notoarabic";
  margin-top: 2rem;
  font-size: 1.1rem;
  color: #85858d;
}
.blogdetaill__blog-content {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 3rem;
}
.blogdetaill__blog-content .blogdetaill-content-blog-title {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.blogdetaill__blog-content .blogdetaill-content-blog-title h2 {
  font-family: "notoarabic";
}
.blogdetaill__blog-content .blogdetaill-blog-content-items {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.blogdetaill__blog-content .blogdetaill-blog-content-items .blogdetaill-blog-content-item {
  display: flex;
  justify-content: space-evenly;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: 15rem;
  background-color: #f7f7f8;
  margin-top: 1rem;
  padding: 1rem 1rem;
  border-radius: 1rem 1rem;
}
.blogdetaill__blog-content .blogdetaill-blog-content-items .blogdetaill-blog-content-item .blogdetaill-blog-content-tags {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.blogdetaill__blog-content .blogdetaill-blog-content-items .blogdetaill-blog-content-item .blogdetaill-blog-content-tags span {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "notoarabic";
  font-size: 1.1rem;
  color: #85858d;
}
.blogdetaill__blog-content .blogdetaill-blog-content-items .blogdetaill-blog-content-item .blogdetaill-blog-content-tags span svg {
  margin-left: 0.5rem;
}
.blogdetaill__blog-content .blogdetaill-blog-content-items .blogdetaill-blog-content-item .blogdetaill-blog-content-tags .blog-detaill-content-first-child {
  margin-left: 2rem;
}
.blogdetaill__blog-content .blogdetaill-blog-content-items .blogdetaill-blog-content-item h4 {
  font-family: "notoarabic";
  font-size: 1rem;
}
.blogdetaill__blog-content .blogdetaill-blog-content-items .blogdetaill-blog-content-item p {
  font-family: "notoarabic";
  font-size: 1rem;
  color: #85858d;
}
.blogdetaill__blog-content .blogdetaill-blog-content-items .blogdetaill-blog-content-item a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "notoarabic";
  font-size: 1rem;
  color: black;
}
.blogdetaill__blog-content .blogdetaill-blog-content-items .blogdetaill-blog-content-item a svg {
  margin-right: 0.5rem;
}
.blogdetaill__tags {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 3rem;
}
.blogdetaill__tags .blog-detaill-tags-title {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.blogdetaill__tags .blog-detaill-tags-title h2 {
  font-family: "notoarabic";
}
.blogdetaill__tags .blog-detaill-tags-items {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
}
.blogdetaill__tags .blog-detaill-tags-items a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem 0.5rem;
  border: 1px solid #f2f2f3;
  color: black;
  margin-top: 0.5rem;
  margin-left: 0.5rem;
  font-family: "notoarabic";
  font-size: 1rem;
}

.blog-detaill-title {
  margin-top: 3rem;
}
.blog-detaill-title h1 {
  font-family: "notoarabic";
}

.blog-detaill-comments {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}

.about {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 2rem;
  margin-bottom: 3rem;
}
@media only screen and (max-width: 768px) {
  .about {
    display: none;
  }
}
.about__content {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.about__text {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 70%;
  height: auto;
  padding-left: 2rem;
}
@media only screen and (max-width: 992px) {
  .about__text {
    width: 60%;
  }
}
.about__text p {
  font-family: "notoarabic";
  font-size: 1.2rem;
}
.about__img {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: row;
  width: 30%;
  height: auto;
}
.about__img .about-img-first {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: auto;
  height: auto;
  padding: 0.5rem 0.5rem;
  margin-bottom: 2rem;
}
.about__img .about-img-first img {
  width: 15rem;
  height: 15rem;
  padding: 0.5rem 0.5rem;
  border-radius: 1rem 1rem;
}
.about__img .about-img-last {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: auto;
  height: auto;
  padding: 0.5rem 0.5rem;
  margin-top: 2rem;
}
.about__img .about-img-last img {
  width: 15rem;
  height: 30rem;
  border-radius: 1rem 1rem;
}

.about-title {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.about-title h1 {
  font-family: "notoarabic";
}
.about-title h1 span {
  color: #b19276;
}

.about-prperty {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 2rem;
  font-family: "notoarabic";
  font-size: 1.2rem;
}
.about-prperty svg {
  margin-left: 1rem;
}

.aboutmobile {
  display: none;
}
@media only screen and (max-width: 768px) {
  .aboutmobile {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin-top: 2rem;
    margin-bottom: 4rem;
  }
  .aboutmobile__content {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    width: 100%;
    height: auto;
  }
  .aboutmobile__content p {
    font-family: "notoarabic";
    font-size: 1.2rem;
    margin-bottom: 4rem;
  }
  .aboutmobile .aboutmobile-img {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    width: 100%;
    height: auto;
  }
  .aboutmobile .aboutmobile-img img {
    width: 100%;
    height: 30rem;
    border-radius: 1rem 1rem;
  }
}

.about-category-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 30rem;
  background-color: #f7f7f8;
  margin-top: 6rem;
  margin-bottom: 2rem;
}
@media only screen and (max-width: 768px) {
  .about-category-cover {
    height: auto;
    padding-bottom: 1rem;
    padding-top: 1rem;
  }
}

.about-category-items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .about-category-items {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
  }
}

.about-category-item {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 30rem;
  height: auto;
}
.about-category-item h3 {
  font-family: "notoarabic";
  font-size: 1.4rem;
}
.about-category-item p {
  font-family: "notoarabic";
  font-size: 1.1rem;
  line-height: 2rem;
}
@media only screen and (max-width: 768px) {
  .about-category-item {
    margin-top: 2rem;
    width: 100%;
  }
}

.about-category-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  background-color: white;
  border-radius: 0.5rem 0.5rem;
}

.aboutinfografi {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 10rem;
  margin-bottom: 2rem;
}
@media only screen and (max-width: 768px) {
  .aboutinfografi {
    display: none;
  }
}
.aboutinfografi__title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.aboutinfografi__title h2 {
  font-family: "notoarabic";
}
.aboutinfografi__title h2 span {
  color: #b19276;
}
.aboutinfografi__title p {
  font-family: "notoarabic";
}
.aboutinfografi__content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 4rem;
}

.aboutinfografimobile {
  display: none;
  width: 100%;
  height: auto;
  margin-top: 10rem;
  margin-bottom: 2rem;
}
@media only screen and (max-width: 768px) {
  .aboutinfografimobile {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
.aboutinfografimobile__title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.aboutinfografimobile__title h2 {
  font-family: "notoarabic";
}
.aboutinfografimobile__title h2 span {
  color: #b19276;
}
.aboutinfografimobile__title p {
  font-family: "notoarabic";
}
.aboutinfografimobile__content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 4rem;
}

.aboutinfografi-range {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  width: 5rem;
  height: 50rem;
}

.aboutinfografi-circle-orange {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50% 50%;
  background-color: #b19276;
  color: white;
  font-family: "notoarabic";
}

.aboutinfografi-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50% 50%;
  background-color: #f7f7f8;
  color: black;
  font-family: "notoarabic";
}

.aboutinfografi-line {
  position: absolute;
  height: 50rem;
  border: 0.1rem dotted #b19276;
  z-index: -50;
}

.aboutinfografi-left,
.aboutinfografi-right {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  height: 50rem;
  width: auto;
}

.aboutinfografi-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 8rem;
}
@media only screen and (max-width: 768px) {
  .aboutinfografi-box {
    margin-top: 0.5rem;
  }
}

.aboutinfografi-label-right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: auto;
  height: auto;
  padding: 2rem 2rem;
  background-color: #f7f7f8;
  margin-right: 2rem;
  border-radius: 1rem 1rem;
  font-family: "notoarabic";
}
@media only screen and (max-width: 768px) {
  .aboutinfografi-label-right {
    font-size: 1.1rem;
  }
}
.aboutinfografi-label-right::after {
  position: absolute;
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background-color: #f7f7f8;
  right: -0.5rem;
  transform: rotate(-45deg);
  z-index: -50;
}

.aboutinfografi-label-left {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: auto;
  height: auto;
  padding: 2rem 2rem;
  background-color: #f7f7f8;
  margin-left: 2rem;
  border-radius: 1rem 1rem;
  font-family: "notoarabic";
}
.aboutinfografi-label-left::after {
  position: absolute;
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background-color: #f7f7f8;
  left: -0.5rem;
  transform: rotate(-45deg);
  z-index: -50;
}

.about-faq-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  background-color: #f7f7f8;
  margin-top: 2rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.aboutfaq {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: row;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .aboutfaq {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
.aboutfaq__text {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 50%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .aboutfaq__text {
    width: 100%;
  }
}
.aboutfaq__text h3 {
  font-family: "notoarabic";
  font-size: 1.5rem;
}
.aboutfaq__text p {
  font-family: "notoarabic";
  font-size: 1.1rem;
}
.aboutfaq__faq {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 50%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .aboutfaq__faq {
    width: 100%;
  }
}

.contactUs {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: row;
  width: 100%;
  height: 50rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
@media only screen and (max-width: 768px) {
  .contactUs {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: auto;
  }
}
.contactUs__content {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: column;
  width: 60%;
  height: 50rem;
}
@media only screen and (max-width: 768px) {
  .contactUs__content {
    width: 100%;
  }
}
.contactUs__content .contact-us-text {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.contactUs__content .contact-us-text h1 {
  font-family: "notoarabic";
}
.contactUs__content .contact-us-text h1 span {
  color: #b19276;
}
.contactUs__content .contact-us-text p {
  font-family: "notoarabic";
  font-size: 1.1rem;
}
.contactUs__content .contact-us-icon {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
}
.contactUs__content .contact-us-icon .contact-us-item {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 40%;
  height: 8rem;
  background-color: #f7f7f8;
  border-radius: 1rem 1rem;
  margin: 1rem 0 0 2rem;
  padding: 1rem 1rem;
}
@media only screen and (max-width: 768px) {
  .contactUs__content .contact-us-icon .contact-us-item {
    width: 100%;
  }
}
.contactUs__content .contact-us-icon .contact-us-item .contact-us-item-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  background-color: white;
  border-radius: 0.5rem 0.5rem;
  margin-left: 1rem;
}
.contactUs__content .contact-us-icon .contact-us-item .contact-us-item-text {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.contactUs__content .contact-us-icon .contact-us-item .contact-us-item-text h4 {
  font-family: "notoarabic";
  font-size: 1.1rem;
}
.contactUs__content .contact-us-icon .contact-us-item .contact-us-item-text p {
  font-family: "notoarabic";
  font-size: 1.1rem;
}
.contactUs__content .contact-us-social {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.contactUs__content .contact-us-social .contact-us-social-title {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.contactUs__content .contact-us-social .contact-us-social-title h3 {
  font-family: "notoarabic";
}
.contactUs__content .contact-us-social .contact-us-social-items {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.contactUs__content .contact-us-social .contact-us-social-items .contact-us-social-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem 0.5rem;
  border: 1px solid #b19276;
  margin: 0 1rem 0 0;
}
.contactUs__form {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: column;
  width: 30%;
  height: 50rem;
  border: 1px solid #f2f2f3;
  border-radius: 1rem 1rem;
  padding: 1rem 1rem;
}
@media only screen and (max-width: 1000px) {
  .contactUs__form {
    width: 40%;
  }
}
@media only screen and (max-width: 768px) {
  .contactUs__form {
    width: 100%;
    margin-top: 5rem;
  }
}
.contactUs__form .contact-us-title {
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  height: 4rem;
}
.contactUs__form .contact-us-title h4 {
  font-family: "notoarabic";
}
.contactUs__form .contact-us-inputs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.contactUs__form .contact-us-inputs input {
  width: 100%;
  height: 5rem;
  border: 1px solid #f2f2f3;
  border-radius: 1rem 1rem;
  padding-right: 2rem;
  outline: none;
}
.contactUs__form .contact-us-inputs input::-moz-placeholder {
  font-family: "notoarabic";
}
.contactUs__form .contact-us-inputs input::placeholder {
  font-family: "notoarabic";
}
.contactUs__form .contact-us-inputs textarea {
  width: 100%;
  height: 20rem;
  border: 1px solid #f2f2f3;
  border-radius: 1rem 1rem;
  padding-right: 2rem;
  padding-top: 2rem;
  outline: none;
  resize: none;
}
.contactUs__form .contact-us-inputs textarea::-moz-placeholder {
  font-family: "notoarabic";
}
.contactUs__form .contact-us-inputs textarea::placeholder {
  font-family: "notoarabic";
}

.contact-us-map {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40rem;
  margin-top: 8rem;
  margin-bottom: 4rem;
  border-radius: 1rem 1rem;
}
.contact-us-map iframe {
  width: 100%;
  height: 100%;
  border-radius: 1rem 1rem;
}

.note-found {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin-top: 10rem;
  margin-bottom: 10rem;
}
@media only screen and (max-width: 768px) {
  .note-found {
    margin-top: -50rem;
  }
}
.note-found p {
  font-family: "notoarabic";
  margin-top: 4rem;
}

.regalheader {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 8rem;
  border-bottom: 1px solid #e7e7eb;
}
@media only screen and (max-width: 768px) {
  .regalheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
  }
}

.regal-menubar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 80%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .regal-menubar {
    display: none;
    width: 50%;
  }
}
.regal-menubar a {
  margin: 0 2rem 0;
  color: black;
  font-family: "notoarabic";
  font-size: 1.3rem;
}

.regal-logo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 20%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .regal-logo {
    width: 50%;
  }
}

.regal-logo-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 0.8rem;
  font-family: "notoarabic";
  font-weight: 100;
}
.regal-logo-item svg {
  margin-bottom: 0.3rem;
}

.berger-menu {
  display: none;
}
.berger-menu svg {
  cursor: pointer;
}
@media only screen and (max-width: 768px) {
  .berger-menu {
    display: flex;
  }
}

.regal-menu-mobile {
  display: none;
}
@media only screen and (max-width: 768px) {
  .regal-menu-mobile {
    position: fixed;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    width: 100%;
    height: 100%;
    top: 0;
    right: -100rem;
    bottom: 0;
    left: 0;
    background-color: white;
    padding: 2rem 2rem;
    transition: all ease-in 0.3s;
    box-shadow: 0 0 0.8rem rgb(192, 192, 192);
  }
}

.regal-menu-mobile-close {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.regal-menu-mobile-item {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.regal-menu-mobile-item a {
  color: black;
  margin-top: 2rem;
  font-family: "notoarabic";
}

.regal-menu-mobile-active {
  right: 0;
  transition: all ease-in 0.3s;
}

.regal-cover-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 60rem;
  background-color: #f3eee8;
  margin-top: 1rem;
}
@media only screen and (max-width: 768px) {
  .regal-cover-banner {
    height: auto;
  }
}

.regal-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .regal-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: 2rem;
  }
}

.regal-banner-text {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 60%;
  height: 50rem;
}
.regal-banner-text h1 {
  font-family: "notoarabic";
  font-size: 4rem;
  color: black;
  padding-left: 2rem;
}
.regal-banner-text p {
  font-family: "notoarabic";
  font-size: 1.2rem;
  color: black;
}

.regal-btn-group {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 4rem;
}

.regal-banner-img {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 40%;
  height: auto;
}

.regal-banner-img-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 50rem;
  border-radius: 1rem 1rem;
  background-color: white;
}

.regal-banner-circle {
  display: flex;
  justify-content: end;
  align-items: end;
  flex-direction: row;
  width: 90%;
  height: auto;
}
.regal-banner-circle span {
  width: 0.7rem;
  height: 0.7rem;
  background-color: #f3eee8;
  margin-left: 0.3rem;
  border-radius: 50% 50%;
}

.regal-banner-svg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 4rem;
  border-radius: 5rem 5rem;
  background-color: black;
}

.regal-banner-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  height: 90%;
}
.regal-banner-img img {
  width: 100%;
  height: 100%;
}

.regal-property {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 6rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.regal-property h5 {
  font-family: "notoarabic";
  font-size: 1.1rem;
  color: black;
}

.regal-property-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.regal-property-item span {
  font-family: "notoarabic";
  font-size: 1.3rem;
  color: black;
}

.regal-info-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40rem;
  background-color: #211d1a;
  margin-top: 2rem;
}
@media only screen and (max-width: 768px) {
  .regal-info-cover {
    height: auto;
    padding: 2rem 2rem;
  }
}

.regal-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .regal-info {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}

.regal-info-text {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 40%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .regal-info-text {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
.regal-info-text h2 {
  font-family: "notoarabic";
  color: white;
  font-size: 3rem;
}
.regal-info-text p {
  font-family: "notoarabic";
  color: #a98c74;
  font-size: 1.3rem;
  margin-top: 3rem;
}

.regal-info-items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 40%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .regal-info-items {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 3rem;
  }
}

.regal-info-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 10rem;
  height: 10rem;
  border-radius: 0.5rem 0.5rem;
  background-color: #3a2f29;
  margin-left: 1rem;
}
@media only screen and (max-width: 768px) {
  .regal-info-item {
    width: 100%;
    margin-top: 1rem;
  }
}
.regal-info-item h5 {
  color: #a98c74;
  font-family: "notoarabic";
  font-size: 2.5rem;
}
.regal-info-item p {
  font-family: "notoarabic";
  font-size: 1.1rem;
  color: white;
}

.regal-service-property-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  padding: 2rem 0;
  background-color: #f7f4ef;
}

.regal-service-title {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: 5rem;
}
.regal-service-title h2 {
  font-family: "notoarabic";
}

.regal-service-items {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
}

.regal-service-item {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 30rem;
  height: 15rem;
  border-radius: 1rem 1rem;
  background-color: white;
  margin-top: 4rem;
  margin-left: 4rem;
  padding: 2rem 2rem;
}
@media only screen and (max-width: 768px) {
  .regal-service-item {
    width: 100%;
  }
}

.regal-service-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  background-color: #a98c74;
  border-radius: 50% 50%;
}

.regal-service-text {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 2rem;
}
.regal-service-text h4 {
  font-family: "notoarabic";
}
.regal-service-text p {
  font-family: "notoarabic";
}

.regal-banner-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 40rem;
  background-color: #a98c74;
}

.regal-banner-main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 40rem;
}
.regal-banner-main h2 {
  font-family: "notoarabic";
}
.regal-banner-main p {
  font-family: "notoarabic";
  margin-top: 3rem;
}

.regal-fother-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 20rem;
  background-color: #211d1a;
}

.regal-fother {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}

.regal-fother-link,
.regal-fother-contact-us {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: auto;
  height: auto;
}
.regal-fother-link h6,
.regal-fother-contact-us h6 {
  font-family: "notoarabic";
  color: white;
}
.regal-fother-link p,
.regal-fother-contact-us p {
  font-family: "notoarabic";
  color: #a98c74;
  font-size: 1.1rem;
}

.regal-licence {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: 3rem;
  border-top: 1px solid #f2f2f3;
  margin-top: 4rem;
}
.regal-licence p {
  color: #a98c74;
  margin-top: 1rem;
}

.regal-slider-items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 8rem;
  margin-bottom: 5rem;
}

.regal-slider-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: auto;
  height: auto;
  border-radius: 1rem 1rem;
  margin-left: 2rem;
  border: 1px solid #f2f2f3;
  cursor: pointer;
}
.regal-slider-item::after {
  transition: all ease-in 0.3s;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  z-index: 100;
  border-radius: 1rem 1rem;
  transform-origin: right;
  transform: scale(0, 1);
  background-color: rgba(169, 140, 116, 0.4039215686);
}
.regal-slider-item p {
  transform: scale(0);
  display: none;
}
.regal-slider-item a {
  display: none;
  transform: scale(0);
}
.regal-slider-item:hover::after {
  transform: scale(1, 1);
}
.regal-slider-item:hover P {
  display: flex;
  position: absolute;
  top: 40%;
  right: 40%;
  color: white;
  transform: scale(1);
  font-family: "notoarabic";
  z-index: 150;
  font-size: 1.5rem;
}
.regal-slider-item:hover a {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 37%;
  color: white;
  transform: scale(1);
  font-family: "notoarabic";
  z-index: 150;
  font-size: 1.5rem;
  width: 10rem;
  height: 5rem;
  background-color: black;
  border-radius: 5rem 5rem;
}
.regal-slider-item img {
  position: relative;
  width: 60rem;
  height: 50rem;
  border: 1px solid #f2f2f3;
  border-radius: 1rem 1rem;
}