﻿.products-content-wrap {
    margin-left: auto;
    margin-right: auto;
    max-width: 80rem;
    padding: 1.5rem;
}

    .products-content-wrap.products-content-page .products {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 2rem;
    }

@media (min-width: 640px) {
    .products-content-wrap.products-content-page .products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .products-content-wrap.products-content-page .products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.products-content-wrap .heading-block {
    position: relative;
    margin-bottom: 3rem;
    padding-bottom: 1rem;
    text-align: center;
}

    .products-content-wrap .heading-block:after {
        content: none !important;
    }

    .products-content-wrap .heading-block h3 {
        position: relative;
        display: inline-block;
        padding-bottom: 1rem;
        font-size: 2.25rem;
        line-height: 2.5rem;
        font-weight: 700;
        letter-spacing: -0.025em;
        --tw-text-opacity: 1;
        color: rgb(31 41 55 / var(--tw-text-opacity, 1));
    }

        .products-content-wrap .heading-block h3::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 96px;
            height: 4px;
            background: linear-gradient(to right, #2563eb, #9333ea);
            border-radius: 9999px;
        }

.products-content-wrap .products {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2rem;
}

@media (min-width: 640px) {
    .products-content-wrap .products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .products-content-wrap .products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.products-content-wrap .products .product-cat-mains {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 1.5rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    text-decoration-line: none;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

    .products-content-wrap .products .product-cat-mains:hover {
        --tw-translate-y: -0.5rem;
        --tw-scale-x: 1.05;
        --tw-scale-y: 1.05;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
        --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }

    .products-content-wrap .products .product-cat-mains .product-cat-img {
        position: relative;
        height: 20rem;
        width: 100%;
        overflow: hidden;
        border-radius: 1rem;
        border-bottom-right-radius: 1.5rem;
        border-bottom-left-radius: 1.5rem;
    }

        .products-content-wrap .products .product-cat-mains .product-cat-img img {
            height: 100%;
            width: 100%;
            -o-object-fit: cover;
            object-fit: cover;
            transition-property: transform;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 700ms;
            transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
        }

        .products-content-wrap .products .product-cat-mains .product-cat-img .hover-text {
            position: absolute;
            top: 0px;
            left: 0px;
            display: flex;
            height: 100%;
            width: 100%;
            align-items: center;
            justify-content: center;
            z-index: 10;
            font-size: 1.5rem;
            line-height: 2rem;
            font-weight: 700;
            --tw-text-opacity: 1;
            color: rgb(255 255 255 / var(--tw-text-opacity, 1));
            background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
            --tw-bg-opacity: 0.5;
            opacity: 0;
            transition-property: all;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 500ms;
            transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
        }

    .products-content-wrap .products .product-cat-mains .product-cat-title {
        background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
        --tw-gradient-from: #fff var(--tw-gradient-from-position);
        --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
        --tw-gradient-to: #f9fafb var(--tw-gradient-to-position);
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        text-align: center;
    }

        .products-content-wrap .products .product-cat-mains .product-cat-title h4 {
            margin-bottom: 0px;
            font-size: 1.25rem;
            line-height: 1.75rem;
            font-weight: 700;
            --tw-text-opacity: 1;
            color: rgb(31 41 55 / var(--tw-text-opacity, 1));
            transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 300ms;
        }

    .products-content-wrap .products .product-cat-mains:hover {
        --tw-border-opacity: 1;
        border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
    }

        .products-content-wrap .products .product-cat-mains:hover .product-cat-img .hover-text {
            opacity: 1;
        }

        .products-content-wrap .products .product-cat-mains:hover .product-cat-img img {
            --tw-scale-x: 1.1;
            --tw-scale-y: 1.1;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        }

        .products-content-wrap .products .product-cat-mains:hover .product-cat-title h4 {
            --tw-text-opacity: 1;
            color: rgb(37 99 235 / var(--tw-text-opacity, 1));
        }

.socialBottom {
    position: fixed;
    z-index: 50;
    height: 3.5rem;
    width: 3.5rem;
    border-radius: 9999px;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

    .socialBottom:hover {
        --tw-scale-x: 1.1;
        --tw-scale-y: 1.1;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
        --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }

.socialBottom {
    border-width: 2px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
    --tw-backdrop-blur: blur(4px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

    .socialBottom svg,
    .socialBottom i {
        height: 1.75rem;
        width: 1.75rem;
        text-align: center;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 300ms;
    }

    .socialBottom i {
        font-size: 32px;
        line-height: 28px;
    }

    .socialBottom:hover {
        --tw-translate-y: -0.25rem;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

        .socialBottom:hover svg,
        .socialBottom:hover i {
            --tw-scale-x: 1.1;
            --tw-scale-y: 1.1;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        }

#aWhatsApp {
    right: 1.25rem;
    bottom: 9rem;
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

    #aWhatsApp:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
    }

    #aWhatsApp::before {
        content: "";
        position: absolute;
        inset: 0px;
        border-radius: 9999px;
        --tw-bg-opacity: 1;
        background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
        opacity: 0;
        transition-property: opacity;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 300ms;
    }

    #aWhatsApp:hover::before {
        opacity: 0.3;
    }

#aInstagram {
    right: 1.25rem;
    bottom: 5rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

    #aInstagram::before {
        content: "";
        position: absolute;
        inset: 0px;
        border-radius: 9999px;
        opacity: 0;
        transition-property: opacity;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 300ms;
        background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    }

    #aInstagram:hover::before {
        opacity: 0.5;
    }

@media (max-width: 768px) {
    .primary-menu-open #primary-menu {
        display: block !important;
    }
}

#header {
    position: sticky !important;
    top: 0px !important;
    z-index: 50 !important;
    height: 6rem !important;
    width: 100% !important;
    border-bottom-width: 1px !important;
    --tw-border-opacity: 1 !important;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)) !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1)) !important;
}

