/** Shopify CDN: Minification failed

Line 378:59 Unexpected ")"

**/
.product-details-block {
  text-align: center;
}
.detail-page-width {
  box-sizing: content-box;
}

.product-details-image img {
  max-width: 100%;
}

.product-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  border-top: 1px solid gray;
  padding: 15px 0px;
  row-gap: 50px;
}

.product-details > .row {
  max-width: calc(33.33% - 10px);
  display: flex;
  flex-grow: 1;
  padding: 0px 24px;
  flex-basis: 33.33%;
}

/* product detail carousel css with swiper */
.product-swiper-container .swiper-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.product-swiper-container .swiper-wrapper {
  padding-bottom: 40px;
}
.product-swiper-container .swiper-slider {
  width: auto;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background: #f0f0f0; */
}
.product-swiper-container .swiper-container .swiper-pagination-block {
  position: absolute;
  bottom: 0px;
  margin-bottom: -20px;
  padding: 25px 25px;
  width: fit-content !important;
  left: 50% !important;
  transform: translate(-50%, 0%);
  /* z-index: 99999; */
}
.product-swiper-container
  .swiper-container
  .swiper-pagination-block
  .swiper-pagination {
  position: unset;
  display: flex;
  align-items: center;
}
.product-swiper-container
  .swiper-container
  .swiper-pagination-block
  .swiper-button-next {
  display: block;
  position: absolute;
  right: 0px;
  padding-left: 10px;
  display: flex;
  align-items: center;
  color: #000000;
}
.product-swiper-container
  .swiper-container
  .swiper-pagination-block
  .swiper-button-next::after {
  font-size: 20px;
}
.product-swiper-container
  .swiper-container
  .swiper-pagination-block
  .swiper-button-prev::after {
  font-size: 20px;
}
.product-swiper-container
  .swiper-container
  .swiper-pagination-block
  .swiper-button-prev {
  display: block;
  position: absolute;
  left: 0px;
  padding-right: 10px;
  display: flex;
  align-items: center;
  color: #000000;
}

.product-swiper-container .swiper-pagination-block .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background-color: #3c3c3cbf;
  transition: background-color 0.3s ease;
  /* Smooth transition effect 
    /* padding: 5px;
    border: 1px solid #ffffff; */
}
.product-swiper-container
  .swiper-pagination-block
  .swiper-pagination-bullet:hover {
  /* border: 1px solid #000000; */
  background-color: #000000;
  /* width: 15px;
    height: 15px; */
}
.product-swiper-container
  .swiper-pagination-block
  .swiper-pagination-bullet-active {
  background-color: #000000;
  width: 20px;
  height: 10px;
  border-radius: 20px;
}
.product-swiper-container
  .swiper-pagination-block
  .swiper-pagination-bullet-active:hover {
  background-color: #000000;
  width: 20px;
  height: 10px;
}
.product-swiper-container
  .swiper-pagination-block
  .swiper-pagination-bullet-active:hover {
  border: unset;
}
.product-swiper-container .swiper-inner {
  text-align: center;
}

.product-swiper-container .swiper-image-box {
  /* background-color: #F7F7F7; */
  text-align: center;
  padding: 15px 15px 0px 15px;
  padding-bottom: 0px;
  height: 256px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* Ensure images can be positioned absolutely */
  /* transition: transform 0.9s cubic-bezier(0.25, 0.1, 0.25, 1);  */
  transform-origin: center center;
}

.product-swiper-container .swiper-image-box img {
  max-width: 100%;
  /* position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto; 
    transition: opacity 0.3s ease;  */
}

.product-swiper-container .swiper-image-box img.default-image {
  opacity: 1; /* Show the default image initially */
}
.swiper-image-box img.hover-image {
  display: none;
}
.hover-image {
  display: none;
}

/* .swiper-image-box img.hover-image {
    opacity: 0; 
    visibility: hidden; 
    display: none;
} */

.product-swiper-container .swiper-image-box:hover img.default-image {
  /* opacity: 0; 
    visibility: hidden; */
  /* display: none; */
  /* width: 90%;
    object-fit: contain;
    margin: 0 auto; */
}

.product-swiper-container .swiper-image-box:hover img.hover-image {
  /* opacity: 1; 
    visibility: visible; */
  /* display: block; */
  margin: 0 auto;
}
.product-swiper-container .swiper-image-box .swiper_image-box-inner {
  max-width: 85%;
  object-fit: contain;
  width: 85%;
}

