/* transform */
@font-face {
  font-family: "Morganite-Bold";
  src: url("../fonts/Morganite-ExtraBold.woff2") format("woff2"), url("../fonts/Morganite-ExtraBold.woff") format("woff"), url("../fonts/Morganite-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Morganite-SemiBold";
  src: url("../fonts/Morganite-SemiBold.woff2") format("woff2"), url("../fonts/Morganite-SemiBold.woff") format("woff"), url("../fonts/Morganite-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
:root {
  /**
  @font family declaration
  */
  --tp-ff-body: 'Kanit', sans-serif;
  --tp-ff-heading: 'Space Grotesk', sans-serif;
  --tp-ff-p: 'Kanit', sans-serif;
  --tp-ff-teko: 'Teko', sans-serif;
  --tp-ff-funnel: 'Funnel Display', sans-serif;
  --tp-ff-sora: 'Sora', sans-serif;
  --tp-ff-dm: 'DM Sans', sans-serif;
  --tp-ff-inter: 'Inter', sans-serif;
  --tp-ff-poppins: 'Poppins', sans-serif;
  --tp-ff-playfair: 'Playfair Display', serif;
  --tp-ff-jakarta: 'Plus Jakarta Sans', sans-serif;
  --tp-ff-familjen: 'Familjen Grotesk', sans-serif;
  --tp-ff-morganite-bold: 'Morganite-Bold', sans-serif;
  --tp-ff-morganite-semibold: 'Morganite-SemiBold', sans-serif;
  --tp-ff-fontawesome: "Font Awesome 6 Pro";
  /**
  @color declaration
  */
  --tp-common-white: #fff;
  --tp-common-white-2: #f0f0f0;
  --tp-common-black: #030303;
  --tp-common-black-1: #10302a;
  --tp-common-black-2: #0d0d0d;
  --tp-common-black-3: #000;
  --tp-common-black-4: #405955;
  --tp-common-black-5: #111112;
  --tp-common-black-6: #333333;
  --tp-common-black-7: #121314;
  --tp-common-yellow: #008080;
  --tp-common-yellow-2: #008080;
  --tp-common-green: #00dd80;
  --tp-common-green-2: #b4e717;
  --tp-common-green-3: #d5ffdd;
  --tp-common-blue: #5956e9;
  --tp-common-nights: #7D5DFF;
  --tp-common-meteor: #E62415;
  --tp-common-angry: #f14f44;
  --tp-common-sugar : #FFFBF5;
  --tp-common-cream : #b7ab98;
  --tp-common-pink : #eb5939;
  --tp-grey-1: #525252;
  --tp-grey-2: #999;
  --tp-grey-3: #f8f8f8;
  --tp-grey-4: #aaa;
  --tp-grey-5: #f3f1f2;
  --tp-grey-6: #AFB7B6;
  --tp-grey-7: #5c5c5c;
  --tp-grey-8: #101010;
  --tp-theme-primary: #c4ee18;
  --tp-theme-secondary: #008080;
  --tp-theme-1: #0752c5;
  --tp-border-1: #eee;
  --tp-border-2: rgba(51, 51, 51, 0.8);
  --tp-border-3: rgba(255, 255, 255, 0.1);
}

/*----------------------------------------*/
/*  4.1 cetagory css
/*----------------------------------------*/
.al-category-shop-slider .al-swiper-shop-scrollbar {
  width: calc(100% - 200px);
  margin: auto;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .al-category-shop-slider .al-swiper-shop-scrollbar {
    width: calc(100% - 100px);
  }
}
@media (max-width: 574.98px) {
  .al-category-shop-slider .al-swiper-shop-scrollbar {
    width: 100%;
  }
}
.al-category-shop-item:hover .al-category-shop-title, .al-category-shop-item:hover .al-category-shop-btn, .al-category-shop-item:hover .al-category-shop-content span, .al-category-shop-item:hover .al-category-shop-content::after {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  visibility: visible;
  opacity: 1;
}
.al-category-shop-item:hover .al-category-shop-title {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.al-category-shop-item:hover .al-category-shop-btn {
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}
.al-category-shop-item:hover .al-category-shop-content span {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.al-category-shop-item:hover .al-category-shop-content::after {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.al-category-shop-title, .al-category-shop-btn, .al-category-shop-content span, .al-category-shop-content::after {
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
}
.al-category-shop-content {
  position: absolute;
  top: 14px;
  left: 14px;
  bottom: 14px;
  right: 14px;
  background-color: transparent;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 1;
}
.al-category-shop-content::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--tp-common-white);
  z-index: -1;
  -webkit-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}
.al-category-shop-content span {
  font-size: 16px;
  display: inline-block;
  margin-bottom: 3px;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
  font-family: var(--tp-ff-dm);
}
.al-category-shop-title {
  font-weight: 400;
  font-size: 20px;
  margin-bottom: 17px;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
  font-family: var(--tp-ff-dm);
}
.al-category-shop-title a:hover {
  color: var(--tp-theme-secondary);
}
.al-category-shop-btn {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.al-category-shop-btn .al-shop-btn-border {
  font-size: 14px;
  padding: 3px 15px;
}
.al-category-shop-btn .al-shop-btn-border:hover {
  background: var(--tp-theme-secondary);
  border-color: var(--tp-theme-secondary);
  color: var(--tp-common-white);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .al-category-shop-thumb img {
    width: 100%;
  }
}

.al-swiper-shop-scrollbar {
  background-color: #EDEFF2;
  height: 2px !important;
  -webkit-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
  position: relative !important;
}
.al-swiper-shop-scrollbar .al-swiper-scrollbar-drag {
  background-color: var(--tp-common-black);
  height: 100%;
}
.al-swiper-shop-scrollbar .al-swiper-scrollbar-drag:hover {
  cursor: pointer;
}