/*
    GLORY BE TO GOD,
    MEDIAFRI - SMART MEDICAL SOLUTIONS,
    ISRAEL MAFABI EMMANUEL
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --medical-purple-color: rgb(170, 133, 227);
    --medical-purple-drk-color: rgb(102, 79, 135);
    --medical-purple-dk-color: rgba(203, 169, 255, 0.401);
    --medical-purple-dk-tr-color: rgba(203, 169, 255, 0.1);
    --medical-gray-purple-color: rgb(35, 31, 32);
    --medical-gray-purple-shadow-color: rgba(13, 11, 12, 0.8);

    --medical-blue-color: rgb(12, 163, 250);
    --medical-blue-text-color: rgb(8, 84, 128);
    --medical-blue-white-color: rgba(21, 165, 248, 0.7);
    --medical-blue-tr-color: rgba(21, 165, 248, 0.4);
    --medical-blue-tr--color: rgba(21, 165, 248, 0.2);
    --medical-blue-tr---color: rgba(21, 165, 248, 0.034);
    --medical-red-color: rgba(231, 96, 43, 0.8);
    --medical-red-tr-color: rgba(248, 74, 21, 0.4);
    --medical-red-tr--color: rgba(248, 74, 21, 0.2);
    --medical-red-tr---color: rgba(248, 74, 21, 0.054);
    --medical-green-color: rgb(99, 250, 12);
    --medical-white-color: white;

    --medical-bgblue-color: rgba(12, 163, 250, 0.9);
    --medical-bgblue-v2-color: rgb(5, 139, 218);
    --medical-bgwhite-color: rgb(14, 150, 230);
    --medical-bgwhite-v2-color: rgba(234, 247, 255, 0.5);
    --medical-bgwhite-v3-color: rgb(231, 240, 247);
    --medical-shadow-color: rgba(19, 141, 212, 0.5);

    --medical-gray-color: rgb(203, 212, 218);
    --medical-gray-text-color: rgb(34, 43, 51);
    --medical-dark: rgb(3, 48, 73);
    --medical-dark-transparent: rgba(15, 14, 18, 0.4);
    --medical-transparent: rgba(0, 0, 0, 0.1);
    --font-family: "Poppins", sans-serif;
}

* {
    font-family: var(--font-family);

    box-sizing: border-box;
    margin: 0;
    padding: 0;

    outline: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -ms-user-select: none;
    -moz-user-select: none;

    transition: 500ms;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-track {
    background: var(--medical-gray-purple-color);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to right, rgb(188, 147, 248), rgb(146, 116, 191));
    border-radius: 4px;
}

body {
    background-image: url('assets/background/medical_tools_background_bright.svg');
    background-repeat: no-repeat;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: fixed;
    background-color: var(--medical-white-color);

    color: var(--medical-gray-text-color);

    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;

    width: 100vw;
    min-width: 250px !important;
    height: fit-content;
    min-height: 600px;

    .med-navbar {
        background: var(--medical-dark-transparent);

        color: var(--medical-blue-color);
        font-size: 1rem;

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding-left: 0px;
        padding-right: 14px;

        overflow-x: visible !important;

        box-shadow: 0px 1px 5px var(--medical-gray-purple-shadow-color);

        position: fixed;
        top: 0;
        z-index: 950;

        width: 100vw;
        min-height: 80px;
        max-height: 80px;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            backdrop-filter: blur(7px);
            z-index: -1;
        }

        .med-logo {
            font-size: 0.99rem;

            display: flex;
            align-items: center;
            justify-content: center;

            width: fit-content;
            min-width: fit-content;
            min-height: fit-content;

            img {
                height: 45px;
            }
        }

        .med-navbar-list {
            align-self: center;

            display: flex;
            align-items: center;
            justify-content: center;

            gap: 28px;

            width: fit-content;
            height: fit-content;
            min-height: 45px;

            li {
                display: flex;
                align-items: center;
                justify-content: center;

                width: fit-content;
                height: fit-content;
                min-height: 45px;

                a {
                    font-size: 0.9rem;
                    font-weight: 200;
                    text-decoration: none;
                    color: var(--medical-purple-color);

                    display: flex;
                    align-items: center;
                    justify-content: center;

                    transition: color 200ms linear;

                    text-shadow: 0px 0px 0px transparent;

                    padding: 4px;

                    cursor: pointer;

                    width: fit-content;
                    height: fit-content;
                    min-height: 45px;
                }

                a:hover {
                    color: var(--medical-white-color);

                    text-shadow: 0px 0px 3px var(--medical-white-color);
                }
            }
        }

        .med-pseudo-element {
            /* -- will dissappear on smaller screens */
            width: 200px;
            height: 0;
        }

        .med-hamburger {
            display: none;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            gap: 4px;

            cursor: pointer;

            margin-right: 14px;

            position: relative;
            z-index: 1001;

            transition: 200ms;

            width: fit-content;
            height: fit-content;
            min-height: 45px;

            .med-line {
                background: var(--medical-purple-color);

                width: 21px;
                height: 2px;
            }
        }
    }

    .med-hero-section {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        position: relative;
        overflow: hidden;

        width: 100vw;
        height: 100vh;
        min-height: 500px;

        .med-hero-info {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            width: 600px;
            height: 300px;
            min-height: 300px;

            @media (max-width: 768px) {
                width: 100%;
                padding: 0 16px;
            }

            .med-hero-title {
                color: var(--medical-white-color);
                font-size: 5rem;

                /* text-shadow: 0px 0px 5px var(--medical-white-color); */

                b {
                    color: var(--medical-purple-color);
                    /* text-shadow: 0px 0px 5px var(--medical-purple-color); */
                }

                @media (max-width: 250px) {
                    font-size: 3.5rem;
                }
            }

            .med-hero-subtitle {
                color: var(--medical-white-color);
                font-size: 1rem;
                font-weight: 300;

                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                /* text-shadow: 0px 0px 5px var(--medical-white-color); */

                @media (max-width: 350px) {
                    font-size: 1rem;
                }
            }

            .med-hero-subtitle-explainer {
                /* display: none; */

                color: var(--medical-white-color);
                text-align: center;

                font-size: 1rem;
                font-weight: 300;

                /* text-shadow: 0px 0px 5px var(--medical-white-color); */

                @media (max-width: 350px) {
                    font-size: 1rem;
                }
            }
        }

        .med-hero-buttons {
            display: flex;
            align-items: center;
            justify-content: center;

            gap: 28px;

            width: 500px;
            min-height: 100px;

            @media (max-width: 490px) {
                flex-direction: column !important;

                gap: 14px;
            }

            .med-button {
                background: linear-gradient(to bottom, rgb(188, 147, 248), rgb(146, 116, 191));
                border: none;
                border-radius: 21px;

                color: var(--medical-white-color);

                display: flex;
                align-items: center;
                justify-content: center;

                margin: 14px 0;

                cursor: pointer;

                transition: 200ms linear;

                width: 200px;
                min-width: 150px;
                height: 42px;
                min-height: 42px;
            }

            .med-button:hover {
                box-shadow: 0px 1px 14px var(--medical-purple-dk-color);
            }

            .med-button:active {
                background: linear-gradient(to bottom, rgb(162, 116, 230), rgb(113, 83, 158));
                /* box-shadow: 0px 1px 21px var(--medical-purple-dk-color); */
            }

            .open {
                background: linear-gradient(to bottom, rgb(230, 218, 248), rgb(182, 182, 183));

                color: var(--medical-purple-drk-color);
            }

            .med-button.open:active {
                background: linear-gradient(to bottom, rgb(204, 190, 227), rgb(138, 138, 144));
            }
        }
    }

    .med-about-section {
        background: var(--medical-dark-transparent);

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 28px;

        padding: 84px 14px 84px 14px;

        position: relative;
        overflow: hidden;

        width: 100vw;
        height: fit-content;

        .med-backdrop {
            background: radial-gradient(circle,
                    /* Ensures a circular gradient */
                    transparent 0%,
                    transparent 10%,
                    var(--medical-dark-transparent) 50%,
                    var(--medical-dark-transparent) 100%);

            position: absolute;
            top: 0;
            left: 0;

            z-index: 0;

            width: 100%;
            height: 100%;
        }

        .med-section-info {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;

            position: relative;
            z-index: 1;

            width: 100%;
            max-width: 900px;
            height: 100%;

            .title {
                color: var(--medical-purple-color);
                font-size: 2rem;

                /* border-bottom: 1px dashed var(--medical-purple-color); */
            }

            .info {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 21px;

                padding: 7px 14px;

                height: fit-content;
                min-height: 185px;
                /* max-height: 300px; */

                @media (max-width: 768px) {
                    grid-template-columns: 1fr;
                    padding: 7px 0;

                    .graphic {
                        order: -1;

                        justify-content: flex-start !important;
                    }
                }

                .about {
                    color: var(--medical-white-color);
                    font-size: 0.9rem;
                    font-weight: 200;

                    /* white-space: nowrap; */
                    overflow: hidden;
                    text-overflow: ellipsis;

                    width: 100%;
                    height: 100%;
                }

                .graphic {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    width: 100%;
                    height: 100%;

                    .med-section-graphic {
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        z-index: 1;

                        height: fit-content;
                        width: fit-content;

                        img {
                            height: 160px;
                        }
                    }
                }

                .med-section-card {
                    background: var(--ta-cool-black-tr);
                    backdrop-filter: blur(1px);
                    border: 1px solid var(--ta-cool-gray-tr);

                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    flex-direction: column;

                    padding: 14px;

                    width: 100%;
                    height: 100%;

                    .card-title {
                        font-size: 1rem;
                    }

                    .info {
                        font-size: 0.9rem;
                        font-weight: 200;

                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .link {
                        color: var(--ta-cool-white-tr);

                        font-size: 0.85rem;
                        font-weight: 200;
                        text-decoration: none;

                        display: flex;
                        align-items: center;
                        justify-content: center;

                        cursor: pointer;

                        margin-top: 4px;
                    }

                    .link:hover {
                        color: var(--ta-cool-white);
                        text-decoration: underline;
                    }
                }

                .med-section-card:hover {
                    /* background: var(--ta-cool-gray--tr-); */
                    background: rgba(40, 40, 42, 0.2);
                    box-shadow: 0 4px 16px rgba(123, 123, 123, 0.08);
                }
            }
        }
    }

    .med-advantages-section {
        background: var(--medical-dark-transparent);

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 28px;

        padding: 84px 14px 84px 14px;

        position: relative;
        overflow: hidden;

        width: 100vw;
        height: fit-content;

        .med-backdrop {
            background: radial-gradient(circle,
                    /* Ensures a circular gradient */
                    transparent 0%,
                    transparent 10%,
                    var(--medical-dark-transparent) 50%,
                    var(--medical-dark-transparent) 100%);

            position: absolute;
            top: 0;
            left: 0;

            z-index: 0;

            width: 100%;
            height: 100%;
        }

        .med-section-info {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;

            position: relative;
            z-index: 1;

            width: 900px;
            max-width: 900px;
            height: 100%;

            .title {
                color: var(--medical-purple-color);
                font-size: 2rem;
            }

            .title.main {
                align-self: flex-end;
            }

            .cards {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 21px;

                padding: 7px 14px;

                height: fit-content;
                min-height: 200px;
                /* max-height: 300px; */

                @media (max-width: 768px) {
                    grid-template-columns: 1fr;
                    padding: 7px 0;
                }

                .med-section-card {
                    background: transparent;
                    backdrop-filter: blur(4px);
                    border: 1px solid var(--medical-purple-dk-tr-color);
                    border-radius: 21px;

                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    flex-direction: column;

                    padding: 14px;

                    width: 100%;
                    height: 100%;

                    .title {
                        font-size: 1rem;
                    }

                    .info {
                        color: var(--medical-white-color);
                        font-size: 0.85rem;
                        font-weight: 200;

                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }

                .med-section-card:hover {
                    border: 1px solid var(--medical-purple-dk-color);
                }
            }
        }
    }

    .med-technology-section {
        background: var(--medical-dark-transparent);

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 28px;

        padding: 84px 14px 84px 14px;

        position: relative;
        overflow: hidden;

        width: 100vw;
        height: fit-content;

        .med-backdrop {
            background: radial-gradient(circle,
                    /* Ensures a circular gradient */
                    transparent 0%,
                    transparent 10%,
                    var(--medical-dark-transparent) 50%,
                    var(--medical-dark-transparent) 100%);

            position: absolute;
            top: 0;
            left: 0;

            z-index: 0;

            width: 100%;
            height: 100%;
        }

        .med-section-info {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;

            position: relative;
            z-index: 1;

            width: 100%;
            max-width: 900px;
            height: 100%;

            .title {
                color: var(--medical-purple-color);
                font-size: 2rem;
            }

            .info {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                direction: rtl;
                gap: 21px;

                padding: 7px 14px;

                height: fit-content;
                min-height: 185px;
                /* max-height: 300px; */

                @media (max-width: 768px) {
                    grid-template-columns: 1fr;
                    padding: 7px 0;

                    .graphic {
                        order: -1;

                        justify-content: flex-start !important;
                    }
                }

                .about {
                    color: var(--medical-white-color);
                    font-size: 0.9rem;
                    font-weight: 200;

                    direction: ltr;

                    /* white-space: nowrap; */
                    overflow: hidden;
                    text-overflow: ellipsis;

                    width: 100%;
                    height: 100%;
                }

                .graphic {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    width: 100%;
                    height: 100%;

                    .med-section-graphic {
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        z-index: 1;

                        height: fit-content;
                        width: fit-content;

                        img {
                            height: 160px;
                        }
                    }
                }

                .med-section-card {
                    background: var(--ta-cool-black-tr);
                    backdrop-filter: blur(1px);
                    border: 1px solid var(--ta-cool-gray-tr);

                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    flex-direction: column;

                    padding: 14px;

                    width: 100%;
                    height: 100%;

                    .card-title {
                        font-size: 1rem;
                    }

                    .info {
                        font-size: 0.9rem;
                        font-weight: 200;

                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .link {
                        color: var(--ta-cool-white-tr);

                        font-size: 0.85rem;
                        font-weight: 200;
                        text-decoration: none;

                        display: flex;
                        align-items: center;
                        justify-content: center;

                        cursor: pointer;

                        margin-top: 4px;
                    }

                    .link:hover {
                        color: var(--ta-cool-white);
                        text-decoration: underline;
                    }
                }

                .med-section-card:hover {
                    /* background: var(--ta-cool-gray--tr-); */
                    background: rgba(40, 40, 42, 0.2);
                    box-shadow: 0 4px 16px rgba(123, 123, 123, 0.08);
                }
            }
        }
    }

    .med-impact-section {
        background: var(--medical-dark-transparent);

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 28px;

        padding: 84px 14px 84px 14px;

        position: relative;
        overflow: hidden;

        width: 100vw;
        height: fit-content;

        .med-backdrop {
            background: radial-gradient(circle,
                    /* Ensures a circular gradient */
                    transparent 0%,
                    transparent 10%,
                    var(--medical-dark-transparent) 50%,
                    var(--medical-dark-transparent) 100%);

            position: absolute;
            top: 0;
            left: 0;

            z-index: 0;

            width: 100%;
            height: 100%;
        }

        .med-section-info {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;

            position: relative;
            z-index: 1;

            width: 900px;
            max-width: 900px;
            height: 100%;

            .title {
                color: var(--medical-purple-color);
                font-size: 2rem;
            }

            .title.main {
                align-self: flex-end;
            }

            .cards {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 21px;

                padding: 7px 14px;

                height: fit-content;
                min-height: 200px;
                /* max-height: 300px; */

                @media (max-width: 768px) {
                    grid-template-columns: 1fr;
                    padding: 7px 0;
                }

                .med-section-card {
                    background: transparent;
                    backdrop-filter: blur(4px);
                    border: 1px solid var(--medical-purple-dk-tr-color);
                    border-radius: 21px;

                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    flex-direction: column;

                    padding: 14px;

                    width: 100%;
                    height: 100%;

                    .title {
                        font-size: 1rem;
                    }

                    .info {
                        color: var(--medical-white-color);
                        font-size: 0.85rem;
                        font-weight: 200;

                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }

                .med-section-card:hover {
                    border: 1px solid var(--medical-purple-dk-color);
                }
            }
        }
    }

    .med-contact-section {
        background: var(--medical-dark-transparent);

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 28px;

        padding: 84px 14px 84px 14px;

        position: relative;
        overflow: hidden;

        width: 100vw;
        height: fit-content;

        .med-backdrop {
            background: radial-gradient(circle,
                    /* Ensures a circular gradient */
                    transparent 0%,
                    transparent 10%,
                    var(--medical-dark-transparent) 50%,
                    var(--medical-dark-transparent) 100%);

            position: absolute;
            top: 0;
            left: 0;

            z-index: 0;

            width: 100%;
            height: 100%;
        }

        .med-section-info {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;

            position: relative;
            z-index: 1;

            width: 100%;
            max-width: 900px;
            height: 100%;

            .title {
                color: var(--medical-purple-color);
                font-size: 2rem;
            }

            .info {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 21px;

                padding: 14px 28px !important;

                height: fit-content;
                min-height: 100px;
                /* max-height: 300px; */

                @media (max-width: 768px) {
                    grid-template-columns: 1fr;
                    padding: 7px 0;

                    .graphic {
                        order: -1;

                        justify-content: flex-start !important;
                    }
                }

                .contacts {
                    /* color: var(--medical-white-color);
                    font-size: 0.9rem;
                    font-weight: 200;
                    overflow: hidden;
                    text-overflow: ellipsis; */

                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    flex-direction: column;

                    gap: 4px;

                    width: 100%;
                    height: fit-content;

                    .text {
                        color: var(--medical-white-color);

                        font-size: 0.9rem;
                        font-weight: 200;

                        width: fit-content;
                        height: fit-content;
                    }

                    .contact {
                        color: var(--medical-purple-color);
                        text-decoration: none;

                        font-size: 0.9rem;
                        font-weight: 200;
                    }

                    .contact:hover {
                        color: var(--medical-white-color);
                        text-decoration: underline;
                    }
                }

                .graphic {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    width: 100%;
                    height: 100%;

                    .med-section-graphic {
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        z-index: 1;

                        height: fit-content;
                        width: fit-content;

                        img {
                            height: 130px;
                        }
                    }
                }

                .med-section-card {
                    background: var(--ta-cool-black-tr);
                    backdrop-filter: blur(1px);
                    border: 1px solid var(--ta-cool-gray-tr);

                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    flex-direction: column;

                    padding: 14px;

                    width: 100%;
                    height: 100%;

                    .card-title {
                        font-size: 1rem;
                    }

                    .info {
                        font-size: 0.9rem;
                        font-weight: 200;

                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .link {
                        color: var(--ta-cool-white-tr);

                        font-size: 0.85rem;
                        font-weight: 200;
                        text-decoration: none;

                        display: flex;
                        align-items: center;
                        justify-content: center;

                        cursor: pointer;

                        margin-top: 4px;
                    }

                    .link:hover {
                        color: var(--ta-cool-white);
                        text-decoration: underline;
                    }
                }

                .med-section-card:hover {
                    /* background: var(--ta-cool-gray--tr-); */
                    background: rgba(40, 40, 42, 0.2);
                    box-shadow: 0 4px 16px rgba(123, 123, 123, 0.08);
                }
            }
        }
    }

    .med-join-section {
        background: var(--medical-dark-transparent);

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 28px;

        padding: 84px 14px 84px 14px;

        position: relative;
        overflow: hidden;

        width: 100vw;
        height: fit-content;

        .med-backdrop {
            background: radial-gradient(circle,
                    /* Ensures a circular gradient */
                    transparent 0%,
                    transparent 10%,
                    var(--medical-dark-transparent) 50%,
                    var(--medical-dark-transparent) 100%);

            position: absolute;
            top: 0;
            left: 0;

            z-index: 0;

            width: 100%;
            height: 100%;
        }

        .med-section-info {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;

            position: relative;
            z-index: 1;

            width: 100%;
            max-width: 900px;
            height: 100%;

            .title {
                color: var(--medical-purple-color);
                font-size: 2rem;
            }

            .info {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 21px;

                padding: 21px 28px !important;

                height: fit-content;
                min-height: 100px;
                /* max-height: 300px; */

                @media (max-width: 768px) {
                    grid-template-columns: 1fr;
                    padding: 7px 0;

                    .graphic {
                        order: -1;

                        justify-content: flex-start !important;
                    }
                }

                .med-input {
                    background: transparent;
                    border: 1px solid var(--medical-purple-dk-color);
                    border-radius: 21px;

                    color: var(--medical-white-color);

                    padding-left: 21px;
                    padding-right: 21px;

                    width: 300px;
                    min-width: 180px;
                    height: 45px;
                    min-height: 45px;
                }

                .med-button {
                    background: linear-gradient(to bottom, rgb(188, 147, 248), rgb(146, 116, 191));
                    border: none;
                    border-radius: 21px;

                    color: white;

                    display: flex;
                    align-items: center;
                    justify-content: center;

                    cursor: pointer;

                    transition: 200ms linear;

                    width: 100%;
                    min-width: 180px;
                    height: 42px;
                    min-height: 42px;
                }

                .med-button:hover {
                    box-shadow: 0px 1px 14px var(--medical-purple-dk-color);
                }

                .med-button.success {
                    background: linear-gradient(to bottom, #2ecc71, #27ae60);
                    box-shadow: 0px 1px 14px #27ae5fbc;
                }

                .med-button.error {
                    background: linear-gradient(to bottom, #e74c3c, #c0392b);
                    box-shadow: 0px 1px 14px #c03a2ba9;
                }

                .med-button:active {
                    background: linear-gradient(to bottom, rgb(162, 116, 230), rgb(113, 83, 158));
                    /* box-shadow: 0px 1px 21px var(--medical-purple-dk-color); */
                }

                .graphic {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    width: 100%;
                    height: 100%;

                    .med-section-graphic {
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        z-index: 1;

                        height: fit-content;
                        width: fit-content;

                        img {
                            height: 130px;
                        }
                    }
                }

                .med-section-card {
                    background: var(--ta-cool-black-tr);
                    backdrop-filter: blur(1px);
                    border: 1px solid var(--ta-cool-gray-tr);

                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    flex-direction: column;

                    padding: 14px;

                    width: 100%;
                    height: 100%;

                    .card-title {
                        font-size: 1rem;
                    }

                    .info {
                        font-size: 0.9rem;
                        font-weight: 200;

                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .link {
                        color: var(--ta-cool-white-tr);

                        font-size: 0.85rem;
                        font-weight: 200;
                        text-decoration: none;

                        display: flex;
                        align-items: center;
                        justify-content: center;

                        cursor: pointer;

                        margin-top: 4px;
                    }

                    .link:hover {
                        color: var(--ta-cool-white);
                        text-decoration: underline;
                    }
                }

                .med-section-card:hover {
                    /* background: var(--ta-cool-gray--tr-); */
                    background: rgba(40, 40, 42, 0.2);
                    box-shadow: 0 4px 16px rgba(123, 123, 123, 0.08);
                }
            }
        }
    }

    .med-footer {
        background: var(--medical-dark-transparent);

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100vw;
        min-height: 70px;
        max-height: 70px;

        @media (max-width: 900px) {
            flex-direction: column;
        }

        .logo {
            color: var(--medical-white-color);

            font-size: 0.9rem;

            b {
                color: var(--medical-purple-color);
            }
        }

        .copyright {
            color: var(--medical-white-color);

            font-size: 0.9rem;
            font-weight: 200;
        }
    }
}

.med-separator {
    background: radial-gradient(ellipse 100% 1px at center, var(--medical-purple-color) 0%, transparent 100%);

    min-width: 250px;
    max-width: 900px;
    height: 1px;
}

.med-hamburger.is-active .med-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.med-hamburger.is-active .med-line:nth-child(2) {
    opacity: 0;
}

.med-hamburger.is-active .med-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 900px) {
    .med-navbar-list {
        background: var(--medical-dark-transparent) !important;
        backdrop-filter: blur(7px);
        /* border: 1px solid var(--medical-purple-color); */
        border-radius: 21px;

        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        position: fixed;
        top: 91px;
        right: 10px;
        z-index: 900 !important;

        box-shadow: 0px 1px 5px var(--medical-gray-purple-shadow-color);
        transform: translateX(150%);

        padding: 14px;

        min-width: 200px;
        height: fit-content;
    }

    .med-navbar-list.open {
        display: flex !important;
        transform: translate(0);
    }

    .med-hamburger {
        display: flex !important;
    }

    .med-pseudo-element {
        display: none !important;
    }

    .med-hero-info {
        padding: 0 28px !important;
        width: 100%;
    }
}