
.wdt-showcase-container { 
	position: relative; overflow: hidden; display: grid; align-items: end; 
	backface-visibility: hidden; isolation: isolate; will-change: transform; }

.wdt-showcase-container > .wdt-showcase-list-wrapper { 
	position: relative; overflow: hidden; grid-area: 1/-1; backface-visibility: hidden;
    isolation: isolate; will-change: transform; z-index: 1; }

.wdt-showcase-container > .wdt-showcase-list-wrapper ul { 
	counter-reset: set-counter; list-style-type: none; display: flex; flex-wrap: nowrap; justify-content: center; 
	align-items: flex-end; padding: 0; margin: 0; }

.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li { 
	position: relative; overflow: hidden; cursor: pointer; width: 100%; max-width: 100%; 
	flex: 1; line-height: var(--wdtLineHeight_Base); padding: clamp(1.875rem, 1.5414rem + 1.8405vw, 3.75rem); /*60px - 30px*/ 
	background-color: rgba(var(--wdtSecondaryColorRgb), 0.7); backdrop-filter: blur(4px);
	-webkit-transition: var(--wdt-Livi-Transition); transition: var(--wdt-Livi-Transition); }

.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li.wdt-active {
	background-color: rgba(var(--wdtSecondaryColorRgb), 0.8);
	-webkit-transition: var(--wdt-Livi-Transition); transition: var(--wdt-Livi-Transition); }

.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li:not(:last-child) { 
	border-right: 1px solid rgba(var(--wdtBorderColorRgb), 0.5); margin-bottom: 0; }

.wdt-showcase-container > .wdt-showcase-content-wrapper { 
	position: relative; grid-area: 1/-1; backface-visibility: hidden; 
	isolation: isolate; will-change: transform; z-index: 0; }

.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; }

.wdt-showcase-container > .wdt-showcase-content-wrapper > div[id*="wdt-showcase-"] {
	-webkit-clip-path: inset(100% 0 0 0); clip-path: inset(100% 0 0 0); 
	-webkit-transition: 675ms cubic-bezier(0.7, 0, 0.3, 1), transform 675ms ease; 
	transition: 675ms cubic-bezier(0.7, 0, 0.3, 1), transform 675ms ease;
	backface-visibility: hidden; will-change: transform; isolation: isolate; }

.wdt-showcase-container > .wdt-showcase-content-wrapper > div[id*="wdt-showcase-"].wdt-active {
	-webkit-clip-path: inset(-100% 0 0 0); clip-path: inset(-100% 0 0 0); z-index: 2;
	backface-visibility: hidden; will-change: transform; isolation: isolate; }

.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li .wdt-showcase-content-group { text-align: center; }

.wdt-showcase-container > .wdt-showcase-content-wrapper,
.wdt-showcase-container > .wdt-showcase-content-wrapper > div[id*="wdt-showcase-"],
.wdt-showcase-container > .wdt-showcase-content-wrapper > div[id*="wdt-showcase-"] .wdt-content-image-wrapper,
.wdt-showcase-container > .wdt-showcase-content-wrapper > div[id*="wdt-showcase-"] .wdt-content-image-wrapper .wdt-content-image,
.wdt-showcase-container > .wdt-showcase-content-wrapper > div[id*="wdt-showcase-"] .wdt-content-image-wrapper .wdt-content-image img {
	width: 100%; max-width: 100%; height: 100%; object-fit: cover; object-position: top center; } 


/** Spacing Styles */

.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li .wdt-showcase-content-group .wdt-showcase-media-group > div.wdt-showcase-top-group .wdt-content-icon { margin-bottom: clamp(1.125rem, 1.0472rem + 0.4294vw, 1.5625rem); /*25px - 18px*/ }

.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li .wdt-showcase-content-group .wdt-showcase-media-group > div.wdt-showcase-bottom-group > div:not(:last-child) { margin-right: clamp(0.9375rem, 0.8263rem + 0.6135vw, 1.5625rem); /*25px - 15px*/ }


/** Top & Bottom Group */

