* {
      margin: 0;
      padding: 0;
}

body {
      font-family: 'Karla', 'Arial', sans-serif;
      font-size: 1.3rem;
}

/* nav bar */
nav {
      display: flex;
      position: fixed;
      z-index: 999;
      top: 0;
      width: 100%;
      height: 70px;
      background-color: white;
      justify-content: space-around;
      align-items: center;
}

nav .mobile-menu {
      cursor: pointer;
      
}
nav .mobile-menu.active .mobile:nth-child(1){
      transform: translateY(8px) rotate(45deg);
}
nav .mobile-menu.active .mobile:nth-child(2){
      opacity: 0;
}

nav .mobile-menu.active .mobile:nth-child(3){
      transform: translateY(-8px) rotate(-45deg);
}

.mobile {
      height: 3px;
      width: 25px;
      background-color: darkslategray;
      margin: 5px;
}

nav .img {
      max-width: 150px;
      width: 100%;
      cursor: pointer;
}

nav .img .logo {
      max-width: 100%;
      width: fit-content;
      cursor: pointer;
}

nav .card-shoping i {
      font-size: 30px;
      cursor: pointer;
}

main {
      display: grid;
      padding-top: 70px;
      padding-left: 5px;
      padding-right: 5px;
      gap: 50px;
}

main .first-part .mobile-nav-bar {
      background-color: white;
      padding: 25px 20px;
      display: none;
      position: fixed;
      width: 100%;
      z-index: 1000;
      Transform: translatey(0);
}
main .first-part .mobile-nav-bar.active{
      display: block;
      Transform: translateX(100%)
      transition: Transform 1s ease;
      
}

main .first-part .mobile-nav-bar ul {
      list-style: none;
}

main .first-part .mobile-nav-bar ul li a {
      text-decoration: none;
      color: black;
      font-size: 1rem;
}

main .first-part .mobile-nav-bar ul li a:hover {
      color: #F4CE14;
      text-decoration:underline;
}

main .first-part {
      background-color: #495E57;
      padding-bottom: 50px;
}

main .first-part .heading {
      padding: 0 30px;
}

main .first-part h1 {
      padding-top: 10px;
      color: #F4CE14;
}

main .first-part h2 {
      color: white;
      font-size: 2rem;
}

main .first-part .description {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 20px;
      font-size: 1.2rem;
      font-weight: 400;
      font-family: 'Karla', sans-serif;
      color: #EDEDED;
      padding: 0 30px;
}

main .first-part .description img {
      max-width: 200px;
      max-height: 200px;
      width: 100%;
      height: 100%;
      border-radius: 5px;
}

main .first-part .reserve-table {
      padding: 15px 30px;
}

main .first-part .reserve-table button {
      font-size: 1.2rem;
      color: #333333;
      background-color: #F4CE14;
      border: none;
      border-radius: 15px;
      padding: 10px;
      cursor: pointer;
}

/* part tow */
main .part-tow-Delivery {
      padding: 0 30px;
}

main .part-tow-Delivery .h-three {
      padding-top: 30px;
      font-weight: bold;
      font-family: 'Karla', sans-serif;
      Transform: uppercase;
      font-size: 1.1rem;
      justify-self: center;
}

main .part-tow-Delivery .Delivery-bar-menu {
      display: flow-root;
      padding: 30px 0;
      justify-self: center;
}

main .part-tow-Delivery button {
      font-size: 1rem;
      padding: 10px;
      border-radius: 15px;
      border: none;
      background-color: #EDEDED;
      cursor: pointer;
      color: #333333;
      box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
      text-align: center;
      font-weight: bold;
}

main .part-tow-Delivery button:hover {
      box-shadow: 1px 1px 16px #F4CE14;
      background-color: #F4CE14;
}

/* section / cards */
main section {
      padding: 0 30px;
      padding-top: 30px;
}

main section .cards {
      display: flex;
      flex-direction: column;
      justify-self: center;
      max-width: 250px;
      row-gap: 70px;
}

main section .cards .card {
      display: flex;
      flex-direction: column;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
      justify-self: center;
      height: fit-content;
      max-width: 100%;
      padding: 15px;
      transition: transform 0.3s, box-shadow 0.3s;
      cursor: pointer;
      text-align: center;
      z-index: -100px;
}

main section .cards .card p:first-of-type {
      text-align: start;
      padding: 10px;
      font-size: 1.2rem;
}

main section .cards .card h5 {
      padding: 10px;
}

main section .cards .card a {
      font-size: 1rem;
}

main section .cards .card:hover{
      transform: translateY(8px);
      box-shadow: 1px 2px 8px 8px rgba(0, 0, 0, 0.2);
}

main section .cards .card img {
      width: 100%;
      border-radius: 5px;
}

strong {
      color: red;
      font-size: 1rem;
}