* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-family: regularf;
}

@font-face {
  font-family: boldf;
  src: url(../fonts/NotoKufiArabic-Bold.ttf);
}
@font-face {
  font-family: regularf;
  src: url(../fonts/NotoKufiArabic-Regular.ttf);
}
@font-face {
  font-family: medf;
  src: url(../fonts/NotoKufiArabic-Medium.ttf);
}
@font-face {
  font-family: lightf;
  src: url(../fonts/NotoKufiArabic-Light.ttf);
}
.container {
  /* width: 80%; */
  margin: auto;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}

.ext {
  height: 300px;
  width: 100%;
  background-color: #4e2e75;
}

.main-whole {
  width: 100%;
  background-color: #F5F5F5;
  /* padding: 29px 0px 10px; */
}
.main-whole .btn {
  padding: 0px;
}
.main-whole .arrow  {
  margin-bottom: 33px;
}
.main-whole .arrow .fero {
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: rgba(0, 0, 0, 0.5);
}

.main-whole .arrow .seco {
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
}

.main-whole h3 {
  font-weight: 700;
  font-size: 20px;
  line-height: 38px;
  margin-bottom: 28px;
}
.main-whole .content {
  display: flex;
  gap: 20px;
}
.main-whole .content .boxes {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  /* align-items: center;
  justify-content: space-between; */
  gap: 17px;
}

.main-whole .content .boxes .box {
  width: 32%;
  /* height: fit-content; */
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 6px;
  background: white;
  border-radius: 4px;
}
.main-whole .content .boxes .box .over {
  position: absolute;
  top: 20px;
  right: 20px;
  /* width: 47px; */
  height: 36px;
  background: #F04726;
  border-radius: 3px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-whole .content .boxes .box img {
  height: 231px;
  width: 100%;
  margin-bottom: 22px;
}
.main-whole .content .boxes .box .part2 {
  display: flex;
  padding: 10px;

}
.main-whole .content .boxes .box .part2 p {
  width: 80%;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
}
.main-whole .content .boxes .box .part2 span .fa {
  color: #F4C01E;
  line-height: 24px;
}
.main-whole .content .boxes .box .part3 {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main-whole .content .boxes .box .part3 p {
  font-weight: 700;
  font-size: 16px;
}
.main-whole .content .boxes .box .part3 p span {
  font-weight: 400;
  font-size: 14px;
  text-decoration: line-through;
  color: rgba(0, 0, 0, 0.42);
}
.main-whole .content .boxes .box .part3 a {
  background-color: #4e2e75;
  color: #ffffff;
  font-weight: 400;
  font-size: 14px;
  padding: 11px 11px;
  border-radius: 5px;
  display: flex;
  gap: 7px;
}
.main-whole .content .boxes .box .part3 a i {
  color: #ffffff;
}
.main-whole .content .whole-side {
  /* position: fixed; */
  /* top: 50%; */
  /* left: 0; */
  /* transform: translateY(-50%); */
  /* overflow: auto; */

  /* here anddow */
  /* max-height:  calc(100vh - 96px); */
  /* position: sticky; */
  /* top: 96px; */
  width: 22%;
}
.main-whole .content .whole-side ul {
  display: flex;
  margin-bottom: 20px;
  flex-direction: column;
  gap: 20px;
}
.main-whole .content .whole-side ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(0, 0, 0, 0.6117647059);
}
.main-whole .content .whole-side ul li a {
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: rgba(0, 0, 0, 0.6117647059);
}
.main-whole .content .whole-side ul li a i.fas {
  margin-left: 5px;
  margin-right: 5px;
}
.main-whole .content .whole-side form {
  padding-right: 10px;
}
.main-whole .content .whole-side form .row > * {
  padding-right: 0px;
}
.main-whole .content .whole-side form .form-control {
  background-color: #FFFFFF;
}
.main-whole .content .whole-side form .row {
  margin-bottom: 20px;
}
.main-whole .content .whole-side form .row label {
  font-size: 18px;

  font-weight: 400;
}
.main-whole .content .whole-side form .row .check {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background-color: #F4C01E;
}
.main-whole .content .whole-side form .row .color-col {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
}

.main-whole .content .whole-side form .row .color-col .color-option {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-whole .content .whole-side form .row .color-col .color-option .color {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  margin-bottom: 5px;
}

/* .main-whole .content .whole-side form .row .color-col .color-option input.color-button {
  width: 20px;
  height: 20px;
  opacity: 0;
} */

/* Color-specific styles */
.main-whole .content .whole-side form .row .color-col .color-option .color-1 { background-color: #0077B5; }
.main-whole .content .whole-side form .row .color-col .color-option .color-2 { background-color: #141414; }
.main-whole .content .whole-side form .row .color-col .color-option .color-3 { background-color: #94c5df; }
.main-whole .content .whole-side form .row .color-col .color-option .color-4 { background-color: #074541; }
.main-whole .content .whole-side form .row .color-col .color-option .color-5 { background-color: #0077B5; }
.main-whole .content .whole-side form .row .color-col .color-option .color-6 { background-color: #95a0a6; }
.main-whole .content .whole-side form .row .color-col .color-option .color-7 { background-color: #044d15; }
.main-whole .content .whole-side form .row .color-col .color-option .color-8 { background-color: #330327; }


/*# sourceMappingURL=wholesale.css.map */