@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html{
    font-family: "Poppins", sans-serif;

}

main{

 display: flex;
 flex-direction: row;
 align-items: center;

}

#titulo {
    
    margin-top: 40px;
    font-size: 16px;
    text-align: center;
    padding: 50px;
    padding-top: 10px;
    background-color: #810202;
    color: aliceblue;

    
   
   }



/* Progress Bar Section */
ul,li{ margin:0px; padding:0px; }
h1,h2,h3,h4,h5,h6{ margin:0px; }

.linhaquemsomos {
   
    width: 100%;
    float: left;
    padding: 40px 0;
   
    height: fit-content;
  
 
}


.linhaquemsomos .timeline-main {
   
    width: 100%;
    float: left;
    padding: 50px 0;
    position:relative; }

.linhaquemsomos .timeline-main ul {
    
    width: 100%;
    float: left;
    
}

.linhaquemsomos .timeline-main ul li {

    width: 100%;
    float: left;
    position: relative;
    margin-bottom: -30px;
    padding: auto;
    
     }

.linhaquemsomos .timeline-main ul li:before { /* ESTILO DA BOLINHA ANTES DE PASSAR*/
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    height: 15px;
    width: 15px;
    background-color:#8B0D0D;  /* COR DA BOLINHA*/
    
   
    border-radius: 50%;
    -webkit-transition: all 2000ms ease;
    -moz-transition: all 2000ms ease;
    -o-transition: all 2000ms ease;
    -ms-transition: all 2000ms ease;
    transition: all 2000ms ease; }

.linhaquemsomos .timeline-main ul li:last-child { padding-bottom: 0px; }

.linhaquemsomos .timeline-main ul li:nth-child(even) .custom-box { float: right; }

.linhaquemsomos .timeline-main ul li .custom-box { /* CAIXA DE TEXTO*/

    position: relative;
    width: calc(50% - 50px);
    right: 0px;
    padding: 0px;
    text-align: center;
    -webkit-transition: all 2000ms ease;
    -moz-transition: all 2000ms ease;
    -o-transition: all 2000ms ease;
    -ms-transition: all 2000ms ease;
    transition: all 2000ms ease;

}

.linhaquemsomos .timeline-main ul li.adding .custom-box {
    width: calc(50% - 40px);
}

.linhaquemsomos .timeline-main ul li .custom-box:before { /*SETA DAS CAIXAS DE TEXTO*/
    
    content: '';
    position: absolute;
    width: auto;
    height: auto;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 15px solid #8B0D0D;
    right: -15px;}

.linhaquemsomos .timeline-main ul li:nth-child(even) .custom-box:before { left: -15px; right: auto; transform: rotateY(180deg); }

.linhaquemsomos .timeline-main ul li .custom-box h3 {

    color:#810202;
    padding: 8px 10px;
    font-size: 20px;
    line-height: 28px;
    text-transform: capitalize;
    border-radius: 15px;
    text-shadow: #000 5px;
    
}

.linhaquemsomos .timeline-main ul li .custom-box p { /*TEXTO*/
    
    font-size: 15px;
    line-height: 26px;
    color: #000000;
    padding: 5px 20px; }

.timeline-main .progress-wrap {
    
    position: absolute;
    overflow :hidden;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 100%;
    background-color: none;
    border-radius: 10px;
   

}

.timeline-main .progress-wrap .pogress {
    
    width: 100%;
    height: 0;
    top: 0;
    left: 50%;
    border-radius: 10px;
    transform: translateX(-50%);
    transition-duration: 1.5s;
    position: absolute;
    background-image: linear-gradient(to bottom, transparent,#8B0D0D);
    box-shadow: 10px 5px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;

}

@media screen and (max-width: 750px) /* Estilos para telas pequenas */ {



    #titulo {
      

        margin-top: 20%;
        font-size: 16px;
        text-align: center;
        padding: 50px;
        padding-top: 10px;
        background-color: #810202;
        color: aliceblue;
        
       
       }


}