
/* ===== Service List ===== */

.dt-services-list .dt-sc-service-item .dt-sc-content-elements-group { display: grid; }
.dt-services-list .dt-sc-service-item .dt-sc-content-elements-group .dt-sc-service-list-image,
.dt-services-list .dt-sc-service-item .dt-sc-content-elements-group .dt-sc-service-price-item { grid-area: 1/-1;  }

.dt-services-list .dt-sc-service-item .dt-sc-content-elements-group .dt-sc-service-price-item { place-self: end; 
    padding: 8px 14px; margin: 10px; background: var(--wdt_Booking_PrimaryColor); color: var(--wdt_Booking_AccentTxtColor);
    font-weight: var(--wdtFontWeight_Base); }



/* ===== Service Type - I ===== */



.dt-sc-service-item.type1{ background-color: var(--wdtTertiaryColor); padding:80px  60px; border-radius:320px; text-align:center;  transition:var(--wdt-Ad-Transition); }
.dt-sc-service-item.type1 .dt-sc-button.dt-sc-button-textual{ 
   padding: 0;
    font-size: inherit;
    font-family: var(--wdtFontTypo_Base);
    font-weight: var(--wdtFontWeight_Ext);
    line-height: var(--wdtLineHeight_Ext);
    color: currentColor;
    border: 0;
    position: relative;
    width: fit-content;
    display: inline;
    text-decoration: none;
    box-shadow: none;
    border-radius: var(--wdtRadius_Zero);
    background-image: linear-gradient(90deg, currentColor 50%, currentColor 50%);
    background-position: left bottom;
    background-size: 0% 1px;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease-in-out, color 0.3s ease-in-out;
    background-color: transparent;
    text-transform:none;
}
 
 .dt-sc-service-item.type1 .dt-sc-button.dt-sc-button-textual:hover{
    color:rgb(var(--wdtAccentTxtColorRgb),.7) !important;
    background-color: transparent;
    background-size: 100% 1px;
    background-position: right bottom;
    background-image: linear-gradient(90deg, currentColor 50%, currentColor 50%);
    background-repeat: no-repeat;
    transition: background-size 0.3s ease-in-out, color 0.3s ease-in-out;
 }
.dt-sc-service-item.type1 .service-details .dt-sc-content-title{ margin-bottom:15px; }
.dt-sc-service-item.type1 .service-details .dt-sc-content-description{ margin-bottom: 20px; }
.dt-sc-service-item.type1 .service-icon-svg{ font-size: clamp(12.5rem, 11.1067rem + 6.3694vw, 18.75rem); color:var(--wdtPrimaryColor); line-height:0; transition:var(--wdt-Ad-Transition); }
.dt-sc-service-item.type1 .service-icon-svg .wdt-icon1-inner1{ color:rgb(var(--wdtAccentTxtColorRgb),.5); transition:var(--wdt-Ad-Transition);   }
.dt-sc-service-item.type1 .dt-sc-content-actions{margin-bottom: calc(var(--content-height) * -1); opacity:0; transition:var(--wdt-Ad-Transition); }
.swiper-slide-active .dt-sc-service-item.type1 .dt-sc-content-actions ,
.dt-sc-service-item.type1:hover .dt-sc-content-actions{ margin-bottom:0; opacity:1; }


