/* FONTS */

@font-face {
  font-family: romia;
  src: url("Romla.ttf");
}
@font-face {
  font-family: rena;
  src: url("Rena-Regular.ttf");
}
/* SCROLLBAR */
::-webkit-scrollbar {
  width: 15px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
::-webkit-scrollbar-track:hover {
  background-color: #bababa4a;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(108, 112, 108, 0.563);
  border-radius: 25px;
  width: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(82, 85, 82, 0.843);
}
/* NAVIGATION BAR */

.navBg {
  background-color: #333;
  height: 60vh;
  color: white;
  position: relative;
  text-align: center;
  line-height: 3vh;
}
nav {
  font-family: rena;
  background-color: #333;
  padding: 0% 5% 2% 5%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 1.2em;
}
nav a:hover {
  transform: scale(1.1);
  color: rgb(119, 119, 119);
}

.nav-links {
  width: 40%;
  text-transform: uppercase;
}
.logo {
  width: 200px;
  height: 200px;
  position: relative;
  bottom: 12px;
}

#nav1 {
  display: flex;
  justify-content: space-evenly;
  gap: 5%;
}
#nav2 {
  display: flex;
  justify-content: space-evenly;
  gap: 5%;
}

.nav-links a {
  color: white;
  text-decoration: none;
}

.nav-icons {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 30%;
}
.nav-icons a img {
  width: 25px;
  height: 25px;
}
.nav-icons a img:hover {
  transform: scale(1.2);
}
.navBg h1 {
  font-size: 3.5em;
  font-family: romia;
  text-transform: uppercase;
}
.navBg p {
  font-size: 1.2em;
  font-family: rena;
}

.navBtn {
  display: flex;
  justify-content: center;
  gap: 2%;
}
.navBtn button {
  font-family: rena;
  background-color: transparent;
  border: 1px white solid;
  font-size: 0.9em;
  color: white;
  text-transform: uppercase;
  padding: 3px;
  width: 7%;
  height: 2.6rem;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid;
}
.navBtn > button:first-child {
  color: white;
  background-color: rgb(19, 18, 18);
  border: 1px solid rgb(19, 18, 18);
}
.navBtn > button:first-child:hover {
  background-color: rgba(161, 161, 161, 0.055);
  border: 1px solid white;
}
.navBtn > button:last-child:hover {
  background-color: rgb(19, 18, 18);
  border: 1px solid rgb(19, 18, 18);
}

/* BODY */

body {
  margin: 0;
  padding: 0;
}
/* ABOUT */
.about {
  padding: 7%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.about .info,
.about .abtImage {
  width: 40%;
  height: 530px;
}
.about .info h3 {
  font-size: 2.5em;
  font-family: romia;
}
.about .info p {
  font-family: rena;
  line-height: 40px;
}
.abtImage {
  background-color: rgb(41, 41, 44);
}
/* PRODCUTS */
.product {
  padding: 7% 8% 7% 8%;
}
.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 10px;
  margin-bottom: 5%;
}
.head h2 {
  font-family: romia;
  font-size: 2.6em;
}
.head p {
  font-family: rena;
}

.head button {
  width: 7%;
  height: 45px;
  background-color: transparent;
  border: 1px solid black;
  font-family: rena;
}
.viewMore {
  width: 7%;
  height: 45px;
  background-color: transparent;
  border: 1px solid black;
  font-family: rena;
  position: relative;
  left: 93%;
}
.head button:hover,
.viewMore:hover,
.items button:hover {
  background-color: #000000;
  color: white;
}
.products {
  width: 100%;
  line-height: 1px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 5%;
}
.products img {
  width: 284px;
  height: 340px;
  margin-bottom: 10px;
}
.items {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 290px;
  height: 455px;
  margin-bottom: 5%;
}
.items:hover {
  background-color: #2c2c2c3b;
}
.items h3 {
  font-family: romia;
  font-size: 1em;
}
.items p {
  font-size: 0.8em;
}
.items button {
  background-color: transparent;
  border: 1px solid black;
  width: 284px;
  height: 40px;
}

/* TESTIMONY */
.testimony {
  background-color: #f3e5dc;
  height: 120vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 0% 5% 0% 5%;
}
.testimony .head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
}
.testimony .head h2 {
  font-family: romia;
  font-size: 2.5em;
}
.testimony .head p {
  font-family: rena;
}
.testimonies {
  width: 100%;
  height: 60vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.Ctestimony {
  width: 30%;
  height: 100%;
  border: 3px solid black;
}
.scroll {
  width: 150px;
  height: 50px;
  background-color: rgb(72, 72, 72);
  border-radius: 15px;
}
.arrows {
  width: 94%;
  position: absolute;
  justify-content: space-between;
  display: flex;
}
.arrows img {
  width: 100px;
  height: 100px;
  opacity: 0.5;
  cursor: pointer;
}
.arrows img:hover {
  opacity: 1;
  transform: scale(1.1);
}
/* CONTACT */
.contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5% 5% 6% 15%;
}
.contact .head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  line-height: 1px;
  margin-bottom: 2%;
}
.contact .head h2 {
  font-family: romia;
  font-size: 2.6em;
}
.contact .head p {
  font-family: rena;
}
.contact .body {
  height: fit-content;
  width: 90%;
  display: flex;
  gap: 8%;
}
.contact .body .form {
  width: 45%;
  display: flex;
}
.contact .body .form input,
.contact .body .form textarea {
  width: 100%;
  background-color: transparent;
  border: 1px solid black;
  font-family: rena;
  padding: 25px;
  font-size: 1.1em;
  margin-bottom: 20px;
}

