/* =====================================================
   MAIN CONTAINER
===================================================== */

.container{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding:0 10px;

    box-sizing:border-box;
}


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

.top-header{

    background:
    linear-gradient(
        135deg,
        #0173F8 0%,
        #0065DE 50%,
        #004FB8 100%
    );

    color:#fff;

}


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

.header-inner{

    min-height:140px;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    padding:15px 10px;

}


/* =====================================================
   LOGO
===================================================== */

.site-logo{

    display:block;

    width:auto;

    height:110px;

    flex-shrink:0;

}


/* =====================================================
   BRAND TEXT BLOCK
===================================================== */

.brand-text{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    line-height:1.2;

}


/* =====================================================
   WEBSITE NAME
===================================================== */

.site-name{

    margin:0;

    padding:0;

    color:#fff;

    font-family:Arial,Helvetica,sans-serif;

    font-size:44px;

    font-weight:900;

    letter-spacing:.5px;

    line-height:1.15;

    text-align:center;

    text-shadow:0 2px 4px rgba(0,0,0,.25);

}


/* =====================================================
   WEBSITE URL
===================================================== */

.site-url{

    display:block;

    margin-top:6px;

    padding:0;

    color:#eaf3ff;

    font-family:Arial,Helvetica,sans-serif;

    font-size:18px;

    font-weight:600;

    line-height:1.2;

    letter-spacing:.3px;

    text-align:center;

    text-decoration:none;

}


/* URL HOVER */

.site-url:hover{

    color:#fff;

    text-decoration:underline;

}


/* =====================================================
   NAVBAR
===================================================== */

.menu-bar{

    width:100%;

    background:#eb0000;

    border-top:1px solid #222;

    position:relative;

}


/* =====================================================
   DESKTOP MENU
===================================================== */

.menu-inner{

    max-width:1200px;

    margin:0 auto;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow-x:auto;

    white-space:nowrap;

    gap:0;

}


/* Hide scrollbar */

.menu-inner::-webkit-scrollbar{

    display:none;

}


/* =====================================================
   MENU ITEM
===================================================== */

.menu-item{

    color:#fff;

    padding:10px 20px;

    border-right:2px solid #fff;

    font-size:16px;

    font-weight:600;

    line-height:1.3;

    text-decoration:none;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}


/* Last menu */

.menu-item:last-child{

    border-right:none;

}


/* =====================================================
   MENU HOVER
===================================================== */

.menu-item:hover{

    background:#fff;

    color:#08009d;

    text-decoration:none;

}


/* =====================================================
   HAMBURGER BUTTON
===================================================== */

.hamburger-btn{

    display:none;

    width:42px;

    height:42px;

    margin-left:auto;

    padding:0;

    border:0;

    outline:none;

    background:transparent;

    cursor:pointer;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:5px;

}


/* Hamburger lines */

.hamburger-btn span{

    display:block;

    width:27px;

    height:3px;

    background:#fff;

    border-radius:2px;

    transition:
        transform .2s ease,
        opacity .2s ease;

}


/* =====================================================
   HAMBURGER → X
===================================================== */

.menu-bar.open
.hamburger-btn
span:nth-child(1){

    transform:
        translateY(8px)
        rotate(45deg);

}

.menu-bar.open
.hamburger-btn
span:nth-child(2){

    opacity:0;

}

.menu-bar.open
.hamburger-btn
span:nth-child(3){

    transform:
        translateY(-8px)
        rotate(-45deg);

}


/* =====================================================
   TABLET
   768px - 1024px
===================================================== */

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

    .header-inner{

        min-height:130px;

        gap:16px;

        padding:12px 10px;

    }


    .site-logo{

        height:90px;

    }


    .site-name{

        font-size:34px;

        font-weight:900;

    }


    .site-url{

        font-size:16px;

        margin-top:5px;

    }


    .menu-item{

        font-size:14px;

        padding:8px 16px;

    }

}


/* =====================================================
   MOBILE
   767px AND BELOW
===================================================== */

