main{
    width: 100%;
    height: auto;
}
.container-quem-somos{
    width: 100%;
    height: 100%;  
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items:center ;
    gap: 60px;
}
.box-title-quem-somos{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}
.box-title-quem-somos h2{
    font-size: 30px;
    font-weight: 600;
    text-align: center;
}
.box-title-quem-somos p{
    width: 800px;
    font-size: 20px;
    font-weight: 300;
    color: rgba(0, 0, 0, 61%);
    text-align: center;
}
.grid-quem-somos{
    width: 65%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 80px;
}
.bk{
    background-color: gray;
    border-radius: 15px;
    height: 100px;
}
.bk img{
    width: 100%;
    height: 100%;
    image-rendering:auto;
    border-radius: 15px;
}
.b-color-blue{
    background-color: #23B5D3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 500;
}
.coluna{
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.coluna .bx-1,.bx-3{
    height: 130px;
}
.coluna .bx-2,.bx-4,.bx-10{
    height: 200px;
}
.coluna .bx-5,.bx-7,.bx-14{
    height: 150px;
}
.coluna .bx-6,.bx-13{
    height: 250px;
}
.coluna .bx-8,.bx-9{
    height: 110px
}
.coluna .bx-11{
    height: 370px
}
.coluna .bx-12{
    height: 280px;
}

/*bootstrap*/
.scroller {
    width: 100%;
    margin: 20px 0;
  }
.scroller__inner {
    padding-block: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 200px;
  }
.scroller__inner img{
    width: 150px;
    height: 100px;
    cursor: pointer;
}
  
.scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(
      90deg,
      transparent,
      white 20%,
      white 80%,
      transparent
    );
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}
  
.scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s)
      var(--_animation-direction, forwards) linear infinite;
}
  
.scroller[data-direction="right"] {
    --_animation-direction: reverse;
}
  
.scroller[data-direction="left"] {
    --_animation-direction: forwards;
}
  
.scroller[data-speed="fast"] {
    --_animation-duration: 20s;
}
  
.scroller[data-speed="slow"] {
    --_animation-duration: 60s;
}
  
@keyframes scroll {
    to {
      transform: translate(calc(-50% - 0.5rem));
    }
}