body {
  font-family: "Gill Sans", sans-serif;
  background-color: #87c5ee;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Questa Grande";
}

.title-1 {
  font-size: 3.125rem;
}

.bg-holder {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

.text-1 {
  font-size: 1.75rem;
  margin-bottom: 4rem;
}

/* header main */
.header-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 5rem;
  z-index: 1000;
}

.navbar-brand img {
  width: 200px;
}

.navbar-nav {
  gap: 4rem;
}

.nav-link {
  font-family: "Questa Grande";
  color: #ffffff;
  font-size: 2rem;
  opacity: 1;
}

.nav-link:hover,
.nav-link:focus {
  color: #000000;
  opacity: 0.75;
}

/* hero section */
.hero-section {
  position: relative;
  z-index: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-section .bg-holder-bg {
  background-position: right top;
  background-size: auto 100%;
}

/* footer main */
.footer-main {
  margin-top: auto;
  color: #ffffff;
}

/* contact us */
.contact-us {
  padding-block: 6rem;
}

.contact-us .title-1 {
  margin-bottom: 2rem;
  color: #ffffff;
}

.contact-us-pink .title-1 {
  color: #f9667f;
}

.contact-us-pink {
  background-color: #ffffff;
}

.contact-us .form-label {
  color: #ffffff;
  font-size: 1.75rem;
}

.contact-us-pink .form-label {
  color: #f9667f;
}

.contact-us .form-control {
  padding: 0.125rem 0;
  border: 0;
  border-bottom: 1px solid #ffffff;
  border-radius: 0;
  font-size: 1.75rem;
  background-color: transparent;
}

.contact-us .form-control:focus {
  box-shadow: none;
  border-color: #ffffff;
}

.contact-us-pink .form-control {
  border-color: #f9667f;
}

.contact-us-pink .form-control:focus {
  border-color: #f9667f;
}

.contact-us .btn-submit {
  border-radius: 50rem;
  border: 0.125rem solid #ffffff;
  color: #ffffff;
  font-size: 1.5rem;
  padding: 0.125rem 1rem;
}

.contact-us .btn-submit:active,
.contact-us .btn-submit:hover {
  border-color: #ffffff;
  color: #ffffff;
}

.contact-us-pink .btn-submit {
  border-color: #f9667f;
  color: #f9667f;
}

.contact-us-pink .btn-submit:active,
.contact-us-pink .btn-submit:hover {
  border-color: #f9667f;
  color: #f9667f;
}

/* about section */
.about-section {
  padding-top: 6rem;
  color: #ffffff;
}

.about-section .title-1 {
  margin-bottom: 2rem;
}

.btn-contact {
  background-color: #fb6780;
  color: #ffffff;
  border-color: #f9667f;
  border-radius: 50rem;
  font-family: "Questa Grande";
  font-size: 2.5rem;
  padding: 0.25rem 1rem;
  box-shadow: 0 0.25rem 0 0 rgba(0, 0, 0, 0.2);
}

.btn-contact:active,
.btn-contact:hover {
  background-color: #fb6780 !important;
  color: #ffffff !important;
  border-color: #f9667f !important;
}

/* our goal */
.our-goal {
  padding-block: 20rem;
  color: #f9667f;
  position: relative;
  z-index: 0;
}

.our-goal .title-1 {
  margin-bottom: 2rem;
}

/* featured products */
.featured-products {
  position: relative;
  z-index: 0;
  margin-top: -8rem;
}

.featured-products .product-list {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  gap: 1.5rem;
  overflow: auto;
  padding-bottom: 2rem;
  scrollbar-width: thin;
  scrollbar-color: #ffffff #cfcfcf;
}

.featured-products .product-list::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}
.featured-products .product-list::-webkit-scrollbar-track {
  border-radius: 0.5rem;
  background-color: #cfcfcf;
}

.featured-products .product-list::-webkit-scrollbar-track:hover {
  background-color: #b8c0c2;
}

.featured-products .product-list::-webkit-scrollbar-track:active {
  background-color: #b8c0c2;
}

.featured-products .product-list::-webkit-scrollbar-thumb {
  border-radius: 50rem;
  background-color: #ffffff;
}

.featured-products .product-list::-webkit-scrollbar-thumb:hover {
  background-color: #e2e8da;
}

.featured-products .product-list::-webkit-scrollbar-thumb:active {
  background-color: #e2e8da;
}

.featured-products .product-list > * {
  flex: 0 0 calc(100% / 4 - 1.125rem);
}

.global-bg {
  background-position: center bottom;
  background-size: 100% auto;
  opacity: 0.75;
}

.bg-holder-graphic {
  background-size: contain;
  background-position: left center;
  inset: 35% 0 -35% 0;
}

.bg-holder-graphic-1 {
  background-size: contain;
  background-position: right center;
  inset: -25% 0 25% 0;
}

.bg-holder-curve {
  background-size: 100% 100%;
}