/*Hero*/
.about-us-page .hero{ height: auto; min-height: 400px; align-items: flex-end; margin-bottom: 50px; }
.about-us-page .hero .content{ position: relative; }
.about-us-page .hero .text-wrapper{ margin-bottom: 0; transform: translateY(-150px); opacity: 0; transition: all 2s; }
.about-us-page .hero .text-wrapper .sub-title{ text-transform: uppercase; font-size: 15px; font-weight: 500; }
.about-us-page .hero .text-wrapper .title{ font-size: 32px; max-width: 960px; font-weight: 500; margin: 20px auto 0; }
.about-us-page .hero .circle{ width: 540px; height: 540px; background: url("../svg/circle1.svg"); background-size: 540px 540px; position: absolute; top: -210px; right: 50%; margin-right: -720px; }
.about-us-page .hero .radial{ width: 480px; height: 480px; background: radial-gradient(50% 50% at 50% 50%, rgba(187, 83, 224, 0.2294) 0%, rgba(217, 217, 217, 0) 100%); position: absolute; top: 60px; right: 50%; margin-right: -920px; }

.about-us-page .hero.active .text-wrapper{ transform: translateY(0); opacity: 1; }

/*Video*/
.about-us-page .video { }
.about-us-page .video .content{ position: relative; }
.about-us-page .video .video-container{ width: 100%; max-width: 1120px; height: auto; padding-top: 53.35%; background: radial-gradient(36.78% 36.78% at 49.09% 6.12%, #131B21 0%, #000000 100%); border-radius: 30px; margin: 0 auto; position: relative; z-index: 20; overflow: hidden; transform: translateY(150px); opacity: 0; transition: all 2s; }
.about-us-page .video.active .video-container{ transform: translateY(0); opacity: 1; }
.about-us-page .video .video-container iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.about-us-page .video .circle{ width: 540px; height: 540px; background: url("../svg/circle2.svg"); background-size: 540px 540px; position: absolute; top: 300px; left: -370px; }

/*Timeline*/
.about-us-page .timeline{ padding: 100px 0 80px; }
.about-us-page .timeline .title{ font-weight: 600; text-align: center; z-index: 10; position: relative; margin-bottom: 70px; }
.about-us-page .timeline ul{ display: flex; padding-top: 50px; height: 550px; }
.about-us-page .timeline ul li{ width: 400px; height: 500px; padding: 0 10px; cursor: pointer; position: relative; transition: var(--transition); top: 0; }

.about-us-page .timeline ul li .timeline-content{ display: flex; flex-direction: column; width: 100%; height: 100%; position: relative; border-radius: 25px; overflow: hidden; }
.about-us-page .timeline ul li .timeline-content figure{ width: 100%; height: 100%; line-height: 0; background: #EEE; }
.about-us-page .timeline ul li .timeline-content figure img{ width: 100%; height: 100%; object-fit: cover; }

.about-us-page .timeline ul li .timeline-content .text{ position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px 25px; color: var(--white); opacity: 1; transition: var(--transition); z-index: 10; }
.about-us-page .timeline ul li .timeline-content .text .year{ margin-bottom: 10px; font-size: 22px; font-weight: 600; }
.about-us-page .timeline ul li .timeline-content .text .description{ line-height: 1.6; padding-right: 30px; font-size: 12px; }

.about-us-page .timeline ul li:hover .timeline-content .text,
.about-us-page .timeline ul li.swiper-slide-active .timeline-content .text{ opacity: 1; }

.about-us-page .timeline ul li.swiper-slide-active{ height: 550px; top: -25px; } 

.about-us-page .timeline ul li .timeline-content:before{ content: ""; display: block; position: absolute; width: 100%; height: 350px; bottom: 0; left: 0; background: linear-gradient(2.73deg, #282FE4 15.82%, rgba(11, 13, 61, 0) 91.68%); z-index: 10; transition: all .5s; opacity: 0; transform: translateY(350px); }
.about-us-page .timeline ul li:hover .timeline-content:before,
.about-us-page .timeline ul li.swiper-slide-active .timeline-content:before{ transform: translateY(0); opacity: 1;  }

.about-us-page .timeline .carrousel-arrows{ display: flex; margin-top: 70px; align-items: center; justify-content: center; }
.about-us-page .timeline .carrousel-arrows .carrousel-arrow{ border-color: var(--black); }

/*Different*/
.about-us-page .different{ color: var(--white); padding: 90px 0; border-radius: 40px; background: radial-gradient(65.54% 65.54% at 49.09% 6.12%, #131B21 0%, #000000 100%); }
.about-us-page .different .title-container { display: flex; flex-direction: column; justify-content: center; text-align: center; max-width: 700px; margin: 30px auto 100px; }
.about-us-page .different .title-container .small-title { font-size: 15px; font-weight: 500; line-height: 1.3; text-transform: uppercase; margin-bottom: 30px; }
.about-us-page .different .title-container .big-title { font-size: 30px; line-height: 1.4; }
.about-us-page .different .title-container .big-title span{ display: block; }

.about-us-page .different .differentiators-carousel{ width: 100%; overflow: visible !important; }

.about-us-page .different .differentiators-list{ display: flex; flex-wrap: wrap; max-width: 1200px; margin: 20px auto 0; }
.about-us-page .different .differentiators-list li{ width: 25%; position: relative; height: 370px; cursor: pointer; padding: 10px; }
.about-us-page .different .differentiators-list li .box-wrapper{ position: relative; height: 100%; overflow: hidden; border-radius: 20px; }
.about-us-page .different .differentiators-list li .box-wrapper .box{ padding: 30px; height: 100%; display: flex; flex-direction: column; position: absolute; width: 100%; top: 0; left: 0; transition: var(--transition); border: 1px solid #25282a; border-radius: 20px; background: radial-gradient(102.02% 91.16% at 47.79% 14.62%, #131B21 0%, #010002 100%), radial-gradient(68.48% 64.6% at 45.63% 11.29%, rgba(143, 143, 143, 0.51) 0%, rgba(40, 40, 40, 0.44) 100%); overflow: hidden; }

.about-us-page .different .differentiators-list li .box-wrapper .box .thick-icon{ font-size: 42px; margin-bottom: 25px; position: relative; z-index: 10; }
.about-us-page .different .differentiators-list li .box-wrapper .box .title{ color: var(--white); margin-bottom: 15px; font-size: 20px; position: relative; z-index: 10; }
.about-us-page .different .differentiators-list li .box-wrapper .box .description{ font-size: 16px; color: #AEAEAE; line-height: 1.6; position: relative; z-index: 10; }

    .about-us-page .different .differentiators-list li .box-wrapper .box .thick-icon.icon-partnership-thick{ color: #E180FF; left: -10px; }
    .about-us-page .different .differentiators-list li .box-wrapper .box .thick-icon.icon-modern-approach-thick{ color: #FF5B14; left: -10px; }
    .about-us-page .different .differentiators-list li .box-wrapper .box .thick-icon.icon-scalability-thick{ color: #6CC427; left: -10px; }
    .about-us-page .different .differentiators-list li .box-wrapper .box .thick-icon.icon-top-talent-thick{ color: #FFC639; left: -14px; }
    .about-us-page .different .differentiators-list li .box-wrapper .box .thick-icon.icon-nearshore-thick{ color: #00BBE3; left: -10px; }
    .about-us-page .different .differentiators-list li .box-wrapper .box .thick-icon.icon-industry-expertise-thick{ color: #C050DF; left: -10px; }
    .about-us-page .different .differentiators-list li .box-wrapper .box .thick-icon.icon-innovation-thick{ color: #FAFF00; left: -10px; }
    .about-us-page .different .differentiators-list li .box-wrapper .box .thick-icon.icon-predictable-delivery-thick{ color: #FF4242; left: -10px; }

    .about-us-page .different .differentiators-list li.partnership:hover .box-wrapper .box{ border-color: #882DD0; }
    .about-us-page .different .differentiators-list li.modern-approach:hover .box-wrapper .box{ border-color: #FF5B14; }
    .about-us-page .different .differentiators-list li.scalability:hover .box-wrapper .box{ border-color: #6CC427; }
    .about-us-page .different .differentiators-list li.top-talent:hover .box-wrapper .box{ border-color: #FFC639; }
    .about-us-page .different .differentiators-list li.nearshore:hover .box-wrapper .box{ border-color: #00BBE3; }
    .about-us-page .different .differentiators-list li.industry-expertise:hover .box-wrapper .box{ border-color: #943DD8; }
    .about-us-page .different .differentiators-list li.innovation:hover .box-wrapper .box{ border-color: #FAFF00; }
    .about-us-page .different .differentiators-list li.predictable-delivery:hover .box-wrapper .box{ border-color: #FF5B14; }

    .about-us-page .different .differentiators-list li.partnership .box-wrapper .box:before{ content: ""; display: block; background: radial-gradient(64.15% 64.03% at 100% 97.87%, #C994F4 0%, #AB44FE 21.86%, #140620 100%); position: absolute; width: 100%; height: 100%; bottom: 0; right: 0; z-index: 0; transition: all .5s; opacity: 0; }
    .about-us-page .different .differentiators-list li.partnership:hover .box-wrapper .box:before{ opacity: 1; }
    .about-us-page .different .differentiators-list li.partnership .box-wrapper .box:after{ content: '\e808'; font-family: "qubika"; font-size: 150px; display: block; position: absolute; bottom: -70px; right: -30px; color: #E180FF42; opacity: 0; transition: all .5s; }
    .about-us-page .different .differentiators-list li.partnership:hover .box-wrapper .box:after{ opacity: 1; }

    .about-us-page .different .differentiators-list li.modern-approach .box-wrapper .box:before{ content: ""; display: block; background: radial-gradient(64.15% 64.03% at 100% 97.87%, #F49494 0%, #FE444F 21.86%, #200606 100%) ,linear-gradient(157.16deg, #FF5B14 0.69%, #973737 85.18%); position: absolute; width: 100%; height: 100%; bottom: 0; right: 0; z-index: 0; transition: all .5s; opacity: 0; }
    .about-us-page .different .differentiators-list li.modern-approach:hover .box-wrapper .box:before{ opacity: 1; }
    .about-us-page .different .differentiators-list li.modern-approach .box-wrapper .box:after{ content: '\e800'; font-family: "qubika"; font-size: 125px; display: block; position: absolute; bottom: -40px; right: -30px; color: #FF7664; opacity: 0; transition: all .5s; }
    .about-us-page .different .differentiators-list li.modern-approach:hover .box-wrapper .box:after{ opacity: 1; }

    .about-us-page .different .differentiators-list li.scalability .box-wrapper .box:before{ content: ""; display: block; background: radial-gradient(64.15% 64.03% at 100% 97.87%, #95D650 0%, #2E9913 21.86%, #102006 100%); position: absolute; width: 100%; height: 100%; bottom: 0; right: 0; z-index: 0; transition: all .5s; opacity: 0; }
    .about-us-page .different .differentiators-list li.scalability:hover .box-wrapper .box:before{ opacity: 1; }
    .about-us-page .different .differentiators-list li.scalability .box-wrapper .box:after{ content: '\e829'; font-family: "qubika"; font-size: 130px; display: block; position: absolute; bottom: -40px; right: -72px; color: #6CC427; opacity: 0; transition: all .5s; }
    .about-us-page .different .differentiators-list li.scalability:hover .box-wrapper .box:after{ opacity: 1; }

    .about-us-page .different .differentiators-list li.top-talent .box-wrapper .box:before{ content: ""; display: block; background: radial-gradient(64.15% 64.03% at 100% 97.87%, #D6C150 0%, #F3B51A 21.86%, #1A1703 100%) ,linear-gradient(156.11deg, #FFC639 24.72%, #4D4207 84.65%); position: absolute; width: 100%; height: 100%; bottom: 0; right: 0; z-index: 0; transition: all .5s; opacity: 0; }
    .about-us-page .different .differentiators-list li.top-talent:hover .box-wrapper .box:before{ opacity: 1; }
    .about-us-page .different .differentiators-list li.top-talent .box-wrapper .box:after{ content: '\e82b'; font-family: "qubika"; font-size: 140px; display: block; position: absolute; bottom: -50px; right: -50px; color: #FFC639; opacity: 0; transition: all .5s; }
    .about-us-page .different .differentiators-list li.top-talent:hover .box-wrapper .box:after{ opacity: 1; }

    .about-us-page .different .differentiators-list li.nearshore .box-wrapper .box:before{ content: ""; display: block; position: absolute; width: 100%; height: 100%; bottom: 0; right: 0; z-index: 0; transition: all .5s; opacity: 0; background: radial-gradient(64.15% 64.03% at 100% 97.87%, #8AD9EA 0%, #00BBE3 21.86%, #07272E 90.62%); }
    .about-us-page .different .differentiators-list li.nearshore:hover .box-wrapper .box:before{ opacity: 1; }
    .about-us-page .different .differentiators-list li.nearshore .box-wrapper .box:after{ content: '\e82f'; font-family: "qubika"; font-size: 130px; display: block; position: absolute; bottom: -44px; right: -37px; color: #00BBE3; opacity: 0; transition: all .5s; }
    .about-us-page .different .differentiators-list li.nearshore:hover .box-wrapper .box:after{ opacity: 1; }

    .about-us-page .different .differentiators-list li.industry-expertise .box-wrapper .box:before{ content: ""; display: block; position: absolute; width: 100%; height: 100%; bottom: 0; right: 0; z-index: 0; transition: all .5s; opacity: 0; background: radial-gradient(64.15% 64.03% at 100% 97.87%, #D09BFB 0%, #9932EC 21.86%, #140620 100%); }
    .about-us-page .different .differentiators-list li.industry-expertise:hover .box-wrapper .box:before{ opacity: 1; }
    .about-us-page .different .differentiators-list li.industry-expertise .box-wrapper .box:after{ content: '\e81f'; font-family: "qubika"; font-size: 130px; display: block; position: absolute; bottom: -40px; right: -30px; color: #C050DF; opacity: 0; transition: all .5s; }
    .about-us-page .different .differentiators-list li.industry-expertise:hover .box-wrapper .box:after{ opacity: 1; }

    .about-us-page .different .differentiators-list li.innovation .box-wrapper .box:before{ content: ""; display: block;  position: absolute; width: 100%; height: 100%; bottom: 0; right: 0; z-index: 0; transition: all .5s; opacity: 0; background: radial-gradient(64.15% 64.03% at 100% 97.87%, #FEFFC2 0%, #FAFF00 21.86%, #1D1903 100%); }
    .about-us-page .different .differentiators-list li.innovation:hover .box-wrapper .box:before{ opacity: 1; }
    .about-us-page .different .differentiators-list li.innovation .box-wrapper .box:after{ content: '\e821'; font-family: "qubika"; font-size: 130px; display: block; position: absolute; bottom: -50px; right: -50px; color: #FCFF60; opacity: 0; transition: all .5s; }
    .about-us-page .different .differentiators-list li.innovation:hover .box-wrapper .box:after{ opacity: 1; }

    .about-us-page .different .differentiators-list li.predictable-delivery .box-wrapper .box:before{ content: ""; display: block; background: radial-gradient(64.15% 64.03% at 100% 97.87%, #F49494 0%, #FE444F 21.86%, #200606 100%),linear-gradient(157.16deg, #FF5B14 0.69%, #973737 85.18%); position: absolute; width: 100%; height: 100%; bottom: 0; right: 0; z-index: 0; transition: all .5s; opacity: 0; }
    .about-us-page .different .differentiators-list li.predictable-delivery:hover .box-wrapper .box:before{ opacity: 1; }
    .about-us-page .different .differentiators-list li.predictable-delivery .box-wrapper .box:after{ content: '\e811'; font-family: "qubika"; font-size: 130px; display: block; position: absolute; bottom: -40px; right: -30px; color: #FF6969; opacity: 0; transition: all .5s; }
    .about-us-page .different .differentiators-list li.predictable-delivery:hover .box-wrapper .box:after{ opacity: 1; }    

/*Clients logos*/    
.about-us-page .client-logos-wrapper .clients-logos{ padding: 120px 0; margin: 0 auto; max-width: 1024px; }
.about-us-page .client-logos-wrapper .clients-logos h4{ text-align: center; margin-bottom: 30px; text-transform: uppercase; font-size: 15px; font-weight: 500; }
.about-us-page .client-logos-wrapper .clients-logos ul{ display: flex; width: 100%; justify-content: space-between; align-items: center; }
.about-us-page .client-logos-wrapper .clients-logos ul li{ height: 100px; display: flex; align-items: center; padding: 0 10px; }
.about-us-page .client-logos-wrapper .clients-logos ul li figure{}
.about-us-page .client-logos-wrapper .clients-logos ul li figure img{ width: 100%; }

    .about-us-page .client-logos-wrapper .clients-logos ul li.shopify{ width: 150px; }
    .about-us-page .client-logos-wrapper .clients-logos ul li.land-id{ width: 130px; }
    .about-us-page .client-logos-wrapper .clients-logos ul li.verifone{ width: 130px; }
    .about-us-page .client-logos-wrapper .clients-logos ul li.ripple{ width: 130px; }
    .about-us-page .client-logos-wrapper .clients-logos ul li.google{ width: 130px; }
    .about-us-page .client-logos-wrapper .clients-logos ul li.nest{ width: 130px; }
    .about-us-page .client-logos-wrapper .clients-logos ul li.idb{ width: 100px; }
    .about-us-page .client-logos-wrapper .clients-logos ul li.pluralsight{ width: 180px; }

/*Our Offices*/
.about-us-page .our-offices{ padding: 100px 0 110px; background: radial-gradient(36.78% 36.78% at 49.09% 6.12%, #131B21 0%, #000000 100%); border-radius: 40px; color: var(--white); margin-top: -40px; z-index: 100; }

.about-us-page .our-offices .offices-list{ display: flex; margin-top: 50px; transition: var(--transition); height: 700px; }

.about-us-page .our-offices .offices-list li{ height: 640px; width: 380px; padding: 10px; color: var(--white); transition: var( --transition); top: 50px; opacity: .7; }
.about-us-page .our-offices .offices-list li .office-content{ background-color: #111; background-size: cover; background-position: center; border-radius: 20px; width: 100%; min-width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; cursor: pointer; }
.about-us-page .our-offices .offices-list li .office-content h3{ font-weight: 200; text-align: center; z-index: 10; position: relative; font-size: 42px; display: flex; align-items: center; flex-direction: column; }
.about-us-page .our-offices .offices-list li .office-content h3 .headquarters{ background: var(--black); padding: 7px 15px; border-radius: 20px; font-size: 13px; font-weight: 500; color: var(--white); text-transform: uppercase; margin-top: 10px; display: none; }
.about-us-page .our-offices .offices-list li .office-content h3.eu .headquarters{ display: block; }
.about-us-page .our-offices .offices-list li .office-content:before{ content: ""; display: block; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,.4); position: absolute; z-index: 5; }


.about-us-page .our-offices .offices-list li.swiper-slide-active{ opacity: 1; }

.about-us-page .our-offices .top-section-title{ position: relative; margin-top: 20px; }
.about-us-page .our-offices .top-section-title .sub-title{ color: var(--white); text-align: center; text-transform: uppercase; font-size: 14px; padding-bottom: 10px; font-weight: 500; }
.about-us-page .our-offices .top-section-title .title{ color: var(--white); text-align: center; font-weight: 500; position: relative; line-height: 1.3; }

.about-us-page .our-offices .carrousel-arrows{ display: flex; align-items: center; justify-content: center; margin-top: 60px; }
.about-us-page .our-offices .carrousel-arrows .carrousel-arrow{ border-color: var(--white); }
.about-us-page .our-offices .carrousel-arrows .carrousel-arrow:before{ color: var(--white); }

/*Our Culture*/
.about-us-page .our-culture{ padding: 30px 0 130px; border-radius: 40px 40px 0 0; margin-top: -40px; position: relative; z-index: 10; background: var(--white); }
.about-us-page .our-culture .title-container { display: flex; justify-content: center; align-items: center; margin: 50px 0; }
.about-us-page .our-culture .title-container .top-section-title .sub-title{ text-align: center; text-transform: uppercase; font-size: 14px; padding-bottom: 10px; font-weight: 500; }
.about-us-page .our-culture .title-container .top-section-title .title { text-align: center; font-weight: 500; position: relative; line-height: 1.3; max-width: 400px; }

/*Pre Footer*/
.about-us-page .work-together{ margin-top: -40px; padding: 140px 0; }

/*Footer*/
.about-us-page .main-footer{ margin-top: -40px; }

/* Our Values */
.about-us-page .our-values-shared{ border-radius: 40px 40px 0 0; }

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

    /*Hero*/
    .about-us-page .hero{ min-height: 330px; }

    /*Different*/
    .about-us-page .different { padding: 40px 0 70px; }
    .about-us-page .different .title-container{ margin-bottom: 60px; }
    .about-us-page .different .differentiators-carousel{ padding: 0 5px; overflow: clip !important; }
    .about-us-page .different .differentiators-list{ display: flex; flex-wrap: nowrap; max-width: 100%; margin: 20px auto 0; }
    .about-us-page .different .differentiators-list li{ width: 250px; position: relative; height: 370px; cursor: pointer; padding: 0 5px; }
    .about-us-page .different .differentiators-list li .box-wrapper .box .description{ font-size: 14px; }

    /*Client logos*/
    .about-us-page .client-logos-wrapper .clients-logos{ padding: 40px 0; }
    .about-us-page .client-logos-wrapper .clients-logos ul{ flex-wrap: wrap; align-items: center; justify-content: center; }
    .about-us-page .client-logos-wrapper .clients-logos ul li{ height: 70px; }

    /*Titles*/
    .about-us-page .hero .text-wrapper .sub-title,
    .about-us-page .different .title-container .small-title,
    .about-us-page .client-logos-wrapper .clients-logos h4,
    .about-us-page .our-offices .top-section-title .sub-title,
    .about-us-page .our-culture .title-container .top-section-title .sub-title{ font-size: 13px; }

    .about-us-page .hero .text-wrapper .title,
    .about-us-page .timeline .title,
    .about-us-page .different .title-container .big-title,
    .about-us-page .our-offices .top-section-title .title,
    .about-us-page .our-culture .title-container .top-section-title .title{ font-size: 26px; }

    .about-us-page .different .title-container .big-title span{ display: inline; }

    /*Our Offices*/
    .about-us-page .our-offices{ padding-top: 60px; padding-bottom: 60px; }
    .about-us-page .our-offices .offices-list{ margin-top: 0; height: 560px; } 
    .about-us-page .our-offices .offices-list li{ width: 280px; height: 480px; }
    .about-us-page .our-offices .offices-list li .office-content h3{ font-size: 26px; }
    .about-us-page .our-offices .carrousel-arrows{ margin-top: 20px; }

    /*Our Culture*/
    .about-us-page .our-culture{ padding: 30px 0 70px; }
    .about-us-page .our-culture .title-container .top-section-title .title{ max-width: 100%; }
 
    /*Video*/
    .about-us-page .video .video-container{ padding-top: 55%; }

    /*About Us*/
    .about-us-page .timeline { padding: 50px 0 50px; }
    .about-us-page .timeline .carrousel-arrows{ margin-top: 40px; }
    .about-us-page .timeline ul{ height: 480px; }
    .about-us-page .timeline ul li{ height: 450px; }
    .about-us-page .timeline ul li.swiper-slide-active{ height: 500px; }
    
    .about-us-page .timeline ul li.y2023{ width: 85%; }
    .about-us-page .timeline ul li.y2022{ width: 85%; }
    .about-us-page .timeline ul li.y2021{ width: 85%; }
    .about-us-page .timeline ul li.y2020{ width: 85%; }
    .about-us-page .timeline ul li.y2019{ width: 85%; }
    .about-us-page .timeline ul li.y2018{ width: 85%; }
    .about-us-page .timeline ul li.y2016{ width: 85%; }
    .about-us-page .timeline ul li.y2015{ width: 85%; }
    .about-us-page .timeline ul li.y2014{ width: 85%; }
    .about-us-page .timeline ul li.y2010{ width: 85%; }
    .about-us-page .timeline ul li.y2006{ width: 85%; }

    /*Work Together*/
    .about-us-page .work-together .content h3{ font-size: 28px; }
    .about-us-page .work-together .content p{ font-size: 14px; }

}