*,
*::before,
*::after {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 0;
  margin: 0;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

.hidden {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
}

.bg-container {
  background-color: #f7f7f7;
}

.bg-highlight {
  background-color: #d35266;
}

.text-highlight {
  color: #d35266;
}

.bg-light-container {
  background-color: #888;
}

.bg-dark-container {
  background-color: #333;
}

.text-highlight-dark {
  color: #333;
}

.gotham-light {
  font-family: "Gotham Rounded Light", sans-serif;
}

.gotham-bold {
  font-family: "Gotham Bold", sans-serif;
}

.helvetica-light {
  font-family: "Helvetica Neue Light", sans-serif;
}

.helvetica-medium {
  font-family: "Helvetica Neue Medium", sans-serif;
}

.helvetica-bold {
  font-family: "HelveticaNeue-Bold", sans-serif;
}

.helvetica-ultra {
  font-family: "Helvetica Neue UltraLight", sans-serif;
}

.nav_img {
  width: 2em;
  height: auto;
}

.nav_logo-div h2 {
  font-size: 1.5em;
}

.fa-bars {
  font-size: 1.5em;
}

header {
  background:
    linear-gradient(to top, transparent, #d35266),
    linear-gradient(to bottom, transparent, #d35266),
    url("images/flowingdots.gif");
  background-size: cover;
  background-position: center;
  padding: 20px 40px;
  position: relative;
}

.header_upper-div {
  margin-top: 8vw;
  display: none;
}

.header_upper-div h1 {
  font-size: 5em;
}

.header_div--div span {
  position: relative;
}

.header_div--div > span::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translate(0, -30%);
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.header_form {
  display: flex;
  flex-direction: column;
}

form input[type="text"] {
  border: none;
  margin-bottom: 3px;
}

.sec-1_div {
  max-width: 600px;
  height: auto;
  position: relative;
}

.sec-1_div-img img {
  width: 100%;
  height: auto;
}

.sec-1_arrow-span1,
.sec-1_arrow-span2 {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px 20px;
  border: 1px solid lightgray;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.sec-1_arrow-span1 {
  left: -90px;
}

.sec-1_arrow-span2 {
  right: -70px;
}

.sec-2,
.sec-3 {
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
}

.products-div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.home-div {
  max-width: 290px;
  height: auto;
}

.home-div:hover {
  cursor: pointer;
}

.footer_nav > a {
  display: block;
  font-size: 0.8em;
}

.card-body_purchase-div a:first-child {
  flex: 1;
  border-right: 1px solid #333;
}

.card-body_purchase-div a:last-child {
  flex: 5;
}

.person-info,
.card-text {
  font-style: normal;
  font-size: 0.9em;
}

.section-heading-div p,
.footer_logo-section p,
.footer_person-info p {
  font-size: 0.8em;
}

footer {
  border-bottom: 4px solid #d35266;
}

.footer_logo-section h2 {
  font-size: 1.1em;
}

.footer_img {
  width: 3em;
  height: auto;
}

.footer_h6 {
  border-bottom: 1px solid #d35266;
}

.footer_categories-div {
  display: flex;
  justify-content: space-between;
}

.footer_person-info {
  display: flex;
}

.lower-footer-div p {
  font-size: 0.7em;
}

.footer_person-info p:first-child {
  flex: 1;
  margin-right: 4px;
}

.footer_person-info p:last-child {
  flex: 1;
}

.lower-footer-icons-div {
  display: flex;
  justify-content: center;
}

@media only screen and (min-width: 768px) {
  .nav_img {
    width: 4em;
  }

  header {
    padding: 20px 100px;
  }

  .header_upper-div {
    display: block;
  }

  .header_div {
    display: flex;
  }

  .header_div--div:first-child {
    flex: 1;
    margin-right: 2px;
  }

  .header_div--div:last-child {
    flex: 2;
  }

  .header_form {
    align-items: center;
    flex-direction: row;
  }

  .header_form input[type="text"] {
    flex: 2;
    margin-right: 2px;
    margin-bottom: 0;
  }

  .header_form a {
    flex: 1;
  }

  .sec-1_div {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    max-width: 800px;
  }

  .sec-1_div-img {
    margin-right: 30px;
    flex: 1;
  }

  .sec-1_desc-div {
    flex: 2;
  }

  .card-body_purchase-div {
    display: inline-block;
    width: 70%;
  }

  .upper-footer-div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
  }
}

@media only screen and (min-width: 1024px) {
  .header_lower-div {
    display: flex;
    align-items: center;
  }

  .header_div {
    flex: 1;
    margin-right: 2px;
  }

  .header_form input[type="text"] {
    margin-right: 20px;
  }

  .header_form {
    flex: 1;
  }

  .sec-1_arrow-span1,
  .sec-1_arrow-span2 {
    display: flex;
    transition: 0.2s ease-in-out;
  }

  .sec-1_arrow-span1:hover,
  .sec-1_arrow-span2:hover {
    transform: scale(1.1) translateY(-50%);
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
    cursor: pointer;
  }

  .home-div {
    max-width: 250px;
    transition: 0.4s ease-in-out;
  }

  .home-div:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.4);
  }

  .home-div h5 {
    font-size: 0.95em;
  }

  .home-div span {
    font-size: 0.8em;
  }

  .upper-footer-div {
    padding: 0 20px;
    grid-template-columns: repeat(4, 1fr);
  }

  .lower-footer-div {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
  }
}