@media (max-width: 900px) {

    .header-container {
        height: 80px;
        padding: 0 20px;
    }

    .main-navigation {
        display: none;
    }

    .search-button {
        width: 44px;
        height: 44px;
    }

    .read-guide-button {
        display: none;
    }

    .mobile-menu-button {
        display: block;
    }

    .mobile-navigation {
        padding: 20px;

        background: #f8fafc;

        display: flex;
        flex-direction: column;
        gap: 5px;

        max-height: 0;
        overflow: hidden;

        transition: max-height 0.3s ease;
    }

    .mobile-navigation.open {
        max-height: 400px;
    }

    .mobile-navigation > a {
        padding: 15px;

        text-decoration: none;
        color: #111;

        border-radius: 8px;

        font-weight: 500;
    }

    .mobile-navigation > a:hover {
        background: #eeeae1;
        color: #0047ff;
    }

    .mobile-read-guide {
        background: #0047ff !important;
        color: white !important;

        display: flex;
        justify-content: space-between;
        align-items: center;
    }

}