﻿@media (min-width: 768px) {
    .header-wrapper {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
    }

    .header-container {
        height: calc(8.82vw);
        background-color: white;
        border-bottom: 1px solid rgb(251,249,242);
        box-shadow: 0 0.25em 0.6em 0 rgba(0,0,0,0.25);
        width: 100%;
    }

    .nav-icon-container {
        height: 100%;
        padding-right: 0;
        padding-left: 3.9%;
    }

    .nav-icon-image-container {
        height: 100%;
    }

        .nav-icon-image-container > img {
            position: relative;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            width: 100%;
            height: auto;
        }

    .nav-main-row {
        height: 100%;
    }

    .main-link-container, .social-media-container {
        text-align: right;
        margin-top: calc(1vw);
    }

    .ul-social-media-links {
        list-style: none;
        display: inline-flex;
        align-items: center;
        gap: calc(1.2vw);
        padding: calc(0.8vw) calc(1.2vw);
        margin: 0;
        margin-left: auto;
    }

        .ul-social-media-links li {
            display: inline-block;
        }

        .ul-social-media-links a {
            color: #000;
            text-decoration: none;
            display: flex;
            align-items: center;
        }

            .ul-social-media-links a:hover {
                opacity: 0.7;
            }

        .ul-social-media-links svg {
            fill: #000;
            width: calc(1.35vw);
            height: calc(1.35vw);
        }

    /*Dropdown Styling*/
    /* The container <div> - needed to position the dropdown content */
    .dropdown {
        position: relative;
        display: inline-block;
        text-align: left;
        height: 100%;
        padding-bottom: calc(1.4vw);
        margin-right: calc(1vw);
    }

        .dropdown a {
            color: black;
            font-size: calc(1.2vw);
            font-weight: bold;
            text-decoration: none;
        }

            .dropdown a:hover, .dropdown.dropdown-active > a {
                border-bottom: 2px solid #326295;
            }           

        /* Down arrow span after links */
        .dropdown a > span {
            vertical-align: middle;
            margin-left: calc(0.3vw);
            font-size: calc(1vw);
        }

    /* Full-width dropdown panels */
    .dropdown-panel {
        display: none;
        position: absolute;
        top: calc(8.82vw);
        left: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.98);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 999;
    }

    .dropdown-panel.active {
        display: flex;
        justify-content: center;
    }

    .dropdown-panel-inner {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-top: calc(2vw);
        padding-bottom: calc(2vw);
        gap: calc(2vw);
        margin: 0 auto;
    }

    .dropdown-right-container {
        display: flex;
        flex-direction: column;
        margin-top: calc(0.5vw);
        gap: calc(1.2vw);
    }

    /* Links inside the dropdown */
    .dropdown-right-container a {
        color: black;
        font-size: calc(1.2vw);
        font-weight: bold;
        text-decoration: none;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
    }

        .dropdown-right-container a > span {
            margin-left: calc(0.3vw);
        }

        .dropdown-right-container a:hover {
            border-bottom: none !important;
        }

    .dropdown-left-container {
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    .dropdown-title {
        font-size: calc(2.4vw);
        white-space: nowrap;
    }

    /* Divider */
    .header-dropdown-divider {
        display: block;
        width: 2px;
        background-color: lightgray;
        opacity: 0.9;
        flex-shrink: 0;
    }

}
