/* ---------------- START Contact Us Card ---------------- */
#contact {
    --contact-card-background-color: #f9f9f9;
    --contact-card-text-color: #717171;
    --contact-information-gap: 8px;
    --contact-links-separator-color: rgb(113 113 113 / 67%);
    --contact-links-gap: 32px;
    --contact-links-gap-mobile: 8px;

    display: block;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    background-color: var(--contact-card-background-color);

    .contact-us {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 35px;
        line-height: 1.5;

        .wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 16px;
            max-width: 1024px;
            width: 90%;

            h3,
            h4 {
                color: var(--primary-color);
            }

            h3 {
                font-size: 24px;
            }

            h4 {
                font-size: 18px;
            }

            p {
                color: var(--contact-card-text-color);
                font-size: 16px;
            }

            img {
                width: 116px;
                max-width: 116px;
                height: auto;
                object-fit: contain;
            }

            .intro {
                width: auto;
                text-align: center;
            }

            .contact-information {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: var(--contact-information-gap);
                width: 100%;

                a {
                    color: var(--link-color);
                    position: relative;
                    padding-left: 24px;
                    left: -17px;
                    text-decoration: underline;
                    text-decoration-thickness: 1px;
                    text-underline-offset: 4px;
                    transition: text-decoration 0.25s ease;
                    -webkit-transition: text-decoration 0.25s ease;

                    &:hover {
                        text-decoration-thickness: 2px;
                    }

                    &[href^="mailto:"]::before {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 16px;
                        height: 100%;
                        background-color: var(--contact-card-text-color);
                        mask-image: url("https://cmsv2-shared-assets.apptegy.net/Global/Images/Icons/mail-icon-black.svg");
                        mask-size: contain;
                        mask-position: center;
                        mask-repeat: no-repeat;
                        z-index: 1;
                    }

                    &[href^="tel:"]::before {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 16px;
                        height: 100%;
                        background-color: var(--contact-card-text-color);
                        mask-image: url("https://cmsv2-shared-assets.apptegy.net/Global/Images/Icons/phone-icon-black.svg");
                        mask-size: contain;
                        mask-position: center;
                        mask-repeat: no-repeat;
                        z-index: 1;
                    }
                }
            }

            .contact-links {
                position: relative;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                gap: var(--contact-links-gap);
                width: 100%;
                text-align: center;

                a.contact-email::after {
                    content: " | ";
                    position: absolute;
                    top: 0;
                    right: calc(var(--contact-links-gap) / -2);
                    width: 1px;
                    height: 100%;
                    background-color: var(--contact-links-separator-color);
                    color: transparent;
                    z-index: 1;
                }

                @media (max-width: 500px) {
                    flex-direction: column;
                    gap: var(--contact-links-gap-mobile);

                    a {
                        left: unset;
                        width: auto;
                    }

                    a.contact-email::after {
                        content: none;
                    }
                }
            }
        }
    }
}
/* ----------------- END Contact Us Card ----------------- */