.wdt-interactive-showcase-container { display: flex; will-change: flex; flex-wrap: wrap; margin: -20px; width: auto; align-items: center; }
.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper,
.wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper { flex: 1; padding: 20px; }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list { padding: 0; margin: 0 auto 0 0; width: 100%; max-width: 680px;  }
.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li { list-style-type: none; padding: 20px 30px; position: relative; }
.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li:not(:last-child) { margin-bottom: 5px; }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li > * { position: relative; }
.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-content-title { 
    font-size: clamp(1.25rem, 1.0192rem + 1.0256vw, 2.25rem); font-weight: 600; }

.wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper .wdt-content-item .wdt-media-image-cover .wdt-content-image-wrapper .wdt-content-image img { width: 100vw; }
.wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper .wdt-content-item .wdt-media-image-cover > .wdt-media-image-cover-container { padding: 0; }
.wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper .wdt-content-item .wdt-content-button > a { display: inline-flex; align-items: center;
    text-transform: uppercase; letter-spacing: var(--wdtLetterspacing_2x); padding: clamp(1.25rem, 0.5288rem + 3.2051vw, 4.375rem) clamp(1.5rem, 0.6923rem + 3.5897vw, 5rem); }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li > .wdt-interactive-showcase-content-group { 
    display: grid; grid-template-columns: 112px 1fr; gap: 40px; align-items: center; }
.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li > .wdt-interactive-showcase-content-group a.wdt-interactive-showcase-element {
    grid-column: 1/3; }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li > .wdt-interactive-showcase-content-group .wdt-content-image,
.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li > .wdt-interactive-showcase-content-group .wdt-content-image img { 
    width: 110px; height: 110px; border-radius: 50%; }

.wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper { position: relative; display: grid; }
.wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"] { 
    grid-area: 1/-1; visibility: hidden; transform: scaleX(0); transform-origin: 0 50%; transition: transform .2s ease .25s ,visibility 03s ease; }
.wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"].wdt-interactive-showcase-active { 
    transform: scaleX(1); visibility: visible; }


.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li:before {
   content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--wdtPrimaryColor);
   visibility: hidden; transform: scaleX(0); transform-origin: 0 50%; z-index: 0; transition: transform .2s ease .25s,visibility 03s ease; }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li:hover:before,
.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li.wdt-interactive-showcase-active:before {
   transform: scaleX(1); visibility: visible;  }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li:after {
   content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--wdtSecondaryColor); visibility: hidden; transform: scaleY(0); 
   transform-origin: 50% 0; z-index: 1; transition: transform .2s ease, visibility .3s ease; }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li:hover:after,
.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li.wdt-interactive-showcase-active:after {
   visibility: visible; transform: scaleY(1); }

/* === Accordion Descp Style === */

.wdt-interactive-showcase-container { display: grid; grid-template-columns: 38% 62%; align-items: center; justify-items: flex-start; margin: 0; }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper,
.wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper { padding: 0; }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li { border-top: 1px solid var(--wdtBorderColor); padding: clamp(1.25rem, 0.9615rem + 1.2821vw, 2.5rem); }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-interactive-showcase-content-group .wdt-content-description { transform: translateY(50px); transition: var(--wdtBaseTransition); -webkit-transition: var(--wdtBaseTransition); height: 0px; }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li { 
    overflow: hidden;
 }
