/*--------------------------------------------------------------
 Values css
--------------------------------------------------------------*/
.paragraph--type--section-value-proposition {
    margin: 5rem auto 12rem auto;

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

    .field--name-field-value-main-heading {
        text-align: center;
        margin: 0 0 5rem 0;

        @media (max-width:776px) {
            margin: 0 0 3rem 0;
        }

        h3 {
            font-size: clamp(1.1rem, 1.3vw, 1.3rem);
            letter-spacing: 1px;
            font-weight: 700;
            margin: 0;
            color: #4154f1;
            text-transform: uppercase;
        }

        h2 {
            margin: 10px 0 0 0;
            padding: 0;
            font-size: clamp(1.5rem, 2vw, 2rem);
            line-height: 42px;
            font-weight: 700;
            color: #012970;
        }
    }

    .field--name-field-value-proposition-card {
        display: grid;
        gap: 24px;
        grid-template-columns: repeat(3, 1fr);

        .field--item {
            text-align: center;
        }

        @media (max-width: 997px) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (max-width: 576px) {
            grid-template-columns: 1fr;
        }
    }


    .paragraph--type--card-value-item {

        padding: 40px 35px;
        box-shadow: 0px 0 5px rgba(1, 41, 112, 0.08);
        text-align: center;
        transition: 0.3s;
        height: 100%;
        cursor: pointer;


        .field--type-image {
            aspect-ratio: 1 / 1;
            width: 100%;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                transition: transform 0.5s ease;
            }

            &:hover img {
                transform: scale(1.05);
            }
        }


        .field--name-field-value-title-and-content {
            h3 {
                font-size: clamp(1.3rem, 1.3vw, 1.5rem);
                color: #012970;
                font-weight: 700;
                margin-bottom: 18px;
            }
        }

        &:hover {
            box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
        }
    }
}