/*--------------------------------------------------------------
 Sevises css
--------------------------------------------------------------*/
.paragraph--type--services {
    margin: 5rem auto 12rem auto;

    @media (max-width:1024px) {
        margin: 5rem auto;
    }

    .field--name-field-services-heading {
        text-align: center;
        margin-bottom: 4rem;

        @media (max-width:776px) {
            margin-bottom: 2rem;
        }

        h2 {
            font-size: clamp(1.5rem, 2vw, 2rem);
            line-height: 42px;
            font-weight: 700;
            color: rgb(1, 41, 112);
            margin: 10px 0px 0px;
        }

        h3 {
            font-size: clamp(1.1rem, 1.3vw, 1.3rem);
            letter-spacing: 1px;
            font-weight: 700;
            color: rgb(65, 84, 241);
            text-transform: uppercase;
        }
    }

    .field--name-field-services-card-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

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

    @media (max-width: 576px) {
        .field--name-field-services-card-grid {
            grid-template-columns: 1fr;
        }
    }

    /*  Card css */

    .service-card {
        position: relative;
        background: #ffffff;
        border-radius: 12px;
        padding: 60px 30px;
        text-align: center;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        height: 100%;
        cursor: pointer;


        &:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
            color: white;

            .service-card__icon {
                background-color: white;
            }

            .service-card__content .field--name-field-service-title,
            .service-card__content .field--name-field-services-body {
                color: white;
            }

        }

        .service-card__icon {
            font-size: 36px;
            position: relative;
            margin-bottom: 20px;
            display: inline-block;
            padding: 35px 25px;
            line-height: 0;
            border-radius: 4px;
            transition: 0.3s;
        }

        .service-card__content {
            .field--name-field-service-title {
                font-size: clamp(1.3rem, 1.7vw, 1.75rem);
                color: rgb(68, 68, 68);
                font-weight: 700;
                margin-bottom: 15px;
            }

            .field--name-field-services-body {
                font-size: clamp(0.9rem, 1vw, 1rem);
                color: #5c6c80;
                line-height: 1.7;
            }
        }

        .service-card__border {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 4px;
            width: 100%;
        }
    }

    /* colors change on hover */

    .service-card--blue {
        border-bottom: 3px solid #2db6fa;
    }

    .service-card--blue .service-card__icon {
        color: #2db6fa;
        background: #dbf3fe;
    }

    .service-card--blue:hover {
        background: #2db6fa;
    }

    .service-card--orange {
        border-bottom: 3px solid #f68c09;
    }

    .service-card--orange .service-card__icon {
        color: #f68c09;
        background: #fde3c4;
    }

    .service-card--orange:hover {
        background: #f68c09;
    }

    .service-card--green {
        border-bottom: 3px solid #08da4e;
    }

    .service-card--green .service-card__icon {
        color: #08da4e;
        background: #cffddf;
    }


    .service-card--green:hover {
        background: #08da4e;
    }

    .service-card--red {
        border-bottom: 3px solid #e9222c;
    }

    .service-card--red .service-card__icon {
        color: #e9222c;
        background: #fef7f8;
    }


    .service-card--red:hover {
        background: #e9222c;
    }

    .service-card--purple {
        border-bottom: 3px solid #b50edf;
    }

    .service-card--purple .service-card__icon {
        color: #b50edf;
        background: #f8e4fd;
    }

    .service-card--purple:hover {
        background: #b50edf;
    }

    .service-card--pink {
        border-bottom: 3px solid #f51f9c;
    }

    .service-card--pink .service-card__icon {
        color: #f51f9c;
        background: #feecf7;
    }

    .service-card--pink:hover {
        background: #f51f9c;
    }
}