/* ===== Service List ===== */

/* Item */
.dt-services-list .dt-sc-content-item {
    position: relative;
    display: grid;
    padding: 60px 0;
    border-style: solid;
    border-width: 0 0 1px;
    border-color: var(--wdt_Booking_BorderColor); cursor: pointer;
}

/* .dt-services-list .dt-sc-content-item:first-child { border-width: 1px 0; } */
    

/* img */
.dt-services-list .dt-sc-content-item > .dt-sc-content-media-group .dt-sc-service-list-image {
    margin-top: 40px;
}

.dt-services-list .dt-sc-content-item > .dt-sc-content-media-group img {
    width: 100%; height: 100%; max-height: 580px; object-fit: cover; object-position: center center; 
    border-radius: var(--wdt_Booking_Radius_3X); -webkit-border-radius: var(--wdt_Booking_Radius_3X);
}
.dt-services-list .dt-sc-content-item > .dt-sc-content-media-group{
     position:relative;
    overflow:hidden;
    border-radius: var(--wdt_Booking_Radius_3X); -webkit-border-radius: var(--wdt_Booking_Radius_3X);
}

.dt-services-list .dt-sc-content-item > .dt-sc-content-media-group:after{
     content: ""; 
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(var(--wdtAccentTxtColorRgb), 0.3);
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    opacity: 1;
    visibility: visible;
    border-radius:var(--wdtRadius_2X);
    pointer-events:none;
}

.dt-services-list .dt-sc-content-item > .dt-sc-content-media-group:hover:after,
.dt-services-list .dt-sc-content-item.wdt-active > .dt-sc-content-media-group:hover:after{
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

/* content detail group */
.dt-services-list .dt-sc-content-item > .dt-sc-content-detail-group {
    display: grid;
    grid-template-columns: 0.4fr 1fr 1fr 0.6fr;
    gap: 20px;
    align-items: center;
}


/* icon */
.dt-services-list .dt-sc-content-item > .dt-sc-content-detail-group > .wdt-service-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--wdt_Booking_Radius_Full);
    background: var(--wdt_Booking_PrimaryColor);
    color: var(--wdt_Booking_AccentTxtColor);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    position: relative;
    overflow: hidden;
    transition: var(--wdt-Ad-Transition);
}

.dt-services-list .dt-sc-content-item.wdt-active .dt-sc-content-detail-group > .wdt-service-icon{
    background-color: transparent;
}
.dt-services-list .dt-sc-content-item > .dt-sc-content-detail-group > .wdt-service-icon::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--wdtSecondaryColor);
    transition: transform var(--wdt-Ad-Transition);
    border-radius: inherit;
    z-index: -1;
    transform-origin: left top;
    transform: scale(1, 0) skewX(90deg);
}

.dt-services-list .dt-sc-content-item.wdt-active .dt-sc-content-detail-group > .wdt-service-icon::after{
    transform-origin: left bottom;
    transform: scale(1, 1) skewX(0deg);
}


/* title */
.dt-services-list .dt-sc-content-item > .dt-sc-content-detail-group > .dt-sc-content-title .dt-sc-service-title {
    font-size: clamp(1.375rem, 1.2088rem + 0.5552vw, 1.875rem); /* Min-22 & Max-30 */
    margin: 0;
}

.dt-services-list .dt-sc-content-item > .dt-sc-content-detail-group > .dt-sc-content-title .dt-sc-service-title a:hover,
.dt-services-list .dt-sc-content-item.wdt-active > .dt-sc-content-detail-group > .dt-sc-content-title .dt-sc-service-title a  {
    color: var(--wdt_Booking_LinkHoverColor);
}

/* button */
.dt-services-list .dt-sc-content-item > .dt-sc-content-detail-group > .dt-sc-content-button {
    text-align: right;
}

.dt-services-list .dt-sc-content-item > .dt-sc-content-detail-group > .dt-sc-content-button .dt-sc-button {
    padding: 0;
    margin: 0;
    width: 60px;
    height: 60px;
    border-radius: var(--wdt_Booking_Radius_Full);
    -webkit-border-radius: var(--wdt_Booking_Radius_Full);
    font-size: var(--wdtFontSize_H5);
    display: inline-flex;
    align-items: center;
    justify-content: center; rotate: 0deg;
}

.dt-services-list .dt-sc-content-item > .dt-sc-content-detail-group > .dt-sc-content-button .dt-sc-button:hover,
.dt-services-list .dt-sc-content-item.wdt-active > .dt-sc-content-detail-group > .dt-sc-content-button .dt-sc-button{
    background-color: var(--wdt_Booking_LinkHoverColor);
    color: var(--wdt_Booking_AccentTxtColor);
    rotate: -45deg;
}

/* responisve */

