:root {
    --brand-color: #5379c0;
    --accent-color: #fdb5a9;
    --brand-color-alt: #c4d8ef;
    --text-color: #1a1919;
    --text-color-alt: #ffffff;
    --background-color: #f4f4f4;
}

.pb-16 {
    padding-bottom: 1rem;
}

.font-size-13 {
    font-size: 13px;
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(./Montserrat-SemiBold.woff2) format("woff2");
}

html {
    box-sizing: border-box;
    font-size: var(--p-font-size, 0.875rem);
    line-height: 1.4;
    font-family: "Inter", Arial, Helvetica, sans-serif;
    scroll-behavior: smooth;

    @media only screen and (min-width: 768px) {
        --p-font-size: 1rem;
    }
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

ol,
ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Montserrat", system-ui, Helvetica, sans-serif;
    color: var(--brand-color);
    text-wrap-style: balance;
    font-weight: 600;
}

button,
.link-btn {
    --bg-color: var(--brand-color);

    cursor: pointer;
    border: none;
    font-size: 1rem;
    border-radius: 0.625rem;
    padding: 0.75rem 1.2rem;
    color: var(--text-color-alt);
    font-weight: 600;
    background-color: var(--bg-color);
    transition: all 300ms ease;
    text-decoration: none;

    &.link-btn--accent {
        --bg-color: var(--accent-color);
    }

    &:is(:hover, :focus) {
        box-shadow: inset 0 0 0 0.125rem var(--bg-color);
        background-color: transparent;
        color: var(--bg-color);
    }

    &:is(:focus) {
        box-shadow: inset 0 0 0 0.125rem var(--bg-color);
        outline: none;
    }
}

.top-header {
    address,
    a {
        display: var(--top-header-display, none);
    }

    background-color: var(--brand-color-alt);

    @media only screen and (min-width: 768px) {
        --top-header-display: flex;
    }
}

.top-header .container {
    gap: 1rem;
    display: flex;
    max-width: 1440px;
    margin-inline: auto;
    justify-content: space-between;
    padding-block: 0.25rem;
    padding-inline: var(--header-container-padding-inline, 1rem);
    flex-direction: var(--header-container-flex-direction, column);

    div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        align-self: var(--header-container-align-self, auto);
    }

    button {
        cursor: pointer;
        border: none;
        font-size: 1rem;
        background-color: transparent;
        color: var(--text-color);
    }

    @media only screen and (min-width: 768px) {
        --header-container-padding-inline: 2rem;
        --header-container-flex-direction: row;
        --header-container-align-self: flex-start;
    }

    @media only screen and (min-width: 1180px) {
        --header-container-padding-inline: 4rem;
    }

    @media only screen and (min-width: 1440px) {
        --header-container-padding-inline: 6rem;
    }
}

.top-header select {
    border: none;
    height: 2rem;
    font-size: 1rem;
    cursor: pointer;
    text-indent: 1px;
    border-radius: 0.25rem;
    background: transparent;
    padding-inline: 0.25rem;
    margin-inline-start: var(--select-margin-start, auto);
    -moz-appearance: none;
    -webkit-appearance: none;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;

    &:is(:focus, :focus-within) {
        outline: 0.125rem solid var(--brand-color);
    }

    @media only screen and (min-width: 768px) {
        --select-margin-start: 0.2rem;
    }
}

header address {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--header-address-gap, 0.4rem);
    font-size: var(--header-address-font-size, 0.75rem);
    flex-direction: var(--header-address-flex-direction, column);

    p,
    a {
        display: flex;
        font-weight: 400;
        font-style: normal;
        align-items: center;
        height: fit-content;
        text-decoration: none;
        border-radius: 0.25rem;
        color: var(--text-color);
        padding-inline-end: 0.2rem;
    }

    a:is(:focus, :focus-within) {
        outline: 0.125rem solid var(--brand-color);
        outline-offset: 0.125rem;
        background: none;
    }

    img {
        height: 1.4rem;
    }

    span {
        margin-inline: 0.25rem;
    }

    @media only screen and (min-width: 768px) {
        --header-address-flex-direction: row;
    }

    @media only screen and (min-width: 1180px) {
        --header-address-gap: 1rem;
        --header-address-font-size: 0.875rem;
        --header-address-flex-direction: row;
    }
}

