*,
:after,
:before {
  box-sizing: border-box;
}

html,
body {
  font-family:
    var(--font-poppins),
    system-ui,
    -apple-system,
    sans-serif;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  line-height: normal;
}

:root {
  /* Common Style Variables */

  /* Color */
  --color-darkgoldenrod: #c49414;
  --color-gray: rgba(255, 255, 255, 0.4);
  --color-lightgray: #d9ccbd;
  --Dark-Dark: #131a17;
  --Dark-White: #fff;
  --Light-Brown: #f2e5d5;
  --Light-Dark: #22342f;
  --Light-White: #fff;
  --Yellow: #f7c846;

  /* Gap */
  --gap-0: 0px;
  --gap-4: 4px;
  --gap-6: 6px;
  --gap-8: 8px;
  --gap-10: 10px;
  --gap-12: 12px;
  --gap-16: 16px;
  --gap-20: 20px;
  --gap-24: 24px;
  --gap-40: 40px;

  /* Padding */
  --padding-0: 0px;
  --padding-01: 0;
  --padding-1: 1px;
  --padding-4: 4px;
  --padding-6: 6px;
  --padding-8: 8px;
  --padding-12: 12px;
  --padding-16: 16px;
  --padding-20: 20px;
  --padding-24: 24px;
  --padding-40: 40px;
  --padding-60: 60px;
  --padding-80: 80px;
  --padding-100: 100px;

  /* BorderRadius */
  --br-8: 8px;
  --br-10: 10px;
  --br-12: 12px;
  --br-16: 16px;
  --br-99: 99px;

  /* Font */
  --font-montserrat: Montserrat;
  --font-poppins: Poppins;

  /* FontSize */
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-19: 19px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-31: 31px;
  --fs-42: 42px;
  --fs-52: 52px;

  /* Gradients */
  --Gradient: linear-gradient(135deg, #009245, #7bc040);
  --gradient-1: linear-gradient(
    90deg,
    rgba(247, 200, 70, 0.1) 0%,
    rgba(239, 176, 0, 0.6) 51.45%,
    rgba(247, 200, 70, 0.1) 100%
  );
  --gradient-2: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.5) 50.96%,
    rgba(255, 255, 255, 0.1)
  );
  --gradient-3: linear-gradient(
    180deg,
    rgba(8, 149, 69, 0),
    rgba(123, 192, 64, 0.2)
  );
  --gradient-4: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      #fff 50%,
      rgba(255, 255, 255, 0) 100%
    )
    border-box;

  --gradient-5:
    linear-gradient(
      90deg,
      rgba(247, 200, 70, 0),
      rgba(247, 200, 70, 0.5) 50.96%,
      rgba(247, 200, 70, 0)
    ),
    linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));

  /* WidthHeights */
  --height-1: 1px;
  --height-20: 20px;
  --height-52: 52px;
  --height-190: 190px;
  --height-6_7: 6.7px;
  --width-1: 1px;
  --width-20: 20px;
  --width-28: 28px;
  --width-52: 52px;
  --width-400: 400px;
  --width-6_7: 6.7px;

  /* LineHeights */
  --lh-22: 22px;
  --lh-28: 28px;
  --lh-38: 38px;
  --lh-51: 51px;
  --lh-64: 64px;
  --lh-72: 72px;

  /* LetterSpacings */
  --ls--0_03: -0.03;

  --left-0: 0px;
  --top-0: 0px;
}

.home {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: normal;
  letter-spacing: normal;
}

.h-dvh {
  height: 100dvh;
  overflow: hidden;
  scroll-snap-align: start;
}

.home {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: normal;
  letter-spacing: normal;
}

.logo-parent,
.header-wrapper {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
}
.header-wrapper {
  align-self: stretch;
  align-items: flex-start;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 99;
}

.logo-parent {
  flex: 1;
  background-color: var(--Dark-White);
  align-items: center;
  justify-content: space-between;
  padding: var(--padding-16) var(--padding-40);
  gap: var(--gap-20);
  transition: all 0.5s ease-in-out;
}

.header-wrapper.active .logo-parent {
  background-color: transparent;
}

.header-logo {
  height: 23.9px;
  width: 165px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.header-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logo {
  height: 23.9px;
  width: 165px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.header-burger-button {
  display: none;
  line-height: 0;
}

.navbar-wrapper {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-12);
  text-align: left;
  font-size: var(--fs-14);
  color: var(--Dark-Dark);
  font-family: var(--font-poppins);
}
.become-a-seller {
  position: relative;
  font-weight: 500;
}
.log-in-wrapper {
  cursor: pointer;
  border: 0;
  padding: var(--padding-12) var(--padding-24);
  background-color: var(--Yellow);
  border-radius: var(--br-99);
  display: flex;
  align-items: center;
  justify-content: center;
}
.log-in-wrapper:hover {
  background-color: var(--color-darkgoldenrod);
}
.log-in {
  position: relative;
  font-size: var(--fs-14);
  font-weight: 500;
  font-family: var(--font-poppins);
  color: var(--Light-Dark);
  text-align: left;
}
.sign-up-wrapper {
  cursor: pointer;
  border: 0;
  padding: var(--padding-12) var(--padding-24);
  background-color: var(--Light-Brown);
  border-radius: var(--br-99);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sign-up-wrapper:hover {
  background-color: var(--color-lightgray);
}

.footer-container-wrapper {
  align-self: stretch;
  box-sizing: border-box;
  max-width: 100%;
  text-align: left;
  font-size: var(--fs-14);
  color: var(--Dark-White);
  font-family: var(--font-poppins);
  scroll-snap-align: start;
}
.footer-container,
.footer-container-wrapper,
.footer-details {
  display: flex;
  align-items: flex-start;
}
.footer-container {
  flex: 1;
  background-color: var(--Light-Dark);
  flex-direction: column;
  padding: var(--padding-60) var(--padding-40) var(--padding-40);
  box-sizing: border-box;
  gap: var(--gap-40);
  max-width: 100%;
}
.footer-details {
  width: 100%;
  justify-content: space-between;
  gap: var(--gap-20);
}
.footer-links {
  display: flex;
  align-items: center;
  gap: 84px;
}
.links-container,
.links-container-wrapper {
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.links-container {
  width: 250px;
  gap: var(--gap-6);
  flex-shrink: 0;
}
.terms-of-service {
  align-self: stretch;
  position: relative;
}
.prohibited-content-policy-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-6);
}
.copyright-details,
.copyright-details-parent {
  display: flex;
  align-items: center;
  max-width: 100%;
}
.copyright-details-parent {
  align-self: stretch;
  justify-content: space-between;
  gap: var(--gap-20);
  color: var(--color-gray);
}
.copyright-details {
  width: 709px;
  gap: var(--gap-16);
}

.copyright-item {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.social-links {
  display: flex;
  align-items: center;
  gap: var(--gap-20);
}

.social-icon {
  position: relative;
  width: var(--width-20);
  max-height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 576px) {
  .logo-parent {
    height: 56px;
    padding: 16px;
  }

  .header-logo {
    width: 124px;
    height: 17.971px;
  }

  .header-burger-button {
    display: block;
  }

  .navbar-wrapper {
    display: none;
  }

  .footer-container {
    gap: 24px;
  }

  .footer-details {
    flex-direction: column;
    gap: 24px;
  }

  .footer-links {
    flex-direction: column;
    gap: 24px;
  }

  .copyright-details-parent {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
}