* { box-sizing: border-box; margin: 0; }
a { text-decoration: none; }

/* ---------- HEADER ---------- */
header        { background: #FFF8F0F2; height: 96px; }
.header-nevbar{ position: relative; top: 0; z-index: 999; }   /* use sticky if you want it pinned */
.nav-inner-box{ margin: 0; padding: 0; min-width: 100vw; }
.nav-bar-wrap {
    display: flex; justify-content: space-between; align-items: center;
    padding-right: 95.47px;
}

/* logo */
.logo-wrap {
    width: 258px; max-width: 258px; height: 96px;
    display: flex; justify-content: center; align-items: center;
    background-color: #10332F; border-bottom-right-radius: 46px;
}
.logo-wrap a img { max-width: 124px; }

/* desktop menu */
.menu-bar { width: 40%; }
ul.menu-list {
    padding-left: 0; margin-bottom: 0;
    display: flex; justify-content: space-between; align-items: center;
    list-style: none; font-family: Sora;
}
ul.menu-list li a {
    padding: 10px 5px; color: #10332F99; font-size: 15px; font-weight: 500;
    height: 26px; display: flex; align-items: center; justify-content: center;
}
ul.menu-list li:nth-child(2) a { color: #10332F; }
ul.menu-list li:nth-child(2)   { border-bottom: 2px solid #10332F; }

/* hamburger + close (hidden on desktop) */
.toggle-icon a i { font-size: 24px; color: #10332F; display: none; }  /* FIX: was #fff -> invisible */
li.cross-wrap    { display: none; }


/* ================= TABLET / MOBILE (<= 991px) ================= */
@media screen and (max-width: 991px) {

    .nav-bar-wrap { padding-right: 20px; }   /* FIX: 95px pushed the icon too far inward */
    .menu-bar     { width: unset; }

    .toggle-icon a i { display: block; }     /* show hamburger */

    /* slide-in panel */
    ul.menu-list {
        position: fixed; top: 0; right: 0; height: 100%;
        width: min(320px, 85vw);
        flex-direction: column; justify-content: flex-start; align-items: stretch;
        gap: 4px;
        background-color: #fff;
        box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
        padding: 18px 18px 28px;
        display: none;                       /* toggled by your JS */
        z-index: 1000;
    }

    /* close (X) row */
    li.cross-wrap {
        display: block; text-align: end;
        border-bottom: 1px solid #f0f5f0;
        margin-bottom: 10px; padding-bottom: 6px;
    }
    li.cross-wrap a i { color: #10332f; font-size: 28px; }

    /* full-width, tap-friendly links */
    ul.menu-list li {
        display: block; width: 100%;
        border-bottom: none !important;      /* reset the desktop underline */
    }
    ul.menu-list li a {
        height: auto; justify-content: flex-start;
        padding: 14px 10px; font-size: 16px; color: #10332f;
        border-radius: 8px; transition: background .2s, color .2s;
    }
    ul.menu-list li a:hover,
    ul.menu-list li a:active { background: #10332F0D; color: #10332F; }
}


/* ================= SMALL PHONES (<= 768px) ================= */
@media screen and (max-width: 768px) {
    header,
    .logo-wrap { height: 72px; }             /* keep both equal so the green tab fills the bar */

    .logo-wrap {
        width: 150px; max-width: 150px;
        border-bottom-right-radius: 30px;
    }
    .logo-wrap a img { max-width: 92px; }
}