/* =========================================================
   CONTACT PAGE
   FONT COLORS + MEDICAL WEBPAGE THEME
========================================================= */

.contact-main {
    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 16%,
            rgba(197, 245, 248, 0.74),
            transparent 24rem
        ),
        radial-gradient(
            circle at 94% 38%,
            rgba(198, 234, 212, 0.54),
            transparent 28rem
        ),
        var(--color-white);

    /* MAIN PAGE TEXT */
    color: #334E5C;

    font-family:
        "Inter",
        var(--font-family-base);
}


/* =========================================================
   HEADINGS FONT
========================================================= */

.contact-main h1,
.contact-main h2,
.contact-main h3,
.contact-main .contact-kicker {
    font-family:
        "Poppins",
        "Inter",
        var(--font-family-heading);
}


/* =========================================================
   HERO
========================================================= */

.contact-hero {
    position: relative;

    min-height:
        clamp(
            30rem,
            60vh,
            43rem
        );

    display: flex;

    align-items: flex-end;

    padding-block:
        clamp(
            3rem,
            7vw,
            5.75rem
        );

    isolation: isolate;
}


/* =========================================================
   HERO MEDIA
========================================================= */

.contact-hero__media {
    position: absolute;

    inset: 0;

    z-index: -2;

    overflow: hidden;
}


/* =========================================================
   HERO OVERLAY
========================================================= */

.contact-hero__media::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(237, 248, 255, 0.96),
            rgba(244, 254, 255, 0.9) 54%,
            rgba(255, 255, 255, 0.72)
        ),
        linear-gradient(
            180deg,
            rgba(222, 244, 255, 0.7),
            rgba(227, 251, 252, 0.86)
        );
}


/* =========================================================
   HERO IMAGE
========================================================= */

.contact-hero__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.01);

    transition:
        transform 900ms ease;
}


.contact-hero:hover
.contact-hero__media img {
    transform: scale(1.045);
}


/* =========================================================
   HERO INNER
========================================================= */

.contact-hero__inner {
    max-width: 100%;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.contact-breadcrumb {
    margin-bottom:
        var(--space-8);
}


.contact-breadcrumb .breadcrumb {
    display: inline-flex;

    align-items: center;

    gap:
        var(--space-2);

    margin: 0;

    padding:
        0.7rem 1rem;

    background:
        rgba(255, 255, 255, 0.82);

    border:
        1px solid
        var(--color-sky-blue-200);

    border-radius:
        var(--radius-pill);

    box-shadow:
        var(--shadow-xs);

    backdrop-filter:
        blur(14px);
}


/* =========================================================
   BREADCRUMB TEXT
========================================================= */

.contact-breadcrumb .breadcrumb-item,
.contact-breadcrumb .breadcrumb-item a {
    color: #334E5C;

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-semibold);
}


.contact-breadcrumb .breadcrumb-item a:hover {
    color: #087EA4;
}


.contact-breadcrumb .breadcrumb-item.active {
    color: #164D75;
}


/* =========================================================
   CONTACT KICKER
========================================================= */

.contact-kicker {
    display: inline-flex;

    align-items: center;

    gap:
        var(--space-2);

    width: fit-content;

    margin-bottom:
        var(--space-4);

    padding:
        0.55rem 0.85rem;

    color: #087EA4;

    background:
        rgba(255, 255, 255, 0.86);

    border:
        1px solid
        var(--color-sky-blue-200);

    border-radius:
        var(--radius-pill);

    box-shadow:
        var(--shadow-xs);

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-weight-bold);

    letter-spacing: 0;

    text-transform: uppercase;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.contact-hero__content {
    max-width: 54rem;
}


/* =========================================================
   HERO TITLE
========================================================= */

.contact-hero h1 {
    margin-bottom:
        var(--space-5);

    color: #164D75;

    font-size: 4.25rem;

    line-height: 1.04;
}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.contact-hero p {
    max-width: 42rem;

    color: #334E5C;

    font-size:
        var(--font-size-md);

    line-height:
        var(--line-height-loose);
}


/* =========================================================
   HERO PANEL
========================================================= */

