:root {
  --color-default: #222;
  --color-primary: #DEAE01;
  --color-secondary: #DEAE01;  
  --color-light: #F7F7F7;
  --color-dark: #222;
  --header-height: 175px }

.text-default          { color: var(--color-default) }
.text-primary          { color: var(--color-primary) !important }
.text-secondary        { color: var(--color-secondary) !important }
.text-white            { color: var(--color-white) }

.bg-default            { background: var(--color-default) !important }
.bg-primary            { background: var(--color-primary) !important }
.bg-light              { background: var(--color-light) !important }
.bg-dark                { background: var(--color-dark) !important }

.bg-gradient-primary {
  background: rgb(250,193,99);
  background: linear-gradient(190deg, rgba(250,193,99,1) 0%, var(--color-primary) 50%) }

.bg-gradient-dark {
  background: #000;
  background: linear-gradient(190deg, #333 0%, #000 70%) }

html, body { height: 100% }

body { 
  background: var(--color-light);
  overflow-x: hidden;
  position: relative;
  font-family: "Poppins", Sans-serif;
  font-size: 12pt;
  color: var(--color-default) }

a { text-decoration: none }

a:hover { text-decoration: underline }


 


/* wrapper 
//////////////////////////////////////////////////*/
section,
.wrapper { padding: clamp(3rem, 10vw, 6rem) 0 }

.wrapper-lg { padding: clamp(3rem, 10vw, 12rem) 0 }

.inner .wrapper,
.inner main,
.inner section:not(footer section) { padding: clamp(4rem, 10vw, 8rem) 0 }

@media(max-width:1320px){
  .container-xxl { padding: 0 1.5rem }
}

@media(max-width:767.98px){
  section { overflow-x: hidden }
  .container { padding: 0 2rem }
}




/* heading/texts
//////////////////////////////////////////////////*/
h1, .h1 { 
  margin-bottom: clamp(1rem, 1rem + 2vw, 3rem);
  font-size: clamp(150%, 3vw, 300%) }

h2, .h2 { 
  margin-bottom: clamp(1rem, 1rem + 2vw, 2rem);
  font-size: clamp(175%, 3vw, 250%) }

h3, .h3 { 
  margin-bottom: clamp(1rem, 1rem + 2vw, 1.5rem);
  font-size: clamp(125%, 3vw, 200%) }

h4, .h4 { 
  margin-bottom: clamp(1rem, 1rem + 2vw, 1.25rem);
  font-size: clamp(106.25%, 3vw, 150%) }

h5, .h5 { 
  font-size: clamp(100%, 3vw, 125%) }

li { 
  font-size: clamp(87.5%, 1vw, 100%);
  margin-bottom: .5rem }

p { 
  font-size: clamp(87.5%, 1vw, 100%);
  margin-bottom: clamp(1rem, 1rem + 2vw, 1.5rem) }

.box-shadow-b { box-shadow: 0 2rem 2rem -1rem rgba(0,0,0,0.25) }




/* header 
//////////////////////////////////////////////////*/
.home header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2 }

header .navbar-brand { 
  padding: 0;
  margin: 0 }

header .navbar-brand img { max-width: clamp(50%, 50% + 10vw, 100%) }

.inner header {  background: var(--color-dark) }

/* 
bartop
header > div:first-child > div { font-size: clamp(70%, 1.25vw, 87.5%) }
header .border-bottom { border-bottom-color: rgba(255,255,255,.25) !important }
*/

header .nav-link {
  background: 
      linear-gradient(currentColor 0 0) 
      0 100% /var(--d, 0) 3px 
    no-repeat;
  transition:0.5s;
  margin: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-decoration: none;
  margin: 0;
  color: #999 }

header .nav-link.active,
header .nav-link:hover { 
  --d: 100%;
  color: var(--color-primary) }

.navbar-toggler { 
  border: 0;
  width: 2rem;
  font-size: 100%;
  padding: 0 }

.navbar-toggler .navbar-toggler-icon { 
  width: 100%;
  height: 4px;
  margin: 5px 0;
  display: block;
  border-radius: 10px;
  background: var(--color-primary) !important }


@media(min-width:1024px){
  header { height: var(--header-height) }
}

@media(max-width:991.98px){
  header { padding: 1.5rem 0 !important}

  header .navbar-brand { width: 75% }

  header .navbar-collapse { 
    background: var(--color-dark);
    width: 100%;
    height: 100%;
    position: fixed;
    overflow-y: hidden;
    z-index: 10000;
    top: 0;
    left: 0  }

  header .navbar-nav {
    justify-content: center;
    width: 100%;
    height: 100vh }  

  header .nav-item { 
    color: #FFF;
    text-align: center;
    padding: 1rem 3rem !important; 
    width: 100%;
    font-size: 150% }

  header .nav-item .btn { font-size: 100% }

}




  

/* hero
//////////////////////////////////////////////////*/
/* #hero { height: calc(100% - var(--header-height))} */
#hero { height: calc(100% - var(--header-height))}

#hero,
#hero .carousel-inner,
#hero .carousel-item,
#hero .carousel-cover,
#hero .carousel-cover img { height: 100% }

#hero .carousel-inner {
  background: var(--color-dark);
  position: relative }

#hero .carousel-cover img {
  height: 100%;
  width: 100%;
  object-fit: cover }

