/*
    Author: Leandro Zambelli
*/ 

:root {

  --brand-color-primary-default: #9C5C28;
  --color-bg: #FAECDD;

  --font-family-title: 'DM Serif Display', serif;
  --font-family-text: 'DM Sans', sans-serif;

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

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

.hidden { display: none}

/* Bootstrap reset
*/

.accordion-item { border: var(--color-bg); margin: 10px 0;  }
.accordion-header { background: var(--color-bg); color: var(--brand-color-primary-default); border-radius: 16px; }
.accordion-button { background: var(--brandcolor-primary-default);  color: var(--brand-color-primary-default); font-size: 24px; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease, opacity 100ms ease; }

.accordion-button:hover { opacity: 0.8; }

.accordion-button:not(.collapsed) {
   color: var(--brand-color-primary-default);
   background-color: var(--color-bg);
   box-shadow: none;
   border-radius: 16px!important;
 }
 
 .accordion-button:not(.collapsed)::after {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239C5C28'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");

 }
 .accordion-button::after {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239C5C28'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");

 }

 .accordion-button:focus { z-index: 3; border-color: none; outline: 0; box-shadow: none; }

.accordion-body { background: #fff; }
.accordion-body p { font-size: var(--text-md); margin-bottom: 24px; }

 .accordion-item:first-of-type { border-top-left-radius: 16px; border-top-right-radius: 16px; }
 .accordion-item:first-of-type .accordion-button { border-top-left-radius: 16px;
   border-top-right-radius: 16px; }
 .accordion-item:not(:first-of-type) { border-top: 0; }
 .accordion-item:last-of-type { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
 .accordion-item:last-of-type .accordion-button.collapsed { border-bottom-right-radius: 16px;
   border-bottom-left-radius: 16px; }
 .accordion-item:last-of-type .accordion-collapse { border-bottom-right-radius: 0;  border-bottom-left-radius: 0; }

/* 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-24 { border-radius: 24px; }
.rounded-32 { border-radius: 32px;}

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

.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); }

@media (max-width:991px) {
  .bg-mobile { background: var(--color-bg); }
  }

.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 }

.gradient-border { position: absolute; top: 0px; z-index: 0; }




/* =Typography Selectors
*/

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

p { line-height: 150%; }

b, strong { font-weight: var(--bold); }
a { color: var(--brand-color-primary-default); font-weight: var(--regular); 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: #fff; }

nav a { padding-right: 16px; }
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 }

}


/* =Hero
*/ 


.hero h1 { margin-bottom: 24px; font-size: 42px; font-size: clamp(36px, 10vw, 42px); line-height: 110%; font-family: var(--font-family-text); }
.hero .row { padding-top: 150px; padding-bottom: 150px; }
.hero .banner { position: absolute; z-index: 1; top: 32px; }

@media (max-width:991px) {
  .hero .banner { position: relative; z-index: 1; top: 64px; }
  .hero .row { padding-top: 96px; }
}


/* =Main
*/

main { padding: 128px 0; }
main h2 { font-size: 60px; }
main h3 { font-size: 48px; }
main h4 { font-size: 36px; }
main h5 { font-size: 24px; }
main p { font-size: 24px; }

@media (max-width: 767px) { 
  main h2, main h3  { font-size: 40px; }
  main p { font-size: 20px; }
}


.box { min-height: 200px; }


/* =Footer
*/

footer h2 { font-size: 48px; line-height: 100%; color: #fff; }
footer p { font-size: 24px; color: #fff; }
footer p small { font-size: 16px; }
footer .row { padding-top: 150px; padding-bottom: 150px; }
footer .photo { position: absolute; z-index: 1; top: -152px; }

@media (max-width:991px) {
  footer .photo { position: relative; z-index: 1; top: 0; }
  footer .row { padding-top: 96px; }
}