:root {
  --color-default: #333;
  --color-primary: #082531;
  --color-secondary: #FF9200;
  --color-light: #F4F4F4;
  --header-height: 150px }

@media(max-width:767.98px){
  :root { --header-height: 100px }
}

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

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

a:not(a[class]) { color: var(--color-secondary) }


html, body { height: 100% }

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

a { text-decoration: none }

a:hover { text-decoration: underline }


 


/* wrapper 
//////////////////////////////////////////////////*/
section,
.inner main,
.wrapper { padding: clamp(5rem, 5vw, 13rem) 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 { 
  font-weight: bold;
  margin-bottom: clamp(1rem, 1rem + 2vw, 2.5rem);
  font-size: clamp(150%, 3vw, 300%) }

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

h3, .h3 { 
  font-weight: bold;
  margin-bottom: clamp(1rem, 1rem + 2vw, 1.5rem);
  font-size: clamp(112.5%, 3vw, 175%) }

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

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

p, #post li { font-size: clamp(87.5%, 1vw, 100%) }

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




/* header 
//////////////////////////////////////////////////*/
header { height: var(--header-height) }

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

.home header { 
  z-index: 5;
  position: absolute !important;
  width: 100% }

.inner header { 
  position: relative;
  z-index: 1;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1) }  

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

/* 
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;

  padding-left: 0 !important;
  padding-right: 0 !important;
  text-decoration: none;
  margin: 0;
  color: var(--color-primary) }

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

.header-social a { 
  transition: all 300ms;
  opacity: .5 }
  
.header-social a:hover { opacity: 1 }

.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-secondary) !important }

@media(min-width:992px){ 

  header.navbar-expand-lg .navbar-nav .nav-link { 
    font-size: clamp(80%, 1.25vw, 100%);
    margin-left: clamp(.25rem, 1.5vw, 2rem);
    margin-right: clamp(.25rem, 1.5vw, 2rem) }

  header .nav-link:last-child { padding-right: 0 !important }
}

@media(max-width:991.98px){

  header .navbar-brand { width: 75% }

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

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

  header .nav-item { 
    width: 100%;
    line-height: 3rem }

  header .nav-link,
  header .btn { 
    color: #FFF;
    font-size: 150% }

  header .nav-link {
    padding-right: 3rem !important;
    padding-left: 3rem !important }

  .header-social a { opacity: 1 }

}

@media(max-width:767.98px){
  .home header { 
    background: none !important;
    position: inherit !important }
}




  

/* hero
//////////////////////////////////////////////////*/
#hero { position: relative }

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

#hero .hero-parallax .position-absolute { z-index: 1 }  

#hero .float { animation: float 5s ease-in-out infinite }

@keyframes float {
  0%    { transform: translatey(0px); }
  50%   { transform: translatey(-30px); }
  100%  { transform: translatey(0px); }
}

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

#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(min-width:768px){
  #hero,
  #hero .carousel-inner,
  #hero .carousel-item,
  #hero .carousel-cover { height: 100% }

  #hero .hero-parallax { 
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0,-50%) }  
}

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

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

  #hero .hero-parallax img { max-width: 100% }
  
}

@media(max-width:767.68px){
  #hero .carousel-caption { 
    position: inherit !important;
    left: 0 !important;
    right: 0!important;
    top: 0 !important; 
    bottom: 0 !important;
    transform: translate(0,0) !important }

  #hero .carousel-indicators { padding: 0 30px }

  @keyframes float {
    0%    { transform: translatey(0px); }
    50%   { transform: translatey(-10px); }
    100%  { transform: translatey(0px); }
  }
}



/* about 
//////////////////////////////////////////////////*/

@media(min-width:768px){
  .home #about img{
  object-fit: contain;
  height: 100%;
  transform: translateY(-50%) !important;
}
}

#about .position-relative {
  height: clamp(400px, 60vw, 700px);
}

@media(max-width:767.98px){
  #about .position-absolute { position: inherit !important }

  #about .position-relative { height: auto }
    
  #about img,
  #about-more img { 
    transform: translate(0) !important;
    max-width: 100% }
}








/* cases 
//////////////////////////////////////////////////*/
#cases .translate-y{
  transform: translateY(-65%);

}
#cases .carousel-nav a {
  display: inline-block;
  border-radius: 100%;
  margin: 0 .25rem;
  box-shadow: 2px 2px 5px rgba(0,0,0,.1);
  padding: .75rem 1rem;
  background: #FFF }

#cases img.case-cover { 
  max-width: 99%;
  height: 99%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 0 }

#cases img.case-mask { 
  position: relative;
  z-index:1 }

