.elementor-1196 .elementor-element.elementor-element-8efdc3b{--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-1196 .elementor-element.elementor-element-1db7bb7{--grid-columns:3;}@media(max-width:1024px){.elementor-1196 .elementor-element.elementor-element-1db7bb7{--grid-columns:2;}}@media(max-width:767px){.elementor-1196 .elementor-element.elementor-element-1db7bb7{--grid-columns:1;}}/* Start custom CSS for loop-grid, class: .elementor-element-1db7bb7 *//* 1. Turn the Grid into a horizontally scrolling flex container */
.elementor-1196 .elementor-element.elementor-element-1db7bb7 .elementor-loop-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* Forces cards into a single line */
    overflow-x: auto; /* Enables horizontal scrolling */
    overflow-y: hidden;
    padding: 40px 20px 40px 0; /* Adds breathing room for the hover pop-out */
    gap: 0; /* Removes default Elementor gap */
    
    /* Hide scrollbar for a cleaner look (optional) */
    scrollbar-width: none; /* Firefox */
}
.elementor-1196 .elementor-element.elementor-element-1db7bb7 .elementor-loop-container::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

/* 2. Style the individual cards and create the overlap */
.elementor-1196 .elementor-element.elementor-element-1db7bb7 .e-loop-item {
    flex: 0 0 300px; /* Set a fixed width for your cards. Adjust the 300px as needed */
    margin-left: -120px; /* The negative margin creates the overlap */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), margin 0.4s ease;
    position: relative;
}

/* 3. The first card shouldn't overlap anything */
.elementor-1196 .elementor-element.elementor-element-1db7bb7 .e-loop-item:first-child {
    margin-left: 0;
}

/* 4. Hover effect for the card you are interacting with */
.elementor-1196 .elementor-element.elementor-element-1db7bb7 .e-loop-item:hover {
    transform: translateY(-15px); /* Pulls the card slightly upward */
    z-index: 10; /* Ensures the hovered card is on top */
}

/* 5. The Magic Trick: Push all cards to the RIGHT of the hovered card away */
.elementor-1196 .elementor-element.elementor-element-1db7bb7 .e-loop-item:hover ~ .e-loop-item {
    transform: translateX(120px); /* This value should match your negative margin above to reveal the full card */
}/* End custom CSS */