/* Main Header */
.case-study-avant .main-header .main-menu .menu li.menu-item-contact-us .link-label{ background: var(--white); color: var(--blue) !important; }
.case-study-avant .main-header .main-menu .menu li.menu-item-contact-us .link-label:hover{ color: var(--white) !important; }

.case-study-avant .main-header.fixed .main-menu .menu li.menu-item-contact-us .link-label{ background: var(--blue); color: var(--white) !important; }
.case-study-avant .main-header.fixed .main-menu .menu li.menu-item-contact-us .link-label:hover{ color: var(--white) !important; }

/*Hero*/
.case-study-avant .hero{ background: #2859f6; align-items: flex-start; color: var(--white); height: auto; padding-bottom: 70px; }
.case-study-avant .hero .content{ position: relative; padding: 220px 0 0; }

    /*Backgrounds*/
    .case-study-avant .hero .bg-triangle{ width: 1024px; height: 862px; background: url("../svg/bg-avant-right.svg"); background-size: 1024px 862px; position: absolute; top: -200px; right: -300px; opacity: 0; transform: translateY(-150px); transition: all 2s; }
    
    /*Top*/
    .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 h1{ font-size: 38px; line-height: 1.5; font-weight: 500; letter-spacing: -1px; margin-bottom: 30px; }
    .case-study-avant .hero .top h1 span{ display: block; }
    
    /*Bottom*/
    .case-study-avant .hero .bottom{ display: flex; margin-top: 60px; position: relative; }
    .case-study-avant .hero .bottom .bg-pattern{ width: 1749px; height: 1150px; background: url("../png/pattern.png"); background-size: 1749px 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; border-radius: 20px; 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; }

/*Hero Animations*/
.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; }

/*Machine Learning*/
.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: var(--black); margin-top: -250px; border-radius: 40px 40px 0 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{ border-radius: 20px; 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; }

/*Transforming*/
.case-study-avant .transforming{ background: var(--white); border-radius: 40px 40px 0 0; 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{ border-radius: 20px; 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; border-radius: 20px; overflow: hidden; margin: 20px 50px 0 0; }
.case-study-avant .transforming .impact .description-image img{ width: 100%; height: 100%; object-fit: cover; }

/*Intelligent*/
.case-study-avant .intelligent{ background: #2859f6; border-radius: 40px 40px 0 0; 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; background: url("../svg/graph6.svg"); background-size: 180px 180px; display: block; position: absolute; top: -60px; right: 0; }
.case-study-avant .intelligent .head .circle-two{ width: 200px; height: 200px; background: url("../svg/graph7.svg"); background-size: 200px 200px; display: block; position: absolute; top: 50px; left: 0; }

.case-study-avant .intelligent .explain-picture{ border-radius: 20px; 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: 800px; 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; border-radius: 20px; 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; background: url("../png/pattern.png"); background-size: 1749px 1150px; position: absolute; bottom: -550px; left: -1090px; }

@media screen and (max-width: 1400px){

    /* Machine Learning */
    .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){

    /* Hero */
    .case-study-avant .hero .top{ padding: 0 20px; }
    .case-study-avant .hero .top figure{ width: 200px; }
    .case-study-avant .hero .top h1{ font-size: 33px; line-height: 1.3; }
    .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; }

    /* Machine Learning */
    .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; }

    /* Transforming */
    .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; }

    /* Intelligent */
    .case-study-avant .intelligent .head h3{ font-size: 38px; }
    .case-study-avant .intelligent .impact .text{ left: 0; }


}

@media screen and (max-width: 1024px){

    /* Hero */
    .case-study-avant .hero .bg-triangle{ scale: .5; top: -300px; right: -330px; }
    .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 .content{ padding: 120px 0 0; }
    .case-study-avant .hero .top h1{ font-size: 28px; }
    .case-study-avant .hero .top h1 span{ display: inline; }
    .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; }

    /* Machine Learning */
    .case-study-avant .machine-learning{ padding: 90px 0 60px; margin-top: -40px; }
    .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; }

    /* Transforming */
    .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; }

    /* Intelligent */
    .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: 540px){

    /* Hero */
    .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; }

}