#hero .carousel-caption { 
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: auto;
  transform: translate(-50%,-50%);
  /* transform: translate(-50%,calc(-50% + var(--header-height)/2));  */
}

#hero .carousel-caption h1 { font-size: clamp(200%, 10vw, 450%) }

#hero .carousel-caption p { font-size: clamp(100%, 10vw, 125%) }

#hero .carousel-indicators {
  justify-content: start;
  align-items: flex-start;
  margin: 0;
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1 }  

#hero .carousel-indicators li {
  border: 0;
  width: 15px;
  height: 15px;
  margin: 0 5px 0 0;
  border-radius: 5px;
  background: var(--color-primary) } 

@media(max-width:1650px){
  /* next/prev distance 
  .hero-caption { width: 75% }*/
}

@media(max-width:1280px){
  #hero .carousel-indicators { padding: 0 15px }
}

@media(max-width:767.68px){
  #hero .carousel-caption { transform: translate(-50%,calc(-50% + var(--header-height)/2)) }
  #hero .carousel-indicators { padding: 0 30px }
}


@media(max-height:620px){
  #hero { height: auto }
}



/* services 
//////////////////////////////////////////////////*/
#services  .icon-services { 
  transform: rotate(0);
  transition: all 300ms }

#services article:hover .icon-services { 
  transform: rotate(-10deg) }

#services article h3 {  
  transform: rotate(0);
  position: relative;
  top: 0;
  transition: all 300ms  }

#services article:hover h3 { top: 5px }



/* gallery 
//////////////////////////////////////////////////*/
#gallery img { object-fit: cover }




/* blog 
//////////////////////////////////////////////////*/
.post-body li,
.post-body p { margin-bottom: clamp(.75rem, 1rem + 1vw, 1.5rem) }

@media(max-width:767.98px){
  #blog p { font-size: 80% !important }
}




/* contact 
//////////////////////////////////////////////////*/
#contact { 
  background: var(--color-dark)  url(img/bg-contact.webp) bottom center no-repeat }

#contact .border-top { 
  height: 350px;
  border-color: rgba(255,255,255,.2) !important}

@media(max-width:767.98px){
  #contact .border-top { height: 500px }
}


/* feedbacks 
//////////////////////////////////////////////////*/
#feedbacks {
  background: url(img/bg-feedbacks.webp);
  background-size: cover }

.carousel-nav {
  width: calc(108px + 10rem);
  height: 108px;
  z-index: 1 }

.inner #feedbacks img { max-width: 96px }

#feedbacks .row .col img { max-width: 64px }

#feedbacks .row .icon { 
  top:  -1.5rem; 
  left: -1rem; 
  opacity: .05; 
  z-index:  0 }

#feedbacks .row .col p { 
  position: relative; 
  z-index: 1 }  
 

@media(min-width:768px){
  #feedbacks .row .col:nth-child(3),
  #feedbacks .row .col:nth-child(4),
  #feedbacks .row .col:nth-child(9),
  #feedbacks .row .col:nth-child(10),
  #feedbacks .row .col:nth-child(15),
  #feedbacks .row .col:nth-child(16),
  #feedbacks .row .col:nth-child(21),
  #feedbacks .row .col:nth-child(22),
  #feedbacks .row .col:nth-child(27) { width: 50% }

  #feedbacks .row .col:nth-child(3) p,
  #feedbacks .row .col:nth-child(4) p,
  #feedbacks .row .col:nth-child(9) p,
  #feedbacks .row .col:nth-child(10) p,
  #feedbacks .row .col:nth-child(15) p,
  #feedbacks .row .col:nth-child(16) p,
  #feedbacks .row .col:nth-child(21) p,
  #feedbacks .row .col:nth-child(22) p,
  #feedbacks .row .col:nth-child(27) p { font-size: 150% }
}







/* footer 
//////////////////////////////////////////////////*/
footer section { padding: clamp(3.25rem, 10vw, 3.5rem) 0 }

footer .border-bottom { border-color: rgba(0,0,0,.1) !important}

