/*
    Author: Leandro Zambelli
*/ 

:root {

  --brand-color-primary-default: #00164F;
  --brand-color-secondary-default: #FFB800;

  --text-color-default: #000;
  --text-color-light: #444;
  
  --font-family: 'Plus Jakarta Sans', sans-serif;

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


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

/* Bootstrap reset
*/

.container { padding-left: 24px; }
.card { border: 0; border-radius: 16px; }


/* Helper - Utilities
*/

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

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

.button { display: inline-block; padding: 10px 24px; font-weight: var(--bold); text-decoration: none; position: relative; overflow: hidden; transform: perspective(1px); }

.button-primary { background: var(--brand-color-secondary-default); color: var(--brand-color-primary-default);  }
.button-primary:hover { background: var(--brand-color-secondary-default); color: var(--brand-color-primary-default); }

.button-primary::before {
  content: "";
  position: absolute;
  background: #FFC633;
  top:0;
  left:0;
  bottom: 0;
  right: 0;
  z-index: -1;
  border-radius: 100px;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.button-primary:hover::before { transform: translateX(0); }

.spacing-lg { padding-top: 128px }
.spacing-md { padding-top: 64px }

@media (max-width: 767px) {    
    .spacing-lg { padding-top: 90px } 
}

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

.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) ; font-weight: var(--bold); color: var(--brand-color-primary-default); margin: 0; }

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: white; box-shadow: 0 0 20px rgba(0,0,0,0.2) }

nav { display: inline-block; }
nav a { padding-right: 16px;  color: var(--brand-color-primary-default);  }
nav a:hover { color: var(--brand-color-primary-default); opacity: 0.6 }


/* =Hero
*/ 

.hero { padding-top: 64px; padding-bottom: 32px; background: var(--brand-color-primary-default); background: linear-gradient(101deg, #00164F 17.97%, #475D96 55.71%, #00164F 99.18%); }
.hero h1 { margin-bottom: 32px; font-size: clamp(30px, 10vw, 58px); line-height: 112%; }
.hero p  { font-size: 24px; margin-bottom: 24px; }



/* =Main
*/

main { padding: 100px 0 0 0; overflow-x: hidden }
main h2 { font-size: 48px; }
main h3 { font-size: 24px; }
main li { font-size: 24px }
main p { font-size: 20px }

@media (max-width: 767px) { 
    main h2  { font-size: 32px; }
    main h3 { font-size: 20px; }
    main li { font-size: 20px }
}


/* =Footer
*/

footer { padding-top: 100px; box-shadow: 0px -4px 80px -20px rgba(19, 22, 53, 0.20); }
footer h2 { font-size: 48px; }
footer h3 { font-size: 24px }
footer a { font-size: 16px; color: var(--brand-color-primary-default); font-weight: var(--regular); }
footer a:hover { color: var(--brand-color-primary-default); opacity: 0.6 }

@media (max-width: 767px) { 
  footer h2  { font-size: 40px; }
  footer a { font-size: 18px; }
}