@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-regular.ttf");
}

body {
  font-family: "Open Sans", sans-serif;
}

a:hover {
  text-decoration: none;
}

a:focus {
  text-decoration: none;
}

.font-primary {
  font-family: "Open Sans", sans-serif;
}

.font-secondary {
  font-family: "Open Sans", sans-serif;
}

.design-title {
  font-size: 3.5rem;
  color: #0266ff;
}

.design-color {
  background-color: #1e2171;
}

.design-icon {
  color: #00a1e1;
}

.design-link {
  color: #1e2171;
}

.design-link:hover {
  color: #00a1e1;
  text-decoration: none;
}

.design-link:focus {
  color: #00a1e1 !important;
  text-decoration: none;
}

.design-btn {
  outline: none;
  border: none;
  border-radius: 0%;
  padding: 1.5rem 3rem;
  letter-spacing: 0.1rem;
  font-weight: bold;
  background-color: #1e2171;
  color: #ffffff;
  cursor: pointer;
}

.design-btn:hover {
  color: #ffffff;
  text-decoration: none;
}

.design-btn:focus {
  background-color: #00a1e1;
  color: #ffffff;
  text-decoration: none;
}

.design-btn:active {
  background-color: #00a1e1;
  color: #ffffff;
}

.design-title {
  color: #013ba6;
}

.design-title-underline {
  margin: 0rem 0rem 8rem;
  width: 10%;
  border-bottom: 4px solid #013ba6;
}

.design-text {
  color: #013ba6;
}

.design-minus-btn {
  padding: 0rem 1rem;
  font-size: 1.6rem;
  text-decoration: none;
}

.design-quantity {
  margin: 0rem 0.2rem;
  height: 2.6rem;
  font-family: Arial, sans-serif;
  font-size: 1.6rem;
  color: #013ba6;
}

.design-plus-btn {
  padding: 0rem 1rem;
  font-size: 1.6rem;
  text-decoration: none;
}

.design-cart-btn {
  padding: 0.5rem 3rem;
  font-size: 1.2rem;
}

/* .badge-sale {
  position: absolute;
  top: -2rem;
  right: -1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  padding: 1rem;
  width: 8rem;
  height: 8rem;
  text-align: center;
  font-size: 2.4rem;
  background-color: #ff8401;
  color: #ffffff;
  box-shadow: 1px 1px 2px #757575;
  z-index: 1;
} */

.badge-sale {
  position: absolute;
  top: -2rem;
  right: -1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  padding: 1rem;
  width: 6rem;
  height: 6rem;
  text-align: center;
  font-size: 1.8rem;
  background-color: #e30071;
  color: #ffffff;
  box-shadow: 1px 1px 2px #757575;
  z-index: 1;
}

.badge-sale::before {
  content: "Sale";
}

.badge-out-of-stock {
  position: absolute;
  top: -2rem;
  right: -1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  padding: 1rem;
  width: 6rem;
  height: 6rem;
  text-align: center;
  font-size: 1.2rem;
  background-color: #e30071;
  color: #ffffff;
  box-shadow: 1px 1px 2px #757575;
  z-index: 1;
}

.badge-out-of-stock::before {
  content: "Out of Stock";
}

/* .badge-new {
  position: absolute;
  top: 0rem;
  left: -1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  width: 8rem;
  height: 4rem;
  text-align: center;
  font-size: 2rem;
  background-color: #9b0571;
  color: #ffffff;
  box-shadow: 1px 1px 2px #757575;
  z-index: 1;
  transform: rotate(-45deg);
}

.badge-new::before {
  content: 'New';
} */

.pagination {
  margin: 0;
  margin-top: 3px;
}

.pagination > li > a {
  background-color: #ffffff;
  color: #212121;
  border: none;
  margin: 0 1px;
  padding: 8px;
  font-family: Arial, sans-serif;
  font-weight: 700;
}

.pagination > .active > a {
  background-color: #ffffff !important;
  color: #00a1e1 !important;
  border: none !important;
}

.pagination > .active > a:hover,
.pagination > li > a:hover {
  background-color: #ffffff !important;
  color: #00a1e1 !important;
  border: none !important;
}

.pagination > li:first-child > a,
.pagination > li:last-child > a {
  background-color: #ffffff;
  color: #212121;
  border-radius: 0;
}

.item-price {
  font-family: Arial, sans-serif;
}

/**
 * Firefox has a bug that prevents the option element from rendering custom
 * fonts. Use web safe fonts for all input fields for consistency.
 */

input,
select,
textarea,
option {
  font-family: sans-serif;
}