.footer-mapsite a { 
  line-height: 2;
  color: #FFF }

@media(min-width:992px){
  .footer-mapsite { height: 140px }
}

footer .brand-flexpoint {
  display: inline-block;
  text-indent: -1000000px;
  background: url(https://www.flexpoint.com.br/addons/flexpoint-site-sign.png);
  width: 25px;
  height: 27px } 

footer .brand-flexpoint.brand-black { background-position: bottom }
footer .brand-flexpoint.brand-white { background-position: top }





/* form elements
//////////////////////////////////////////////////*/
.form-control { padding: 1rem 1.5rem }

.btn { 
  font-weight: bold;
  transition: none;
  border-radius: .5rem;
  text-decoration: none !important;
  padding: 1.175rem 1.5rem;
  border: 0 }

.btn-sm { 
  font-size: 87.5%;
  padding: .75rem 1.5rem }

.btn-lg { padding: 1.25rem 1.5rem }

.btn-primary    { 
  background: var(--color-primary) !important; 
  color: #FFF !important } 

.btn-secondary  { background: var(--color-secondary) !important } 
.btn-link       { color: var(--color-primary) !important } 

.btn-outline-primary {
  box-shadow: inset 0 0 0 1px var(--color-primary);
  color: var(--color-primary) } 

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background: var(--color-primary);
  color: #FFF } 
  
.btn-outline-secondary {
  box-shadow: inset 0 0 0 1px var(--color-secondary);
  color: var(--color-secondary) }  

.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary:focus { background: var(--color-secondary) }   

.btn-outline-secondary-dark {
  box-shadow: inset 0 0 0 1px var(--color-secondary-dark);
  color: var(--color-primary) }  

.btn-outline-secondary-dark:hover,
.btn-outline-secondary-dark:active,
.btn-outline-secondary-dark:focus { 
  background: var(--color-secondary-dark);
  color: #FFF }  

.btn-whatsapp {
  background: #00C484;
  color: #FFF !important }  

.btn-whatsapp-outline {
  border: 2px solid #00C484;
  color: #00C484 }  

.btn-whatsapp-outline:hover,
.btn-whatsapp-outline:active,
.btn-whatsapp-outline:focus {
  background: #00C484;
  color: #FFF }  

.btn-outline-light {
  box-shadow: inset 0 0 0 1px #AAA;
  color: #AAA }  

.btn-outline-light:hover,
.btn-outline-light:active,
.btn-outline-light:focus {
  background: #AAA;
  color: #FFF }  

.btn-white { 
  color: var(--color-primary);
  background: #FFF }  

.btn-white:hover,
.btn-white:active,
.btn-white:focus { 
  color: #FFF;
  background: var(--color-primary) !important }  

.btn-white-10 { 
  color: #FFF;
  background: rgba(255,255,255,.1) }  

.btn-white-10:hover,
.btn-white-10:active,
.btn-white-10:focus { 
  color: var(--color-default);
  background: rgba(255,255,255,1) }  

.btn-light { background: var(--color-light) }  

.btn-light:hover,
.btn-light:active,
.btn-light:focus { 
  color: #FFF;
  background: var(--color-dark) }  

.btn-outline-white {
  box-shadow: inset 0 0 0 1px #FFF;
  color: #FFF !important }  

.btn-outline-white:hover,
.btn-outline-white:active,
.btn-outline-white:focus { background: var(--color-primary); }  

.btn:active,
.btn:hover,
.btn:focus { box-shadow: inset 0 0 0 100rem rgba(255,255,255,.23) }

@media(max-width:767.98px){
  .btn-block { width: 100% }
}


/* global 
//////////////////////////////////////////////////*/
.bg-dark .btn-close,
.bg-primary .btn-close,
.bg-secondary .btn-close {
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both }

.p-10 { padding: 6rem }

.small2 { font-size: 75% }

.ls-1 { letter-spacing: .25rem }

@media(min-width:992px){

  .p-md-10 {
    padding: 6rem !important
  }

  .gap-md-10 { gap: 6rem !important }
  .gap-md-20 { gap: 12rem !important }
    
  .g-md-10, 
  .gy-md-10 {
    --bs-gutter-y: 6rem;
  }

  .g-md-10, 
  .gx-md-10 {
    --bs-gutter-x: 6rem;
  }

  .rounded-10 {
    border-radius: 6rem !important
  }
}

@media(max-width:991.98px){
  .rounded-10 {
    border-radius: 3rem !important
  }
}

/* @media(max-width:767.98px){
  .animated{
    -webkit-animation-duration: 0s;
    animation-duration:  0s
  }
} */


.rounded-3 { border-radius: .75rem !important }




/* aspects ratio
//////////////////////////////////////////////////*/
[class~="ratio"]{
  position: relative;
  overflow: hidden;
  display: block }

[class~="ratio"] img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover }

  img[width]{
    width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height) }

  


/* ANIMATION: DELAY / DURATION
//////////////////////////////////////////////////////////////////////////////////////////*/
.delay1   { animation-delay: 500ms !important }
.delay2   { animation-delay: 1000ms !important }
.delay3   { animation-delay: 1500ms !important }
.delay4   { animation-delay: 2000ms !important }
.delay5   { animation-delay: 2500ms !important }
.delay6   { animation-delay: 3000ms !important }
.delay7   { animation-delay: 3500ms !important }
.delay8   { animation-delay: 4000ms !important }
.delay9   { animation-delay: 4500ms !important }
.delay10  { animation-delay: 5000ms !important }
.delay11  { animation-delay: 6000ms !important }

.duration100  { animation-duration: 100ms !important }
.duration200  { animation-duration: 200ms !important }
.duration300  { animation-duration: 300ms !important }
.duration400  { animation-duration: 400ms !important }
.duration500  { animation-duration: 500ms !important }
.duration600  { animation-duration: 600ms !important }
.duration700  { animation-duration: 700ms !important }
.duration800  { animation-duration: 800ms !important }
.duration900  { animation-duration: 900ms !important }
.duration1000 { animation-duration: 1000ms !important }
.duration2000 { animation-duration: 2000ms !important }
.duration3000 { animation-duration: 3000ms !important }
.duration4000 { animation-duration: 4000ms !important }
.duration5000 { animation-duration: 5000ms !important }
.duration6000 { animation-duration: 6000ms !important }
.duration7000 { animation-duration: 7000ms !important }
.duration8000 { animation-duration: 8000ms !important }
.duration9000 { animation-duration: 9000ms !important }
.duration10000 { animation-duration: 10000ms !important }
.duration20000 { animation-duration: 20000ms !important }
.duration30000 { animation-duration: 30000ms !important }

.parallax {
  display: block;
  min-height: 100%;
  position: relative;
  overflow: hidden }

.parallax img { position: absolute }




/* SVG ICONS
//////////////////////////////////////////////////////////////////////////////////////////*/
.icon { 
  display: inline-block;
  position: relative }

.icon-16 { width: 16px; height: 16px }
.icon-24 { width: 24px; height: 24px }
.icon-32 { width: 32px; height: 32px }
.icon-48 { width: 48px; height: 48px }
.icon-64 { width: 64px; height: 64px }
.icon-96 { width: 96px; height: 96px }

.icon.text-default    { fill: var(--color-default) }
.icon.text-primary    { fill: var(--color-primary) }
.icon.text-secondary  { fill: var(--color-secondary) }
.icon.text-white-25   { fill: rgba(255,255,255,.25) }
.icon.text-black-25   { fill: rgba(0,0,0,.25) }
.icon.text-white      { fill: #FFF }
.icon.text-whatsapp   { fill: #03B35B }




/* CSS SPRITES
//////////////////////////////////////////////////////////////////////////////////////////*/
.icon-services { 
  display: inline-block;
  position: relative;
  background: url("img/icons-services.webp") top left no-repeat }

.icon-s3{ width:52px; height:89px; background-position:0 0; }
.icon-s10{ width:40px; height:82px; background-position:0 -89px; }
.icon-s9{ width:82px; height:82px; background-position:0 -171px; }
.icon-s8{ width:82px; height:82px; background-position:0 -253px; }
.icon-s7{ width:82px; height:82px; background-position:0 -335px; }
.icon-s6{ width:82px; height:82px; background-position:0 -417px; }
.icon-s5{ width:82px; height:85px; background-position:0 -499px; }
.icon-s4{ width:82px; height:82px; background-position:0 -584px; }
.icon-s2{ width:56px; height:85px; background-position:0 -666px; }
.icon-s1{ width:82px; height:75px; background-position:0 -751px; }

  
  
  


/* OTHERS
//////////////////////////////////////////////////////////////////////////////////////////*/
@media(min-width:992px){
  .position-md-absolute { position: absolute }
}

/* 
.texture { position: relative }

.texture:after {
  content: "";
  z-index: -1;
  background: url(img/bg-texture.webp);
  background-size: 100% 100%;
  position: absolute;
  width: 75%;
  height: calc(100% + 3rem) }

.texture.right:after { 
  right: -50%;
  top: 50%;
  transform: translate(-50%,-50%)  }

.texture.left:after { 
  left: -50%;
  top: 50%;
  transform: translate(25%,-50%)  } */