.dt-sc-service-item.type1 .service-icon-svg .wdt-icon1-inner1 {
    animation: blob-animation 6s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes blob-animation {
    0% {
        transform: scale(1) translate(0, 0);
        border-radius: 50% 50% 50% 50%;
    }

    20% {
        transform: scale(1.05) translate(3px, -2px);
        border-radius: 60% 40% 55% 45%;
    }

    40% {
        transform: scale(1.1) translate(-2px, 3px);
        border-radius: 45% 55% 40% 60%;
    }

    60% {
        transform: scale(1.05) translate(2px, 2px);
        border-radius: 55% 45% 60% 40%;
    }

    80% {
        transform: scale(1.08) translate(-3px, -2px);
        border-radius: 40% 60% 45% 55%;
    }

    100% {
        transform: scale(1) translate(0, 0);
        border-radius: 50% 50% 50% 50%;
    }
}


.wdt-cus-class1-pagination .wdt-carousel-arrow-pagination{margin-top:0; }


.swiper-slide-active .dt-sc-service-item.type1 .service-icon-svg,
.dt-sc-service-item.type1:hover .service-icon-svg {color:var(--wdtAccentTxtColor); }
.swiper-slide-active .dt-sc-service-item.type1 .service-icon-svg .wdt-icon1-inner1,
.dt-sc-service-item.type1:hover .service-icon-svg .wdt-icon1-inner1{  color:rgb(var(--wdtAccentTxtColorRgb),.2); }

.dt-services-item-wrapper:has(.dt-sc-service-item.type1){ align-items:center; }

.dt-sc-service-item.type1 .service-details{ text-align:center; }
.dt-sc-service-item.type1  .image-item img{ width:250px; max-height:300px; }
.dt-sc-service-item.type1:hover,.swiper-slide-active .dt-sc-service-item.type1{ background-color:var(--wdtPrimaryColor); }
.dt-sc-service-item.type1  .dt-sc-content-title .dt-sc-service-title,
.dt-sc-service-item.type1 .dt-sc-button.dt-sc-button-textual,
.dt-sc-service-item.type1 .service-details .dt-sc-content-description{ transition:var(--wdt-Ad-Transition); }

.dt-sc-service-item.type1:hover .dt-sc-button.dt-sc-button-textual,
.swiper-slide-active .dt-sc-service-item.type1 .dt-sc-button.dt-sc-button-textual,
.dt-sc-service-item.type1:hover .service-details .dt-sc-content-description,
.swiper-slide-active .dt-sc-service-item.type1 .service-details .dt-sc-content-description{ color:var(--wdtAccentTxtColor); }
.dt-sc-service-item.type1:hover  .dt-sc-content-title .dt-sc-service-title,
.swiper-slide-active .dt-sc-service-item.type1  .dt-sc-content-title .dt-sc-service-title{ color:var(--wdtAccentTxtColor); }


@media(max-width:1024px){
.dt-sc-service-item.type1{
    padding: 50px 40px;
}
}



/* ===== Service Type - II ===== */ 

 .dt-services-item-wrapper:has(.dt-sc-service-item.type2){
       counter-reset: counter-number;
 }
 .swiper-slide:nth-child(even):has(.dt-sc-service-item.type2){ margin-top:60px; }

.dt-sc-service-item.type2 { display:grid; border-radius: var(--wdtRadius_2X); overflow:hidden; }
.dt-sc-service-item.type2:after{
    content: '0' counter(counter-number) ;
    counter-increment: counter-number;
    position:absolute;
    margin-right: 3px;
    color: var(--wdtAccentTxtColor); top:30px; left:30px; font-size: clamp(1.625rem, 1.4605rem + 0.6579vw, 2.25rem); /* Min-26 & Max-36 */
    font-family:var(--wdtFontTypo_H1); font-style:italic;
}
.dt-sc-service-item.type2 .image{ grid-area:1/1;  }

.dt-sc-service-item.type2 .image .image-item,.dt-sc-service-item.type2 .image img{ height:100%; object-fit:cover; transform:scale(1); transition:var(--wdt-Ad-Transition); }
.dt-sc-service-item.type2:hover .image .image-item,.dt-sc-service-item.type2:hover .image img{
    transform:scale(1.02);
}
.dt-sc-service-item.type2 .service-details{ grid-area: 1/1; padding:30px; padding-top:clamp(14.375rem, 13.121rem + 5.7325vw, 20rem); position: relative; }
.dt-sc-service-item.type2 .image:after{ 
    content:''; width:100%; height:100%;  background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.7) 55%, rgba(0, 0, 0, 0.5) 100% ); position:absolute; top:0; left:0; border-radius: var(--wdtRadius_2X);
 }
.dt-sc-service-item.type2 .service-details .dt-sc-content-description,
.dt-sc-service-item.type2  .dt-sc-content-title .dt-sc-service-title{ color:var(--wdtAccentTxtColor); }
.dt-sc-service-item.type2  .dt-sc-content-title a:hover{ color:rgb(var(--wdtAccentTxtColorRgb),.7); }


.dt-sc-service-item.type2 .service-details .dt-sc-content-group > .dt-sc-button:first-child{display:none; }

.dt-sc-service-item.type2 .service-details .dt-sc-content-group > a { padding: 0;
    font-size: inherit;
    font-family: var(--wdtFontTypo_Base);
    font-weight: var(--wdtFontWeight_Ext);
    line-height: var(--wdtLineHeight_Ext);
    color:var(--wdtAccentTxtColor);
    border: 0;
    position: relative;
    width: fit-content;
    display: inline;
    text-decoration: none;
    box-shadow: none;
    border-radius: var(--wdtRadius_Zero);
    background-image: linear-gradient(90deg, currentColor 50%, currentColor 50%);
    background-position: left bottom;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease-in-out, color 0.3s ease-in-out;
    background-color: transparent;
    text-transform:capitalize; }

