/**
 * Styles for the CTA Text Link Bricks element.
 */
.brx-cta-text-link {
    width: 100%;
    max-width: var(--site-container-width, 1100px);
    margin: 75px auto;
    padding: 0 20px;
    text-align: center;
    /* Flex properties for vertical alignment in the builder */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Styles applied to the placeholder in the builder */
.brx-cta-text-link.is-builder-placeholder {
    min-height: 100px;
    background-color: #f0f0f0;
    border: 1px dashed #ccc;
}

.brx-cta-text-link h2 {
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 2em;
    margin: 10px 0;
}

.brx-cta-text-link a {
    text-decoration: underline !important;
    /* This moves the line down so it doesn't hit the numbers */
    text-underline-offset: 6px; 
    /* This makes the line look more elegant */
    text-decoration-thickness: 1.5px !important;
}

.brx-cta-text-link a:hover {
    text-decoration: none !important;

}

/* We must also disable that theme pseudo-line that shrinks on hover */
.brx-cta-text-link a::after {
    display: none !important;
}

.brx-cta-text-link a {
    color: var(--color-primary);
    font-family: var(--font-primary);
    text-decoration: underline;
}

.brx-cta-text-link a:hover {
    text-decoration: none;
}

@media (max-width: 767px) {
    .brx-cta-text-link h2 {
        font-size: 1.5em;
        padding: 0 30px;
    }
}