.elementor-3533 .elementor-element.elementor-element-4155b42f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3533 .elementor-element.elementor-element-3070d79{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--overflow:hidden;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3533 .elementor-element.elementor-element-3070d79:not(.elementor-motion-effects-element-type-background), .elementor-3533 .elementor-element.elementor-element-3070d79 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8FAFC;}.elementor-3533 .elementor-element.elementor-element-5045be6a{--display:flex;--min-height:350px;--justify-content:flex-end;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--overlay-opacity:0.71;--border-radius:20px 0px 0px 20px;--padding-top:0px;--padding-bottom:40px;--padding-left:30px;--padding-right:0px;}.elementor-3533 .elementor-element.elementor-element-5045be6a:not(.elementor-motion-effects-element-type-background), .elementor-3533 .elementor-element.elementor-element-5045be6a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://zmsolarelectric.com/wp-content/uploads/2023/01/gal-1-4.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-3533 .elementor-element.elementor-element-5045be6a::before, .elementor-3533 .elementor-element.elementor-element-5045be6a > .elementor-background-video-container::before, .elementor-3533 .elementor-element.elementor-element-5045be6a > .e-con-inner > .elementor-background-video-container::before, .elementor-3533 .elementor-element.elementor-element-5045be6a > .elementor-background-slideshow::before, .elementor-3533 .elementor-element.elementor-element-5045be6a > .e-con-inner > .elementor-background-slideshow::before, .elementor-3533 .elementor-element.elementor-element-5045be6a > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(180deg, var( --e-global-color-f440321 ) 0%, var( --e-global-color-b5d1eaa ) 100%);}.elementor-3533 .elementor-element.elementor-element-5045be6a.e-con:hover{--e-con-transform-scale:1.03;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-3533 .elementor-element.elementor-element-4657ea3d .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:26px;font-weight:600;color:var( --e-global-color-37f64ef );}.elementor-3533 .elementor-element.elementor-element-79af3cee{margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-3533 .elementor-element.elementor-element-79af3cee .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:18px;font-weight:400;color:var( --e-global-color-37f64ef );}.elementor-3533 .elementor-element.elementor-element-75f1bf48{--display:flex;--justify-content:center;}.elementor-3533 .elementor-element.elementor-element-5ff40405{--display:flex;}.elementor-3533 .elementor-element.elementor-element-74ae4661{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--border-radius:10px 10px 10px 10px;box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.07);}.elementor-3533 .elementor-element.elementor-element-74ae4661:not(.elementor-motion-effects-element-type-background), .elementor-3533 .elementor-element.elementor-element-74ae4661 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-37f64ef );}.elementor-3533 .elementor-element.elementor-element-74ae4661.e-con:hover{--e-con-transform-translateY:-7px;}.elementor-3533 .elementor-element.elementor-element-74ae4661:hover{box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.17);}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-3533 .elementor-element.elementor-element-2b121c1c:hover{--e-transform-scale:1.03;}.elementor-3533 .elementor-element.elementor-element-2b121c1c img{width:57%;height:150px;}.elementor-3533 .elementor-element.elementor-element-39780f7{text-align:center;}.elementor-3533 .elementor-element.elementor-element-39780f7 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;color:var( --e-global-color-b5d1eaa );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-3533 .elementor-element.elementor-element-390b2b2c{text-align:center;font-family:"Roboto", Sans-serif;font-size:18px;font-weight:600;}.elementor-3533 .elementor-element.elementor-element-63a542cd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--border-radius:10px 10px 10px 10px;box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.07);}.elementor-3533 .elementor-element.elementor-element-63a542cd:not(.elementor-motion-effects-element-type-background), .elementor-3533 .elementor-element.elementor-element-63a542cd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-37f64ef );}.elementor-3533 .elementor-element.elementor-element-63a542cd.e-con:hover{--e-con-transform-translateY:-7px;}.elementor-3533 .elementor-element.elementor-element-63a542cd:hover{box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.17);}.elementor-3533 .elementor-element.elementor-element-6d3199d1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--border-radius:10px 10px 10px 10px;box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.07);}.elementor-3533 .elementor-element.elementor-element-6d3199d1:not(.elementor-motion-effects-element-type-background), .elementor-3533 .elementor-element.elementor-element-6d3199d1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-37f64ef );}.elementor-3533 .elementor-element.elementor-element-6d3199d1.e-con:hover{--e-con-transform-translateY:-7px;}.elementor-3533 .elementor-element.elementor-element-6d3199d1:hover{box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.17);}.elementor-3533 .elementor-element.elementor-element-5f4c22d0:hover{--e-transform-scale:1.03;}.elementor-3533 .elementor-element.elementor-element-5f4c22d0 img{width:57%;height:150px;}.elementor-3533 .elementor-element.elementor-element-9942dfe{text-align:center;}.elementor-3533 .elementor-element.elementor-element-9942dfe .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;color:var( --e-global-color-b5d1eaa );}.elementor-3533 .elementor-element.elementor-element-f4ebdcd{text-align:center;font-family:"Roboto", Sans-serif;font-size:18px;font-weight:600;}.elementor-3533 .elementor-element.elementor-element-1bf48c9{--display:flex;}.elementor-3533 .elementor-element.elementor-element-32005283{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--border-radius:10px 10px 10px 10px;box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.07);}.elementor-3533 .elementor-element.elementor-element-32005283:not(.elementor-motion-effects-element-type-background), .elementor-3533 .elementor-element.elementor-element-32005283 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-37f64ef );}.elementor-3533 .elementor-element.elementor-element-32005283.e-con:hover{--e-con-transform-translateY:-7px;}.elementor-3533 .elementor-element.elementor-element-32005283:hover{box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.17);}.elementor-3533 .elementor-element.elementor-element-6e3db75b:hover{--e-transform-scale:1.03;}.elementor-3533 .elementor-element.elementor-element-6e3db75b img{width:57%;height:150px;}.elementor-3533 .elementor-element.elementor-element-4ce53db{text-align:center;}.elementor-3533 .elementor-element.elementor-element-4ce53db .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;color:var( --e-global-color-b5d1eaa );}.elementor-3533 .elementor-element.elementor-element-65292410{text-align:center;font-family:"Roboto", Sans-serif;font-size:18px;font-weight:600;}.elementor-3533 .elementor-element.elementor-element-33bc29f4{--display:flex;}.elementor-3533 .elementor-element.elementor-element-5091f3df{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--border-radius:10px 10px 10px 10px;box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.07);}.elementor-3533 .elementor-element.elementor-element-5091f3df:not(.elementor-motion-effects-element-type-background), .elementor-3533 .elementor-element.elementor-element-5091f3df > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-37f64ef );}.elementor-3533 .elementor-element.elementor-element-5091f3df.e-con:hover{--e-con-transform-translateY:-7px;}.elementor-3533 .elementor-element.elementor-element-5091f3df:hover{box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.17);}.elementor-3533 .elementor-element.elementor-element-573a9ec8:hover{--e-transform-scale:1.03;}.elementor-3533 .elementor-element.elementor-element-573a9ec8 img{width:57%;height:150px;}.elementor-3533 .elementor-element.elementor-element-aac9e24{text-align:center;}.elementor-3533 .elementor-element.elementor-element-aac9e24 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;color:var( --e-global-color-b5d1eaa );}.elementor-3533 .elementor-element.elementor-element-279eb9c1{text-align:center;font-family:"Roboto", Sans-serif;font-size:18px;font-weight:600;}.elementor-3533 .elementor-element.elementor-element-61f3a1bc{--e-n-carousel-swiper-slides-to-display:3;--e-n-carousel-swiper-slides-gap:10px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:0px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-prev-top-position:0px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:0px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:0px;}@media(min-width:768px){.elementor-3533 .elementor-element.elementor-element-4155b42f{--content-width:1290px;}.elementor-3533 .elementor-element.elementor-element-5045be6a{--width:30%;}.elementor-3533 .elementor-element.elementor-element-75f1bf48{--width:70%;}}@media(max-width:1024px){.elementor-3533 .elementor-element.elementor-element-5045be6a{--min-height:250px;}.elementor-3533 .elementor-element.elementor-element-74ae4661{--gap:5px 5px;--row-gap:5px;--column-gap:5px;}.elementor-3533 .elementor-element.elementor-element-2b121c1c img{width:41%;height:120px;}.elementor-3533 .elementor-element.elementor-element-63a542cd{--gap:5px 5px;--row-gap:5px;--column-gap:5px;}.elementor-3533 .elementor-element.elementor-element-6d3199d1{--gap:5px 5px;--row-gap:5px;--column-gap:5px;}.elementor-3533 .elementor-element.elementor-element-5f4c22d0 img{width:41%;height:120px;}.elementor-3533 .elementor-element.elementor-element-32005283{--gap:5px 5px;--row-gap:5px;--column-gap:5px;}.elementor-3533 .elementor-element.elementor-element-6e3db75b img{width:41%;height:120px;}.elementor-3533 .elementor-element.elementor-element-5091f3df{--gap:5px 5px;--row-gap:5px;--column-gap:5px;}.elementor-3533 .elementor-element.elementor-element-573a9ec8 img{width:41%;height:120px;}.elementor-3533 .elementor-element.elementor-element-61f3a1bc{--e-n-carousel-swiper-slides-to-display:2;}}@media(max-width:767px){.elementor-3533 .elementor-element.elementor-element-61f3a1bc{--e-n-carousel-swiper-slides-to-display:1;}}/* Start custom CSS for container, class: .elementor-element-74ae4661 *//* 1. Position the widget in the exact center of the product container */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element perfectly */
    z-index: 10;
    width: 90%; /* Keeps it from touching the edges */
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* 2. Show on hover */
.e-loop-item:hover .elementor-widget-woocommerce-product-add-to-cart {
    opacity: 1;
    visibility: visible;
}

