/* ==============================================
   CORE VALUES
   ============================================== */

.core-values {
    padding: 110px 0;
    background: var(--color-white);
}

/* Heading */

.core-values .section-heading {
    max-width: 760px;
    margin: 0 auto 70px;
}

.core-values .section-heading p {
    margin-top: 18px;
}

/* Grid */

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: stretch;
}


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

.value-card {

    background: #fff;

    border: 1px solid var(--color-border);

    border-radius: 24px;

    padding: 52px 46px;

    min-height: 330px;

    display: flex;

    flex-direction: column;

    transition: .35s ease;

}



.value-card:hover {

    transform: translateY(-8px);

    border-color: var(--color-primary);

    box-shadow: 0 22px 55px rgba(0,0,0,.08);

}



/* Icon */

.value-icon {

    width:72px;

    height:72px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EEF6FF;

    font-size:34px;

    margin-bottom:28px;

}



/* Heading */

.value-card h3 {

    font-size:24px;

    line-height:1.35;

    color:var(--color-navy);

    margin:0 0 18px;

}



/* Text */

.value-card p {

    margin:0;

    font-size:16px;

    line-height:1.85;

    color:var(--color-muted);

    flex:1;

}



/* ==============================================
   TABLET
   ============================================== */

@media (max-width:991px){

    .core-values{

        padding:90px 0;

    }

    .values-grid{

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

        gap:24px;

    }

    .value-card{

        padding:34px 28px;

        min-height:300px;

    }

}



/* ==============================================
   MOBILE
   ============================================== */

@media (max-width:768px){

    .core-values{

        padding:70px 0;

    }

    .core-values .section-heading{

        margin-bottom:45px;

    }

    .values-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .value-card{

        padding:28px 24px;

        min-height:auto;

    }

    .value-icon{

        width:64px;

        height:64px;

        font-size:30px;

        margin-bottom:22px;

    }

    .value-card h3{

        font-size:22px;

        margin-bottom:14px;

    }

    .value-card p{

        font-size:15px;

        line-height:1.75;

    }

}