.contact-hero__panel {
    display: grid;

    gap:
        var(--space-3);

    padding:
        var(--space-4);

    background:
        rgba(255, 255, 255, 0.78);

    border:
        1px solid
        rgba(189, 233, 255, 0.82);

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--shadow-lg);

    backdrop-filter:
        blur(18px);
}


/* =========================================================
   HERO PANEL LINKS
========================================================= */

.contact-hero__panel a {
    display: grid;

    grid-template-columns:
        auto 1fr;

    gap:
        0 var(--space-3);

    align-items: center;

    padding:
        var(--space-4);

    color: #334E5C;

    background:
        rgba(244, 254, 255, 0.88);

    border:
        1px solid
        var(--color-sky-blue-200);

    border-radius:
        var(--radius-lg);

    transition:
        transform var(--transition-base),
        background-color var(--transition-base),
        box-shadow var(--transition-base);
}


.contact-hero__panel a:hover {
    color: #087EA4;

    background:
        var(--color-white);

    box-shadow:
        var(--shadow-sm);

    transform:
        translateY(-0.2rem);
}


/* =========================================================
   HERO PANEL ICON
========================================================= */

.contact-hero__panel i {
    grid-row: span 2;

    width: 2.75rem;
    height: 2.75rem;

    display: grid;

    place-items: center;

    color: #087EA4;

    background:
        var(--color-sky-blue-100);

    border:
        1px solid
        var(--color-sky-blue-200);

    border-radius: 50%;

    font-size:
        var(--font-size-lg);
}


/* =========================================================
   HERO PANEL LABEL
========================================================= */

.contact-hero__panel span {
    color: #6B7F8A;

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-weight-bold);

    text-transform: uppercase;
}


/* =========================================================
   HERO PANEL STRONG TEXT
========================================================= */

.contact-hero__panel strong {
    color: #164D75;

    font-size:
        var(--font-size-base);

    line-height: 1.35;
}


/* =========================================================
   SECTIONS
========================================================= */

.contact-section,
.contact-map-section {
    padding-block:
        clamp(
            3.5rem,
            7vw,
            5.5rem
        );
}


/* =========================================================
   QUICK CONTACT SECTION
========================================================= */

.contact-quick-section {
    margin-top: -2.4rem;

    padding-top: 0;

    position: relative;

    z-index: 2;
}


/* =========================================================
   SOFT SECTION
========================================================= */

.contact-section--soft {
    background:
        linear-gradient(
            180deg,
            var(--color-light-gray-50),
            var(--color-soft-cyan-50)
        );
}


/* =========================================================
   SECTION HEADING
========================================================= */

.contact-section-heading {
    max-width: 50rem;

    margin-bottom:
        var(--space-10);
}


.contact-section-heading.text-center {
    margin-inline: auto;
}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.contact-section-heading h2,
.contact-info-intro h2,
.contact-form-copy h2,
.contact-map-section h2 {
    margin-bottom:
        var(--space-4);

    color: #164D75;

    font-size: 2.85rem;

    line-height: 1.14;
}


/* =========================================================
   SECTION DESCRIPTION
========================================================= */

.contact-section-heading p,
.contact-info-intro p,
.contact-form-copy p,
.contact-map-section p {
    color: #6B7F8A;

    font-size:
        var(--font-size-md);

    line-height:
        var(--line-height-loose);
}


/* =========================================================
   CONTACT CARD GRID
========================================================= */

.contact-card-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        var(--space-5);
}


/* =========================================================
   QUICK CONTACT CARD
========================================================= */

.quick-contact-card {
    position: relative;

    overflow: hidden;

    min-height: 19rem;

    display: flex;

    flex-direction: column;

    padding:
        var(--space-6);

    background:
        rgba(255, 255, 255, 0.76);

    border:
        1px solid
        rgba(189, 233, 255, 0.82);

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--shadow-md);

    backdrop-filter:
        blur(18px);

    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base),
        background-color var(--transition-base);
}


/* =========================================================
   CARD TOP ACCENT
========================================================= */

.quick-contact-card::before {
    content: "";

    position: absolute;

    inset: 0 0 auto;

    height: 0.28rem;

    background:
        linear-gradient(
            90deg,
            var(--color-sky-blue-300),
            var(--color-soft-green-200)
        );
}


/* =========================================================
   CARD HOVER
========================================================= */

