/*
    Author: Leandro Zambelli
*/ 

:root {

  --brand-color-primary-default: #4B6C47;
  --color-bg: #E9EFEC;
  --color-text: #333;

  --font-family-title: 'Plus Jakarta Sans', serif;
  --font-family-text: 'Instrument Sans', sans-serif;

  --regular: 400;
  --bold: 700;
  
}

body { font-family: var(--font-family-text); color: #000; }

/* Bootstrap reset
*/

 .modal { --bs-modal-border-radius: 24px; --bs-modal-padding: 28px; --bs-modal-border-width: 0; }
 .modal .modal-body { font-size: 18px; } 

/* Helper - Utilities
*/

.spacing-128 { padding-top: 128px; }
.spacing-y-128 { padding-top: 128px; padding-bottom: 128px; }
.spacing-64 { padding-top: 64px; }
.spacin-y-64 { padding-top: 64px; padding-bottom: 64px; }
.rounded-32 { border-radius: 32px;}
.rounded-bottom-64 { border-radius: 0 0 64px 64px; }

@media (max-width: 767px) {
  .spacing-128 { padding-top: 64px; }
  .spacing-y-128 { padding-top: 64px; padding-bottom: 64px; }
  .rounded-bottom-64 { border-radius: 0;}
}

@media (max-width: 1199px) { .rounded-bottom-64 { border-radius: 0;} }

.font-weight-regular { font-weight: var(--regular); }
.font-weight-bold { font-weight: var(--bold); }

.bg-color-primary-default { background-color: var(--brand-color-primary-default); }
.bg-color-default { background-color: var(--color-bg); }

.color-primary-default { color: var(--brand-color-primary-default); }
.color-text-default { color: var(--color-text)!important; }

.whatsapp { position: fixed; bottom: 32px; right: 32px; width: 88px; height: 88px; padding: 16px; background: #fff; border-radius: 100px; box-shadow: 0 4px 24px rgba(0,0,0,0.25); z-index: 999 }


/* =Typography Selectors
*/

h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-title); margin: 0; color: var(--brand-color-primary-default); }
h1 { font-size: 64px; }
h2 { font-size: 48px; }
h3 { font-size: 32px; }
h4 { font-size: 24px; }

@media (max-width:767px) {
  h1 { font-size: 42px }
  h2 { font-size: 40px }
}

p { line-height: 150%; }

b, strong { font-weight: var(--bold); }
a { color: var(--brand-color-primary-default); font-weight: var(--bold); text-decoration: none; transition: all 0.3s ease; }
a:hover { color: var(--brandcolor-primary-default); text-decoration: none; }


/* =Header e Nav
*/

header { padding: 16px 0; background: var(--color-bg);}

nav a { padding-right: 16px; color: var(--font-family-text); font-family: var(--font-family-title); }
nav a:hover { color: var(--brand-color-primary-default); }
nav a:hover:not(.button) { opacity: 0.5; }


@media (max-width:991px){

  nav { transition: 150ms ease; top: 0; width: 100%; max-height: 0; overflow: hidden; background: var(--color-white); z-index: 3; }

  nav a:not(.button) { display: block!important; width: 100%; height: 40px; padding: 0; }
  nav a:first-child { margin-top: 32px }

  .btn-toggle-nav { position: absolute; top: 16px; right: 16px; z-index: 4; padding: 10px }

  .bar { display: block; margin: 5px 0; width: 30px; height: 4px; background: var(--brand-color-primary-default); transition: ease 0.2s; }

  .bar-close .bar:nth-child(1) { transform: rotate(45deg) translateY(5px) translateX(-1px); background: var(--brand-color-primary-default); width: 24px }
  .bar-close .bar:nth-child(2) { transform: rotate(-45deg) translateY(-7px) translateX(1px); background: var(--brand-color-primary-default); width: 24px }

}

/* banner, tratamentos, depoimentos, contato */

.banner img { position: absolute; bottom: 0; right: -64px ;  }
.banner-title { padding-top: 146px; padding-bottom: 113px; }

@media (max-width:767px) {
  .banner-title { padding-top: 64px; padding-bottom: 64px;}
}

.box-tratamento { position: relative; padding: 32px 24px 32px 24px; margin-bottom: 16px; min-height: 212px; background: #fff; border-radius: 24px; border-bottom: 1px solid #B5C0BB;  transition: 200ms ease; }
.box-tratamento:hover { border-color: #fff; box-shadow: 0 12px 16px rgba(25,48,40,0.12); transform: translate(0,-8px); transition: 200ms ease; }
.box-tratamento__title { color: var(--color-text); margin-bottom: 12px; }
.box-tratamento__paragraph { font-size: 16px; line-height: 140%; }

.depoimentos img { box-shadow: 0 8px 16px rgba(25,48,40,0.12); border-radius: 24px; }

.maps { width: 100%; height: 450px; border: none; border-radius: 24px; } 


/* =Main
*/

main { padding: 128px 0; }
main p { font-size: 24px; }

@media (max-width: 767px) { 
  main { padding: 64px 0; }
  main p { font-size: 20px; }
}


/* =Footer
*/

footer { border-radius: 40px 40px 0 0; padding-top: 64px; padding-bottom: 64px; }
footer p { font-size: 20px; }

@media (max-width: 767px) { 
  footer { border-radius: 0; }
}