:root {
  --gutter: 12px;
  /* color system start */
    --primary-color: #56887C;
    --primary-light-color: #72b3a3;
    --primary-dark-color: #3c5f57;
    --secondary-color: #DF9551;
    --secondary-light-color: #DF9551;
    --secondary-dark-color: #dA7212;
    --tertiary-color: #feefd2;
    --tertiary-light-color: #FEEFD2;
    --tertiary-dark-color: #FEEFD2;
    --dark-color: #222428;
    --dark-light-color: #222428;
    --dark-dark-color: #222428;
    --medium-color: #E5D0CB;
    --medium-color-subtle: #E5D0CB88;
    --medium-light-color: #E5D0CB;
    --medium-dark-color: #E5D0CB;
    --light-color: #FFFBF0;
    --light-light-color: #FFFBF0;
    --light-dark-color: #FFFBF0;
}

html {
  scroll-behavior: smooth;
}

/* color classes */
.bg-primary-custom { background-color: var(--primary-color); }
.bg-secondary-custom { background-color: var(--secondary-color); }
.bg-tertiary-custom { background-color: var(--tertiary-color); }

.text-primary-custom { color: var(--primary-color); }
.text-secondary-custom { color: var(--secondary-color); }
.text-tertiary-custom { color: var(--tertiary-color); }
.text-dark-custom { color: var(--dark-color); }
.text-light-custom { color: var(--light-color); }

.btn-primary-custom { 
  color: var(--light-color);
  background-color: var(--primary-color);
  &:hover {
    color: var(--light-color);
    background-color: var(--primary-dark-color);
  }
}

.btn-outline-primary-custom { 
  color: var(--primary-color);
  background-color: transparent;
  border: 1px solid var(--primary-color);
  &:hover {
    color: var(--light-color);
    background-color: var(--primary-color);
  }
}


.btn-secondary-custom { 
  color: var(--light-color);
  background-color: var(--secondary-color);
  &:hover {
    color: var(--light-color);
    background-color: var(--secondary-dark-color);
  }
}

footer {
  background-color: var(--primary-color);
  color: var(--light-color);
  & a {
    color: var(--light-color);
    text-decoration: none;
  }
}



/* text classes */
.title-text {
  color: var(--primary-color);
  font-size: 1.75rem;
}

.crimson-text-regular {
  font-family: "Crimson Text", serif;
  font-weight: 400;
  font-style: normal;
}

.crimson-text-semibold {
  font-family: "Crimson Text", serif;
  font-weight: 500;
  font-style: normal;
}

.crimson-text-bold {
  font-family: "Crimson Text", serif;
  font-weight: 700;
  font-style: normal;
}

.nunito-text-regular {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.nunito-text-bold {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.hero-title {
  font-size: 7vw;
  line-height: 7vw;
}

.hero-subtitle {
  font-size: 2.5vw;
}

.nav-link {
  color: var(--secondary-color);
  font-size: 1.25rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  &.active {
    font-weight: 800;
  }
  &:hover{
    border-bottom: 2px solid var(--dark-color);
  }
  &:last-child:hover {
    border-color: transparent;
  }
}

.section-title {
  font-size: 2.25rem;
  line-height: 2.25rem;
  font-family: "Crimson Text", serif;
  font-weight: 700;
  text-align: center;
}

.section-subtitle {
  font-size: 1.15rem;
}

.feature-title {
  width: 100%;
  text-align: start;
  font-weight: bold;
  font-size: 1.15rem;
  margin-bottom: 0;
}

.feature-description {
  width: 100%;
  text-align: start;
}

.product-description-box .fs-3 {
  line-height: 1.75rem;
}

.table {
  border: 1px solid var(--primary-dark-color);
  font-size: 0.8rem;
  line-height: 0.8rem;
  & tbody tr {
    font-size: 0.75rem;
    line-height: 0.75rem;
  }
  & td {
    padding-top: .25rem;
    padding-bottom: .25rem;
    border-left: 1px solid;
  }
}

.card-text {
  font-size: 0.85rem;
  line-height: 1rem;
}

.text-shadow {
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
}

img.filter-invert {
  filter: invert(100) brightness(100) drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.75));
}