.mid-header .container {
    display: flex;
    gap: 1rem;
    max-width: 1440px;
    align-items: center;
    margin-inline: auto;
    justify-content: space-between;
    padding-block: 1rem;
    padding-inline: var(--mid-header-container-padding-inline, 1rem);

    img {
        height: 70px;
    }

    & > * {
        display: flex;
        gap: 0.5rem;
    }

    @media only screen and (min-width: 1180px) {
        --mid-header-container-padding-inline: 4rem;
    }

    @media only screen and (min-width: 1440px) {
        --mid-header-container-padding-inline: 6rem;
    }
}

.banner {
    width: 100%;
    height: var(--banner-height, auto);
    position: relative;
    background-color: var(--background-color);

    &::before {
        left: 0;
        top: 0;
        right: 0;
        width: 60%;
        z-index: 5;
        height: 100%;
        position: absolute;
        background-color: var(--brand-color-alt);
        content: var(--banner-content-before, none);
        clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
    }

    &::after {
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        width: 46%;
        height: 100%;
        position: absolute;
        background-repeat: no-repeat;
        content: var(--banner-content-after, none);
        background-image: url(/assets/img/banner.png);
        background-size: var(--banner-image-bg-size, cover);
        background-position: var(--banner-image-position, right);
    }

    h1 {
        z-index: 10;
        width: var(--banner-heading-width, 100%);
        font-size: var(--banner-heading-font-size, 2.4rem);
        max-width: var(--banner-heading-max-width, 100%);
        text-align: var(--banner-heading-align, center);
        position: var(--banner-heading-position, relative);
        margin-block: var(--banner-heading-margin-block, 2rem 2rem);
    }

    & > div {
        display: flex;
        max-width: 1440px;
        flex-direction: column;
        margin-inline: auto;
        padding-inline: var(--banner-padding-inline, 0);
    }

    @media only screen and (min-width: 600px) {
        --banner-height: 30rem;
        --banner-image-height: 30rem;
        --banner-heading-width: 35%;
        --banner-heading-align: start;
        --banner-heading-position: absolute;
        --banner-heading-max-width: 500px;
        --banner-heading-margin-block: auto;
        --banner-heading-position: absolute;
        --banner-padding-inline: 2rem;
        --banner-heading-font-size: clamp(3rem, 5vw, 4rem);
        --banner-content-before: "";
        --banner-content-after: "";

        h1 {
            top: 50%;
            transform: translateY(-50%);
        }
    }

    @media only screen and (min-width: 900px) {
        --banner-image-position: left;
    }

    @media only screen and (min-width: 1180px) {
        --banner-padding-inline: 4rem;
        --banner-image-bg-size: contain;
    }

    @media only screen and (min-width: 1440px) {
        --banner-padding-inline: 6rem;
    }
}

.banner-img {
    background-image: url(/assets/img/banner.png);
    background-size: var(--banner-img-bg-size, contain);
    background-position: right;
    background-repeat: no-repeat;
    height: 400px;
    width: 100%;
    display: var(--banner-img-display, block);

    @media only screen and (min-width: 400px) {
        --banner-img-bg-size: cover;
    }

    @media only screen and (min-width: 600px) {
        --banner-img-display: none;
    }
}

section {
    margin-inline: auto;
    max-width: 1440px;
    padding-block: var(--section-padding-inline, 2rem);
    padding-inline: var(--section-padding-inline, 2rem);

    h2 {
        font-size: var(--section-heading-font-size, 1.5rem);
        margin-block-end: 2rem;
    }

    @media only screen and (min-width: 1180px) {
        --section-padding-inline: 4rem;
        --section-heading-font-size: 1.8rem;
    }

    @media only screen and (min-width: 1440px) {
        --section-padding-inline: 6rem;
        --section-heading-font-size: 2.4rem;
    }
}

h1 span {
    color: var(--text-color);
}

.facebook svg {
    color: var(--brand-color);
}

