/* ==================================================
   EXTRA LARGE DESKTOP
   ================================================== */

@media (min-width: 1920px) {
  .container-fluid {
    max-width: 1800px;
  }
}


/* ==================================================
   XXL AND BELOW
   Bootstrap: < 1400px
   ================================================== */

@media (max-width: 1399.98px) {
  .col-primary-menu {
    align-self: center;
    order: 2;
  }

  .col-primary-menu nav {
    justify-self: end;
  }

  .col-header-search {
    align-self: center;
    order: 1;
  }

  .col-header-last {
    order: 3;
  }

  .sub-menu-parent-title {
    display: none;
  }

  .about-us-icons img {
    width: 70px;
    height: 70px;
  }
}


/* ==================================================
   XL AND BELOW
   Bootstrap: < 1200px
   ================================================== */

@media (max-width: 1199.98px) {

  /* --------------------------------------------------
     Global
     -------------------------------------------------- */

  .hex {
    --w: clamp(100px, 25vw, 178px);
    --h: calc(var(--w) * 1.1547);
    font-size: clamp(11px, 2.3vw, 18px);
  }

  .layout {
    grid-template-columns: 1fr;
  }

  .stats,
  .panels {
    grid-template-columns: 1fr 1fr;
  }


  /* --------------------------------------------------
     About Us
     -------------------------------------------------- */

  .about-us-icons .columns {
    gap: 1.5rem;
  }


  /* --------------------------------------------------
     Subscribe
     -------------------------------------------------- */

  section#subscribe h2 {
    font-size: 1.5rem;
  }

  section#subscribe .column-3 .column-inner {
    align-items: center;
    height: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  section#subscribe .column-3 .column-inner:after {
    background-position: bottom center;
  }


  /* --------------------------------------------------
     Header
     -------------------------------------------------- */

  .site-header,
  .site-header *,
  .site-header *::before,
  .site-header *::after {
    box-sizing: border-box;
  }

  .site-header {
    position: relative;
    z-index: 1000;
    width: 100%;
    max-width: 100%;
    background: #fff;
  }

  .site-header > .container-fluid {
    width: 100%;
    max-width: 100%;
    padding-right: 2.5rem;
    padding-left: 2.5rem;
  }

  .site-header > .container-fluid > .row {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    min-height: 10rem;
    margin-right: 0;
    margin-left: 0;
  }

  .site-header > .container-fluid > .row > .d-none.d-sm-block {
    display: none !important;
  }


  /* --------------------------------------------------
     Header: Logo
     -------------------------------------------------- */

  .site-header .site-branding {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    min-width: 0;
    height: 100%;
  }

  .site-header .site-logo,
  .site-header .custom-logo-link {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
  }

  .site-header .custom-logo {
    display: block;
    width: auto;
    max-width: 22rem;
    height: auto;
  }

  .site-header > .container-fluid > .row > div:has(.site-branding) {
    flex: 0 1 auto;
    width: auto;
    max-width: calc(100% - 7rem);
    min-width: 0;
    padding-right: 0;
    padding-left: 0;
  }


  /* --------------------------------------------------
     Header: Primary Navigation
     -------------------------------------------------- */

  .site-header .col-primary-menu {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    max-width: none;
    min-width: 0;
    margin-left: auto;
    padding-right: 0;
    padding-left: 2rem;
  }

  .site-header .primary-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    max-width: 100%;
  }

  .site-header #primary-nav-container {
    display: none !important;
  }


  /* --------------------------------------------------
     Header: Mobile Toggler
     -------------------------------------------------- */

  .site-header .navbar-toggler {
    position: relative;
    z-index: 1002;
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 5.2rem;
    height: 5.2rem;
    padding: 0;
    margin: 0;
    color: #213c83;
    background: transparent;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
  }

  .site-header .navbar-toggler:hover,
  .site-header .navbar-toggler:focus,
  .site-header .navbar-toggler:active {
    color: #213c83;
    background: transparent;
    outline: 0;
    box-shadow: none;
  }

  .site-header .navbar-toggler svg {
    display: block;
    width: 3rem;
    height: 3rem;
    pointer-events: none;
  }


  /* --------------------------------------------------
     Header: Mobile Menu Panel
     -------------------------------------------------- */

  .site-header #mobile-menu-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 1100;

    display: block;

    width: min(48rem, 100vw);
    max-width: 100vw;
    min-width: 0;
    height: 100dvh;
    max-height: 100dvh;

    padding: 3rem;
    margin: 0;

    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    background: #fff;
    box-shadow: -1rem 0 3rem rgba(0, 0, 0, 0.14);

    visibility: hidden;
    transform: translate3d(100%, 0, 0);

    transition:
      transform 0.35s ease,
      visibility 0.35s ease;
  }

  .site-header #mobile-menu-wrapper.show,
  .site-header #mobile-menu-wrapper.collapsing {
    visibility: visible;
    transform: translate3d(0, 0, 0);
  }

  .site-header #mobile-menu-wrapper.collapsing {
    width: min(48rem, 100vw);
    max-width: 100vw;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  .site-header #mobile-menu-wrapper > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .site-header #mobile-menu-wrapper > h3 {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-right: 6rem;
    margin: 0 0 3rem;
    color: #213c83;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    overflow-wrap: anywhere;
  }


  /* --------------------------------------------------
     Header: Close Button
     -------------------------------------------------- */

  .site-header #mobile-menu-wrapper #btnclose {
    position: absolute;
    top: 2.2rem;
    right: 2.2rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.8rem;
    height: 4.8rem;
    padding: 0;
    margin: 0;
    color: #213c83;
    background: transparent;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
  }

  .site-header #mobile-menu-wrapper #btnclose:hover,
  .site-header #mobile-menu-wrapper #btnclose:focus,
  .site-header #mobile-menu-wrapper #btnclose:active {
    color: #e51667;
    background: transparent;
    outline: 0;
    box-shadow: none;
  }

  .site-header #mobile-menu-wrapper #btnclose svg {
    display: block;
    width: 3rem;
    height: 3rem;
    pointer-events: none;
  }


  /* --------------------------------------------------
     Header: Mobile Menu
     -------------------------------------------------- */

  .site-header .mobile-menu-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .site-header #mobile-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .site-header #mobile-menu > li {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;
    border-bottom: 0.1rem solid rgba(33, 60, 131, 0.18);
  }

  .site-header #mobile-menu > li > a {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 1.5rem 4rem 1.5rem 0;
    color: #213c83;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    background: transparent;
    overflow-wrap: anywhere;
  }

  .site-header #mobile-menu > li > a:hover,
  .site-header #mobile-menu > li > a:focus {
    color: #e51667;
  }


  /* --------------------------------------------------
     Header: Submenu
     -------------------------------------------------- */

  .site-header #mobile-menu .sub-menu-wrapper {
    position: static;
    display: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0 0 1.5rem;
    margin: 0;
    overflow: hidden;
    background: transparent;
  }

  .site-header #mobile-menu .menu-item-has-children:hover > .sub-menu-wrapper,
  .site-header #mobile-menu .menu-item-has-children:focus-within > .sub-menu-wrapper {
    display: block;
  }

  .site-header #mobile-menu .sub-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0 0 0 1.5rem;
    margin: 0;
    list-style: none;
  }

  .site-header #mobile-menu .sub-menu-parent-title {
    display: none;
  }

  .site-header #mobile-menu .sub-menu > li {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;
  }

  .site-header #mobile-menu .sub-menu > li > a {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 1rem 1.5rem;
    color: #213c83;
    font-size: 1.1rem;
    line-height: 1.4;
    text-decoration: none;
    border-left: 0.2rem solid rgba(33, 60, 131, 0.18);
    overflow-wrap: anywhere;
  }

  .site-header #mobile-menu .sub-menu > li > a:hover,
  .site-header #mobile-menu .sub-menu > li > a:focus {
    color: #e51667;
    border-left-color: #e51667;
  }


  /* --------------------------------------------------
     Header: Language Menu
     -------------------------------------------------- */

  .site-header #language-menu-wrapper {
    position: fixed;
    inset: 0;
    z-index: 1200;
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
    height: 100dvh;
    max-height: 100dvh;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
  }

  .site-header #language-menu-wrapper .container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 3rem;
    margin: 0;
  }

  .site-header #language-menu-wrapper .btn-menu-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.8rem;
    height: 4.8rem;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
  }


  /* --------------------------------------------------
     Ingredients
     -------------------------------------------------- */

  section#ingredients .section-top {
    padding-right: 3rem;
    padding-left: 3rem;
    margin-bottom: 1rem;
    text-align: center;
  }

  section#ingredients .section-top h2 {
    font-size: clamp(3.6rem, 6vw, 5rem);
  }

  .ingredient-slider .content-card {
    display: flex;
    flex-wrap: wrap;
    min-height: auto;
  }

  .ingredient-slider .left-column,
  .ingredient-slider .right-column {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  .ingredient-slider .left-column {
    padding-bottom: 0 !important;
  }

  .ingredient-slider .left-column .column-inner {
    padding: 0 2rem 3rem !important;
  }

  .ingredient-slider .hex-wrap {
    width: min(100%, 45rem);
    margin-right: auto;
    margin-left: auto;
  }

  .ingredient-slider .right-column {
    padding: 0 3rem 4rem;
    text-align: center;
  }

  .ingredient-slider .right-column h2 {
    font-size: clamp(3.4rem, 6vw, 4.8rem);
  }

  .ingredient-slider .right-column p {
    max-width: 70rem;
    margin-right: auto;
    margin-left: auto;
  }

  .ingredient-slider .right-column .btn-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 3rem !important;
  }

  section#ingredients .choose-product-wrapper {
    display: flex;
    align-items: center !important;
    justify-content: center;
    padding: 2rem 1rem;
  }

  .choose-product-wrapper .arrow-btn-wrapper {
    display: flex;
    gap: .5rem;
  }


  /* --------------------------------------------------
     Honeycomb Banner Layout
     -------------------------------------------------- */

  .honeycomb-banner .banner-content .column-inner {
    height: auto;
  }

  .honeycomb-banner .column-inner > .row {
    align-content: start;
  }

  .honeycomb-banner .column-title {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    align-content: start;
    padding-bottom: 0 !important;
  }

  .honeycomb-banner .column-honeycomb {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    padding-right: 0;
    padding-left: 0;
    justify-self: auto;
  }


  /* --------------------------------------------------
     Honeycomb Responsive Controls

     Adjust these variables to tune the honeycomb:

     --hex-size  = size of each hex
     --hex-gap-x = horizontal gap
     --hex-gap-y = vertical gap
     -------------------------------------------------- */

  .honeycomb-banner .honeycomb {
    --hex-size: clamp(94px, 30vw, 198px);
    --hex-gap-x: clamp(0px, 0.25vw, 4px);
    --hex-gap-y: clamp(-18px, -2.2vw, -8px);

    --hex-step-x: calc(var(--hex-size) + var(--hex-gap-x));
    --hex-step-y: calc(var(--hex-size) + var(--hex-gap-y));

    position: relative;
    inset: auto;

    width: calc(
      (var(--hex-size) * 3) +
      (var(--hex-gap-x) * 2)
    );

    max-width: 100%;

    height: calc(
      (var(--hex-size) * 3) +
      (var(--hex-gap-y) * 2)
    );

    margin: 1rem auto clamp(2.5rem, 6vw, 4.5rem);
  }

  .honeycomb-banner .hex {
    --w: var(--hex-size);
    --h: var(--hex-size);

    width: var(--hex-size);
    height: var(--hex-size);

    transform: translate(-50%, -50%);
  }

  .honeycomb-banner .hex-item {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
  }


  /* --------------------------------------------------
     Honeycomb: Top Row
     -------------------------------------------------- */

  .honeycomb-banner .hex-0 {
    left: calc(50% - (var(--hex-step-x) / 2));
    top: calc(var(--hex-size) / 2);
  }

  .honeycomb-banner .hex-1 {
    left: calc(50% + (var(--hex-step-x) / 2));
    top: calc(var(--hex-size) / 2);
  }


  /* --------------------------------------------------
     Honeycomb: Middle Row
     -------------------------------------------------- */

  .honeycomb-banner .hex-2 {
    left: calc(50% - var(--hex-step-x));
    top: calc(
      (var(--hex-size) / 2) +
      var(--hex-step-y)
    );
  }

  .honeycomb-banner .hex-3 {
    left: 50%;
    top: calc(
      (var(--hex-size) / 2) +
      var(--hex-step-y)
    );
  }

  .honeycomb-banner .hex-4 {
    left: calc(50% + var(--hex-step-x));
    top: calc(
      (var(--hex-size) / 2) +
      var(--hex-step-y)
    );
  }


  /* --------------------------------------------------
     Honeycomb: Bottom Row
     -------------------------------------------------- */

  .honeycomb-banner .hex-5 {
    left: calc(50% - (var(--hex-step-x) / 2));
    top: calc(
      (var(--hex-size) / 2) +
      (var(--hex-step-y) * 2)
    );
  }

  .honeycomb-banner .hex-6 {
    left: calc(50% + (var(--hex-step-x) / 2));
    top: calc(
      (var(--hex-size) / 2) +
      (var(--hex-step-y) * 2)
    );
  }


  /* --------------------------------------------------
     Honeycomb: Content
     -------------------------------------------------- */

  .honeycomb-banner .hex div.hex-title {
    padding-left: 9%;
    padding-right: 12%;
    padding-bottom: 29%;
  }

  .honeycomb-banner .hex div.hex-title span.title {
    font-size: clamp(0.58rem, 1.55vw, 1.1rem);
  }

  .honeycomb-banner .hex div.hex-title span.sub {
    font-size: clamp(0.42rem, 1.05vw, 0.8rem);
  }


  /* --------------------------------------------------
     Dashboard
     -------------------------------------------------- */

  #dashboard {
    margin-top: 1rem;
  }

  #dashboard .heading {
    margin-left: 0;
  }

  #dashboard .layout {
    grid-template-columns: 1fr;
  }

  #dashboard .stats,
  #dashboard .panels {
    grid-template-columns: 1fr 1fr;
  }
}

