style.css

body{
    margin: 0;
    padding: 0;
    background-color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}



.navigation{
    display: flex;
    justify-content: space-between;
    background-color: rgb(255, 255, 255);
    padding-left: 2rem;
    padding-right: 3rem;


}

.eats{
    color: orange;
    font-weight: bold;
}

.left-nav ul{
    list-style: none;
    display: flex;
}


.right-nav ul{
    list-style: none;
    display: flex;
    gap: 3rem;
}



.right-nav a{
    text-decoration: none;
    color: black;
    font-weight: bold;
    font-size: 16px;
    
}

.right-nav a:hover{
    color: #ff6b32;
}

.dropdownshow {
    display: none;    
}


/* desining the banner button class inside the banner */
.banner-container{
    position: relative;
    width: 100%;
    line-height: 0;
    
}



.banner-buttons{
    position: absolute;
    bottom:10%;
    left: 10%;
    display: flex;
    gap: 1vw;
    padding: 0.5vw 1vw;
    border-radius: 5px;
}

.banner-buttons .btn{
    font-weight: bold;
    font-size: 1.5vmin;
    padding: 0.5vw 1vw;;
    text-decoration: none;
    min-width: 8vw;
}
.btn.btn-primary{
    background-color: #fdca3f;
    color: black;
    border-color: rgb(0, 0, 0);

}
.btn-primary {
    background-color: transparent;
    border-color: orange;
    color: rgb(235, 165, 35);
    
}
.btn.btn-primary:hover {
    background-color: rgb(129, 121, 112);
    border-color: rgb(224, 205, 183);
    color: #ffffff;
    
}

.btn.btn-secondary:hover {
    background-color: #fdca3f;
    border-color: rgb(0, 0, 0);
    color: #ffffff;
    
}


.mobile{
    display: none;
}
.desktop{
    display: block;
}

.mobile-food{
    display: none;
}

.back{
    background-color: rgb(23, 95, 159);
}

@media (max-width: 600px) {
    .desktop{
        display: none;
    }

    .mobile{
        display: block;
        .bars{
            font-weight: bold;
            text-align: center;
            padding-top: 2rem;
            font-size: 20px;
        }
    }
    .mobile-food{
        display: block;
    }

    .second-footer{
        display: none
    }

    .right-nav ul{
        display: none;
    }

    .dropdownshow{
        display: block;
    }

    .banner-buttons {
        flex-direction: column;
        align-items: flex-start;
        bottom: 20%; /* Same relative position */
        left: 35%; /* Same relative position */
        padding: 1.5vw 2vw;
    }
    .banner-buttons .btn {
        font-size: 3vmin;
        padding: 3vw 1.5vw;
        min-width:30vw;
    }
}



/* styling for the part main */
.main{
    padding: 1rem;
    font-family: Arial, Helvetica, sans-serif;
}


.bars{
     margin-top: 3rem;
    margin-bottom: 2rem;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;

}



/* styling for the column grid */
.card-flexing{
    justify-content: center;
    display: flex;
    padding-left: 8rem;
    padding-right: 8rem;
    gap: 2rem;

    .btn.btn-primary{
        align-items: center;
        background-color: #ff6b32;
        color: white;
    }
    .btn.btn-primary:hover{
        background-color: #a0a0a0;
    }
    
}

#barCarousel {
    margin: 4rem;
    display: flex;
    justify-content: center; /* Horizontally center the carousel */
    align-items: center; 
    
}

/* css code for the section, popular food odered */
.food{
    margin-top: 3rem;
    margin-bottom: 2rem;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;

}


.space{
    padding-left: 8rem;
    padding-right: 8rem;
    row-gap: 2rem;
    .card-img-top {
  height: 200px;
  object-fit: cover;
}
}

.food-card{
    .btn.btn-success{
        color: #ffffff;
    }
}
 .btn.btn-success:hover{
      background-color:#ff6b32;
    }


/* css code for the review */

.button{
    margin-top: 5rem;
    margin-bottom: 2rem;
    text-align: center;
    .btn.btn-primary{
        font-family:Arial, Helvetica, sans-serif;
        background-color: #ff6b32;
        color: #e9e9e9;
        font-size: 20px;
        font-weight: bold;
         border-radius: 1.5rem;
         border-color: #ff6b32;
    }
    .btn.btn-primary:hover{
        color: #011628;
    }
}

