@font-face {
    font-family: "Lato Regular";
    src: url("../assets/fonts/Lato/Lato-Regular.ttf");
}
@font-face {
    font-family: "Lato Light";
    src: url("../assets/fonts/Lato/Lato-Light.ttf");
}

:root {
    --dark-color: #262626;
    --light-color: #f3f4f0;
}

/* HEADER START ------------------------------------------------------------ */
.header {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 90px;
    background-color: transparent;
    padding-left: 90px;
    padding-right: 90px;
    border-bottom: 1px solid #545454;
    z-index: 15;
    transition: all 300ms;
}
.headerActive {
    position: fixed;
    background-color: var(--dark-color);
    border-bottom: 0px solid #545454;
}

/* HEADER LEFT SECTION START ---------------------- */
.headerLeftSection{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 20%;
    height: 100%;
}
.headerLogo{
    display: block;
    width: 60px;
    height: 60px;
    transition: all 300ms;
}
/* HEADER LEFT SECTION END ------------------------ */

/* HEADER RIGHT SECTION START --------------------- */
.headerRightSection{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: end;
    align-items: center;
    width: 80%;
    height: 100%;
}
.menuIcon {
    display: none;
    width: 30px;
    height: 30px;
    margin-right: 50px;
}
.navigationMenu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    height: 100%;
    color: var(--light-color);
    text-align: center;
    list-style: none;
    margin-right: 70px;
}
.navigationMobileMenu {
    display: none;
}
.menuButtonContainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.menuButton {
    align-self: center;
    font-family: "Lato Regular";
    color: var(--dark-color);
    background-color: var(--light-color);
    border-radius: .5em;
    border: 2px solid var(--light-color);
    padding: 10px 20px;
    transition: all 300ms;
}
.menuButton:hover,
.buttonActive {
    background-color: var(--dark-color);
    color: var(--light-color);
}
/* HEADER RIGHT SECTION END ----------------------- */

.menuItem {
    display: block;
    position: relative;
    height: 100%;
    overflow: hidden;
}
.hLine {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 1px;
    width: 50%;
    background-color: var(--light-color);
    opacity: 0;
    transform: translateX(-100%);
    transition: all 150ms linear;
    transition-delay: 150ms;
}
.vLine {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    height: 10%;
    width: 1px;
    background-color: var(--light-color);
    opacity: 0;
    transform: translateY(100%);
    transition: all 150ms linear;
    transition-delay: 0ms;
}
.menuItem:hover .hLine,
.hLineActive {
    opacity: 1;
    transform: translateX(0%);
    transition-delay: 0ms;
}
.menuItem:hover .vLine,
.vLineActive {
    opacity: 1;
    transform: translateY(0%);
    transition-delay: 150ms;
}

.menuLink {
    box-sizing: border-box;
    display: block;
    position: relative;
    width: 100%;
    font-family: "Lato Regular";
    font-size: 16px;
    color: var(--light-color);
    line-height: 90px;
    text-align: center;
    text-decoration: none;
    letter-spacing: 2px;
    padding-right: 20px;
    padding-left: 20px;
    transition: all 300ms;
    transition-delay: 0ms;
}
.menuLink:hover,
.linkActive {
    transform: scale(1.2);
}
.closeMenuIcon{
    display: none;
}

@media screen and (max-width: 2560px) and (min-width: 1537px) {
    .header             { height: 5.8vw; }
    .headerLogo         { width: 3.9vw;  height: 3.9vw; }
    .menuButton         { font-size: 1vw; padding: 0.65vw 1.3vw; }
    .menuLink           { font-size: 1vw; line-height: 5.8vw;  padding-left: 1.3vw; padding-right: 1.3vw;}
    .hLine              { height: 3px; }
    .vLine              { width: 3px; }
}

@media screen and (max-width: 1024px) {
    .menuIcon           { display: block; }
    .menuIcon:hover     { cursor: pointer; }

    .navigationMenu {
        flex-direction: column;
        justify-content: space-around;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100vh;
        margin-right: 0px;
        opacity: 0;
        background-color: var(--dark-color);
        transform: translateX(-100%);
    }

    .navigationMenuOpen { opacity: 1;   transform: translateX(0%);  transition: all 500ms; }
    .menuItem           { width: 100%;  height: 100px;  transition: all 500ms; }
    .menuItem:hover     { background-color: #545454; } 
    .menuLink           { width: 100%;  height: 100%;   font-family: "Lato Light";  font-size: 2rem;    line-height: 100px; }
    .hLine, .vLine      { display: none; }

    .closeMenuIcon{
        display: block;
        position: absolute;
        top: 2.2vw;
        right: 2.2vw;
        width: 2.2vw;
        height: 2.2vw;
        padding: 0.65vw;
        border-radius: 0.5rem;
        transition: all 500ms;
    }

    .closeMenuIcon:hover    { cursor: pointer;  background-color: #545454; }
}

@media screen and (max-width: 531px) {
    .header { height: auto; flex-direction: row; padding-left: 15px; padding-right: 15px; }
    .headerActive { height: auto; }
    .headerLogo { width: 10vw;  height: 10vw; margin: 15px auto;}
    .menuIcon { width: 20px; height: 20px; }
    .closeMenuIcon{ top: 10px; right: 10px; width: 20px; height: 20px; padding: 5px; }
}