body {
    font-family: "Inter", sans-serif;
}

h1,
h2,
h3 {
    font-family: "Plus Jakarta Sans", sans-serif;
}

.review-card {
    position: absolute;
    width: 100%;
    padding: 24px;
    border-radius: 20px;
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    cursor: grab;
    transition: transform 0.4s ease, box-shadow 0.4s;
    user-select: none;
}

/* Hover tilt */
.review-card:hover {
    transform: rotate(5deg) scale(1.03);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.mobile-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.mobile-dropdown.open {
    max-height: 500px;
    margin-top: 12px;
}

.mobile-chevron {
    transition: transform 0.25s ease;
}

.mobile-chevron.rotate {
    transform: rotate(180deg);
}

/* ── VIEWPORT CENTER HOVER LINE (MOBILE/TABLET ONLY) ── */
.viewport-center-line {
    position: fixed;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 9999;
    pointer-events: none;
    transform: translateY(-50%);
    display: none;
}

@media (max-width: 1023.98px) {
    .viewport-center-line {
        display: block;
    }
}

/* ── ACTIVE HOVER STATE EMULATION FOR MOBILE/TABLET ── */

/* 1. Product Cards */
.product-card .group.active-hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

.product-card .group.active-hover img,
.product-card .group.active-hover picture img {
    transform: scale(1.05) !important;
    filter: brightness(1.1) grayscale(0) !important;
}

.product-card .group.active-hover>div.absolute.bottom-0 {
    transform: translateY(-45%) !important;
    /* equivalent to translate-y-10 */
}

.product-card .group.active-hover p {
    opacity: 1 !important;
}

.product-card .group.active-hover div.absolute.top-6 {
    opacity: 1 !important;
}

/* 2. Service Cards */
div.group.active-hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    /* hover:shadow-xl */
}

div.group.active-hover img,
div.group.active-hover picture img {
    transform: scale(1.1) !important;
    /* group-hover:scale-110 */
}

/* 3. Blog Cards */
a.group.active-hover img,
a.group.active-hover picture img {
    transform: scale(1.05) !important;
    /* group-hover:scale-105 */
}

a.group.active-hover h3 {
    color: rgb(79, 70, 229) !important;
    /* group-hover:text-primary */
}

/* 4. Review Cards */
.review-card.active-hover {
    transform: translateY(0px) scale(1.03) rotate(5deg) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
}

@keyframes whatsappPulse {
    0% {
        box-shadow:
            0 8px 30px rgba(37, 211, 102, 0.35),
            0 0 0 0 rgba(37, 211, 102, 0.5);
    }

    70% {
        box-shadow:
            0 8px 30px rgba(37, 211, 102, 0.35),
            0 0 0 14px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow:
            0 8px 30px rgba(37, 211, 102, 0.35),
            0 0 0 0 rgba(37, 211, 102, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .animate-\[whatsappPulse_2\.2s_ease-out_infinite\] {
        animation: none;
    }
}