/** Shopify CDN: Minification failed

Line 16:6 Expected ":"

**/
.sec__inner .banner__media :is(picture, source, img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sec__inner .banner__media .image-picture {
  display: block;
}
/* General Menu Styling */
.navigation__menu-content a {
  font family: poppins;
  color: #333; /* Darker text for better readability */
  text-decoration: none; /* Remove underline from links */
  transition: color 0.3s ease, background-color 0.3s ease; /* Smooth transitions for color and background */
  display: flex; /* Ensure links take full height and can be centered vertically */
  align-items: center; /* Vertically align text within links */
}

.navigation__menu-content a:hover {
  color: #007bff; /* A nice hover color, e.g., a shade of blue */
}

.navigation__menu-content .heading-style {
  
  font-weight: bold; /* Make main menu items bold */
}

.navigation__menu-content .subchildmenu a {
  font-size: 1em; /* Standard font size for sub-menu items */
  
  padding-left: 15px; /* Indent sub-menu items slightly */
}

/* Centering */
.navigation__menu-content .horizontal-list {
  justify-content: center; /* Centers the main menu items horizontally */
}

.navigation__menu-content .menu-mobile-title {
  justify-content: center; /* Centers the mobile menu title */
  text-align: center; /* Ensure text inside the title is centered */
}

/* Spacing and Padding */
.navigation__menu-content .py-10 {
  padding-top: 15px; /* Increase vertical padding for menu items */
  padding-bottom: 15px;
}

.navigation__menu-content .px-30 {
  padding-left: 20px; /* Adjust horizontal padding for menu containers */
  padding-right: 20px;
}

/* Specific adjustments for existing classes to ensure good spacing */
.navigation__menu-content .min-h-55 {
  min-height: 55px; /* Maintain minimum height */
}
.navigation__menu-content .min-h-1025-50 {
  min-height: 50px; /* Maintain minimum height for larger screens */
}
.navigation__menu-content .py-1025-5 {
  padding-top: 5px;
  padding-bottom: 5px;
}
.navigation__menu-content .min-h-1025-unset {
  min-height: unset;
}
.navigation__menu-content .ms-5 {
  margin-left: 5px;
}
.navigation__menu-content .ms-10 {
  margin-left: 10px;
}
.navigation__menu-content .gap {
  gap: 20px; /* Increase gap between horizontal list items */
}
.navigation__menu-content .row-gap-0 {
  row-gap: 0;
}
.navigation__menu-content .px-1025-0 {
  padding-left: 0;
  padding-right: 0;
}

/* Dropdown Menu Specific Styling */
.navigation__menu-content .dropdown-menu > menu-item > a {
  padding-right: 20px; /* Add space for the dropdown arrow */
}

.navigation__menu-content .submenu {
  padding: 10px 0; /* Vertical padding inside the dropdown menu, no horizontal padding */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Soft shadow for dropdowns */
  border-top: 3px solid #d0473e; /* A subtle colored top border for dropdowns */
  background-color: #ffffff; /* White background for submenus */
  border-radius: 4px; /* Slightly rounded corners for the dropdown box */
  min-width: 200px; /* Give dropdowns a minimum width */
  z-index: 100; /* Ensure dropdowns appear above other content */
}

.navigation__menu-content .submenu .grey-bg {
  background-color: #f2f2f2; /* A light grey for the back menu in mobile */
  padding: 10px 20px; /* Padding for the mobile back menu title */
  border-bottom: 1px solid #eee;
}

/* Borders and Separators */
.navigation__menu-content .border-bottom {
  border-bottom: 1px solid #eee; /* Lighter, subtle border for menu items */
}

.navigation__menu-content .border-bottom-1025-0 {
  border-bottom: none; /* Remove borders on larger screens if desired (based on your existing class) */
}

/* Hover Effects for Menu Items */
.navigation__menu-content .level0 > menu-item:hover {
  background-color: #f8f8f8; /* Light background on hover for main menu items */
  border-radius: 4px; /* Slightly rounded corners on hover */
}

.navigation__menu-content .subchildmenu .menu-link a:hover {
  background-color: #e9e9e9; /* Slightly darker background for sub-menu item hover */
  border-radius: 2px;
}


/* Text Colors */
.navigation__menu-content .heading-style.color-dark {
  color: #333; /* Ensure dark text on light backgrounds */
}

.navigation__menu-content .menu-mobile-title .heading-style {
  color: #ffffff; /* White text on the gradient background */
}

/* SVG Icons */
.navigation__menu-content svg {
  fill: currentColor; /* Makes the SVG icon inherit the text color */
}

/* Animation for dropdowns (if your `transition` class handles it) */
.navigation__menu-content .submenu.animation-down-to-up {
    /* You might need to adjust or add specific transition properties here if your existing JS/CSS handles the animation */
    /* Example: */
    /* opacity: 0; */
    /* transform: translateY(-10px); */
    /* transition: opacity 0.3s ease, transform 0.3s ease; */
}

/* Show the submenu on hover (if not already handled by JS) */
.navigation__menu-content .dropdown-menu:hover > .submenu {
    visibility: visible;
    opacity: 1; /* If you add opacity for animation */
    transform: translateY(0); /* If you add transform for animation */
}

/* Active state for menu items */
.navigation__menu-content a.active {
    color: #d0473e; /* Highlight the active menu item */
}

@media screen and (max-width: 767.98px) {
  .text-below-mb[style*="--aspect-ratio"]:before {
    display: none;
  }
  .text-below-mb .py-custom {
    padding-top: 0;
    padding-bottom: 0;
  }
  .text-below-mb.h-custom,
  .text-below-mb.h-full_screen,
  .text-below-mb .h-full_screen {
    min-height: auto;
  }
  .text-below-mb.h-custom .banner__media {
    height: var(--height);
    position: relative;
  }
  multi-content.swiper.row-gap {
    row-gap: 0;
  }
  multi-content[data-enable="true"] > .section__block:not(:first-child) {
    display: none;
  }
  .h-auto-banner-slider {
    height: auto !important;
  }
}

.sec__content:not(.show-content-box):is(
    .container:not(.px-custom),
    .fluid_container:not(.px-custom)
  ) {
  padding-left: 0;
  padding-right: 0;
}
:where(.px-custom:not(.x-min-value)) {
  padding-left: clamp(
    15px,
    calc(15px + (var(--padding-inline) - 15) * var(--responsive-rate)),
    calc(var(--padding-inline) * 1px)
  );
  padding-right: clamp(
    15px,
    calc(15px + (var(--padding-inline) - 15) * var(--responsive-rate)),
    calc(var(--padding-inline) * 1px)
  );
}
:where(.x-min-value) {
  padding-left: calc(var(--padding-inline) * 1px);
  padding-right: calc(var(--padding-inline) * 1px);
}
:where(.px-custom.min-value:not(.container, .fluid_container)) {
  padding-left: clamp(
    calc(var(--padding-inline) * 1px),
    calc(15px + (var(--padding-inline) - 15) * var(--responsive-rate)),
    calc(var(--padding-inline) * 1px)
  );
  padding-right: clamp(
    calc(var(--padding-inline) * 1px),
    calc(15px + (var(--padding-inline) - 15) * var(--responsive-rate)),
    calc(var(--padding-inline) * 1px)
  );
}
:where(.y-min-value) {
  padding-top: calc(var(--padding-block) * 1px);
  padding-bottom: calc(var(--padding-block) * 1px);
}
:where(.py-custom:not(.y-min-value)) {
  padding-top: clamp(
    (var(--padding-block) * 0.64px),
    calc(
      (var(--padding-block) * 0.64px) +
        (var(--padding-block) - (var(--padding-block) * 0.64)) *
        var(--responsive-rate)
    ),
    calc(var(--padding-block) * 1px)
  );
  padding-bottom: clamp(
    (var(--padding-block) * 0.64px),
    calc(
      (var(--padding-block) * 0.64px) +
        (var(--padding-block) - (var(--padding-block) * 0.64)) *
        var(--responsive-rate)
    ),
    calc(var(--padding-block) * 1px)
  );
}
.h-custom {
  min-height: var(--height);
}
.h-fix-custom {
  height: var(--height);
}
@media (min-width: 992px) {
  .h-custom {
    min-height: var(--height-desktop);
  }
  .h-fix-custom {
    height: var(--height-desktop);
  }
  .w-as-max {
    width: var(--max-width);
  }
}
.content-box::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: var(--content-bg);
  opacity: var(--opacity);
  pointer-events: none;
  border-radius: var(--rounded-radius, 0);
}
.content-box > * {
  position: relative;
}
.sec__video video,
.video-foreground iframe,
.video-foreground {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
  object-fit: cover;
}
@media screen and (max-width: 576.98px) {
  multi-content.swiper.row-gap-30 {
    row-gap: 0;
  }
}
@media (min-width: 768px) {
  .rounded-md {
    border-radius: var(--rounded-radius);
    overflow: hidden;
  }
  .rounded-md .remove-rounded {
    border-radius: 0;
  }
  .py-md-10 {
    padding-block: 1rem;
  }
}
multi-content.rounded .remove-rounded {
  border-radius: 0;
}
video-section.h-full video {
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sec__multi-content video-section.h-full video{
  width: 100%;
}
@media (min-width: 992px) {
  .p-lg-content-btn {
    padding: 1.5rem 5.5rem;
  }
}

.text-below-video[style*="--aspect-ratio"]:before {
  display: none;
}
/* section width banner product */
.product-banner__image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.product-banner__image.active {
  opacity: 1;
  visibility: visible;
}
.background-block .section__block-inner{
  background: var(--content_bg_color);
  border-radius: var(--rounded-radius);
  --color-dark: var(--color-heading);
  padding: 30px 15px;
}
.block-text-product__infor{
  background-color: #fff;
  border-radius: 100px;
  overflow: hidden;
  padding: 10px 15px;
}
.block-text-product__infor-image {
  flex-shrink: 0;
  object-fit: contain;
}
.icon-box-content-des,
.block-text-product__infor--name{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 290px;
}
.block-text-product__price .card-product-price{
  justify-content: flex-end;
  flex-wrap: nowrap;
  font-size: 1.6rem;
}
@media (min-width: 992px) {
  .block-text-product__infor{
    padding: 10px 30px;
  }
  .background-block .section__block-inner{
    padding: 30px;
  }
}
@media (max-width: 479px){
  .block-text-product__infor{
    flex-direction: column;
    padding: 20px;
   text-align: center;
   border-radius: var(--rounded-radius);
  }
  .block-text-product__infor-image{
    --custom-width: 100% !important;
  }
}
/* section-slide-with-banner */
@media (min-width: 1025px) {
  .section-slide-with-banner{
    display: flex;
    margin-right: calc(-1* var(--coloumn-gap));
    margin-left: calc(-1* var(--coloumn-gap));
    padding-left: calc(var(--coloumn-gap) / 2);
    padding-right: calc(var(--coloumn-gap) / 2);
    height: 100%;
  }
  .section-slide-with-banner .slide__wrapper{
    flex: 0 0 auto;
    width: var(--slide-width);
    padding-left: calc(var(--coloumn-gap) / 2);
    padding-right: calc(var(--coloumn-gap) / 2);
  }
  .section-slide-with-banner .banner__wrapper{
    flex: 0 0 auto;
    width: calc(100% - var(--slide-width));
    padding-left: calc(var(--coloumn-gap) / 2);
    padding-right: calc(var(--coloumn-gap) / 2);
  }
  .section-slide-with-banner .sec__inner,
  .section-slide-with-banner .slideshow {
    height: 100%;
  }
}
.banner__inner.grid-1,
.banner__inner.grid-2,
.banner__inner.grid-3{
    display: flex;
    gap: var(--coloumn-gap);  
}
.section-slide-with-banner .section__block-inner{
  width: 100%;
  background: none;
}
@media (min-width: 479px) {
  .banner__inner.grid-1,
  .banner__inner.grid-2,
  .banner__inner.grid-3{
    grid-template-columns: 1fr 1fr;
    display: grid;
    height: 100%;
  }
  .banner__inner.grid-1{
    grid-template-columns: 1fr;
  }
  .grid-3 .section__block-inner:nth-child(1) {
      grid-area: 1 / 1 / 3 / 2;
  }

  .grid-3 .section__block-inner:nth-child(2) {
      grid-area: 1 / 2 / 2 / 3;
  }

  .grid-3 .section__block-inner:nth-child(3) {
      grid-area: 2 / 2 / 3 / 3;
  }
}
@media (max-width: 1024.944px) {
  .section-slide-with-banner .slide__wrapper{
    margin-bottom: var(--coloumn-gap, 2rem);
  }
}