.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li .wdt-showcase-content-group .wdt-showcase-media-group > div.wdt-showcase-bottom-group {
    display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--wdtBorderColor); 
    padding-top: clamp(0.9375rem, 0.8819rem + 0.3067vw, 1.25rem); /*20px - 15px*/ 
    margin-top: clamp(0.9375rem, 0.8819rem + 0.3067vw, 1.25rem); /*20px - 15px*/ }

.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li .wdt-showcase-content-group .wdt-showcase-media-group > div.wdt-showcase-bottom-group .wdt-content-description { text-align: left; }

.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li .wdt-showcase-content-group .wdt-showcase-media-group > div.wdt-showcase-bottom-group .wdt-showcase-button .wdt-button {
	width: 60px; height: 60px; font-size: 0 !important; padding: 10px; 
	display: flex; align-items: center; justify-content: center; }

.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li .wdt-showcase-content-group .wdt-showcase-media-group > div.wdt-showcase-bottom-group .wdt-showcase-button .wdt-button:before {
    content: '\e800'; font-family: "common-right-arrow"; font-size: var(--wdtFontSize_H4); margin: auto; }


/* Top & Bottom Group Hover Styles */

.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li .wdt-showcase-content-group .wdt-showcase-media-group > div.wdt-showcase-top-group {
    -webkit-transform: translateY(var(--height)); transform: translateY(var(--height)); 
    -webkit-transition: var(--wdt-Livi-Transition); transition: var(--wdt-Livi-Transition);
    backface-visibility: hidden; will-change: transform; }

.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li.wdt-active .wdt-showcase-content-group .wdt-showcase-media-group > div.wdt-showcase-top-group {
    -webkit-transform: translateY(0); transform: translateY(0); transition-delay: .05s; }

.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li .wdt-showcase-content-group .wdt-showcase-media-group > div.wdt-showcase-bottom-group {
    -webkit-transform: translateY(var(--height)); transform: translateY(var(--height)); 
    -webkit-transition: var(--wdt-Livi-Transition); transition: var(--wdt-Livi-Transition); 
    opacity: 0; backface-visibility: hidden; will-change: transform; }

.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li.wdt-active .wdt-showcase-content-group .wdt-showcase-media-group > div.wdt-showcase-bottom-group {
    -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; transition-delay: .1s; }


/** Icon Style */

.wdt-showcase-container .wdt-content-icon span {     
    width: clamp(4.375rem, 4.2638rem + 0.6135vw, 5rem); /*80px - 70px*/ 
	height: clamp(4.375rem, 4.2638rem + 0.6135vw, 5rem); /*80px - 70px*/ 
	display: inline-flex; align-items: center; justify-content: center; 
	font-size: var(--wdtFontSize_H3); background-color: var(--wdtAccentTxtColor); color: var(--wdtHeadAltColor); 
	padding: 5px; -webkit-border-radius: var(--wdtRadius_Zero); border-radius: var(--wdtRadius_Zero); }


/** Sub Title - Style */

.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li .wdt-content-sub-title {
	position: relative; font-family: var(--wdtFontTypo_Alt); font-size: var(--wdtFontSize_H4); 
	font-weight: var(--wdtFontWeight_Base); text-transform: capitalize; -webkit-transform: translateY(0) scaleY(1); 
	transform: translateY(0) scaleY(1); -webkit-transition: var(--wdt-Livi-Transition); transition: var(--wdt-Livi-Transition); 
    opacity: 1; backface-visibility: hidden; will-change: transform; 
	margin: clamp(0.875rem, 0.8083rem + 0.3681vw, 1.25rem) 0; /*20px - 14px*/ }

.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li.wdt-active .wdt-content-sub-title { 
	-webkit-transform: translateY(-40px) scaleY(1.1); transform: translateY(-40px) scaleY(1.1); opacity: 0; visibility: hidden; }

.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li .wdt-content-sub-title::before {
	counter-increment: set-counter; content: "0" counter(set-counter); pointer-events: none; 
	position: absolute; width: 100px; height: 100px; top: 0; right: 0; bottom: 0; left: 0;
    font-family: var(--wdtFontTypo_Alt); font-size: clamp(4.375rem, 4.1526rem + 1.227vw, 5.625rem); /*90px - 70px*/ 
	font-weight: var(--wdtFontWeight_Alt); line-height: 1.1; color: rgba(var(--wdtAccentTxtColorRgb), 0.25); 
	display: flex; align-items: center; justify-content: center; margin: auto; }


