/** 
  @ Service Page Styles
  -------------------------------
*/

.wdt-service-archive-wrapper { display: flex; flex-wrap: wrap; --ser-gap: 30px; gap: var(--ser-gap); }

.wdt-service-archive-wrapper.wdt-columns-5 > .wdt-service-item { flex: 0 0 calc(20% - calc(var(--ser-gap) / 1.25)); }
.wdt-service-archive-wrapper.wdt-columns-4 > .wdt-service-item { flex: 0 0 calc(25% - calc(var(--ser-gap) / 1.333)); }
.wdt-service-archive-wrapper.wdt-columns-3 > .wdt-service-item { flex: 0 0 calc(33.3333% - calc(var(--ser-gap) / 1.5)); }
.wdt-service-archive-wrapper.wdt-columns-2 > .wdt-service-item { flex: 0 0 calc(50% - calc(var(--ser-gap) / 2)); }
.wdt-service-archive-wrapper.wdt-columns-1 > .wdt-service-item { flex: 0 0 100%; }


/* ---------------------------------------------------------------------
 === Service Listing ===
--------------------------------------------------------------------- */

/* Common Styles */

.wdt-service-item { 
    position: relative; overflow: hidden; display: grid; align-items: end;     
    -webkit-border-radius: var(--wdtRadius_4X); border-radius: var(--wdtRadius_4X); }
.wdt-service-item .wdt-service-media-group {     
    grid-area: 1 / -1; position: relative; overflow: hidden; 
    display: inline-grid; align-content: end; margin-top: 1px; height: 100%; }
.wdt-service-item > div:not(:last-child) { margin-bottom: 0; }

/* Media Group Styles */

.wdt-service-item .wdt-service-media-group .wdt-service-image a { position: relative; overflow: hidden; }

.wdt-service-item .wdt-service-media-group .wdt-service-image a:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top, rgba(var(--wdtTertiaryColorRgb), 0.8) 40%, transparent 80%);
    -webkit-transition: var(--wdt-Safe-Transition);
    transition: var(--wdt-Safe-Transition);
    opacity: 1;
    margin: auto; }

.wdt-service-item:hover .wdt-service-media-group .wdt-service-image a:after { 
    background-size: 100% 120%, 100% 100%; }

.wdt-service-item .wdt-service-media-group .wdt-service-image a img {
    display: block; height: 100%; min-height: clamp(23.75rem, 21.8597rem + 10.4294vw, 34.375rem); /*580px - 350px*/
    object-fit: cover; object-position: center center; scale: 1; 
    -webkit-transition: var(--wdt-Safe-Transition); transition: var(--wdt-Safe-Transition); }

.wdt-service-item:hover .wdt-service-media-group .wdt-service-image a img {
    -webkit-transform: scale(1.1); transform: scale(1.1); }

/* Detail Group Styles */

.wdt-service-item .wdt-service-detail-group {     
    grid-area: 1 / -1; align-content: end; padding: clamp(1.5625rem, 1.3957rem + 0.9202vw, 2.5rem); /*40px - 25px*/ 
    color: var(--wdtAccentTxtColor); }
    
.wdt-service-item .wdt-service-detail-group > div:not(:last-child) { margin-bottom: 0; }

.wdt-service-item .wdt-service-detail-group > div.wdt-service-top-group > div:not(:last-child) {
    margin-bottom: 12px; }

.wdt-service-item .wdt-service-detail-group > div.wdt-service-top-group .wdt-service-type-price-group,
.wdt-service-item .wdt-service-detail-group > div.wdt-service-top-group .wdt-service-type-price-group .wdt-service-type-price-wrapper {
    display: inline-flex; flex-wrap: wrap; align-items: center; font-family: var(--wdtFontTypo_Base); 
    font-size: clamp(0.875rem, 0.8528rem + 0.1227vw, 1rem); /*16px - 14px*/ font-weight: var(--wdtFontWeight_Base); 
    letter-spacing: 0; text-transform: uppercase; gap: 5px; }

.wdt-service-item .wdt-service-detail-group > div.wdt-service-top-group .wdt-service-type-price-group .wdt-service-type-price del {
    opacity: 0.7; }

.wdt-service-item .wdt-service-title h5 {     
    display: block; font-family: var(--wdtFontTypo_Alt); font-size: clamp(1.5rem, 1.4333rem + 0.3681vw, 1.875rem); /*30px - 24px*/ 
    font-weight: var(--wdtFontWeight_Alt); margin-top: 0px; margin-bottom: 0; text-transform: capitalize; }

