/* Mobile and Tablet Navigation Styles */
.menu-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: red;
}

@media (min-width: 769px) {
    .menu-toggle {
        display: none;
    }
}

@media (max-width: 768px) {
    .main-navigation {
        display: none;
    }
    .main-navigation.toggled {
        display: block;
        position: fixed;
        top: 80px;
        right: 0;
        width: 200px;
        height: 100%;
        background: #fff;
        padding: 2rem;
        z-index: 1000;
        box-shadow: -2px 0 5px rgba(0,0,0,0.1);
    }
    .main-navigation.toggled ul {
        flex-direction: column;
        gap: 1rem;
    }
    .main-navigation.toggled li {
        margin: 0;
    }
}