body {
  color: #ffffff;
  background-color: #121212;
}
.button {
  padding: 0.75rem;
  border-radius: 0.375rem;
  font-weight: 500;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-align: center;
  position: relative;
  cursor: pointer;
}

.button:hover {
  box-shadow: 0 0 10px #bc897133;
  background: #000;
  -webkit-backdrop-filter: saturate(0.2);
  backdrop-filter: saturate(0.2);
  transition-duration: 300ms;
}

.button::before {
  display: block;
  content: "";
  position: absolute;
  inset: -0.08rem 0 -0.9rem -0.08rem;
  width: 100%;
  height: 104%;
  border-radius: 5px;
  border: 0.15rem solid var(--theme-primary);
  -webkit-mask-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(44%, rgba(255, 255, 255, 0)),
    color-stop(49%, rgba(0, 0, 0, 1)),
    color-stop(51%, rgba(0, 0, 0, 1)),
    color-stop(56%, rgba(255, 255, 255, 0))
  );
  -webkit-mask-size: 240%;
  -webkit-mask-position: left center;
  transition: all 500ms;
  /*transition-duration: 500ms;*/
}

.button:hover::before {
  -webkit-mask-position: right center;
  -webkit-transition: all 500ms;
  -o-transition: all 500ms;
  -moz-transition: all 500ms;
  transition: all 500ms;
}

.bg-blur {
  backdrop-filter: blur(3px);
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
}
.bg-gradiant {
  background: linear-gradient(180deg, #f5ac3e 0%, #000000 100%);
}

/*button_style_end*/

/*header*/
.header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  background: rgba(3, 0, 0, 0.5);
  z-index: 1053;
}
.add_header {
  animation: slideInDown 0.6s;
}

@-webkit-keyframes slideInDown {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/*header*/


/*footer*/

.bg-header {
  background-image: url("../../Images/Cafe/banner.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
}
.design-border-primary {
  position: relative;
}

.bg-about {
  background-image: url("../../Images/Cafe/about.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  z-index: 1;
}

.bg-about::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.bg-article {
  background-image: url("../../Images/Cafe/10.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  z-index: 1;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
}
.bg-article::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.bg-gallery {
  background-image: url("../../Images/Cafe/20.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  z-index: 1;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
}

.about-time {
  /*width: 300px;*/
  height: 200px;
  border-radius: 30px;
  padding: 0.5rem;
}

.filter-product {
  background: var(--theme-secondary);
  border-radius: 22px;
  color: #000000;
}

.filter-product img {
  border-radius: 14px;
  transition-duration: 500ms;
}
.filter-product:hover img {
  transform: rotate(5deg) scale(1.1, 1.1);
  transition-duration: 500ms;
}
.filter-product a:hover {
  color: var(--colorPrimary);
  display: block;
  transition-duration: 300ms;
}

.product {
  display: none;
}
.product.show {
  display: block;
}
.list-product a.active {
  color: var(--theme-primary);
}
.gallery-img:hover > img {
  transform: scale(1.5, 1.5);
  transition: all 3s ease;
  z-index: 1;
}
.gallery-img:hover::after {
  transform: scale(0.9);
  transition: all 500ms ease;
}
.gallery img {
  transition: all 3s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-img {
  position: relative;
}
.gallery-img::after {
  content: "";
  position: absolute;
  inset: 3%;
  transition: all 500ms;
  will-change: border;
  z-index: 1;
  border: 2px solid black;
  -webkit-clip-path: polygon(
    0 calc(100% - 1rem),
    0 100%,
    1rem 100%,
    1rem 0,
    0 0,
    0 1rem,
    100% 1rem,
    100% 0,
    calc(100% - 1rem) 0,
    calc(100% - 1rem) 100%,
    100% 100%,
    100% calc(100% - 1rem)
  );
  clip-path: polygon(
    0 calc(100% - 1rem),
    0 100%,
    1rem 100%,
    1rem 0,
    0 0,
    0 1rem,
    100% 1rem,
    100% 0,
    calc(100% - 1rem) 0,
    calc(100% - 1rem) 100%,
    100% 100%,
    100% calc(100% - 1rem)
  );
}

.h-fixed {
  background-attachment: fixed;
}


.editor p{
  color: #eeeeee;
}

@media (width >= 64rem /* 1024px */) {
    .design-border-primary:after {
  content: "";
  position: absolute;
  inset: -5%;
  border: 3px solid var(--theme-primary);
  -webkit-mask-image: linear-gradient(
    270deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0) 20%
  );
  mask-image: linear-gradient(
    270deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0) 20%,
    rgba(0, 0, 0, 0) 100%
  );
  border-radius: 50%;
}

}