.quick-contact-card:hover {
    transform:
        translateY(-0.55rem);

    background:
        rgba(255, 255, 255, 0.92);

    border-color:
        var(--color-sky-blue-300);

    box-shadow:
        var(--shadow-lg);
}


/* =========================================================
   QUICK CARD ICON
========================================================= */

.quick-contact-card__icon {
    width: 4.5rem;
    height: 4.5rem;

    display: grid;

    place-items: center;

    margin-bottom:
        var(--space-5);

    color: #087EA4;

    background:
        linear-gradient(
            135deg,
            var(--color-sky-blue-100),
            var(--color-soft-cyan-100)
        );

    border:
        1px solid
        var(--color-sky-blue-200);

    border-radius:
        var(--radius-xl);

    font-size: 2rem;

    box-shadow:
        var(--shadow-xs);

    transition:
        transform var(--transition-base);
}


.quick-contact-card:hover
.quick-contact-card__icon {
    transform:
        scale(1.06);
}


/* =========================================================
   QUICK CARD TITLE
========================================================= */

.quick-contact-card h3 {
    margin-bottom:
        var(--space-3);

    color: #164D75;

    font-size:
        var(--font-size-xl);
}


/* =========================================================
   QUICK CARD TEXT
========================================================= */

.quick-contact-card p {
    flex: 1;

    margin-bottom:
        var(--space-5);

    color: #6B7F8A;

    line-height:
        var(--line-height-loose);
}


/* =========================================================
   QUICK CARD LINK
========================================================= */

.quick-contact-card a {
    display: inline-flex;

    align-items: center;

    width: fit-content;

    min-height: 2.45rem;

    padding:
        0.65rem 0.95rem;

    color: #087EA4;

    background:
        var(--color-soft-cyan-50);

    border:
        1px solid
        var(--color-sky-blue-200);

    border-radius:
        var(--radius-pill);

    font-weight:
        var(--font-weight-bold);
}


.quick-contact-card a:hover {
    color: #FFFFFF;

    background:
        #164D75;

    border-color:
        #164D75;
}


/* =========================================================
   INFO / FORM COPY
========================================================= */

.contact-info-intro,
.contact-form-copy {
    height: 100%;

    padding:
        var(--space-8);

    background:
        rgba(255, 255, 255, 0.9);

    border:
        1px solid
        var(--color-light-gray-200);

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--shadow-md);
}


/* =========================================================
   CONTACT DETAIL GRID
========================================================= */

.contact-detail-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        var(--space-4);
}


/* =========================================================
   CONTACT DETAIL CARD
========================================================= */

.contact-detail-card {
    display: grid;

    grid-template-columns:
        auto 1fr;

    gap:
        var(--space-4);

    min-height: 10rem;

    padding:
        var(--space-5);

    background:
        rgba(255, 255, 255, 0.94);

    border:
        1px solid
        var(--color-light-gray-200);

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--shadow-sm);

    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
}


/* =========================================================
   DETAIL CARD HOVER
========================================================= */

.contact-detail-card:hover {
    transform:
        translateY(-0.35rem);

    border-color:
        var(--color-sky-blue-200);

    box-shadow:
        var(--shadow-md);
}


/* =========================================================
   WIDE DETAIL CARD
========================================================= */

.contact-detail-card--wide {
    grid-column:
        1 / -1;
}


/* =========================================================
   DETAIL CARD ICON
========================================================= */

.contact-detail-card i {
    width: 3rem;
    height: 3rem;

    display: grid;

    place-items: center;

    color: #0B6E69;

    background:
        var(--color-soft-green-100);

    border:
        1px solid
        var(--color-soft-green-200);

    border-radius:
        var(--radius-lg);

    font-size:
        var(--font-size-lg);
}


/* =========================================================
   DETAIL CARD TITLE
========================================================= */

.contact-detail-card h3 {
    margin-bottom:
        var(--space-2);

    color: #164D75;

    font-size:
        var(--font-size-lg);
}


/* =========================================================
   DETAIL CARD TEXT
========================================================= */

.contact-detail-card p {
    margin: 0;

    color: #6B7F8A;

    line-height:
        var(--line-height-loose);
}


/* =========================================================
   DETAIL CARD LINK
========================================================= */

