/* =====================================
			SERVICES
===================================== */
.ts-service-grid{
    row-gap:20px;
position:relative !important;
    top: auto !important;
margin-bottom:20px;
}

.ts-service-grid-item{
margin-bottom:20px;
}
.ts-service-grid-item.ts-hide {
  pointer-events: none;
}

/* ==========================
		  FILTER
========================== */
.ts-service-wrapper .ts-service-filter-bar {
margin:0 0 20px 0; 
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
position: relative !important;
width: 100%;
}
.ts-service-wrapper .ts-service-filter-bar button {
  cursor: pointer;
  padding:6px 0px; background: transparent; color:#000;
}
.ts-service-wrapper .ts-service-filter-bar button.active {
  color: #000;
}
.ts-service-wrapper .ts-no-result {
  margin-top: 20px;
  text-align: center;
  font-weight: 500;
}
/* ==========================
		  Popup
========================== */
.ts-image-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  z-index: 9999;
}

.ts-image-popup.active {
  opacity: 1;
  visibility: visible;
}
.ts-image-popup-inner {  background:#111; 
  padding:20px;}
.ts-image-popup img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.ts-img-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
}
.ts-img-popup {
  cursor: zoom-in;
}
.ts-image-popup img {
  transform: scale(0.9);
  transition: 0.3s;
}

.ts-image-popup.active img {
  transform: scale(1);
}

/* ==========================
		  Social
========================== */
.ts-socials-list{
    display: flex;
    align-items: center;
    justify-content: center;
}
.ts-socials-list a {
  margin-right: 10px;
  width:20px; height:20px;    
}
.ts-socials-list img {width:100%; height:auto;}
/* ==========================
		  Thumb
========================== */
.ts-thumb img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}
/* ==========================
		  Contentd
========================== */
.ts-full-content {
  position: fixed;
  top: 0;
  right: -100%;
  width: 400px;
  height: 100%;
  background: #fff;
  z-index: 9999;
  transition: right 0.4s ease;
  box-shadow: -10px 0 30px rgba(0,0,0,0.1);
}

.ts-full-content.active {
  right: 0;
}

.ts-panel-inner {
  padding: 30px;
  overflow-y: auto;
  height: 100%;
}

.ts-close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
}

.ts-readmore-btn {
  margin-top: 10px;
  cursor: pointer;
}
.ts-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
}

.ts-overlay.active {
  opacity: 1;
  pointer-events: all;
}
/* Panel */
.ts-global-panel {
  position: fixed;
  top: 0;
  right: -100%;
  width: 480px;
  height: 100%;
  background: #fff;
  z-index: 9999;
}

.ts-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
}
/* .ts-service-wrapper, */
/* .elementor-edit-area-active .ts-service-grid {height:100% !important;} */
.ts-service-wrapper {height:100% !important;}

[data-equal-height*="true"] .ts-service-container,
[data-equal-height*="true"] .ts-service-image-container,
[data-equal-height*="true"] .ts-service-image {
    height: 100%;	
}
/* Active states */
.ts-panel-overlay.active {
  opacity: 1;
  pointer-events: all;
}
/* Card */
.ts-service-meta {
  transition: 0.3s ease;
  padding:0px 0 0;
  position:relative;
}
.ts-service-slider-container{
    width:100%;
}
/* ============== CARD ============== */
.ts-service-container {
position:relative; 
display: flex;
flex-direction: column;
overflow:hidden;
z-index:990;
}

