
.wdt-showcase-container {display: flex;--inter-gap: 60px;gap: var(--inter-gap);flex-direction: column-reverse;}

.wdt-showcase-container > .wdt-showcase-list-wrapper { flex: 0 0 calc(28% - calc(var(--inter-gap) / 2)); }
.wdt-showcase-container > .wdt-showcase-list-wrapper ul {margin: 0px;padding: 0px;list-style-type: none; display: flex;gap: 50px;}
.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li {line-height: var(--wdtLineHeight_Base);cursor: pointer;opacity: 0.3; transition:var(--wdtAltTransition);}
.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li:hover,
.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li.wdt-active {opacity:1;}
.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li .wdt-showcase-element .wdt-showcase-content-group{  display:flex; flex-direction:column; }

.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li:not(:last-child) { margin-bottom: 20px;
	padding:0px; }


.wdt-showcase-container > .wdt-showcase-content-wrapper { flex: 0 0 calc(72% - calc(var(--inter-gap) / 2)); position: relative; }

.wdt-showcase-container > .wdt-showcase-content-wrapper > div[id*="wdt-showcase-"]:first-child { position: relative; }
.wdt-showcase-container > .wdt-showcase-content-wrapper > div[id*="wdt-showcase-"] {
	position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; transition: all 0.5s ease; width: 100%; }

.wdt-showcase-container > .wdt-showcase-content-wrapper > div[id*="wdt-showcase-"] {
	visibility: hidden;
	opacity: 0;
	transition: all .5s linear;
	transform-origin: bottom;
	height: fit-content;
    width: 100%;
}

.wdt-showcase-container > .wdt-showcase-content-wrapper > div[id*="wdt-showcase-"].wdt-active {
	opacity:1;
	z-index: 2;
	visibility: visible;
	width: 100%;
}

.wdt-showcase-container > .wdt-showcase-content-wrapper > div[id*="wdt-showcase-"] .wdt-cus-col-bg{
	opacity:0;
	transform: perspective(1000px) scale(0.95) rotateY(10deg) translateX(-50px) ;
	transition-duration:0.7s;
	filter:blur(8px);
}

.wdt-showcase-container > .wdt-showcase-content-wrapper > div[id*="wdt-showcase-"] .wdt-heading-holder,
.wdt-showcase-container > .wdt-showcase-content-wrapper > div[id*="wdt-showcase-"] .wdt-button-holder{
	opacity:0;
	transition-delay:0s;
}
.wdt-showcase-container > .wdt-showcase-content-wrapper > div[id*="wdt-showcase-"].wdt-active .wdt-cus-col-bg,
.wdt-showcase-container > .wdt-showcase-content-wrapper > div[id*="wdt-showcase-"].wdt-active .wdt-heading-holder,
.wdt-showcase-container > .wdt-showcase-content-wrapper > div[id*="wdt-showcase-"].wdt-active .wdt-button-holder {
	opacity:1;
	filter:blur(0px);
	transform:translate(0px);
}

ul li .wdt-showcase-content-group {
	display: flex;
	padding: 0;
	transition: var(--wdt-Ad-Transition);
	-webkit-transition: var(--wdt-Ad-Transition);
}
.wdt-light-bg ul li .wdt-showcase-content-group{
	background-image: linear-gradient(90deg, var(--wdtPrimaryColor), var(--wdtTertiaryColor), rgba(var(--wdtSecondaryColorRgb),0.05),rgba(var(--wdtSecondaryColorRgb),0.05));
}
ul li.wdt-active .wdt-showcase-content-group{
	background-position: top left;
}

/** 
    Icon Style
*/


.wdt-showcase-container .wdt-content-icon span { display: inline-flex; padding: 0; align-items: center; justify-content: center;
    background-color: transparent; color: var(--wdtPrimaryColor); 
    font-size: var(--wdtFontSize_H4); height: auto; width: auto; -webkit-border-radius: var(--wdtRadius_Zero); border-radius: var(--wdtRadius_Zero); 
    -webkit-box-shadow: 0 0 3px 0 rgba(var(--wdtTertiaryColorRgb),0.15); 
    box-shadow: 0 0 3px 0 rgba(var(--wdtTertiaryColorRgb),0.15); }

.wdt-showcase-container li.wdt-active .wdt-content-icon span{
	color: var(--wdtHeadAltColor);
}
.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li .wdt-showcase-title-group .wdt-content-title{
	font-size:clamp(1.5rem, 1.4164rem + 0.3822vw, 1.875rem); /* Min-24 & Max-30 */
	margin: 0;
}
.wdt-showcase-container .wdt-showcase-list-wrapper ul .wdt-content-icon-wrapper{
	padding-bottom:20px;
	margin-bottom:20px;
	border-bottom:1px solid var(--wdtBorderColor);
	position: relative;
}
.wdt-showcase-container .wdt-showcase-list-wrapper ul .wdt-content-icon-wrapper:before{content: "";position: absolute;width: 0%;height: 1px;background: var(--wdtSecondaryColor); left: 0; top: auto;bottom: -1px;margin: auto;transition: var(--wdtAltTransition);}

