﻿@import '../Styles/abstracts/_colors.scss';
@import '../Styles/abstracts/_mixins.scss';
@import '../Styles/abstracts/_functions.scss';
@import '../Styles/abstracts/_media-queries.scss';

.page-container {
    padding-block: rem2($HeaderHeight);

    @include lt-lg {
        padding-top: rem2(calc($HeaderHeight + $HeaderSecondRowHeight));
    }
}

.page-section {
    width: 100%;
    display: flex;
    justify-content: center;
}

.page-section-content {
    display: flex;
    flex-flow: column;
    padding-top: 5rem;
    text-align: center;
    align-items: center;
    max-width: rem2(900px);
    padding-left: rem2(20px);
    padding-right: rem2(20px);

    a {
        color: $bit-color-primary;
    }
}

::deep .page-title {
    @include lt-md {
        font-size: 4rem;
    }
}

.contact-container {
    width: 100%;
    display: flex;
    margin: 2rem 0;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

::deep .form {
    gap: 1.5rem;
    width: 100%;
    padding: 2rem;
    display: flex;
    flex-flow: column;
    max-width: rem2(600px);
    box-sizing: border-box;
    border-radius: rem2(4px);
    box-shadow: $bit-box-shadow-callout;
}

::deep {
    .contact-text-field {
        text-align: left;
    }

    .validation-message {
        text-align: left;
        font-size: rem2(12px);
        margin-top: rem2(-25px);
        color: $bit-color-error;
    }
}