.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end { transition: all .3s !important }

@media(max-width:1366px){
  #cases img.case-mask { max-width: 100% }
}


@media(max-width:767.98px){
  #cases .position-absolute { position: inherit !important }
  #cases .translate-y { 
    top: 0 !important;
    transform: translateY(10%) !important}
}







/* cites 
//////////////////////////////////////////////////*/
#cites .carousel-nav { z-index: 1 }

#cites .carousel-nav a {
  border-radius: 100%;
  padding: .75rem 1rem;
  background: rgba(255,255,255,.15) }







/* partners
//////////////////////////////////////////////////*/
#partners a { 
  transition: all 300ms;
  opacity: .25;
  filter: grayscale(1) }

#partners a:hover { 
  opacity: 1;
  filter: grayscale(0) }




/* products 
//////////////////////////////////////////////////*/
#products .col > div  { transition: all 300ms }

#products .col > div:hover {
  box-shadow: 
    0     3rem 3rem -3rem rgb(0 0 0 / 10%), 
    0    -3rem 3rem -3rem rgb(0 0 0 / 10%), 
    3rem  0    3rem -3rem rgb(0 0 0 / 10%), 
   -3rem  0    3rem -3rem rgb(0 0 0 / 10%);
}

.thumbs .more {
  position: absolute;
  color: #FFF;
  font-size: 400%;
  background: rgba(0,0,0,.75);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100% }

/* @media(min-width:768px){
  #product .scroll {
    height: 10rem;
    padding-right: 1rem;
    overflow-y: scroll }
} */


/* contact 
//////////////////////////////////////////////////*/
#contact .border-top { border-top: 1px solid rgba(255,255,255,.25) !important }

@media(max-width:991.98px){
  #contact { 
    background: url(img/bg-contact-xs.jpg) center;
    background-size: cover }

  #contact .border-top { border: 0 !important }
}


/* footer 
//////////////////////////////////////////////////*/
footer section { padding: 3.25rem 0 }

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

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




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

.btn { 
  border-radius: 5px;
  text-decoration: none !important;
  padding: 1rem 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 } 
.btn-secondary  { color: #FFF !important; 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-primary) }  

.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: #31BE42;
  color: #FFF !important }  

.btn-whatsapp-outline {
  border: 2px solid #31BE42;
  color: #31BE42 }  

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

.btn-light-outline {
  border: 3px solid #999;
  color: #999 }  

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

.btn-white {
  background: #FFF;
  color: #999 }  

.btn-white:hover,
.btn-white:active,
.btn-white:focus { 
  color: #FFF !important;
  background: none }  

.btn-outline-white {
  border: 1px solid #FFF;
  color: #FFF }  

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

.btn:active,
.btn:hover,
.btn:focus { box-shadow: inset 0 0 100px rgba(0,0,0,0.1) }

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


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



/* 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-primary    { fill: var(--color-primary) }
.icon.text-secondary  { fill: var(--color-secondary) }
.icon.text-black-50   { fill: rgba(0,0,0,.5) }
.icon.text-white      { fill: #FFF }
.icon-whatsapp        { fill: #03B35B }




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

.icon-s9{ width:191px; height:169px; background-position:0 0; }
.icon-s1{ width:168px; height:169px; background-position:0 -169px; }
.icon-s3{ width:198px; height:169px; background-position:0 -338px; }
.icon-s5{ width:167px; height:169px; background-position:0 -507px; }
.icon-s7{ width:212px; height:169px; background-position:0 -676px; }
.icon-s8{ width:196px; height:169px; background-position:0 -845px; }
.icon-s4{ width:198px; height:169px; background-position:0 -1014px; }
.icon-s6{ width:182px; height:169px; background-position:0 -1183px; }
.icon-s2{ width:186px; height:169px; background-position:0 -1352px; }
  
  


/* OTHERS
//////////////////////////////////////////////////////////////////////////////////////////*/
.box-shadow-b {
  box-shadow: 0 3rem 2rem -2rem rgb(0 0 0 / 25%);
}

.scroll::-webkit-scrollbar { width: .25em }
 
.scroll::-webkit-scrollbar-track { 
  border-radius: 1rem;
  background: #EEE}
 
.scroll::-webkit-scrollbar-thumb { 
  border-radius: 1rem;
  background: var(--color-primary) }

/* .btn-whatsapp{
  border: 1px solid #2FBF3D
}

.btn-whatsapp:hover{
  background-color:#2FBF3D;
  color:#fff;
} */

@media (min-width: 1200px){
  .row-cols-xl-9 > .col{
    flex: 0 0 auto;
    width: 11.111111111111111111111111111111%;
  }
}