/*type*/

:root{
    --heading-font-family-1: 'Montserrat', sans-serif;
    --menu-font-family-1: 'Montserrat', sans-serif;
    --controller-font-family-1: 'Montserrat', sans-serif;
    --body-font-family-1: 'Open-Sans', sans-serif;
    --body-p-font-size: 1.1rem;
    --body-p-big-font-size: 1.25rem;
    --base-h-font-size: 3.25rem;
    --subh-multiplier: .5;

    --h1-font-size: calc(var(--base-h-font-size)*1);
    --h1-sub-font-size: calc(var(--h1-font-size)*.55);

    --h2-font-size: calc(var(--base-h-font-size)*.88);
    --h2-sub-font-size: calc(var(--h2-font-size)*.55);

    --h3-font-size: calc(var(--base-h-font-size)*.72);
    --h3-sub-font-size: calc(var(--h3-font-size)*.50);

    --h4-font-size: calc(var(--base-h-font-size)*.64);

    --h5-font-size: calc(var(--base-h-font-size)*.52);

    --h6-font-size: calc(var(--base-h-font-size)*.40);

    --footer-font-family-1: 'Open-Sans', sans-serif;
    --footer-p-font-size: 1.1rem;
    --test: var(--);
}

html{
    font-size: 16px !important;
}

#primary-menu .menu-text{
    font-family: var(--menu-font-family-1);
    font-weight: 400;
    font-size: 1rem;
    text-align: left;
}

/* mobile menu */
#mobile-menu.mobile-main-nav li > a .menu-text{
    font-family: var(--menu-font-family-1);
    font-weight: 700;
    font-size: 1.2rem;
}
#mobile-menu.mobile-main-nav li .sub-nav > li > a .menu-text{
    font-family: var(--menu-font-family-1);
    font-weight: 700;
    font-size: 1rem;
}
#mobile-menu.mobile-main-nav > li.has-children > a:after, 
#mobile-menu.mobile-main-nav .next-level-button svg, 
#mobile-menu.mobile-main-nav > li.menu-item-language > a:after{
    color: rgba(51, 51, 51, 0.803);
    fill: rgb(0 0 0 / 70%);
}
#mobile-menu .next-level-button svg {
    width: 20px;
}
#mobile-menu .sub-nav>li, 
#mobile-menu.mobile-main-nav .dt-mega-menu.mega-auto-width .sub-nav .dt-mega-parent {
    padding-block: 10px !important;
    width: 100%;
}
/**/


.page-title :is(h1 , .page-title-breadcrumbs li span){
    font-family: var(--heading-font-family-1);
}

.page-title h1{
    font-size: var(--h1-font-size);
    line-height: 1.05em;
}

.page-title :is(.breadcrumbs,.breadcrumbs a, h1){
    color: white;
}

#main :is(h1,h2,h3,h4,h5,h6){
    font-family: var(--heading-font-family-1) !important;
    margin-top: 0;
}

#main h1{
    font-size: var(--h1-font-size);
    font-weight: 500;
    color: var(--color-1);
    line-height: 1.1em;
    text-transform: uppercase;
}
#main h1+h1{
    font-size: var(--h1-sub-font-size);
    color: var(--color-1);
    text-transform: none;
    color:var(--color-p);
    line-height: 1.1em;
}

#main h2{
    font-size: var(--h2-font-size);
    line-height: 1.1em; 
    font-weight: 500;
    color: var(--color-1);
    text-transform: uppercase;
}
#main h2+h2{
    font-size: var(--h2-sub-font-size);
    color: var(--color-1);
    text-transform: none;
    color:var(--color-p);
    line-height: 1.1em;
}

#main h3{
    font-size: var(--h3-font-size);
    line-height: 1.1em;
    font-weight: 500;
    color: var(--color-1);
    text-transform: uppercase;
}
#main h3+h3{
    font-size: var(--h3-sub-font-size);
    color: var(--color-1);
    text-transform: none;
    color:var(--color-p);
}