/* Smaller laptops: 1200px–1366px */
@media (min-width: 1200px) and (max-width: 1366px) {

  .honeycomb-banner {
    --laptop-scale: 0.82;

    --hex-scale: var(--laptop-scale);

    --hex-gap-x: calc(218px * var(--laptop-scale));
    --hex-row2-y: calc(186px * var(--laptop-scale));
    --hex-row3-y: calc(360px * var(--laptop-scale));
  }
}

/* ==========================================================
 * TABLET / IPAD PORTRAIT
 * Example: iPad 13" portrait = 1032 × 1376
 * ========================================================== */
@media (min-width: 768px) and (max-width: 1199.98px) {

  .honeycomb-banner .honeycomb {
    /*
     * Smaller than desktop, but still large enough
     * to keep the honeycomb prominent.
     */
    --hex-size: clamp(135px, 17vw, 175px);

    /*
     * Keep the hexes close together.
     */
    --hex-gap-x: clamp(-4px, 0.2vw, -4px);

    /*
     * Pull the rows closer together.
     * Negative is intentional.
     */
    --hex-gap-y: clamp(-24px, -1.5vw, -24px);

    margin-top: 1rem;
    margin-bottom: 3rem;
  }

  .hex-item__fill {
    inset: -3px;
  }
}

