#cor-azul {
    background-color: #168FDC;
}
body::-webkit-scrollbar {
    width: 12px;               /* width of the entire scrollbar */
  }
  
  body::-webkit-scrollbar-track {
    background: rgba(17, 17, 16, 0);        /* color of the tracking area */
  }
  
  body::-webkit-scrollbar-thumb {
    background-color: #168FDC;    /* color of the scroll thumb */
    border-radius: 20px;       /* roundness of the scroll thumb */
    border: 3px solid rgb(0, 0, 0);  /* creates padding around scroll thumb */
  }


#posicionar-barra {
    display: flex;
    align-items: flex-end;
    width: 100%;
    justify-content: flex-end;
}

.barra-1 {
    border-bottom: 2px solid black;
    width: 6px;
    background-color: black;
    height: 200px;
    cursor: pointer;
    transition: 0.3s;
    margin-right: 30px;

}

.barra-3  {
    border-bottom: 2px solid black;
    width: 6px;
    background-color: black;
    height: 200px;
    cursor: pointer;
    transition: 0.3s;
    margin-right: 30px; 
}

.barra-2  {
    border-bottom: 2px solid black;
    width: 6px;
    background-color: black;
    height: 200px;
    cursor: pointer;
    transition: 0.3s;
    margin-left: 30px; 
}

.barra-1:hover {
    width: 10px;
}

.barra-3:hover {
    width: 10px;
}

.barra-2:hover {
    width: 10px;
}


.logo-meio img{     
    width: 700px;
}



#posicionar-segunda-parte {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 20px;
}


#posicionar-texto-foto {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
    margin-top: 100px;
}


.foto img {
    width: 250px;
    border-radius: 50%;
}

.foto {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

.texto-lado {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
}
.texto-lado h1{
    font-size: 50px;
    font-weight: bold;

}

.texto-lado p {
font-size: 25px;
font-weight: 500;

}

.pe {
    width: 46%;
}

.texto-lado ul li {
    font-size: 20px;
    font-weight: bold;

}


.redes {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 50px;

}


.redes img {
    border-radius: 0;
    width: 30px;
    cursor: pointer;
    transition: 0.3s;
   
}

.redes img:hover{
    width: 35px;
}