@media only screen and (max-width: 1200px) {
    header {
        .bottom-header {
            .main-bottom-header {
                gap: 15px;
            }
            nav {
                a {
                    font-size: 18px;
                    padding: 5px 8px;
                }
            }
            .primary-btn {
                padding: 12px 10px;
                min-width: 150px;
            }
        }
    }
    .banner {
        padding: 100px 0px;
        .banner-content {
            .banner-title {
                font-size: 70px;
            }
        }
    }
    .popular {
        .populars-items {
            gap: 20px;
            .item-title {
                font-size: 18px;
            }
            .item {
                padding: 0px 15px 20px;
            }
        }
    }
    .gallery {
        .gallery-items {
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        }
    }
}

@media only screen and (max-width: 992px) {
    h1 {
        font-size: 44px;
    }
    .banner {
        .banner-content {
            width: 100%;
            .banner-title {
                font-size: 60px;
            }
            img {
                width: 90px;
            }
        }
    }
    .order-online {
        .main-order-online {
            width: 100%;
        }
        .order-patner {
            .item {
                width: 250px;
            }
        }
    }
    .testimonial {
        .item {
            background: rgb(255 255 255);
            backdrop-filter: none;
            gap: 15px;
        }
    }
    header {
        .bottom-header {
            .box-menu {
                display: none;
            }
            .logo {
                width: 30%;
            }
            .main-bottom-header {
                justify-content: space-between;
            }
            .primary-menu {
                display: block;
                flex-direction: column;
                padding: 150px 20px;
                position: fixed;
                background: #8d2c6e;
                width: 100%;
                max-width: 300px;
                right: -100%;
                top: 0;
                transition: all .4s ease-in;
                z-index: 1;
                height: 100vh;
                justify-content: start;
                transition: .5s;
                ul {
                    flex-direction: column;
                    gap: 0
                }
                nav {
                    text-align: center;
                    a {
                        display: block;
                        padding: 10px 0;
                        font-size: 18px
                    }
                    ul a {
                        color: #ffffff
                    }
                }
            }
            .primary-menu.active {
                right: 0%;
                z-index: 8
            }
            .menu-icon {
                display: block;
                border: none;
                background: #fff0;
                width: 40px;
                z-index: 9;
                font-size: 30px;
                color: #fff
            }
            .fa-bars {
                color: #fff
            }
            .menu-icon {
                svg {
                    width: 25px;
                    height: 25px;
                    fill: #000000
                }
            }
            .menu-icon {
                .cross-bar {
                    display: none
                }
            }
            .menu-icon.fa-xmark {
                .cross-bar {
                    display: block;
                    fill: #fff;
                }
                .menu-bar {
                    display: none
                }
            }
        }
    }
    .col-md-8 {
        grid-column: span 12;
    }
    .col-md-4 {
        grid-column: span 12;
    }
}

@media only screen and (max-width: 768px) {
    header {
        .top-header {
            .resturant-social {
                display: none;
            }
        }
    }
    .popular {
        .populars-items {
            flex-wrap: wrap;
            row-gap: 70px;
            .item {
                width: 48%;
            }
        }
    }
    footer {
        .top-footer {
            flex-direction: column;
            .box:nth-child(1),
            .box:nth-child(2) {
                border-right: none;
            }
        }
    }
    /* ============ menu page ========= */
    #menu-page {
        .menu-items {
            grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
        }
        #african-style.categori-box {
            margin-top: 0px;
        }
        .categori-btns {
            ul {
                gap: 10px;
            }
            li {
                padding: 8px 10px;
            }
        }
    }
    #about-page {
        .about-section {
            .main-about {
                flex-direction: column;
            }
            .about-img {
                width: 100%;
                text-align: start;
            }
            .about-content {
                width: 100%;
            }
        }
        .about-section:nth-child(2n+1) {
            .main-about {
                flex-direction: row-reverse;
                flex-direction: column;
            }
        }
    }
    #contact-page {
        .main-contact {
            flex-direction: column;
        }
        .contact-details {
            width: 100%;
        }
        .contact-form {
            width: 100%;
        }
    }
}

