.elementor-31 .elementor-element.elementor-element-0808620{--display:flex;}.elementor-31 .elementor-element.elementor-element-90842f8{--display:flex;}.elementor-31 .elementor-element.elementor-element-7fcbbd2{--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-31 .elementor-element.elementor-element-13b5ea1{--spacer-size:30vh;}.elementor-31 .elementor-element.elementor-element-ff9f080{text-align:center;}.elementor-31 .elementor-element.elementor-element-ff9f080 .elementor-heading-title{color:#FFFFFF;}.elementor-31 .elementor-element.elementor-element-608d228{--spacer-size:30vh;}.elementor-31 .elementor-element.elementor-element-4ed4d72{--display:flex;}.elementor-31 .elementor-element.elementor-element-85d1148{--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-31 .elementor-element.elementor-element-cde7c85{--spacer-size:30vh;}.elementor-31 .elementor-element.elementor-element-4961040{text-align:center;}.elementor-31 .elementor-element.elementor-element-4961040 .elementor-heading-title{color:#FFFFFF;}.elementor-31 .elementor-element.elementor-element-ec5290d{--spacer-size:30vh;}.elementor-31 .elementor-element.elementor-element-c7ac3c3{--display:flex;}.elementor-31 .elementor-element.elementor-element-5b3558a{--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-31 .elementor-element.elementor-element-b662d33{--spacer-size:30vh;}.elementor-31 .elementor-element.elementor-element-6caf0d0{text-align:center;}.elementor-31 .elementor-element.elementor-element-6caf0d0 .elementor-heading-title{color:#FFFFFF;}.elementor-31 .elementor-element.elementor-element-34b32de{--spacer-size:30vh;}.elementor-31 .elementor-element.elementor-element-4b5f2cd{--e-n-carousel-swiper-slides-to-display:1;--e-n-carousel-swiper-slides-gap:10px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;}.elementor-31 .elementor-element.elementor-element-7a1744e{--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;--justify-content:space-around;}.elementor-31 .elementor-element.elementor-element-c4da8a3{--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;}.elementor-31 .elementor-element.elementor-element-c4da8a3.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-31 .elementor-element.elementor-element-3f36d1f{width:var( --container-widget-width, 44% );max-width:44%;--container-widget-width:44%;--container-widget-flex-grow:0;}.elementor-31 .elementor-element.elementor-element-3f36d1f.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-31 .elementor-element.elementor-element-abb734b{width:var( --container-widget-width, 43.651% );max-width:43.651%;--container-widget-width:43.651%;--container-widget-flex-grow:0;}.elementor-31 .elementor-element.elementor-element-abb734b.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-31 .elementor-element.elementor-element-b0b32e1{--display:flex;}.elementor-31 .elementor-element.elementor-element-edb0bc5{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-31 .elementor-element.elementor-element-edb0bc5.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-31 .elementor-element.elementor-element-07d2175{--display:flex;--e-transform-origin-x:center;--e-transform-origin-y:center;}.elementor-31 .elementor-element.elementor-element-3e0eb8f{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;z-index:1002;}.elementor-31 .elementor-element.elementor-element-5075820{--display:flex;}.elementor-31 .elementor-element.elementor-element-c5cb530{--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;}body.elementor-page-31:not(.elementor-motion-effects-element-type-background), body.elementor-page-31 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#111013;}@media(max-width:1024px){.elementor-31 .elementor-element.elementor-element-4b5f2cd{--e-n-carousel-swiper-slides-to-display:2;}}@media(max-width:767px){.elementor-31 .elementor-element.elementor-element-0808620{--width:100%;}.elementor-31 .elementor-element.elementor-element-7fcbbd2{--width:100%;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-31 .elementor-element.elementor-element-7fcbbd2.e-con{--align-self:stretch;--flex-grow:1;--flex-shrink:0;}.elementor-31 .elementor-element.elementor-element-13b5ea1{--spacer-size:30vh;}.elementor-31 .elementor-element.elementor-element-4b5f2cd{--e-n-carousel-swiper-slides-to-display:1;padding:0px 0px 0px 0px;}.elementor-31 .elementor-element.elementor-element-7a1744e{--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-31 .elementor-element.elementor-element-c4da8a3{--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-31 .elementor-element.elementor-element-3f36d1f{width:var( --container-widget-width, 305.391px );max-width:305.391px;--container-widget-width:305.391px;--container-widget-flex-grow:0;}.elementor-31 .elementor-element.elementor-element-3f36d1f.elementor-element{--align-self:stretch;--flex-grow:1;--flex-shrink:0;}.elementor-31 .elementor-element.elementor-element-abb734b{width:var( --container-widget-width, 345.391px );max-width:345.391px;--container-widget-width:345.391px;--container-widget-flex-grow:0;}.elementor-31 .elementor-element.elementor-element-07d2175{--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;}}@media(min-width:768px){.elementor-31 .elementor-element.elementor-element-90842f8{--width:100%;}.elementor-31 .elementor-element.elementor-element-c4da8a3{--width:50%;}.elementor-31 .elementor-element.elementor-element-b0b32e1{--width:46%;}}/* Start custom CSS for html, class: .elementor-element-3e0eb8f */.home_product_slider_wrap {
            position: relative;
            padding-top: 0;
            padding-bottom: 0;
            width: 100%; /* Ensure it takes full width */
            
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #222; /* White background for the slider wrap */
            border-radius: 15px; /* Rounded corners for the main container */
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* More prominent shadow */
            padding: 30px;
        }

        .customize-tools {
            position: relative;
            width: 100%;
            text-align: center;
            padding: 20px 0; /* Add some padding */
        }

        /* Banner Display Area (Viewport for the slider) */
        .banner-display {
            width: 100%; /* Take full width of its parent */
            max-width: 100%; /* Limit banner size */
            height: 350px; /* Fixed height for consistency */
            margin-bottom: 30px; /* Space between banner and pagination */
            border-radius: 10px; /* Rounded corners for the banner */
            overflow: hidden; /* Crucial for hiding parts of images outside view */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
            background-color: #e0e0e0; /* Placeholder background */
            position: relative; /* Needed for absolute positioning of banner-title */
            cursor: grab; /* Indicate draggable */
        }

        .banner-display.grabbing {
            cursor: grabbing;
        }

        /* Container for all banner images (the sliding track) */
        .banner-slider-track {
            display: flex; /* Arrange images in a row */
            width: 100%; /* Initial width, will be calculated dynamically */
            height: 100%;
            transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth slide effect */
        }

        /* Individual banner image within the track */
        .banner-slider-track img {
            width: 100%; /* Each image takes full width of the viewport */
            height: 100%;
            object-fit: cover; /* Ensures image covers the area without distortion */
            flex-shrink: 0; /* Prevent images from shrinking */
            display: block; /* Remove extra space below image */
        }

        .banner-title {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background-color: #555; /* Updated background color */
            color: #FFFFFF; /* Updated text color to white */
            padding: 10px 15px;
            border-radius: 5px;
            font-size: 1.2em;
            font-weight: 600;
            pointer-events: none; /* Make sure it doesn't interfere with clicks */
            z-index: 10; /* Ensure title is above images */
        }

        /* New container for prev/thumbnails/next to put them on one line */
        .carousel-nav-wrapper {
            display: flex;
            align-items: center; /* Vertically align items */
            justify-content: center; /* Center the entire pagination block */
            gap: 15px; /* Space between items and arrows */
            flex-wrap: wrap; /* Allow wrapping on smaller screens */
        }

        /* Inner wrapper for linebar and thumbnails to manage relative positioning */
        .thumbnails-container-relative {
            position: relative;
            display: inline-block; /* Allows content to define width */
            padding-bottom: 5px; /* Space for the linebar under thumbnails */
        }

        .customize-tools .linebar {
            background-color: #FFBA00;
            width: 0%;
            height: 2px; /* Slightly thicker for better visibility */
            display: block;
            position: absolute;
            bottom: 0; /* Position relative to .thumbnails-container-relative */
            transition: all 0.3s ease-in-out;
            border-radius: 9999px; /* Rounded linebar */
            left: 0; /* Ensure it starts from the left of its parent */
        }

        .customize-tools .thumbnails {
            margin: 0;
            padding: 0;
            display: inline-flex; /* Keep inline-flex for the list items */
            align-items: center;
            gap: 30px;
            list-style-type: none;
            justify-content: center;
        }

        .customize-tools .thumbnails li {
            font-size: 14px;
            line-height: 20px;
            color: #B9B9B9;
            text-transform: uppercase;
            position: relative;
            cursor: pointer;
            font-weight: 700;
            transition: color 0.3s ease-in-out, transform 0.2s ease-out; /* Smooth color and subtle scale transition */
        }

        .customize-tools .thumbnails li:hover {
            transform: translateY(-2px); /* Slight lift on hover */
        }

        .customize-tools .thumbnails li.mt_nav-active {
            color: #333333; /* Darker color for active state */
            transform: scale(1.05); /* Slight zoom for active item */
        }

        .customize-tools .thumbnails li span {
            line-height: 1;
        }

        .cta-small {
            position: relative;
            font-family: 'Inter', sans-serif; /* Explicitly set font */
            font-weight: 500;
            letter-spacing: 0.1em;
            font-size: 13px;
            text-transform: uppercase;
            transition: color 300ms ease-in-out, background-color 0.3s ease-in-out, transform 0.2s ease-out;
            display: flex;
            align-items: center;
            justify-content: center;
            border: #727272 1px solid;
            height: 36px;
            border-radius: 36px;
            cursor: pointer;
            padding: 7px 15px;
        }

        .cta-small:hover {
            background-color: #727272;
            transform: translateY(-2px); /* Slight lift on hover */
        }

        .cta-small:hover svg path {
            stroke: #FFFFFF; /* Change arrow color on hover */
        }

        /* SVG path color for arrows */
        .cta-small svg path {
            stroke: #727272; /* Default arrow color */
            transition: stroke 0.3s ease-in-out;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .home_product_slider_wrap {
                padding: 15px;
            }

            .carousel-nav-wrapper {
                flex-direction: column; /* Stack vertically on small screens if too wide */
                gap: 10px;
            }

            .customize-tools .thumbnails {
                gap: 10px; /* Reduce gap on smaller screens */
                flex-wrap: wrap; /* Allow thumbnails to wrap */
                justify-content: center;
            }

            .customize-tools .thumbnails li {
                font-size: 12px;
                line-height: 18px;
            }

            .banner-display {
                height: 200px; /* Smaller height for mobile */
                width: 95%; /* Take more width on mobile */
            }

            .banner-title {
                font-size: 1em;
                bottom: 10px;
                left: 10px;
                padding: 8px 12px;
            }
        }
    </style>/* End custom CSS */