* {
    margin: 0;
    padding: 0;
    /* background-color: aqua; */
    box-sizing: border-box;
    /* outline: 1px solid black; */

}

header.navbar{
    position: sticky;
    top: 0%;
    z-index: 9999;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgb(22, 2, 30);
    height: 13vh;
}

.logo {
    height: 100%;
    margin-left: 5%;
}
div.nav {
    margin-right: 5%;
}

.nav {
    /* margin-right: 10%; */
    text-decoration: none;
}

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

.links {
    text-decoration: none;
    color: rgb(250, 248, 248);
    font-size: 1.2rem;
    font-weight: 500;
}

.links:hover {
    color: rgb(215, 131, 6);
    border-radius: 10%;
    font-size: large;
    font-weight: 600;
}

.main {
    display: flex;
    color: white;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 90vh;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)), url("image.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

a.order {
    padding: 0;
}

.order {
    /* height: 3rem; */
    font-size: large;
    padding: 1rem 2rem;
    background-color: rgb(22, 2, 30);
    color: white;
    border-radius: 1rem;
}

.order:hover {
    background-color: rgb(215, 131, 6);
    color: white;
    font-size: xx-large;
    /* scale: 1.05; */
    font-weight: 600;
    font-size: large;

}

.menu {
    /* height: 3rem; */
    margin-top: 0.5rem;
    color: white;
    border-radius: 1rem;
    background-color: transparent;
    padding: 1rem 2rem;
}

.menu:hover {
    background-color: rgb(244, 247, 244);
    color: rgb(11, 11, 11);
    font-size: large;
    font-weight: 500;
}

.menu-head {
    text-align: center;
    margin-top: 2rem;
    font-size: 2.5rem;
    color: rgb(22, 2, 30);
    text-decoration: underline rgb(215, 131, 6);
}

.menu-items {
    margin-top: 2rem;
    background-color: rgb(186, 189, 186);
    border-top-left-radius: 1rem;
    cursor: pointer;

}

.menu-items h2 {
    text-decoration: underline rgb(215, 131, 6);
    margin-left: 2rem;
    color: rgb(250, 248, 248);
    border-top-left-radius: 1rem;
    background-color: rgb(22, 2, 30);
}

.menu-items p {
    margin-left: 2rem;
    color: rgb(22, 2, 30);
    font-size: 1.2rem;
    font-weight: 500;
}
 div.card {
     min-width: 25vw;
     width: 30vw;
     font-size: small;
 }

 .card-title {
     font-size: medium;
 }

 .card-text {
     font-size: small;
 }

 .card-img-top {
     height: 35vh;

 }

 .m-2 {
     height: 30vh;
 }

 .card {
     overflow-y: hidden;
     margin: 1vw;
 }

 .btn {
     width: 100%;
     font-size: xx-small;
     /* height: 8vh; */
     padding: 0;
     margin: 0;
 }
.about-head {
    text-align: center;
    margin-top: 5rem;
    font-size: 2.5rem;
    color: rgb(22, 2, 30);
    text-decoration: underline rgb(215, 131, 6);
}

.about {
    display: flex;
    margin-top: 5rem;
}

.about-img {
    width: 50%;
    height: 60vh;
    margin-left: 2rem;

}

.about-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-title {
    font-size: 3.5rem;
    color: rgb(22, 2, 30);
    padding-top: 1rem;
    text-decoration: underline rgb(215, 131, 6);
}

.about-second {
    width: 50%;
    height: 60vh;
    margin-left: 2rem;
    line-height: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.about-second p {
    margin-top: 3rem;
    font-size: 1.2rem;
    color: rgb(22, 2, 30);
    font-weight: 500;
}

input {
    width: 90%;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(22, 2, 30);
}


.contact_first {
    /* align-items: center; */
    width: 90%;
    /* height: 60vh; */
    margin-left: 2rem;
}
.contact-head {
    text-align: center;
    margin-top: 5rem;
    width: 50%;
    /* margin-left: 60%; */
    /* font-size: 2.5rem; */
    color: rgb(22, 2, 30);
    text-decoration: underline rgb(215, 131, 6);
}

.select {
    width: 20%;
    padding: 0.5rem;
    margin-top: 3rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(22, 2, 30);
    gap: 3;
}


.contact-form {
    padding-left: 3%;
    width: 70%;
    margin-left: 20%;
    font-size: 1.2rem;
    display: flex;
    flex-direction: column;
    line-height: 2;
    color: rgb(22, 2, 30);
    font-weight: 500;
    margin-top: 3rem;
    border: 2px solid rgb(22, 2, 30);
    border-left: 2px solid rgb(22, 2, 30);
    border-radius: 1rem; 
} 

  h1.contact-head {
      margin-left: 30%;
  }

  button.subtn {
      margin: 5% 40%;
      border: none;
      background-color: transparent;
  }

  button.subtn:hover {
      color: red;
      font-weight: 800;
  }

  .map {
      height: 80vh;
      width: 80%;
      margin-top: 5%;
      margin-left: 10%;
  }
.btn:hover {
    background-color: brown;
    color: white;
    scale: 1.05;
    font-weight: 600;
    font-size: large;
}


.footer {
    margin-top: 3rem;
    background-color: rgb(22, 2, 30);
    color: white;
    justify-content: space-between;
    display: flex;
    padding: 1rem;
}

#home {
    scroll-margin-top: 13vh;
}

#menu {
    scroll-margin-top: 13vh;
}

#about {
    scroll-margin-top: 13vh;
}

#contact {
    scroll-margin-top: 13vh;
}

.items {
    display: flex;
    justify-content: space-around;
    overflow-x: auto;
    cursor: pointer;
}

