/**
 * Zoomies Service Cards Shortcode Styles
 * 
 * @package SherAgency_Child
 * @version 1.0.0
 */

.zoomies-service-cards-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.zoomies-service-cards-wrapper * {
    box-sizing: border-box;
}

.zoomies-service-cards-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.zoomies-service-card {
    position: relative;
    height: 480px;
    overflow: hidden;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 4px;
    transition: transform 0.4s ease;
    filter: grayscale(70%); 
}

/* Active card style */
.zoomies-service-card.active {
    border: 3px solid #FFA500;
    transition: transform 0.4s ease;
    filter: grayscale(0%);
}

.zoomies-service-card.active  .zoomies-service-card-overlay  {
    opacity:0;
        transition: 300ms;
}

.zoomies-service-card  .zoomies-service-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 1;
    opacity:0.4;
    transition: 300ms;
}

@media only screen and (min-width: 768px) {
	
.zoomies-service-card::before {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 40%, rgba(0, 0, 0, 0.0) 75%);
    transition: background 0.3s ease;

}	
}



@media only screen and (max-width: 767px) {
	
.zoomies-service-card::before {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 50%, rgba(0, 0, 0, 0.0) 85%);
    transition: background 0.3s ease;

}	
}


.zoomies-service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
 
    transition: background 0.3s ease;
    z-index: 2;
}

.zoomies-service-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #E7E2D7;
    opacity: 0.4;
    transition: background 0.3s ease;
    z-index:-1;
    mix-blend-mode: darken;
}



.zoomies-service-card:hover::after,
.zoomies-service-card.active::after {
    opacity:0;
    transition:300ms;
}

.zoomies-service-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 20px;
    color: white;
    box-sizing: border-box;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 3;
}

.zoomies-service-card-title {
    color: #E2A422;
    font-family: "Poiret One", cursive;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: 0.6px;
    text-transform: capitalize;
	margin-bottom:5px;
}

@media only screen and (min-width: 768px) {
	
	.zoomies-service-card-description {
   
    line-height: 150%;
 
}
}

@media only screen and (max-width: 767px) {
	
	.zoomies-service-card-description {
   
    line-height: 130%;
 
}
}

.zoomies-service-card-description {
    color: #FFF;
    font-family: Outfit, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;

    margin-bottom: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    color: #EFEFEF;
    transition: opacity 0.3s ease, max-height 0.3s ease, margin-bottom 0.3s ease;
}

.zoomies-service-card-content .elementor-button  {
    width:100%;
}

.zoomies-service-card-content .btn--secondary-dark {
    opacity: 0;
    max-height: 0;

    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.zoomies-service-card.active .zoomies-service-card-content {
    background: transparent;
}



.zoomies-service-card:hover .zoomies-service-card-description,
.zoomies-service-card.active .zoomies-service-card-description {
    opacity: 1;
    max-height: 200px;
    margin-bottom: 20px;
}

.zoomies-service-card:hover .btn--secondary-dark,
.zoomies-service-card.active .btn--secondary-dark {
    opacity: 1;
    max-height: 100px;
}

.zoomies-service-card .zoomies-service-card-title {
    color: #fff;
}

.zoomies-service-card.active .zoomies-service-card-title {
    color: #E2A422 !important;
}

/* Pagination bullets */
.zoomies-swiper-pagination {
    position: relative;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.zoomies-swiper-pagination .swiper-pagination-bullet {
    width: 20px;
    height: 8px;
    border-radius: 4px;
    background: #D9D9D9;
    opacity: 1;
    transition: width 0.3s ease, background 0.3s ease;
    cursor: pointer;
}

.zoomies-swiper-pagination .swiper-pagination-bullet-active {
    width: 40px;
    background: #FFA500;
}

/* Hide pagination on desktop */
@media (min-width: 1281px) {
    .zoomies-swiper-pagination {
        display: none;
    }
}

/* Desktop layout with flex expansion */
@media (min-width: 1281px) {
    .zoomies-service-cards-container .swiper-wrapper {
        display: flex !important;
        transform: none !important;
        height: 480px;
        transition: flex 0.4s ease, transform 0.4s ease;
    }
    
    .zoomies-service-card {
        flex: 1;
        width: auto !important;
        height: 480px;
        min-height: 400px;
        transition: flex 0.4s ease, transform 0.4s ease !important;
	
    }
    
    .zoomies-service-card.active {
        flex: 2;
        transform: none;
    }
}