/* ==========================
   GLOBAL HEADER
========================== */

/* =========================================================
   EASY-TO-CHANGE SITE SETTINGS
   ========================================================= */

:root {
    --font-main: "Lato", sans-serif;
    --header-text: #000000;
    --footer-bg: #24789d;
    --footer-text: #ffffff;
    --desktop-content-width: 1315px;
}


/* =========================================================
   RESET / GLOBAL
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    min-width: 320px;    
}


button,
input,
textarea,
select {
    font: inherit;
}


a {
    color: inherit;
    text-decoration: none;
}


img {
    display: block;
    max-width: 100%;
}


/* =========================================================
 HEADER
   ========================================================= */


.header {
    background: #ffffff;
}

.header-inner {
    background-color: #ffffff;
font-family: "Lato", sans-serif !important;
}



.site-header {

    position: absolute;

    z-index: 20;

    top: 0;
    left: 0;

    width: 100%;

    color:
        var(--header-text);
}


.header-inner {
    background-color: #FFFFFF;

    height: 56px;

    margin:
        0 auto;

    display: flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        0 32px;
}


.brand {

font-family: "Lato", sans-serif !important;

    flex:
        0 0 auto;

    font-size:
        20px;

    line-height:
        1;

    font-weight:
        400;

    white-space:
        nowrap;
}


.desktop-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        25px;

    margin-left:
        auto;
}


.desktop-nav a {
 
font-family: "Lato", sans-serif !important;

    position:
        relative;

    font-size:
        16px;

    line-height:
        1;

    font-weight:
        400;

    transition:
        opacity 0.2s ease;
}


.desktop-nav a:hover,
.desktop-nav a:focus-visible {
    opacity: 0.75;
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.menu-button {

    display:
        none;

    position:
        relative;

    width:
        24px;

    height:
        20px;

    flex:
        0 0 24px;

    padding:
        0;

    border:
        0;

    color:
        #000000;

    background:
        transparent;

    cursor:
        pointer;
}


.menu-button span,
.menu-button::before,
.menu-button::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    width:
        21px;

    height:
        2px;

    border-radius:
        99px;

    background:
        currentColor;

    transition:
        transform 0.2s ease,
        top 0.2s ease,
        opacity 0.2s ease;
}


.menu-button::before {
    top: 2px;
}


.menu-button span {
    top: 9px;
}


.menu-button::after {
    top: 16px;
}


.menu-button.is-open::before {

    top:
        9px;

    transform:
        rotate(45deg);
}


.menu-button.is-open span {
    opacity: 0;
}


.menu-button.is-open::after {

    top:
        9px;

    transform:
        rotate(-45deg);
}


/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

.mobile-menu {

    position:
        absolute;

    z-index:
        19;

    top:
        56px;

    left:
        0;

    width:
        100%;

    padding:
        8px
        20px
        18px;

    display:
        none;

    background:
        rgba(
            3,
            70,
            121,
            0.98
        );

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.16
        );

    box-shadow:
        0 8px 18px
        rgba(
            0,
            0,
            0,
            0.12
        );
}


.mobile-menu.is-open {
    display: block;
}


.mobile-menu a {

font-family: "Lato", sans-serif !important;

    display:
        block;

    padding:
        11px 3px;

    color:
        #ffffff;

    font-size:
        14px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );
}


.mobile-menu a:last-child {
    border-bottom: 0;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {

    min-height:
        83px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        26px 74px;

    position:
        relative;

    color:
        var(--footer-text);

    background:
        var(--footer-bg);
}


.footer-copy {

font-family: "Lato", sans-serif;

    margin:
        0;

    text-align:
        center;

    font-size:
        12px;

    line-height:
        1.5;

    font-weight:
        400;
}


.footer-copy strong {
    font-weight: 700;
}


/* =========================================================
   BACK TO TOP
   ========================================================= */

.back-to-top {

    position:
        absolute;

    right:
        29px;

    top:
        22px;

    width:
        30px;

    height:
        30px;

    border:
        0;

    border-radius:
        0;

    display:
        grid;

    place-items:
        center;

    color:
        #ffffff;

    background:
        #0568dc;

    cursor:
        pointer;

    transition:
        opacity 0.2s ease;
}


.back-to-top:hover,
.back-to-top:focus-visible {
    opacity: 0.82;
}


.back-to-top svg {

    width:
        13px;

    height:
        13px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        2.1;
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (
    max-width: 767px
) {
    .header-inner {

        width:
            100%;

        height:
            48px;

        padding:
            0 18px
            0 23px;

        justify-content:
            flex-start;

        gap:
            10px;
    }


    .menu-button {
        display:
            inline-block;
    }


    .brand {

        font-size:
            17px;

        line-height:
            1;
    }


    .desktop-nav {
        display:
            none;
    }


    .mobile-menu {
        top:
            48px;
    }



    .site-footer {

        min-height:
            82px;

        padding:
            24px
            56px
            24px
            22px;
    }


    .footer-copy {

        font-size:
            9px;
    }


    .back-to-top {

        right:
            14px;

        top:
            21px;
    }
}


/* =========================================================
   EXTRA SMALL MOBILE
   ========================================================= */

@media (
    max-width: 380px
) {

    .header-inner {

        padding-left:
            23px;

        padding-right:
            18px;
    }


    .brand {

        font-size:
            17px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    html {
        scroll-behavior:
            auto;
    }


    *,
    *::before,
    *::after {

        transition-duration:
            0.01ms !important;
    }
}