/* aqui consigo trabalhar */
:root {
  --ds-pypper-primary-color: #4bb794;
  --ds-pypper-primary-color-dark: #00B89C;
  --ds-pypper-secondary-color: #101828;
  /* background */ 
  --ds-pypper-background-main: white;
  
}

body {
  background-color: white;
  font-family: 'Inter', sans-serif;
  /* font-size: 62.5%; */
}

h1, h2, h3, h4, h5, h6, .title {
  
  font-family: 'Montserrat', sans-serif;
}

.fade-in {
  animation: fadeIn 0.8s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.logo-small {
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  letter-spacing: 1px;
}

.logo-header {
  color: var(--ds-pypper-primary-color);
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 1px;
  max-width: 100px;
}

.has-color-primary {
  color: var(--ds-pypper-primary-color);
}

.has-background-primary {
  background-color: var(--ds-pypper-primary-color);
}

.hover:has-background-primary {
  background-color: var(--ds-pypper-primary-color-dark);
  transition: all .4 ease;
}

.has-background-secondary {
  background-color: var(--ds-pypper-secondary-color);
}

.card-service {
  background-color: var(--ds-pypper-secondary-color);
  color: white;
  font-weight: 300;
  cursor: pointer;
}
.card-service h4 {
  font-family: 'Inter', sans-serif;
}


.card-service:hover {
  background-color: white;
  color: var(--ds-pypper-primary-color);
  transition: all .2s ease-in;
}

.card-service_header {
  display: flex;
  justify-content: space-between;
}

#hero {
  margin-bottom: 120px;
}


#presentation img {
  max-width: 360px;
}

#presentation {
  background-color: var(--ds-pypper-secondary-color);
  background: linear-gradient(to right, var(--ds-pypper-secondary-color) 50%, rgba(0,0,0,.4) 100%), url('https://pypper.com.br/img/call-to-action-image.jpg');
  background-size: cover;      
  background-position: center;
  background-repeat: no-repeat;
}

#presentation .call-message {
  font-size: 1.8rem;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}

.logo-bottom img {
  width: 180px;
}

.message #alert-contato-sucesso,
.message #alert-contato-erro {
  display: none;
}

textarea {
  resize: none;
}