.wdt-showcase-container .wdt-showcase-list-wrapper ul > li:hover .wdt-content-icon-wrapper:before,
.wdt-showcase-container .wdt-showcase-list-wrapper ul > li.wdt-active  .wdt-content-icon-wrapper:before{ width:100%;}
.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li:not(:last-child) {
    margin: 0;
}
.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li .wdt-content-description{
	margin-top:20px;
	text-wrap: wrap;
}
.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li .wdt-content-icon-wrapper .wdt-content-icon span{
	font-size:50px; color:var(--wdtHeadAltColor); 
	transition:var(--wdtAltTransition);
}
.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li:hover .wdt-content-icon-wrapper .wdt-content-icon span,
.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li.wdt-active .wdt-content-icon-wrapper .wdt-content-icon span{
	color: var(--wdtLinkHoverColor); filter: drop-shadow(0 0 18px rgba(var(--wdtTertiaryColorRgb),0.8)); -webkit-filter: drop-shadow(0 0 18px rgba(var(--wdtTertiaryColorRgb),0.8));
}
/** 
	scrollbar - Style
*/

@-moz-document url-prefix() {
    .wdt-showcase-list {
        scrollbar-color: var(--wdtPrimaryColor) var(--wdtBodyBGColor);
        scrollbar-width: thin;
    }
}

.wdt-showcase-list::-webkit-scrollbar {
    width: 100%;
    height: 4px;
    border: 0px solid var(--wdtPrimaryColor);
}

.wdt-showcase-list::-webkit-scrollbar-track {
    border-radius: 5px;
    background: rgba(var(--wdtSecondaryColorRgb),0.05);
}

.wdt-showcase-list::-webkit-scrollbar-thumb {
    border-radius: 0;
    background: linear-gradient(-90deg, transparent 0%, var(--wdtPrimaryColor) 50%, transparent 100%);
}

.wdt-showcase-content-group > div:not(:last-child) { margin-bottom: 0; }

@media screen and (max-width:1280px) {
	.wdt-showcase-container{
		--inter-gap:20px;
	}
.wdt-showcase-container > .wdt-showcase-list-wrapper { flex: 0 0 calc(35% - calc(var(--inter-gap) / 2)); }
.wdt-showcase-container > .wdt-showcase-content-wrapper { flex: 0 0 calc(65% - calc(var(--inter-gap) / 2)); position: relative; }
}

@media screen and (max-width:1024px){
	.wdt-showcase-container > .wdt-showcase-list-wrapper { flex: 0 0 calc(40% - calc(var(--inter-gap) / 2)); }
	.wdt-showcase-container > .wdt-showcase-content-wrapper { flex: 0 0 calc(60% - calc(var(--inter-gap) / 2)); position: relative; }
	.wdt-showcase-container .wdt-showcase-list-wrapper .wdt-showcase-list .wdt-showcase-element {
        padding:0 40px 20px 0;
    }
    .wdt-showcase-container .wdt-showcase-list-wrapper .wdt-showcase-list {
        flex-wrap: nowrap;
        scroll-behavior: smooth;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
        scroll-snap-type: x mandatory;
        gap: 0px;
    }

    .wdt-showcase-container .wdt-showcase-list-wrapper ul.wdt-showcase-list li {
        min-width: 33.33%;
        scroll-snap-align: start;
    }
}

@media screen and (max-width:767px) {
	.wdt-showcase-container{ --inter-gap:40px; }
	.wdt-showcase-container > .wdt-showcase-list-wrapper { flex: 0 0 100%; }
	.wdt-showcase-container > .wdt-showcase-content-wrapper { flex: 0 0 100%; position: relative; }
	.wdt-showcase-container .wdt-showcase-list-wrapper ul.wdt-showcase-list li {
        min-width: 50%;
    }
}

@media only screen and (max-width:479px) {	
    .wdt-showcase-container .wdt-showcase-list-wrapper ul.wdt-showcase-list li {
        min-width: 100%;
    }
    .wdt-showcase-container .wdt-showcase-list-wrapper .wdt-showcase-list .wdt-showcase-element {
        padding:0 0 20px;
    }
    .wdt-showcase-container .wdt-showcase-list-wrapper .wdt-showcase-list {
        gap: 30px;
    }

}