#navbar {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 20px 0;
  background-color: rgba(255, 255, 255, 0.913);
  #logo {
    height: 50px;
  }

  #menu-list {
    margin-bottom: 0;

    a {
      text-decoration: none;
      color: var(--primary-black);
      &:hover {
        color: var(--green);
      }
    }
  }

  #side_menu_toggler {
    cursor: pointer;
    font-size: 25px;
  }
  #sideMenu {
    position: fixed;
    top: 0;
    left: 0;
    width: fit-content;
    height: 100vh;
    padding-right: 60px;
    background-color: white;
    z-index: 20;
    transition: all 0.8s ease;
  }
  .hide {
    left: -100% !important;
  }
}

/* latest_products starts */
#latest_products {
  .accordion-button {
    &:focus {
      box-shadow: none !important;
    }
  }
  .accordion-body {
    max-width: fit-content;

    .product_tab_buttons {
      all: unset;
      flex-shrink: 0;
      cursor: pointer;
      margin: 12px;
      margin-right: 18px;
      border-bottom: 2px solid transparent;
      border-width: 10%;
      transition: all 0.3s ease;
    }
    .active_btn {
      color: var(--green);
      border-bottom: 2px solid var(--green);
      border-width: 100%;
    }
  }

  .product_tab {
    display: none;
  }

  .active_tab {
    display: flex;
  }
  .product_card {
    height: 415px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;

    @media (width < 768px) {
      width: 90%;
    }
    @media (width < 568px) {
      height: auto;
    }

    .img_box {
      min-height: 300px;
      max-height: 300px;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      @media (width < 568px) {
        min-height: 200px;
        max-height: 200px;
        margin-bottom: 15px;
      }
      img {
        transition: all 1s ease;
        width: 90%;
        max-width: 250px;
      }
      &:hover img {
        width: 95%;
      }
      .toolpit {
        text-decoration: none;
        text-align: center;
        position: absolute;
        z-index: 10;
        opacity: 0;
        bottom: 25%;
        background-color: #000000;
        color: rgb(248, 247, 247);
        font-weight: 500;
        padding: 5px 25px;
        transition: all 0.4s;
        &:hover {
          background-color: #000000ca;
        }
        @media (width < 568px) {
          font-size: small;
        }
      }
      &:hover .toolpit {
        opacity: 1;
        bottom: 35%;
      }
    }

    .text_box {
      width: 90%;
      .description {
        margin-bottom: 0;
      }
      .price {
        text-align: center;
        color: var(--green);
        .crosed {
          color: black;
          text-decoration: line-through;
        }
      }
    }
  }
}
/* latest_products ends */

#footer {
  background-color: var(--footer-black);
  padding: 18px 0;
  margin-top: 3rem;

  a {
    text-decoration: none;
    color: var(--primary-gray);
    transition: 0.3s ease;
    @media (width < 768px) {
      font-size: small;
    }
    &:hover {
      color: var(--gray-white);
      .icon {
        color: var(--gray-white);
      }
    }
  }
  .icon {
    margin-right: 5px;
    color: var(--primary-gray);
    transition: 0.3s ease;
  }
}