.menu-background .mobile-bg {
    display: none;  
}

@media  screen and (max-width:1280px) {
    .menu-background{
        margin-top: -100px;
    }
    }

 @media  screen and (max-width:1024px) {
    .HeroImages{
        margin-top: 20px;
    }
    
    .menu-background{
            margin-top: 100px;
        }
    
        .cream-cheese-section {
            text-align: left;
            margin-left: -500px; 
        } 
    
    .grab-section{
        background-color: #FFFDF8;
        max-width: 1024px;
    }    

    .grab-image{
        width: 10px;
        height: 10px;
    }
    
     }


 @media  screen and (width:820px) {
    .menu-background {
        height: 100%;
        margin-top: -10px;
    }

    .HeroImages {
        margin-top: 30px;
        height: auto;
    }

    .BrownFrame {
        height: 100px;
    }
    
    
 }   

 @media  screen and (width:768px) {
        .menu-background {
            height: 100%;
            margin-top: -20px;
        }
    
        .HeroImages {
            margin-top: -10px;
            height: auto;
        }
    
        .BrownFrame {
            height: 100px;
        }
    
        .grab-image {
            width: 5%;
            height: 5%;
        }

        .cream-cheese-section {
            margin-top: -30px;
        }
    
        .cream-cheese-section .menu-grid {
            margin-top: 20px;
            gap: 20px;
        }
    
        .cream-cheese-header {
            margin-bottom: 0;
        }
    
        .cream-cheese-section .menu-title {
            margin-bottom: 10px;
        }
        }
@media screen and (min-width: 431px) and (max-width: 1024px) {
    /* Hero Section 调整 */
    .hero-section {
        width: 100%;
        height: auto;
        margin: 10px auto;
    }

    .BrownFrame {
        width: 100%;
        height: 400px;
        border-radius: 0;
    }

    .HeroImages {
        width: 95%;
        height: 90%;
        border-radius: 20px;
    }

    .menu-grid {
        grid-template-columns: repeat(3, 200px);
        gap: 30px 20px;
        justify-content: center;
        margin: 40px auto;
    }

    .menu-item {
        width: 200px;
        height: 220px;
    }

    .menu-image {
        width: 150px;
        height: 150px;
        margin-bottom: -80px;
    }

    .menu-image.round {
        width: 140px;
        height: 140px;
        margin-bottom: -80px;
    }

    .item-info {
        height: 150px;
        padding: 15px;
    }

    .item-info h3 {
        font-size: 15px;
        margin-top: 45px;
    }

    .price {
        width: 100%;
        height: 30px;
        font-size: 14px;
    }

    .menu-title {
        margin-left: 50px;
        font-size: 40px;
    }

    .menu-line {
        display:none;
    }

    .cream-cheese-line {
        width: calc(100% - 400px);
    }

    /* Section 宽度调整 */
    .bagel-section,
    .cream-cheese-section {
        width: 90%;
        margin: 0 auto 0px;
        padding-top: 50px;
    }

    .grab-section {
        margin: 0px auto;
        width: 100%;
        background-color: #FFFDF8;
    }

    .grab-line {
        width: 80%;
    }

    .grab-subtitle {
        font-size: 22px;
    }

    .grab-content {
        font-size: 16px;
        width: 90%;
    }

    .grab-image {
        width: 30%;
        height: auto;
    }

    /* Menu Background 调整 */
    .menu-background {
        top: 490px;
        height: auto;
    }

    /* Modal 样式调整 */
    .modal-content {
        width: 80%;
        max-width: 600px;
        padding: 30px;
        flex-direction: row;
        gap: 30px;
    }

    .modal-image {
        width: 280px;
        height: 280px;
    }

    .modal-title {
        font-size: 35px;
    }

    .modal-details {
        font-size: 16px;
    }

    .footer {
        height: 350px;
    }

    .footer-logo {
        width: 180px;
        margin-top: -40px;
    }

    .footer-nav {
        flex-direction: row;
        gap: 40px;
        margin: 20px 0;
    }

    .footer-nav a {
        font-size: 16px;
    }

    .footer-line {
        width: 90%;
    }

    .social-icons {
        gap: 40px;
    }

    .copyright {
        font-size: 12px;
        margin: 10px 0;
    }

    .photo-slider {
        margin-top: -100px;
    }

    .slide {
        flex: 0 0 200px;
        width: 200px;
        height: 250px;
    }

    .cream-cheese-section .menu-grid {
        grid-template-columns: repeat(3, 200px);
        gap: 30px 20px;
    }

    .cream-cheese-section .menu-item {
        width: 200px;
        height: 220px;
    }

    .cream-cheese-section .menu-image {
        width: 100px;
        height: 100px;
        margin-top: 0px;
    }

    .cream-cheese-section {
        width: 90%;
        margin: 0 auto 100px;
        padding-top: 50px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .cream-cheese-header {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .cream-cheese-section .menu-title {
        margin-left: 50px;
        font-size: 40px;
        text-align: left;
    }

    .cream-cheese-line {
        display: none;
    }

    .cream-cheese-section .menu-grid {
        grid-template-columns: repeat(3, 200px);
        gap: 30px 20px;
        justify-content: flex-start;
        margin: 0px auto;
    }

    .cream-cheese-section .menu-item {
        width: 200px;
        height: 220px;
    }

    .cream-cheese-section .menu-image {
        width: 150px;
        height: 150px;
        margin-bottom: -80px;
        object-fit: contain;
    }

    .cream-cheese-section .item-info {
        height: 150px;
        padding: 15px;
    }

    .cream-cheese-section .item-info h3 {
        font-size: 15px;
        margin-top: 300px;
    }

    .cream-cheese-section .price {
        width: 100%;
        height: 30px;
        font-size: 14px;
    }


    .cream-cheese-section {
        width: 90%;
        margin: 0 auto 100px;
        padding-top: 50px;
    }

    .cream-cheese-header {
        width: 100%;
        margin-bottom: 40px;
    }

    .cream-cheese-section .menu-title {
        margin-left: 50px;
        font-size: 40px;
        text-align: left;
    }

    .cream-cheese-section .menu-grid {
        grid-template-columns: repeat(3, 200px);
        gap: 30px 20px;
        justify-content: flex-start;
        margin: 40px auto;
    }

    .cream-cheese-section .menu-item {
        width: 200px;
        height: 220px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        position: relative;
    }

    .cream-cheese-section .menu-image {
        width: 120px;
        height: 120px;
        margin: 0;
        position: relative;
        top: 20px;
        object-fit: contain;
    }

    .cream-cheese-section .item-info {
        width: 100%;
        height: 150px;
        padding: 15px;
        margin-top: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .cream-cheese-section .item-info h3 {
        font-size: 15px;
        margin-top: 60px;
    }

    .cream-cheese-section .price {
        width: 100%;
        height: 30px;
        font-size: 14px;
        margin-top: auto;
    }
}