* {
  font-family: "Rubik";
}
html {
  scroll-behavior: smooth;
}
@media (max-width: 420px) {
  /* Apply styles when viewport width is 420px or less */
  body {
    zoom: 90%;
  }
}
@media (max-width: 390px) {
  /* Apply styles when viewport width is 420px or less */
  #my-address {
    height: 90%;
  }
}

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@keyframes slidePlaceholder {
  0% {
    transform: translateY(-100%);
  }

  50% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

#placeholderInput::placeholder {
  animation: slidePlaceholder 4s linear infinite;
}

/* .owl-theme .owl-dots{
   display: none;
  } */

.red-grad {
  background: linear-gradient(
    to right top,
    rgb(255, 178, 178),
    rgb(255, 220, 220),
    rgb(255, 209, 209)
  );
}

.translucent-bg {
  background-color: rgba(253, 240, 240, 0.632);
}

.owl-carousel .item {
  margin-right: 8px;
  /* Adjust the value to control the gap size */
}

a {
  cursor: pointer;
}

/* gradient for coupons  */
.pink-grad {
  background: linear-gradient(
    to right,
    rgb(244, 63, 94),
    rgb(248, 113, 113),
    rgb(239, 68, 68)
  );
}

.blood-grad {
  background: linear-gradient(to right top, rgb(239, 68, 68), rgb(153, 27, 27));
}

.gold-grad {
  background: linear-gradient(to right, rgb(255, 214, 50), rgb(255, 197, 22));
}

.blue-grad {
  background: conic-gradient(
    at left center,
    rgb(56, 189, 248),
    rgb(30, 64, 175)
  );
}

.green-grad {
  background: linear-gradient(to right, rgb(34, 197, 94), rgb(22, 146, 67));
}

.purple-grad {
  background: linear-gradient(
    rgb(42, 37, 102),
    rgb(88, 28, 135),
    rgb(54, 35, 112)
  );
}

.orange-grad {
  background: linear-gradient(to right, rgb(249, 115, 22), rgb(255, 185, 93));
}

.gray-grad {
  background: linear-gradient(
    to left,
    rgb(100, 116, 139),
    rgb(184, 188, 193),
    rgb(167, 170, 173)
  );
}

*:focus,
*:active {
  outline: none;
}

.splide__arrows {
  display: none;
}

.splide__pagination {
  display: none !important;
}

.image-products {
  opacity: 1 !important;
}

/* notification  */

.notifications {
  position: fixed;
  top: 60px;
  right: 0px;
}

.notifications .toast {
  width: 120px;
  position: relative;
  overflow: hidden;
  list-style: none;
  animation: show_toast 0.3s ease forwards;
}

@keyframes show_toast {
  0% {
    transform: translateX(100%);
  }

  40% {
    transform: translateX(-5%);
  }

  80% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-10%);
  }
}

.notifications .toast.hide {
  animation: hide_toast 0.3s ease forwards;
}

@keyframes hide_toast {
  0% {
    transform: translateX(-10%);
  }

  40% {
    transform: translateX(0%);
  }

  80% {
    transform: translateX(-5%);
  }

  100% {
    transform: translateX(calc(100% + 20px));
  }
}

.toast::before {
  position: absolute;
  content: "";
  height: 3px;
  width: 100%;
  bottom: 0;
  left: 0;
  animation: progress 1s linear forwards;
}

@keyframes progress {
  100% {
    width: 0%;
  }
}

.toast.success::before,
.btn#success {
  background: #ffff;
}

.toast.error::before,
.btn#error {
  background: linear-gradient(to right, rgb(239, 68, 68), rgb(153, 27, 27));
}

@media screen and (max-width: 530px) {
  .notifications {
    width: 40%;
  }

  .notifications .toast {
    width: 100%;
    font-size: 1rem;
    margin-left: 19px;
  }
}

.login-bg {
  background: url("../img/full-bg-login.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 50%;
}

@media screen and (min-width: 891px) {
  .md-grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }
  .login-bg {
    background: url("../img/full-bg-login.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 90%;
  }
  #login-main {
    width: 25% !important;
    margin-top: 0px !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    flex-direction: column;
    background: white;
    padding: 36px;
    border-radius: 16px;
    zoom: 90%;
    box-shadow: 5px 5px 10px #33333386;
  }
}


.grid-category {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.5rem;
}

@media (max-width: 368px) {
  .grid-category {
      grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 369px) and (max-width: 559px) {
  .grid-category {
      grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 559px) and (max-width: 759px) {
  .grid-category {
      grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 759px) and (max-width: 959px) {
  .grid-category {
      grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 959px) and (max-width: 1159px) {
  .grid-category {
      grid-template-columns: repeat(6, 1fr);
  }
}