/* Mobile-first responsive design */
@media screen and (max-width: 768px) {
    #main_site {
        max-width: 100%;
        padding: 0 15px;
    }

    #logo {
        margin-top: 20px;
        text-align: center;
    }

    #logo img {
        width: 50% !important;
        margin: 0 auto !important;
    }

    #side_menu {
        float: none;
        width: 100%;
        margin-bottom: 20px;
    }

    #center_div {
        margin-left: 0;
    }

    #menulist {
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 0 10px;
    }

    #menulist li {
        display: inline-block;
        position: relative;
        margin: 0;
    }

    #menulist li a {
        display: inline-block;
        padding: 4px 12px;
        color: #4b4e55;
        transition: all 0.3s ease;
        border: 1px solid rgba(75, 78, 85, 0.15);
        border-radius: 20px;
        font-size: 0.95em;
    }

    #menulist li a:hover {
        color: #4b4e55;
        background: rgba(75, 78, 85, 0.05);
    }

    #menulist li.has-submenu>a::after {
        content: '▼';
        margin-left: 4px;
        font-size: 0.7em;
        opacity: 0.5;
        vertical-align: middle;
    }

    #menulist li.has-submenu.active>a::after {
        content: '▲';
    }

    ul#menulist li ul.submenu {
        display: none;
        position: absolute;
        left: 50%;
        top: 100%;
        transform: translateX(-50%);
        background: white;
        z-index: 1000;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        border-radius: 8px;
        padding: 8px;
        margin-top: 5px;
        min-width: 200px;
        border: 1px solid rgba(75, 78, 85, 0.1);
    }

    ul#menulist li.has-submenu.active ul.submenu {
        display: block;
    }

    ul#menulist li:hover ul.submenu {
        display: none;
    }

    ul#menulist li ul.submenu li {
        display: block;
        margin: 0;
        width: 100%;
    }

    ul#menulist li ul.submenu li a {
        display: block;
        padding: 6px 12px;
        text-align: center;
        margin: 2px 0;
        border: none;
        border-radius: 4px;
    }

    ul#menulist li ul.submenu li a:hover {
        background: rgba(75, 78, 85, 0.05);
    }

    div#imagebox {
        float: none;
        display: inline-block;
        padding: 5px;
    }

    div#imagebox img {
        width: 100% !important;
        height: auto !important;
        max-width: 300px;
    }

    div #firm_photo {
        float: none;
        text-align: center;
        margin: 20px 0;
    }

    div #firm_photo img {
        max-width: 200px;
        height: auto;
    }

    div #map {
        margin: 10px 0;
        width: 100%;
    }

    div #map iframe {
        width: 100%;
        height: 300px;
    }

    section#info,
    section#copyright {
        padding: 10px;
        font-size: 12px;
    }

    a#logout {
        margin: 10px 0;
        display: block;
        text-align: center;
    }
}

/* Tablet styles */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    #main_site {
        max-width: 90%;
    }

    #center_div {
        margin-left: 200px;
    }

    div#imagebox img {
        width: 130px !important;
        height: 130px !important;
    }
}

/* Ensure proper viewport scaling */
@viewport {
    width: device-width;
    zoom: 1.0;
}