body:has( #why-choose-page ) {
    background-color: #d9d9d9;
}

.layout-content:has( #why-choose-page ) {
    padding-bottom: 0;
    overflow: auto;
    min-height: 85vh;
}
#why-choose-page {
    overflow: auto;
    padding-bottom: 4rem;
    min-height: 85vh;
    overflow: clip;
}

#intro-text {
    padding-inline: .75rem;
    margin-top: 3rem;
    margin-inline: auto;
    max-width: 60rem;
    font-size: 1.1rem;
    color: var(--blue);
    font-weight: 600;
}

#card-wrapper {
    margin-top: 2rem;
    margin-inline: 0;
    padding: 1rem;
    width: 100%;
    position: relative;
    overflow-x: clip;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

#card-wrapper > .card {
    width: 40ch;
    max-width: 40ch;
    min-width: 30ch;
    padding: .5rem;
    border-radius: 20px;
    display: flex;
    flex-direction:column;
    justify-content: space-between;
    align-items: center;
}
.card.blue{
    border: 5px solid var(--blue);
}
.card.green {
    border: 5px solid var(--green);
}
.card.orange {
    border: 5px solid var(--orange);
}

h2 {
    padding: 0;
    margin: 0;
    color: white;
    font-weight: 600;
    text-align: center
}
h3 {
    padding: 0 0 1rem 0;
    margin: 0;
    color: var(--blue);
    font-weight: 600;
    text-align: center;
}

.pentagon-wrapper {
    z-index: -1;
}