.hide-on-mobile{
    display: none;
}
header {
    background-color: var(--primary-dark);

    & .container {
        padding: 0 calc(var(--base-sm-padding) * 2);
        & > .row.col2{
            flex-direction: row;
            align-items: center;
        }
    }
    
    & .col2 .col.logo {
        width: calc(var(--base-width) * 70/100);
        max-width: calc(var(--base-width) * 70/100);
        & a{ width: min-content; display: flex;}
        & a img {
            height: 80px;
            width: inherit;
            max-width: 180px;
            object-fit: contain;
        }
    }

    & .col2 .col.headerInfo {
        width: calc(var(--base-width) * 30/100);
        max-width: calc(var(--base-width) * 30/100);
        & .headerCol {
            display: flex;
            justify-content: flex-end;
            align-content: flex-end;
            & .col{
                max-width: max-content;
                margin-left: var(--base-sm-margin);
                &:nth-child(1) a {
                    font-size: calc(var(--base-font-size) * 1.20);
                    line-height: var(--base-line-height);
                    color: var(--white-color);
                }
                &:nth-child(3) {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    align-items: center;
                    column-gap: var(--base-sm-margin);
                    & a {
                        display: block;
                        text-align: var(--base-text-align-right);
    
                        & i {
                            font-size: calc(var(--base-font-size) * 2);
                            color: var(--white-color);
                        }
                    }
                }
            }
        }
    }

    & nav {
        background-color: var(--nav-primary-bg);
        border-top: var(--base-border);
        border-bottom: var(--base-border);
        & .container{
            padding: 0;
        }
    }
}
@media (min-width: 375px){
    header {
        & .col2 .col.logo {
            & a img {
                max-width: 220px;
            }
        }
    }
}
@media (min-width: 425px){
    header {
        & .col2 .col.logo {
            & a img {
                max-width: 280px;
            }
        }
    }
}
/* 6. EXTRA LARGE (480px+) */
@media (min-width: 480px){
    header {
        & .container {
            padding: 0 calc(var(--base-sm-padding) * 2);
        }
    }
}
@media (min-width: 768px){
    header{
        & .col2 .col.logo,
        & .col2 .col.headerInfo {
            width: calc(var(--base-width) * 50/100);
            max-width: calc(var(--base-width) * 50/100);
        }
        & .col2 .col.headerInfo {
            & .headerCol{
                flex-direction: row;
                & .col{
                    &:nth-child(2) {
                        display: block;
                    }
                }
            }
        }
    }
}
@media (min-width: 1024px){
    .hide-on-mobile { display: flex; }
    header{
        & .col2 .col.logo {
            width: calc(var(--base-width) * 25/100);
            max-width: calc(var(--base-width) * 25/100);
        }

        & .col2 .col.headerInfo {
            width: calc(var(--base-width) * 75/100);
            max-width: calc(var(--base-width) * 75/100);
        }
    }
}
@media (min-width: 1200px){
    header{
        .container{
            width: var(--base-max-width);
            max-width: var(--base-max-width);
        }
    }
}
@media (min-width: 1440px){
    header{
        .container{
            width: var(--base-width);
            max-width: var(--base-max-width);
        }
    }
}