@media (min-width: 992px) {

    .site-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .site-nav-wrap .site-nav ul.main-nav {
        display: flex;
        margin: 0;
        padding: 0;
        background-color: transparent;
        white-space: normal;
    }

    .site-nav ul.main-nav > li {
        display: flex;
        margin: 0;
        margin-top: 8px;
        font-size: 16px;
    }

    .site-nav ul.main-nav > li > a {
        position: relative;
        left: -8px;
        color: white;
        padding-right: 28px; 
        transition: background-color 0.3s; 
        white-space: nowrap;
    }
    
    .site-nav ul.main-nav > li > a::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        background: url('/resources/images/nav25/Deltoid.svg') no-repeat center center;
        transform: translateY(-50%) rotate(180deg);
        background-size: contain;
        transition: transform 0.3s;
    }
    
    .site-nav ul.main-nav > li.hover > a::after {
        transform: translateY(-50%) ;
    }

    .site-nav ul.main-nav > li > a > span {
        position: relative;
        left: 8px;
        line-height: 51px;
        height: 100%;
    }

    .site-nav ul.main-nav > li.hover > a:hover,
    .site-nav ul.main-nav > li > span:hover {
        background-color: #0f2947;;
    }

    ul.main-nav > li > ul {
        position: absolute;
        left: 0;
        top: 110px;
        z-index: 49; 
        width: 100%;
        background-color: white;
        text-align: left;
        display: none;
    }

    ul.main-nav li.cta {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        border-radius: 4px;
        width: 232px;
        height: 256px;
        background-color: white;
        box-shadow: 0 0.9px 2px #00000040;
    }

    ul.main-nav > li > ul > li > ul > li.cta > a,
    ul.main-nav > li > ul > li.cta > a { 
        display: flex;
        gap: 22px;
        padding: 25px 20px;
        justify-content: center;
        text-align: center;
        position: relative;
        width: 100%;
        height: 100%;
        font-weight: bold;
        color: #24272E;
        font-size: 20px;
        line-height: 20px;
        z-index: 50;
    }

    ul.main-nav li.cta > .card-image {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: 200px;
        background-repeat: no-repeat;
        background-position: center bottom 28px;
        transition: transform 0.3s ease-in-out;
        z-index: 49;
    }

    ul.main-nav > li > ul > li.cta > a:hover + .card-image, 
    ul.main-nav > li > ul > li > ul > li.cta > a:hover + .card-image {
        transform: scale(1.1);
    }

    ul.main-nav li.sec {
        width: 200px;
    }

    ul.main-nav li.sec a {
        display: flex;
        align-items: center;
        font-weight: bold;
        gap: 10px;
        padding: 5px 0 5px 10px;
        transition: background-color 0.3s;
    }

    li.highlight > a {
        font-weight: 700 !important;
    }

    ul.main-nav li.sec > ul > li > a:hover,
    li.highlight > ul > li > a:hover {
        background-color: #D0D4D9;
    }

    ul.main-nav li.sec li a {
        font-weight: normal;
    }

    .nav-cta-button {
        width: 200px;
        height: 44px;
        border: 1px solid #FC5609;
        background-color: #FC5609;
        box-shadow: 0px 0.9px 2px #24272E40;
        border-radius: 4px;
        color: white !important;
        text-align: center;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        text-shadow: 0px 1px 1px #00000040;
        letter-spacing: 0.4px;
    }

    .nav-cta-button:hover {
        background: linear-gradient(to bottom, #FF994E 0%, #FC5609 100%);
        color: white;
        cursor: pointer;
        text-decoration: none;
        text-shadow: 0 0.9px 1.8px rgba(0, 0, 0, 0.25);
    }

    .site-nav ul.main-nav li li a {
        color: #24272E;
    }

    ul.main-nav li li.blue a {
        color: #0096FF;
    }
}

@media (min-width: 1201px) {

    .site-nav ul.main-nav > li > a {
        padding-right: 34px; 
    }

    ul.main-nav li.cta {
        width: 276px;
        height: 256px;
    }
}