.contact .body .form input {
  height: 20px;
}
.contact .body .form textarea {
  height: 200px;
}
.contact .body .form button {
  width: 109%;
  height: 80px;
  font-size: 1.1em;
  background-color: black;
  color: white;
  border: 1px solid black;
  font-family: rena;
}
.contact .body .form button:hover {
  background-color: transparent;
  color: black;
}
.contact .body .map {
  width: 50%;
  background-color: green;
}

/* MAD HONEY */
.madHoney {
  display: flex;
  justify-content: center;
  gap: 5%;
  padding: 5%;
}
.madHoney h3,
.madHoney h4 {
  font-family: romia;
}
.madHoney p {
  font-family: rena;
}
.madHoney .productDetail {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 30%;
}
.madHoney .productDetail .head {
  display: flex;
  flex-direction: column;
  width: fit-content;
  align-items: flex-start;
  line-height: 1px;
}
.productDetail .quantity img {
  width: 30px;
  cursor: pointer;
}
.quantity .input {
  display: flex;
  align-items: center;
  gap: 2%;
}
.quantity input {
  text-align: center;
  padding: 5px;
  width: 55px;
}
.weight button {
  font-family: rena;
  width: 80px;
  padding: 5px;
  background-color: transparent;
  border: 1px solid rgb(0, 0, 0);
  margin-right: 10px;
}
.weight button:hover {
  background-color: black;
  color: white;
}
#addToCart {
  font-family: rena;
  width: 100%;
  padding: 5px;
  background-color: transparent;
  border: 1px solid black;
}
#addToCart:hover {
  background-color: black;
  color: white;
}
.productImage {
  width: 30%;
  background-image: url("/img/madhoney.jpeg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid black;
}
/* QUESTION */
.question {
  padding: 7%;
}
.questions {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.question .head {
  display: flex;
  flex-direction: column;
  width: fit-content;
  align-items: start;
  position: relative;
  left: 5%;
}
.questions .qus {
  margin-bottom: 4%;
  border: 1px solid black;
  width: 90%;
  position: relative;
  left: 50%;
  transform: translate(-50%);
}
.questions .qus div {
  padding: 2% 2% 2% 5%;
  display: flex;
  gap: 15%;
}
.questions .qus hr {
  width: 90%;
}
.qus .left {
  display: flex;
  gap: 10%;
  align-items: center;
  width: 25%;
}
.qus .left img {
  width: 70px;
  height: 70px;
}
.qus .left h4 {
  line-height: 1px;
  margin-bottom: 0;
}
.qus .left h4,
.qus .right p {
  font-family: rena;
}

/* CART */
.cart {
  padding: 5%;
}
.cart .item {
  display: flex;
  gap: 3%;
  margin-bottom: 2%;
  position: relative;
  left: 8%;
}
.cart .item input {
  width: 20px;
}
.itemDesc {
  width: 80%;
  height: 20vh;
  background-color: rgb(62, 62, 63);
}
.cart .checkout {
  width: 92.5%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5%;
  font-family: romia;
}
.checkout button {
  padding: 5px;
  width: 20%;
  height: 45px;
  border-radius: 3px;
  border: 1px solid black;
}
.checkout button:hover {
  background-color: black;
  color: white;
}
/* FOOTER */

footer {
  background-color: #333;
  height: 45vh;
  position: relative;
  padding: 2%;
  color: white;
}
.footerContent {
  width: 99.9%;
  height: 90%;
  border: 2px solid white;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  line-height: 120%;
  display: flex;
  font-family: sans-serif;
}
.footerInfo {
  width: 70%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  left: 10%;
  bottom: 3%;
}
footer span {
  display: flex;
  align-items: center;
}
footer span img {
  width: 1em;
  height: 1em;
}
.footerLogo {
  font-size: small;
  width: 15%;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2%;
  position: relative;
  bottom: 2%;
  line-height: 25px;
}
.ftrLogo {
  width: 65%;
}
.socials {
  width: 60%;
  position: relative;
  display: flex;
  justify-content: space-around;
  position: relative;
  right: 5%;
}
.socials a img {
  position: relative;
  width: 50px;
}
.footerLogotxt {
  position: relative;
}

.qLinks a {
  text-decoration: none;
  color: white;
  margin-bottom: 20%;
}
.qLinks {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.office span img {
  width: 25px;
  height: 25px;
  margin-right: 25px;
}
.office span {
  margin-bottom: 25px;
}
footer h3 {
  font-family: rena;
}

.subscribe input {
  padding: 10px;
  font-family: rena;
  background-color: transparent;
  border: 1px solid white;
  color: white;
  margin-right: 15px;
  width: 200px;
}

.subscribe button {
  padding: 10px;
  width: 100px;
  font-family: rena;
  background-color: transparent;
  border: 1px solid white;
  color: white;
}
.subscribe p {
  line-height: 30px;
}
.qLinks h3 {
  margin-bottom: 30px;
}
.office h3 {
  margin-bottom: 40px;
}
.subscribe h3 {
  margin-bottom: 20px;
}
.footerEnd {
  display: flex;
  justify-content: space-between;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
.footerEnd u {
  cursor: pointer;
}
.footerSocial {
  width: 3%;
  display: flex;
  gap: 15px;
  position: relative;
  right: 1%;
}
.footerSocial a img {
  width: 25px;
  height: 25px;
}