/* animations */

@keyframes slide-in-left {
  from { translate: -25vw 0; opacity: 0; }
  to { translate: 0 0; }
}

@keyframes slide-in-right {
  from { translate: 25vw 0; opacity: 0; }
  to { translate: 0 0; }
}

@keyframes slide-in-bottom {
  from { translate: 0 25vh; opacity: 0; }
  to { translate: 0 0; }
}

@keyframes fade-in {
  from { opacity: 0;} to { opacity: 1;}
}

body {
  background-color: var(--light-color);
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}



.navbar {
  & img { vertical-align: text-top; }
}

a img {
  vertical-align: text-top;
}

/* sizing & positioning */

.spacer {
  height: 10vh;
}

.my-8 {
  margin-top: 4rem !important;
  margin-bottom: 4rem !important;
}

.py-8 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

#header-info { height: 4vh; }

.navbar { min-height: 8vh; }

section { 
  scroll-margin-top: 15vh;
  position: relative;
  &#hero {
    height: 100vh;
    padding-top: 10vh;
  }
  &#us-hero, &#thankyou-hero {
    height: 88vh;
  }

}

.bi {
  padding-right: 0.5rem;
}

.decoration {
  z-index: -9999;
  opacity: 20%;
  position: absolute;
  animation-duration: 2000ms;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
}

#hero-left {
  width: 30vh;
  left: 0;
  bottom: 25vh;
  animation-name: slide-in-left;
  animation-delay: 0;
}

#hero-right {
  width: 25vh;;
  right: 0;
  top: 15vh;
  animation-name: slide-in-right;
  animation-delay: 150ms;
}

#hero-bottom-left {
  width: 15vh;;
  left: 15vw;
  bottom: 0vh;
  animation-name: slide-in-bottom;
  animation-delay: 200ms;
}

#hero-bottom-right {
  width: 20vh;;
  right: 10vw;
  bottom: 0vh;
  animation-name: slide-in-bottom;
  animation-delay: 100ms;
}

.fade-in-0 {
  opacity: 0;
  animation: fade-in 1s ease-out 0s forwards;
}

.fade-in-1 {
  opacity: 0;
  animation: fade-in 1s ease-out 1s forwards;
}

.fade-in-2 {
  opacity: 0;
  animation: fade-in 1s ease-out 2s forwards;
}

.product-container {
  width: 80vw;
  background-size: contain;
  background-repeat: no-repeat;
  /* background-color: white; */
  /* box-shadow: 0px 5px 24px rgba(0, 0, 0, .15); */
  border-radius: 1rem;
  & .product-description-box {
    color: var(--primary-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

#form-container {
  background-color: var(--medium-color-subtle);
  border-radius: 1rem;
}

#certifications {
  /* opacity: 0.5; */
  background-image: url(../images/green-leaves.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
}

#us-picture {
  background-image: url(../images/vegetal-lab.jpg);
  background-position: center;
  background-size:cover;
  background-repeat: no-repeat;
  border-radius: 1rem;
}

#colaboration-picture {
  background-image: url(../images/handshake.jpg);
  background-position: center;
  background-size:cover;
  background-repeat: no-repeat;
  border-radius: 1rem;
}

#inspirational {
  position: relative;
  background-image: url(../images/brown-powder.jpg);
  background-size: cover;
}


.floating-filter {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  &.darken {
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: multiply;
  }
}


/* Bootstrap customization */

.card {
  border-radius: 1rem;
  transition: all 200ms ease;
  /*
  &:hover{
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15);
    transform: scale(100.5%);
  }
  */
  & .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    & .btn {
      align-self: center;
    }
  }

}



@media (max-width: 767px) {
  .hero-title {
    font-size: 14vw;
    line-height: 12vw;
  }

  .hero-subtitle {
    font-size: 5vw;
  }
}

@media (max-width: 991px) {
  .product-container{
    background-image: none !important;
  }

  .feature-title::before {
    content: "- ";
  }

  #us-description {
    background-color: var(--medium-color-subtle);
    border-radius: 1rem;
  }
}