﻿.home-service {
    padding-bottom: 48px;
    position: relative;
}

    .home-service:before {
        content: "";
        position: absolute;
        width: 18%;
        height: 50%;
        background: url(../../../Design/img/222.png) no-repeat;
        right: -58px;
        top: -33%;
    }

.home-service-container {
}

.h-service-title {
    margin: 0;
    text-align: center;
    font-family: 'OswaM';
    font-size: 42px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    background: linear-gradient(90deg, #138853 0%, #57BE85 50%, #138853 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    position: relative;
    padding: 44px 0px 33px 0px;
}

    .h-service-title:before {
        position: absolute;
        content: "";
        width: 24%;
        height: 38%;
        background: url(../../../Design/img/bottom-title.png) no-repeat;
        left: 54%;
        transform: translateX(-50%);
        bottom: -25px;
    }

.h-service-descript {
    color: #1C1D28;
    text-align: center;
    font-family: 'interR';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 122.222% */
    padding-bottom: 35px;
}

.h-service-item:hover .h-ser-img img {
    transform: scale(1.03);
}

.h-ser-title {
    transition: background 0.3s ease;
}

.h-service-item:hover .h-ser-title {
    background: #57BE85;
}

.h-service-item:hover {
    border-color: #138853;
    box-shadow: 0 6px 20px rgba(19, 136, 83, 0.3);
    transform: translateY(-5px);
}

.h-service-list {
    display: grid;
    grid-auto-rows: minmax(min-content,max-content);
    grid-template-columns: repeat(3,minmax(0,1fr));
    column-gap: 20px;
    row-gap: 20px;
}

.h-service-item {
    border-radius: 10px;
    border: 3px solid #57BE85;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.h-ser-img {
}

    .h-ser-img img {
        transition: transform 0.4s ease;
        height: 345px;
    }

.h-ser-title {
    border-radius: 0 0 8px 8px;
    background: #138853;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 0;
}

    .h-ser-title span {
        color: #FFF;
        text-align: center;
        font-family: 'OswaM';
        font-size: 33px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

@media (max-width:739px) {
    .home-service {
    }

    .home-service-container {
    }

    .h-service-title {
        font-size: 20px;
    }

    .h-service-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .h-service-list > :first-child {
            grid-column: span 2 / span 2;
            grid-row: span 2 / span 2;
        }

        .h-service-list > :nth-child(2) {
            grid-row: span 2 / span 2;
            grid-row-start: 3;
        }

        .h-service-list > :last-child {
            grid-row: span 2 / span 2;
            grid-row-start: 3;
        }

    .h-service-item {
    }

    .h-ser-img {
        width: 100%;
    }

    .h-service-list > :first-child .h-ser-img {
    }

    .h-ser-img img {
        height: unset;
        object-fit: contain;
    }

    .h-ser-title {
    }

        .h-ser-title span {
            font-size: 20px;
        }

    .h-service-title:before {
        width: 100%;
        bottom: -18px;
        left: 74%;
    }

    .h-service-descript {
        font-size: 12px;
    }
}
