/************************************************
*          CALL TO ACTION BUTTONS (CTA)         *
************************************************/

.cta-container {
    text-align: center;
    margin: 2em 0 3em 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
    padding: 0 1em;
}
.cta-btn {
    display: inline-block;
    background: var(--color-blue);
    color: var(--color-white);
    font-size: 1.2em;
    font-weight: bold;
    padding: 0.75em 2em;
    margin: 0;
    border-radius: 2em;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: background 0.2s, transform 0.2s;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    max-width: 100%;
}
.cta-btn:hover, .cta-btn:focus {
    background-color: var(--color-blue-dark);
    transform: scale(1.10);
}

.cta-btn:active {
    background-color: var(--color-blue-light);
}

@media screen and (max-width: 600px) {
    .cta-container {
        margin: 2em 0;
    }

    .cta-btn {
        width: 100%;
        max-width: 26rem;
        padding: 0.75em 1.2em;
    }

    .cta-btn[href^="mailto:"] {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}