@media (max-width: 768px) {
    #header {
        height: 4rem !important;
    }

        #header #logo {
            margin-right: 2.5rem !important;
            flex: 1 1 0% !important;
            align-items: center !important;
            justify-content: center !important;
        }

            #header #logo img {
                height: 3.5rem !important;
            }

        #header #primary-menu-trigger {
            display: flex !important;
            width: 2.5rem !important;
            height: 2.5rem !important;
            cursor: pointer !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 9999px !important;
            --tw-bg-opacity: 1 !important;
            background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1)) !important;
            --tw-text-opacity: 1 !important;
            color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
            opacity: 1 !important;
        }
}

#header #header-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    max-height: 6rem !important;
    max-width: 80rem !important;
    align-items: center !important;
    justify-content: space-between !important;
    background-color: transparent !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

    #header #header-wrap #primary-menu-trigger {
        display: none;
    }

@media (max-width: 768px) {
    #header #header-wrap {
        display: flex;
        align-items: center;
    }
}

#header #header-wrap #logo {
    display: flex !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    --tw-border-opacity: 1 !important;
    border-color: rgb(148 163 184 / var(--tw-border-opacity, 1)) !important;
}

    #header #header-wrap #logo .retina-logo {
        display: none;
    }

    #header #header-wrap #logo .standard-logo {
        display: block;
    }

    #header #header-wrap #logo img {
        margin-top: 0px;
        height: 3rem;
    }

#header #header-wrap #primary-menu {
    height: 100%;
}

@media (min-width: 768px) {
    #header #header-wrap #primary-menu {
        display: block;
    }
}

@media (max-width: 768px) {
    #header #header-wrap #primary-menu {
        position: absolute;
        top: 100%;
        left: 0.5rem;
        z-index: 50;
        height: auto;
        width: 100%;
        max-width: 24rem;
        border-radius: 1rem;
        border-width: 1px;
        border-style: solid;
        --tw-border-opacity: 1;
        border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
        padding: 1rem;
        --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        display: none;
    }

        #header #header-wrap #primary-menu > ul > li {
            width: 100%;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }

            #header #header-wrap #primary-menu > ul > li > a {
                height: auto !important;
                width: 100% !important;
                padding: 0px !important;
                text-align: center !important;
            }
}

#header #header-wrap #primary-menu > ul {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

    #header #header-wrap #primary-menu > ul > li {
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: center;
    }

        #header #header-wrap #primary-menu > ul > li > a {
            height: auto !important;
            padding: 0px !important;
        }

            #header #header-wrap #primary-menu > ul > li > a > div {
                border-radius: 0.5rem;
                padding-left: 0.75rem;
                padding-right: 0.75rem;
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
                font-size: 0.875rem;
                line-height: 1.25rem;
                letter-spacing: 0.05em;
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 300ms;
                transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
            }

        #header #header-wrap #primary-menu > ul > li.current div {
            --tw-bg-opacity: 1;
            background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
        }

        #header #header-wrap #primary-menu > ul > li:hover:not(.current) div {
            --tw-bg-opacity: 1;
            background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
            --tw-text-opacity: 1;
            color: rgb(241 245 249 / var(--tw-text-opacity, 1));
        }

        #header #header-wrap #primary-menu > ul > li .has_child_menu {
            border-radius: 1rem;
            --tw-border-opacity: 1;
            border-top-color: rgb(100 116 139 / var(--tw-border-opacity, 1));
            padding: 0.75rem;
        }

            #header #header-wrap #primary-menu > ul > li .has_child_menu li a {
                border-radius: 0.5rem;
                padding-left: 0.75rem;
                padding-right: 0.75rem;
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
                font-size: 0.875rem;
                line-height: 1.25rem;
                letter-spacing: 0.05em;
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 300ms;
                transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
            }

                #header #header-wrap #primary-menu > ul > li .has_child_menu li a:hover {
                    --tw-bg-opacity: 1;
                    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
                    --tw-text-opacity: 1;
                    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
                }

#header:not(.sticky-header) #header-wrap {
    height: 100%;
}

#header.sticky-header {
    position: sticky !important;
    top: 0px !important;
    z-index: 50 !important;
    height: 4rem !important;
}

    #header.sticky-header #header-wrap {
        height: 4rem !important;
        --tw-shadow: 0 0 #0000 !important;
        --tw-shadow-colored: 0 0 #0000 !important;
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
    }

        #header.sticky-header #header-wrap #logo img {
            height: 3rem;
        }

#header .menu_mobile2 {
    display: none !important;
}
