/* ==========================================================================
   Five Key Section
   ========================================================================== */

.five-key-section {
    padding: 50px 0;
    font-family: 'Montserrat', sans-serif;
}

.five-key-section__rule {
    border: 0;
    border-top: 2px solid lightgray;
    margin: 0 auto;
    max-width: 80%;
}

/* ---- Header: hand icon + title ---- */

.five-key-section__header {
    padding: 5% 10% 3%;
}

.five-key-section__hand-icon {
    font-size: 44px;
    color: #c48f1a;
    display: block;
    margin-bottom: 18px;
}

.five-key-section__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #8a8a8a;
    line-height: 1.25;
    max-width: 700px;
    margin: 0 auto;
}

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

.five-key-section__cards {
  padding: 50px 0;
}

/* ---- Single card ---- */

.five-key-section__card {
    padding-bottom: 20px;
}

/* Card icon — no box, just floating on white */

.five-key-section__icon {
    font-size: 40px;
    color: #c48f1a;
    display: block;
    margin-bottom: 10px;
}

/* Question text — same visual as .headshot h5 */

.five-key-section__question {
    font-family: 'Metropolis Regular', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #257295;
    text-align: center;
    margin-bottom: 0;
    line-height: 1.5;
}

.five-key-section__question strong {
    font-family: 'Metropolis Bold', sans-serif;
    color: #004e7b;
    font-weight: 700;
}

/* collapseomatic trigger and content inherit
   .collapseomatic.awesomearrows and .collapseomatic_content
   from style.css — no extra overrides needed beyond alignment */

.five-key-section__card .collapseomatic.awesomearrows {
    display: block;
    margin: 6px auto 0;
}

.five-key-section__card .collapseomatic_content {
    font-family: 'Metropolis Regular', sans-serif;
    text-align: left;
    padding-top: 10px;
    font-size: 18px;
    color: #257295;
}

/* ---- Responsive ---- */

@media (max-width: 991px) {
    .five-key-section__header,
    .five-key-section__cards {
        padding-left: 5%;
        padding-right: 5%;
    }
}

@media (max-width: 767px) {
    .five-key-section__header {
        padding-top: 8%;
    }

    .five-key-section__card {
        margin-bottom: 16px;
    }
}