/* ==========================================================
 * IPAD 13 LANDSCAPE / SMALL LAPTOP
 * roughly 1200px – 1439px
 * ========================================================== */
@media (min-width: 1200px) and (max-width: 1439.98px) {

  .honeycomb-banner .honeycomb {
    /*
     * Shrink the complete desktop honeycomb slightly
     * and pull it left so the right side is not clipped.
     */
    transform: translateX(-8rem) scale(.84);
    transform-origin: center center;
  }

}

/* ==================================================
   LG AND BELOW
   Bootstrap: < 992px
   ================================================== */

@media (max-width: 991.98px) {

  /* --------------------------------------------------
     Ingredients
     -------------------------------------------------- */

  section#ingredients .hex-wrap-inner img {
    width: 100%;
    height: 250px;
  }

  section#ingredients div.bx-viewport {
    min-height: 400px;
  }


  /* --------------------------------------------------
     About Us
     -------------------------------------------------- */

  section#about-us .column-1 {
    width: 2%;
  }

  section#about-us .column-2 {
    width: 90%;
  }

  section#about-us .column-3 {
    width: 100%;
    background-image: unset;
  }

  .about-us-icons .columns {
    gap: 2.5rem;
  }

  section#about-us .about-us-icons span {
    display: block;
  }


  /* --------------------------------------------------
     Subscribe
     -------------------------------------------------- */

  section#subscribe .container-fluid {
    padding-left: 0;
    padding-right: 0;
  }

  section#subscribe .column-1,
  section#subscribe .column-4 {
    width: 5%;
  }

  section#subscribe .column-2,
  section#subscribe .column-3 {
    width: 100%;
  }


  /* --------------------------------------------------
     Property
     -------------------------------------------------- */

  .property-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .content-card .btn-main {
    position: static;
    width: 100%;
  }

  .cert-list {
    margin-top: 1rem;
  }


  /* --------------------------------------------------
     Content Grids
     -------------------------------------------------- */

  .hero-layout,
  .info-grid,
  .benefit-card,
  .benefit-card:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .faq-grid {
    grid-template-columns: 1fr;
  }

  #faq .faq-description {
    width: 100%;
  }

  .logo-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
  }


  /* --------------------------------------------------
     Login / Register
     -------------------------------------------------- */

  .register-login-page {
    padding-top: 2.75rem;
  }

  .usp-card:hover {
    transform: none;
  }


  /* --------------------------------------------------
     Honeycomb
     -------------------------------------------------- */

  .honeycomb-banner {
    height: auto;
    min-height: 720px;
  }

  .honeycomb-banner .banner-content {
    min-height: 720px;
  }
}


