* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
  }
  html,
  body {
    height: 100%;
    width: 100%;
    background-color: #ffffff;
  }


.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    width: 100%;
    height: 15vh;
    /* background-color: darkblue; */
    .l {
      width: 20%;
      height: 100%;
      /* background-color: darkcyan; */
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        height: 50px;
      }
    }
    .m {
      width: 50%;
      height: 100%;
      /* background-color: salmon; */
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      a {
        text-decoration: none !important;
        font-size: 1rem;
        color: black;
      }
      .search {
        width: 300px;
        height: 50px;
        background-color: #f8f8f8;
        border-radius: 30px;
        display: flex;
        align-items: center;
        justify-content: start;
        padding: 0px 1rem;
        input {
          width: 200px;
          height: 50px;
          border-radius: 30px;
          border: none;
          outline: none;
          background-color: #f8f8f8;
        }
        ::placeholder {
          padding: 10px;
        }
        img {
          height: 20px;
        }
      }
    }
    .r {
      width: 30%;
      height: 100%;
      /* background-color: sandybrown; */
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      .btn {
        padding: 0.5rem 2rem;
        background-color: #4b5563;
        border: none;
        outline: none;
        border-radius: 20px;
        cursor: pointer;
        color: #f8f8f8;
      }
      .signup {
        background-color: transparent;
        border: 1px solid #e5e7eb;
        color: black;
      }
      img {
        height: 30px;
      }
      .cart {
        height: 35px;
      }
    }
  }
  footer {
    width: 100%;
    height: 55vh;
    /* background-color: darkcyan; */
    /* padding: 1rem 2rem; */
    /* display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: column; */
    .top {
      width: 100%;
      height: 40vh;
      /* background-color: rgb(77, 93, 93); */
      padding: 1rem 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .l {
      width: 30%;
      height: 100%;
      /* background-color: darkgray; */
      display: flex;
      align-items: start;
      justify-content: start;
      flex-direction: column;
      padding: 2rem;
      img {
        height: 30px;
        margin-bottom: 10px;
      }
      .logo {
        height: 50px;
      }
    }
    .r {
      width: 70%;
      height: 100%;
      /* background-color: firebrick; */
      padding: 2rem;
      table {
        width: 100%;
        text-align: start;
        tr {
          text-align: start;
          padding: 1rem;
        }
        th {
          padding: 0.5rem;
  
          text-align: start;
        }
        td {
          padding: 0.5rem;
        }
      }
    }
    .bot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* background-color: darkblue; */
      height: 15vh;
      padding: 1rem 2rem;
  
      .left {
        width: 30%;
        /* background-color: saddlebrown; */
        height: 100%;
        display: flex;
        align-items: center;
        padding: 2rem;
  
        justify-content: start;
        h3 {
          color: gray;
          font-weight: 300;
        }
      }
      .right {
        width: 70%;
        /* background-color: rgb(255, 205, 170); */
        height: 100%;
        padding: 2rem;
  
        display: flex;
        align-items: center;
        justify-content: end;
        gap: 3px;
        img {
          height: 40px;
        }
      }
    }
  }