#main h4{
    font-size: var(--h4-font-size);
    font-weight: 500;
    line-height: 1.1em;
    color: var(--color-1);
}

#main h5{
    font-size: var(--h5-font-size);
    font-weight: 500;
    line-height: 1.1em; 
    color: var(--color-1);
}

#main h6{
    font-size: var(--h6-font-size);
    font-weight: 500;
    line-height: 1.1em; 
    color: var(--color-1);
}

#main p{
    font-family: var(--body-font-family-1) !important;
    font-size: var(--body-p-font-size) !important;
    color: var(--color-p) !important;
}

#main ul > li{
    font-family: var(--body-font-family-1) !important;
    font-size: var(--body-p-font-size) !important;
    color: var(--color-p) !important;
}

/**************************************************************************/
/* project detail pages */
/**************************************************************************/

.gbl-section-project-details #gbl-row-location h4{
    font-size: calc(var(--h4-font-size) * .8);
}

/**************************************************************************/
/* footer */
/**************************************************************************/


#footer .widget p{
    font-family: var(--footer-font-family-1);
    font-size: var(--footer-p-font-size);
    color: white;
}


@media screen and (max-width: 992px) {
    
}

@media screen and (max-width: 768px) {

    :root{
        --base-h-font-size: 2.5rem;

        --h1-font-size: calc(var(--base-h-font-size)*1);
        --h1-sub-font-size: calc(var(--h1-font-size)*.55);

        --h2-font-size: calc(var(--base-h-font-size)*.88);
        --h2-sub-font-size: calc(var(--h2-font-size)*.55);

        --h3-font-size: calc(var(--base-h-font-size)*.72);
        --h3-sub-font-size: calc(var(--h3-font-size)*.80);

        --h4-font-size: calc(var(--base-h-font-size)*.64);

        --h5-font-size: calc(var(--base-h-font-size)*.52);

        --h6-font-size: calc(var(--base-h-font-size)*.40);
    }

    .page-title-responsive-enabled.page-title h1{
        font-family: var(--heading-font-family-1);
        font-size: var(--h1-font-size);
        line-height: 1.05em;
    }

    .page-title :is(.breadcrumbs,.breadcrumbs a, h1){
        color: white;
    }

    #main :is(h1,h2,h3,h4,h5,h6){
    font-family: var(--heading-font-family-1) !important;
    }

    #main h1{
        font-size: var(--h1-font-size);
        font-weight: 500;
        color: var(--color-1);
        line-height: 1.1em;
        text-transform: uppercase;
    }
    #main h1+h1{
        font-size: var(--h1-sub-font-size);
        color: var(--color-1);
        text-transform: none;
        color:var(--color-p);
        line-height: 1.1em;
    }

    #main h2{
        font-size: var(--h2-font-size);
        line-height: 1.1em;
        font-weight: 500;
        color: var(--color-1);
        text-transform: uppercase;
    }
    #main h2+h2{
        font-size: var(--h2-sub-font-size);
        color: var(--color-1);
        text-transform: none;
        color:var(--color-p);
        line-height: 1.1em;
    }

    #main h3{
        font-size: var(--h3-font-size);
        line-height: 1.1em;
        font-weight: 500;
        color: var(--color-1);
        text-transform: uppercase;
    }
    #main h3+h3{
        font-size: var(--h3-sub-font-size);
        color: var(--color-1);
        text-transform: none;
        color:var(--color-p);
        line-height: 1.1em;
    }

    #main h4{
        font-size: var(--h4-font-size);
        font-weight: 500;
        line-height: 1.1em;
        color: var(--color-1);
    }

    #main h5{
        font-size: var(--h5-font-size);
        font-weight: 500;
        line-height: 1.1em; 
        color: var(--color-1);
    }

    #main h6{
        font-size: var(--h6-font-size);
        font-weight: 500;
        line-height: 1.1em; 
        color: var(--color-1);
    }
}