/* ==================================================
   MD AND BELOW
   Bootstrap: < 768px
   ================================================== */

@media (max-width: 767.98px) {

  /* --------------------------------------------------
     Header
     -------------------------------------------------- */

  .site-header > .container-fluid {
    padding-right: 2rem;
    padding-left: 2rem;
  }

  .site-header > .container-fluid > .row {
    min-height: 4.8rem;
  }

  .site-header .custom-logo {
    max-width: 13rem;
  }

  .site-header > .container-fluid > .row > div:has(.site-branding) {
    max-width: calc(100% - 6.5rem);
  }

  .site-header .col-primary-menu {
    align-self: center;
    padding-left: 1.5rem;
  }

  .site-header .navbar-toggler {
    width: 2.8rem;
    height: 2.8rem;
  }

  .site-header .navbar-toggler svg {
    width: 2rem;
    height: 2rem;
  }

  .site-header #mobile-menu-wrapper,
  .site-header #mobile-menu-wrapper.collapsing {
    width: 100vw;
    max-width: 100vw;
    padding: 2.5rem 2rem;
    box-shadow: none;
  }

  .site-header #mobile-menu-wrapper > h3 {
    padding-right: 5.5rem;
    margin-bottom: 2.5rem;
    font-size: 2.8rem;
  }

  .site-header #mobile-menu-wrapper #btnclose {
    top: 1.8rem;
    right: 1.8rem;
  }

  .site-header #mobile-menu > li > a {
    font-size: 1.2rem;
  }

  .site-header #mobile-menu .sub-menu > li > a {
    font-size: 1.1rem;
  }

  .site-header #language-menu-wrapper .container {
    padding: 2.5rem 2rem;
  }

  .col-header-search form {
    display: none;
  }


  /* --------------------------------------------------
     Ingredients
     -------------------------------------------------- */

  section#ingredients .content-wrap .content-card {
    border-radius: 30px;
  }

  section.my-5.py-4.overflow-hidden .section-top {
    padding-right: 2rem;
    padding-left: 2rem;
  }

  section#ingredients .right-column .column-inner {
    padding: 2rem 3rem;
  }

  section#ingredients div.bx-viewport {
    min-height: 650px;
  }

  section#ingredients div.choose-product-wrapper {
    justify-content: start;
    padding: 1rem;
  }

  section#ingredients .choose-product-wrapper .arrow-btn-wrapper {
    gap: 0.5rem;
  }

  .ingredient-slider .left-column .column-inner {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }

  .ingredient-slider .hex-wrap {
    width: min(100%, 40rem);
  }

  .ingredient-slider .right-column {
    padding-right: 2rem;
    padding-left: 2rem;
  }

  .ingredient-slider .right-column h2 {
    font-size: clamp(3rem, 8vw, 4rem);
  }

  .ingredient-slider .right-column p {
    font-size: 1.6rem;
  }

  section#ingredients .choose-product-wrapper {
    padding-right: 2rem;
    padding-left: 2rem;
  }


  /* --------------------------------------------------
     Honeycomb
     -------------------------------------------------- */

  .honeycomb-banner {
    min-height: 660px;
  }

  .honeycomb-banner .banner-content {
    min-height: 660px;
    border-radius: 20px;
  }

  .honeycomb-banner .column-title {
    padding: 2rem !important;
  }

  .honeycomb-banner .column-title h1 {
    font-size: clamp(1.9rem, 7vw, 2.6rem);
  }

  .honeycomb-banner .honeycomb {
    --hex-size: clamp(94px, 30vw, 170px);

    margin-top: 0.75rem;
    margin-bottom: 3.5rem;
  }

  .honeycomb-banner .hex-item__fill {
    inset: -6px;
  }

  .hex div.hex-title {
    padding-left: 10px;
  }

  .hex-btn-more {
    padding-bottom: 12px;
  }

  .hex-btn-more .hex-btn-container {
    padding-bottom: 0;
  }

  .hex-btn-more .azeco_button__icon {
    width: 1rem;
  }

  .hex-btn-more .azeco_button__arrow {
    width: 1.4rem;
    height: 1.4rem;
  }


  /* --------------------------------------------------
     General Layout
     -------------------------------------------------- */

  .tab-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .panel {
    padding: 2rem;
  }

  .download-card {
    padding: 2rem;
    gap: 2rem;
  }

  .form-grid,
  .team-grid,
  .usp-item {
    grid-template-columns: 1fr;
  }

  .hero-shape {
    aspect-ratio: unset;
  }

  .profile span {
    display: none;
  }

  .stats,
  .panels {
    grid-template-columns: 1fr;
  }

  .page-template section .right-col .column-inner {
    padding: 3rem 0;
  }

  .page-template-magazine .featured-news-2 h3 {
    width: 100%;
  }


  /* --------------------------------------------------
     Register / Login
     -------------------------------------------------- */

  .register-layout,
  .register-layout .login-form-container {
    padding: 1rem;
  }

  .register-layout .usp-container {
    padding: 0;
  }


  /* --------------------------------------------------
     Request Kit
     -------------------------------------------------- */

  section#request-kit {
    height: auto !important;
    padding: 3rem 0;
  }

  section#request-kit .column-image {
    height: 12rem !important;
  }


  /* --------------------------------------------------
     About Us
     -------------------------------------------------- */

  section#about-us .hex-wrap {
    width: 300px;
  }


  /* --------------------------------------------------
     News / Announcement
     -------------------------------------------------- */

  .more-news-card.more-news-featured {
    align-items: flex-start;
    min-width: 100%;
    min-height: 23rem;
  }

  section#announcement .column-inner .row {
    padding-left: 0;
  }


  /* --------------------------------------------------
     Breadcrumbs
     -------------------------------------------------- */

  .breadcrumbs {
    margin-top: 0;
    font-size: 0.8rem;
  }


  /* --------------------------------------------------
     Benefits
     -------------------------------------------------- */

  .benefit-card .bg-white-bottom-line::before {
    top: 0;
    height: 50px;
  }

  .benefit-card-reverse .benefit-visual {
    right: unset;
  }

  .benefit-card-reverse .benefit-image-wrapper::before {
    top: 26px;
    right: -84px;
  }


  /* --------------------------------------------------
     Dashboard
     -------------------------------------------------- */

  #dashboard .stats,
  #dashboard .panels {
    grid-template-columns: 1fr;
  }

  .page-head {
    grid-template-columns: unset;
    margin-bottom: 0;
  }

  .page-head .page-intro {
    width: 100%;
  }


  /* --------------------------------------------------
     Filters
     -------------------------------------------------- */

  .filter--vertical .filter-layout {
    grid-template-columns: 1fr;
  }

  .filter-grid .ewm-filter__results .ewm-filter__results-inner,
  .ingredient-grid .ewm-filter__results .ewm-filter__results-inner {
    grid-template-columns: 1fr;
  }

  .filter-search {
    margin: 1rem 0;
  }

  .filter-search__input {
    font-size: 1.1rem;
  }

  .filter-search__button {
    padding: 1rem;
  }

  .filter-search__icon {
    width: 1.8rem;
    height: 1.8rem;
  }

  .filter-divider {
    margin-bottom: 1.5rem;
  }

  .info-card {
    min-height: unset;
  }


  /* --------------------------------------------------
     BX Slider
     -------------------------------------------------- */

  .bx-wrapper {
    margin-bottom: 10px;
  }


  /* --------------------------------------------------
     Bootstrap Row
     -------------------------------------------------- */

  .row {
    margin-left: 0;
    margin-right: 0;
  }
}


