/* ===================== GLOBAL ===================== */
:root{
    --blue:#194c6b;
    --green:#3ba88f;
    --padding-desktop: 8%;
    --padding-mobile: 5%;
}

body { margin:0; font-family:'Inter',sans-serif; }
a { text-decoration:none; color:inherit; }
*,*::before,*::after{ box-sizing:border-box; }

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

.topnav{
    background:white;
    padding:12px var(--padding-desktop);
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 3px 8px rgba(0,0,0,0.1);
    position:sticky;
    top:0;
    z-index:999;
}

.brand-title{
    font-size:22px;
    font-weight:700;
    color:var(--blue);
    white-space: nowrap;
}

.brand-sub{
    font-size:12px;
    color:var(--green);
    white-space: nowrap;
}

/* ---------- NAV LINKS ---------- */
.links{
    display:flex;
    gap:18px;
    align-items:center;
}

.links a{
    padding:8px 12px;
    border-radius:6px;
    font-weight:500;
    color:var(--blue);
    transition: background 0.3s, color 0.3s;
}

.links a:hover{
    background:#e5f7f1;
    color:var(--green);
}

/* ---------- DROPDOWN ---------- */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow:0px 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 6px;
    top: 100%;
    left: 0;
}

.dropdown-content a {
    color: var(--blue);
    padding: 12px 16px;
    display: block;
    text-align: left;
    white-space: nowrap;
}

.dropdown-content a:hover {
    background-color: #e5f7f1;
}

/* Show dropdown on hover (desktop) */
.dropdown:hover .dropdown-content,
.dropdown.active .dropdown-content {
    display: block;
}

/* ---------- MENU TOGGLE (MOBILE) ---------- */
.menu-toggle{
    display:none;
    font-size:26px;
    border:none;
    background:transparent;
    color:var(--blue);
    cursor:pointer;
}

/* ===================== MOBILE VIEW ===================== */
@media(max-width:992px){

    .topnav{
        padding:10px var(--padding-mobile);
        position: relative;
    }

    .menu-toggle{
        display:block;
    }

    .links{
        display:none;
        flex-direction:column;
        width:100%;
        position:absolute;
        top:100%;
        left:0;
        background:white;
        text-align:center;
        box-shadow:0 3px 8px rgba(0,0,0,0.1);
        z-index:998;
        gap:0;
        padding:5px 0;
    }

    .links.active{
        display:flex;
    }

    .links a, .dropdown{
        width:100%;
        border-bottom:1px solid #eee;
    }

    .links a{
        padding:14px;
    }

    .dropdown .dropbtn{
        display:block;
        width:100%;
        padding:14px;
        text-align:center;
    }

    .dropdown-content{
        position:static;
        width:100%;
        box-shadow:none;
        border-top:1px solid #eee;
        border-radius:0;
        background:#f3f3f3;
    }

    .dropdown-content a{
        padding:10px 16px;
    }

    .brand-title{ font-size:20px; }
    .brand-sub{ font-size:11px; }
}