.wdt-interactive-showcase-container { display: flex; will-change: flex; flex-wrap: wrap; margin: 0; 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: 0px; } .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: 0; } .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 { position: relative; overflow: hidden; display: inline-flex; align-items: center; background-color: var(--wdtPrimaryColor); } .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper .wdt-content-item .wdt-content-button > a .wdt-button-text { z-index: 1; -webkit-transition: all 0s ease; transition: all 0s ease; } .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper .wdt-content-item .wdt-content-button > a::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: calc(100% + 50px); height: calc(100% + 2px); background-color: var(--wdtSecondaryColor); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: rotate3d(0, 0, 1, 10deg) translate3d(-1.2em, 110%, 0); transform: rotate3d(0, 0, 1, -40deg) translate3d(-1.2em, -100%, 0); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transition: var(--wdt-Livi-Transition); transition: var(--wdt-Livi-Transition); z-index: 0; } .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper .wdt-content-item .wdt-content-button > a:hover::before { -webkit-transform: rotate3d(0, 0, 1, 0deg) translate3d(0, 0, 0); transform: rotate3d(0, 0, 1, 0deg) translate3d(0, 0, 0); } .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 { position: relative; display: grid; } .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"] { grid-area: 1 / -1; -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); transform-origin: bottom left; -webkit-transition: var(--wdt-Livi-Transition); transition: var(--wdt-Livi-Transition); } .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"].wdt-interactive-showcase-active { -webkit-clip-path: inset(0 -100% 0 0); clip-path: inset(0 -100% 0 0); z-index: 1; } @-webkit-keyframes image-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes image-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li:before { content: ''; position: absolute; top: auto; left: 0; right: 0; bottom: -1px; width: 100%; height: 1px; background: var(--wdtPrimaryColor); visibility: hidden; transform: scaleX(0); transform-origin: 0 50%; z-index: 0; -webkit-transition: var(--wdt-Livi-Transition); transition: var(--wdt-Livi-Transition); } .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); } /*==== Custom Styles ====*/ /*==== Style A ====*/ .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container { display: grid; grid-template-columns: 65% 35%; } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li:after { display: none; } /* List Wrapper Styles */ .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper { padding-right: 60px; } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list { counter-reset: wdt-counter; max-width: 100%; } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li { padding: 0; border-bottom: 1px solid var(--wdtBorderColor); } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li a { display: block; padding: clamp(0.625rem, 0.4026rem + 1.227vw, 1.875rem) 0; } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list .wdt-interactive-showcase-active { border-bottom: 1px solid transparent; -webkit-transition: var(--wdt-Livi-Transition); transition: var(--wdt-Livi-Transition); } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-interactive-showcase-content-group { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-interactive-showcase-content-group .wdt-interactive-showcase-media-group .wdt-content-icon-wrapper .wdt-content-icon { position: relative; display: block; width: 45px; height: 45px; -webkit-transform: translateX(-30px); transform: translateX(-30px); opacity: 0; -webkit-transition: 175ms cubic-bezier(0.7, 0, 0.3, 1); transition: 175ms cubic-bezier(0.7, 0, 0.3, 1); } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li:hover .wdt-interactive-showcase-content-group .wdt-interactive-showcase-media-group .wdt-content-icon-wrapper .wdt-content-icon, .wdt-interactive-showcase-style-a .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-interactive-showcase-media-group .wdt-content-icon-wrapper .wdt-content-icon { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-interactive-showcase-content-group i:hover { background-color: var(--wdtPrimaryColor); color: var(--wdtAccentTxtColor); } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-interactive-showcase-content-group .wdt-interactive-showcase-media-group .wdt-content-icon-wrapper .wdt-content-icon i { display: none; } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-interactive-showcase-content-group .wdt-interactive-showcase-media-group .wdt-content-icon-wrapper .wdt-content-icon::after { content: ''; position: absolute; overflow: hidden; width: 45px; height: 45px; top: 0; left: 0; right: 0; bottom: 0; -webkit-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M1.1,25.8c-0.9,0.9-0.9,2.2,0,3.1c0.9,0.9,2.2,0.9,3.1,0L1.1,25.8z M29.5,2.6c0-1.2-1-2.2-2.2-2.2l-19.7,0 c-1.2,0-2.2,1-2.2,2.2c0,1.2,1,2.2,2.2,2.2h17.5v17.5c0,1.2,1,2.2,2.2,2.2c1.2,0,2.2-1,2.2-2.2V2.6z M4.2,28.9L28.9,4.2l-3.1-3.1 L1.1,25.8L4.2,28.9z'%3E%3C/path%3E%3C/svg%3E"); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M1.1,25.8c-0.9,0.9-0.9,2.2,0,3.1c0.9,0.9,2.2,0.9,3.1,0L1.1,25.8z M29.5,2.6c0-1.2-1-2.2-2.2-2.2l-19.7,0 c-1.2,0-2.2,1-2.2,2.2c0,1.2,1,2.2,2.2,2.2h17.5v17.5c0,1.2,1,2.2,2.2,2.2c1.2,0,2.2-1,2.2-2.2V2.6z M4.2,28.9L28.9,4.2l-3.1-3.1 L1.1,25.8L4.2,28.9z'%3E%3C/path%3E%3C/svg%3E"); -webkit-background-repeat: no-repeat; background-repeat: no-repeat; -webkit-background-size: 40%; background-size: 40%; -webkit-background-position: center; background-position: center; outline: 1px solid var(--wdtPrimaryColor); will-change: transform; -webkit-border-radius: var(--wdtRadius_Full); border-radius: var(--wdtRadius_Full); margin: 0; } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-interactive-showcase-content-group .wdt-interactive-showcase-media-group .wdt-content-icon-wrapper .wdt-content-icon:hover:after, .wdt-interactive-showcase-style-a .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-interactive-showcase-media-group .wdt-content-icon-wrapper .wdt-content-icon:after { animation-name: InterActive-IconMove; animation-duration: 600ms; animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); will-change: transform; -webkit-transition: opacity .4s ease-out, transform .8s; transition: opacity .4s ease-out, transform .8s; } @-webkit-keyframes InterActive-IconMove { 0% { background-position: center; } 50% { background-position: top right; background-size: 0%; } 51% { background-position: bottom left; background-size: 0%; } 100% { background-position: center; } } @keyframes InterActive-IconMove { 0% { background-position: center; } 50% { background-position: top right; background-size: 0%; } 51% { background-position: bottom left; background-size: 0%; } 100% { background-position: center; } } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-content-title { font-family: var(--wdtFontTypo_H3); font-size: clamp(1.5rem, 1.3221rem + 0.9816vw, 2.5rem); font-weight: var(--wdtFontWeight_H3); line-height: var(--wdtLineHeight_H3); display: inline-flex; justify-content: center; align-items: center; gap: 16px; color: rgb(var(--wdtHeadAltColorRgb), .8); } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list .wdt-interactive-showcase-active .wdt-content-title { color: var(--wdtPrimaryColor); } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-content-title::before { counter-increment: wdt-counter; content: "0" counter(wdt-counter) " "; font-size: 0.6em; line-height: var(--wdtLineHeight_Alt); } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper, .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"], .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"] .elementor, .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"] .elementor .elementor-element, .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"] .elementor .elementor-element .wdt-interactive-image-Box, .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"] .elementor .elementor-element .wdt-interactive-image-Box .elementor-widget-container, .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"] .elementor .elementor-element .wdt-interactive-image-Box .elementor-widget-container .wdt-image-box-holder, .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"] .elementor .elementor-element .wdt-interactive-image-Box .elementor-widget-container .wdt-image-box-holder .wdt-content-item, .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"] .elementor .elementor-element .wdt-interactive-image-Box .elementor-widget-container .wdt-image-box-holder .wdt-content-item .wdt-content-media-group, .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"] .elementor .elementor-element .wdt-interactive-image-Box .elementor-widget-container .wdt-image-box-holder .wdt-content-item .wdt-content-media-group .wdt-content-elements-group, .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"] .elementor .elementor-element .wdt-interactive-image-Box .elementor-widget-container .wdt-image-box-holder .wdt-content-item .wdt-content-media-group .wdt-content-elements-group .wdt-content-image-wrapper, .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"] .elementor .elementor-element .wdt-interactive-image-Box .elementor-widget-container .wdt-image-box-holder .wdt-content-item .wdt-content-media-group .wdt-content-elements-group .wdt-content-image-wrapper .wdt-content-image, .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"] .elementor .elementor-element .wdt-interactive-image-Box .elementor-widget-container .wdt-image-box-holder .wdt-content-item .wdt-content-media-group .wdt-content-elements-group .wdt-content-image-wrapper .wdt-content-image a, .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"] .elementor .elementor-element .wdt-interactive-image-Box .elementor-widget-container .wdt-image-box-holder .wdt-content-item .wdt-content-media-group .wdt-content-elements-group .wdt-content-image-wrapper .wdt-content-image a img { width: 100%; height: 100%; } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"] .elementor .elementor-element .wdt-interactive-image-Box .elementor-widget-container .wdt-image-box-holder .wdt-content-item .wdt-content-media-group .wdt-content-elements-group .wdt-content-image-wrapper .wdt-content-image a img { object-fit: cover; object-position: center; } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"] .wdt-interactive-image-Box .wdt-image-box-holder .wdt-content-item .wdt-media-image-cover > .wdt-media-image-cover-container { padding: 50px; } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"] .wdt-interactive-image-Box .wdt-image-box-holder .wdt-content-item .wdt-media-image-cover > .wdt-media-image-cover-container > *:not(:last-child) { margin-bottom: 22px; } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"] .wdt-interactive-image-Box .wdt-image-box-holder .wdt-content-item .wdt-media-image-cover > .wdt-media-image-cover-container .wdt-content-title { margin-bottom: 12px; } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"] .wdt-interactive-image-Box .wdt-image-box-holder .wdt-content-item .wdt-media-image-cover > .wdt-media-image-cover-container .wdt-content-title h5 { font-size: var(--wdtFontSize_H5); font-weight: var(--wdtFontWeight_Alt); text-transform: capitalize; backface-visibility: hidden; } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"] .wdt-interactive-image-Box .wdt-image-box-holder .wdt-content-item .wdt-media-image-cover > .wdt-media-image-cover-container .wdt-content-title h5 a { pointer-events: none; } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"] .wdt-interactive-image-Box .wdt-image-box-holder .wdt-content-item .wdt-media-image-cover > .wdt-media-image-cover-container .wdt-content-subtitle { font-size: var(--wdtFontSize_Base); font-weight: var(--wdtFontWeight_Base); letter-spacing: 0; text-transform: none; margin-top: 0; backface-visibility: hidden; } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper div[id*="wdt-interactive-showcase-"] .wdt-interactive-image-Box .wdt-image-box-holder .wdt-content-item .wdt-content-media-group .wdt-content-elements-group .wdt-content-image-wrapper .wdt-content-image::before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(0deg, var(--wdtPrimaryColor) 30%, transparent 60%); background-repeat: no-repeat; background-size: cover; opacity: 0.5; z-index: 1; margin: auto; } /*==== Responsive ====*/ @media (max-width: 1280px) { .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container { display: grid; grid-template-columns: 60% 40%; } } @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 (max-width: 767px) { .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container { grid-template-columns: 1fr; } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper { padding: 0; margin-bottom: clamp(0.625rem, 0.397rem + 1.2579vw, 1rem); } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-content-title { display: none; } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-interactive-showcase-content-group .wdt-interactive-showcase-media-group .wdt-content-icon-wrapper .wdt-content-icon::after { display: none; } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-interactive-showcase-content-group .wdt-interactive-showcase-media-group .wdt-content-icon-wrapper .wdt-content-icon { position: relative; width: 100%; height: 100%; -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1; } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-interactive-showcase-content-group .wdt-interactive-showcase-media-group .wdt-content-icon-wrapper .wdt-content-icon span { font-size: clamp(1.875rem, 1.495rem + 2.0964vw, 2.5rem); } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-interactive-showcase-content-group .wdt-interactive-showcase-media-group .wdt-content-icon-wrapper .wdt-content-icon i { width: 100%; height: clamp(3.125rem, 2.365rem + 4.1929vw, 4.375rem); display: flex; align-items: center; justify-content: center; } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-interactive-showcase-content-group .wdt-interactive-showcase-media-group .wdt-content-icon-wrapper .wdt-content-icon i { border: 1px solid var(--wdtPrimaryColor); isolation: isolate; background-color: var(--wdtPrimaryColor); color: var(--wdtAccentTxtColor); -webkit-background-image: -webkit-linear-gradient(45deg, var(--wdtSecondaryColor) 50%, var(--wdtPrimaryColor) 50%) !important; background-image: linear-gradient(45deg, var(--wdtSecondaryColor) 50%, var(--wdtPrimaryColor) 50%) !important; background-size: 300% !important; background-repeat: no-repeat !important; background-position: right 0px top 0px !important; -webkit-transition: all .3s ease !important; transition: all .3s ease !important; -webkit-box-shadow: 0 0 8px 2px rgba(var(--wdtHeadAltColorRgb), 0.08); box-shadow: 0 0 8px 2px rgba(var(--wdtHeadAltColorRgb), 0.08); } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-interactive-showcase-content-group .wdt-interactive-showcase-media-group .wdt-content-icon-wrapper .wdt-content-icon i:hover { background-position: left 0px bottom 0px !important; color: var(--wdtHeadAltColor); } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: clamp(0.625rem, 0.397rem + 1.2579vw, 1rem); } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li, .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list .wdt-interactive-showcase-active { border: none; width: 100%; } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-interactive-showcase-content-group .wdt-interactive-showcase-media-group { width: 100%; max-width: 100%; } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li::before { display: none; } .wdt-interactive-showcase-style-a .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li a { padding: 0; } } @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; } }