:root {
  --main-background-color: #0055a5;
  --accent-color: #0b73bb;
  --green-color: #006400;
  --or-green-color: #36b84b
}
* {
  box-sizing: border-box;
  font-family: Oswald,sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
  scrollbar-color: var(--accent-color);
  scrollbar-width: thin
}
body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}
img,
picture {
  display: block;
  margin: auto;
  max-width: 100%
}
.phone_banner {
  background-color: var(--main-background-color);
  -moz-border-bottom-left-radius: .5rem;
  border-bottom-left-radius: .5rem;
  -moz-border-bottom-right-radius: .5rem;
  border-bottom-right-radius: .5rem;
  box-shadow: 0 .25rem 1rem rgb(0 0 0 / .1);
  margin: auto;
  width: 15rem
}
.phone_banner h1 {
  color: #fff;
  display: flex;
  font-size: 1rem;
  justify-content: center
}
.item_added {
  margin-top: 8rem;
  align-items: center;
  background-color: #fff;
  border-color: var(--green-color);
  border-radius: .5rem;
  border-style: solid;
  border-width: .1rem;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20%;
}
.item_added p {
  color: var(--main-background-color);
  margin: 2rem
}
.navbar {
  align-items: center;
  background-color: var(--main-background-color);
  color: #fff;
  display: flex;
  height: 3rem;
  justify-content: space-between
}
.navbar_links {
  height: 100%;
  margin: auto
}
.navbar_links ul {
  display: flex
}
.navbar_links li {
  list-style: none
}
.navbar_links li a {
  color: #fff;
  display: block;
  padding: 1rem;
  text-decoration: none
}
.navbar_links li:hover {
  background-color: #fff;
  cursor: pointer
}
.navbar_links li a:hover {
  color: var(--main-background-color)
}
.toggle_button {
  display: none;
  flex-direction: column;
  height: 21px;
  justify-content: space-between;
  position: absolute;
  right: 1rem;
  top: .75rem;
  width: 30px
}
.toggle_button .bar {
  background-color: #fff;
  border-radius: 10px;
  height: 4px;
  width: 100%
}
.logo {
  max-height: auto;
  max-width: 10%;
  padding: 1%;
  position: absolute;
  top: 0
}
.logo:hover {
  transform: scale(1.1)
}
.search_container {
  background-color: #fff;
  box-shadow: 0 .25rem 1rem rgb(0 0 0 / .1);
  display: flex;
  height: 3rem;
  justify-content: center
}
.footer_margin {
  background-color: #fff;
  height: 10rem
}
.search_button {
  cursor: pointer;
  margin: auto 2rem
}
.search_container form {
  display: flex;
  width: 60%
}
.search_container input {
  align-items: center;
  border: none;
  color: var(--main-background-color);
  display: flex;
  outline: 0;
  text-align: center;
  width: 100%
}
.search_container input:focus::placeholder {
  color: transparent
}
.search_container input::placeholder {
  color: var(--accent-color)
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2
}
.footer {
  background-color: var(--main-background-color);
  display: flex;
  justify-content: center;
  margin-top: auto
}
.footer-heading {
  color: #fff;
  display: flex;
  flex-direction: column;
  margin: 3rem
}
.footer-heading h2 {
  margin-bottom: 1rem
}
.footer-heading a {
  color: #fff;
  font-size: small;
  margin-bottom: .5rem;
  text-decoration: none
}
.footer-heading a:hover {
  text-decoration: underline
}
.search_container img {
  max-height: 1rem
}
h1 h2 p {
  font-weight: 400
}
.container {
  margin: auto;
  max-width: 80%;
  padding-inline: 1rem
}
.grid {
  margin-top: 4rem;
  display: grid;
  align-items: center;
  justify-content: space-around;
  gap: 3rem;
  grid-template-columns: repeat(auto-fit,minmax(1vh,30vh));
  justify-content: center
}
.card__img {
  margin-top: 0;
  -moz-border-radius: .5rem;
  border-radius: 2%;
}
.add_sign {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Adjust as needed */
  font-size: 24px; /* Adjust as needed */
}
.stacked {
  display: grid
}
.stacked > * {
  grid-column: 1/2;
}
.card__title {
  color: var(--main-background-color);
  font-size: 1.25rem;
  line-height: 1.1
}
.card__quantity {
  color: var(--green-color)
}
.card__dimensions {
  color: var(--main-background-color)
}
.card__description {
  color: var(--green-color)
}
.card__price {
  font-size: 1.75rem
}
.card__content {
  align-self: end;
  background-color: #fff;
  -moz-border-radius: .5rem;
  border-radius: .5rem;
  box-shadow: 0 .25rem 1rem rgb(0 0 0 / .1);
  padding: .5rem;
  position: relative;
  z-index: 0;
  margin-bottom: 6rem;
}
.cart_button_container {
  display: block;
  margin-left: 70%;
  position: absolute;
  top: 3rem
}
.cart_button {
  align-items: center;
  background-color: var(--main-background-color);
  border-radius: 4px;
  color: #fff;
  display: flex;
  height: 2rem;
  margin: .5rem;
  padding: 1rem;
  text-align: center
}
.cart_button img {
  margin-left: -1rem;
  margin-top: -1rem;
  max-height: 2rem;
  padding: .5rem
}
#paypal-button-container {
  align-items: center;
  color: #fff;
  display: flex;
  justify-content: center;
  margin: auto;
  margin-bottom: 3rem;
  margin-top: 1rem;
  width: 40%
}
.cart_image {
  margin-top: -1rem
}
.cart h1 {
  color: var(--main-background-color);
  font-size: large;
  margin: auto .5rem;
  text-align: center
}
.currently {
  margin-bottom: 2rem
}
.numbers_container {
  display: flex;
  margin: 3rem auto;
  width: 60%
}
.title_container {
  margin: 5rem;
  text-align: center
}
.cart_number {
  font-size: 1.75rem;
  margin-right: 3rem
}
.cart {
  background-color: #fff;
  border-color: var(--green-color);
  border-radius: .5rem;
  border-style: solid;
  border-width: .1rem;
  margin: 0 auto;
  position: relative;
  top: -1rem;
  width: 80%;
  z-index: -1
}
.circular_button {
  align-items: center;
  background-color: var(--or-green-color);
  -moz-border-radius: 50%;
  border-radius: 50%;
  box-shadow: 0 .25rem 1rem rgb(0 0 0 / .1);
  color: #fff;
  display: flex;
  justify-content: center
}
.circular_button:hover {
  cursor: pointer;
  transform: scale(1.2)
}
.cart_options_container {
  align-items: center;
  display: flex;
  height: 3rem;
  justify-content: space-evenly;
  margin-left: 20%;
  margin-top: 1rem;
  width: 60%
}
.quantity {
  height: 3rem;
  width: 3rem
}
.quantity input {
  background-color: transparent;
  border: none;
  color: #fff;
  font-size: 1rem;
  height: 3rem;
  margin: -.1rem;
  outline: 0;
  text-align: center;
  width: 3rem
}
.quantity p {
  font-size: large
}
.minus {
  height: 2rem;
  width: 2rem
}
.minus p {
  font-size: large
}
.plus {
  height: 2rem;
  width: 2rem
}
.plus p {
  font-size: large
}
.remove_sign {
  border-radius: .5rem;
  color: red;
  cursor: pointer;
  font-size: medium;
  margin: auto;
  margin-top: 1rem;
  padding: 1rem;
  text-align: center
}
.remove_sign:hover {
  background-color: red;
  color: #fff
}
.add_to_cart {
  align-items: center;
  background-color: var(--or-green-color);
  -moz-border-radius: 50%;
  border-radius: 50%;
  box-shadow: 0 .25rem 1rem rgb(0 0 0 / .1);
  color: #fff;
  display: flex;
  height: 3rem;
  margin-left: 90%;
  position: relative;
  width: 3rem;
  z-index: 1
}
.add_to_cart p {
  font-size: 3rem;
  margin-left: .87rem
}
.off {
  display: none
}
.cart_button:hover,
.cart_checkout_button:hover {
  background-color: #fff;
  border-color: var(--green-color);
  border-style: solid;
  border-width: .1rem;
  color: var(--main-background-color);
  cursor: pointer;
  transform: scale(1.1)
}
.cart-items {
  background-color: var(--or-green-color);
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: #fff;
  height: 2rem;
  line-height: 2rem;
  margin: -1.5rem;
  margin-left: 85%;
  position: relative;
  text-align: center;
  width: 2rem;
  z-index: 3
}
.add_to_cart:hover {
  background-color: var(--accent-color);
  cursor: pointer;
  transform: scale(1.5)
}
.locations h1,
.shipping_methods h1 {
  color: var(--green-color);
  cursor: pointer;
  padding: .5rem;
  text-align: left
}
.locations h1:hover,
.shipping_methods h1:hover {
  background-color: var(--main-background-color);
  color: #fff;
  padding: .5rem
}
@media (max-width:1100px) {
  .item_added {
    width: 60%;
    align-items: center;
  }
  .logo {
    width: 10rem;
    margin: 0.3rem;
  }
  .footer-heading a {
    text-align: center
  }
  .toggle_button {
    display: flex;
    position: absolute;
    z-index: 99
  }
  .navbar_links {
    width: 100%
  }
  .navbar {
    align-items: flex-start;
    flex-direction: column
  }
  .navbar_links ul {
    flex-direction: column;
    width: 100%
  }
  .navbar_links ul li {
    background-color: var(--main-background-color);
    position: relative;
    text-align: center;
    z-index: 4
  }
  .navbar_links ul li a {
    padding: .9rem
  }
  .navbar_links.active {
    display: flex
  }
  .footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    width: auto;
  }
  .grid {
    grid-template-columns: repeat(auto-fit,minmax(18rem, 1fr))
  }
  .numbers_container {
    flex-direction: column;
    text-align: center;
  }
}
body::-webkit-scrollbar {
  width: .5rem
}
body::-webkit-scrollbar-track {
  position: absolute
}
body::-webkit-scrollbar-thumb {
  background-color: var(--accent-color);
  border-radius: 1rem
}