/* On Split Screen */
@media (max-width: 1200px) {
    /* utility */
    .grid { 
        grid-template-columns: repeat(1, 1fr);
        align-content: center;
    }

    /* Client Panel */
    /* Filter Btns */
    .menu .btn-container { grid-template-columns: repeat(2, 1fr); gap: 5px; }

    /* Home Page -> Shocase */
    .showcase p
    { 
        max-width: 350px;
        text-align: center;
        margin: 0 auto;
    }

    .special { height: 65em; }

    /* Our Vision Page -> History Image */
    .our-history .grid { justify-items: center; }
    /* Our Vision -> Main image */
    .main-img img { margin-top: 15px;}
}
/* Split screen */
@media ( max-width: 950px) {
    .hero { height: 800px;}
    .hero-article .my-2 { margin-top: -8em;}
}

/* iPads and Other Devices */
@media (max-width: 768px) {
    .navbar .site-nav { display: none; }

    /* Toggle Bars */
    .toggle-bars { display: inline-block ; cursor: pointer; }

    .site-title { justify-content: space-between; width: 100%; }
    
    .mob-container { max-width: 40vw; background-color: blue; }

    /* Todays Special Section */
    .special { height: 95em;}

    /* Our Vision -> Main image */
    .main-img img { height: 600px;}
}

 /* Mobile Devices */
@media (max-width: 450px) {

    /* .Font Sizes of Headings */
    .hero .container-min .clr-green,
    .showcase h1,
    .special h1,
    .dishes h1,
    .our-history h1,
    .our-philosphy h1
    { font-size: 30px; }

    .signup-modal .modal-container {margin-top: 2rem; height: 90%;}
    .signup-modal .modal-content #sign-modal { padding-bottom: 2rem; }

    /* Home Page */
    .hero { height: 700px;}
    .hero img { object-fit: fill; height : 440px; }

    /* Our Vision Page - Grids */
    .our-history .grid .m-3{ margin: 0; }

    /* Setting of image - History Image */
    .our-history .grid .p-3 { margin: 10px 0; }
    .our-history .grid img { height: 200px;}

    .our-philosphy img { height: 70px; width: 70px; }
    
    .menu-item { flex-wrap: wrap; }

    .menu-section { margin: 2rem;}

    .menu-item img {
        max-width: 100%;
        border-top-left-radius: 6px; border-top-right-radius: 6px;
        border-bottom-left-radius: 0;
    }
}