/*==============================
COMMON CARD
==============================*/
section.process-maturity h2, section.process-maturity h3{ font-size:var(--fs-h4)}
.process-card{
    background:#FAFAFA;
    border:1px solid #ECEEF4;
    border-radius:32px;
    overflow:hidden;
}
section.process-maturity p, section.process-maturity li, section.process-maturity a{color:#4A5565}

section.process-maturity a:hover{ text-decoration:none}


/* Remove WP paragraph spacing */

.process-card p:first-child,
.process-card figure:first-child{
    margin:0;
}

.process-card p:last-child{
    margin-bottom:0;
}

/*==============================
LEFT CARD
==============================*/

/*=========================
PROCESS GRID
=========================*/

.process-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:32px;
    align-items:stretch;
    margin-bottom:var(--space-8);

}
.process-grid .process-card:nth-child(1){background:#F4F6FE}
.process-grid .process-card{
    height:100%;
}


.process-grid li{ padding:5px 0 5px 35px; list-style: none; background:url(../../images/bullet_arrow.svg) no-repeat 0 5px}




.process-grid .process-card:first-child{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:60px;
    text-align:center;
}

.process-grid .process-card:first-child>*{
    width:100%;
}

.process-grid .process-card img{ margin-bottom:20px}

.process-grid .process-card:first-child img{

    display:block;

    margin:0 auto 30px;

    max-width:300px;

    width:100%;

    height:auto;
}

.process-grid .process-card:first-child h1,
.process-grid .process-card:first-child h2,
.process-grid .process-card:first-child h3{

    margin:25px 0 18px;
}

.process-grid .process-card:first-child p{

    margin-bottom:16px;
}

/*==============================
RIGHT CARD
==============================*/

.process-grid .process-card:last-child{

    padding:0;
}

.process-grid .process-card:last-child p:first-child{

    margin:0;
}

.process-grid .process-card:last-child p:first-child img{

    width:100%;

    height:220px;

    object-fit:cover;

    display:block;
}

.process-grid .process-card:last-child h1,
.process-grid .process-card:last-child h2,
.process-grid .process-card:last-child h3{

    padding:25px;

    margin:0;
}

.process-highlight p { margin:20px 0}

.process-grid .process-card:last-child ul{

    padding:0 35px 35px 35px;

    margin:0;
}

.process-grid .process-card:last-child p:not(:first-child){

    padding:0 35px;

    margin-bottom:14px;
}

/*==============================
QUOTE
==============================*/

.process-quote{

    border-left:4px solid var(--color-highlight);

    padding-left:24px;

    margin:50px 0;
}

/*==============================
BOTTOM BOX
==============================*/

.process-highlight{

    background:#F8F9FC;

    border-radius:32px;

    border:1px solid #ECEEF4;

    padding:42px;
    margin-bottom:40px
}

.process-highlight h2,
.process-highlight h3{

    margin-bottom:22px;
}




/* Tablet */

@media (max-width:991px){

    .process-grid{
        grid-template-columns:1fr;
        gap:24px;
    }

}

/* Mobile */

@media (max-width:767px){

    .process-grid{
        gap:20px;
        margin-bottom:var(--space-7);
    }

}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:991px){

.process-grid{

    grid-template-columns:1fr;
}

.process-grid .process-card:first-child{

    min-height:auto;

    padding:45px;
}

}

@media(max-width:767px){

.process-grid .process-card:first-child{

    padding:30px 20px;
}

.process-grid .process-card:last-child h2,
.process-grid .process-card:last-child h3{

    padding:24px 24px 16px;
}

.process-grid .process-card:last-child p:not(:first-child){

    padding:0 24px;
}

.process-grid .process-card:last-child ul{

    padding:0 24px 24px 42px;
}

.process-highlight{

    padding:24px;
}

}