@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");

:root {
  font-family: "Manrope", sans-serif;
}

.header_container {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23cac9cc' fill-opacity='0.44'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.accordion-content {
  transition: max-height 0.4s ease-in-out;
}

.navbar {
  transition: all 1s ease-in-out;
}

#image_card {
  background-image: url("../img/walp.png");
  background-repeat: repeat;
  background-size: cover;
  background-position: center center;
}

.off_canvas {
  transition: transform 0.16s ease-in-out;
  background-color: #f5f5f5cb;
  /* Additional styles for off-canvas container */
}

.disable {
  transform: translateX(100%);
}

.showOff {
  animation: showOffAnimation 0.3s ease-in-out forwards;
  /* Apply animation to move off-canvas element */
}

.HideOff {
  animation: HideOffAnimation 0.4s ease-in-out forwards;
  /* Apply animation to hide off-canvas element */
}

.cart {
  /* Additional styles for cart container */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
#blur{
  backdrop-filter: blur(15px);
}
@keyframes showOffAnimation {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}

@keyframes HideOffAnimation {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}