.iti-card-section {
    margin-bottom: 5rem;
    background-color: #f4f4f4;
}

.iti-cards-row {
    margin-top: 0rem;
    padding: 0px !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1440px !important;
    font-family: "Apercu Pro Regular", Arial, Helvetica, sans-serif;

    .iti-card-column {
        position: relative;
        display: flex;
        flex-direction: column;
        margin-bottom: 2.5rem;
        background-color: white;
        /* width: 48.25%;
        margin-right: 2.5%; */

        .iti-card-color {
            position: absolute;
            height: 320px;
            width: 100%;
            margin: 0px !important;
            top: 0px;
            left: 0px;
        }

        .iti-card-img {
            position: relative;
            height: 320px;
            width: 100%;
            opacity: 0.2;
            margin: 0px !important;
            overflow: hidden;
        }

        .iti-card-text-over {
            font-family: "Apercu Pro Regular";
            position: absolute;
            width: calc(100% - 60px);
            left: 30px;
            bottom: calc(100% - 280px);
            margin: 0px !important;
            line-height: 1.04;
            text-align: left;
        }

        .iti-card-text-over h1 {
            color: white;
            font-weight: 500;
            font-size: 1.8rem;
            letter-spacing: -2px;
            margin: 0px;
            padding: 0px;
        }

        .iti-card-text-over h2 {
            color: white;
            font-weight: 500;
            font-size: 1.8rem;
            letter-spacing: -2px;
            margin: 0px;
            padding: 0px;
            opacity: 0.7;
        }

        .iti-card-text {
            color: #445666;
            font-size: 1.0625rem;
            letter-spacing: -.5px;
            line-height: 1.59;
            margin-bottom: auto;
            padding: 1.8125rem 2.5rem;
            /* padding-bottom: 0px; */
        }

        .iti-card-text-under {
            background-color: white;
            padding: 1.8125rem 2.5rem;
            display: flex;
            flex-direction: column;
            flex: 1;
            width: 100%;
            height: var(--iti-under-text-height);

            .et_pb_text_inner:after {
                content: "";
                position: absolute;
                width: 100%;
                height: 1px;
                background: #2d1e73;
                left: 0;
                bottom: 0;
                transition: transform .3s ease-in;
                transform: scaleX(0);
                -webkit-animation: none;
                animation: none;
                transform-origin: left;
            }
        }
        
        .iti-card-text-under .et_pb_text_inner {
            font-size: .75rem;
            line-height: 1.08;
            letter-spacing: 1.5px;
            color: #2d1e73;
            text-transform: uppercase;
            display: inline-block;
            font-weight: 500;
            align-self: flex-start;
            position: relative;
            padding-bottom: 5px;
        }
    }
}

.stepped-cards-component {
    h2, h3 {
        font-weight: 500;
    }

    .stepped-cards-title {
        h2 {
            color: #2d1e73;
            font-size: 48px;
            letter-spacing: -2px;
            line-height: 1;
            text-align: center;
        }
    }
    
    .stepped-cards-row {
        margin-top: 2.8125rem;

        .stepped-card {
            color: #141446;
            display: flex;
            flex-direction: column;
            margin-bottom: 1.25rem;
            margin-top: 1.25rem;
            padding: 3.125rem 3.75rem;
            position: relative;
            width: calc(100% / 3);

            .stepped-card-img {
                margin-right: 1.0625rem;
                vertical-align: bottom;
                width: 57px;
                display: inline-block;
                font-size: 0;
                overflow: hidden;
                position: relative;

                img {
                    vertical-align: middle;
                    height: auto;
                    max-width: 100%;
                }
            }

            h3 {
                font-size: 30px;
                letter-spacing: -1px;
                line-height: 1.33;
                font-weight: 500;
                margin: 0;
            }

            p {
                line-height: 1.5625rem;
                color: #445666;
                font-size: 17px;
                letter-spacing: -.5px;
                padding-bottom: 1rem;
                padding-top: 0.7rem;
            }

            p:not(:first-child) {
                margin-top: 1.25rem;
            }
            
            &:first-child {
                margin-bottom: 1.25rem;
                margin-top: 1.25rem;
                background: #f4f9fe;
            }

            &:nth-child(2) {
                margin-bottom: .625rem;
                margin-top: .625rem;
                background: #dfecfc;
            }

            &:last-child {
                color: white;
                display: flex;
                flex-direction: column;
                margin-bottom: 0rem;
                margin-top: 0rem;
                background: #2c74e8;
                
                p, h3 {
                    color: white;
                }
            }
        }
    }
}

/* Main row with two cols */
.iti-intro-and-cards {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    max-width: 1440px !important;
    padding-left: 50px;
    padding-right: 50px;

    .iti-intro-and-cards-text {
        padding-right: 10rem;
        width: 40%;
        min-width: 1024;

        h2 {
            color: #2d1e73;
            font-size: 48px;
            letter-spacing: -2px;
            line-height: 1;
        }

        p {
            color: #445666;
            font-size: 22px;
            letter-spacing: -.5px;
            line-height: 27px;
        }
    }

    .iti-intro-and-cards-cards {
        background: #f4f4f4;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding-bottom: 13.9375rem;
        padding-top: 8.6875rem;
        width: 60%;

        .iti-intro-and-cards-card {
            background: #fff;
            margin: 10px;
            padding: 2rem 2rem;
            width: 19rem;

            h3 {
                color: #2d1e73;
                font-size: 20px;
                letter-spacing: -.57px;
                line-height: 1.2;
                margin: 15px 0;
            }

            p {
                font-size: 17px;
                line-height: 27px;
                margin-bottom: 35px;
                color: #445666;
                letter-spacing: -.5px;

                &:last-of-type {
                    padding-bottom: 0;
                }
            }

            .iti-intro-and-cards-card-link {
                display: inline-block;
                font-size: .75rem;
                font-weight: 500;
                letter-spacing: 1.5px;
                line-height: 1.08;
                margin-top: 0rem;
                padding-bottom: 5px;
                position: relative;
                text-transform: uppercase;
                color: #2d1e73;

                .et_pb_text_inner {
                    &:after {
                        bottom: -2px;
                        content: "";
                        height: 1px;
                        left: 0;
                        position: absolute;
                        width: 100%;
                        animation: none;
                        transform: scaleX(0);
                        transform-origin: left;
                        transition: transform .3s ease-in;
                        background: #141446;
                    }

                    &:hover:after {
                        transform: scale(1);
                    }
                }
            }
        }
    }
}

@media only screen and (max-width: 1024px) {
    .iti-intro-and-cards {
        width: 100%;

        .iti-intro-and-cards-text {
            width: 100%;
            padding-right: 0px;
            
            .iti-intro-and-cards-intro {
                .et_pb_text {
                    text-align: center;
                }
            }
        }

        .iti-intro-and-cards-cards {
            padding: 1.875rem 0;
            width: 100%;
        }
    }
}