@tailwind base;
@tailwind components;
@tailwind utilities;

.close-menu,
.open-menu {
  position: absolute;
  cursor: pointer;
  display: none;
}
..react-multiple-carousel__arrow {
  min-width: 30px !important;
  min-height: 30px !important;
}

.open-menu {
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.close-menu {
  top: 20px;
  right: 20px;
}

#check {
  display: none;
}

@media (max-width: 1024px) {
  .close-menu,
  .open-menu {
    display: block !important;
  }
  .menu {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 100vh;
    position: fixed;
    top: 0;
    right: -100%;
    z-index: 100;
    background-color: #000;
    color: #fff;
    transition: all 0.5s ease-in-out;
    text-transform: uppercase;
    font-size: 24px;
    display: flex !important;
  }

  .menu li {
    margin-top: 40px;
  }

  .menu li a {
    padding: 10px;
  }
  #check:checked ~ .menu {
    right: 0;
  }
}

@media (max-width: 880px) {
  .mysearchbar {
    display: none;
  }
}

.btn4 span {
  transform: translateX(-101%);
  transition: transform 0.2s ease-in;
}

.btn4:hover span {
  transform: translateX(0);
}
.btnHome span {
  transform: translateX(-101%);
  transition: transform 0.2s ease-in;
}
.btnHome:hover span {
  transform: translateX(0);
}

.myloadingBody:after {
  content: "";
  position: fixed;
  --size: 100%;
  width: var(--size);
  height: var(--size);
  --color: rgb(0, 0, 0);
  background: var(--color);
  top: 0;
  left: 0;
  z-index: 99;
  animation: yx 3s linear forwards;
  background-image: url("../public/assets/images/output-onlinepngtools.png");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-position-y: 40%;
  background-size: 16rem;
}

.myloadingBody::before {
  content: "\A"var(--num);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  width: var(--w);
  height: var(--h);
  --w: 100px;
  --h: 10px;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.62) var(--progress),
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white,
    white
  );
  border: 1px solid whitesmoke;
  animation: yx 3s linear forwards;
  white-space: pre-wrap;
  text-align: center;
  z-index: 999;
  color: whitesmoke;
}

