@font-face {
  font-family: "Viga";
  src: url(/assets/fonts/Viga-Regular.ttf) format("opentype");
  unicode-range: U+00-FF, U+980-9FF;
}
@font-face {
  font-family: "iranyekannum";
  src: url(/assets/fonts/iranyekanwebregularfanum.ttf) format("opentype");
  unicode-range: U+30-39;
}
.neonText {
  animation: flicker 5.5s infinite alternate;
  color: #fff;
  font-weight: 900;
  font-size: 20pt;
}
.active-sorting {
  background: rgb(148 197 43) !important;
  color: #000 !important;
}
.main-color {
  background: rgb(148 197 43);
}
.main-color:hover {
  background: rgb(117, 155, 35);
}
.main-text {
  color: rgb(148 197 43);
}
* {
  accent-color: rgb(148 197 43) !important;
}
:root {
  --color-shockingly-green: #0ae448;
  --color-just-black: #0e100f;
  --color-surface-white: #fffce1;
  --color-pink: #fec5fb;
  --color-shockingly-pink: #f100cb;
  --color-orangey: #ff8709;
  --color-lilac: #9d95ff;
  --color-lt-green: #abff84;
  --color-blue: #00bae2;
  --color-grey: gray;
  --color-surface75: #bbbaa6;
  --color-surface50: #7c7c6f;
  --color-surface25: #42433d;
}
.w-content {
  min-width: max-content;
}
.header-image {
  background: url(/assets/imgs/call-of-duty-modern-warfare-3.webp);
  background-position: center;
  background-size: cover;
  height: 35vh;
}
.footer-image {
  background: url(/assets/imgs/call_of_duty_modern_warfare_4-wallpaper-1920x1080.jpg);
  background-position: center;
  background-size: cover;
}
@keyframes flicker {
  0%,
  18%,
  22%,
  25%,
  53%,
  57%,
  100% {
    text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #60a5fa, 0 0 80px #60a5fa, 0 0 90px #60a5fa, 0 0 100px #60a5fa, 0 0 150px #60a5fa;
  }

  20%,
  24%,
  55% {
    text-shadow: none;
  }
}
.group-click,
.group-clicks {
  cursor: pointer;
}
.btn {
  cursor: pointer;
}
.flag.flag-uai {
  animation: uia 2.5s steps(1) infinite;
  border-radius: 3px;
}

/*arg and tr flag alt*/
@keyframes artr {
  0%,
  49.99% {
    background-position: 0 4.545455%;
  }
  50%,
  100% {
    background-position: 0 89.256198%;
  }
}
.flag.flag-artr {
  animation: artr 2.5s steps(1) infinite;
  border-radius: 3px;
}
/**/

@keyframes uia {
  0%,
  49.99% {
    background-position: 0 40.909091%;
  }
  50%,
  100% {
    background-position: 0 91.735537%;
  }
}

@keyframes uaia {
  0%,
  10% {
    background-position: 0;
  }
  90%,
  100% {
    background-position: -30px;
  }
}

/*UA INDIA FLAG ALTERNATE*/

.flag.flag-uai {
  animation: uia 2.5s steps(1) infinite;
  border-radius: 3px;
}
/*UA INDIA FLAG COMBINED*/
.flag.flag-uaic {
  background: url(../imgs/uainflag.webp) no-repeat;
  background-size: 100%;
  border-radius: 3px;
}
/*UA INDIA FLAG SWITCH*/
.flag.flag-uaia {
  background: url(../imgs/uain-flag-v2.webp) no-repeat;
  background-size: 207%;
  animation: uaia 2.5s infinite alternate;
  border-radius: 3px;
}

