.fw_slide_open {
    padding: 0;
    height: 573px;
}

.contentWrap.row {
    width: 100%;
    display: flex;
}

.half-pane-left {
    background-color: #303643;
    color: var(--white);
}

.half-pane-right {
    background-color: #DAE0EE;
    color: var(--black);
}

.half-pane {
    flex: 0 0 auto;
    transition: flex-basis 400ms ease;
    padding: clamp(32px, 5.208vw, 100px) clamp(32px, 6.25vw, 120px);
    position: relative;
    hoverflow: hidden;
}

.half-pane::before{
    content: "";
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 300ms ease;
    z-index: 0;
}

.half-pane-right::before{
    background-image: url("/wp-content/uploads/2026/02/Medspa-Services.jpg");
    opacity: 1;
}

.half-content.right-active .half-pane-right::before{
    opacity: 0;
}

.half-pane-left::before{
    background-image: url("/wp-content/uploads/2026/02/Dental-Services.jpg");
    opacity: 0;
}

.half-content.right-active .half-pane-left::before{
    opacity: 1;
}

.half-pane-left {
    flex-basis: 58.333%;
}

.half-pane-right {
    flex-basis: 41.666%;
}

.half-content.right-active .half-pane-left {
    flex-basis: 41.666%;
}

.half-content.right-active .half-pane-right {
    flex-basis: 58.333%;
}

.half-pane-header {
    display: flex;
    flex-direction: column;
}

.half-pane-header h2 {
    font-size: clamp(28px, 2.083vw, 40px);
    line-height: 115%;
    margin-bottom: 42px;
}

.half-pane-body {
    transition: opacity 250ms ease, transform 250ms ease;
    position: relative;
}

.half-pane-body ul.half-pane-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    gap: 0px min(7.813vw, 150px);
    list-style: none;
    padding: 0;
    margin: 0;
}

.half-pane-body ul.half-pane-links li {
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.half-pane-body ul.half-pane-links li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.half-pane-body ul.half-pane-links li a img {
    margin-right: clamp(6px, 0.833vw, 16px);
    transition: transform 450ms ease;
    filter: brightness(0.75);
}

.half-pane-body ul.half-pane-links li a:hover img {
    transform: translateX(clamp(8px, 0.833vw, 16px));
}

.half-pane-right .half-pane-body ul.half-pane-links li {
    border-bottom: 1px solid rgba(48, 54, 67, 0.15);
}

.half-pane-body ul.half-pane-links li:nth-of-type(4),
.half-pane-body ul.half-pane-links li:nth-of-type(8) {
    border-bottom: none;
}

.half-pane-right .half-pane-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.half-content.right-active .half-pane-right .half-pane-body {
    max-height: 1000px; /* large enough for list */
    overflow: visible;
    opacity: 1;
    pointer-events: auto;
}

.half-content.right-active .half-pane-left .half-pane-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.half-pane-viewall{
    position: absolute;
    display: flex;
    gap: 24px;
    left: min(7.448vw, 143px);
    bottom: min(5.99vw, 115px);  /* matches your li padding */
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
    align-items: center;
}

.half-pane-right .half-pane-viewall{
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.half-pane-right .half-pane-viewall img {
    filter: brightness(0.5);
}

.half-content.right-active .half-pane-left .half-pane-viewall{
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.half-content.right-active .half-pane-right .half-pane-viewall{
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
}

@media (max-width: 1024px) {
    .fw_slide_open{ 
        height: auto; 
    }

    .contentWrap.row{
        flex-direction: column-reverse;
    }

    .half-pane{
        flex-basis: auto !important;
        width: 100%;
        height: 490px;
        overflow: hidden;
        transition: height 350ms ease;
    }

    .half-pane-right {
        order: 1;
        height: 300px;
    }
    
    .half-pane-left{
        order: 2;
        height: 300px;
    }

    .half-content.right-active .half-pane-right{
        height: auto;
    }

    .half-content:not(.right-active) .half-pane-left{
        height: auto;
    }

    .half-pane-left .half-pane-body{
        max-height: 1000px;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        overflow: visible;
    }

    .half-pane-right .half-pane-body{
        max-height: 0;
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
        overflow: hidden;
    }

    .half-content.right-active .half-pane-right .half-pane-body{
        max-height: 1000px;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        overflow: visible;
    }

    .half-content.right-active .half-pane-left .half-pane-body{
        max-height: 0;
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
        overflow: hidden;
    }

    .half-pane-body ul.half-pane-links{
        display: block;
    }

    .half-pane-body ul.half-pane-links li:nth-of-type(4) {
        border-bottom: 1px solid rgba(48, 54, 67, 0.15);
    }

    .half-pane-left .half-pane-body ul.half-pane-links li:nth-of-type(4) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .half-pane-right .half-pane-viewall img {
        filter: brightness(0) saturate(100%);
    }
}