/*  */
/* css code for the staff page which have been omprted form w3shcool */
/*  */
.members{
        color: #000000;
        font-size: 3rem;
        font-weight: bold;
        background-color: #ff6b32;
        padding: 4rem;
        text-align: center;
        text-shadow: 1rem 1rem 2rem;
}
.members:hover{
            color:#ffffff;
        }
    
.card2 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
  margin-top: 3rem;


.title {
  color: grey;
  font-size: 18px;
}

button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

a {
  text-decoration: none;
  font-size: 22px;
  color: black;
}

button:hover, a:hover {
  opacity: 0.7;
}



}




/* Below form here is only the CSS code for footer */
/*  */
/* 
 */
 /* 
 /* /* css code for first- footer  */
.first-footer{
    background-color: #ff6b32;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    margin-top: 3rem;
    padding-top: 3rem;
    padding-bottom: 3rem;

    .btn.btn-primary:hover {
    background-color: rgb(129, 121, 112);
    border-color: rgb(224, 205, 183);
    color: #ffffff;
    
}

   .text1{
        text-align: center;
        font-size: 1.8rem;
        font-weight: bold;

    }

    .text2{
        padding: -5rem;
        font-size: 1rem;
        text-align: center;
        font-weight: 550;
        
    }

    form{
        padding-top: 1.5rem;
        text-align: center;
    
    .btn.btn-primary{
        border-radius: .5rem;
    }
}
}


/* CSS for the second footer */
.second-footer {
  color: white;
  background-color: #011628;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 3rem 4rem 5rem 4rem;
}

.second-footer ul {
  list-style: none;
  padding-left: 0;
}

.footer-heading1,
.footer-heading2,
.footer-heading3,
.footer-heading4 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 1rem;
}

.column1 li,
.column2 li,
.column3 li,
.column4 li {
  opacity: 0.7;
  margin-bottom: 10px;
}

.column2 a,
.column3 a,
.column4 a {
  text-decoration: none;
  color: white;
  font-size: 18px;
}

.column2 a:hover,
.column3 a:hover,
.column4 a:hover {
  color: #ff6b32;
  text-decoration: none;
}



/* css coding for third footer */
.third-footer{
 color: white;
  background-color: #011628;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 3rem 4rem 5rem 4rem;
  gap: 2rem;

.right-third-footer{
    display: flex;
    gap: 20px;
}
   
    .right-third-footer a{
        text-decoration: none;
        color: white;
    }
    .right-third-footer a:hover{
        color: #ff6b32;
    }
}


/* css  code for the page privacy policy */
.policy-container{
    background-color:hsl(0, 0%, 100%);

.mb-4{
    background-color: #e9e9e9;
    padding: 3rem;
    color: #ff6b32;
}

 .policy-text{
        color: rgb(0, 0, 0);
        padding: 8rem;
    }

    strong{
        font-size: 18px;
        font-weight: 50;
        color: black;
    }

    .a{
        color: #ff6b32;
    }
}

/* css code for the terms and services */
.terms-container{
      background-color:hsl(0, 0%, 100%);

.mb-4{
    background-color: #e9e9e9;
    padding: 3rem;
    color: #ff6b32;
}

 .terms-text{
        color: rgb(0, 0, 0);
        padding: 8rem;
    }

    strong{
        font-size: 18px;
        font-weight: 50;
        color: black;
    }
    
    .a{
        color: #ff6b32;
    }
}
.a:hover{
    color: #011628;
}

/* css code for the about us page */
.about-us{
    font-family: Arial, Helvetica, sans-serif;
    font-size: xx-large;
    font-weight: bold;
    text-align: center;
    margin-left: 5rem;
    margin-right: 5rem;
    padding: 4rem;
    color: #ff6b32;
}
.about-us:hover{
        color: #011628;
    }

    .about{
        color: #ff6b32
    }

    .about:hover{
            color: #011628;
        }

    .about-us-text{
        padding: 5rem;
    }


    /*  */
    /* this section is css code for the services pages */
    .services-card{
        .card {
    justify-content: space-evenly;
    border: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
    }
    .services-title{
    background-color: #ff6600;
    color: white;
    padding: 5rem;
    text-align: center;
}
.service-sub-title{
    padding: 3rem;
    text-align: center;
    font-weight: bold;
    font-size: 33px;


}