.service-card-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    padding: 50px 0;
}

.service-card {
    background-color: #ffffff;
    text-align: center;
    padding: 30px 15px;
    transition: transform 0.4s ease-in-out;
}
.service-card:hover {
    transform: translateY(-5px);

    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
}

.service-card-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.service-card .title {
    transition: color 0.3s ease;
}

.service-card:hover .title {
    color: var(--primary-color);
}
.service-card-read-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 12px;
}

.read-more-txt {
    opacity: 0;
    max-width: 0;
    transform: translateX(-5px);
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.8s ease, max-width 0.8s ease, transform 0.8s ease;
}

.service-card:hover .read-more-txt {
    opacity: 1;
    max-width: 200px;
    transform: translateX(0);
}

.arrow-right-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.8s ease;
}

.service-card:hover .arrow-right-icon {
    transform: translateX(4px);
}

/* our-work-card */
.our-work-card-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.our-work-card {
    position: relative;
    padding-bottom: 220px;
    transition: transform 0.4s ease-in-out;
}

.our-work-card:hover {
    transform: translateY(-10px);
}

.our-work-card-img {
    width: 100%;
    height: 279px;

    object-fit: cover;
}

.our-work-card-details {
    position: absolute;
    top: 47%;
    left: 50%;

    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0% 100%);
    transform: translateX(-50%);
    width: 75%;
    padding: 30px 30px 10px 30px;
    text-align: left;
    background-color: #ffffff;
}

.our-work-card-read-more {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    margin-top: 12px;
    cursor: pointer;
}
.our-work-card-read-more p {
    color: var(--primary-color);
}

.our-work-card:hover .read-more-txt {
    opacity: 1;
    max-width: 200px;
    transform: translateX(0);
}

.arrow-right-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.8s ease;
}

.our-work-card:hover .arrow-right-icon {
    transform: translateX(4px);
}

@media (max-width: 992px) {
    .service-card-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .our-work-card-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 550px) {
    .service-card-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }

    .our-work-card-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }
}