/* Service Component */

    .service-one__item .service-one__item__content {
        background: #00000f3b;
    }
   

    /* ============================================================
           Modern Services Section — Version 2
           Uses existing CSS variables: --tj-color-theme-primary,
           --tj-color-heading-primary, --tj-color-text-body-3, etc.
           ============================================================ */

    .svc-section-v2 {
        background: #f0f7f7;
        padding-top: 20px;
        padding-bottom: 80px;
    }

        .svc-section-v2 .goals-section {
            margin-bottom: 40px;
        }

    /* ── Card container ─────────────────────────────────────── */
    .svc-card-v2 {
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 0 4px 20px rgba(12, 30, 33, 0.08);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.38s ease;
        position: relative;
        cursor: pointer;
    }

        .svc-card-v2:hover {
            transform: translateY(-10px);
            box-shadow: 0 24px 56px rgba(30, 138, 138, 0.18);
        }

    /* ── Image area ──────────────────────────────────────────── */
    .svc-card-v2__image {
        position: relative;
        height: 220px;
        flex: 0 0 220px;
        overflow: hidden;
    }

        .svc-card-v2__image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

    .svc-card-v2:hover .svc-card-v2__image img {
        transform: scale(1.07);
    }

    /* Dark gradient at image bottom → text always readable */
    .svc-card-v2__img-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient( 180deg, rgba(12, 30, 33, 0) 40%, rgba(12, 30, 33, 0.60) 100% );
        pointer-events: none;
    }

    /* Teal accent bar — real element, guaranteed above image */
    .svc-card-v2__bar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(var(--tj-color-theme-primary), var(--tj-color-theme-dark));
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.4s ease;
        z-index: 10;
        pointer-events: none;
        border-radius: 4px 4px 0 0;
    }

    .svc-card-v2:hover .svc-card-v2__bar {
        transform: scaleX(1);
    }

    /* ── Text body ──────────────────────────────────────────── */
    .svc-card-v2__body {
        flex: 1;
        padding: 24px 24px 28px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Title slides up on hover */
    .svc-card-v2__title {
        font-size: 17px;
        font-weight: 700;
        margin-bottom: 10px;
        line-height: 1.45;
        width: 100%;
        transform: translateY(0);
        transition: transform 0.35s ease;
    }

        .svc-card-v2__title a {
            color: var(--tj-color-heading-primary, #0c1e21);
            text-decoration: none;
            transition: color 0.3s ease;
        }

    .svc-card-v2:hover .svc-card-v2__title {
        transform: translateY(-4px);
    }

        .svc-card-v2:hover .svc-card-v2__title a {
            color: var(--tj-color-theme-primary, var(--tj-color-theme-secondary));
        }

    /* Description fades + slides up on hover */
    .svc-card-v2__desc {
        font-size: 14px;
        color: var(--tj-color-text-body-3, #67787a);
        line-height: 1.75;
        margin-bottom: 0;
        flex: 1;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        width: 100%;
        opacity: 0.70;
        transform: translateY(8px);
        transition: opacity 0.38s ease, transform 0.38s ease;
    }

    .svc-card-v2:hover .svc-card-v2__desc {
        opacity: 1;
        transform: translateY(0);
    }

    /* Pill link — slides up with a small delay */
    .svc-card-v2__link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 18px;
        color: var(--tj-color-theme-primary, var(--tj-color-theme-secondary));
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        padding: 7px 20px;
        border-radius: 50px;
        border: 1.5px solid rgba(30, 138, 138, 0.30);
        opacity: 0.78;
        transform: translateY(6px);
        transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease, gap 0.28s ease, opacity 0.38s ease 0.06s, transform 0.38s ease 0.06s;
    }

    .svc-card-v2:hover .svc-card-v2__link {
        opacity: 1;
        transform: translateY(0);
    }

    .svc-card-v2__link:hover {
        background: linear-gradient(var(--tj-color-theme-primary), var(--tj-color-theme-dark));
        color: #ffffff;
        border-color: var(--tj-color-theme-primary, var(--tj-color-theme-secondary));
        gap: 10px;
    }

    /* ── Swiper wrapper & pagination ─────────────────────────── */
    .svc-wrapper-v2 {
        padding: 20px 30px 60px;
        overflow: hidden;
    }

    /* Allow cards to overflow upward so the bar + lift are visible */
    .service-slider-v2 {
        overflow: visible !important;
    }

    .svc-section-v2 .swiper-pagination-bullet-active {
        background: linear-gradient(var(--tj-color-theme-primary), var(--tj-color-theme-dark));
    }