/* =========================================================
   ABOUT VALUES
========================================================= */


/*--------------------------------------------------
Section
--------------------------------------------------*/

.about-values {
    padding: 7rem 0;
    background: #ffffff;
}


/*--------------------------------------------------
Header
--------------------------------------------------*/

.about-values__header {
    max-width: 48rem;
    margin: 0 auto 4rem;
    text-align: center;
}


/*--------------------------------------------------
Eyebrow
--------------------------------------------------*/

.about-values__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin: 0 0 1.2rem;
    color: #0A3857;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.about-values__eyebrow::before,
.about-values__eyebrow::after{
    content:"";
    width:2rem;
    height:2px;
    background:#F4B400;
}


/*--------------------------------------------------
Heading
--------------------------------------------------*/

.about-values__title{
    margin:0;
    color:#0A3857;
    font-size:clamp(2.5rem,4.8vw,4.4rem);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-.04em;
}

.about-values__title span{
    display:block;
    margin-top:.15rem;
    color:#F4B400;
}

.about-values__intro{
    max-width:42rem;
    margin:1.5rem auto 0;
    color:#5B6D79;
    line-height:1.85;
    font-size:1rem;
}


/*--------------------------------------------------
Grid
--------------------------------------------------*/

.about-values__grid{

    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.5rem;

}


/*--------------------------------------------------
Cards
--------------------------------------------------*/

.about-values__card{

    position:relative;

    padding:2.25rem;

    border:1px solid #E3E9ED;
    border-top:4px solid #F4B400;

    border-radius:1rem;

    background:#fff;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease,
        border-left-color .25s ease;

}

.about-values__card:nth-child(even){

    border-top:1px solid #E3E9ED;
    border-left:4px solid #0A3857;

}

.about-values__card:nth-child(odd){

    border-top:4px solid #F4B400;

}

.about-values__card:nth-child(2),
.about-values__card:nth-child(5){

    margin-top:2rem;

}

.about-values__card:nth-child(3),
.about-values__card:nth-child(6){

    margin-top:1rem;

}

.about-values__card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 24px 55px rgba(10,56,87,.10);

}


/*--------------------------------------------------
Number
--------------------------------------------------*/

.about-values__number{

    display:block;

    margin-bottom:1.3rem;

    color:rgba(10,56,87,.12);

    font-size:3.4rem;

    font-weight:900;

    line-height:1;

}


/*--------------------------------------------------
Title
--------------------------------------------------*/

.about-values__card-title{

    margin:0;

    color:#0A3857;

    font-size:1.45rem;

    font-weight:700;

    line-height:1.25;

}


/*--------------------------------------------------
Text
--------------------------------------------------*/

.about-values__text{

    margin-top:1rem;

    color:#5B6D79;

    line-height:1.85;

    font-size:.98rem;

}


/*--------------------------------------------------
Tablet
--------------------------------------------------*/

@media (max-width:992px){

    .about-values{

        padding:6rem 0;

    }

    .about-values__card:nth-child(2),
    .about-values__card:nth-child(3),
    .about-values__card:nth-child(5),
    .about-values__card:nth-child(6){

    margin-top:0;

}

    .about-values__grid{

        grid-template-columns:repeat(2,1fr);

    }

}


/*--------------------------------------------------
Mobile
--------------------------------------------------*/

@media (max-width:768px){

    .about-values{

        padding:5rem 0;

    }

    .about-values__header{

        margin-bottom:3rem;

    }

    .about-values__grid{

        grid-template-columns:1fr;

    }

}


/*--------------------------------------------------
Small Mobile
--------------------------------------------------*/

@media (max-width:560px){

    .about-values{

        padding:4rem 0;

    }

    .about-values__card{

        padding:1.8rem;

    }

    .about-values__number{

        font-size:2.8rem;

    }

    .about-values__title{

        font-size:clamp(2.2rem,11vw,3.2rem);

    }

}