.case-study-avant .hero {
background: #2859f6;
align-items: flex-start;
color: var(--white);
height: auto;
padding-bottom: 320px;
}
.case-study-avant .hero .content {
position: relative;
padding: 220px 0 0;
} .case-study-avant .hero .bg-triangle {
width: 1024px;
height: 862px;
background: url(//redesfiepa.org.br/wp-content/themes/fieparedes_theme/assets/team/para_state.png);
background-size: 1024px 862px;
position: absolute;
top: -200px;
right: -300px;
opacity: 0;
transform: translateY(-150px);
transition: all 2s;
} .case-study-avant .hero .top {
position: relative;
z-index: 100;
transform: translateY(150px);
opacity: 0;
transition: all 1s;
}
.case-study-avant .hero .top figure {
width: 260px;
margin-bottom: 40px;
}
.case-study-avant .hero .top figure img {
width: 100%;
} .case-study-avant .hero .top .logo-mark {
display: flex;
flex-direction: column;
margin-bottom: 40px;
}
.case-study-avant .hero .top .logo-mark .logo-text {
font-size: 48px;
font-weight: 700;
letter-spacing: 8px;
line-height: 1;
color: var(--white);
}
.case-study-avant .hero .top .logo-mark .logo-subtitle {
font-size: 24px;
font-weight: 300;
letter-spacing: 12px;
color: var(--white);
opacity: 0.9;
}
.case-study-avant .hero .top h1 {
font-size: 42px;
line-height: 1.4;
font-weight: 500;
letter-spacing: -1px;
margin-bottom: 40px;
max-width: 800px;
}
.case-study-avant .hero .top h1 span {
display: block;
} .case-study-avant .hero .top .button {
display: inline-block;
background: var(--white);
color: #2859f6;
padding: 16px 32px;
font-size: 16px;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
border: 2px solid var(--white);
}
.case-study-avant .hero .top .button:hover {
background: transparent;
color: var(--white);
} .case-study-avant .hero .bottom {
display: flex;
margin-top: 60px;
position: relative;
}
.case-study-avant .hero .bottom .bg-pattern {
width: 1749px;
height: 1150px;
position: absolute;
bottom: 0;
left: -710px;
opacity: 0;
transition: all 1.5s;
}
.case-study-avant .hero .bottom .phone-image {
width: 600px;
min-width: 600px;
position: relative;
margin-left: -120px;
transform: translateY(150px);
opacity: 0;
transition: all 1s;
}
.case-study-avant .hero .bottom .phone-image img {
width: 100%;
}
.case-study-avant .hero .bottom .description {
padding: 0 30px 0 70px;
transform: translateY(150px);
opacity: 0;
transition: all 1.5s;
}
.case-study-avant .hero .bottom .description p {
margin-bottom: 20px;
font-weight: 200;
line-height: 1.6;
font-size: 17px;
}
.case-study-avant .hero .bottom .number-list {
position: relative;
z-index: 10;
display: flex;
margin: 40px 0 0 70px;
flex-wrap: wrap;
width: 480px;
}
.case-study-avant .hero .bottom .number-list li {
background: var(--white);
padding: 30px 25px;
width: 220px;
margin-right: 20px;
margin-bottom: 20px;
}
.case-study-avant .hero .bottom .number-list li .value {
font-size: 60px;
font-weight: 500;
margin-bottom: 20px;
background: linear-gradient(282.92deg, #0D5BFF 7.66%, #A5CEFF 86.47%);
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.case-study-avant .hero .bottom .number-list li .info {
font-size: 13px;
line-height: 1.5;
font-weight: 300;
color: #010309;
} .case-study-avant .hero.active .bg-triangle {
opacity: 1;
transform: translateY(0);
}
.case-study-avant .hero.active .top {
transform: translateY(0);
opacity: 1;
}
.case-study-avant .hero.active .phone-image {
transform: translateY(0);
opacity: 1;
}
.case-study-avant .hero.active .description {
transform: translateY(0);
opacity: 1;
}
.case-study-avant .hero.active .bottom .bg-pattern {
opacity: 1;
} .case-study-avant .blue-gradient-ball {
width: 1000px;
height: 1000px;
background: radial-gradient(38.52% 38.52% at 40.69% 52.83%, #002470 0%, rgba(4, 18, 48, 0) 100%);
opacity: .4;
position: absolute;
}
.case-study-avant .machine-learning {
background: #050046;
margin-top: 0;
color: var(--white);
padding: 130px 0 150px;
overflow: hidden;
z-index: 100;
}
.case-study-avant .machine-learning .head {
text-align: center;
margin-bottom: 10px;
position: relative;
}
.case-study-avant .machine-learning .head .blue-gradient-ball.top {
top: -540px;
right: -470px;
}
.case-study-avant .machine-learning .head .blue-gradient-ball.center {
top: -180px;
left: -210px;
}
.case-study-avant .machine-learning .head .blue-gradient-ball.bottom {
right: -500px;
top: 370px;
}
.case-study-avant .machine-learning .head h3 {
font-weight: 600;
max-width: 600px;
margin: 0 auto;
font-size: 42px;
position: relative;
z-index: 10;
}
.case-study-avant .machine-learning .head h3 span {
color: #3979FF;
}
.case-study-avant .machine-learning .head p {
max-width: 600px;
margin: 0 auto;
font-size: 16px;
font-weight: 300;
padding: 40px 0;
line-height: 1.6;
position: relative;
z-index: 10;
}
.case-study-avant .machine-learning .head p span {
display: block;
}
.case-study-avant .machine-learning .woman-image {
overflow: hidden;
width: 1300px;
margin: 0 auto 200px;
line-height: 0;
position: relative;
z-index: 10;
}
.case-study-avant .machine-learning .woman-image img {
width: 100%;
}
.case-study-avant .machine-learning .process-description {
display: flex;
justify-content: space-between;
position: relative;
}
.case-study-avant .machine-learning .process-description .left,
.case-study-avant .machine-learning .process-description .right {
width: 500px;
}
.case-study-avant .machine-learning .process-description .small-title {
text-transform: uppercase;
font-size: 14px;
margin-bottom: 30px;
font-weight: 500;
}
.case-study-avant .machine-learning .process-description h4 {
font-size: 32px;
margin-bottom: 30px;
font-weight: 500;
}
.case-study-avant .machine-learning .process-description h4 span {
display: block;
}
.case-study-avant .machine-learning .process-description .description {
font-weight: 200;
line-height: 1.6;
font-size: 17px;
color: #CACACA;
}
.case-study-avant .machine-learning .process-description .blue-gradient-ball.top {
top: -670px;
right: -570px;
}
.case-study-avant .machine-learning .process-description .blue-gradient-ball.center {
top: -270px;
left: 170px;
}
.case-study-avant .machine-learning .graph-image {
margin-top: 100px;
position: relative;
}
.case-study-avant .machine-learning .graph-image img {
position: relative;
z-index: 10;
width: 100%;
}
.case-study-avant .machine-learning .graph-image .blue-gradient-ball.bottom {
right: -560px;
bottom: -430px;
} .case-study-avant .transforming {
background: var(--white);
margin-top: -40px;
padding: 100px 0;
z-index: 1000;
}
.case-study-avant .transforming .head {
text-align: center;
margin-bottom: 10px;
position: relative;
}
.case-study-avant .transforming .head .sub-title {
text-transform: uppercase;
font-size: 14px;
padding: 0;
margin-bottom: 30px;
font-weight: 500;
}
.case-study-avant .transforming .head h3 {
font-weight: 600;
margin: 0 auto;
font-size: 42px;
position: relative;
z-index: 10;
}
.case-study-avant .transforming .head h3 span {
display: block;
}
.case-study-avant .transforming .head p {
max-width: 600px;
margin: 0 auto;
font-size: 16px;
font-weight: 300;
padding: 40px 0;
line-height: 1.6;
position: relative;
z-index: 10;
}
.case-study-avant .transforming .head p span {
display: block;
}
.case-study-avant .transforming .head .card-left {
position: absolute;
width: 660px;
right: -510px;
top: 60px;
}
.case-study-avant .transforming .head .card-right {
position: absolute;
width: 900px;
left: -660px;
top: -90px;
}
.case-study-avant .transforming .head .card-left img,
.case-study-avant .transforming .head .card-right img {
width: 100%;
}
.case-study-avant .transforming .woman-with-tablet-image {
overflow: hidden;
line-height: 0;
max-width: 940px;
margin: 100px auto 0;
}
.case-study-avant .transforming .woman-with-tablet-image img {
width: 100%;
}
.case-study-avant .transforming .big-text {
text-align: center;
font-size: 44px;
margin-top: 100px;
font-weight: 500;
letter-spacing: -1px;
}
.case-study-avant .transforming .big-text span {
display: block;
font-weight: 500;
}
.case-study-avant .transforming .big-text strong {
font-weight: 500;
color: #3979FF;
}
.case-study-avant .transforming .solution-blocks {
display: flex;
justify-content: space-between;
margin-top: 200px;
}
.case-study-avant .transforming .solution-blocks .left {
width: 500px;
}
.case-study-avant .transforming .solution-blocks .left .sub-title {
text-transform: uppercase;
font-size: 14px;
margin-bottom: 20px;
}
.case-study-avant .transforming .solution-blocks .left h3 {
font-weight: 600;
font-size: 32px;
letter-spacing: -1px;
margin-bottom: 60px;
}
.case-study-avant .transforming .solution-blocks .left h3 span {
display: block;
}
.case-study-avant .transforming .solution-blocks .right {
width: 450px;
padding-top: 45px;
}
.case-study-avant .transforming .solution-blocks .right p {
color: #858C97;
margin-bottom: 20px;
font-weight: 300;
font-size: 17px;
line-height: 1.5;
}
.case-study-avant .transforming .graph2-image {
margin: 120px auto 40px;
text-align: center;
}
.case-study-avant .transforming .graph2-image img {
width: 100%;
max-width: 850px;
}
.case-study-avant .transforming .impact {
display: flex;
justify-content: space-between;
margin: 170px 0 100px;
}
.case-study-avant .transforming .impact .left {
width: 550px;
}
.case-study-avant .transforming .impact .left .sub-title {
text-transform: uppercase;
font-size: 14px;
margin-bottom: 20px;
color: #000;
}
.case-study-avant .transforming .impact .left h3 {
font-weight: 600;
font-size: 32px;
letter-spacing: -1px;
margin-bottom: 40px;
}
.case-study-avant .transforming .impact .left h3 span {
display: block;
}
.case-study-avant .transforming .impact .left .description {
color: #858C97;
margin-bottom: 20px;
font-weight: 300;
font-size: 17px;
line-height: 1.5;
max-width: 450px;
}
.case-study-avant .transforming .impact .description-image {
width: 400px;
height: 440px;
line-height: 0;
overflow: hidden;
margin: 20px 50px 0 0;
}
.case-study-avant .transforming .impact .description-image img {
width: 100%;
height: 100%;
object-fit: cover;
} .case-study-avant .intelligent {
background: #2859f6;
padding: 100px 0 150px;
color: var(--white);
position: relative;
}
.case-study-avant .intelligent .content {
position: relative;
}
.case-study-avant .intelligent .head {
text-align: center;
margin-bottom: 10px;
position: relative;
}
.case-study-avant .intelligent .head .sub-title {
text-transform: uppercase;
font-size: 14px;
padding: 0;
margin-bottom: 30px;
font-weight: 500;
}
.case-study-avant .intelligent .head h3 {
font-weight: 400;
margin: 0 auto;
font-size: 48px;
position: relative;
z-index: 10;
}
.case-study-avant .intelligent .head h3 span {
display: block;
}
.case-study-avant .intelligent .head p {
max-width: 600px;
margin: 0 auto;
font-size: 16px;
font-weight: 300;
padding: 40px 0;
line-height: 1.6;
position: relative;
z-index: 10;
}
.case-study-avant .intelligent .head p span {
display: block;
}
.case-study-avant .intelligent .head .circle-one {
width: 180px;
height: 180px;
display: block;
position: absolute;
top: -60px;
right: 0;
}
.case-study-avant .intelligent .head .circle-two {
width: 200px;
height: 200px;
display: block;
position: absolute;
top: 50px;
left: 0;
}
.case-study-avant .intelligent .explain-picture {
overflow: hidden;
line-height: 0;
margin: 40px 0 100px;
}
.case-study-avant .intelligent .explain-picture img {
width: 100%;
}
.case-study-avant .intelligent .solution {
position: relative;
}
.case-study-avant .intelligent .solution .card {
width: 850px;
position: absolute;
top: -60px;
right: -460px;
}
.case-study-avant .intelligent .solution .card img {
width: 100%;
}
.case-study-avant .intelligent .solution .sub-title {
font-size: 14px;
text-transform: uppercase;
display: block;
margin-bottom: 20px;
}
.case-study-avant .intelligent .solution .title {
font-size: 36px;
margin-bottom: 50px;
letter-spacing: -1px;
}
.case-study-avant .intelligent .solution .title span {
display: block;
}
.case-study-avant .intelligent .solution ul {
max-width: 730px;
display: flex;
justify-content: space-between;
}
.case-study-avant .intelligent .solution ul li {
font-size: 17px;
font-weight: 300;
line-height: 1.8;
max-width: 350px;
position: relative;
padding-bottom: 30px;
}
.case-study-avant .intelligent .solution ul li+li {
border-left: 1px solid #517AFF;
padding-left: 40px;
max-width: 380px;
}
.case-study-avant .intelligent .impact {
display: flex;
justify-content: space-between;
margin-top: 200px;
position: relative;
}
.case-study-avant .intelligent .impact .image-description {
width: 450px;
height: 460px;
min-width: 450px;
overflow: hidden;
}
.case-study-avant .intelligent .impact .image-description img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.case-study-avant .intelligent .impact .text {
max-width: 480px;
position: relative;
left: -100px;
}
.case-study-avant .intelligent .impact .text .sub-title {
font-size: 14px;
text-transform: uppercase;
margin-bottom: 30px;
}
.case-study-avant .intelligent .impact .text .title {
font-size: 36px;
letter-spacing: -1px;
margin-bottom: 30px;
}
.case-study-avant .intelligent .impact .text .title span {
display: block;
}
.case-study-avant .intelligent .impact .text .description {
font-weight: 300;
line-height: 1.7;
font-size: 17px;
}
.case-study-avant .intelligent .bg-pattern {
width: 1749px;
height: 1150px;
position: absolute;
bottom: -550px;
left: -1090px;
}
@media screen and (max-width: 1400px) { .case-study-avant .machine-learning .woman-image {
position: relative;
padding-top: 50%;
width: calc(100% - 40px);
margin-left: 20px;
max-width: 1300px;
}
.case-study-avant .machine-learning .woman-image img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
top: 0;
left: 0;
}
}
@media screen and (max-width: 1280px) { .case-study-avant .hero .top {
padding: 0 20px;
}
.case-study-avant .hero .top figure {
width: 200px;
}
.case-study-avant .hero .top .logo-mark .logo-text {
font-size: 40px;
letter-spacing: 6px;
}
.case-study-avant .hero .top .logo-mark .logo-subtitle {
font-size: 20px;
letter-spacing: 10px;
}
.case-study-avant .hero .top h1 {
font-size: 33px;
line-height: 1.3;
max-width: 700px;
}
.case-study-avant .hero .top .button {
padding: 14px 28px;
font-size: 15px;
}
.case-study-avant .hero .bottom {
margin-top: 20px;
}
.case-study-avant .hero .bottom .phone-image {
width: 550px;
min-width: 550px;
margin-left: -100px;
}
.case-study-avant .hero .bottom .description p {
font-size: 16px;
} .case-study-avant .machine-learning {
padding: 90px 0 100px;
}
.case-study-avant .machine-learning .head h3 {
font-size: 38px;
}
.case-study-avant .machine-learning .woman-image {
margin-bottom: 90px;
}
.case-study-avant .machine-learning .process-description .left,
.case-study-avant .machine-learning .process-description .right {
width: 48%;
}
.case-study-avant .machine-learning .process-description .description {
font-size: 16px;
} .case-study-avant .transforming {
padding: 100px 0 0;
}
.case-study-avant .transforming .head h3 {
font-size: 36px;
}
.case-study-avant .transforming .big-text {
font-size: 36px;
}
.case-study-avant .transforming .solution-blocks .left h3 {
font-size: 28px;
}
.case-study-avant .transforming .solution-blocks .right p {
font-size: 16px;
}
.case-study-avant .transforming .impact .left h3 {
font-size: 28px;
}
.case-study-avant .transforming .impact .left .description {
font-size: 16px;
} .case-study-avant .intelligent .head h3 {
font-size: 38px;
}
.case-study-avant .intelligent .impact .text {
left: 0;
}
}
@media screen and (max-width: 1024px) { .case-study-avant .hero {
padding-bottom: 80px;
}
.case-study-avant .hero .content {
display: flex;
flex-direction: column;
padding: 120px 0 0;
}
.case-study-avant .hero .bg-triangle {
position: relative;
top: auto;
right: auto;
width: 100%;
height: 450px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-top: 50px;
order: 2;
transform: none;
scale: 1;
opacity: 1;
}
.case-study-avant .hero.active .bg-triangle {
transform: none;
}
.case-study-avant .hero .top {
order: 1;
}
.case-study-avant .hero .bottom .bg-pattern {
scale: .7;
bottom: -380px;
}
.case-study-avant .hero.active .bottom .bg-pattern {
opacity: .5;
}
.case-study-avant .hero .top .logo-mark {
margin-bottom: 30px;
}
.case-study-avant .hero .top .logo-mark .logo-text {
font-size: 36px;
letter-spacing: 5px;
}
.case-study-avant .hero .top .logo-mark .logo-subtitle {
font-size: 18px;
letter-spacing: 8px;
}
.case-study-avant .hero .top h1 {
font-size: 28px;
max-width: 100%;
margin-bottom: 30px;
}
.case-study-avant .hero .top h1 span {
display: inline;
}
.case-study-avant .hero .top .button {
padding: 12px 24px;
font-size: 14px;
}
.case-study-avant .hero .top figure {
width: 150px;
}
.case-study-avant .hero .bottom .phone-image {
display: none;
}
.case-study-avant .hero .bottom .description {
padding: 20px 20px 0;
}
.case-study-avant .hero .bottom .description p {
font-size: 15px;
}
.case-study-avant .hero .bottom .number-list {
margin: 0;
width: 100%;
padding: 0 20px;
margin-top: 50px;
}
.case-study-avant .hero .bottom .number-list li {
padding: 20px;
width: 45%;
}
.case-study-avant .hero .bottom .number-list li .value {
font-size: 48px;
} .case-study-avant .machine-learning {
padding: 90px 0 60px;
margin-top: 0;
}
.case-study-avant .machine-learning .head h3 {
font-size: 32px;
}
.case-study-avant .machine-learning .head p {
font-size: 15px;
}
.case-study-avant .machine-learning .head p span {
display: inline;
}
.case-study-avant .machine-learning .woman-image {
margin-bottom: 60px;
}
.case-study-avant .machine-learning .process-description {
flex-direction: column;
}
.case-study-avant .machine-learning .process-description h4 {
font-size: 28px;
}
.case-study-avant .machine-learning .process-description h4 span {
display: inline;
}
.case-study-avant .machine-learning .process-description .description {
font-size: 15px;
}
.case-study-avant .machine-learning .process-description .small-title {
margin-bottom: 10px;
}
.case-study-avant .machine-learning .process-description .left,
.case-study-avant .machine-learning .process-description .right {
width: 100%;
margin-bottom: 50px;
}
.case-study-avant .machine-learning .graph-image {
display: none;
} .case-study-avant .transforming {
padding: 60px 0 0;
}
.case-study-avant .transforming .content .content {
padding: 0;
}
.case-study-avant .transforming .head h3 {
font-size: 28px;
}
.case-study-avant .transforming .head h3 span {
display: inline;
}
.case-study-avant .transforming .head p span {
display: inline;
}
.case-study-avant .transforming .big-text {
font-size: 28px;
margin-top: 60px;
}
.case-study-avant .transforming .big-text span {
display: inline;
}
.case-study-avant .transforming .solution-blocks {
flex-direction: column;
margin-top: 80px;
}
.case-study-avant .transforming .solution-blocks .left h3 {
font-size: 26px;
margin-bottom: 30px;
}
.case-study-avant .transforming .solution-blocks .left h3 span {
display: inline;
}
.case-study-avant .transforming .solution-blocks .right p {
font-size: 15px;
}
.case-study-avant .transforming .solution-blocks .left,
.case-study-avant .transforming .solution-blocks .right {
width: 100%;
margin-bottom: 30px;
}
.case-study-avant .transforming .solution-blocks .right {
padding-top: 10px;
margin-bottom: 0;
}
.case-study-avant .transforming .graph2-image {
margin: 0 auto;
}
.case-study-avant .transforming .impact {
flex-direction: column;
margin: 40px 0 70px;
}
.case-study-avant .transforming .impact .left {
width: 100%;
}
.case-study-avant .transforming .impact .left .description {
max-width: 100%;
}
.case-study-avant .transforming .impact .description-image {
display: none;
}
.case-study-avant .transforming .woman-with-tablet-image {
margin: 60px auto 0;
} .case-study-avant .intelligent {
padding: 80px 0;
}
.case-study-avant .intelligent .head h3 {
font-size: 28px;
}
.case-study-avant .intelligent .head h3 span {
display: inline;
}
.case-study-avant .intelligent .head p {
max-width: 100%;
font-size: 15px;
}
.case-study-avant .intelligent .head .circle-one {
display: none;
}
.case-study-avant .intelligent .head .circle-two {
display: none;
}
.case-study-avant .intelligent .solution .title {
font-size: 28px;
}
.case-study-avant .intelligent .solution .title span {
display: inline;
}
.case-study-avant .intelligent .solution ul {
flex-direction: column;
}
.case-study-avant .intelligent .solution ul li {
max-width: 100%;
font-size: 15px;
line-height: 1.6;
}
.case-study-avant .intelligent .solution ul li+li {
border: none;
max-width: 100%;
padding-left: 0;
}
.case-study-avant .intelligent .solution .card {
display: none;
}
.case-study-avant .intelligent .impact {
flex-direction: column;
margin-top: 50px;
}
.case-study-avant .intelligent .impact .image-description {
width: 100%;
max-width: 100%;
min-width: 100%;
position: relative;
padding-top: 70%;
margin-bottom: 30px;
height: auto;
}
.case-study-avant .intelligent .impact .image-description img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.case-study-avant .intelligent .impact .text {
max-width: 100%;
line-height: 1.6;
}
.case-study-avant .intelligent .impact .text .sub-title {
margin-bottom: 15px;
}
.case-study-avant .intelligent .impact .text .title {
font-size: 28px;
margin-bottom: 30px;
}
.case-study-avant .intelligent .impact .text .title span {
display: inline;
}
.case-study-avant .intelligent .impact .text .description {
font-size: 15px;
line-height: 1.6;
}
.case-study-avant .intelligent .explain-picture {
margin: 20px 0 60px;
}
.case-study-avant .intelligent .bg-pattern {
scale: .8;
opacity: .4;
}
} .case-study-avant .timeline {
padding: 100px 0 80px;
background: #f5f5f5;
}
.case-study-avant .timeline .content {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
}
.case-study-avant .timeline .sub-title {
display: block;
text-align: center;
font-size: 12px;
font-weight: 600;
letter-spacing: 2px;
color: #2859f6;
margin-bottom: 15px;
}
.case-study-avant .timeline .title {
font-size: 42px;
font-weight: 600;
text-align: center;
margin-bottom: 20px;
color: #050046;
}
.case-study-avant .timeline .content>p {
text-align: center;
font-size: 16px;
color: #666;
max-width: 600px;
margin: 0 auto 70px;
line-height: 1.6;
}
.case-study-avant .timeline-carousel {
position: relative;
}
.case-study-avant .timeline-list {
display: flex;
padding-top: 50px;
height: 550px;
}
.case-study-avant .timeline-list li {
width: 400px;
height: 500px;
padding: 0 10px;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
top: 0;
}
.case-study-avant .timeline-list li .timeline-content {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
background: #EEE;
}
.case-study-avant .timeline-list li .timeline-content figure {
width: 100%;
height: 100%;
line-height: 0;
background: #EEE;
}
.case-study-avant .timeline-list li .timeline-content figure img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.case-study-avant .timeline-list li:hover .timeline-content figure img,
.case-study-avant .timeline-list li.swiper-slide-active .timeline-content figure img {
transform: scale(1.05);
} .case-study-avant .timeline-list li.team-member-marcella .timeline-content figure img {
object-position: center 20%;
}
.case-study-avant .timeline-list li.team-member-rafaela .timeline-content figure img {
object-position: center 20%;
}
.case-study-avant .timeline-list li.team-member-fabio .timeline-content figure img {
object-position: center 20%;
}
.case-study-avant .timeline-list li .timeline-content .text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 30px 25px;
color: var(--white);
opacity: 0;
transition: all 0.3s ease;
z-index: 10;
}
.case-study-avant .timeline-list li:hover .timeline-content .text,
.case-study-avant .timeline-list li.swiper-slide-active .timeline-content .text {
opacity: 1;
}
.case-study-avant .timeline-list li .timeline-content .text .year {
margin-bottom: 10px;
font-size: 22px;
font-weight: 600;
color: var(--white);
}
.case-study-avant .timeline-list li .timeline-content .text .description {
line-height: 1.6;
padding-right: 30px;
font-size: 12px;
color: rgba(255, 255, 255, 0.9);
} .case-study-avant .timeline-list li .timeline-content:before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 350px;
bottom: 0;
left: 0;
background: linear-gradient(transparent, #282FE4);
z-index: 5;
transition: all 0.5s ease;
transform: translateY(350px);
opacity: 0;
}
.case-study-avant .timeline-list li:hover .timeline-content:before,
.case-study-avant .timeline-list li.swiper-slide-active .timeline-content:before {
transform: translateY(0);
opacity: 1;
} .case-study-avant .timeline-list li.swiper-slide-active {
height: 550px;
top: -25px;
}
.case-study-avant .timeline-list li:hover {
top: -10px;
} .case-study-avant .timeline .carrousel-arrows {
display: flex;
margin-top: 70px;
align-items: center;
justify-content: center;
gap: 20px;
}
.case-study-avant .timeline .carrousel-arrow {
width: 50px;
height: 50px;
border: 2px solid #050046;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
background: transparent;
}
.case-study-avant .timeline .carrousel-arrow:hover {
background: #050046;
transform: scale(1.1);
}
.case-study-avant .timeline .carrousel-arrow:before {
content: "";
position: absolute;
width: 12px;
height: 12px;
border-top: 2px solid #050046;
border-right: 2px solid #050046;
top: 50%;
left: 50%;
transition: all 0.3s ease;
}
.case-study-avant .timeline .carrousel-prev:before {
transform: translate(-40%, -50%) rotate(-135deg);
}
.case-study-avant .timeline .carrousel-next:before {
transform: translate(-60%, -50%) rotate(45deg);
}
.case-study-avant .timeline .carrousel-arrow:hover:before {
border-color: var(--white);
}
@media screen and (max-width: 1400px) { .case-study-avant .machine-learning .woman-image {
position: relative;
padding-top: 50%;
width: calc(100% - 40px);
margin-left: 20px;
max-width: 1300px;
}
.case-study-avant .machine-learning .woman-image img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
top: 0;
left: 0;
}
}
@media screen and (max-width: 1280px) { .case-study-avant .hero .top {
padding: 0 20px;
}
.case-study-avant .hero .top figure {
width: 200px;
}
.case-study-avant .hero .top .logo-mark .logo-text {
font-size: 40px;
letter-spacing: 6px;
}
.case-study-avant .hero .top .logo-mark .logo-subtitle {
font-size: 20px;
letter-spacing: 10px;
}
.case-study-avant .hero .top h1 {
font-size: 33px;
line-height: 1.3;
max-width: 700px;
}
.case-study-avant .hero .top .button {
padding: 14px 28px;
font-size: 15px;
}
.case-study-avant .hero .bottom {
margin-top: 20px;
}
.case-study-avant .hero .bottom .phone-image {
width: 550px;
min-width: 550px;
margin-left: -100px;
}
.case-study-avant .hero .bottom .description p {
font-size: 16px;
} .case-study-avant .timeline {
padding: 80px 0 60px;
}
.case-study-avant .timeline .title {
font-size: 36px;
margin-bottom: 15px;
}
.case-study-avant .timeline .content>p {
margin-bottom: 50px;
} .case-study-avant .machine-learning {
padding: 90px 0 100px;
}
.case-study-avant .machine-learning .head h3 {
font-size: 38px;
}
.case-study-avant .machine-learning .woman-image {
margin-bottom: 90px;
}
.case-study-avant .machine-learning .process-description .left,
.case-study-avant .machine-learning .process-description .right {
width: 48%;
}
.case-study-avant .machine-learning .process-description .description {
font-size: 16px;
} .case-study-avant .transforming {
padding: 100px 0 0;
}
.case-study-avant .transforming .head h3 {
font-size: 36px;
}
.case-study-avant .transforming .big-text {
font-size: 36px;
}
.case-study-avant .transforming .solution-blocks .left h3 {
font-size: 28px;
}
.case-study-avant .transforming .solution-blocks .right p {
font-size: 16px;
}
.case-study-avant .transforming .impact .left h3 {
font-size: 28px;
}
.case-study-avant .transforming .impact .left .description {
font-size: 16px;
} .case-study-avant .intelligent .head h3 {
font-size: 38px;
}
.case-study-avant .intelligent .impact .text {
left: 0;
}
}
@media screen and (max-width: 1024px) { .case-study-avant .hero {
padding-bottom: 80px;
}
.case-study-avant .hero .content {
display: flex;
flex-direction: column;
padding: 120px 0 0;
}
.case-study-avant .hero .bg-triangle {
position: relative;
top: auto;
right: auto;
width: 100%;
height: 450px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-top: 50px;
order: 2;
transform: none;
scale: 1;
opacity: 1;
}
.case-study-avant .hero.active .bg-triangle {
transform: none;
}
.case-study-avant .hero .top {
order: 1;
}
.case-study-avant .hero .bottom .bg-pattern {
scale: .7;
bottom: -380px;
}
.case-study-avant .hero.active .bottom .bg-pattern {
opacity: .5;
}
.case-study-avant .hero .top .logo-mark {
margin-bottom: 30px;
}
.case-study-avant .hero .top .logo-mark .logo-text {
font-size: 36px;
letter-spacing: 5px;
}
.case-study-avant .hero .top .logo-mark .logo-subtitle {
font-size: 18px;
letter-spacing: 8px;
}
.case-study-avant .hero .top h1 {
font-size: 28px;
max-width: 100%;
margin-bottom: 30px;
}
.case-study-avant .hero .top h1 span {
display: inline;
}
.case-study-avant .hero .top .button {
padding: 12px 24px;
font-size: 14px;
}
.case-study-avant .hero .top figure {
width: 150px;
}
.case-study-avant .hero .bottom .phone-image {
display: none;
}
.case-study-avant .hero .bottom .description {
padding: 20px 20px 0;
}
.case-study-avant .hero .bottom .description p {
font-size: 15px;
}
.case-study-avant .hero .bottom .number-list {
margin: 0;
width: 100%;
padding: 0 20px;
margin-top: 50px;
}
.case-study-avant .hero .bottom .number-list li {
padding: 20px;
width: 45%;
}
.case-study-avant .hero .bottom .number-list li .value {
font-size: 48px;
} .case-study-avant .timeline {
padding: 60px 0 50px;
}
.case-study-avant .timeline .content {
padding: 0 30px;
}
.case-study-avant .timeline .title {
font-size: 28px;
margin-bottom: 40px;
}
.case-study-avant .timeline-list {
height: 480px;
}
.case-study-avant .timeline-list li {
height: 450px;
width: 85%;
}
.case-study-avant .timeline-list li.swiper-slide-active {
height: 500px;
}
.case-study-avant .timeline .carrousel-arrows {
margin-top: 40px;
} .case-study-avant .machine-learning {
padding: 90px 0 60px;
margin-top: 0;
}
.case-study-avant .machine-learning .head h3 {
font-size: 32px;
}
.case-study-avant .machine-learning .head p {
font-size: 15px;
}
.case-study-avant .machine-learning .head p span {
display: inline;
}
.case-study-avant .machine-learning .woman-image {
margin-bottom: 60px;
}
.case-study-avant .machine-learning .process-description {
flex-direction: column;
}
.case-study-avant .machine-learning .process-description h4 {
font-size: 28px;
}
.case-study-avant .machine-learning .process-description h4 span {
display: inline;
}
.case-study-avant .machine-learning .process-description .description {
font-size: 15px;
}
.case-study-avant .machine-learning .process-description .small-title {
margin-bottom: 10px;
}
.case-study-avant .machine-learning .process-description .left,
.case-study-avant .machine-learning .process-description .right {
width: 100%;
margin-bottom: 50px;
}
.case-study-avant .machine-learning .graph-image {
display: none;
} .case-study-avant .transforming {
padding: 60px 0 0;
}
.case-study-avant .transforming .content .content {
padding: 0;
}
.case-study-avant .transforming .head h3 {
font-size: 28px;
}
.case-study-avant .transforming .head h3 span {
display: inline;
}
.case-study-avant .transforming .head p span {
display: inline;
}
.case-study-avant .transforming .big-text {
font-size: 28px;
margin-top: 60px;
}
.case-study-avant .transforming .big-text span {
display: inline;
}
.case-study-avant .transforming .solution-blocks {
flex-direction: column;
margin-top: 80px;
}
.case-study-avant .transforming .solution-blocks .left h3 {
font-size: 26px;
margin-bottom: 30px;
}
.case-study-avant .transforming .solution-blocks .left h3 span {
display: inline;
}
.case-study-avant .transforming .solution-blocks .right p {
font-size: 15px;
}
.case-study-avant .transforming .solution-blocks .left,
.case-study-avant .transforming .solution-blocks .right {
width: 100%;
margin-bottom: 30px;
}
.case-study-avant .transforming .solution-blocks .right {
padding-top: 10px;
margin-bottom: 0;
}
.case-study-avant .transforming .graph2-image {
margin: 0 auto;
}
.case-study-avant .transforming .impact {
flex-direction: column;
margin: 40px 0 70px;
}
.case-study-avant .transforming .impact .left {
width: 100%;
}
.case-study-avant .transforming .impact .left .description {
max-width: 100%;
}
.case-study-avant .transforming .impact .description-image {
display: none;
}
.case-study-avant .transforming .woman-with-tablet-image {
margin: 60px auto 0;
} .case-study-avant .intelligent {
padding: 80px 0;
}
.case-study-avant .intelligent .head h3 {
font-size: 28px;
}
.case-study-avant .intelligent .head h3 span {
display: inline;
}
.case-study-avant .intelligent .head p {
max-width: 100%;
font-size: 15px;
}
.case-study-avant .intelligent .head .circle-one {
display: none;
}
.case-study-avant .intelligent .head .circle-two {
display: none;
}
.case-study-avant .intelligent .solution .title {
font-size: 28px;
}
.case-study-avant .intelligent .solution .title span {
display: inline;
}
.case-study-avant .intelligent .solution ul {
flex-direction: column;
}
.case-study-avant .intelligent .solution ul li {
max-width: 100%;
font-size: 15px;
line-height: 1.6;
}
.case-study-avant .intelligent .solution ul li+li {
border: none;
max-width: 100%;
padding-left: 0;
}
.case-study-avant .intelligent .solution .card {
display: none;
}
.case-study-avant .intelligent .impact {
flex-direction: column;
margin-top: 50px;
}
.case-study-avant .intelligent .impact .image-description {
width: 100%;
max-width: 100%;
min-width: 100%;
position: relative;
padding-top: 70%;
margin-bottom: 30px;
height: auto;
}
.case-study-avant .intelligent .impact .image-description img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.case-study-avant .intelligent .impact .text {
max-width: 100%;
line-height: 1.6;
}
.case-study-avant .intelligent .impact .text .sub-title {
margin-bottom: 15px;
}
.case-study-avant .intelligent .impact .text .title {
font-size: 28px;
margin-bottom: 30px;
}
.case-study-avant .intelligent .impact .text .title span {
display: inline;
}
.case-study-avant .intelligent .impact .text .description {
font-size: 15px;
line-height: 1.6;
}
.case-study-avant .intelligent .explain-picture {
margin: 20px 0 60px;
}
.case-study-avant .intelligent .bg-pattern {
scale: .8;
opacity: .4;
}
}
@media screen and (max-width: 767px) { .case-study-avant .hero {
padding-bottom: 60px;
}
.case-study-avant .hero .content {
display: flex;
flex-direction: column;
padding: 100px 0 0;
}
.case-study-avant .hero .bg-triangle {
position: relative;
top: auto;
right: auto;
width: 100%;
height: 400px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-top: 40px;
order: 2;
transform: none;
scale: 1;
opacity: 1;
}
.case-study-avant .hero.active .bg-triangle {
transform: none;
}
.case-study-avant .hero .top {
order: 1;
} .case-study-avant .timeline {
padding: 50px 0 40px;
}
.case-study-avant .timeline .content {
padding: 0 20px;
}
.case-study-avant .timeline .title {
font-size: 24px;
margin-bottom: 30px;
}
.case-study-avant .timeline-list {
height: 580px;
padding-top: 30px;
}
.case-study-avant .timeline-list li {
height: 550px;
width: 90%;
}
.case-study-avant .timeline-list li.swiper-slide-active {
height: 590px;
top: -15px;
} .case-study-avant .timeline-list li .timeline-content figure img {
object-position: top center;
}   .case-study-avant .timeline-list li.team-member-alex .timeline-content figure img {
transform: scale(1.14);
object-position: center 15%;
}
.case-study-avant .timeline-list li.team-member-marcella .timeline-content figure img {
transform: scale(1.05);
object-position: center 15%;
}
.case-study-avant .timeline-list li.team-member-rafaela .timeline-content figure img {
transform: scale(1.05);
object-position: center 10%;
}
.case-study-avant .timeline-list li.team-member-fabio .timeline-content figure img {
transform: scale(1.18) !important;
transform-origin: center 25%;
object-position: center 25%;
}
.case-study-avant .timeline-list li .timeline-content .text {
padding: 20px;
}
.case-study-avant .timeline-list li .timeline-content .text .year {
font-size: 18px;
margin-bottom: 8px;
}
.case-study-avant .timeline-list li .timeline-content .text .description {
font-size: 12px;
padding-right: 10px;
}
.case-study-avant .timeline .carrousel-arrows {
margin-top: 30px;
}
.case-study-avant .timeline .carrousel-arrow {
width: 44px;
height: 44px;
}
}
@media screen and (max-width: 540px) { .case-study-avant .hero {
padding-bottom: 50px;
}
.case-study-avant .hero .bg-triangle {
height: 350px;
margin-top: 30px;
}
.case-study-avant .hero .top .logo-mark {
margin-bottom: 24px;
}
.case-study-avant .hero .top .logo-mark .logo-text {
font-size: 28px;
letter-spacing: 4px;
}
.case-study-avant .hero .top .logo-mark .logo-subtitle {
font-size: 14px;
letter-spacing: 6px;
}
.case-study-avant .hero .top h1 {
font-size: 22px;
line-height: 1.4;
margin-bottom: 24px;
}
.case-study-avant .hero .top .button {
padding: 12px 20px;
font-size: 13px;
width: 100%;
text-align: center;
}
.case-study-avant .hero .bottom .number-list li {
width: 100%;
margin-right: 0;
}
.case-study-avant .hero .bottom .number-list li .value {
margin-bottom: 5px;
}
.case-study-avant .transforming .head .card-left {
display: none;
}
.case-study-avant .transforming .head .card-right {
display: none;
} .case-study-avant .timeline .title {
font-size: 20px;
}
.case-study-avant .timeline-list {
height: 520px;
}
.case-study-avant .timeline-list li {
height: 500px;
width: 95%;
}
.case-study-avant .timeline-list li.swiper-slide-active {
height: 530px;
top: -10px;
} .case-study-avant .timeline-list li .timeline-content figure img {
object-position: top center;
} .case-study-avant .timeline-list li.team-member-alex .timeline-content figure img {
transform: scale(1.14);
object-position: center 15%;
}
.case-study-avant .timeline-list li.team-member-marcella .timeline-content figure img {
transform: scale(1.05);
object-position: center 15%;
}
.case-study-avant .timeline-list li.team-member-rafaela .timeline-content figure img {
transform: scale(1.05);
object-position: center 10%;
}
.case-study-avant .timeline-list li.team-member-fabio .timeline-content figure img {
transform: scale(1.18) !important;
transform-origin: center 25%;
object-position: center 25%;
}
}