:root {
  --color-primary: #3BB6C2 !important;
  --color-primary-lighter: #2FA5AD !important;
  --color-on-primary: #ffffff !important;
}
.gap-6 {
    gap: calc(var(--spacing) * 10);
}
/* Search overlay */
#search-content,
.search-wrapper,
.instant-search-wrapper {
    z-index: 2000 !important;
}

.cataloglabel.cataloglabel-placeholder.direction-horizontal {
    z-index: 1 !important;
}

.bg-secondary {
    background-color: oklch(0.74 0.11 204.78);
}

.justify-center {
    justify-content: center;
    margin-right: 5px;
}

.pagebuilder-slider-g-ban [data-content-type="slide"] .pagebuilder-slide-wrapper {
    background-size: contain !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    min-height: unset !important;
}

#html-body .pagebuilder-column-g-ban[data-pb-style] {
    min-height: 0 !important;
}

.footer-logo a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.footer-logo img {
    height: 40px !important;
    width: auto !important;
}

.footer-logo span {
    font-size: 14px !important;
    line-height: 1.2;
}

.footer-logo {
    opacity: 0.85;
    transition: opacity .2s ease;
}

.footer-logo:hover {
    opacity: 1;
}

nav.absolute.right-0.top-full.z-20.w-56.py-2.mt-1.overflow-auto.origin-top-left.rounded-sm.shadow-lg.sm\:w-48.lg\:mt-3.bg-white {
    width: 75px;
}

.bg-gray-100.border-t.border-gray-300.pb-16 {
    box-shadow: 4px -1px 7px -2px #3ec0cd, 0 1px 2px #3ec0cd;
}
.bg-surface.border-t.border-b.border-gray-300 {
    box-shadow: 4px -1px 7px -2px #3ec0cd, 0 1px 2px #3ec0cd;
}


.title-font.font-medium.text-gray-900.tracking-widest.text-sm.mb-3.uppercase {
    display: none;
}
button[x-data="initPrint"] {
    display: none !important;
}
.py-1.mx-auto {
    margin-inline: 0!important;
}
.bg-black {
    background-color: #0f0f0f82;
}
button.inline-flex.items-center.justify-center.rounded-full.bg-cyan-500.px-8.py-3.text-lg.font-bold.text-white.transition.hover\:opacity-90 {
    background-color: #3ec0cd;
}
h1.h1-zag {
    font-size: 35px;
    font-weight: 500;
}
h2.h2-zag {
    font-size: 30px;
    font-weight: 500;
}
h3.h3-zag {
    font-size: 25px;
    font-weight: 500;
}
.mstInPage__results.overflow-y-auto.overflow-x-hidden.grid.gap-1.sm\:grid-cols-8 {
    max-height: calc(100dvh - 260px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: auto;
    scrollbar-color: #39bdc9 #f1f3f5;
}
/* Desktop */
@media (min-width: 1536px) {
  .rootmenu .verticalmenu02 .vertical-list .varticalmenu_main {
        max-width: 1250px;
    }
    .rw-menu-wrapper {
    z-index: 2 !important;
    position: sticky;
    }
    .rootmenu,
    .rootmenu .verticalmenu2 {
    position: relative;
    z-index: 1000 ;
    }
    .mb-8 {
    z-index: 1;
    position: relative;
    }
     .pagebuilder-slider-g-ban .pagebuilder-slide-wrapper {
        height: 500px;
    }
    .phone-mobile {
    display: none;
    }
    div#header {
    box-shadow: 4px 1px 7px -2px #3ec0cd, 0 2px 7px -2px #000000;
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 60%, #f4f6f8 100%);
    }
    .page-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    }
    .page-wrapper {
    padding-top: 130px;
    }
    .nav-sections, .rootmenu {
    box-shadow: 0 1px 2px #3ec0cd;
    }
    .w-full.sm\:w-1\/2.md\:w-full {
    width: 50px;
    }
    .w-full.h-full.fixed.top-0.left-0.bg-white.z-50.flex {
    z-index: 9999;
    }
     .relative.inline-block.text-left {
    right: 30px;
    }


}