.facebook a {
    height: 2rem;
    width: 2rem;
    border-radius: 0.25rem;

    &:is(:focus, :focus-within) {
        outline: 0.125rem solid var(--brand-color);
    }
}

.services {
    h2 {
        text-align: center;
    }

    h3 {
        margin-block: 1rem;
        font-size: 1.25rem;
    }

    ul {
        gap: 1rem;
        display: grid;
        grid-template-columns: var(--services-grid-layout, 1fr);
        margin-block-end: 2rem;
    }

    li,
    .canada-plan {
        position: relative;
        width: 100%;
        text-align: center;
        padding: 2rem 2rem;
        border-radius: 1.25rem;
        background-color: var(--background-color);

        &.has-video::after {
            cursor: pointer;
            content: "";
            position: absolute;
            inset: 0;
            background-color: rgba(210, 210, 210, 0.865);
            backdrop-filter: blur(2px);
            border-radius: inherit;
            transition: opacity 0.3s;
            opacity: 0;

            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48IS0tIEljb24gZnJvbSBTb2xhciBieSA0ODAgRGVzaWduIC0gaHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LzQuMC8gLS0+PGcgZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTExLjA3NSA3LjUwOGMtMS4zMjktLjc4NC0yLjgyNS4yODMtMi44MjUgMS43MDV2NS41NzRjMCAxLjQyMiAxLjQ5NiAyLjQ4OSAyLjgyNSAxLjcwNWw0LjcyLTIuNzg3YzEuMjczLS43NTIgMS4yNzMtMi42NTggMC0zLjQxek05Ljc1IDkuMjEzYzAtLjE5OC4wOTYtLjMzNy4yMS0uNDA4YS4zMi4zMiAwIDAgMSAuMzUyLS4wMDVsNC43MiAyLjc4N2EuNDcuNDcgMCAwIDEgLjIxOC40MTNhLjQ3LjQ3IDAgMCAxLS4yMTguNDEzbC00LjcyIDIuNzg3YS4zMi4zMiAwIDAgMS0uMzUzLS4wMDVhLjQ3LjQ3IDAgMCAxLS4yMDktLjQwOHoiLz48cGF0aCBkPSJNMTIgMS4yNUM2LjA2MyAxLjI1IDEuMjUgNi4wNjMgMS4yNSAxMlM2LjA2MyAyMi43NSAxMiAyMi43NVMyMi43NSAxNy45MzcgMjIuNzUgMTJTMTcuOTM3IDEuMjUgMTIgMS4yNU0yLjc1IDEyYTkuMjUgOS4yNSAwIDEgMSAxOC41IDBhOS4yNSA5LjI1IDAgMCAxLTE4LjUgMCIvPjwvZz48L3N2Zz4=");
            background-repeat: no-repeat;
            background-size: 100px;
            background-position: center;
        }

        &.has-video:hover::after {
            opacity: 1;
        }
    }

    @media only screen and (min-width: 768px) {
        --services-grid-layout: 1fr 1fr;
    }

    @media only screen and (min-width: 1180px) {
        --services-grid-layout: 1fr 1fr 1fr;
    }
}

.services .services-items {
    gap: 0.1rem;
    display: flex;
    flex-direction: column;
    margin-block-end: 0;

    li {
        padding: 0;
        position: relative;

        /* &::before {
            content: "";
            min-width: 0.5rem;
            min-height: 0.5rem;
            display: inline-block;
            background: var(--brand-color);
            border-radius: 10rem;
            margin-inline-end: 0.25rem;
            margin-block-end: 0.125rem;
        } */
    }
}

.avatar {
    width: 5rem;
    height: 5rem;
    display: flex;
    position: relative;
    align-items: center;
    margin-inline: auto;
    border-radius: 20rem;
    justify-content: center;
    background-color: var(--brand-color-alt);

    img {
        width: 50%;
        height: 50%;
    }
}