.flag.flag-global {
  background: url(../imgs/global.png?v2) no-repeat;
  background-size: 100%;
}
.rounded-0 {
  border-radius: 0 !important;
}
.sharp-elements {
  * {
    border-radius: 7px !important;
  }
}
.discounted-price::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #f44336;
  position: absolute;
  right: 0;
  left: 0;
  top: 7.5px;
  -moz-transform: rotate(174deg);
  -webkit-transform: rotate(174deg);
  transform: rotate(174deg);
}
.dataTables_empty {
  text-align: center;
  padding: 43px;
}
.head-font {
  font-family: "Viga" !important;
}
.persian-numbers {
  font-family: "iranyekannum", "iranyekan" !important;
  direction: rtl;
}
* {
  transition: background-color 100ms;
}
.grandchild::before {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -9px;
  width: 3px;
  border-radius: 15px;
  height: 100%;
  background-color: #d1d1d156;
  z-index: 1;
}
.hd-child > a {
  text-align: center;
}
.hd-grandchild .hd-child > a {
  text-align: right;
}
.hd-grandchild::before {
  content: "";
  position: absolute;
  bottom: -1px;
  right: 5px;
  width: 3px;
  border-radius: 15px;
  height: 100%;
  background-color: #d1d1d156;
  z-index: 1;
}
.stage-padding .owl-stage-outer > .owl-stage {
  padding-bottom: 1.25rem;
}
.make-readable {
  text-shadow: 0.5px 0.5px 0.5px #000, -0.5px -0.5px 0.5px #000;
}

.text-cyan {
  color: #00c9ff;
}
.shadow-cyan {
  box-shadow: 0 0 20px -5px #00c9ff;
}
html:not(.dark) .bg-cyan {
  background: #009cc1;
}
.bg-cyan {
  background: #ff0000;
}
.bg-special-offer {
  background-image: linear-gradient(225deg, #d22c4e, #ee384e 41.68%, #ef5662);
}
.mask {
  /*background-image:url(/assets/imgs/dots-2.png);*/
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(24, 24, 24, 1) 100%), url(/assets/imgs/dots-2.png);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition-duration: 1s;
  /*mask: url(/assets/imgs/Pattern.png);*/
  /*mask-size: contain;*/
}
html:not(.dark) .mask.black {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(255, 255, 255) 90%), url(/assets/imgs/dots-2.png);
}
/*html.dark .mask-fade-x {*/
/*  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(12, 10, 10, 1) 10%, rgba(12, 10, 10, 1) 90%, rgba(10, 10, 10, 0) 100%);*/
/*  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 10%, rgb(0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);*/
/*}*/
.bg-strips-shop{
    position: relative;
}
html.dark .bg-strips-shop::before {
  background-image: url(/assets/imgs/timeline-bg.png);
  background-size: 500px;
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.29;
}
.mask.black {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 90%), url(/assets/imgs/dots-2.png);
}
.bg-strips::before{
  background-image: url(/assets/imgs/timeline-bg.png);
  content: "";
  inset: 0;
  z-index: -1;
  position: fixed;
  opacity: .55;
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0) 80%);
    animation: bg-move 60s infinite linear ;

}

@keyframes bg-move {
  0% {
    background-position: -200px
  }
  100% {
    background-position: 200px
  }
}


.special-border:not(.spb-nomargin):not(:empty) {
  margin-bottom: 2.5rem;
  margin-top: 2.5rem;
}

.special-border:not(:empty)::before {
  width: 100%;
  height: 100%;
  content: "";
  inset: 0;
  position: absolute;
  border-radius: inherit;
  box-shadow: 0 0 36px -5px #ff0000;
  background-image: linear-gradient(90deg, #212121 50%, transparent 50%), linear-gradient(90deg, #212121 50%, transparent 50%), linear-gradient(0deg, #212121 50%, transparent 50%), linear-gradient(0deg, #212121 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
  background-position: left top, right bottom, left bottom, right top;
  animation: border-dance 5s infinite linear;
}

html:not(.dark) .special-border:not(:empty)::before {
  width: 100%;
  height: 100%;
  content: "";
  inset: 0;
  position: absolute;
  border-radius: inherit;
  box-shadow: 0 0 36px -5px #ffffff;
  background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%), linear-gradient(90deg, #ffffff 50%, transparent 50%), linear-gradient(0deg, #ffffff 50%, transparent 50%), linear-gradient(0deg, #ffffff 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
  background-position: left top, right bottom, left bottom, right top;
  animation: border-dance 5s infinite linear;
}
html:has(.dark) .bg-transparent {
background: transparent !important;
}

.like-product {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}


@keyframes border-dance {
  0% {
    background-position: left top, right bottom, left bottom, right top;
  }
  100% {
    background-position: left 20px top, right 20px bottom, left bottom 20px, right top 20px;
  }
}

.circles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: -1;
}

