.liquid-accordion {
    --first-item-width-widescreen: 500px;
    --first-item-width-laptop: 300px;

    --height-widescreen: 30vh;
    --height-laptop: 25vh;
    --height-tablet: 200px;
    --height-mobile: 180px;

    --hover-width-widescreen: 23vw;
    --hover-width-laptop: 22vw;
}

.liquid-accordion .accordion-item {
    overflow: hidden;
    position: relative;
    border-radius: 12px;
}

.liquid-accordion .accordion-first {
    border-radius: 12px;
}

.liquid-accordion .accordion-item .accordion-content {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    opacity: 0;
    z-index: 2;
    transition: opacity .1s ease-in;
    transition-delay: .25s;
}

.liquid-accordion .accordion-item:before {
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .6);
    left: 0;
    top: 0;
    position: absolute;
    opacity: 0;
    z-index: 1;
    transition: opacity .25s ease-in;
}

.liquid-accordion .accordion-image {
    height: 100%;
}

.liquid-accordion .accordion-image img {
    height: 100%;
    position: absolute;
    object-fit: cover;
    width: var(--hover-width-laptop);
    max-width: none;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.liquid-accordion .accordion-item .accordion-content .custom-title-4 p {
    font-weight: 500;
}

@media screen and (min-width: 1025px) {
    .liquid-accordion {
        flex-grow: 10;
        flex-shrink: 0;
        flex-basis: auto;
        display: flex;
        flex-direction: row !important;
        height: 100%;
        flex-wrap: nowrap !important;
        overflow: hidden;
        gap: 10px;
    }

    .liquid-accordion .accordion-item {
        height: var(--height-laptop);
        flex-basis: var(--hover-width-laptop);
        transition: all 500ms ease-in-out;
        cursor: pointer;
    }

    .liquid-accordion .accordion-first {
        max-width: var(--first-item-width-laptop);
        height: var(--height-laptop);
    }

    .liquid-accordion .accordion-item:hover {
        flex-basis: var(--hover-width-laptop) !important;
        flex-shrink: 0;
    }

    .liquid-accordion .accordion-item .accordion-content {
        white-space: nowrap;
    }

    .liquid-accordion .accordion-item:hover .accordion-content {
        opacity: 1;
        transition: opacity .3s ease-in;
        transition-delay: 0;
    }

    .liquid-accordion .accordion-item:hover:before {
        opacity: 1;
    }

    .liquid-accordion .accordion-item.opened:before,
    .liquid-accordion .accordion-item.opened .accordion-content {
        opacity: 1;
    }
}

@media screen and (min-width: 1800px) {
    .liquid-accordion .accordion-first {
        max-width: var(--first-item-width-widescreen);
        height: var(--first-item-width-widescreen);
    }

    .liquid-accordion .accordion-item {
        height: var(--first-item-width-widescreen);
        flex-basis: var(--hover-width-widescreen);
    }

    .liquid-accordion .accordion-item:hover {
        flex-basis: var(--hover-width-widescreen) !important;
        flex-shrink: 0;
    }

    .liquid-accordion .accordion-image img {
        width: var(--hover-width-widescreen);
    }
}


@media screen and (max-width: 1024px) {
    .liquid-accordion {
        display: grid;
        column-gap: 10px;
        row-gap: 10px;
    }

    .liquid-accordion .accordion-item:before {
        opacity: 1;
        background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
    }

    .liquid-accordion .accordion-item .accordion-content {
        opacity: 1;
        align-items: center;
        justify-content: start;
        padding: 20px 40px;
        flex-direction: row;
        gap: 10px;
    }

    .liquid-accordion .accordion-item {
        height: var(--height-tablet);
    }

    .liquid-accordion .accordion-image img {
        width: 100%;
    }

    .liquid-accordion .accordion-first {
        background-color: #F1F2F4 !important;
    }

    .liquid-accordion .accordion-first .custom-title-3 p {
        color: var(--e-global-color-primary) !important;
    }

    .liquid-accordion .accordion-first .custom-title-3 p .light {
        color: black;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .liquid-accordion {
        grid-template-columns: 1fr 1fr;
    }

    .liquid-accordion .accordion-first {
        padding-top: 0;
        padding-bottom: 0;
    }

    .liquid-accordion .arrow-button .elementor-widget-container {
        width: 24px;
    }
}

@media screen and (max-width: 767px) {
    .liquid-accordion {
        grid-template-columns: 1fr;
    }

    .liquid-accordion .accordion-first {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .liquid-accordion .accordion-item {
        height: var(--height-mobile);
    }

    .liquid-accordion .arrow-button .elementor-widget-container {
        width: 20px;
    }
}

/* Hide current element */
body.quality-page .liquid-accordion .quality-item {
    display: none;
}

body.smart-factory-page .liquid-accordion .smart-factory-item {
    display: none;
}

body.stamping-forming-page .liquid-accordion .stamping-forming-item {
    display: none;
}

body.welding-page .liquid-accordion .welding-item {
    display: none;
}

body.cnc-machining-page .liquid-accordion .cnc-machining-item {
    display: none;
}

body.automated-assembly-page .liquid-accordion .automated-assembly-item {
    display: none;
}

body.digital-transformation-page .liquid-accordion .digital-transformation-item,
body.team-page .liquid-accordion .team-item,
body.capacity-page .liquid-accordion .capacity-item,
body.locations-page .liquid-accordion .locations-item,
body.working-with-us-page .liquid-accordion .working-with-us-item,
body.partnerships-page .liquid-accordion .partnerships-item {
  display: none;
}