.site-header{

    background:var(--medipro-white);

    border-bottom:1px solid #ddd;

    position:sticky;

    top:0;

    z-index:999;

}

.site-logo img {
    width:180px;
    height:auto;
}

.header-inner{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:80px;

}

.main-menu{

    display:flex;

    gap:30px;

    list-style:none;

    margin:0;

    padding:0;

}

.main-menu a{

    text-decoration:none;

    color:var(--medipro-text);

    font-weight:600;

}

.header-button{

    background:var(--medipro-primary);

    color:var(--medipro-white);

    padding:12px 20px;

    border-radius:6px;

    text-decoration:none;

}

/*
========================================
Mobile Header
========================================
*/


.mobile-menu-toggle {

    display:none;

    background:none;

    border:none;

    font-size:28px;

    cursor:pointer;

}



/* Tablet and Mobile */
@media (max-width: 768px) {

    .header-inner {

        display: flex;

        flex-wrap: wrap;

        justify-content: space-between;

        align-items: center;

        position: relative;

    }

    .site-logo {

        flex: 1;

    }

    .mobile-menu-toggle {

        display: block;

    }

    .main-navigation {

        display: none;

        width: 100%;

        order: 3;

        margin-top: 20px;

    }

    .main-navigation.active {

        display: block;

    }

    .main-menu {

        display: flex;

        flex-direction: column;

        gap: 0;

        width: 100%;

        margin: 0;

        padding: 0;

    }

    .main-menu li {

        width: 100%;

        border-top: 1px solid #e5e5e5;

    }

    .main-menu a {

        display: block;

        padding: 16px 0;

        width: 100%;

    }

    .header-button {

        display: none;

        width: 100%;

        order: 4;

        margin-top: 15px;

        text-align: center;

    }

    .header-button.active {

        display: block;

    }

}