/* Card Container */
        .service-card-modern {
            background: #007b8100;
            border-radius: 22px;
            overflow: hidden;
            transition: all .35s ease;
            position: relative;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35);
        }

        .service-card-modern:hover {
            transform: translateY(-8px);
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
        }

        /* Image Section */
        .service-card-image {
            height: 220px;
            overflow: hidden;
            position: relative;
        }

        .service-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .5s ease;
        }

        .service-card-modern:hover .service-card-image img {
            transform: scale(1.08);
        }

        /* Badge */
        .service-badge {
            position: absolute;
            top: 15px;
            left: 15px;
            background: linear-gradient(135deg, #0F6E56, #185FA5);
            color: white;
            font-size: 12px;
            font-weight: 600;
            padding: 6px 12px;
            border-radius: 30px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        /* Content Section */
        .service-card-body {
            padding: 26px;
        }

        .service-title {
            font-weight: 700;
            font-size: 20px;
            margin-bottom: 12px;

            /* The Gradient */
            background: linear-gradient(135deg, #ff8000, #fda98a);

            /* Clipping the gradient to the text */
            -webkit-background-clip: text;
            background-clip: text;

            /* Making the text transparent to show the background */
            -webkit-text-fill-color: transparent;
            color: transparent;
            /* Fallback */
        }

        .service-description {
            color: #f7f9fc;
            font-size: 15px;
            line-height: 1.6;
            margin-bottom: 22px;
        }

        /* Footer */
        .service-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .starting-text {
            font-size: 12px;
            color: #b6fffa;
        }

        .price {
            font-weight: 700;
            margin: 0;
            font-size: 18px;
            color: #ffffff;
        }

        /* Button */
        .service-btn {
            /* background: linear-gradient(135deg, #002673, #722ad8); */
            background: linear-gradient(135deg, #0F6E56, #185FA5);
            padding: 10px 18px;
            border-radius: 12px;
            text-decoration: none;
            font-weight: 600;
            color: white;
            font-size: 15px;
            transition: all .3s ease;

        }

        .service-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.34);
        }


        .service-card-modern.category-healthcare {

            background: linear-gradient(135deg, #0f9b8e, #2c7be5);
            box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.6);
            border: 1px solid #737373bb;
        }

        .service-card-modern.category-technical-support {
            background: linear-gradient(135deg, #3a7bd5, #1e3c72);
            box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.6);
            border: 1px solid #737373bb;
        }

        .service-card-modern.category-legal-compliance {
            background: linear-gradient(135deg, #1e3c72, #d4af37);
            box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.6);
            border: 1px solid #737373bb;
        }

        .service-card-modern.category-finance-taxation {
            background: linear-gradient(135deg, #1f8f4e, #0f9b8e);
            box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.6);
            border: 1px solid #737373bb;
        }

        .service-card-modern.category-mental-health {
            background: linear-gradient(135deg, #7f7fd5, #86a8e7);
            box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.6);
            border: 1px solid #737373bb;
        }

        .service-card-modern.category-education-tutoring {
            background: linear-gradient(135deg, #8e2de2, #ff7e5f);
            box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.6);
            border: 1px solid #737373bb;
        }



/*====================Category Nav css ===================================*/