.dt-sc-service-item.type2 .service-details .dt-sc-content-group > a:hover{
    color:rgb(var(--wdtAccentTxtColorRgb),.7);
    background-color: transparent;
    background-size: 0% 1px;
    background-position: right bottom;
    background-image: linear-gradient(90deg, currentColor 50%, currentColor 50%);
    background-repeat: no-repeat;
    transition: background-size 0.3s ease-in-out, color 0.3s ease-in-out;
}


.dt-sc-service-item.type2 .service-details .dt-sc-content-group { opacity:0; transform:translateY(100%); transition:var(--wdt-Ad-Transition);  margin-top:20px; }
.swiper-slide-active .dt-sc-service-item.type2 .service-details .dt-sc-content-group ,
.dt-sc-service-item.type2:hover .service-details .dt-sc-content-group { opacity:1; transform:translateY(0);}


.dt-sc-service-item.type2 .service-details .dt-sc-content-description,
.dt-sc-service-item.type2  .dt-sc-content-title .dt-sc-service-title{transform:translateY(30px); transition:var(--wdt-Ad-Transition); }

.swiper-slide-active .dt-sc-service-item.type2 .service-details .dt-sc-content-description,
.swiper-slide-active .dt-sc-service-item.type2  .dt-sc-content-title .dt-sc-service-title,
.dt-sc-service-item.type2:hover .service-details .dt-sc-content-description,
.dt-sc-service-item.type2:hover  .dt-sc-content-title .dt-sc-service-title{ transform: translateY(0); }




@media(max-width:767px){
    
    .swiper-slide:nth-child(even):has(.dt-sc-service-item.type2){ margin-top:0;}
}


/* ===== Booking Form - Popup ===== */

.dt-sc-service-items-container .dt-sc-service-item-type2 .dt-sc-service-item-form-wrapper { padding: 60px;
    border-radius: var(--wdt-booking-Radius_Zero); border: none; background-color: var(--wdt_Booking_BodyBGColor);
    height: fit-content; max-height: calc(100vh - 2*1.5em); position: relative; width: 100%; margin: auto; max-width: 620px; }

.dt-sc-service-items-container .dt-sc-service-item-type2 { position: fixed; top: 50%; left: 50%; 
    -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 10;
    -webkit-transition: var(--wdt_Booking_Ad-Transition); transition: var(--wdt_Booking_Ad-Transition);
    width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.18); display: flex; align-items: center; justify-content: center; }


.dt-sc-service-item-type2 .dt-sc-service-item-type2-close { display: block; clear: both; 
    position: absolute; top: -22px; right: -22px; transition: var(--wdt_Booking_Ad-Transition);}

.dt-sc-service-item-type2 .dt-sc-service-item-type2-close span { position: relative; width: 45px; height: 45px;
    background-color: var(--wdt_Booking_PrimaryColor); border-radius: var(--wdt_Booking_Radius_Zero); cursor: pointer;
    border: 0 solid var(--wdt_Booking_BorderColor); display: flex; padding: 5px; align-items: center; justify-content: center;
    -webkit-transition: var(--wdt_Booking_Ad-Transition); transition: var(--wdt_Booking_Ad-Transition); }

.dt-sc-service-item-type2 .dt-sc-service-item-type2-close span:hover { 
    background-color: var(--wdt_Booking_SecondaryColor); border-color: var(--wdt_Booking_SecondaryColor); }


.dt-sc-service-item-type2 .dt-sc-service-item-type2-close i:after,
.dt-sc-service-item-type2 .dt-sc-service-item-type2-close i:before { content: "" !important; width: 20px; height: 1px;
    background-color: var(--wdt_Booking_AccentTxtColor); position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;
    -webkit-transition: var(--wdt_Booking_Ad-Transition); transition: var(--wdt_Booking_Ad-Transition); }

.dt-sc-service-item-type2 .dt-sc-service-item-type2-close i:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.dt-sc-service-item-type2 .dt-sc-service-item-type2-close i:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.dt-sc-service-item-type2 .dt-sc-service-item-type2-close span:hover i:before { 
    -webkit-transform: rotate(-135deg); transform: rotate(-135deg); background-color: var(--wdt_Booking_AccentTxtColor); }

.dt-sc-service-item-type2 .dt-sc-service-item-type2-close span:hover i:after { 
    -webkit-transform: rotate(135deg); transform: rotate(135deg); background-color: var(--wdt_Booking_AccentTxtColor); }  



/* ===== Service Type - III ===== */ 