/** Title Group - Style */

.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li .wdt-content-title {
	font-family: var(--wdtFontTypo_Alt); font-size: clamp(1.5rem, 1.4333rem + 0.3681vw, 1.875rem); /*30px - 24px*/ 
    font-weight: var(--wdtFontWeight_Alt); text-transform: capitalize; margin: 0; }

.wdt-showcase-title-group .wdt-content-title { display: inline; position: relative; margin: 0px; }

.wdt-showcase-title-group .wdt-showcase-title-prefix { 
	width: fit-content; display: inline-flex; font-size: 20px; font-weight: 500; 
	color: var(--wdtPrimaryColor); position: relative; margin-right: 10px; padding-right: 10px; line-height: 1; }

.wdt-showcase-title-group .wdt-showcase-title-prefix:after { 
	content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 80%; 
	display: inline-block; background: currentColor; transform: rotate(20deg) translate(-200%, -50%); }


/** The Content - Style */

.wdt-showcase-content-group > div:not(:last-child) { margin-bottom: 12px; }


/** Colors */

.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li .wdt-content-sub-title,
.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li .wdt-content-title,
.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li .wdt-content-description { color: var(--wdtAccentTxtColor); }



/*==== Responsive ====*/

@media only screen and (max-width: 1280px) {
	.wdt-showcase-container > .wdt-showcase-list-wrapper,
	.wdt-showcase-container > .wdt-showcase-list-wrapper ul.wdt-showcase-list,
	.wdt-showcase-container > .wdt-showcase-list-wrapper ul.wdt-showcase-list > li {         
		height: 100%; max-height: 100%; min-height: 100%; }

	.wdt-showcase-container > .wdt-showcase-list-wrapper ul.wdt-showcase-list {
        display: flex; max-width: 100%; width: 100%; scroll-behavior: smooth; 
		overflow-x: scroll; overflow-y: hidden; scroll-snap-type: x mandatory; justify-content: flex-start; }

    .wdt-showcase-container > .wdt-showcase-list-wrapper ul.wdt-showcase-list > li {
		overflow: visible; flex: 0 0 33.33%; scroll-snap-align: start; scroll-snap-stop: always; 
		max-width: 100%; display: flex; align-items: center; justify-content: center; }

    .wdt-showcase-container > .wdt-showcase-list-wrapper ul.wdt-showcase-list::-webkit-scrollbar {
        width: 100%; height: 8px; border: 1px solid transparent; }

    .wdt-showcase-container > .wdt-showcase-list-wrapper ul.wdt-showcase-list::-webkit-scrollbar-track {
		background: rgba(var(--wdtBorderColorRgb), 1); -webkit-border-radius: var(--wdtRadius_Zero); border-radius: var(--wdtRadius_Zero); }

    .wdt-showcase-container > .wdt-showcase-list-wrapper ul.wdt-showcase-list::-webkit-scrollbar-thumb {
		background: var(--wdtPrimaryColor); -webkit-border-radius: var(--wdtRadius_Zero); border-radius: var(--wdtRadius_Zero); }
}

@media only screen and (min-width: 481px) and (max-width: 1024px) {
	.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li .wdt-showcase-content-group .wdt-showcase-media-group > div.wdt-showcase-bottom-group {
		flex-direction: column; }

	.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li .wdt-showcase-content-group .wdt-showcase-media-group > div.wdt-showcase-bottom-group > div:not(:last-child) { margin-right: 0; margin-bottom: 20px; }

	.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li .wdt-showcase-content-group .wdt-showcase-media-group > div.wdt-showcase-bottom-group .wdt-content-description { text-align: center; }
}

@media only screen and (max-width: 767px) {
	.wdt-showcase-container > .wdt-showcase-list-wrapper ul.wdt-showcase-list > li { flex: 0 0 50%; }
}

@media only screen and (max-width: 480px) {
	.wdt-showcase-container > .wdt-showcase-list-wrapper ul.wdt-showcase-list > li { flex: 0 0 100%; }
	.wdt-showcase-container > .wdt-showcase-list-wrapper ul > li:not(:last-child) { border-right: none; }
}