@font-face {
  font-family: simply-mono;
  src: url(fonts/SimplyMono-Book.ttf);
}

@font-face {
  font-family: comfortaa;
  src: url(fonts/Comfortaa-Regular.ttf);
}

body,
html {
  margin: 0;
  padding: 3px;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, black, rgb(1, 1, 83), black);
  color: white;
  font-family: comfortaa;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.logo {
  width: 13em;
  display: inline-block;
}

.nav {
  margin: 10px 0 20px 0;
}

.nav a {
  color: white;
  text-decoration: none;
  margin: 0 8px;
}

.intro {
  font-size: 33px;
  margin: 25px 0 15px 0;
  display: block;
}

.container1,
.container2 {
  display: flex;
  flex-direction: row;
  overflow: scroll;
}

.container1,
.container2 {
  display: flex;
  flex-direction: row;
  margin: 10px 0 auto 0;
  overflow-x: scroll;
  overflow-y: visible;
}

.container1::-webkit-scrollbar,
.container2::-webkit-scrollbar {
  height: 5px;
}

.container1::-webkit-scrollbar-thumb,
.container2::-webkit-scrollbar-thumb {
  background: rgba(70, 70, 70, 0.444);
}

.card {
  display: flex;
  flex-direction: column;
  margin: 0 10px 20px 0;
}

.product-info {
  font-weight: 700;
  font-size: larger;
  white-space: wrap;
  margin: 8px 0 10px 0;
}

.seller {
  margin: 0 0 10px 0;
}

.price {
  font-weight: 500;
  display: inline-block;
}

.price-talk {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 300px;
}

.naira {
  color: rgb(1, 157, 1);
}

.whatsapp-logo {
  width: 35px;
}

.buy {
  background-color: white;
  color: rgb(1, 1, 83);
  text-decoration: none;
  padding: 10px 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  border-radius: 7px;
}

.contacts {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.contacts div a img {
  width: 100%;
  max-width: 150px;
}

.faqs {
  margin-bottom: 20px;
}

.question {
  font-size: 28px;
  margin: 5px 0 7px 0;
  white-space: nowrap;
}

.answer {
  margin-top: 10px;
  font-size: large;
}

.hidden {
  display: none;
}

.question-box1,
.question-box2,
.question-box3 {
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.arrow-box {
  width: 30px;
  background-color: white;
  border-radius: 20px;
  padding: 5px;
  margin: 0 10px 0 0;
}

.arrow1,
.arrow2,
.arrow3 {
  width: 100%;
  margin-right: 40px;
  transition: 0.25s;
}

.rotate {
  rotate: 90deg;
  transition: 0.15s;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.contacts {
  padding: 20px 0 0 0;
}

footer a {
  color: white;
  text-decoration: none;
}

@media (max-width: 480) {
  .header {
    align-items: start;
  }
}