/*.contact-detail-card a {*/
/*    color: #087EA4;*/

/*    font-weight:*/
/*        var(--font-weight-semibold);*/

/*    text-decoration: none;*/
/*}*/


.contact-detail-card a:hover {
    color: #075E7A;

    text-decoration: underline;
}


/* =========================================================
   FORM NOTE
========================================================= */

.contact-form-note {
    display: flex;

    align-items: flex-start;

    gap:
        var(--space-3);

    margin-top:
        var(--space-6);

    padding:
        var(--space-4);

    color: #334E5C;

    background:
        var(--color-soft-green-50);

    border:
        1px solid
        var(--color-soft-green-200);

    border-radius:
        var(--radius-lg);

    font-weight:
        var(--font-weight-semibold);

    line-height:
        var(--line-height-base);
}


/* =========================================================
   FORM NOTE ICON
========================================================= */

.contact-form-note i {
    flex: 0 0 auto;

    width: 1.65rem;
    height: 1.65rem;

    display: grid;

    place-items: center;

    color: #087EA4;

    background:
        var(--color-white);

    border-radius: 50%;
}


/* =========================================================
   CONTACT FORM CARD
========================================================= */

.contact-form-card {
    padding:
        var(--space-8);

    background:
        rgba(255, 255, 255, 0.94);

    border:
        1px solid
        var(--color-light-gray-200);

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--shadow-lg);
}


/* =========================================================
   FORM FLOATING CONTROL
========================================================= */

.contact-form-card
.form-floating
> .form-control {
    min-height: 3.75rem;
}


/* =========================================================
   TEXTAREA
========================================================= */

.contact-form-card
textarea.form-control {
    min-height: 10rem;

    resize: vertical;
}


/* =========================================================
   FORM CONTROL
========================================================= */

.contact-form-card
.form-control {
    color: #334E5C;

    background:
        var(--color-light-gray-50);

    border:
        1px solid
        var(--color-light-gray-200);

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-xs);

    font-family:
        "Inter",
        var(--font-family-base);

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}


/* =========================================================
   FORM CONTROL FOCUS
========================================================= */

.contact-form-card
.form-control:focus {
    color: #164D75;

    background:
        var(--color-white);

    border-color:
        var(--color-sky-blue-300);

    box-shadow:
        var(--shadow-focus);
}


/* =========================================================
   FORM LABEL
========================================================= */

.contact-form-card label {
    color: #6B7F8A;
}


/* =========================================================
   VALID FORM CONTROL
========================================================= */

.contact-form-card
.was-validated
.form-control:valid,

.contact-form-card
.form-control.is-valid {
    border-color:
        var(--color-soft-green-300);
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.contact-submit-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap:
        var(--space-2);

    width: 100%;

    min-height: 3.35rem;

    padding:
        0.85rem 1.35rem;

    color: #FFFFFF;

    background:
        #164D75;

    border:
        1px solid
        #164D75;

    border-radius:
        var(--radius-pill);

    box-shadow:
        var(--shadow-sm);

    font: inherit;

    font-weight:
        var(--font-weight-bold);

    transition:
        transform var(--transition-fast),
        background-color var(--transition-fast),
        box-shadow var(--transition-fast);
}


/* =========================================================
   SUBMIT BUTTON HOVER
========================================================= */

.contact-submit-btn:hover {
    color: #FFFFFF;

    background:
        #075E7A;

    border-color:
        #075E7A;

    box-shadow:
        var(--shadow-md);

    transform:
        translateY(-0.125rem);
}


/* =========================================================
   MAP SECTION
========================================================= */

.contact-map-section {
    background:
        linear-gradient(
            180deg,
            var(--color-white),
            var(--color-soft-cyan-50)
        );
}


/* =========================================================
   MAP CARD
========================================================= */

.contact-map-card {
    overflow: hidden;

    padding:
        var(--space-3);

    background:
        rgba(255, 255, 255, 0.92);

    border:
        1px solid
        var(--color-sky-blue-200);

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--shadow-lg);
}


/* =========================================================
   MAP IFRAME
========================================================= */

