/* ==================== CONTACT PAGE & FORM ====================== */
.contact-page {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    transition: opacity 2s;
}
.contact-form-container {
    max-width: 1200px;
    padding-block: var(--spacing-triple);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing);
    padding-inline: var(--spacing-half);
    text-align: center;
    .contact-container {
        display: grid;
        grid-template-columns: 2fr 3fr;
        gap: 3rem;
        max-width: 1400px;
        margin: 0 auto;
        padding: .2rem;
        .form-container {
            .form-header {
                h3 {
                    font-size: 120%;
                    font-weight: 600;
                }
                p {
                    text-align: center;
                    max-width: 100%;
                }
            }
        }
    }
}
.contact-hero {
    /* max-width: 1200px; */
    /* width: 96%; */
    display: flex;
    justify-items: center;
    gap: 3em;
    margin-bottom: 3rem;
    /* padding: 1em; */
    .guarantee-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--spacing);
        align-items: center;
        /* background: linear-gradient(45deg, var(--background), #2a9d8f); */
        padding: 1em;
        border-radius: 1em;
    }
}
.problem-list {
    display: flex;
    max-width: 1200px;
    flex-direction: row;
    gap: 1.5rem;
    padding: 0 24px;
}
.problem-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    gap: .5em;
    background: var(--surface);
    border-radius: 1em;
    img {
        width: var(--font-x-large);
        aspect-ratio: 1/1;
    }
    .item-info {
        display: flex;
        flex-direction: column;
        padding-block: .5rem;
        h4 {
            margin-top: 0;
            columns: var(--brand);
            height: 3em;
            color: var(--warning);
        }
        p {
            text-wrap: balance;
            padding: .5rem;
        }
    }
}
.testimonial-preview.card {
    background: linear-gradient(165deg, var(--surface) 50%, var(--brand) 100%)!important;
    border-radius: 10px!important;
    margin: 2rem 0;
    border: none!important;
    position: relative;
    box-shadow: var(--shadow-bottom);
    &::before {
        content:"‟";
        position: absolute;
        top: -20px;
        left: 0;
        height: 2rem;
        width: 2rem;
        color: #2a9d8f;
        font-size: 4rem;
    }
    p {
        font-family: 'Georgia', serif;
        font-size: var(--font-small);
        height: max-content!important;
        text-align: left;
        color: var(--info);
    }
    span {
        width: 100%;
        opacity: .7;
        text-align: left;
        font-size: var(--font-small);
        color: var(--text-secondary);
    }
}
.form-wrapper {
    max-width: 800px;
}
.trust-indicators {
   margin-top: 1em; 
}

@media (max-width: 480px) {
    .contact-hero {
        grid-template-columns: 1fr;
    }
    
    .problem-item {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .problem-item i {
        margin: 0 auto;
    }
}