.circles li {
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  animation: animate-circle 25s linear infinite;
  bottom: -150px;
}
html:not(.dark) .circles li {
  background: rgb(0 102 255 / 17%) !important;
}
.circles li:nth-child(1) {
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}

.circles li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}

.circles li:nth-child(3) {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}

.circles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}

.circles li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}
.top-menu-links:hover {
  color: #fff;
  text-shadow: white 0px 0px 5px;
}
.circles li:nth-child(6) {
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}

.circles li:nth-child(7) {
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
}

.circles li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
}

.circles li:nth-child(9) {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}

.circles li:nth-child(10) {
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
}

@keyframes animate-circle {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 5px;
  }

  100% {
    transform: translateY(-900px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  }
}
.rounded-none {
  border-radius: 0 !important;
}
body,
html {
  height: 100%;
  font-family: "iranyekan";
  -webkit-font-smoothing: subpixel-antialiased;
  padding: 0;
  color: #000;
  margin: 0;
}
.thumb-border {
  border: 3px solid #37373aaa !important;
}
.cursor-pointer {
  cursor: pointer;
}
.vertical-center {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -51%, 0);
  -moz-transform: translate3d(-50%, -51%, 0);
  transform: translate3d(-50%, -51%, 0);
}
.table-center {
  display: table;
  margin: 0 auto;
}
.owl-theme .owl-nav {
  margin-top: 10px;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.dreverse-slider-border::before {
  content: " ";
  transform: rotateX(180deg);
  width: 99px;
  height: 152px;
  border-radius: 0 0px 84px 0;
  position: absolute;
  overflow: hidden;
  left: -92px;
  bottom: -1.1%;
  box-shadow: 19px 18px 0 12px var(--tw-shadow-color);
  background: transparent;
}
.article-tag {
  background-color: #ffffffaa;
  backdrop-filter: blur(2px);
  color: black;
  font-size: 12pt;
  font-weight: bold;
  text-align: center;
  mix-blend-mode: screen;
}
.toggle-section {
  transition: all 0.2s;
}
.toggle-section[is_active="true"] {
  box-shadow: 0 0 32px -14px #000;
}

.header-slider .owl-item {
  scale: 1;
  filter: none;
}
.owl-item {
  /*scale: 0.95;*/
  transition: all 0.5s;
  /* opacity: 0.5; */
  /* filter: blur(3px) grayscale(.5); */
}
.owl-item.active.center {
  /*scale: 1.05;*/
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
  /* opacity: 1; */
  /* filter: blur(0px) grayscale(0); */
}
.header-slider .owl-item.active.center {
  scale: 1;
  filter: none;
}
.owl-next,
.owl-next:hover {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  right: 2%;
  margin: 0 !important;
  background: #00000033 !important;
  backdrop-filter: blur(4px);
  padding: 10px !important;
  border-radius: 10px !important;
  color: #fff !important;
  display: flex;
  width: 43px !important;
}
.owl-prev,
.owl-prev:hover {
  position: absolute;
  top: 50%;
  margin: 0 !important;
  transform: translate(0, -50%);
  left: 2%;
  background: #00000033 !important;
  padding: 10px !important;
  backdrop-filter: blur(4px);
  border-radius: 10px !important;
  color: #fff !important;
  display: flex;
  width: 43px !important;
}
.owl-dot-absloute {
  transform: translate(-50%, 0);
  position: absolute;
  z-index: 1;
  bottom: 7.5px;
  padding: 0 10px;
  width: max-content;
  background: rgb(227 229 233) !important;
  left: 50%;
  border-radius: 10px 10px 0 0;
}
.dark .owl-dot-absloute {
  background: #18181b !important;
}
html:not(.dark) .fa-steam:not(.text-white) {
  color: #325877 !important;
}
html:not(.dark) .fa-xbox:not(.text-white) {
  color: #0e7a0d !important;
}
html:not(.dark) .fa-playstation:not(.text-white) {
  color: #003791 !important;
}
.low-performance {
  box-shadow: 0 0 0 transparent !important;
  backdrop-filter: none !important;
  filter: none !important;
}
.owl-dot-absloute::before {
  content: "";
  position: absolute;
  bottom: 0px;
  overflow: hidden;
  height: 11px;
  left: -46px;
  border-radius: 16px 0 31px 0;
  width: 46px;
  box-shadow: 10px 0px 0px 0px rgb(227 229 233);
}
.owl-dot-absloute::after {
  content: "";
  position: absolute;
  bottom: 0px;
  overflow: hidden;
  height: 11px;
  right: -46px;
  border-radius: 16px 0 31px 0;
  width: 46px;
  box-shadow: 10px 0px 0px 0px rgb(227 229 233);
  transform: rotateY(180deg);
}
.dark .owl-dot-absloute::after,
.dark .owl-dot-absloute::before {
  box-shadow: 10px 0px 0px 0px #18181b !important;
}
.heartbeat {
  animation: heartbeat 2s ease infinite;
}
@keyframes heartbeat {
  0% {
    transform: scale(0.75);
  }
  20% {
    transform: scale(1.2);
  }
  40% {
    transform: scale(0.75);
  }
  60% {
    transform: scale(1.2);
  }
  80% {
    transform: scale(0.75);
  }
  100% {
    transform: scale(0.75);
  }
}
.c1 {
  width: 118px;
  height: 117px;
  font-size: 180px;
  color: #5d97ff;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  right: 60px;
  transform: rotate(-35deg);
  user-select: none;
}
.c2 {
  width: 118px;
  height: 117px;
  border: solid 17px #ff0000;
  border-radius: 100%;
  position: absolute;
  bottom: 70%;
  left: -60px;
}
.c3 {
  width: 118px;
  height: 117px;
  border: solid 8px #f9bdc9;
  border-radius: 15%;
  transform: rotate(-75deg);
  position: absolute;
  bottom: -80%;
  left: 14px;
}
.c4 {
  border: solid 20px #ffebb9;
  width: 144px;
  transform: rotate(75deg);
  height: 144px;
  border-radius: 32px;
  bottom: -935px;
  position: absolute;
  right: -70px;
}
.dreverse-slider-border::after {
  transform: rotateY(180deg) rotateX(180deg);
  content: " ";
  width: 99px;
  height: 152px;
  border-radius: 0 0px 84px 0;
  position: absolute;
  overflow: hidden;
  right: -92px;
  bottom: -1.1%;
  box-shadow: 19px 18px 0 12px var(--tw-shadow-color);
  background: transparent;
}
.reverse-slider-border::before {
  content: " ";
  width: 99px;
  height: 152px;
  border-radius: 0 0px 84px 0;
  position: absolute;
  overflow: hidden;
  left: -98px;
  bottom: -1%;
  box-shadow: 19px 18px 0 12px var(--tw-shadow-color);
  background: transparent;
}
.bg-red-670 {
  background: #c70700;
}
.shadow-red-670 {
  --tw-shadow-color: #c70700;
}
.reverse-slider-border::after {
  transform: rotateY(180deg);
  content: " ";
  width: 99px;
  height: 152px;
  border-radius: 0 0px 84px 0;
  position: absolute;
  overflow: hidden;
  right: -98px;
  bottom: -1%;
  box-shadow: 19px 18px 0 12px var(--tw-shadow-color);
  background: transparent;
}
.dir-rtl {
  direction: rtl;
  text-align: rtl;
}
/* width */
::-webkit-scrollbar {
  width: 7.5px;
  max-height: 9px;
  cursor: pointer;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 2px;
}

/* Handle */
html:not(.dark) ::-webkit-scrollbar-thumb {
  background: #eab308;
}
html:not(.dark) ::-webkit-scrollbar-thumb:hover {
  background: #eab308;
}
::-webkit-scrollbar-thumb:hover {
  background: #fff;
}
::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #555;
}
/* Handle on hover */

