/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:992px){

    .nav-menu{

        display:none;

    }

    .mobile-toggle{

        display:block;

    }

    .top-header{

        display:none;

    }

}

@media(max-width:768px){

    h1{

        font-size:38px;

    }

    h2{

        font-size:30px;

    }

    .section{

        padding:70px 0;

    }

}

@media(max-width:576px){

    .container{

        padding:0 15px;

    }

    .order-btn{

        display:none;

    }

}

@media(max-width:768px){

    .hero{

        min-height:75vh;

        text-align:center;

    }

    .hero h1{

        font-size:42px;

    }

    .hero p{

        font-size:16px;

    }

    .hero-buttons{

        justify-content:center;

    }

}

@media(max-width:992px){

    .about-grid{

        grid-template-columns:1fr;

    }

    .about-image{

        order:2;

    }

    .about-content{

        order:1;

    }

}

@media(max-width:576px){

    .about-features{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   EXPERIENCE SECTION RESPONSIVE
========================================================== */

@media (max-width: 1200px){

    .experience-grid{

        grid-template-columns:repeat(3,1fr);

        gap:25px;

    }

}

@media (max-width:992px){

    .experience-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    .section-heading{

        margin-bottom:40px;

    }

    .experience-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .experience-card{

        padding:30px;

    }

    .experience-icon{

        width:75px;

        height:75px;

        font-size:32px;

    }

    .experience-card h3{

        font-size:22px;

    }

}

@media (max-width:576px){

    .experience{

        padding:70px 0;

    }

    .experience-card{

        padding:25px;

        border-radius:16px;

    }

    .experience-icon{

        width:70px;

        height:70px;

        font-size:28px;

    }

}

/* ==========================================================
   BRAND STATEMENT RESPONSIVE
========================================================== */

@media (max-width:992px){

    .brand-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    .brand-grid{

        grid-template-columns:1fr;

    }

    .brand-item{

        padding:30px;

    }

}

/* ==========================================================
   FEATURED FOOD RESPONSIVE
========================================================== */

@media (max-width:992px){

    .food-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    .food-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   FOODEATO HIGHLIGHTS
========================================================== */

@media(max-width:1200px){

    .highlight-grid{

        grid-template-columns:repeat(3,1fr);

    }

}

@media(max-width:992px){

    .highlight-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:576px){

    .highlight-grid{

        grid-template-columns:repeat(2,1fr);

        gap:15px;

    }

    .tile-image{

        height:130px;

    }

    .tile-body{

        padding:15px;

    }

    .tile-body h3{

        font-size:16px;

    }

    .tile-price{

        font-size:18px;

    }

}

/* ==========================================================
   GAMING SHOWCASE
========================================================== */

@media(max-width:992px){

    .gaming-wrapper{

        grid-template-columns:1fr;

        gap:60px;

    }

    .gaming-content{

        order:2;

    }

    .gaming-images{

        order:1;

        min-height:480px;

    }

}

/* ==========================================================
   GALLERY
========================================================== */

@media(max-width:992px){

    .gallery-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .gallery-item.large{

        grid-column:span 2;

    }

}

@media(max-width:576px){

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .gallery-item.large{

        grid-column:span 1;

        grid-row:span 1;

    }

}

/* ==========================================================
   STATS
========================================================== */

@media(max-width:992px){

    .stats-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:576px){

    .stats-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   TESTIMONIALS
========================================================== */

@media(max-width:992px){

    .testimonial-grid{

        grid-template-columns:1fr 1fr;

    }

}

@media(max-width:576px){

    .testimonial-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

.cta-wrapper h2{

    font-size:38px;

}

.cta-wrapper p{

    font-size:17px;

}

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

/* ==========================================================
   FOOTER
========================================================== */

@media(max-width:992px){

.footer-grid{

    grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-social{

    justify-content:center;

}

}