.wdt-service-item .wdt-service-detail-group > div.wdt-service-top-group .wdt-service-excerpt p { margin: 0; color: var(--wdtBodyTxtColor); }

.wdt-service-item .wdt-service-detail-group > div.wdt-service-bottom-group .wdt-service-button a { 
    position: relative; overflow: hidden; display: inline-flex; align-items: center; float: none; padding: 0px; 
    font-size: var(--wdtFontSize_Ext); font-weight: var(--wdtFontWeight_Ext); line-height: normal; 
    text-transform: uppercase; background-color: transparent !important; color: var(--wdtHeadAltColor); 
    -webkit-border-radius: var(--wdtRadius_Zero); border-radius: var(--wdtRadius_Zero); margin: 0; }

.wdt-service-item .wdt-service-detail-group > div.wdt-service-bottom-group .wdt-service-button a:hover {
    color: var(--wdtLinkHoverColor); }

.wdt-service-item .wdt-service-detail-group > div.wdt-service-bottom-group .wdt-service-button a::after {
    content: '\e801'; font-family: "common-web-icons"; position: relative; display: block; font-size: calc(100% + 18%); width: auto; height: auto; 
    top: 0; left: 0; right: 0; bottom: 0; background: none !important; color: currentColor; margin: 0; margin-left: 10px; }

.wdt-service-item .wdt-service-detail-group > div.wdt-service-bottom-group .wdt-service-button a span { 
    position: relative; display: block; overflow: hidden; padding: 1px 0; }

.wdt-service-item .wdt-service-detail-group > div.wdt-service-bottom-group .wdt-service-button a span:after, 
.wdt-service-item .wdt-service-detail-group > div.wdt-service-bottom-group .wdt-service-button a span:before { 
    content: ''; display: block; width: 100%; height: 1px; position: absolute; bottom: 1px; 
    background-color: currentColor; backface-visibility: hidden; will-change: transform; isolation: isolate; 
    transition: transform .4s cubic-bezier(.31,.29,.05,.96); }

.wdt-service-item .wdt-service-detail-group > div.wdt-service-bottom-group .wdt-service-button a span:before { left: 0; } 

.wdt-service-item .wdt-service-detail-group > div.wdt-service-bottom-group .wdt-service-button a span:after { left: -100%; transition-delay: 0.3s; }

.wdt-service-item .wdt-service-detail-group > div.wdt-service-bottom-group .wdt-service-button a:hover span:after, 
.wdt-service-item .wdt-service-detail-group > div.wdt-service-bottom-group .wdt-service-button a:hover span:before { transform: translateX(100%); }


/* Top & Bottom Group Hover Styles */

.wdt-service-item .wdt-service-detail-group > div { position: relative; z-index: 1; }

.wdt-service-item .wdt-service-detail-group > div.wdt-service-bottom-group:last-child {     
    padding-top: 20px; }

.wdt-service-item .wdt-service-detail-group > div.wdt-service-top-group {
    -webkit-transform: translateY(var(--service-height)); transform: translateY(var(--service-height)); 
    -webkit-transition: var(--wdt-Safe-Transition); transition: var(--wdt-Safe-Transition);
    backface-visibility: hidden; will-change: transform; }

.wdt-service-item:hover .wdt-service-detail-group > div.wdt-service-top-group {
    -webkit-transform: translateY(0); transform: translateY(0); transition-delay: .16s; }

.wdt-service-item .wdt-service-detail-group > div.wdt-service-bottom-group {
    -webkit-transform: translateY(var(--service-height)); transform: translateY(var(--service-height)); 
    -webkit-transition: var(--wdt-Safe-Transition); transition: var(--wdt-Safe-Transition); 
    opacity: 0; backface-visibility: hidden; will-change: transform; }

.wdt-service-item:hover .wdt-service-detail-group > div.wdt-service-bottom-group {
    -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; transition-delay: .24s; }


/* Colors */

.wdt-service-item .wdt-service-title h5, 
.wdt-service-item .wdt-service-title h5 a { color: var(--wdtHeadAltColor); }
.wdt-service-item .wdt-service-title h5 a:hover { color: var(--wdtLinkHoverColor); }




/* ---------------------------------------------------------------------
 === Service Single ===
--------------------------------------------------------------------- */