.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li.wdt-interactive-showcase-active .wdt-interactive-showcase-content-group .wdt-content-description { transform: translateY(0px); height: auto; margin-top: 10px; }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li:last-child { border-bottom: 1px solid var(--wdtBorderColor); }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li:not(:last-child) { margin-bottom: 0; }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li > .wdt-interactive-showcase-content-group .wdt-content-image,
.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li > .wdt-interactive-showcase-content-group .wdt-content-image img {
    width: 40px;
    height: 40px;
    margin-right: 20px;
    border-radius: var(--wdtRadius_Zero);
    -webkit-border-radius: var(--wdtRadius_Zero);
}

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li > .wdt-interactive-showcase-content-group { color: var(--wdtPrimaryColor); }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li > .wdt-interactive-showcase-content-group { display: flex; gap: 0; justify-content: flex-start; align-items: center; }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li.wdt-interactive-showcase-active > .wdt-interactive-showcase-content-group { align-items: flex-start; }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-content-title { font-size: var(--wdtFontSize_H4); font-weight: var(--wdtFontWeight_Alt); line-height: var(--wdtLineHeight_Alt); transition: var(--wdtBaseTransition); -webkit-transition: var(--wdtBaseTransition); }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-interactive-showcase-button a { color: var(--wdtPrimaryColor); transition: var(--wdtBaseTransition); -webkit-transition: var(--wdtBaseTransition); }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li:hover .wdt-interactive-showcase-button a,
.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li.wdt-interactive-showcase-active .wdt-interactive-showcase-button a { color: var(--wdtAccentTxtColor); }

.wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"] {
    transform: none;
    transform-origin: unset;
    transition: var(--wdt-Ad-Transition);
    opacity: 0;
}

.wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"].wdt-interactive-showcase-active {
    transform: none;
    visibility: visible;
    opacity: 1;
}

.wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper,
.wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div { height: 100%; }
.wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div > img { height: 100%; object-fit: cover; }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li.wdt-interactive-showcase-active { background-color: var(--wdtPrimaryColor); }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-interactive-showcase-content-group .wdt-content-description > a { display: block; width: fit-content; line-height: var(--wdtLineHeight_Ext); margin-top: 10px; }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-interactive-showcase-content-group .wdt-content-description > a .wdt-interactive-showcase-button-link span { position: relative; overflow: hidden; display: inline-flex; }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-interactive-showcase-content-group .wdt-content-description > a .wdt-interactive-showcase-button-link span:before,
.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-interactive-showcase-content-group .wdt-content-description > a .wdt-interactive-showcase-button-link span:after {
    content: '';
    height: 1px;
    width: 100%;
    background-color: currentColor;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: var(--wdtBaseTransition);
}

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-interactive-showcase-content-group .wdt-content-description > a .wdt-interactive-showcase-button-link span:before { transform: translateX(-120%); -webkit-transform: translateX(-120%); }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-interactive-showcase-content-group .wdt-content-description > a:hover .wdt-interactive-showcase-button-link span:before { transform: translateX(0); -webkit-transform: translateX(0); }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-interactive-showcase-content-group .wdt-content-description > a:hover .wdt-interactive-showcase-button-link span:after { transform: translateX(110%); -webkit-transform: translateX(110%); }


/* Content Hover Clr Change */

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li:hover .wdt-content-title,
.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li:hover .wdt-interactive-showcase-content-group .wdt-content-description,
.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li.wdt-interactive-showcase-active .wdt-content-title,
.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li.wdt-interactive-showcase-active .wdt-interactive-showcase-content-group .wdt-content-description { color: var(--wdtAccentTxtColor); }

/* Image Hover Clr Change */

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li > .wdt-interactive-showcase-content-group .wdt-content-image img { transition: var(--wdtBaseTransition); -webkit-transition: var(--wdtBaseTransition); }

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li:hover > .wdt-interactive-showcase-content-group .wdt-content-image img,
.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li.wdt-interactive-showcase-active >
.wdt-interactive-showcase-content-group .wdt-content-image img { 
    filter: brightness(0) invert(1);
}

.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li:hover > .wdt-interactive-showcase-content-group .wdt-content-image img,
.wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li.wdt-interactive-showcase-active > .wdt-interactive-showcase-content-group .wdt-content-image img { filter: brightness(0) invert(1); }

@media ( max-width: 1024px) {
    .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper { flex: 1 1 100%; padding: 0; }
    .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"] { position: relative; } 
}

@media only screen and (max-width: 767px) {

    .wdt-interactive-showcase-container { grid-template-columns: repeat(1, 1fr); }

}

@media (max-width: 480px) {
    /* .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li > .wdt-interactive-showcase-content-group {
        display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center; } */
}