.ctn,
.ctn-v2,
.cnt-flush,
.cnt-flush-v2 {
    padding-left: 1rem;
    padding-right: 1rem;
    overflow: hidden;
}

.flush,
.flush-v2 {
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 64rem) {

    .ctn {
        overflow: hidden;
        padding-left: 7rem;
        padding-right: 7rem;

    }

    .ctn-v2 {
        overflow: hidden;
        padding-left: 8.43135rem;
        padding-right: 8.43135rem;
    }

    .flush {
        overflow: hidden;
        padding-left: 7rem;
        padding-right: 7rem;
    }

    .flush-v2 {
        overflow: hidden;
        padding-left: 8.43135rem;
        padding-right: 8.43135rem;
    }
}

/* Font family helpers */
.font-bevietnam,
.font-be-vietnam {
    font-family: 'Be Vietnam Pro', sans-serif;
}

.font-be-vietnam-base {
    font-family: 'Be Vietnam', sans-serif;
}

.font-fs-magistral {
    font-family: 'FS Magistral', sans-serif;
}

.font-roboto {
    font-family: 'Roboto', sans-serif;
}

/* -------------------------------------------------------------------------- */
/* Contact Form Submit Button Animations                                      */
/* -------------------------------------------------------------------------- */

/* Original submit text animations */
.contact-orig-text {
    white-space: nowrap;
    overflow: hidden;
}

.contact-orig-text.anim-out {
    animation: origSubmit 2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Submit text revert animation */
.contact-orig-text.anim-in {
    animation: origRevert 2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes origSubmit {
    0% {
        max-width: 10rem;
        opacity: 1;
    }

    5% {
        opacity: 0;
    }

    50% {
        max-width: 0;
        opacity: 0;
    }

    100% {
        max-width: 0;
        opacity: 0;
    }
}

@keyframes origRevert {
    0% {
        max-width: 0;
        opacity: 0;
    }

    50% {
        max-width: 0;
        opacity: 0;
    }

    100% {
        max-width: 10rem;
        opacity: 1;
    }
}

.contact-status-text {
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Loading status text animations */
.contact-status-text.anim-in {
    animation: statusSubmit 2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Loading status text revert animation */
.contact-status-text.anim-out {
    animation: statusRevert 2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes statusSubmit {
    0% {
        max-width: 0;
        opacity: 0;
    }

    50% {
        max-width: 0;
        opacity: 0;
    }

    100% {
        max-width: 11.25rem;
        opacity: 1;
    }
}

@keyframes statusRevert {
    0% {
        max-width: 11.25rem;
        opacity: 0;
    }

    50% {
        max-width: 0;
        opacity: 0;
    }

    100% {
        max-width: 0;
        opacity: 0;
    }
}

.contact-status-text.anim-hide {
    max-width: 0 !important;
    opacity: 0 !important;
    animation: none !important;
    transition: all 0s !important;
}

/* Button width state animations */
.btn-loading {
    animation: btnToLoading 2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    min-width: 2.75rem !important;
}

/* Button width reset animation */
.btn-reset {
    animation: btnToSubmit 2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    min-width: 2.75rem !important;
}

/* Button bounce success animation */
.btn-submit-success {
    animation: btnDoneBounceSuccess 2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    min-width: 2.75rem !important;
}

/* Button bounce fail animation */
.btn-submit-fail {
    animation: btnDoneBounceFail 2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    min-width: 2.75rem !important;
}

/* Success/Fail button bounce keyframes */
@keyframes btnDoneBounceSuccess {
    0% {
        width: var(--start-width, 11.25rem);
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    50% {
        width: 2.75rem;
        padding-left: 0;
        padding-right: 0;
    }

    100% {
        width: 16.25rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@keyframes btnDoneBounceFail {
    0% {
        width: var(--start-width, 11.25rem);
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    50% {
        width: 2.75rem;
        padding-left: 0;
        padding-right: 0;
    }

    100% {
        width: 18.75rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Loading transition keyframes */
@keyframes btnToLoading {
    0% {
        width: 10rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    50% {
        width: 2.75rem;
        padding-left: 0;
        padding-right: 0;
    }

    100% {
        width: 9.125rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Reset transition keyframes */
@keyframes btnToSubmit {
    0% {
        width: var(--start-width, 16.25rem);
        padding-left: 1rem;
        padding-right: 1rem;
    }

    50% {
        width: 2.75rem;
        padding-left: 0;
        padding-right: 0;
    }

    100% {
        width: 9.125rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.contact-result-text {
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: .05rem;
}

/* Result text container expansions */
.contact-result-text.anim-in {
    animation: resultExpand 2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.contact-result-text.anim-out {
    animation: resultRevert 2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Result inner content slide up */
.contact-result-text.anim-in .result-inner {
    animation: resultSlideDownUp 1.4s ease-in-out forwards;
    animation-delay: 0.6s;
    opacity: 0;
}

@keyframes resultExpand {
    0% {
        max-width: 0;
        opacity: 0;
    }

    50% {
        max-width: 0;
        opacity: 0;
    }

    100% {
        max-width: 18.75rem;
        opacity: 1;
    }
}

@keyframes resultRevert {
    0% {
        max-width: 18.75rem;
        opacity: 0;
    }

    50% {
        max-width: 0;
        opacity: 0;
    }

    100% {
        max-width: 0;
        opacity: 0;
    }
}

@keyframes resultSlideDownUp {
    0% {
        opacity: 0;
        transform: translateY(0.2rem);
    }

    80% {
        opacity: 0.9;
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.result-inner {
    display: flex;
    align-items: center;
    gap: .625rem;
}

/* Override default browser autofill styles */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: inherit;
}