.sobre {padding: 63px 0 0;}

.engloba-cards {padding: 86px 0 74px;}
.engloba-cards {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;}

.engloba-cards .conteudo {display: flex; flex-direction: row; justify-content: space-between; gap: 51px;}
.engloba-cards .card-1 svg, .engloba-cards .card-2 svg {fill: #B91818;}

.engloba-cards .card-1 svg {left: -34px; bottom: -71px; width: 244px; height: 268px;}
.engloba-cards .card-2 svg {left: 0; bottom: -23px; width: 208px; height: 234px;}
.engloba-cards .card-3 svg {left: -26px; bottom: -37px; width: 237px; height: 237px;}

.engloba-brefing {padding: 88px 0 97px;}
.engloba-brefing {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;}

.engloba-brefing .conteudo {display: flex; flex-direction: row; justify-content: space-between; gap: 51px;}

.time-line {padding: 83px 0 106px; background: var(--branco-seg);}
.time-line .conteudo > .titulo {font: 600 48px / 59.7px raleway; color: var(--preot-seg); font-style:italic; text-align: center; margin: 0 0 50px;}
.time-line .conteudo > .titulo b {color: var(--vermelho); font-style:normal; font-weight: 800;}

.time-line .cards {display: flex; flex-direction: row; flex-wrap: wrap;gap: 64px 80px;}
.time-line .cards .card {max-width: 24%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 32px; margin: 0 0 64px; position: relative; z-index: 2; background-color: var(--branco-seg);}
.time-line .cards .card .circulo {border: var(--vermelho) solid 12px; border-radius: 100%; width: 268px; height: 268px; background: var(--branco); display: flex; justify-content: center; align-items: flex-end; position: relative; z-index: 100;}
.time-line .cards .card .titulo {font: 600 43px montserrat; font-style: italic; color: var(--branco); background: var(--vermelho); padding: 6px 24px; display: block; width: 158px; text-align: center;}
.time-line .cards .card .texto {font: 400 15px / 27px montserrat; color: var(--preot-seg); text-align: center;}

.time-line .cards svg .cls-1 {height: 0; width: 0; fill: var(--preto-seg);}
/* .time-line .cards svg.show .cls-1 {animation: var(--animation) 2s 3s forwards ease;} */
.show .circulo, .show .texto, svg.show {animation: opacity 1.3s ease forwards; opacity: 1;}
.hide .circulo, .hide .texto, svg.hide {opacity: 0;}

.engloba-cards .card-1 svg .cls-1 , .engloba-cards .card-2 svg .cls-1 {fill: #b91818b0;}
.engloba-cards .card-3 svg path.cls-1 {fill: none;}

.engloba-cards .splide__list {justify-content: space-between; width: 100%;}
.engloba-cards .splide__list li {max-width: 346px;}
.engloba-cards .conteudo .splide {width: 100%;}

/* .engloba-brefing {overflow-x: hidden;} */
.engloba-brefing .splide__track {overflow: visible;}
.engloba-brefing .splide__list {justify-content: space-between; width: 100%;}
.engloba-brefing .splide__list li {max-width: 346px;}
.engloba-brefing .conteudo .splide {width: 100%;}

.engloba-brefing .splide__arrow, .engloba-cards .splide__arrow {opacity: 1; background: none;}
.engloba-cards .splide__arrow svg {fill: var(--branco); height: 2em; width: 2em;}

.engloba-brefing .splide__arrow svg {fill: var(--vermelho); height: 2em; width: 2em;}
.engloba-brefing .splide__arrow--prev {left: -1.4em;}
.engloba-brefing .splide__arrow--next {right: -1.4em;}

.time-line .recxy {display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 5px; position: absolute;;}
.time-line .rec {width: 14px; height: 3px; background-color: grey;}

.animate__animated {
     animation:opacity 0.5s ease-in-out forwards;
}

@keyframes opacity {
     0% {opacity: 0;}
     100% {opacity: 1;}     
}

@keyframes horizontal {
     0% {opacity: 0;}
     100% {opacity: 1;}     
}

@keyframes vertical {
     0% {opacity: 0;}
     100% {opacity: 1;}     
}

@media (max-width:1220px){
     .sobre .conteudo {flex-direction: column;}
     .banner-sobre .conteudo {flex-direction: column;}

     .engloba-cards .splide__list {justify-content: unset;}
     .engloba-cards .splide__list li {max-width: 100%;}
     .engloba-cards .conteudo .splide {width: 100%;}

     .engloba-brefing {padding: 40px 0 97px;}
     .engloba-brefing .splide__track {overflow: hidden;}
     .engloba-brefing .splide__list {justify-content: flex-start;}
     .engloba-brefing .splide__list li {max-width: 100%; padding: 40px 0 0;}
     .engloba-brefing .conteudo .splide {width: 100%;}
}

@media (max-width:990px){
     .time-line .cards {gap: 30px;}
     .time-line .cards .card {max-width: 40%;}
     .time-line {padding: 45px 0;}
     .time-line .conteudo > .titulo {font-size: 32px; line-height: 42px; margin: 0 0 15px;}
     .engloba-brefing .splide__list li {padding: 20px 0 0;}
     .engloba-brefing {padding: 20px 0 37px;}
     .sobre {padding: 25px 0 ;}
     .engloba-cards {padding: 25px 0 ;}
}

@media (max-width:780px){
     .time-line .cards .card .circulo {border: var(--vermelho) solid 8px; width: 208px; height: 208px; }
     .time-line .cards .card .titulo {font-size: 23px; width: 110px;}
     /* .time-line .cards {justify-content: space-between;} */
     .time-line .cards .card {max-width: 40%;}
}

@media (max-width:600px){
     .time-line .cards .card .circulo {border: var(--vermelho) solid 8px; width: 208px; height: 208px; }
     .time-line .cards .card .titulo {font-size: 23px; width: 110px;}
     .time-line .cards {justify-content: space-between;}
     .time-line .cards .card {max-width: 100%; margin: 0;}     
}