.avatar.cad {
    background: linear-gradient(90deg, #fdb1a7, #fee1c3);
}

.canada-plan {
    width: 100%;

    a {
        font-style: normal;
        font-weight: 600;
        text-decoration: none;
        color: var(--brand-color);

        &:is(:hover, :focus-visible) {
            outline: none;
            text-decoration: underline;
        }
    }

    img {
        width: 90%;
        height: auto;
        margin-block-start: 0.6rem;
    }
}

.clinic {
    ul {
        margin-block-start: 2rem;
    }

    li {
        display: flex;
        align-items: center;
        margin-block-end: 1rem;
    }

    span {
        min-width: 2rem;
        min-height: 2rem;
        max-width: 2rem;
        max-height: 2rem;
        display: inline-flex;
        position: relative;
        align-items: center;
        border-radius: 20rem;
        justify-content: center;
        background-color: var(--brand-color-alt);
        margin-inline-end: 0.5rem;

        img {
            width: 70% !important;
            height: 70% !important;
            max-width: 70% !important;
        }
    }
}

.doctor > h2,
.clinic > h2 {
    display: var(--section-heading-display, block);
    text-align: center;

    @media only screen and (min-width: 1180px) {
        --section-heading-display: none;
    }
}

.doctor .container,
.clinic .container {
    gap: var(--container-flex-gap, 1rem);
    display: flex;
    align-items: center;
    flex-direction: var(--container-flex-direction, column);

    img {
        width: 100%;
        max-width: var(--container-img-max-width, 30rem);
    }

    h2 {
        display: var(--section-heading-display, none);
    }

    @media only screen and (min-width: 1180px) {
        --container-flex-direction: row;
        --container-img-max-width: 40%;
        --container-flex-gap: 4rem;
        --section-heading-display: block;
    }
}

.doctor ul {
    gap: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-block: 1.4rem;
}

.doctor .container ul img {
    max-width: 12rem;
    max-height: var(--doctor-list-item-height, 4rem);

    @media only screen and (min-width: 768px) {
        --doctor-list-item-height: 5rem;
    }
}

.doctor a:focus-within {
    outline-offset: 0.25rem;
    outline-color: var(--brand-color);
}

.testimonials {
    h2 {
        text-align: center;
    }

    img {
        width: 10rem;
        height: 10rem;
        min-width: 10rem;
        min-height: 10rem;
        max-width: 10rem;
        max-height: 10rem;
        border-radius: 20rem;
    }

    ul {
        display: grid;
        gap: var(--testimonials-grid-gap, 1rem);
        grid-template-columns: var(--testimonials-grid-layout, 1fr);

        @media only screen and (min-width: 900px) {
            --testimonials-grid-gap: 2.4rem;
        }
    }

    li {
        width: 100%;
        gap: 1.4rem;
        display: flex;
        padding: 2rem 2rem;
        align-items: center;
        border-radius: 1.25rem;
        background-color: var(--background-color);
        text-align: var(--testimonials-text-align, center);
        flex-direction: var(--testimonials-flex-direction, column);
    }

    @media only screen and (min-width: 768px) {
        --testimonials-grid-layout: 1fr 1fr;
    }

    @media only screen and (min-width: 1180px) {
        --testimonials-flex-direction: row;
        --testimonials-text-align: start;
    }
}

footer {
    background-color: var(--brand-color-alt);
}

.footer {
    margin-inline: auto;
    max-width: 1440px;
    padding-block: 2rem;
    padding-inline: var(--footer-padding-inline, 2rem);

    @media only screen and (min-width: 1180px) {
        --footer-padding-inline: 4rem;
        --footer-heading-font-size: 1.8rem;
    }

    @media only screen and (min-width: 1440px) {
        --footer-padding-inline: 6rem;
        --footer-heading-font-size: 2.4rem;
    }
}

.footer-top {
    display: grid;
    gap: var(--footer-top-gap, 2.4rem);
    grid-template-columns: var(--footer-top-grid-layout, 1fr);

    @media only screen and (min-width: 900px) {
        --footer-top-grid-layout: 1fr 1fr;
    }
}

.footer-bottom {
    display: flex;
    padding-block-start: 1rem;
    border-top: 0.0625rem solid var(--text-color);
    justify-content: space-between;

    button {
        padding: 0;
        font-weight: 400;
        color: var(--text-color);
        background-color: transparent;

        &:is(:hover, :focus-visible) {
            border: none;
            outline: none;
            box-shadow: none;
            text-decoration: underline;
        }
    }
}

.footer .logo {
    height: 4rem;
}

footer .map {
    width: 100%;
    border-radius: 0.5rem;
    margin-block: 1rem 2rem;
}

footer .map iframe {
    width: 100%;
    border-radius: 0.5rem;
    height: var(--footer-iframe-height, 20rem);
}

footer address {
    gap: 0.4rem;
    display: flex;
    font-size: 1rem;
    flex-direction: column;
    margin-block-end: 2rem;

    p,
    a {
        display: flex;
        font-weight: 400;
        align-items: center;
        font-style: normal;
        text-decoration: none;
        color: var(--text-color);
        border-radius: 0.25rem;
        width: fit-content;
    }

    img {
        height: 1.4rem;
    }

    span {
        margin-inline: 0.25rem;
    }

    a:is(:focus, :focus-within) {
        outline: 0.125rem solid var(--brand-color);
        outline-offset: 0.125rem;
        background: none;
    }
}

footer table {
    border-spacing: 0;
    margin-block-start: 1rem;
}

footer table td:first-child {
    min-width: 100px;
}

footer h2 {
    color: var(--text-color);
    font-size: var(--footer-heading-font-size, 1.5rem);

    @media only screen and (min-width: 1180px) {
        --footer-heading-font-size: 1.8rem;
    }

    @media only screen and (min-width: 1440px) {
        --footer-heading-font-size: 2.4rem;
    }
}

form label {
    width: 100%;
    display: block;
    margin-block: 2rem 0.5rem;
}

form input {
    width: 100%;
    border: none;
    font-size: 1rem;
    min-height: 2.4rem;
    border-radius: 0.5rem;
    padding-inline: 0.75rem;
    background-color: rgba(255, 255, 255, 0.5);

    &:is(:focus-visible) {
        outline: none;
        box-shadow: 0 0 0.25rem var(--brand-color);
    }
}

form textarea {
    width: 100%;
    border: none;
    font-size: 1rem;
    border-radius: 0.5rem;
    padding-block: 0.75rem;
    padding-inline: 0.75rem;
    background-color: rgba(255, 255, 255, 0.5);

    &:is(:focus-visible) {
        outline: none;
        box-shadow: 0 0 0.25rem var(--brand-color);
    }
}

form button {
    margin-block: 2rem 4rem;
    width: 12.5rem;
}

form #serverMSG {
    color: red;
    margin-top: 1rem;

    &:empty {
        display: none;
    }
}

