header{
    background-color: black;
    padding: 2em;
}

h1{
    color: white;
}

header nav a{
    background-color: gray;
    padding: 0.5em;
    text-decoration: none;
}

header nav a:hover{
    background-color: rgb(94, 90, 90);
    color: white;
}



main{
    background-color: burlywood;
    padding: 2em;
}

footer{
    background-color: black;
    padding: 2em;
}

nav{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 1em;
}

/*menu and catering food images css*/
.catering-images img{
        width: 275px;
        height: 250px;
}

.logo img{
    width: 100px;;
    height:100px;
}

.menu {
    display: flex;
    justify-content: center;
    gap:20px;
}

.menu img{
    width: 300px;
    height: 350px;
    border-radius:8px;
}

/* printer buttton css*/
.print-btn{
    margin-top: 30px;
    padding: 10px 20px;
    background-color: rgb(243, 148, 7);
    color: none;
    border: none;
    border-radius: 5px;
    cursor:pointer;
    font-size: 16px;
}

.print-btn:hover {
    background-color: rgb(216, 110, 12) 
}

@media print {
    header,
    footer,
    .print-btn{
        display:none;
    }
    body{
        background:white;
    }
    .menu{
        justify-content:flex-start;
    }
    .menu img{
        page-break-inside:avoid;
    }
}

/*media query*/
@media screen and (max-width: 600px) {

    nav {

        grid-template-columns: 1fr;
        gap: 1em;
    }

}
/*login form*/
.register {
    background: white;
    padding: 2em;
    margin-top: 2em;
    border-radius: 10px;
}

.toggle-register {
    padding: 10px 20px;
    background: black;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    margin-bottom: 1em;
}

.toggle-register:hover {
    background: darkgray;
}

#regForm {
    display: flex;
    flex-direction: column;
    gap: 1em;
    transition: all 0.3s ease;
}

#regForm input, #regForm select {
    padding: 0.7em;
    border-radius: 5px;
    border: 1px solid grey;
}

.submit-btn {
    padding: 0.8em;
    background: black;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.submit-btn:hover {
    background: gray;
}

.hidden {
    display: none;
}

/* Orders Css */

.order-section {
    max-width: 400px;
    margin: auto;
}

#orderForm {
    display: flex;
    flex-direction: column;  
    gap: 10px;               
}

#orderForm label {
    font-weight: bold;
}

#orderForm input,
#orderForm select,
#orderForm textarea {
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
}

.submit-btn {
    margin-top: 10px;
    padding: 10px;
    cursor: pointer;
}

/* packages CSS */
.packages {
    display: flex;
    flex-direction: column;  
    gap: 20px;
    max-width: 600px;
    margin: auto;
}

.package-box {
    border: 2px solid #ccc;
    padding: 15px;
    border-radius: 8px;
}

.package-box h2 {
    margin-bottom: 10px;
}

/* Map CSS */
.map-container {
    max-width: 800px;
    margin: 20px auto;
}

.map-container iframe {
    width: 100%;
    height: 400px;
    border-radius: 10px;
}