#menu_contact {
    display: none;
}

header {
    padding-top: 60px;
    z-index: 99;
    position: absolute;
    width: 100%;
    top: 0;
    pointer-events: none;
}

header.fixed {
    position: fixed;
    top:0;
    padding-top: 0;
    background: var(--colorBlue); 
    transition: background 0.15s ease;
}
header .container {
    transition: max-width 0.15s ease;
}
header.fixed .container {
    width: 100%;
    max-width: 100%; 
}

header .header_inner {
    background: var(--colorBlue);
    border-radius: 12px;
    height: 100px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 4%;
    pointer-events: auto;
}
header.fixed .header_inner {
    height: 80px;
    transition: height 0.15s ease;
}

header .header_inner ul {
    list-style-type: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
}

header .header_inner ul li a {
    color: #fff;
    font-size: var(--font18);
    font-weight: var(--fontText);
    position: relative;
    text-transform: uppercase;
    transition: color 0.15s ease;
}


header .header_inner ul li a:hover {
    color: var(--colorGreen);
}

header .header_inner ul li a.active {
    font-weight: var(--fontBold);
    color: var(--colorGreen);
}

header .boxright {
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

header .btn-contact {
    background: transparent;
    padding: 0;
    height: auto;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

header .btn-contact:hover {
    color: var(--colorGreen)
}

header .btn-contact img {
    margin-right: 8px;
}


header .logo_main a {
    /* position: relative;
    left:-4%; */
}

.hamburger_menu {
    display: none;
}







footer {
    background: var(--colorBlack2);
}

footer .copyright {
    text-align: center;
    color: var(--colorGreen);
    padding: 24px 0;
    border-top: 1px solid rgba(255 255 255 / 30%);
    font-size: var(--font16);
    font-weight: var(--fontSemiBold);
    text-transform: uppercase;
}


footer .menu_footer {
    padding: 40px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: flex-start;
}



footer .brand {
    color: var(--colorWhite);
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

footer .brand h2 {
    font-size: var(--font20);
    text-transform: uppercase;
    font-weight: var(--fontBold);
}

footer .brand p {
    font-size: var(--font16);
    text-transform: uppercase;
    font-weight: var(--fontMedium);
    margin-top: 8px;
}

footer .brand .logo {
    width: 160px;
}

footer .brand .logo img {
    width: 100%;
}



.list_menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: flex-start;
    gap: 64px;
    margin-left: -8%;
}

.list_menu h2 a {
    color: var(--colorGreen);
    font-size: var(--font18);
    font-weight: var(--fontBold);
    text-transform: uppercase;
}

.list_menu ul {
    list-style-type: none;
    border-top: 1px solid rgba(255 255 255 / 30%);
    margin-top: 12px;
    padding-top: 12px;
}

.list_menu ul li {
    margin-bottom: 12px;
}

.list_menu ul li:nth-last-child(1) {
    margin-bottom: 0;
}

.list_menu ul li a {
    color: var(--colorWhite);
    font-size: var(--font16);
    transition: color 0.15s ease;
}

.list_menu ul li a:hover {
    color: var(--colorGreen);
}





@media(max-width:1659px) {
    header {
        padding-top: 40px;
    }

    header .header_inner {
        height: 80px;
    }

    header.fixed .header_inner {
        height: 60px;
    }
.logo_main {width: 80px;}
    .list_menu {
        gap: 48px;
        margin-left: -4%;
    }

    footer .brand .logo {
        width: 140px;
    }
}

@media(max-width:1439px) {
    .list_menu ul li {
        margin-bottom: 8px;
    }

    footer .brand {
        gap: 32px;
    }
}

@media(max-width:1199px) {
    .logo_main {
        width: 65px;
    }

    header .header_inner {
        height: 70px;
    }
    header.fixed .header_inner {
        height: 55px;
    }

    header .header_inner ul {
        gap:40px;
    }

    footer .brand .logo {
        width: 100px;
    }
}

@media(max-width:991px) {
    header {
        padding-top: 24px;
    }
}

@media(max-width:767px) {
    header {
        padding-top: 0;
        position: fixed;
    }

    header .container {
        max-width: 100%;
        padding: 0;
    }

    header .header_inner {
        border-radius: 0;
        height: 70px;
    }

    header.fixed .header_inner {
        height: 70px;
    }

    .navbar {
        position: absolute;
        width: 100%;
        height: calc(100vh - 70px);
        background: var(--colorBlue);
        left: auto;
        right: -100%;
        top: 70px;
        padding: 24px;
        transition: right 0.2s ease-out;
    }

    .navbar.active {
        right: 0;
    }

    header .header_inner ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }

    header .header_inner ul li a {
        font-size: 20px;
    }

    header .header_inner {
        grid-template-columns: repeat(2, 1fr);
        border-bottom: 1px solid rgba(255 255 255 / 30%);
    }

    .boxright .btn-contact {
        display: none;
    }

    .hamburger_menu {
        display: block;
        width: 40px;
        height: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        background: transparent;
        border-radius: 0;
        border: none;
        cursor: pointer;
        position: relative;
    }

    .hamburger_menu span {
        display: block;
        height: 4px;
        width: 100%;
        background: #FFDF34;
        border-radius: 10px;
        position: relative;
        transition: all 0.2s ease-out;
    }

    .hamburger_menu.active span {
        position: absolute;
    }

    .hamburger_menu.active span:nth-child(2) {
        display: none;
    }

    .hamburger_menu.active span:nth-child(1) {
        transform: rotate(45deg);
        top: 50%;
    }

    .hamburger_menu.active span:nth-child(3) {
        transform: rotate(-45deg);
        top: 50%;
    }

    #menu_contact {
        display: block;
    }

    .logo_main {
        width: 80px;
    }



    footer .container {
        max-width: 100%;
    }
    footer .menu_footer {
        grid-template-columns: repeat(1, 1fr);
    }

    .list_menu {margin-left: 0; gap:16px; margin-top: 40px;}
}

@media(max-width:575px) {
    footer .menu_footer {padding-bottom: 24px;}
    .list_menu {
        grid-template-columns: 2fr 3fr;
    }
    .list_menu .col:nth-last-child(1){
        grid-column-start: 1;
        grid-column-end: 3;
    }
    .list_menu h2 a {font-size: 18px;}
    .list_menu ul li a {font-size: 14px;}
    footer .brand p {font-size: 14px;}
    footer .brand h2 {font-size: 18px;}
    footer .brand .logo {width: 100%; max-width: 120px;}
    footer .brand {align-items: center;}

    header .header_inner {height: 50px;}
    header.fixed .header_inner {height: 50px;}
    .logo_main {width: 56px;}
    .hamburger_menu { width: 32px; height: 32px;}
    .hamburger_menu span {height: 3px;}
    .navbar {height: calc(100vh - 50px); top:50px;}
}