.contact-map-card iframe {
    display: block;

    width: 100%;

    height: 500px;

    border: 0;

    border-radius:
        calc(
            var(--radius-xl) - 0.35rem
        );
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1199.98px) {

    .contact-card-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .contact-hero h1 {
        font-size: 3.2rem;
    }


    .contact-section-heading h2,
    .contact-info-intro h2,
    .contact-form-copy h2,
    .contact-map-section h2 {
        font-size: 2.35rem;
    }


    .contact-info-intro,
    .contact-form-copy,
    .contact-form-card {
        padding:
            var(--space-6);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .contact-hero {
        min-height: auto;

        padding-block:
            var(--space-12);
    }


    .contact-quick-section {
        margin-top: 0;

        padding-top:
            var(--space-12);
    }


    .contact-hero h1 {
        font-size: 2.55rem;
    }


    .contact-hero p,
    .contact-section-heading p,
    .contact-info-intro p,
    .contact-form-copy p,
    .contact-map-section p {
        font-size:
            var(--font-size-base);
    }


    .contact-detail-grid {
        grid-template-columns: 1fr;
    }


    .contact-detail-card--wide {
        grid-column: auto;
    }


    .contact-map-card iframe {
        height: 420px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .contact-card-grid {
        grid-template-columns: 1fr;
    }


    .quick-contact-card {
        min-height: auto;
    }


    .contact-detail-card {
        grid-template-columns: 1fr;
    }


    .contact-info-intro,
    .contact-form-copy,
    .contact-form-card {
        padding:
            var(--space-5);
    }


    .contact-map-card {
        padding:
            var(--space-2);
    }


    .contact-map-card iframe {
        height: 360px;
    }

}



/* =========================================================
   CONTACT DETAILS — HORIZONTAL INFORMATION
========================================================= */

.contact-detail-card {
    display: flex;

    align-items: flex-start;

    gap: 18px;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.contact-detail-card__content {
    flex: 1;

    min-width: 0;
}


/* =========================================================
   CARD TITLE
========================================================= */

.contact-detail-card__content h3 {
    margin: 0 0 16px;

    color: #168fd0;

    font-size: 24px;

    font-weight: 800;

    line-height: 1.2;
}


/* =========================================================
   PERSON GRID
========================================================= */

.contact-person-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px 35px;

    width: 100%;
}


/* =========================================================
   PERSON INFORMATION
========================================================= */

.contact-person {
    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;
}


.contact-person strong {
    display: block;

    margin: 0;

    color: #64899f;

    font-size: 16px;

    font-weight: 800;

    line-height: 1.3;
}


.contact-person span {
    display: block;

    color: #7197ac;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.4;
}


.contact-person a {
    display: inline-block;

    color: #7197ac;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.4;

    text-decoration: none;
}


.contact-person a:hover {
    color: #168fd0;

    text-decoration: underline;
}


/* =========================================================
   EMAIL
========================================================= */

.contact-person--email {
    grid-column: 1 / -1;

    margin-top: 2px;
}


.contact-person--email a {
    word-break: break-word;
}


/* =========================================================
   ADDRESS CARD
========================================================= */

.contact-detail-card__content > p {
    margin: 0 0 10px;

    color: #7197ac;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.65;
}


.contact-detail-card__content > p:last-child {
    margin-bottom: 0;
}


.contact-detail-card__content > p strong {
    color: #64899f;

    font-weight: 800;
}


.contact-detail-card__content > p a {
    color: #7197ac;

    font-weight: 700;

    text-decoration: none;
}


.contact-detail-card__content > p a:hover {
    color: #168fd0;

    text-decoration: underline;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .contact-person-grid {
        gap: 16px 25px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .contact-detail-card {
        gap: 14px;
    }


    .contact-person-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .contact-person--email {
        grid-column: auto;
    }


    .contact-detail-card__content h3 {
        font-size: 21px;

        margin-bottom: 13px;
    }


    .contact-person strong,
    .contact-person span,
    .contact-person a {
        font-size: 14px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .contact-detail-card {
        gap: 12px;
    }


    .contact-detail-card__content h3 {
        font-size: 19px;
    }


    .contact-person strong,
    .contact-person span,
    .contact-person a {
        font-size: 13px;
    }


    .contact-detail-card__content > p {
        font-size: 13px;

        line-height: 1.55;
    }

}