.owl-theme .owl-nav [class*="owl-"] {
  color: #fff;
  font-size: 14px;
  margin: 5px;
  padding: 4px 7px;
  background: #d6d6d6;
  display: inline-block;
  cursor: pointer;
  border-radius: 3px;
}
.owl-theme .owl-nav [class*="owl-"]:hover {
  background: #869791;
  color: #fff;
  text-decoration: none;
}
.owl-theme .owl-nav .disabled {
  opacity: 0.5;
  cursor: default;
}

.owl-theme .owl-nav.disabled + .owl-dots {
  margin-top: 10px;
}

.owl-theme .owl-dots {
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.owl-theme .owl-dots .owl-dot {
  display: inline-block;
  zoom: 1;
  display: inline;
}
.owl-theme .owl-dots .owl-dot span {
  width: 10px;
  height: 10px;
  margin: 0 7px;
  margin-top: -10px;
  background: #d6d6d6;
  display: block;
  -webkit-backface-visibility: visible;
  transition: all 200ms ease;
  border-radius: 30px;
}
.will-change {
  will-change: transform;
}
.owl-dot.active > span {
  width: 40px !important;
  transition: all 300ms ease;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: #60a5fa;
  box-shadow: 0 0 10px #60a5fa;
}
.dark .owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: #ff1616;
  box-shadow: 0 0 10px #fa6060;
}
.owl-dot {
  position: relative;
  z-index: 1;
}
#fix-jump {
  display: none;
}

