body,html{
    font-size: 16px;
    scroll-behavior: smooth;
}
#logo{
    width: 125px;
    height: auto;
}


.row{
    margin-left: 0;
    margin-right: 0;
}

.banner-image{width: 100%;}

.grey-title{
   color: #B6B8BA; 
 background-image: linear-gradient(45deg, #5d5f61 , #F7F5F5 50%, #343436 100%, #999999 ); 
 background-clip: text; 
 -webkit-background-clip: text; 
 -webkit-text-fill-color: transparent; 
 text-transform: uppercase;
}

.blue-title{
    color: #5483B3; 
 background-image: linear-gradient(45deg, #5483B3 , #82A7C4 50%, #1E4B69 100%, #2D5496 ); 
 background-clip: text; 
 -webkit-background-clip: text; 
 -webkit-text-fill-color: transparent; 
 text-transform: uppercase;
}

.dark-section{
    background-color: #191936;
    color:#fff;
}

.light-section{
    background-color: #fff;
    color:#191936;
}
:root { --pos: 50%; /* posição inicial do corte */ }

  .ba {
    position: relative;
    max-width: 750px;
    margin: 30px auto;
    user-select: none;
  }
  .ba img {
    display: block;
    width: 100%;
    height: auto;
  }
  .ba__wrap {
    position: relative;
  }
  /* As duas imagens ficam empilhadas exatamente no mesmo lugar */
  .ba__wrap > img,
  .ba__after > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;       /* garante preenchimento igual */
    pointer-events: none;
  }
  .ba__wrap { position: relative; }
  .ba__wrap::before {        /* reservador de altura conforme a primeira imagem */
    content: "";
    display: block;
    padding-top: var(--ratio, 56.25%); /* fallback 16:9; será ajustado via JS */
  }

  /* “Depois” é recortado por clip-path sem mudar layout */
  .ba__after {
    position: absolute;
    inset: 0;
    clip-path: polygon(0 0, var(--pos) 0, var(--pos) 100%, 0 100%);
  }

  /* barra + handle exatamente na mesma posição do corte */
  .ba__bar {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .ba__bar::after {
    content: "";
    position: absolute;
    left: var(--pos);
    top: 0;
    bottom: 0;
    width: 2px;
    background: white;
    box-shadow: 0 0 0 1px rgba(0,0,0,.2);
    transform: translateX(-1px);
  }

  .ba__handle {
    position: absolute;
    left: var(--pos);
    top: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px; border-radius: 999px;
    background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25);
    cursor: ew-resize;
    touch-action: none;
    display: grid; place-items: center;
  }
  .ba__handle::before, .ba__handle::after {
    content: "";
    width: 10px; height: 10px;
    border-top: 2px solid #333; border-right: 2px solid #333;
  }
  .ba__handle::before { transform: rotate(225deg) translate(-2px,-2px); }
  .ba__handle::after  { transform: rotate(45deg)  translate( 2px, 2px); }

  .sample-icon{
    width: 80%;
    display: block;
    margin: 0 auto;
  }
 .prod-icon{
   width: 100%;
 }
  .prod{
    border:.5px solid #cacaca;
    min-height: 450px;
  }
  .wp-btn{
    background-color: #2ab318;
    color:white;
    padding: 20px;
    border-radius: 2em;
    transition: all .2s;

  }

  .wp-btn:hover{
    background-color: #2ab318;
    color:white;
    padding: 20px;
    border-radius: 2em;
    box-shadow: 0px 0px 10px rgb(180, 238, 44);
    text-decoration: none;
  }
  .wp-icon{
    width: 50px;
    

  }

  .contact-icon{
    width: 40px;
  }
  .footer{
    background-image: url(../images/bottom-rgba.png);
    background-attachment: fixed;
    background-size: cover;
    height: 500px;
    background-position: center top;
    background-color: rgba(0,0,0,.2);
    color:white;
    text-align: center;
  }

.copyright{
  background-color: #333;
  color:white;
  text-align: center;
  padding: 20px;
}

    .navbar-nav {
    width: 100%;
    text-align: center;
    > li {
      float: none;
      display: inline-block;
    }
  }


.prod-desc{
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
}

.prod-link:link{
  color:#2bcbd6;
  text-decoration: none;
  transition: all .2s;
}
.prod-link:hover{
  color:#13b0bb;
}
/* Extra pequenos (celulares muito pequenos) */
@media (max-width: 320px) {
  #mycarousel{
    margin-top: 50px;
  }
  .wp-btn{
    font-size: 12px;
  }
}

/* Pequenos (smartphones) */
@media (min-width: 321px) and (max-width: 480px) {
  #mycarousel{
    margin-top: 50px;
  }
   .wp-btn{
    font-size: 12px;
  }
}

/* Médios (smartphones maiores e phablets) */
@media (min-width: 481px) and (max-width: 768px) {
  #mycarousel{
    margin-top: 50px;
  }
   .wp-btn{
    font-size: 12px;
  }
}

/* Grandes (tablets em landscape e telas pequenas de notebook) */
@media (min-width: 769px) and (max-width: 1024px) {
 #mycarousel{
    margin-top: 20px;
  }
}

/* Extra grandes (notebooks e desktops médios) */
@media (min-width: 1025px) and (max-width: 1280px) {
  #mycarousel{
    margin-top: 20px;
  }
}

/* Full HD (desktops grandes) */
@media (min-width: 1281px) and (max-width: 1440px) {
  /* estilos para 1281px até 1440px */
}

/* 2K monitores */
@media (min-width: 1441px) and (max-width: 1920px) {
  /* estilos para 1441px até 1920px */
}

/* Ultra wide / 4K */
@media (min-width: 1921px) and (max-width: 2560px) {
  /* estilos para 1921px até 2560px */
}

/* Telas maiores ainda (5K, 8K etc.) */
@media (min-width: 2561px) {
  /* estilos para telas muito grandes */
}