@-webkit-keyframes yx {
  0% {
    --progress: 0%;
    --num: "0%";
  }

  1% {
    --progress: 1%;
    --num: "1%";
  }

  2% {
    --progress: 2%;
    --num: "2%";
  }

  3% {
    --progress: 3%;
    --num: "3%";
  }

  4% {
    --progress: 4%;
    --num: "4%";
  }

  5% {
    --progress: 5%;
    --num: "5%";
  }

  6% {
    --progress: 6%;
    --num: "6%";
  }

  7% {
    --progress: 7%;
    --num: "7%";
  }

  8% {
    --progress: 8%;
    --num: "8%";
  }

  9% {
    --progress: 9%;
    --num: "9%";
  }

  10% {
    --progress: 10%;
    --num: "10%";
  }

  11% {
    --progress: 11%;
    --num: "11%";
  }

  12% {
    --progress: 12%;
    --num: "12%";
  }

  13% {
    --progress: 13%;
    --num: "13%";
  }

  14% {
    --progress: 14%;
    --num: "14%";
  }

  15% {
    --progress: 15%;
    --num: "15%";
  }

  16% {
    --progress: 16%;
    --num: "16%";
  }

  17% {
    --progress: 17%;
    --num: "17%";
  }

  18% {
    --progress: 18%;
    --num: "18%";
  }

  19% {
    --progress: 19%;
    --num: "19%";
  }

  20% {
    --progress: 20%;
    --num: "20%";
  }

  21% {
    --progress: 21%;
    --num: "21%";
  }

  22% {
    --progress: 22%;
    --num: "22%";
  }

  23% {
    --progress: 23%;
    --num: "23%";
  }

  24% {
    --progress: 24%;
    --num: "24%";
  }

  25% {
    --progress: 25%;
    --num: "25%";
  }

  26% {
    --progress: 26%;
    --num: "26%";
  }

  27% {
    --progress: 27%;
    --num: "27%";
  }

  28% {
    --progress: 28%;
    --num: "28%";
  }

  29% {
    --progress: 29%;
    --num: "29%";
  }

  30% {
    --progress: 30%;
    --num: "30%";
  }

  31% {
    --progress: 31%;
    --num: "31%";
  }

  32% {
    --progress: 32%;
    --num: "32%";
  }

  33% {
    --progress: 33%;
    --num: "33%";
  }

  34% {
    --progress: 34%;
    --num: "34%";
  }

  35% {
    --progress: 35%;
    --num: "35%";
  }

  36% {
    --progress: 36%;
    --num: "36%";
  }

  37% {
    --progress: 37%;
    --num: "37%";
  }

  38% {
    --progress: 38%;
    --num: "38%";
  }

  39% {
    --progress: 39%;
    --num: "39%";
  }

  40% {
    --progress: 40%;
    --num: "40%";
  }

  41% {
    --progress: 41%;
    --num: "41%";
  }

  42% {
    --progress: 42%;
    --num: "42%";
  }

  43% {
    --progress: 43%;
    --num: "43%";
  }

  44% {
    --progress: 44%;
    --num: "44%";
  }

  45% {
    --progress: 45%;
    --num: "45%";
  }

  46% {
    --progress: 46%;
    --num: "46%";
  }

  47% {
    --progress: 47%;
    --num: "47%";
  }

  48% {
    --progress: 48%;
    --num: "48%";
  }

  49% {
    --progress: 49%;
    --num: "49%";
  }

  50% {
    --progress: 50%;
    --num: "50%";
  }

  51% {
    --progress: 51%;
    --num: "51%";
  }

  52% {
    --progress: 52%;
    --num: "52%";
  }

  53% {
    --progress: 53%;
    --num: "53%";
  }

  54% {
    --progress: 54%;
    --num: "54%";
  }

  55% {
    --progress: 55%;
    --num: "55%";
  }

  56% {
    --progress: 56%;
    --num: "56%";
  }

  57% {
    --progress: 57%;
    --num: "57%";
  }

  58% {
    --progress: 58%;
    --num: "58%";
  }

  59% {
    --progress: 59%;
    --num: "59%";
  }

  60% {
    --progress: 60%;
    --num: "60%";
  }

  61% {
    --progress: 61%;
    --num: "61%";
  }

  62% {
    --progress: 62%;
    --num: "62%";
  }

  63% {
    --progress: 63%;
    --num: "63%";
  }

  64% {
    --progress: 64%;
    --num: "64%";
  }

  65% {
    --progress: 65%;
    --num: "65%";
  }

  66% {
    --progress: 66%;
    --num: "66%";
  }

  67% {
    --progress: 67%;
    --num: "67%";
  }

  68% {
    --progress: 68%;
    --num: "68%";
  }

  69% {
    --progress: 69%;
    --num: "69%";
  }

  70% {
    --progress: 70%;
    --num: "70%";
  }

  71% {
    --progress: 71%;
    --num: "71%";
  }

  72% {
    --progress: 72%;
    --num: "72%";
  }

  73% {
    --progress: 73%;
    --num: "73%";
  }

  74% {
    --progress: 74%;
    --num: "74%";
  }

  75% {
    --progress: 75%;
    --num: "75%";
  }

  76% {
    --progress: 76%;
    --num: "76%";
  }

  77% {
    --progress: 77%;
    --num: "77%";
  }

  78% {
    --progress: 78%;
    --num: "78%";
  }

  79% {
    --progress: 79%;
    --num: "79%";
  }

  80% {
    --progress: 80%;
    --num: "80%";
  }

  81% {
    --progress: 81%;
    --num: "81%";
  }

  82% {
    --progress: 82%;
    --num: "82%";
  }

  83% {
    --progress: 83%;
    --num: "83%";
  }

  84% {
    --progress: 84%;
    --num: "84%";
  }

  85% {
    --progress: 85%;
    --num: "85%";
  }

  86% {
    --progress: 86%;
    --num: "86%";
  }

  87% {
    --progress: 87%;
    --num: "87%";
  }

  88% {
    --progress: 88%;
    --num: "88%";
  }

  89% {
    --progress: 89%;
    --num: "89%";
  }

  90% {
    --progress: 90%;
    --num: "90%";
  }

  91% {
    --progress: 91%;
    --num: "91%";
  }

  92% {
    --progress: 92%;
    --num: "92%";
  }

  93% {
    --progress: 93%;
    --num: "93%";
  }

  94% {
    --progress: 94%;
    --num: "94%";
  }

  95% {
    --progress: 95%;
    --num: "95%";
  }

  96% {
    --progress: 96%;
    --num: "96%";
  }

  97% {
    --progress: 97%;
    --num: "97%";
  }

  98% {
    --progress: 98%;
    --num: "98%";
  }

  99% {
    --progress: 99%;
    --num: "99%";
  }

  100% {
    --progress: 100%;
    --num: "100%";
    visibility: hidden;
  }
}
@keyframes yx {
  0% {
    --progress: 0%;
    --num: "0%";
  }

  1% {
    --progress: 1%;
    --num: "1%";
  }

  2% {
    --progress: 2%;
    --num: "2%";
  }

  3% {
    --progress: 3%;
    --num: "3%";
  }

  4% {
    --progress: 4%;
    --num: "4%";
  }

  5% {
    --progress: 5%;
    --num: "5%";
  }

  6% {
    --progress: 6%;
    --num: "6%";
  }

  7% {
    --progress: 7%;
    --num: "7%";
  }

  8% {
    --progress: 8%;
    --num: "8%";
  }

  9% {
    --progress: 9%;
    --num: "9%";
  }

  10% {
    --progress: 10%;
    --num: "10%";
  }

  11% {
    --progress: 11%;
    --num: "11%";
  }

  12% {
    --progress: 12%;
    --num: "12%";
  }

  13% {
    --progress: 13%;
    --num: "13%";
  }

  14% {
    --progress: 14%;
    --num: "14%";
  }

  15% {
    --progress: 15%;
    --num: "15%";
  }

  16% {
    --progress: 16%;
    --num: "16%";
  }

  17% {
    --progress: 17%;
    --num: "17%";
  }

  18% {
    --progress: 18%;
    --num: "18%";
  }

  19% {
    --progress: 19%;
    --num: "19%";
  }

  20% {
    --progress: 20%;
    --num: "20%";
  }

  21% {
    --progress: 21%;
    --num: "21%";
  }

  22% {
    --progress: 22%;
    --num: "22%";
  }

  23% {
    --progress: 23%;
    --num: "23%";
  }

  24% {
    --progress: 24%;
    --num: "24%";
  }

  25% {
    --progress: 25%;
    --num: "25%";
  }

  26% {
    --progress: 26%;
    --num: "26%";
  }

  27% {
    --progress: 27%;
    --num: "27%";
  }

  28% {
    --progress: 28%;
    --num: "28%";
  }

  29% {
    --progress: 29%;
    --num: "29%";
  }

  30% {
    --progress: 30%;
    --num: "30%";
  }

  31% {
    --progress: 31%;
    --num: "31%";
  }

  32% {
    --progress: 32%;
    --num: "32%";
  }

  33% {
    --progress: 33%;
    --num: "33%";
  }

  34% {
    --progress: 34%;
    --num: "34%";
  }

  35% {
    --progress: 35%;
    --num: "35%";
  }

  36% {
    --progress: 36%;
    --num: "36%";
  }

  37% {
    --progress: 37%;
    --num: "37%";
  }

  38% {
    --progress: 38%;
    --num: "38%";
  }

  39% {
    --progress: 39%;
    --num: "39%";
  }

  40% {
    --progress: 40%;
    --num: "40%";
  }

  41% {
    --progress: 41%;
    --num: "41%";
  }

  42% {
    --progress: 42%;
    --num: "42%";
  }

  43% {
    --progress: 43%;
    --num: "43%";
  }

  44% {
    --progress: 44%;
    --num: "44%";
  }

  45% {
    --progress: 45%;
    --num: "45%";
  }

  46% {
    --progress: 46%;
    --num: "46%";
  }

  47% {
    --progress: 47%;
    --num: "47%";
  }

  48% {
    --progress: 48%;
    --num: "48%";
  }

  49% {
    --progress: 49%;
    --num: "49%";
  }

  50% {
    --progress: 50%;
    --num: "50%";
  }

  51% {
    --progress: 51%;
    --num: "51%";
  }

  52% {
    --progress: 52%;
    --num: "52%";
  }

  53% {
    --progress: 53%;
    --num: "53%";
  }

  54% {
    --progress: 54%;
    --num: "54%";
  }

  55% {
    --progress: 55%;
    --num: "55%";
  }

  56% {
    --progress: 56%;
    --num: "56%";
  }

  57% {
    --progress: 57%;
    --num: "57%";
  }

  58% {
    --progress: 58%;
    --num: "58%";
  }

  59% {
    --progress: 59%;
    --num: "59%";
  }

  60% {
    --progress: 60%;
    --num: "60%";
  }

  61% {
    --progress: 61%;
    --num: "61%";
  }

  62% {
    --progress: 62%;
    --num: "62%";
  }

  63% {
    --progress: 63%;
    --num: "63%";
  }

  64% {
    --progress: 64%;
    --num: "64%";
  }

  65% {
    --progress: 65%;
    --num: "65%";
  }

  66% {
    --progress: 66%;
    --num: "66%";
  }

  67% {
    --progress: 67%;
    --num: "67%";
  }

  68% {
    --progress: 68%;
    --num: "68%";
  }

  69% {
    --progress: 69%;
    --num: "69%";
  }

  70% {
    --progress: 70%;
    --num: "70%";
  }

  71% {
    --progress: 71%;
    --num: "71%";
  }

  72% {
    --progress: 72%;
    --num: "72%";
  }

  73% {
    --progress: 73%;
    --num: "73%";
  }

  74% {
    --progress: 74%;
    --num: "74%";
  }

  75% {
    --progress: 75%;
    --num: "75%";
  }

  76% {
    --progress: 76%;
    --num: "76%";
  }

  77% {
    --progress: 77%;
    --num: "77%";
  }

  78% {
    --progress: 78%;
    --num: "78%";
  }

  79% {
    --progress: 79%;
    --num: "79%";
  }

  80% {
    --progress: 80%;
    --num: "80%";
  }

  81% {
    --progress: 81%;
    --num: "81%";
  }

  82% {
    --progress: 82%;
    --num: "82%";
  }

  83% {
    --progress: 83%;
    --num: "83%";
  }

  84% {
    --progress: 84%;
    --num: "84%";
  }

  85% {
    --progress: 85%;
    --num: "85%";
  }

  86% {
    --progress: 86%;
    --num: "86%";
  }

  87% {
    --progress: 87%;
    --num: "87%";
  }

  88% {
    --progress: 88%;
    --num: "88%";
  }

  89% {
    --progress: 89%;
    --num: "89%";
  }

  90% {
    --progress: 90%;
    --num: "90%";
  }

  91% {
    --progress: 91%;
    --num: "91%";
  }

  92% {
    --progress: 92%;
    --num: "92%";
  }

  93% {
    --progress: 93%;
    --num: "93%";
  }

  94% {
    --progress: 94%;
    --num: "94%";
  }

  95% {
    --progress: 95%;
    --num: "95%";
  }

  96% {
    --progress: 96%;
    --num: "96%";
  }

  97% {
    --progress: 97%;
    --num: "97%";
  }

  98% {
    --progress: 98%;
    --num: "98%";
  }

  99% {
    --progress: 99%;
    --num: "99%";
  }

  100% {
    --progress: 100%;
    --num: "100%";
    visibility: hidden;
  }
}

@keyframes pulses {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.1;
  }
}
.animatePulse {
  animation: pulses 5s cubic-bezier(0.4, 0, 0.6, 1);
}