@media (max-width:767px){

    /* ---------------------------------------------
       CONTAINER
    --------------------------------------------- */

    .container{

        width:100%;

        max-width:100%;

        padding-left:10px;

        padding-right:10px;

    }


    /* ---------------------------------------------
       BLUE HEADER
    --------------------------------------------- */

    .header-inner{

        min-height:90px;

        padding:12px 10px;

        gap:12px;

        justify-content:center;

    }


    /* ---------------------------------------------
       MOBILE LOGO
    --------------------------------------------- */

    .site-logo{

        height:58px;

        width:auto;

    }


    /* ---------------------------------------------
       MOBILE BRAND
    --------------------------------------------- */

    .brand-text{

        align-items:center;

        justify-content:center;

        text-align:center;

    }


    .site-name{

        font-size:23px;

        font-weight:900;

        line-height:1.15;

        letter-spacing:0;

        text-align:center;

        text-shadow:
            0 1px 3px rgba(0,0,0,.25);

    }


    .site-url{

        margin-top:3px;

        font-size:13px;

        font-weight:600;

        line-height:1.15;

        letter-spacing:0;

        text-align:center;

        white-space:nowrap;

    }


    /* ---------------------------------------------
       RED NAVBAR
    --------------------------------------------- */

    .menu-bar{

        height:42px;

        min-height:42px;

        background:#eb0000;

        border-top:1px solid #222;

    }


    /* ---------------------------------------------
       HAMBURGER CONTAINER
    --------------------------------------------- */

    .menu-bar > .container{

        height:42px;

        min-height:42px;

        display:flex;

        align-items:center;

        justify-content:flex-end;

        padding-left:10px;

        padding-right:10px;

    }


    /* ---------------------------------------------
       HAMBURGER
    --------------------------------------------- */

    .hamburger-btn{

        display:flex;

        width:42px;

        height:42px;

        margin-left:auto;

        padding:0;

        justify-content:center;

        align-items:center;

        gap:5px;

    }


    .hamburger-btn span{

        width:27px;

        height:3px;

    }


    /* ---------------------------------------------
       MOBILE MENU
       HIDDEN BY DEFAULT
    --------------------------------------------- */

    .menu-inner{

        display:none;

        width:100%;

        max-width:none;

        margin:0;

        padding:0;

        flex-direction:column;

        align-items:stretch;

        justify-content:flex-start;

        overflow:visible;

        white-space:normal;

        background:#111;

    }


    /* ---------------------------------------------
       OPEN MENU
    --------------------------------------------- */

    .menu-bar.open .menu-inner{

        display:flex;

        background:#111;

    }


    /* ---------------------------------------------
       MOBILE MENU ITEM
    --------------------------------------------- */

    .menu-item{

        width:100%;

        min-height:44px;

        padding:11px 18px;

        background:#111;

        color:#fff;

        border-right:none;

        border-bottom:1px solid #333;

        display:flex;

        align-items:center;

        justify-content:flex-start;

        font-size:15px;

        font-weight:600;

        line-height:1.3;

        text-decoration:none;

    }


    /* Last item */

    .menu-item:last-child{

        border-bottom:none;

        border-right:none;

    }


    /* Mobile hover */

    .menu-item:hover{

        background:#222;

        color:#fff;

        text-decoration:none;

    }

}


/* =====================================================
   VERY SMALL MOBILE
   380px AND BELOW
===================================================== */

@media (max-width:380px){

    .header-inner{

        min-height:78px;

        padding:10px 8px;

        gap:9px;

    }


    .site-logo{

        height:48px;

    }


    .site-name{

        font-size:19px;

        font-weight:900;

        line-height:1.15;

    }


    .site-url{

        font-size:11px;

        margin-top:2px;

    }


    .menu-bar{

        height:40px;

        min-height:40px;

    }


    .menu-bar > .container{

        height:40px;

        min-height:40px;

    }


    .hamburger-btn{

        width:40px;

        height:40px;

    }


    .hamburger-btn span{

        width:26px;

        height:3px;

    }


    .menu-item{

        min-height:42px;

        padding:10px 16px;

        font-size:14px;

    }

}