:root {
    --paw-primary: #087F8C;
    --paw-primary-dark: #075E68;
    --paw-primary-light: #20A4A8;
    --paw-accent: #F4B942;
    --paw-background: #F5FAFA;
    --paw-surface: #FFFFFF;
    --paw-text: #173238;
}

/* Porto Primary */
section.bg-primary {
    background-color: var(--paw-primary) !important;
    background-image: none !important;
}

/* Header */
#header .header-body {
    background-color: var(--paw-primary) !important;
}

#header .header-nav-main nav > ul > li > a {
    color: #FFFFFF !important;
}

    #header .header-nav-main nav > ul > li > a:hover,
    #header .header-nav-main nav > ul > li > a.active {
        color: var(--paw-accent) !important;
    }

#header .header-nav-line nav > ul > li > a:before {
    background-color: var(--paw-accent) !important;
}

#header .header-btn-collapse-nav {
    background-color: var(--paw-primary-dark) !important;
    border-color: var(--paw-primary-dark) !important;
}
#header .header-nav-line.header-nav-bottom-line nav > ul > li > a:before {
    background-color: var(--paw-accent) !important;
}

#header .header-btn-collapse-nav {
    color: var(--paw-accent) !important;
}

    #header .header-btn-collapse-nav:hover,
    #header .header-btn-collapse-nav:focus {
        color: #FFFFFF !important;
    }

@media (max-width: 991px) {

    #header .header-nav-main nav > ul > li > a {
        color: var(--paw-text) !important;
        background-color: #FFFFFF !important;
    }

        #header .header-nav-main nav > ul > li > a:hover,
        #header .header-nav-main nav > ul > li > a:focus {
            color: var(--paw-accent) !important;
            background-color: #FFFFFF !important;
        }
}

@media (min-width: 992px) {

    html.sticky-header-active #header .header-nav-main nav > ul > li > a {
        color: #FFFFFF !important;
    }

        html.sticky-header-active #header .header-nav-main nav > ul > li > a:hover,
        html.sticky-header-active #header .header-nav-main nav > ul > li > a:focus,
        html.sticky-header-active #header .header-nav-main nav > ul > li > a.active {
            color: var(--paw-accent) !important;
        }

    html.sticky-header-active #header .header-nav-line nav > ul > li > a:before {
        background-color: var(--paw-accent) !important;
    }
}
@media (min-width: 992px) {

    html.sticky-header-active #header .header-nav-main nav > ul > li:hover > a:before {
        background: var(--paw-accent) !important;
    }
}