@media only screen and (max-width: 600px) {
    .section-padding {
        padding: 30px 0px;
    }
    h1 {
        font-size: 36px;
    }
    h3 {
        font-size: 34px;
    }
    h2 {
        font-size: 34px;
    }
    header {
        .top-header {
            .restaurant-details {
                gap: 9px;
                .item a {
                    font-size: 14px;
                }
            }
        }
        .bottom-header {
            .logo {
                width: 45%;
            }
        }
    }
    .order-online {
        .order-patner {
            .item {
                width: 180px;
                padding: 10px;
                a {
                    display: flex;
                }
            }
        }
    }
    .banner {
        .banner-content {
            .banner-title {
                font-size: 50px;
            }
            p {
                font-size: 16px;
            }
        }
    }
    .popular {
        .populars-items {
            .item {
                width: 47%;
            }
            .item-dec {
                font-size: 14px;
            }
        }
    }
    .gallery {
        .gallery-items {
            grid-template-columns: repeat(auto-fill, minmax(177px, 1fr));
        }
    }
    #menu-page {
        .categori-btns {
            padding: 20px 0px;
            top: 100px;
            ul {
                gap: 10px;
                flex-wrap: wrap;
            }
        }
    }
    .col-md-8 {
        grid-column: span 12;
    }
    .col-md-4 {
        grid-column: span 12;
    }
    .col-md-6 {
        grid-column: span 12;
    }
}

@media only screen and (max-width: 450px) {
    h2 {
        font-size: 28px;
    }
    .inner-banner {
        padding: 50px 0px;
    }
    h3 {
        font-size: 28px;
    }
    header {
        .top-header {
            .restaurant-details {
                gap: 5px;
                flex-direction: column-reverse;
                align-items: self-start;
            }
        }
    }
    .banner {
        padding: 60px 0px;
        .banner-content {
            text-align: center;
            align-items: center;
            .banner-title {
                font-size: 42px;
            }
            p {
                display: none;
            }
            .banner-btn {
                display: none;
            }
        }
    }
    .order-online {
        .main-order-online {
            gap: 15px;
        }
        .order-patner {
            flex-direction: column;
            gap: 15px;
        }
        p {
            display: none;
        }
    }
    .about-section {
        .about-tagline {
            font-size: 26px;
            line-height: 1;
        }
    }
    .popular {
        .populars-items {
            margin-top: 65px;
            .item {
                width: 100%;
            }
            .item-title {
                font-size: 20px;
                margin-bottom: 5px;
            }
            .item-dec {
                font-size: 16px;
            }
        }
        .popular-btn {
            margin-top: 25px;
        }
    }
    .gallery {
        .gallery-items {
            grid-gap: 10px;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        }
    }
    #menu-page {
        .categori-btns {
            li {
                padding: 6px 6px;
                width: 150px;
            }
            li a {
                font-size: 14px;
            }
        }
        .menu-items {
            .item {
                padding: 15px;
            }
            .menu-item-title {
                font-size: 16px;
            }
            .menu-item-dec {
                font-size: 14px;
            }
            .price {
                font-size: 18px;
            }
        }
    }
    form {
        gap: 10px;
        padding: 20px 20px;
        border-radius: 10px;
    }
}

@media only screen and (max-width: 350px) {
    h1 {
        font-size: 30px;
    }
    .primary-btn {
        font-size: 16px;
        padding: 12px 15px;
        min-width: 150px;
    }
    .banner {
        .banner-content {
            .banner-title {
                font-size: 36px;
            }
        }
    }
    .testimonial {
        .item {
            padding: 15px;
            gap: 10px;
            .item-content {
                font-size: 16px;
            }
            img {
                width: 120px;
            }
        }
    }
    .gallery {
        .gallery-items {
            margin-top: 25px;
            grid-gap: 10px;
            grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
        }
    }
    footer {
        .top-footer {
            padding: 30px 0px;
            gap: 10px;
        }
        .bottom-footer {
            font-size: 12px;
        }
    }
}