/* ==================================================
   SM AND BELOW
   Bootstrap: < 576px
   ================================================== */

@media (max-width: 575.98px) {

  /* --------------------------------------------------
     Header
     -------------------------------------------------- */

  .site-header > .container-fluid {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }

  .site-header .custom-logo {
    max-width: 10rem;
  }

  .site-header > .container-fluid > .row > div:has(.site-branding) {
    max-width: calc(100% - 5.8rem);
  }

  .site-header .col-primary-menu {
    padding-left: 1rem;
  }

  .site-header .navbar-toggler {
    width: 2.4rem;
    height: 2.4rem;
  }

  .site-header .navbar-toggler svg {
    width: 2rem;
    height: 2rem;
  }

  .site-header #mobile-menu-wrapper,
  .site-header #mobile-menu-wrapper.collapsing {
    width: 100vw;
    max-width: 100vw;
    padding: 2rem 1.5rem;
  }

  .site-header #mobile-menu-wrapper > h3 {
    padding-right: 5rem;
    font-size: 2.5rem;
  }

  .site-header #mobile-menu-wrapper #btnclose {
    top: 1.4rem;
    right: 1.4rem;
    width: 4.4rem;
    height: 4.4rem;
  }

  .site-header #mobile-menu-wrapper #btnclose svg {
    width: 2.7rem;
    height: 2.7rem;
  }

  .site-header #mobile-menu > li > a {
    padding-top: 1.3rem;
    padding-right: 3.5rem;
    padding-bottom: 1.3rem;
    font-size: 1.2rem;
  }

  .site-header #mobile-menu .sub-menu {
    padding-left: 1rem;
  }

  .site-header #mobile-menu .sub-menu > li > a {
    padding: 0.5rem 1.2rem;
    font-size: 1.1rem;
  }

  .site-header #language-menu-wrapper .container {
    padding: 2rem 1.5rem;
  }


  /* --------------------------------------------------
     Mobile Navigation
     -------------------------------------------------- */

  #mobile-menu .menu-item-has-children > a {
    padding-right: 5rem;
  }

  #mobile-menu .mobile-nav__toggle {
    width: 2rem;
    height: 4rem;
  }

  #mobile-menu .mobile-nav__toggle svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  #mobile-menu .sub-menu {
    padding-left: 1rem;
  }

  #mobile-menu .sub-menu > li > a {
    padding: 0.9rem 1.2rem;
    font-size: 1.5rem;
  }


  /* --------------------------------------------------
     Ingredients
     -------------------------------------------------- */

  section#ingredients .section-top h2 {
    font-size: clamp(2.8rem, 9vw, 3.6rem);
  }

  section#ingredients .ingredient-slider .left-column .column-inner {
    padding-right: 5rem !important;
    padding-left: 5rem !important;
  }

  section#ingredients .ingredient-slider .hex-wrap {
    position: relative;
    top: -1.5rem;
    width: min(100%, 36rem);
  }

  .ingredient-slider .right-column {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }

  .ingredient-slider .right-column h2 {
    font-size: clamp(2.8rem, 9vw, 3.6rem);
  }

  .choose-product-wrapper {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }


  /* --------------------------------------------------
     Honeycomb
     -------------------------------------------------- */

  .honeycomb-banner {
    min-height: 620px;
  }

  .honeycomb-banner .banner-content {
    min-height: 620px;
  }

  .honeycomb-banner .column-title {
    padding: 1.5rem !important;
  }

  .honeycomb-banner .hex div.hex-title span.title {
    font-size: clamp(0.72rem, 2.1vw, 0.72rem);
  }

  .honeycomb-banner .hex div.hex-title span.sub {
    font-size: clamp(0.55rem, 1.6vw, 0.55rem);
  }

  .honeycomb-banner .hex-btn-more {
    bottom: 10px;
    padding-bottom: 8px;
  }


  /* --------------------------------------------------
     Register / Login
     -------------------------------------------------- */

  .register-login-page {
    padding: 2.25rem 0 1rem;
  }

  .title-divider {
    margin: 1.75rem 0 2.25rem;
  }

  .form-card {
    border-radius: 20px;
  }

  .usp-icon {
    width: 64px;
    height: 58px;
    flex-basis: 64px;
  }

  .register-login-page .usp-icon {
    height: auto;
  }
}


/* ==================================================
   BODY LOCK
   ================================================== */

body:has(#mobile-menu-wrapper.show),
body:has(#language-menu-wrapper.show) {
  overflow: hidden;
}