.elementor-widget-container:has(.dt-sc-service-item.type3){ overflow:hidden !important; }
.dt-sc-service-item.type3 {display:grid; align-items:end; height:100%; }
.dt-sc-service-item.type3 .image{ grid-area:1/1; position: relative; height: 100%;  }
.dt-sc-service-item.type3 .image,.dt-sc-service-item.type3 .image .image-item,
.dt-sc-service-item.type3 .image .image-item img{ height:100%; object-fit:cover; }
.dt-sc-service-item.type3 .service-details{ grid-area:1/1; text-align:center; padding:30px; z-index:1; padding-top:220px; height:100%; }
.dt-sc-service-item.type3 .dt-sc-service-meta-items{  display:flex; justify-content: center; gap:10px; margin-bottom:25px; flex-wrap: wrap; }
.dt-sc-service-item.type3 .dt-sc-service-meta ul .dt-sc-service-meta-item{ padding: 7px 16px;
    background-color: rgb(var(--wdtAccentTxtColorRgb), .1); backdrop-filter: blur(10px); border-radius: var(--wdtRadius_2X); color: var(--wdtAccentTxtColor); border: 1px solid rgb(var(--wdtAccentTxtColorRgb), .4);  }
.dt-sc-service-item.type3 .service-details .dt-sc-service-title{ color:var(--wdtAccentTxtColor); }
.dt-sc-service-item.type3  .service-details > .dt-sc-content-title {margin-bottom: 20px; }
.dt-sc-service-item.type3 .service-details >  .dt-sc-content-description{ color:var(--wdtAccentTxtColor); max-width:300px; margin:0 auto; }
.dt-sc-service-item.type3 .dt-sc-button{
    padding: 0;
    font-size: inherit;
    font-family: var(--wdtFontTypo_Base);
    font-weight: var(--wdtFontWeight_Ext);
    line-height: var(--wdtLineHeight_Ext);
    color:var(--wdtAccentTxtColor);
    border: 0;
    position: relative;
    width: fit-content;
    display: inline;
    text-decoration: none;
    box-shadow: none;
    border-radius: var(--wdtRadius_Zero);
    background-image: linear-gradient(90deg, currentColor 50%, currentColor 50%);
    background-position: left bottom;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease-in-out, color 0.3s ease-in-out;
    background-color: transparent;
    text-transform: capitalize;

}
.dt-sc-service-item.type3 .dt-sc-button:hover{
     color:rgb(var(--wdtAccentTxtColorRgb),.7);
    background-color: transparent;
    background-size: 0% 1px;
    background-position: right bottom;
    background-image: linear-gradient(90deg, currentColor 50%, currentColor 50%);
    background-repeat: no-repeat;
    transition: background-size 0.3s ease-in-out, color 0.3s ease-in-out;
  }

.dt-sc-service-item.type3  .dt-sc-content-group{ margin-top:20px; }

.dt-sc-service-item.type3 .image:after{ 
    content:''; width:100%; height:100%;  background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 25%,
        rgba(0, 0, 0, 0.08) 40%,
        rgba(0, 0, 0, 0.35) 75%,
        rgba(0, 0, 0, 0.7) 100%
    ); position:absolute; top:0; left:0; 
 }
 
.dt-sc-service-item.type3 .image:before{ 
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.5) 55%, rgba(0, 0, 0, 0.7) 100% );
    position: absolute;
    top: 0;
    left: 0;
 }
.dt-sc-service-item.type3  .dt-sc-content-title a:hover{ color:rgb(var(--wdtAccentTxtColorRgb),.7); }



 .dt-sc-service-item.type3 .service-details .dt-sc-content-group { opacity:0; transform:translateY(100%); transition:var(--wdt-Ad-Transition);  margin-top:20px; }
.dt-sc-service-item.type3:hover .service-details .dt-sc-content-group { opacity:1; transform:translateY(0);}


.dt-sc-service-item.type3 .service-details .dt-sc-content-description,
.dt-sc-service-item.type3  .dt-sc-content-title {transform:translateY(30px); transition:var(--wdt-Ad-Transition); }
.dt-sc-service-item.type3 .dt-sc-service-meta{ transform:translateY(30px); transition:var(--wdt-Ad-Transition); }

.dt-sc-service-item.type3:hover .service-details .dt-sc-content-description,
.dt-sc-service-item.type3:hover  .dt-sc-content-title { transform: translateY(0); }
.dt-sc-service-item.type3:hover .dt-sc-service-meta{ transform: translateY(0); }
@media (max-width:1024px){
    .dt-sc-service-item.type3 .service-details{ padding: 40px; }
}
@media (max-width:767px){
    .dt-sc-service-item.type3 .service-details{ padding: 30px; }
}
@media (max-width:479px){
   .dt-sc-service-item.type3 .service-details{  padding-top:200px; } 
}