.ts-service-content {
  position: relative;
  padding: 0px;
}
.style2 .ts-service-meta
{position:absolute;
    left: 20px;
    right: 20px;
    bottom: 30px;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
	opacity:0;
	z-index: 2;
	transform: translateY(50);
	-webkit-transition: all 1s ease-out 0s;
    transition: all 1s ease-out 0s;
}
.style2 .ts-service-grid-item:hover .ts-service-meta
{
transform: translateY(0);
opacity: 1;
}
.ts-service-overlay{
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
background-size: 300% 100%;
transform: scale3d(1, 1, 1);
  backface-visibility: hidden;
  will-change: transform;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
 .ts-service-grid-item:hover .ts-service-overlay
{
background-position: 100% 0;
}
.ts-service-image-container {
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	width:100%;
}
.ts-service-image {
  width: 100%;
  overflow:hidden;
  position: relative;
}
.ts-service-image img{
/* transform: skewX(0deg) !important; */
}
.ts-service-wrapper .ts-service-image .ts-service-img img
{
  width: 100%;
  height: 100%;
  object-fit:cover;	
	-webkit-transition: opacity 1s, -webkit-transform 1s;
	transition: opacity 1s, transform 1s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.ts-service-wrapper .ts-service-image:hover .ts-service-img img {
	opacity: 1;
	-webkit-transform: scale3d(1.1,1.1,1);
	transform: scale3d(1.1,1.1,1);
}
.ts-service-container .ts-service-image a {
display: flex;
    width: 100%;
	height:100%;
    align-items: center;
    justify-content: center;
	overflow:hidden;
}
.ts-service-cat-icon-container
{position:relative;
display:flex;
align-items:center;
justify-content:center;
}
.ts-service-cat-icon

 {
  display: flex;
  align-items: center;
  justify-content:center;
  gap: 6px;
  border-radius: 90px;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  width: 65px;
  height: 65px;
transition:0.3s;
position: absolute;
z-index: 2;
left:50%;
    bottom: -10px;
transform: translateX(-50%);
}
.ts-service-cat-icon.relative-icon
{  position: relative;}
.ts-service-cat-icon a
{
  display: flex;
  align-items: center;
  justify-content:center;
width:100%;
height:100%;  
}
.ts-service-cat-wrapper .ts-service-cat-icon{
    width:30px;
    height:30px;
    background:#fff;;

    -webkit-mask-image:var(--icon);
    mask-image:var(--icon);

    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;

    -webkit-mask-position:center;
    mask-position:center;

    -webkit-mask-size:contain;
    mask-size:contain;
}
.ts-service-cat-icon svg,
.ts-service-cat-icon img {
    width: 50%;
    height: 50%;
	}
.ts-service-card-inner {
  transition: 0.3s ease;
}

.ts-service-container h2{font-size:16px;margin-bottom:0;}
.ts-service-price {
font-size: 14px;
    margin-bottom: 0;
    display: inline-block;
}
.ts-service-btn-wrap,
.ts-service-btn{display:inlinr-flex; padding:5px 0; border-radius:4px;}
.ts-service-container .ts-service-meta .ts-service-btn-wrap .ts-s-btn-icon i{font-size:15px;}
.ts-service-container .ts-service-meta .ts-service-btn-wrap .ts-s-btn-icon svg{width:20px; height:20px;}
.ts-s-btn-icon i{font-size:16px;}
.ts-s-btn-icon svg{width:20px; height:auto;}
/* ============================
			SWIPER
============================ */

.ts-service-swiper {
    position: relative !important;
    width: 100%;
  overflow:hidden;
    position: relative;
	    padding-bottom: 35px;
}
.ts-service-swiper .swiper-wrapper {
    display: flex;
	align-items: stretch;
}

.ts-service-swiper .swiper-slide {
    height: auto;
  margin-bottom:30px;
}

.ts-service-wrapper .swiper-slide.swiper-slide-active .ts-service-img img, 
.ts-service-wrapper .swiper-slide.swiper-slide-duplicate-active .ts-service-img img {
  transform: scale3d(1.3, 1.3, 1);
}

.ts-service-wrapper .ts-service-container:hover .ts-service-img img
{
transform: scale3d(1.3, 1.3, 1);
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 1400ms ease;
}
.ts-service-pagination{
    position: relative !important;
	top:unset!important;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
	max-width: auto;
	margin-top: -20px;
}
.ts-service-post-pagination
{
    position: relative !important;
	top:unset!important;
    z-index: 10;
    width: 100% !important;
}
.ts-service-post-pagination a,
.ts-service-post-pagination span{
    display: inline-flex;
    align-content: center;
    justify-content: center;
    align-items: center;	
}
.ts-service-wrapper[data-layout="grid"] .ts-service-pagination a,
.ts-service-wrapper[data-layout="grid"] .ts-service-pagination span{
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
	margin:0 10px;
	width:15px; height:15px;
	
}
.ts-service-pagination .swiper-pagination-bullet{
    background: var(--theme-color);
    width: 22px;
    height: 4px;
    border-radius: 0;
	opacity:1;
    transition: opacity 1s ease;
}
.ts-service-arrow {
    top: 50% !important;
	z-index:999;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: -54px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ts-service-wrapper .ts-service-arrow .ts-service-arrow-nav
{
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;	
	  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}
.ts-service-prev,
.ts-service-next{
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    cursor: pointer;
    width: 30px;
    height: 30px;
	opacity:0;
	
}
.ts-service-wrapper:hover .ts-service-prev,
.ts-service-wrapper:hover .ts-service-next
{
	transform: scale(1.1);
	opacity:0;
}
.ts-service-prev svg,
.ts-service-next svg{
width:100%;
height:100%;
}
.ts-service-prev svg{transform: rotate(180deg);}
.ts-service-prev{
    left: -30px!important;
	right: unset !important;
	
}

.ts-service-next{
    right: -30px!important;
    left: unset !important;
}
.ts-service-swiper  .ts-service-next {
    transform: rotate(180deg);
}
/* ============================
			SWIPER MARQUEE
============================ */
.ts-service-marquee-track > * {
  flex: 0 0 auto;
  width: 420px; /*  fixed width (adjust as needed) */
}
.ts-service-marquee {
    overflow: hidden;
    width: 100%;
    position: relative !important;
}

.ts-service-marquee-track {
    display: flex;
    width: max-content;
	  will-change: transform;
	    gap: 20px;
}

.ts-service-marquee-track > * {
    flex: 0 0 auto;
}