.forcedark {
  -webkit-filter: invert() hue-rotate(180deg);
}
.forcedark img {
  -webkit-filter: invert() hue-rotate(180deg) !important;

  .mask.black {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 90%), url(/assets/imgs/dots-2.png);
  }
  .header-image {
    -webkit-filter: invert() hue-rotate(180deg) !important;
  }
}

.dark .shadow-glow {
  box-shadow: 0 0 50px 0px var(--tw-shadow-color) !important;
}
@media screen and (max-width: 600px) {
  .owl-item {
    /* scale: 0.5; */
    transition: all 0.5s;
    /* opacity: 0.5; */
    /* filter: blur(3px) grayscale(0.5); */
  }
  .owl-item.active.center {
    /* scale: 1; */
    opacity: 1;
    /* filter: blur(0px) grayscale(0); */
  }
  .fixed-header {
    position: fixed;
    z-index: 10;
    left: 0;
    right: 0;
    top: 0;
    padding: 10px;
  }
  #fix-jump {
    display: unset;
  }
  .fix-jumping {
    height: 67px !important;
  }
  .mobile-tb tr {
    display: grid;
    padding: 10px;
  }
  .mobile-tb th {
    display: none;
  }
  .mobile-tb {
    width: 100% !important;
  }
  .mobile-tb td {
    display: flex;
    justify-content: space-between;
    flex-flow: row-reverse;
    direction: rtl;
    text-align: center;
    padding: 5px !important;
    background-color: #00000022;
    border-radius: 4px;
    margin-top: 2px;
    padding-right: 10px !important;
    width: 100%;
    align-items: center;
  }
  .mobile-tb td:first-child {
    border-radius: 15px 15px 4px 4px;
  }
  .mobile-tb td:last-child {
    border-radius: 4px 4px 15px 15px;
  }
  .mobile-tb td::before {
    /*
        * aria-label has no advantage, it won't be read inside a table
        content: attr(aria-label);
        */
    content: attr(data-label);
    font-weight: bold;
    text-transform: capitalize;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    color: #000;
    background-color: #fff;
    vertical-align: middle;
    margin-right: 10px;
    min-width: 100px;
  }
}