@font-face {
  font-family: "Graphie";
  src: url("../fonts/Graphie/Graphie-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}
@font-face {
  font-family: "Graphie";
  src: url("../fonts/Graphie/Graphie-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}
@font-face {
  font-family: "Graphie";
  src: url("../fonts/Graphie/Graphie-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}

:root {
  --white: #fff;
  --bs-primary: #712874;
  --bs-primary-rgb: 132, 34, 119;
  --bs-primary-bg-rgb: 132, 34, 119;
  --bs-secondary-color: #48bcbd;
  --bs-secondary-color-rgb: 72, 188, 189;
  --bs-secondary-bg-rgb: 72, 188, 189;
}

body {
  font-family: "Graphie";
}


.hero {
  height: 100dvh;
}

.bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


header{
  background-image: url('../img/bg-hero.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 600px;
  height: 85vh;

}




input, textarea {
  outline: none;
  color: inherit;
}
input:focus {
  box-shadow: 0 1px 0 var(--white);
}
#form-principal {
  background-color: rgba(0,0,0,0.3);
  max-width: 35rem;
  font-size: 0.75em;
  bottom: 11rem;
  left: calc(50% - 5vw);
  
  color: var(--white);
  font-size: 0.5em;
}
.handmade {
  position: absolute;
  transform: translateY(-50%);
}
button {
  font-size: 1em !important;
}
.btn-caminho {
  bottom: 9vw;
  right: 23vw;
}
.btn-secao--1 {
  bottom: 2.5vw;
}
.btn-secao--2 {
  top: 54vw;
}
.btn-smartphone {
  left: 31vw;
  bottom: 5vw;
}
.slick-arrow::before {
  color: var(--bs-primary) !important;
}
@media (max-width: 768px) {
  .hero {
    height: auto;
  }
  #form-principal {
    position: static;
    background-color: initial;
    color: var(--bs-secondary-color);
  }
  .handmade {
    position: static;
    transform: initial;
  }
  .btn-caminho {
    bottom: 7vw;
    right: 0;
    width: 100%;
  }
  .btn-secao--2 {
    width: 100%;
    top: 165vw;
  }
  .btn-secao--1 {
    bottom: 0;
    width: 100%;
  }
  .btn-smartphone {
    left: 0;
    bottom: 10vw;
    width: 100%;
  }
}


nav{

    position: fixed;
    top: 0;

}

@media (max-width: 800px){

  header{
    height: unset;
  }

  #form-principal{
    background-color: #712874;
  }
}



#vivantagens-link {
  width: 300px;
  height: 300px;
  
  position: absolute;
  top: 65%;
}
html{
  scroll-behavior: smooth !important;
}

@media (max-width: 800px){

  nav.navbar.navbar-expand-lg.bg-transparent {
    background: #00bebf !important;
    position: unset !important;
}


}


select#renda {
    font-size: 13px !important;
    color: #00bebf !important;
}