.service .service-item {
        background-color: white;
        /* box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.1); */
        padding: 30px 30px 30px 90px;
        transition: all ease-in-out 0.3s;
        border-radius: 18px;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    .service .service-item .icon {
        position: absolute;
        left: 4px;
        top: calc(50% - 30px);
    }

    .service .service-item .icon i {
        font-size: 64px;
        line-height: 1;
        transition: 0.5s;
    }

    .service .service-item h3 {
        font-weight: 700;
        margin: 10px 0 15px 0;
        font-size: 25px;
        transition: ease-in-out 0.3s;
    }

    .service .service-item p {
        line-height: 24px;
        font-size: 16px;
        margin-bottom: 0;
    }

    @media (min-width: 1365px) {
        .service .service-item:hover {
            transform: translateY(-10px);
        }

        .service .service-item:hover h3 {
            color: red !important;
        }

        .service {
            clip-path: ellipse(100% 90% at 50% 100%);
            padding-top: 180px;
        }
    }
   

/* hover effect */
.service .service-item:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    position: relative; /* ensure z-index works */
    z-index: 10; /* higher than default to appear above others */
}

.service .service-item:hover h3 {
    color: #00261c; /* dark green on hover */
}

.service .service-item:hover .icon i {
    transform: scale(1.2) rotate(5deg);
}