/* Laptop */
@media (min-width: 1280px) and (max-width: 1535px) {
    .rootmenu .verticalmenu02 .vertical-list .varticalmenu_main {
        max-width: 1000px;
    }
    .rw-menu-wrapper {
    z-index: 2 !important;
    position: sticky;
    }
    .rootmenu .verticalmenu2 {
    position: relative;
    z-index: 1000 ;
    }
    .mb-8 {
    z-index: 1;
    position: relative;
    }
     .pagebuilder-slider-g-ban .pagebuilder-slide-wrapper {
        height: 500px;
    }
    .phone-mobile {
    display: none;
    }
    div#header {
    box-shadow: 4px 1px 7px -2px #3ec0cd, 0 2px 7px -2px #000000;
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 60%, #f4f6f8 100%);
    }
    .page-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    }

    .page-wrapper {
    padding-top: 130px;
    }
    .nav-sections, .rootmenu {
    box-shadow: 0 1px 2px #3ec0cd;
    }
    .w-full.sm\:w-1\/2.md\:w-full {
    width: 50px;
    }
    .w-full.h-full.fixed.top-0.left-0.bg-white.z-50.flex {
    z-index: 9999;
    }
     .relative.inline-block.text-left {
    right: 30px;
    }


}
/* Laptop2 */
@media (min-width: 1025px) and (max-width: 1279px) {
     .rootmenu .verticalmenu02 .vertical-list .varticalmenu_main {
        max-width: 750px;
    }
    .rw-menu-wrapper {
    z-index: 2 !important;
    position: sticky;
    }
    .rootmenu .verticalmenu2 {
    position: relative;
    z-index: 1000 ;
    }
    .mb-8 {
    z-index: 1;
    position: relative;
    }
     .pagebuilder-slider-g-ban .pagebuilder-slide-wrapper {
        height: 500px;
    }
    .phone-mobile {
    display: none;
    }
    div#header {
    box-shadow: 4px 1px 7px -2px #3ec0cd, 0 2px 7px -2px #000000;
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 60%, #f4f6f8 100%);
    }
    .page-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    }

    .page-wrapper {
    padding-top: 130px;
    }
    .nav-sections, .rootmenu {
    box-shadow: 0 1px 2px #3ec0cd;
    }
    .w-full.sm\:w-1\/2.md\:w-full {
    width: 50px;
    }
    .w-full.h-full.fixed.top-0.left-0.bg-white.z-50.flex {
    z-index: 9999;
    }
     .relative.inline-block.text-left {
    right: 30px;
    }


}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
     .rootmenu .verticalmenu02 .vertical-list .varticalmenu_main {
        max-width: 500px;
    }
    .rw-menu-wrapper {
    z-index: 2 !important;
    position: sticky;
    }
    .rootmenu .verticalmenu2 {
    position: relative;
    z-index: 1000 ;
    }
    .mb-8 {
    z-index: 1;
    position: relative;
    }
     .pagebuilder-slider-g-ban .pagebuilder-slide-wrapper {
        height: 500px;
    }
    .phone-mobile {
    display: none;
    }
    div#header {
    box-shadow: 4px 1px 7px -2px #3ec0cd, 0 2px 7px -2px #000000;
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 60%, #f4f6f8 100%);
    }
    .page-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    }

    .page-wrapper {
    padding-top: 130px;
    }
    .nav-sections, .rootmenu {
    box-shadow: 0 1px 2px #3ec0cd;
    }
    .w-full.sm\:w-1\/2.md\:w-full {
    width: 50px;
    }
    .w-full.h-full.fixed.top-0.left-0.bg-white.z-50.flex {
    z-index: 9999;
    }
    .relative.inline-block.text-left {
    right: 30px;
    }


}
@media (max-width: 768px) {
    .page-header .flex.items-center > div:last-child {
        margin-left: auto !important;
    }
    .rw-menu-wrapper {
    z-index: 45 !important;
    position: sticky;
    }
    .letters.flex.ml-20 {
    display: none;
    }
    .flex.items-center.gap-6 {
    display: none;
    }
    .flex.items-center.gap-2.text-sm.font-medium {
    padding-right: 20px;
    }
    div#header {
        box-shadow: 4px 1px 7px -2px #3ec0cd, 0 2px 7px -2px #000000;
        background: linear-gradient(to bottom, #ffffff 0%, #ffffff 60%, #f4f6f8 100%);
    }
    .page-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
    }
    .page-wrapper {
        padding-top: 130px;
    }
    .w-full.h-full.fixed.top-0.left-0.bg-white.z-50.flex {
    z-index: 9999;
    }
    h1.page-title.text-3xl.font-semibold.mb-8.text-center.md\:sr-only {
    font-size: 20px;
    }

    iframe {
        max-width: 320px;
    }

    .firecheckout #checkout {
        max-width: 370px;
    }

    /* Phone dropdown in the header.
       Its "right-0" anchors the 200px panel to the 30px icon wrapper, so on a
       narrow screen the panel hangs off the left edge. Drop the wrapper out of
       the positioning chain so the panel is placed against #header, which spans
       the viewport, and keep it inside the padding on very small screens. */
    .phone-mobile > div {
        position: static;
    }

    .phone-mobile > div > div.absolute {
        right: 1rem;
        left: auto;
        max-width: calc(100vw - 2rem);
    }

}
[x-cloak] {
    display: none !important;
}