@media (min-width: 1025px) {
    .dt-services-list .dt-sc-content-item > .dt-sc-content-media-group  {
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        transition: var(--wdt_Booking_Ad-Transition);
    }

    .dt-services-list .dt-sc-content-item.wdt-active > .dt-sc-content-media-group   {
        max-height: calc(var(--wdt-media-group-height) + 40px);
        opacity: 1;
        visibility: visible;
    }
}


@media (max-width: 1280px) {
    .dt-services-list .dt-sc-content-item {
        padding: 50px 0;
    }

    .dt-services-list .dt-sc-content-item > .dt-sc-content-detail-group > .dt-sc-content-button {
        text-align: center;
        position: absolute;
        top: 120px;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 1;
        width: fit-content;
        height: fit-content;

        visibility: hidden;
        opacity: 0;
        transition: all 0s ease-in-out 0s;
    }


    .dt-services-list .dt-sc-content-item.wdt-active > .dt-sc-content-detail-group > .dt-sc-content-button {
        visibility: visible;
        opacity: 1;
        transition: all 300ms ease-in-out 300ms;
    }
}

@media (max-width: 1024px) {
    .dt-services-list .dt-sc-content-item > .dt-sc-content-detail-group {
        grid-template-columns: auto 1fr;
        gap: 6px 20px;
        align-items: start;
    }

    .dt-services-list .dt-sc-content-item > .dt-sc-content-detail-group > .wdt-service-icon {
        grid-area: 1/1/3/2;
    }

    .dt-services-list .dt-sc-content-item > .dt-sc-content-detail-group > .dt-sc-content-title {
        grid-area: 1/2/2/2;
    }

    .dt-services-list .dt-sc-content-item > .dt-sc-content-detail-group > .dt-sc-content-button{
        transition: all 300ms ease-in-out;
    }
}

@media (max-width: 767px) {
    .dt-services-list .dt-sc-content-item > .dt-sc-content-media-group .dt-sc-service-list-image {
        margin-top: 30px;
    }
    /* .dt-services-list .dt-sc-content-item > .dt-sc-content-detail-group > .dt-sc-content-button {
        top: 140px;
    } */
}

@media (max-width: 479px) {
    .dt-services-list .dt-sc-content-item > .dt-sc-content-detail-group {
        grid-template-columns: 1fr;
    }
     .dt-services-list .dt-sc-content-item > .dt-sc-content-detail-group > .wdt-service-icon,
     .dt-services-list .dt-sc-content-item > .dt-sc-content-detail-group > .dt-sc-content-title {
        grid-area: unset;
    }
    .dt-services-list .dt-sc-content-item > .dt-sc-content-detail-group > .wdt-service-icon {
        width: 60px;
        height: 60px;
        font-size: 36px;
        margin-bottom: 8px;
    }
     .dt-services-list .dt-sc-content-item {
        padding: 40px 0;
    }

    .dt-services-list .dt-sc-content-item > .dt-sc-content-media-group .dt-sc-service-list-image {
        margin-top: 20px;
    }

    .dt-services-list .dt-sc-content-item > .dt-sc-content-detail-group > .dt-sc-content-button .dt-sc-button {
        width: 50px;
        height: 50px;
    }

    .dt-services-list .dt-sc-content-item > .dt-sc-content-detail-group > .dt-sc-content-button {
        top: 210px;
    }
}







/* ================================
   For service
================================ */
.wdt-inview-section .dt-sc-service-item {
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.3, 1),
              opacity 0.8s cubic-bezier(0.25, 1, 0.3, 1);
}


.wdt-inview-section .dt-sc-service-item:nth-child(1) {
  transform: translateY(0px);
}
.wdt-inview-section .dt-sc-service-item:nth-child(4) {
  transform: translateY(30px);
}
.wdt-inview-section .dt-sc-service-item:nth-child(2) {
  transform: translateY(60px);
}
.wdt-inview-section .dt-sc-service-item:nth-child(3) {
  transform: translateY(90px);
}
.wdt-inview-section .dt-sc-service-item:nth-child(5) {
  transform: translateY(120px);
}


.wdt-inview-section.wdt-item-is-inview .dt-sc-service-item  {
  transform: translateY(0px);
  opacity: 1;
}

.wdt-inview-section.wdt-item-is-inview .dt-sc-service-item:nth-child(1) {
  transition-delay: 0s;
}
.wdt-inview-section.wdt-item-is-inview .dt-sc-service-item:nth-child(4) {
  transition-delay: 0.15s;
}
.wdt-inview-section.wdt-item-is-inview .dt-sc-service-item:nth-child(2) {
  transition-delay: 0.3s;
}
.wdt-inview-section.wdt-item-is-inview .dt-sc-service-item:nth-child(3) {
  transition-delay: 0.45s;
}
.wdt-inview-section.wdt-item-is-inview .dt-sc-service-item:nth-child(5) {
  transition-delay: 0.45s;
}