/* ==========================================================
   DJJ Healthcare
   cards.css
========================================================== */

/* ==========================================================
   SERVICES GRID
========================================================== */
.servicesGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 34px;
}

/* ==========================================================
   CARD
========================================================== */
/* .serviceCard {
    background: #fff;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: var(--shadow-small);
    transform-style: preserve-3d;
    will-change: transform;
    transition:
        transform 0.45s,
        box-shadow 0.45s;
    position: relative;
} */
.serviceCard {
    position: relative;
    /* padding-top: 130px; */
    border-radius: 36px;
    background: transparent;
    overflow: visible;
    box-shadow: none;
    transition:
        transform 0.45s,
        box-shadow 0.45s;
}

.serviceCard:hover {
    transform: translateY(-14px);
    /* box-shadow: var(--shadow-large); */
}

.serviceCard.active {
    /* box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18); */
}

.serviceCard img {
    transition: transform 0.45s ease;
}

/* ==========================================================
   IMAGE
========================================================== */
/* .serviceImage {
    overflow: hidden;
    height: 260px;
} */

.serviceImage {
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 230px;
    height: 230px;
    z-index: 20;
}

/* .serviceImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s;
} */

.serviceImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* border-radius: 46% 54% 44% 56% / 44% 40% 60% 56%;
    border: 8px solid white;
    outline: 4px solid var(--secondary); */
    box-shadow: var(--shadow-medium);
    transition: transform 0.7s;
}

.serviceCard:hover .serviceImage img {
    transform: scale(1.12);
}

/* ==========================================================
   BODY
========================================================== */
/* .serviceBody {
    padding: 36px;
    display: flex;
    flex-direction: column;
} */
.serviceBody {
    background: var(--primary);
    border-radius: 34px;
    padding: 130px 36px 40px;
    margin-top: -110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 470px;
    box-shadow: var(--shadow-large);
    position: relative;
    overflow: hidden;
    justify-content: flex-end;
}

/* .serviceBody h3 {
    color: var(--primary);
    font-size: 28px;
    margin-bottom: 18px;
} */

.serviceBody h3 {
    color: white;
    font-size: 2rem;
    margin-bottom: 22px;
}

/* .serviceBody p {
    color: var(--text-light);
    margin-bottom: 32px;
    flex: 1;
} */

.serviceBody p {
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 34px;
}

/* .serviceBody::before {
    content: '';
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    width: 270px;
    height: 120px;
    background: var(--primary);
    border-radius: 60px;
    z-index: -1;
} */

/* ==========================================================
   BUTTON
========================================================== */
/* .serviceBody .btn {
    align-self: flex-start;
} */

.serviceBody .btn {
    align-self: center;
}

/* ==========================================================
   HOVER BORDER
========================================================== */
/* .serviceCard::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 3px solid transparent;
    border-radius: 32px;
    transition: 0.4s;
    pointer-events: none;
}

.serviceCard:hover::before {
    border-color: var(--secondary);
} */

/* ==========================================================
   ICON BADGE
========================================================== */
/* .serviceBadge {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-small);
}

.serviceBadge i {
    font-size: 26px;
    color: var(--secondary);
} */
.serviceBadge {
    position: absolute;
    top: 20px;
    left: -8px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--shadow-small);
    z-index: 30;
}

.serviceBadge i {
    font-size: 26px;
    color: var(--secondary);
}
/* ==========================================================
   REVEAL ANIMATION
========================================================== */
.serviceCard {
    opacity: 0;
    transform: translateY(80px);
}

.serviceCard.show {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

/* Staggered reveal */
.serviceCard:nth-child(1).show {
    transition-delay: 0.1s;
}

.serviceCard:nth-child(2).show {
    transition-delay: 0.22s;
}

.serviceCard:nth-child(3).show {
    transition-delay: 0.34s;
}

.serviceCard:nth-child(4).show {
    transition-delay: 0.46s;
}

/* ==========================================================
   IMAGE SHINE EFFECT
========================================================== */
/* .serviceImage {
    position: relative;
}

.serviceImage::after {
    content: '';
    position: absolute;
    top: -150%;
    left: -120%;
    width: 50%;
    height: 300%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.35),
        transparent
    );
    transform: rotate(25deg);
}

.serviceCard:hover .serviceImage::after {
    animation: imageShine 0.9s;
}

@keyframes imageShine {
    from {
        left: -120%;
    } to {
        left: 180%;
    }
} */

.cardRipple {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: ripple 0.7s ease-out;
}

@keyframes ripple {
    from {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(0.5);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(16);
    }
}