.dialog {
    --container-padding: 3rem;
    --close-button-color: var(--brand-color);

    &.video {
        --close-button-color: white;
        --container-padding: 0;
    }

    width: 94%;
    border: none;
    max-width: 800px;
    border-radius: 0.5rem;
    padding: var(--container-padding);

    -ms-overflow-style: none;
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }

    h2 {
        margin-block-end: 2rem;
    }

    h3 {
        margin-block: 2rem 1rem;
        color: var(--text-color);
    }

    ul {
        margin-block: 1rem;
    }

    ul li {
        position: relative;

        &::before {
            content: "";
            min-width: 0.35rem;
            min-height: 0.35rem;
            border-radius: 10rem;
            display: inline-block;
            margin-inline: 0.5rem;
            margin-block-end: 0.125rem;
            background: var(--text-color);
        }
    }

    button {
        top: 0;
        right: 0;
        border: none;
        box-shadow: none;
        font-size: 1.4rem;
        position: absolute;
        padding: 0.75rem 1rem;
        background: transparent;
        color: var(--close-button-color);

        &:is(:hover, :focus) {
            border: none;
            box-shadow: none;
            padding: 0.75rem 1rem;
            background: transparent;
            color: var(--close-button-color);
        }
    }

    a {
        text-decoration: none;
        color: var(--brand-color);

        &:is(:hover, :focus-visible) {
            text-decoration: underline;
        }
    }

    &::backdrop {
        background: #000;
        opacity: 0.6;
    }
}

body:has(dialog[open]) {
    overflow: hidden;
}