.items::-webkit-scrollbar {
    display: none;
}

@media (max-width:1024px) {
    * {
        margin: 0;
        padding: 0;
    }

    .logo {
        margin-left: 5%;
    }

    div.nav {
        margin-right: 5%;
    }

    h3.tagline {
        font-size: medium;
    }

    div.card {
        min-width: 25vw;
        font-size: small;
    }

    .card-title {
        font-size: medium;
    }

    .card-text {
        font-size: small;
    }

    .card-img-top {
        height: 35vh;

    }

    .m-2 {
        height: 140px;
    }

    .card {
        overflow-y: hidden;
        margin: 1vw;
    }

    .btn {
        width: 100%;
        font-size: xx-small;
        /* height: 8vh; */
        padding: 0;
        margin: 0;
    }

    .contact-form {
        margin-left: 20%;
        width: 60%;
    }

    h1.contact-head {
        margin-left: 30%;
    }
         button.subtn {
             margin: 5% 40%;
             border: none;
             background-color: transparent;
         }
    
         button.subtn:hover {
             color: red;
             font-weight: 800;
         }
                 .map {
                     height: 80vh;
                     width: 80%;
                     margin-top: 5%;
                     margin-left: 10%;
                 }
    
}

@media (max-width:768px) {
    * {
        margin: 0;
        padding: 0;
    }

    div.nav {
        margin-right: 2%;
    }

    h1.title {
        font-size: x-large;
    }

    h3.tagline {
        font-size: medium;
    }

    button.order {
        font-size: small;
    }

    button.menu {
        font-size: small;
    }

    .menu-items p {
        display: none;
    }

    div.card {
        min-width: 25vw;
        font-size: small;
    }

    .card-title {
        font-size: medium;
    }

    .card-text {
        font-size: small;
    }

    .card-img-top {
        height: 35vh;

    }

    .m-2 {
        height: 130px;
    }

    .card {
        overflow-y: hidden;
        margin: 1vw;
    }

    .btn {
        width: 100%;
        font-size: xx-small;
        /* height: 8vh; */
        padding: 0;
        margin: 0;
    }

    .contact-form {
        margin-left: 20%;
    }

    h1.contact-head {
        margin-left: 30%;
    }

    button.subtn {
        margin: 5% 40%;
        border: none;
        background-color: transparent;
    }

    button.subtn:hover {
        color: red;
        font-weight: 800;
    }

    .map {
        height: 70vh;
        width: 80%;
        margin-top: 5%;
        margin-left: 12%;
    }
}

@media (max-width:480px) {
    * {
        margin: 0;
        padding: 0;
    }

    div.nav {
        margin-right: 1rem;
    }

    .navbar {
        position: sticky;
        top: 0;
    }

    ul.navlinks {
        padding: 0;
    }

    .links {
        font-size: 6px;
        padding: 0;
        /* width: 4px;  */
    }

    .links:hover {
        color: rgb(215, 131, 6);
        border-radius: 10%;
        font-size: xx-small;
        font-weight: 600;
    }

    a.order {
        font-size: 1rem;
        text-decoration: none
    }

    nav.nav {
        /* margin-top: 0px; */
        margin-right: 5%;
        /* width: 75%; */
    }

    .logo {
        /* height: 25px; */
        padding: 0%;
        top: 0;
        margin-left: 2px;
    }

    h1.title {
        font-size: small;
        margin-top: 20px;
        line-height: 0%;
    }

    .tagline {
        font-size: 0.5rem;
        /* margin-right: 1rem; */
    }
    h3.tagline{
        font-size: xx-small;
    }
    button.order {
        height: 5vh;
        padding: 3px;
        border: none;
        /* text-align: center; */
        font-size: 1rem;
        /* width: 15vw; */
    }

    button.menu {
        height: 5vh;
        padding: 0;
        border: none;
        margin-top: 5;
        /* text-align: center; */
        font-size: 1rem;
        /* width: 15vw; */
    }

    .menu-items p {
        display: none;
    }

    .menu-items h2 {
        font-size: large;
    }

    h1.menu-head {
        font-size: xx-large;
    }

    div.card {
        min-width: 50vw;
        font-size: small;
    }

    .card-title {
        font-size: small;
    }

    .card-text {
        font-size: small;
    }

    .card-img-top {
        height: 35vh;

    }

    .m-2 {
        height: 130px;
    }

    .card {
        overflow-y: hidden;
        margin: 1vw;
    }

    .btn {
        width: 100%;
        font-size: xx-small;
        /* height: 8vh; */
        padding: 0;
        margin: 0;
    }

    .about-head {
        margin-top: 1rem;
        font-size: xx-large;
    }

    .about-title {
        font-size: 2rem;
        margin-top: 3rem;
    }

    .about-second {
        height: auto;
        font-size: x-small;
        line-height: 1.1;
    }

    .about-second p {
        margin-top: 1rem;
    }

    .contact-head {
        margin-top: 1rem;
        margin-left: 0;
        width: 100%;
        /* font-size: 2rem; */
    }

    .contact-form {
        height: 500px;
        margin: 0;
        margin-left: 1rem;
        margin-top: 3rem;
        width: 80%;
    }

    .subtn {
        background-color: rgb(10, 233, 233);
        border-radius: 5px;
        font-weight: 500;
        border: none;
        width: 20vw;
        font-size: large;
        margin-left: 35%;
        margin-top: 1rem;
        /* height: 8vh; */

    }

    .map {
        margin-top: 2rem;
        margin-left: 1%;
        padding: 1rem;
    }

    .footer {
        flex-direction: column;
        font-size: x-small;
    }
}