.product-swiper-container .swiper-content-box {
  text-align: center;
}
.product-swiper-container .swiper-heading-label {
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 5px;
  margin-top: 1px;
}
.product-swiper-container .swiper-content-text p {
  font-size: 14px;
  margin: 5px 0px;
  color: #6c6b6b;
}
.product-swiper-container .swiper-content-text p strong {
  font-weight: 400;
}
.product-swiper-container .swiper-image-box img {
  transition: transform 0.5s ease-in-out;
  transform-origin: center center;
}
.product-swiper-container .swiper-image-box:hover img {
  /* transform: scale(1.2);  */
}
/* .product-swiper-container .swiper-image-box:hover{
    align-items: flex-end;
} */
.product-swiper-container .swiper-content-price {
  font-weight: 500;
  font-size: 13px;
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  color: #000000;
  z-index: 99;
  width: 100%;
  text-align: center;
  /* background-color: #F7F7F7; */
}
.product-swiper-container .swiper-content-price p {
  margin: 0px;
  text-align: center;
  line-height: 16px;
}
.detail-section-text p,
.detail-section-text2 p,
.detail-section-text3 p,
.page-content p {
  font-size: 14px;
  color: #3c3c3c;
  text-transform: uppercase;
}
.color-boxes {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.color-box {
  border-radius: 50%;
  width: 16px;
  height: 16px;
  border: 0.5px solid #e0e0e0;
}
.color-info-container {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 5px;
}
.color-label {
  font-size: 14px;
  color: #6c6b6b;
}

.color-boxes2 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.color-box2 {
  border-radius: 50%;
  width: 13px;
  height: 13px;
  border: 0.5px solid #e0e0e0;
}
.color-info-container2 {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 5px;
  justify-content: center;
}
.color-label2 {
  font-size: 12px !important;
  color: #6c6b6b;
}
.data-sidebar {
  position: fixed;
  right: -600px; /* Start off the screen */
  top: 0;
  max-width: 600px;
  height: 100vh;
  /* border: 1px solid gray; */
  background-color: #ffffff;
  opacity: 0;
  transition: right 0.3s ease-in, opacity 0.3s ease;
  /* Smooth transition effect */
  display: none;
  z-index: 99999999;
  box-shadow: 0px 0px 25.7px 7px #00000014;
}
.data-sidebar.visible {
  display: block; /* Makes it visible without affecting transitions */
}
.data-sidebar.open {
  right: 0;
  opacity: 1; /* Make the sidebar fully visible */
}
.sidebar-inner {
  position: relative;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none; /* For Firefox */
  -ms-overflow-style: none;
}
/* For Internet Explorer and Edge */

.sidebar-inner::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, and Opera */
}
.data-sidebar.open .sidebar-close-icon {
  position: fixed;
  top: 50%;
  right: 580px;
  left: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  transform: translateY(-50%);
}
.sidebar-content-details {
  padding: 20px;
}
.content-inner-product-box img {
  transition: transform 0.5s ease-in-out;
  transform-origin: center center;
}
.content-inner-product-box:hover img {
  /* transform: scale(1.2); */
}
.content-title-box {
  padding-top: 0px;
}
.content-title-box p {
  margin: 0px;
}
.content-inner-details {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  row-gap: 40px;
  margin-bottom: 30px;
}
.sidebar-content-details .content-inner-details:last-child() {
  margin-bottom: 0px;
}
.content-inner-img-box {
  /* background-color: #EFEFEF; */
  padding: 20px 40px 0px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: max-content;
}
.content-inner-product-box.content-inner-product-box-upgrade {
  height: max-content;
}
.img-padding {
  padding: 45px 15px;
}
.content-inner-image-inner-box {
  width: 100%;
  height: 100%;
  max-height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content-inner-image-inner-box img {
  max-width: 95%;
  max-height: 100%;
  height: auto;
  width: auto;
  /* transform: scale(1.1); */
  object-fit: contain;
  transition: transform 0.5s ease-in-out;
  transform-origin: center;
}
.content-inner-text-box {
  padding: 5px 0px;
  text-align: center;
}
.content-inner-text-box p {
  color: #000000;
  font-size: 12px;
  margin: 0px;
  text-transform: uppercase;
  font-weight: bold !important;
}
.content-subtext {
  font-size: 10px !important;
  color: #6c6b6b !important;
  font-weight: 400 !important;
}
.content-price-text p {
  color: #000000;
  font-size: 12px;
  text-transform: uppercase;
  margin: 0px;
}
.content-price-text {
  position: absolute;
  right: 10px;
  top: 5px;
  z-index: 9;
  padding: 0px 20px;
}

.swiper-button-next,
.swiper-button-prev,
.swiper-pagination {
  display: none; /* Hide by default */
}

.swiper-button-next.show,
.swiper-button-prev.show,
.swiper-pagination.show {
  display: block; /* Show if necessary */
}

.swiper-button-next[tabindex="-1"],
.swiper-button-prev[tabindex="-1"] {
  display: none !important;
}

.swiper-image-box-main {
  position: relative;
}
/* .view-details-button { */
.custom-box-btn {
  position: absolute;
  left: 50%;
  bottom: 10px;
  right: 0;
  /* border: 1px solid #000000;
    background-color: transparent;
    color: #000000;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px; */
  text-align: center;
  transform: translate(-50%, 0%);
  opacity: 0;
  /* transition: transform 0.4s ease-in, background-color 0.5s ease-in-out, color 0.5s ease-in-out;  */
  cursor: pointer;
  width: 85%;
  text-transform: uppercase;
  padding: 0px;
  width: max-content;
}
.view-details-button:hover {
  background-color: #000000;
  color: #ffffff;
}

.swiper-image-box-main:hover .custom-box-btn {
  transform: translate(-50%, 0%);
  opacity: 1;
}
.custom-box-btn button {
  padding: 8px 15px;
  font-size: 13px;
  height: auto;
  /* border-radius: 20px; */
  line-height: 15px;
}

/* .swiper-button-next.hidden,
.swiper-button-prev.hidden {
  display: none;
} */

@media (max-width: 1024px) {
  .product-details > .row {
    max-width: calc(50% - 10px);
  }
}

@media (max-width: 767px) {
  .product-details {
    display: block;
  }
  .product-details > .row {
    max-width: 100%;
    display: block;
    margin-bottom: 30px;
  }
  h3.inline-richtext.h3 {
    font-weight: bold;
  }
}

.product-image-show {
  box-shadow: 0 4px 10px #0000001a;
  background-color: #ffffff;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out,
    visibility 0s linear 0.5s; /* Smooth fade-in and scale transition */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.show-product-image {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1); /* Final scale for full size */
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out,
    visibility 0s linear 0s; /* Fade-in and scale-in effect */
}

.product-image-show img {
  opacity: 0; /* Start with the image invisible */
  transform: scale(0.9); /* Shrink the image slightly */
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Apply smooth transitions */
}

.show-product-image img {
  opacity: 1; /* Fade in the image */
  transform: scale(1); /* Scale to normal size */
}

.product-slide-img {
  object-fit: cover;
  max-width: 100%;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  /* background: #fff;
    border: none;
    cursor: pointer;
    font-size: 32px;
    color: #000; */
  z-index: 1000;
}
.image-slide-main-box {
  min-width: 500px;
  max-width: 500px;
  min-height: 540px;
  max-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper-content-icon {
  position: absolute;
  left: 5px;
  top: 2px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  /* display: none; */
  cursor: pointer;
  z-index: 99;
}
.swiper-content-icon2 {
  left: 0px;
  top: 5px;
}
.product-swiper-container .swiper-image-box:hover .swiper-content-icon {
  /* display: block; */
  opacity: 1;
  cursor: pointer;
}
.content-inner-image-inner-box:hover .swiper-content-icon2 {
  opacity: 1;
  cursor: pointer;
}
.product-swiper-container .swiper-image-box:hover .swiper-content-icon svg {
  cursor: pointer;
}
.content-inner-img-box:hover .swiper-content-icon2 {
  display: block;
  cursor: pointer;
}
.swiper-content-icon svg {
  cursor: pointer;
}
.box-content-side {
  margin-top: 20px;
}
.box-data-sidebar {
  margin-top: 30px;
  max-width: 100%;
}
.box-data-sidebar .sidebar-inner {
  overflow-y: unset;
}
.box-data-sidebar {
  position: unset;
  left: 0; /* Start off the screen */
  top: 0;
  width: 100%;
  min-height: 500px;
  height: 100%;
  /* border: 1px solid gray; */
  background-color: #ffffff;
  opacity: 0;

  /* Smooth transition effect */
  display: none;
  z-index: 1;
  box-shadow: 0px 0px 25.7px 18px #00000010;
  position: relative;
  transform: translateY(-100px);
  transition: transform 0.8s ease-in-out, opacity 0.3s ease;
}
.box-data-sidebar.visible {
  display: block; /* Make it visible */
  opacity: 1; /* Fully visible */
  transform: translateY(0); /* Move into place */
}
.close-box-btn {
  color: lightgray;
  top: 20px;
  width: 50px;
  background: #ffffff;
  padding-left: 15px;
  right: 12px;
  transition: stroke 0.3s ease-in-out;
  stroke: #b6b6b6;
  cursor: pointer;
}
.close-box-btn svg:hover path {
  stroke: #000000;
}
.triangle {
  display: none; /* Initially hidden */
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 20px solid #ffffff;
  position: absolute;
  top: -20px;
  /* left: 50%; */
  transform: translateX(-50%);
}
.swiper-inner {
  border: none;
}
.swiper-inner.selected {
  border: 1px solid #a1a1a187;
  border-radius: 20px;
}
/* .swiper-content-icon:hover svg path{
    fill: red;
} */

.custom-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* background: linear-gradient(135deg, #d3d3d3, #a9a9a9);  */
  background-color: #a3a3a3;
  padding: 8px 32px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
  border: none;
  cursor: pointer;
  outline: none;
  transition: background-color 0.3s ease;
  /* height: 48px; */
  gap: 5px;
  border-radius: 4px;
  touch-action: none;
  margin-top: 16px;
}

.custom-button .ripple {
  position: absolute;
  height: 0;
  width: 0;
  border-radius: 50%;
  background-color: #000; /* Semi-transparent dark gray */
  transition: height 0.5s ease-out, width 0.5s ease-out;
}

.custom-button .background {
  position: absolute;
  inset: 0;
  /* background: linear-gradient(to bottom, transparent, #535353); */
  z-index: 1;
}

.custom-button .text {
  position: relative;
  z-index: 2;
}

.custom-box-btn .custom-button:hover .ripple {
  height: 15rem;
  width: 15rem;
}
.custom-button:hover svg {
  z-index: 9;
}

/* animation typing css */
.typing {
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid black;
  width: 0;
  animation: typing 3s steps(40, end) forwards;
}

/* Typing animation */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.fade-in {
  opacity: 0;
  transition: opacity 0.3s ease; /* Adjust the timing for a smoother effect */
}

.fade-in.show {
  opacity: 1;
}

/* 2nd animation css */
.detail-section-text2 {
  margin-top: 20px;
  display: inline-block;
  /* overflow: hidden; */
  /* white-space: nowrap; */
  width: 100%;
}
.page-content {
  margin-top: 20px;
  display: inline-block;
  width: 100%;
}

.detail-section-text2 p,
.page-content p {
  position: relative;
  margin: 0 auto;
  text-align: justify;
  display: inline-block;
  width: auto;
}

/* Initial state for the reveal text */
.reveal-text {
  opacity: 1;
  /* display: inline-block; */
  /* white-space: nowrap; */
  margin-top: 10px !important;
}

/* First word */
.reveal-text .first-word {
  opacity: 1; /* Initially visible */
  display: inline-block; /* Make sure it stays inline */
  white-space: nowrap; /* Prevent wrapping of the first word */
  animation: slideOut 1s forwards; /* Slide-out effect */
  background-color: #ffffff;
  position: relative;
  /* z-index: 99;  */
}

/* Remaining text animation */
.reveal-text .remaining-text {
  opacity: 0; /* Initially hidden */
  display: inline-block; /* Keep the text inline with the first word */
  transform: translateX(-100%); /* Start off the screen */
  animation: slideInFromLeft 1s forwards ease-in-out; /* Slide in */
  animation-delay: 1s; /* Delay for the remaining text */ /* Align it with the first wo */
  white-space: normal;
  /* position: absolute;
    top: 0px;
    left: 0px;
    z-index: 999;
    background-color: #ffffff; */
}

/* Slide out for the first word */
@keyframes slideOut {
  0% {
    opacity: 0;
    transform: translateX(300%); /* Keep centered initially */
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

/* Slide in for the remaining text */
@keyframes slideInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-100%); /* Start from the left and hidden */
  }
  100% {
    opacity: 1;
    transform: translateX(0); /* End in normal position and fully visible */
  }
}

/* animation 3 css */
.detail-section-text3 {
  /* margin: 100px 0; */
}

.animate {
  font-size: 14px;
}

.animate span {
  display: inline-block;
  opacity: 0; /* Start hidden */
  transform: translate(-300px, 0) scale(0); /* Start off-screen to the left */
  animation: sideSlide 0.5s forwards; /* Slide in effect */
}
.content-inner-product-box-upgrade .content-inner-text-box > * {
  margin-bottom: 5px;
  margin-top: 0px;
}
.product-swiper-container .swiper-content-text > * {
  margin: 5px 0px;
}
.caption {
  font-size: 1.7rem;
}
@keyframes sideSlide {
  60% {
    transform: translate(20px, 0) scale(1); /* Slight push forward */
    opacity: 1; /* Fade in */
    color: #000;
  }

  80% {
    transform: translate(20px, 0) scale(1); /* Slight push forward */
    opacity: 1;
    color: red; /* Fade in */
  }

  100% {
    transform: translate(0) scale(1); /* End in place */
    opacity: 1; /* Fully visible */
    color: #000;
  }
}

@media screen and (max-width: 1200px) {
  .block-item svg {
    width: 50px;
    height: 50px;
  }
  .content-inner-img-box {
    padding: 30px 40px 20px 40px;
  }
  .custom-box-btn {
    opacity: 1;
    transform: translate(-50%, 0%);
  }
}
@media screen and (max-width: 1000px) {
  .content-inner-details {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .content-inner-details {
    grid-template-columns: repeat(2, 1fr);
  }
  .product-swiper-container .swiper-image-box {
    height: auto;
  }
}
@media screen and (max-width: 600px) {
  .image-slide-main-box {
    min-width: 97vw;
    max-width: 97vw;
    min-height: 100%;
    max-height: 100%;
  }
}
@media screen and (max-width: 500px) {
  .content-inner-details {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media screen and (max-width: 992px) {
  .product-showcase-section {
    display: block;
  }
  .showcase-title h2 {
    max-width: 100%;
  }
  .showcase-swiper {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .data-sidebar {
    position: fixed;
    right: -300px; /* Start off the screen */
    top: 0;
    max-width: 300px;
  }
  .data-sidebar.open .sidebar-close-icon {
    right: 380px;
  }
  .box-data-sidebar {
    max-width: 100%;
  }
  .box-data-sidebar.visible .sidebar-inner {
    overflow-y: auto;
  }
  .triangle {
    display: none;
  }
  .box-data-sidebar.visible {
    z-index: 999999;
    margin-top: 0px;
  }
  .box-data-sidebar .close-box-btn {
    right: 10px;
    top: 10px;
    padding-left: 0px;
    width: fit-content;
    padding: 0px;
    background: transparent;
    z-index: 999;
  }
  .box-data-sidebar .close-box-btn svg {
    width: 21px;
    height: 21px;
  }
  .box-data-sidebar .close-box-btn path {
    stroke-width: 3px;
  }
  .product_section_detail_title h2 {
    width: 100%;
  }
  .sidebar-content-details {
    padding: 0px;
  }
  .content-inner-image-inner-box img {
    max-width: 230px;
  }
  .content-inner-img-box {
    padding-left: 0px;
    padding-right: 0px;
  }
  .custom_description_content .main-title,
  .custom_description_content .custom-description {
    font-size: 12px !important;
  }
  .product-description-main-block {
    padding-bottom: 30px;
  }
}

/* step 8 section css */
.custom_description_content {
  padding: 0 0 20px 0;
}

.text-caption {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  text-transform: uppercase;
}
.text-caption span {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.text-caption svg,
.text-caption path {
  color: #000000;
  fill: #000000;
  stroke: #000000;
}
.product-description-main-block {
  padding-bottom: 70px !important;
}

@media screen and (max-width: 600px) {
  .product-swiper-container .swiper-container .swiper-pagination-block {
    max-width: 98%;
    height: 60px;
  }
  .product-swiper-container .swiper-pagination-block .swiper-pagination-bullet {
    display: none !important;
  }
  .swiper-content-icon {
    display: none;
  }
}