:root {
    --main-header-bg-color: #000;
    --main-header-color: #A9A9A9;
    --main-header-accent-color: #fff;
    --main-header-imh-height: 76px;
    --main-header-icons-size: 32px;
    --main-nav-bg-color: rgba(20, 22, 25, 0.49);
    --main-nav-bg-color-active: linear-gradient(90deg, #002F6C 1.21%, #0071CD 99.88%);
    --main-nav-color: #fff;
}

.main-header-2 {
    top: 0;
    padding-block: 8px;
}

.main-header-2 {
    background-color: var(--main-header-bg-color);
    color: var(--main-header-color);
}

    .main-header-2 a {
        color: var(--main-header-color);
    }

    .main-header-2 .accent-color {
        color: var(--main-header-accent-color);
    }

    .main-header-2 header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 24px;
    }


.user-info {
    display: flex;
    align-items: center;
    column-gap: 8px;
    font-size: 12px;
    flex: 1;
    line-height: 1.2;
}

    .user-info > div {
        display: grid;
        gap: 0.8rem;
    }

    .user-info .user-name {
        font-size: 20px;
        font-weight: bold;
    }

    .user-info img {
        max-width: var(--main-header-imh-height);
        max-height: var(--main-header-imh-height);
        width: 100%;
        height: 100%;
        aspect-ratio: 1;
        border-radius: 50%;
        object-fit: cover;
    }

    .header-info .header-info-actions {
        display: flex;
        gap: 8px;
        align-items: center;
        justify-content: center;
    }

        .header-info .header-info-actions > a {
            width: var(--main-header-icons-size);
            aspect-ratio: 1;
            display: grid;
            place-content: center;
            border: 1px solid;
            border-radius: 50%;
        }

.header-info-actions .icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}


.dealer-info {
    display: flex;
    flex: 1;
}

    .dealer-info .dealer-logo {
        height: var(--main-header-imh-height);
        margin-left: auto;
    }


.main-nav {
    --padding-block: 8px;
    background: var(--main-nav-bg-color);
    transition: all 0.3s, top 0s;
}

    .main-nav.fixed {
        position: fixed;
        top: 0;
        z-index: 999;
    }

    .main-nav .nav-wrapper {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas: 'user nav'
    }

    .main-nav nav {
        display: flex;
        flex-wrap: wrap;
        flex: 1;
        align-items: center;
        justify-content: space-evenly;
        grid-area: nav;
    }

        .main-nav nav > * {
            padding-block: var(--padding-block);
        }

        .main-nav nav .dropdown > a {
            display: flex;
            align-items: center;
            gap: 4px;
            justify-content: center;
        }

        .main-nav nav > a, .main-nav nav .dropdown > a,
        .main-nav .user-info {
            color: var(--main-nav-color);
        }

        .main-nav nav > a, .main-nav nav .dropdown > a {
            font-weight: bold;
            text-align: center;
            text-transform: uppercase;
        }

        .main-nav nav .dropdown:last-of-type .dropdown-menu{
            right:0;
            left: auto;
        }

        .main-nav .user-info {
            display: none;
            grid-area: user
        }

    .main-nav:has(.user-info.visible) {
        padding-block: var(--padding-block);
    }

        .main-nav:has(.user-info.visible) nav > * {
            /*padding: 0;*/
        }

    .main-nav .user-info.visible {
        display: flex;
    }

    .main-nav.colored {
        background: var(--main-nav-bg-color-active);
    }

    .main-nav .navbar-toggle {
        display: none;
        grid-area: menu-button;
        margin: 0;
        border-color: var(--main-nav-color);
    }

        .main-nav .navbar-toggle > .icon-bar {
            background-color: var(--main-nav-color);
        }

@media (max-width: 880px) {
    .main-nav.fixed .navbar-toggle {
        display: block;
    }

    .main-nav nav {
        transition: max-height 0.3s cubic-bezier(0, 0, 0.2, 1);
    }

    .main-nav.fixed nav {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        visibility: hidden;
        opacity: 0;
        max-height: 0px;
    }

        .main-nav.fixed nav.opened{
            max-height: 500px;
            opacity: 1;
            visibility: visible;
        }

    .main-nav.fixed .nav-wrapper {
        grid-template-columns: 1fr auto;
        grid-template-areas: 'user menu-button' 'nav nav';
        align-items: center;
    }

    .main-nav.fixed nav .dropdown:last-of-type .dropdown-menu{
        left: 0;
        right: unset;
    }
}

@media (max-width: 665px) {
    .main-header-2 .user-info,
    .main-header-2 .header-info {
        display: none !important;
    }

    .main-header-2 .dealer-info .dealer-logo {
        margin-inline: auto;
    }

    .main-nav {
        position: relative;
        top: 0;
        z-index: 999;
        background: var(--main-nav-bg-color-active);
    }

    .main-nav .user-info {
        display: flex;
    }

    .main-nav:has(.user-info) {
        padding-block: var(--padding-block);
    }


    .main-nav .nav-wrapper {
        grid-template-columns: 1fr auto;
        grid-template-areas: 'user menu-button' 'nav nav';
        align-items: center;
    }

        .main-nav nav {
            position: absolute;
            z-index: 2;
            left: 0;
            right: 0;
            top: 100%;
            flex-direction: column;
            align-items: flex-start;
            flex-wrap: nowrap;
            border-top: 1px solid rgb(255 255 255 / 8%);
            background: var(--main-nav-bg-color-active);
            visibility: hidden;
            opacity: 0;
            max-height: 0;
            border: none;
            margin: 0;
            
        }

            .main-nav nav.opened {
                visibility: visible;
                opacity: 1;
                max-height: 500px;
            }

        .main-nav nav > * {
            width: 100%;
            padding-left: 34px;
        }

        .main-nav nav .dropdown > a {
            justify-content: flex-start;
        }
            .main-nav nav .dropdown:last-of-type .dropdown-menu {
                left: 0;
                right: unset;
            }

        .main-nav nav > a,
        .main-nav nav .dropdown > a {
            text-align: left;
        }

    .main-nav .navbar-toggle {
        display: block;
    }
            
            
}

/* it is neccessary to compartible with old header for the companies websites header */
body:has(.main-nav) .page-title{
    margin-top: 0 !important; 
}