@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@font-face {
  font-family: Byekan;
  src: url(./style/fonts/BYekan.ttf), url(./style/fonts/BYekan.woff), url(./style/fonts/BYekan.woff2), url(./style/fonts/BYekan.eot);
}
html {
  direction: rtl;
  scrollbar-width: thin;
  scrollbar-color: #333 #666666;
}

* {
  font-family: Byekan;
}

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

h1 {
  font-size: 22px;
}

h2 {
  font-size: 20px;
}

h3 {
  font-size: 18px;
}

h4 {
  font-size: 16px;
}

h5 {
  font-size: 14px;
}

::selection {
  color: white;
  background-color: #666666;
}

.flex {
  display: flex;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.border-none {
  border: none;
}

.outline-none {
  outline: none;
}

.text-wrap {
  text-wrap: wrap;
}

.text-nowrap {
  text-wrap: nowrap;
}

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

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

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

.justify-flex-end {
  justify-content: flex-end;
}

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

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

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

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

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

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

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

.position-absolute {
  position: absolute;
}

.position-relative {
  position: relative;
}

.position-static {
  position: static;
}

.position-fixed {
  position: fixed;
}

.position-sticky {
  position: sticky;
}

.display-none {
  display: none;
}

.display-block {
  display: block;
}

.display-inline-block {
  display: inline-block;
}

.display-flex {
  display: flex;
}

.display-grid {
  display: grid;
}

.display-inline {
  display: inline;
}

.display-table {
  display: table;
}

.cursor-move {
  cursor: move;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-crosshair {
  cursor: crosshair;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-visible {
  overflow: visible;
}

.padding-1px {
  padding: 1px;
}

.padding-2px {
  padding: 2px;
}

.padding-3px {
  padding: 3px;
}

.padding-4px {
  padding: 4px;
}

.padding-5px {
  padding: 5px;
}

.padding-6px {
  padding: 6px;
}

.padding-7px {
  padding: 7px;
}

.padding-8px {
  padding: 8px;
}

.padding-9px {
  padding: 9px;
}

.padding-10px {
  padding: 10px;
}

.padding-11px {
  padding: 11px;
}

.padding-12px {
  padding: 12px;
}

.padding-13px {
  padding: 13px;
}

.padding-14px {
  padding: 14px;
}

.padding-15px {
  padding: 15px;
}

.padding-16px {
  padding: 16px;
}

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

.padding-2rem {
  padding: 2rem;
}

.padding-3rem {
  padding: 3rem;
}

.gap-1px {
  gap: 1px;
}

.gap-2px {
  gap: 2px;
}

.gap-3px {
  gap: 3px;
}

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

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

.gap-6px {
  gap: 6px;
}

.gap-7px {
  gap: 7px;
}

.gap-8px {
  gap: 8px;
}

.gap-9px {
  gap: 9px;
}

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

.gap-11px {
  gap: 11px;
}

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

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

.gap-14px {
  gap: 14px;
}

.gap-15px {
  gap: 15px;
}

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

.gap-1rem {
  gap: 1rem;
}

.gap-2rem {
  gap: 2rem;
}

.gap-3rem {
  gap: 3rem;
}

.radial-1px {
  border-radius: 1px;
}

.radial-2px {
  border-radius: 2px;
}

.radial-3px {
  border-radius: 3px;
}

.radial-4px {
  border-radius: 4px;
}

.radial-5px {
  border-radius: 5px;
}

.radial-6px {
  border-radius: 6px;
}

.radial-7px {
  border-radius: 7px;
}

.radial-8px {
  border-radius: 8px;
}

.radial-9px {
  border-radius: 9px;
}

.radial-10px {
  border-radius: 10px;
}

.radial-11px {
  border-radius: 11px;
}

.radial-12px {
  border-radius: 12px;
}

.radial-13px {
  border-radius: 13px;
}

.radial-14px {
  border-radius: 14px;
}

.radial-15px {
  border-radius: 15px;
}

.radial-16px {
  border-radius: 16px;
}

.radial-1rem {
  border-radius: 1rem;
}

.radial-2rem {
  border-radius: 2rem;
}

.radial-3rem {
  border-radius: 3rem;
}

.radial-100 {
  border-radius: 100%;
}

.fs-8 {
  font-size: 8pt;
}

.fs-9 {
  font-size: 9pt;
}

.fs-10 {
  font-size: 10pt;
}

.fs-11 {
  font-size: 11pt;
}

.fs-12 {
  font-size: 12pt;
}

.fs-13 {
  font-size: 13pt;
}

.fs-14 {
  font-size: 14pt;
}

.fs-15 {
  font-size: 15pt;
}

.fs-16 {
  font-size: 16pt;
}

.fs-17 {
  font-size: 17pt;
}

.fs-18 {
  font-size: 18pt;
}

.fs-19 {
  font-size: 19pt;
}

.fs-20 {
  font-size: 20pt;
}

.fs-21 {
  font-size: 21pt;
}

.fs-22 {
  font-size: 22pt;
}

.fs-23 {
  font-size: 23pt;
}

.fs-24 {
  font-size: 24pt;
}

.fs-25 {
  font-size: 25pt;
}

.fs-26 {
  font-size: 26pt;
}

.fs-27 {
  font-size: 27pt;
}

.fs-28 {
  font-size: 28pt;
}

.fs-29 {
  font-size: 29pt;
}

.fs-30 {
  font-size: 30pt;
}

.fs-31 {
  font-size: 31pt;
}

.fs-32 {
  font-size: 32pt;
}

.fs-33 {
  font-size: 33pt;
}

.fs-34 {
  font-size: 34pt;
}

.fs-35 {
  font-size: 35pt;
}

.fs-36 {
  font-size: 36pt;
}

.fs-37 {
  font-size: 37pt;
}

.fs-38 {
  font-size: 38pt;
}

.fs-39 {
  font-size: 39pt;
}

.fs-40 {
  font-size: 40pt;
}

.fs-41 {
  font-size: 41pt;
}

.fs-42 {
  font-size: 42pt;
}

.fs-43 {
  font-size: 43pt;
}

.fs-44 {
  font-size: 44pt;
}

.fs-45 {
  font-size: 45pt;
}

.fs-46 {
  font-size: 46pt;
}

.fs-47 {
  font-size: 47pt;
}

.fs-48 {
  font-size: 48pt;
}

.fs-49 {
  font-size: 49pt;
}

.fs-50 {
  font-size: 50pt;
}

.fs-51 {
  font-size: 51pt;
}

.fs-52 {
  font-size: 52pt;
}

.fs-53 {
  font-size: 53pt;
}

.fs-54 {
  font-size: 54pt;
}

.fs-55 {
  font-size: 55pt;
}

.fs-56 {
  font-size: 56pt;
}

.fs-57 {
  font-size: 57pt;
}

.fs-58 {
  font-size: 58pt;
}

.fs-59 {
  font-size: 59pt;
}

.fs-60 {
  font-size: 60pt;
}

.fs-61 {
  font-size: 61pt;
}

.fs-62 {
  font-size: 62pt;
}

.fs-63 {
  font-size: 63pt;
}

.fs-64 {
  font-size: 64pt;
}

.fs-65 {
  font-size: 65pt;
}

.fs-66 {
  font-size: 66pt;
}

.fs-67 {
  font-size: 67pt;
}

.fs-68 {
  font-size: 68pt;
}

.fs-69 {
  font-size: 69pt;
}

.fs-70 {
  font-size: 70pt;
}

.fs-71 {
  font-size: 71pt;
}

.fs-72 {
  font-size: 72pt;
}

.fs-73 {
  font-size: 73pt;
}

.fs-74 {
  font-size: 74pt;
}

.fs-75 {
  font-size: 75pt;
}

.fs-76 {
  font-size: 76pt;
}

.fs-77 {
  font-size: 77pt;
}

.fs-78 {
  font-size: 78pt;
}

.fs-79 {
  font-size: 79pt;
}

.fs-80 {
  font-size: 80pt;
}

.list-style-none {
  list-style: none;
}

ul {
  list-style: none;
}

.header {
  background-color: #333;
  top: 0;
  z-index: 9999999999;
}
.header__section {
  flex-wrap: wrap;
}
.header__logo {
  width: 5rem;
}
.header__hamburger {
  display: none;
  flex-basis: 100%;
  color: white;
}
@media (max-width: 480px) {
  .header__hamburger {
    display: flex;
  }
}
@media (max-width: 480px) {
  .header__menu-box {
    display: none;
  }
}
.header__menu {
  z-index: 10;
}
.header__menu-link {
  text-decoration: none;
  color: white;
  text-wrap: nowrap;
  position: relative;
  z-index: 10;
  padding: 0 10px;
}
.header__background-item {
  background-color: #666666;
  height: 100%;
  z-index: 5;
  transition: all 0.4s;
}
.header__account {
  color: white;
}
.header__search {
  width: 18rem;
}
.header__search > div {
  background: linear-gradient(to right, #333, #666666);
}
.header__search > div > span {
  color: white;
}
.header__search input {
  border-right: 1px solid white;
  background-color: transparent;
  color: white;
  padding-right: 10px;
  line-height: 1.5rem;
  width: 100%;
  position: relative;
}
.header__search-focus {
  width: 100vw;
  height: 100%;
  background-color: rgba(56, 56, 56, 0.7);
  z-index: 9999999;
  right: 0;
}
.header__search-info {
  background-color: #333;
  color: white;
}
.header__search-info img {
  width: 100%;
}

.categories__item {
  cursor: pointer;
}
.categories__border {
  background: radial-gradient(red, royalblue);
}
.categories__border {
  width: 8rem;
  height: 8rem;
}
@media (max-width: 768px) {
  .categories__border {
    width: 7rem;
    height: 7rem;
  }
}
@media (max-width: 480px) {
  .categories__border {
    width: 4rem;
    height: 4rem;
  }
}
.categories__background {
  background-color: white;
  width: 7.5rem;
  height: 7.5rem;
}
@media (max-width: 768px) {
  .categories__background {
    width: 6.5rem;
    height: 6.5rem;
  }
}
@media (max-width: 480px) {
  .categories__background {
    width: 3.5rem;
    height: 3.5rem;
  }
}
.categories__background > img {
  width: 7rem;
  height: 7rem;
}
@media (max-width: 768px) {
  .categories__background > img {
    width: 6rem;
    height: 6rem;
  }
}
@media (max-width: 480px) {
  .categories__background > img {
    width: 3rem;
    height: 3rem;
  }
}
.categories__stories-indicating {
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  background: #333;
  z-index: 9999;
  display: none;
  align-items: center;
  overflow: hidden;
  gap: 6rem;
}
.categories__stories-indicating button {
  z-index: 15;
  padding: 10px 20px;
  border: none;
  outline: none;
  border-radius: 1rem;
}
.categories__stories-indicating button:first-child {
  left: 30%;
}
.categories__stories-indicating button:nth-child(2) {
  left: 52%;
}
.categories__stories-indicating .story {
  color: white;
  height: 90vh;
  aspect-ratio: 1/2;
  position: relative;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  left: 50%;
  transform: translate(-50%);
  transition: all 0.5s;
}
.categories__stories-indicating .story .op {
  z-index: 10;
  cursor: pointer;
}
.categories__stories-indicating .story > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 1rem;
}
.categories__stories-indicating .story .story-playing {
  position: relative;
  align-self: center;
  border-radius: 1rem;
  width: 90%;
  height: 5px;
  background-color: #666666;
  z-index: 10;
}
.categories__stories-indicating .story .story-playing::after {
  content: "";
  position: absolute;
  width: 0;
  background-color: white;
  height: 100%;
}
.categories__stories-indicating .active .story-playing::after {
  animation: loading 3s;
}
.categories__stories-indicating .active .story-playing.stop-loading::after {
  animation-play-state: paused !important;
}
@keyframes loading {
  to {
    width: 100%;
  }
}

.slider__slides img {
  width: 100%;
}
.slider__slides img:not(img.active) {
  display: none;
}
.slider__slides img.active {
  display: block !important;
  animation: fade 0.2s 2.9s;
}
.slider__svg {
  top: -18px;
  right: 47px;
}
@media (max-width: 480px) {
  .slider__svg {
    display: none;
  }
}
.slider__buttons {
  top: 10px;
  right: 110px;
}
@media (max-width: 480px) {
  .slider__buttons {
    display: none;
  }
}
.slider__buttons-item {
  width: 7px;
  height: 7px;
  background-color: #666666;
  transition: all 1s;
}
.slider__buttons-item.slider__active {
  background-color: #333;
  width: 20px;
  border-radius: 5px;
}

.cards__box {
  flex-wrap: wrap;
}
.cards__item {
  background-color: rgb(229.5, 229.5, 229.5);
  width: 15rem;
  transition: all 0.4s;
  z-index: 100;
  position: relative;
}
.cards__item::after {
  content: "";
  position: absolute;
  width: 0;
  height: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #666666;
  bottom: -11px;
  transition: all 0.4s;
}
.cards__item:hover {
  background-color: #333;
  color: white;
  transform: translateY(-10px);
}
.cards__item:hover::after {
  width: 85%;
}
.cards__item-desc h5 {
  color: #666666;
}

.products-slider {
  background-color: #333;
  overflow: hidden;
}
.products-slider__title {
  text-align: center;
  color: white;
  font-size: 20pt;
  font-weight: bolder;
}
.products-slider__item {
  background-color: white;
  width: 15rem;
}
.products-slider__item h3 {
  margin-top: 1rem;
}
.products-slider__item-price {
  margin-top: 1rem;
}
.products-slider__item-price > div:first-child span {
  background-color: #333;
  padding: 3px;
  color: white;
  border-radius: 7px;
}
.products-slider__discount {
  background-color: #333;
  color: white;
  font-weight: bold;
}
.products-slider__del {
  color: #666666;
  text-decoration-color: red;
}

.banner__box {
  position: relative;
  z-index: 20;
}
.banner__box img {
  width: 250px;
  transition: all 0.4s;
}
.banner__box-shadow {
  position: relative;
  z-index: 20;
}
.banner__box-shadow:hover::after {
  animation: ghost 1s infinite linear;
}
.banner__box .banner__box-shadow::after {
  content: "";
  position: absolute;
  width: 0;
  height: 150%;
  transform: rotate(38deg);
  box-shadow: 0 0 60px 50px white;
  z-index: 10;
  top: -25%;
  left: -100%;
}
.banner__image:hover {
  transform: perspective(300px) rotate3d(1, -1, 0, 5deg);
}
@keyframes ghost {
  to {
    left: 180%;
  }
}

.featured-products__box {
  overflow: hidden;
  border: 1px solid rgb(229.5, 229.5, 229.5);
}
.featured-products__title {
  margin-bottom: 1rem;
}
.featured-products__items-self {
  border-bottom: 1px solid rgb(229.5, 229.5, 229.5);
  width: 15rem;
}
@media (max-width: 768px) {
  .featured-products__items-self span:last-child {
    font-size: 12px;
  }
}
.featured-products__items {
  flex: 1;
}
.featured-products__items-self img {
  width: 6rem;
}
@media (max-width: 768px) {
  .featured-products__items-self img {
    width: 4rem;
  }
}
.featured-products__items-count {
  overflow: hidden;
  color: hotpink;
  font-size: 30pt;
  font-weight: bold;
  line-height: 25px;
}
@media (max-width: 768px) {
  .featured-products__items-count {
    font-size: 20pt;
  }
}

.wide-banner__box {
  padding-top: 0;
}
.wide-banner__box img {
  width: 100%;
}

.amazing-products__header {
  padding-top: 2rem;
}
.amazing-products__header-title {
  color: white;
}
.amazing-products__header-timer {
  color: white;
}
.amazing-products__header-timer span:first-child {
  margin-left: 1rem;
}
.amazing-products .products-slider {
  background-color: transparent;
}
.amazing-products .products-slider__item {
  box-shadow: 0 0 10px -2px gray;
}
.amazing-products__box {
  background: url(https://dark.parskalas.com/wp-content/uploads/2024/12/shape-carosel-2.svg) no-repeat;
  background-size: 100%;
  padding-top: 5%;
}
@media (max-width: 480px) {
  .amazing-products__box {
    background: #333;
  }
}

.slider-tab__header {
  background-color: rgb(229.5, 229.5, 229.5);
}
.slider-tab__header-catrgories .active {
  background-color: #333;
  color: white;
}
.slider-tab .products-slider {
  background-color: transparent;
}
.slider-tab .products-slider__item {
  box-shadow: 0 0 10px -5px #666666;
}

.brand-slider__box {
  background-color: #333;
}
.brand-slider__title h2 {
  text-align: center;
  color: white;
}
.brand-slider__button-box {
  top: 0;
  height: 100%;
  width: 100%;
}
.brand-slider__button-box button:last-child {
  left: 5%;
  top: 42%;
}
.brand-slider__button-box button:first-child {
  right: 5%;
  top: 42%;
}

.blog-banner__item {
  width: 20rem;
  box-shadow: 0 0 10px -5px #666666;
}
.blog-banner__item img {
  width: 100%;
  border-radius: 1rem 1rem 0 0;
}

.footer a {
  text-decoration: none;
  color: white;
  font-weight: bolder;
}
.footer__box {
  background-color: rgb(38.25, 38.25, 38.25);
}
.footer__support {
  background-color: #333;
  color: white;
}
@media (max-width: 480px) {
  .footer__support {
    flex-wrap: wrap;
    flex-direction: row !important;
  }
}
@media (max-width: 480px) {
  .footer__support-icons {
    flex: 100%;
    flex-direction: row !important;
  }
}
.footer__support-icons img {
  width: 5rem;
}
.footer__menu {
  color: white;
  margin-top: 1rem;
  border-bottom: 1px solid white;
  padding-bottom: 1rem;
}
.footer__menu ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}
.footer__menu-social h3 {
  color: gold;
}
@media (max-width: 480px) {
  .footer__menu-social h3 {
    margin-top: 1rem;
  }
}
.footer__menu-social input[type=submit] {
  border: 0;
  outline: 0;
  padding: 5px 20px;
}
.footer__menu-social input[type=text] {
  border: 0;
  outline: 0;
  line-height: 2.5rem;
  height: 2.5rem;
}
.footer__copyright {
  color: white;
  padding-top: 1rem;
}
.footer__copyright div:last-child {
  margin: 0 auto;
}
.footer__text-title {
  color: white;
}
.footer__text-desc {
  color: white;
  height: 110px;
  overflow: hidden;
  position: relative;
  transition: all 1s;
}
.footer__text-desc::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 50px;
  width: 100%;
  right: 0;
  background: linear-gradient(to top, rgb(38.25, 38.25, 38.25), transparent);
}
.footer__text a {
  cursor: pointer;
}

.contact-box {
  bottom: 2rem;
  right: 2rem;
  z-index: 100;
}
.contact-box::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666666;
  top: 0;
  left: 0;
  z-index: 10;
  border-radius: 100%;
  animation: notif 1s infinite;
}
.contact-box #contact {
  position: relative;
  width: 5rem;
  height: 5rem;
  color: white;
  background-color: #333;
  z-index: 9999999;
}

@keyframes notif {
  to {
    transform: scale(1.15);
    opacity: 0;
  }
}
.to-top-box a {
  color: #333;
}
.to-top-box #to-top {
  left: 2rem;
  bottom: 2rem;
  text-align: center;
  background-color: #cccccc;
  width: 3rem;
  height: 3rem;
  display: none;
}

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