/* 3. Optional: Add a slight dark overlay to the image on hover to make the button pop */
.e-loop-item:hover img {
    filter: brightness(0.8);
    transition: 0.3s;
}

/* 4. Fix for Mobile: Ensure it is visible and relative (under the image) */
@media (max-width: 1024px) {
    .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .e-loop-item:hover img {
        filter: none;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d3199d1 *//* 1. Position the widget in the exact center of the product container */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element perfectly */
    z-index: 10;
    width: 90%; /* Keeps it from touching the edges */
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* 2. Show on hover */
.e-loop-item:hover .elementor-widget-woocommerce-product-add-to-cart {
    opacity: 1;
    visibility: visible;
}

/* 3. Optional: Add a slight dark overlay to the image on hover to make the button pop */
.e-loop-item:hover img {
    filter: brightness(0.8);
    transition: 0.3s;
}

/* 4. Fix for Mobile: Ensure it is visible and relative (under the image) */
@media (max-width: 1024px) {
    .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .e-loop-item:hover img {
        filter: none;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-63a542cd *//* 1. Position the widget in the exact center of the product container */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element perfectly */
    z-index: 10;
    width: 90%; /* Keeps it from touching the edges */
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* 2. Show on hover */
.e-loop-item:hover .elementor-widget-woocommerce-product-add-to-cart {
    opacity: 1;
    visibility: visible;
}

/* 3. Optional: Add a slight dark overlay to the image on hover to make the button pop */
.e-loop-item:hover img {
    filter: brightness(0.8);
    transition: 0.3s;
}

/* 4. Fix for Mobile: Ensure it is visible and relative (under the image) */
@media (max-width: 1024px) {
    .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .e-loop-item:hover img {
        filter: none;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-32005283 *//* 1. Position the widget in the exact center of the product container */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element perfectly */
    z-index: 10;
    width: 90%; /* Keeps it from touching the edges */
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* 2. Show on hover */
.e-loop-item:hover .elementor-widget-woocommerce-product-add-to-cart {
    opacity: 1;
    visibility: visible;
}

/* 3. Optional: Add a slight dark overlay to the image on hover to make the button pop */
.e-loop-item:hover img {
    filter: brightness(0.8);
    transition: 0.3s;
}

/* 4. Fix for Mobile: Ensure it is visible and relative (under the image) */
@media (max-width: 1024px) {
    .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .e-loop-item:hover img {
        filter: none;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5091f3df *//* 1. Position the widget in the exact center of the product container */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element perfectly */
    z-index: 10;
    width: 90%; /* Keeps it from touching the edges */
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* 2. Show on hover */
.e-loop-item:hover .elementor-widget-woocommerce-product-add-to-cart {
    opacity: 1;
    visibility: visible;
}

/* 3. Optional: Add a slight dark overlay to the image on hover to make the button pop */
.e-loop-item:hover img {
    filter: brightness(0.8);
    transition: 0.3s;
}

/* 4. Fix for Mobile: Ensure it is visible and relative (under the image) */
@media (max-width: 1024px) {
    .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .e-loop-item:hover img {
        filter: none;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-74ae4661 *//* 1. Position the widget in the exact center of the product container */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element perfectly */
    z-index: 10;
    width: 90%; /* Keeps it from touching the edges */
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* 2. Show on hover */
.e-loop-item:hover .elementor-widget-woocommerce-product-add-to-cart {
    opacity: 1;
    visibility: visible;
}

/* 3. Optional: Add a slight dark overlay to the image on hover to make the button pop */
.e-loop-item:hover img {
    filter: brightness(0.8);
    transition: 0.3s;
}

/* 4. Fix for Mobile: Ensure it is visible and relative (under the image) */
@media (max-width: 1024px) {
    .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .e-loop-item:hover img {
        filter: none;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d3199d1 *//* 1. Position the widget in the exact center of the product container */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element perfectly */
    z-index: 10;
    width: 90%; /* Keeps it from touching the edges */
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* 2. Show on hover */
.e-loop-item:hover .elementor-widget-woocommerce-product-add-to-cart {
    opacity: 1;
    visibility: visible;
}

/* 3. Optional: Add a slight dark overlay to the image on hover to make the button pop */
.e-loop-item:hover img {
    filter: brightness(0.8);
    transition: 0.3s;
}

/* 4. Fix for Mobile: Ensure it is visible and relative (under the image) */
@media (max-width: 1024px) {
    .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .e-loop-item:hover img {
        filter: none;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-63a542cd *//* 1. Position the widget in the exact center of the product container */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element perfectly */
    z-index: 10;
    width: 90%; /* Keeps it from touching the edges */
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* 2. Show on hover */
.e-loop-item:hover .elementor-widget-woocommerce-product-add-to-cart {
    opacity: 1;
    visibility: visible;
}

/* 3. Optional: Add a slight dark overlay to the image on hover to make the button pop */
.e-loop-item:hover img {
    filter: brightness(0.8);
    transition: 0.3s;
}

/* 4. Fix for Mobile: Ensure it is visible and relative (under the image) */
@media (max-width: 1024px) {
    .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .e-loop-item:hover img {
        filter: none;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-32005283 *//* 1. Position the widget in the exact center of the product container */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element perfectly */
    z-index: 10;
    width: 90%; /* Keeps it from touching the edges */
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* 2. Show on hover */
.e-loop-item:hover .elementor-widget-woocommerce-product-add-to-cart {
    opacity: 1;
    visibility: visible;
}

/* 3. Optional: Add a slight dark overlay to the image on hover to make the button pop */
.e-loop-item:hover img {
    filter: brightness(0.8);
    transition: 0.3s;
}

/* 4. Fix for Mobile: Ensure it is visible and relative (under the image) */
@media (max-width: 1024px) {
    .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .e-loop-item:hover img {
        filter: none;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5091f3df *//* 1. Position the widget in the exact center of the product container */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element perfectly */
    z-index: 10;
    width: 90%; /* Keeps it from touching the edges */
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* 2. Show on hover */
.e-loop-item:hover .elementor-widget-woocommerce-product-add-to-cart {
    opacity: 1;
    visibility: visible;
}

/* 3. Optional: Add a slight dark overlay to the image on hover to make the button pop */
.e-loop-item:hover img {
    filter: brightness(0.8);
    transition: 0.3s;
}

/* 4. Fix for Mobile: Ensure it is visible and relative (under the image) */
@media (max-width: 1024px) {
    .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .e-loop-item:hover img {
        filter: none;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-74ae4661 *//* 1. Position the widget in the exact center of the product container */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element perfectly */
    z-index: 10;
    width: 90%; /* Keeps it from touching the edges */
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* 2. Show on hover */
.e-loop-item:hover .elementor-widget-woocommerce-product-add-to-cart {
    opacity: 1;
    visibility: visible;
}

/* 3. Optional: Add a slight dark overlay to the image on hover to make the button pop */
.e-loop-item:hover img {
    filter: brightness(0.8);
    transition: 0.3s;
}

/* 4. Fix for Mobile: Ensure it is visible and relative (under the image) */
@media (max-width: 1024px) {
    .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .e-loop-item:hover img {
        filter: none;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d3199d1 *//* 1. Position the widget in the exact center of the product container */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element perfectly */
    z-index: 10;
    width: 90%; /* Keeps it from touching the edges */
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* 2. Show on hover */
.e-loop-item:hover .elementor-widget-woocommerce-product-add-to-cart {
    opacity: 1;
    visibility: visible;
}

/* 3. Optional: Add a slight dark overlay to the image on hover to make the button pop */
.e-loop-item:hover img {
    filter: brightness(0.8);
    transition: 0.3s;
}

/* 4. Fix for Mobile: Ensure it is visible and relative (under the image) */
@media (max-width: 1024px) {
    .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .e-loop-item:hover img {
        filter: none;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-63a542cd *//* 1. Position the widget in the exact center of the product container */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element perfectly */
    z-index: 10;
    width: 90%; /* Keeps it from touching the edges */
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* 2. Show on hover */
.e-loop-item:hover .elementor-widget-woocommerce-product-add-to-cart {
    opacity: 1;
    visibility: visible;
}

/* 3. Optional: Add a slight dark overlay to the image on hover to make the button pop */
.e-loop-item:hover img {
    filter: brightness(0.8);
    transition: 0.3s;
}

/* 4. Fix for Mobile: Ensure it is visible and relative (under the image) */
@media (max-width: 1024px) {
    .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .e-loop-item:hover img {
        filter: none;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-32005283 *//* 1. Position the widget in the exact center of the product container */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element perfectly */
    z-index: 10;
    width: 90%; /* Keeps it from touching the edges */
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* 2. Show on hover */
.e-loop-item:hover .elementor-widget-woocommerce-product-add-to-cart {
    opacity: 1;
    visibility: visible;
}

/* 3. Optional: Add a slight dark overlay to the image on hover to make the button pop */
.e-loop-item:hover img {
    filter: brightness(0.8);
    transition: 0.3s;
}

/* 4. Fix for Mobile: Ensure it is visible and relative (under the image) */
@media (max-width: 1024px) {
    .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .e-loop-item:hover img {
        filter: none;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5091f3df *//* 1. Position the widget in the exact center of the product container */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element perfectly */
    z-index: 10;
    width: 90%; /* Keeps it from touching the edges */
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* 2. Show on hover */
.e-loop-item:hover .elementor-widget-woocommerce-product-add-to-cart {
    opacity: 1;
    visibility: visible;
}

/* 3. Optional: Add a slight dark overlay to the image on hover to make the button pop */
.e-loop-item:hover img {
    filter: brightness(0.8);
    transition: 0.3s;
}

/* 4. Fix for Mobile: Ensure it is visible and relative (under the image) */
@media (max-width: 1024px) {
    .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .e-loop-item:hover img {
        filter: none;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-74ae4661 *//* 1. Position the widget in the exact center of the product container */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element perfectly */
    z-index: 10;
    width: 90%; /* Keeps it from touching the edges */
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* 2. Show on hover */
.e-loop-item:hover .elementor-widget-woocommerce-product-add-to-cart {
    opacity: 1;
    visibility: visible;
}

/* 3. Optional: Add a slight dark overlay to the image on hover to make the button pop */
.e-loop-item:hover img {
    filter: brightness(0.8);
    transition: 0.3s;
}

/* 4. Fix for Mobile: Ensure it is visible and relative (under the image) */
@media (max-width: 1024px) {
    .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .e-loop-item:hover img {
        filter: none;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d3199d1 *//* 1. Position the widget in the exact center of the product container */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element perfectly */
    z-index: 10;
    width: 90%; /* Keeps it from touching the edges */
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* 2. Show on hover */
.e-loop-item:hover .elementor-widget-woocommerce-product-add-to-cart {
    opacity: 1;
    visibility: visible;
}

/* 3. Optional: Add a slight dark overlay to the image on hover to make the button pop */
.e-loop-item:hover img {
    filter: brightness(0.8);
    transition: 0.3s;
}

/* 4. Fix for Mobile: Ensure it is visible and relative (under the image) */
@media (max-width: 1024px) {
    .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .e-loop-item:hover img {
        filter: none;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-63a542cd *//* 1. Position the widget in the exact center of the product container */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element perfectly */
    z-index: 10;
    width: 90%; /* Keeps it from touching the edges */
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* 2. Show on hover */
.e-loop-item:hover .elementor-widget-woocommerce-product-add-to-cart {
    opacity: 1;
    visibility: visible;
}

/* 3. Optional: Add a slight dark overlay to the image on hover to make the button pop */
.e-loop-item:hover img {
    filter: brightness(0.8);
    transition: 0.3s;
}

/* 4. Fix for Mobile: Ensure it is visible and relative (under the image) */
@media (max-width: 1024px) {
    .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .e-loop-item:hover img {
        filter: none;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-32005283 *//* 1. Position the widget in the exact center of the product container */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element perfectly */
    z-index: 10;
    width: 90%; /* Keeps it from touching the edges */
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* 2. Show on hover */
.e-loop-item:hover .elementor-widget-woocommerce-product-add-to-cart {
    opacity: 1;
    visibility: visible;
}

/* 3. Optional: Add a slight dark overlay to the image on hover to make the button pop */
.e-loop-item:hover img {
    filter: brightness(0.8);
    transition: 0.3s;
}

/* 4. Fix for Mobile: Ensure it is visible and relative (under the image) */
@media (max-width: 1024px) {
    .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .e-loop-item:hover img {
        filter: none;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5091f3df *//* 1. Position the widget in the exact center of the product container */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element perfectly */
    z-index: 10;
    width: 90%; /* Keeps it from touching the edges */
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* 2. Show on hover */
.e-loop-item:hover .elementor-widget-woocommerce-product-add-to-cart {
    opacity: 1;
    visibility: visible;
}

/* 3. Optional: Add a slight dark overlay to the image on hover to make the button pop */
.e-loop-item:hover img {
    filter: brightness(0.8);
    transition: 0.3s;
}

/* 4. Fix for Mobile: Ensure it is visible and relative (under the image) */
@media (max-width: 1024px) {
    .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .e-loop-item:hover img {
        filter: none;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-74ae4661 *//* 1. Position the widget in the exact center of the product container */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element perfectly */
    z-index: 10;
    width: 90%; /* Keeps it from touching the edges */
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* 2. Show on hover */
.e-loop-item:hover .elementor-widget-woocommerce-product-add-to-cart {
    opacity: 1;
    visibility: visible;
}

/* 3. Optional: Add a slight dark overlay to the image on hover to make the button pop */
.e-loop-item:hover img {
    filter: brightness(0.8);
    transition: 0.3s;
}

/* 4. Fix for Mobile: Ensure it is visible and relative (under the image) */
@media (max-width: 1024px) {
    .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .e-loop-item:hover img {
        filter: none;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d3199d1 *//* 1. Position the widget in the exact center of the product container */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element perfectly */
    z-index: 10;
    width: 90%; /* Keeps it from touching the edges */
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* 2. Show on hover */
.e-loop-item:hover .elementor-widget-woocommerce-product-add-to-cart {
    opacity: 1;
    visibility: visible;
}

/* 3. Optional: Add a slight dark overlay to the image on hover to make the button pop */
.e-loop-item:hover img {
    filter: brightness(0.8);
    transition: 0.3s;
}

/* 4. Fix for Mobile: Ensure it is visible and relative (under the image) */
@media (max-width: 1024px) {
    .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .e-loop-item:hover img {
        filter: none;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-63a542cd *//* 1. Position the widget in the exact center of the product container */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element perfectly */
    z-index: 10;
    width: 90%; /* Keeps it from touching the edges */
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* 2. Show on hover */
.e-loop-item:hover .elementor-widget-woocommerce-product-add-to-cart {
    opacity: 1;
    visibility: visible;
}

/* 3. Optional: Add a slight dark overlay to the image on hover to make the button pop */
.e-loop-item:hover img {
    filter: brightness(0.8);
    transition: 0.3s;
}

/* 4. Fix for Mobile: Ensure it is visible and relative (under the image) */
@media (max-width: 1024px) {
    .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .e-loop-item:hover img {
        filter: none;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-32005283 *//* 1. Position the widget in the exact center of the product container */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element perfectly */
    z-index: 10;
    width: 90%; /* Keeps it from touching the edges */
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* 2. Show on hover */
.e-loop-item:hover .elementor-widget-woocommerce-product-add-to-cart {
    opacity: 1;
    visibility: visible;
}

/* 3. Optional: Add a slight dark overlay to the image on hover to make the button pop */
.e-loop-item:hover img {
    filter: brightness(0.8);
    transition: 0.3s;
}

/* 4. Fix for Mobile: Ensure it is visible and relative (under the image) */
@media (max-width: 1024px) {
    .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .e-loop-item:hover img {
        filter: none;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5091f3df *//* 1. Position the widget in the exact center of the product container */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element perfectly */
    z-index: 10;
    width: 90%; /* Keeps it from touching the edges */
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* 2. Show on hover */
.e-loop-item:hover .elementor-widget-woocommerce-product-add-to-cart {
    opacity: 1;
    visibility: visible;
}

/* 3. Optional: Add a slight dark overlay to the image on hover to make the button pop */
.e-loop-item:hover img {
    filter: brightness(0.8);
    transition: 0.3s;
}

/* 4. Fix for Mobile: Ensure it is visible and relative (under the image) */
@media (max-width: 1024px) {
    .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .e-loop-item:hover img {
        filter: none;
    }
}/* End custom CSS */