/* Hero */
.studios-page .hero{ background: var(--black); color: var(--white); max-height: 1024px; overflow: hidden; }
.studios-page .hero:before{ content: ""; display: block; width: 100%; height: 100%; background: rgba(0,0,0,.6); position: absolute; top: 0; left: 0; z-index: 5; }
.studios-page .hero .text{ max-width: 620px; position: relative; z-index: 10; }
.studios-page .hero .text .label{ text-transform: uppercase; font-size: 17px; margin-bottom: 30px; }
.studios-page .hero .text .title{ font-weight: 300; font-size: 52px; margin-bottom: 30px; letter-spacing: -1px; }
.studios-page .hero .text .title span{ display: block; }
.studios-page .hero .text .description{ font-weight: 300; font-size: 17px; margin-bottom: 30px; line-height: 1.5; }  
.studios-page .hero video{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 1; }

/* Specialist */
.studios-page .specialist{ background: var(--black); border-radius: 40px 40px 0 0; margin-top: -40px; padding: 100px 0; color: var(--white); overflow: hidden; z-index: 30; }
.studios-page .specialist .head{ display: flex; justify-content: space-between; align-items: flex-start; }
.studios-page .specialist .head .left{ max-width: 500px; }
.studios-page .specialist .head .left h2{ font-weight: 300; font-size: 30px; line-height: 1.3; letter-spacing: -1px; }
.studios-page .specialist .head .left h2 span{ display: block; }
.studios-page .specialist .head .right{ max-width: 500px; }
.studios-page .specialist .head .right p{ font-size: 15px; line-height: 1.4; margin-bottom: 15px; font-weight: 300; }

    /* Cube */
    .studios-page .specialist .cube{ position: relative; width: 800px; height: 600px; margin: 180px auto 200px; color: var(--white); transition: var(--transition); }
    
    /* Faces */
    .studios-page .specialist .cube .cube-face{ position: absolute; }
    .studios-page .specialist .cube .cube-face.blue{ background: url("../svg/blue.svg"); width: 400px; height: 400px; background-size: 400px 400px; top: -80px; left: 50%; margin-left: -200px; z-index: 100; }
    .studios-page .specialist .cube .cube-face.yellow{ background: url("../svg/yellow.svg"); width: 370px; height: 370px; background-size: 370px 370px; top: -20px; left: 40px; z-index: 20; }
    .studios-page .specialist .cube .cube-face.purple{ background: url("../svg/purple.svg"); width: 370px; height: 357px; background-size: 370px 370px; top: -20px; right: 40px; z-index: 20; }
    .studios-page .specialist .cube .cube-face.red{ background: url("../svg/red.svg"); width: 350px; height: 350px; background-size: 350px 350px; top: 170px; right: 90px; z-index: 50; }
    .studios-page .specialist .cube .cube-face.green{ background: url("../svg/green.svg"); width: 350px; height: 350px; background-size: 350px 350px; top: 170px; left: 90px; z-index: 50; }
    .studios-page .specialist .cube .cube-face.cyan{ background: url("../svg/cyan.svg"); width: 400px; height: 400px; background-size: 400px 400px; bottom: -70px; left: 50%; margin-left: -200px; z-index: 10; }

    /* Arrows */
    .studios-page .specialist .cube .arrow{ position: absolute; text-transform: uppercase; font-size: 15px; z-index: 150; }
    .studios-page .specialist .cube .arrow:before{ content: ''; position: absolute; display: block; background-color: transparent; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='white' stroke-width='2' stroke-dasharray='2%2c 8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); }
    
    .studios-page .specialist .cube .arrow.data{ top: -90px; left: 0; width: 100%; text-align: center; }
    .studios-page .specialist .cube .arrow.data:before{ width: 1px; height: 160px; left: 50%; top: 30px; }
    .studios-page .specialist .cube .arrow.data:after{ content: ""; display: block; width: 5px; height: 5px; border-radius: 100%; background: var(--white); left: 50%; position: absolute; top: 195px; margin-left: -2px; }
    
    .studios-page .specialist .cube .arrow.engineering{ top: 60px; left: -50px; }
    .studios-page .specialist .cube .arrow.engineering:before{ width: 186px; height: 1px; top: 8px; left: 113px; }
    .studios-page .specialist .cube .arrow.engineering:after{ content: ""; display: block; width: 5px; height: 5px; border-radius: 100%; background: var(--white); position: absolute; left: 301px; top: 6px; }

    .studios-page .specialist .cube .arrow.quality{ top: 330px; left: 0; }
    .studios-page .specialist .cube .arrow.quality:before{ width: 170px; height: 1px; top: 8px; left: 85px; }
    .studios-page .specialist .cube .arrow.quality:after{ content: ""; display: block; width: 5px; height: 5px; border-radius: 100%; background: var(--white); position: absolute; left: 260px; top: 6px; }
    
    .studios-page .specialist .cube .arrow.design{ top: 60px; right: 20px; }
    .studios-page .specialist .cube .arrow.design:before{ width: 160px; height: 1px; right: 69px; top: 8px; }
    .studios-page .specialist .cube .arrow.design:after{ content: ""; display: block; width: 5px; height: 5px; border-radius: 100%; background: var(--white); position: absolute; right: 233px; top: 6px; }

    .studios-page .specialist .cube .arrow.cybersecurity{ top: 330px; right: -50px; }
    .studios-page .specialist .cube .arrow.cybersecurity:before{ width: 160px; height: 1px; right: 136px; top: 8px; }
    .studios-page .specialist .cube .arrow.cybersecurity:after{ content: ""; display: block; width: 5px; height: 5px; border-radius: 100%; background: var(--white); position: absolute; right: 293px; top: 6px; }
    
    .studios-page .specialist .cube .arrow.product-management{ bottom: -70px; left: 0; width: 100%; text-align: center; }
    .studios-page .specialist .cube .arrow.product-management:before{ width: 1px; height: 140px; left: 50%; bottom: 45px; }
    .studios-page .specialist .cube .arrow.product-management:after{ content: ""; display: block; width: 5px; height: 5px; border-radius: 100%; background: var(--white); left: 50%; position: absolute; bottom: 195px; margin-left: -2px; }

    /* Steps */
    .studios-page .specialist .steps{ text-align: center; display: flex; justify-content: space-between; width: 900px; margin: 100px auto; } 
    .studios-page .specialist .steps .step-wrapper{ background: #191919; border: 2px solid #2F2F36; border-radius: 20px; padding: 40px 20px; width: 330px; min-width: 330px; }
    
    .studios-page .specialist .steps .step-wrapper .step-animation{ position: relative; width: 140px; height: 140px; margin: 0 auto 60px; }
    .studios-page .specialist .steps .step-wrapper .step-animation .box{ width: 45px; height: 45px; background: #272647; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%235E5BFFFF' stroke-width='3' stroke-dasharray='5%2c 8' stroke-dashoffset='10' stroke-linecap='square'/%3e%3c/svg%3e"); position: absolute; }
    
    .studios-page .specialist .steps .step-wrapper .step-animation .box.box-one{ top: 0; left: 0; }
    .studios-page .specialist .steps .step-wrapper .step-animation .box.box-one:before{ content: ""; display: block; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%235E5BFFFF' stroke-width='3' stroke-dasharray='5%2c 8' stroke-dashoffset='10' stroke-linecap='square'/%3e%3c/svg%3e"); position: absolute; width: 2px; height: 42px; top: 48px; left: 22px; } 

    .studios-page .specialist .steps .step-wrapper .step-animation .box.box-two{ top: 0; right: 0; }

    .studios-page .specialist .steps .step-wrapper .step-animation .box.box-three{ bottom: 0; left: 0; }
    .studios-page .specialist .steps .step-wrapper .step-animation .box.box-three:before{ content: ""; display: block; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%235E5BFFFF' stroke-width='3' stroke-dasharray='5%2c 8' stroke-dashoffset='10' stroke-linecap='square'/%3e%3c/svg%3e"); position: absolute; rotate: -45deg; width: 63px; height: 2px; top: -26px; left: 39px; } 

    .studios-page .specialist .steps .step-wrapper .step-animation .box.box-four{ bottom: 0; right: 0; }
    .studios-page .specialist .steps .step-wrapper .step-animation .box.box-four:before{ content: ""; display: block; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%235E5BFFFF' stroke-width='3' stroke-dasharray='5%2c 8' stroke-dashoffset='10' stroke-linecap='square'/%3e%3c/svg%3e"); position: absolute; width: 43px; height: 2px; top: 23px; right: 49px; } 

    .studios-page .specialist .steps .step-wrapper .step-animation .box.box-active{ bottom: 0; left: 0; background: #5E5BFF; width: 47px; height: 47px; }

    .studios-page .specialist .steps .pill{ background: #5E5BFF; text-transform: uppercase; font-size: 14px; color: var(--white); border-radius: 30px; display: inline-block; white-space: nowrap; padding:7px 25px; width: auto; margin-bottom: 20px; }
    .studios-page .specialist .steps .description{ text-align: center; color: #C7C9D0; font-size: 14px; line-height: 1.4; }
    .studios-page .specialist .steps .description span{ display: block; }

    /* Steps Animation */
    @keyframes step-square {
        0% { transform: translateX(0) translateY(0); }
        8% { transform: translateX(0) translateY(0); }

        16% { transform: translateX(94px) translateY(-94px); }
        24% { transform: translateX(94px) translateY(-94px); }

        32% { transform: translateX(0) translateY(0); }
        40% { transform: translateX(0) translateY(0); }

        48% { transform: translateX(0) translateY(-94px); }
        56% { transform: translateX(0) translateY(-94px); }

        64% { transform: translateX(0) translateY(0); }
        72% { transform: translateX(0) translateY(0); }

        80% { transform: translateX(94px) translateY(0); }
        88% { transform: translateX(94px) translateY(0); }

        96% { transform: translateX(0) translateY(0); }
        100% { transform: translateX(0) translateY(0); }

    }

    .studios-page .specialist .steps .step-wrapper.step-two.active .step-animation .box.box-active-move{ animation: step-square 6s infinite 1s ease-in-out; }

    @keyframes pulse {
        0%    { opacity: 1; }
        40%   { opacity: 1; }
        55%   { opacity: 0; }
        70%   { opacity: 1; }
        100%  { opacity: 1; }
    }
    
    .studios-page .specialist .steps .step-wrapper.step-one.active .step-animation .box.box-active { animation: pulse 4s infinite; }

/* Advantages */
.studios-page .advantages{ background: #F7F9FC; padding: 100px 0; border-radius: 0 0 40px 40px; position: relative; z-index: 10; }
.studios-page .advantages .head{ display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 50px; }
.studios-page .advantages .head .left{ max-width: 500px; }
.studios-page .advantages .head .left .label{ font-size: 14px; text-transform: uppercase; margin-bottom: 10px; }
.studios-page .advantages .head .left h2{ font-weight: 400; font-size: 36px; line-height: 1.2; letter-spacing: -1px; }
.studios-page .advantages .head .left h2 span{ display: block; }
.studios-page .advantages .head .right{ max-width: 400px; }
.studios-page .advantages .head .right p{ font-size: 15px; line-height: 1.4; margin-bottom: 15px; font-weight: 300; }

.studios-page .advantages .advantages-list{ }
.studios-page .advantages .advantages-list ul{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: stretch; margin: 0 auto; max-width: 1220px; }
.studios-page .advantages .advantages-list ul li{ width: 50%; padding: 20px; }
.studios-page .advantages .advantages-list ul li .box-content{ padding: 50px 50px 80px; height: 100%; border-radius: 20px; background: var(--white); position: relative; overflow: hidden; }
.studios-page .advantages .advantages-list ul li .box-content i{ width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; margin-bottom: 20px; font-size: 25px; position: relative; z-index: 10; }
.studios-page .advantages .advantages-list ul li .box-content h5{ margin-bottom: 20px; position: relative; z-index: 10; }
.studios-page .advantages .advantages-list ul li .box-content p{ font-size: 15px; color: #6E7180; font-weight: 400; line-height: 1.4; padding-right: 70px; position: relative; z-index: 10; }

    /* Icons */
    .studios-page .advantages .advantages-list ul li.unified-service .box-content i{ background: #EDDCFF; color: #8844D2; }
    .studios-page .advantages .advantages-list ul li.flexibility .box-content i{ background: #BCF2C6; color: #309A45; }
    .studios-page .advantages .advantages-list ul li.high-quality .box-content i{ background: #FFECA9; color: #938613; }
    .studios-page .advantages .advantages-list ul li.expertise .box-content i{ background: #D6F4FF; color: #29B5E8; }

    /* Icons Background */
    .studios-page .advantages .advantages-list ul li.unified-service .box-content:before{ content: '\e832'; font-family: var(--qubika); position: absolute; color: #faf8fd; font-size: 280px; right: -60px; top: -90px; }
    .studios-page .advantages .advantages-list ul li.flexibility .box-content:before{  content: '\e830'; font-family: var(--qubika); position: absolute; color: #f7fbf8; font-size: 310px; right: -100px; top: -110px; }
    .studios-page .advantages .advantages-list ul li.high-quality .box-content:before{ content: '\e846'; font-family: var(--qubika); position: absolute; color: #fbfaf6; font-size: 370px; right: 0; bottom: -190px; }
    .studios-page .advantages .advantages-list ul li.expertise .box-content:before{ content: '\e838'; font-family: var(--qubika); position: absolute; color: #f8fdfe; font-size: 300px; right: -150px; bottom: -90px; }

/* Journey */
.studios-page .journey{ background: var(--black); padding: 200px 0 0; color: var(--white); margin-top: -40px; position: relative; z-index: 5; }
.studios-page .journey .head{ text-align: center; margin-bottom: 80px; }
.studios-page .journey .head .label{ font-size: 14px; text-transform: uppercase; margin-bottom: 10px; }
.studios-page .journey .head h2{ letter-spacing: -1px; font-size: 38px; }
.studios-page .journey .head h2 span{ display: block; }
 
.studios-page .journey .journey-list{ display: flex; align-items: stretch; gap: 0 30px; }
.studios-page .journey .journey-list li{ width: 33.3333%; }
.studios-page .journey .journey-list li .box-content{ background: #151515; border-radius: 20px; padding: 50px 35px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; height: 100%; }
.studios-page .journey .journey-list li .box-content .pill{ background: #2946CF; text-transform: uppercase; font-size: 11px; color: var(--white); border-radius: 30px; display: inline-block; white-space: nowrap; padding: 5px 25px; width: auto; }
.studios-page .journey .journey-list li .box-content .pill.main-pill{ padding: 10px 30px; font-size: 13px; }
.studios-page .journey .journey-list li .box-content figure{ margin: 30px 0; height: 150px; width: 150px; min-height: 150px; }
.studios-page .journey .journey-list li .box-content figure img{}
.studios-page .journey .journey-list li .box-content .title{ font-size: 22px; letter-spacing: -1px; margin-bottom: 10px; }
.studios-page .journey .journey-list li .box-content .description{ color: #9FA6C8; text-align: center; font-size: 14px; margin-bottom: 35px; line-height: 1.4; }
.studios-page .journey .journey-list li .box-content .description span{ display: block; }
.studios-page .journey .journey-list li .box-content .pill-list{ display: flex; gap: 10px 5px; flex-wrap: wrap; align-items: center; justify-content: center; }
.studios-page .journey .journey-list li .box-content .pill-list .pill{ width: auto; padding: 5px 10px; }
.studios-page .journey .journey-list li .box-content .pill-list .pill.no-transform{ text-transform: none; }

    /* Step 1 */
    .studios-page .journey .journey-list li.step-one .box-content .pill-list .pill{ width: calc(50% - 5px); }

    /* Step 2 */
    .studios-page .journey .journey-list li.step-two .box-content .pill-list{}

    /* Step 3 */
    .studios-page .journey .journey-list li.step-three .box-content .pill-list{}
    .studios-page .journey .journey-list li.step-three .box-content .pill-list .pill{ padding: 5px 20px; }

/*Testimonials*/
.studios-page .studios-testimonials{ background: var(--black); padding: 200px 0; color: var(--white); margin-top: -40px; }
.studios-page .studios-testimonials .content{ display: flex; justify-content: space-between; align-items: center; }
.studios-page .studios-testimonials .left{ width: 400px; }
.studios-page .studios-testimonials .left .title{ font-weight: 500; letter-spacing: -1px; font-size: 36px; }
.studios-page .studios-testimonials .left .title span{ display: block; }
.studios-page .studios-testimonials .left .carrousel-controls{ margin-top: 50px; }
.studios-page .studios-testimonials .left .carrousel-controls .testimonials-arrows{ display: flex; }
.studios-page .studios-testimonials .left .carrousel-controls .testimonials-arrows .carrousel-arrow:before{ color: var(--white); }
.studios-page .studios-testimonials .left .clutch-reviews{ margin-top: 100px; width: 350px; }
.studios-page .studios-testimonials .left .clutch-reviews a{ text-decoration: none; }
.studios-page .studios-testimonials .left .clutch-reviews img{ width: 100%; }

.studios-page .studios-testimonials .right{ width: 550px; font-size: 17px; }
.studios-page .studios-testimonials .right .studios-testimonials-carousel ul{ display: flex; align-items: center; }
.studios-page .studios-testimonials .right .client-logo{ width: 100px; margin-bottom: 20px; }
.studios-page .studios-testimonials .right .client-logo img{ width: 100%; }

    .studios-page .studios-testimonials .right li.bancard .client-logo{ width: 120px; }
    .studios-page .studios-testimonials .right li.vivihealth .client-logo{ width: 160px; }
    .studios-page .studios-testimonials .right li.lookback .client-logo{ width: 120px; }

.studios-page .studios-testimonials .right .quote{ margin-bottom: 30px; line-height: 1.6; font-weight: 300; }
.studios-page .studios-testimonials .right .name{ margin-bottom: 15px; font-weight: 600; }
.studios-page .studios-testimonials .right .role{ font-style: italic; }

/* Studios Collection */
.studios-page .studios-collection{ z-index: 500; }

@media screen and (max-width: 1280px){
    
    /*Testimonials*/
    .studios-page .studios-testimonials .left .title{ font-size: 28px; }
    .studios-page .studios-testimonials .right .studios-testimonials-carousel ul li{ font-size: 15px; }

}

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

    /* Hero */
    .studios-page .hero .text .label{ font-size: 15px; }
    .studios-page .hero .text .title{ font-size: 36px; }
    .studios-page .hero .text .title span{ display: inline; }
    .studios-page .hero .text .description{ font-size: 13px; }
    .studios-page .hero .text .button{ padding: 12px 20px; }

    /* Specialist */
    .studios-page .specialist{ padding: 70px 0; }
    .studios-page .specialist .head{ flex-direction: column; }
    .studios-page .specialist .head .left{ max-width: 100%; margin-bottom: 20px; }
    .studios-page .specialist .head .left h2 span{ display: inline; }
    .studios-page .specialist .head .right{ max-width: 100%; }
    
    /*Cube*/
    .studios-page .specialist .cube{ scale: .9; left: 50%; margin: 150px 0 150px -400px; }
    
    .studios-page .specialist .cube .arrow.engineering { top: -50px; left: 150px; }
    .studios-page .specialist .cube .arrow.engineering:before { width: 1px; height: 115px; top: 28px; left: 48px; }
    .studios-page .specialist .cube .arrow.engineering:after { left: 46px; top: 148px; }
    
    .studios-page .specialist .cube .arrow.design { top: -50px; right: 170px; }
    .studios-page .specialist .cube .arrow.design:before { width: 1px; height: 115px; right: 27px; top: 26px; }
    .studios-page .specialist .cube .arrow.design:after { right: 25px; top: 146px; }

    .studios-page .specialist .cube .arrow.cybersecurity { top: 560px; right: 170px; }
    .studios-page .specialist .cube .arrow.cybersecurity:before { width: 1px; height: 181px; right: 69px; top: auto; bottom: 29px; }
    .studios-page .specialist .cube .arrow.cybersecurity:after { right: 67px; top: auto; bottom: 216px; }

    .studios-page .specialist .cube .arrow.quality{ top: 560px; left: 200px; }
    .studios-page .specialist .cube .arrow.quality:before { width: 1px; height: 181px; left: 32px; top: auto; bottom: 29px; }
    .studios-page .specialist .cube .arrow.quality:after { left: 30px; bottom: 216px; top: auto; }

        /* Steps */
        .studios-page .specialist .steps{ width: 100%; }

    /* Advantages */
    .studios-page .advantages{ padding: 40px 0; }
    .studios-page .advantages .head{ flex-direction: column; align-items: flex-start; justify-content: flex-start; }
    .studios-page .advantages .head .left{ max-width: 100%; }
    .studios-page .advantages .head .left .label{ font-size: 13px; }
    .studios-page .advantages .head .left h2{ margin-bottom: 20px; font-size: 28px; }
    .studios-page .advantages .head .left h2 span{ display: inline; }
    .studios-page .advantages .head .right{ max-width: 100%; }
    .studios-page .advantages .head .right p{ font-size: 14px; }
    
    .studios-page .advantages .advantages-list ul li{ width: 100%; padding: 10px 20px; }
    .studios-page .advantages .advantages-list ul li .box-content{ padding: 30px 30px 50px; }
    .studios-page .advantages .advantages-list ul li .box-content p{ padding-right: 0; font-size: 14px; }

    /* Journey */
    .studios-page .journey{ padding: 120px 0 0; }
    .studios-page .journey .head{ margin-bottom: 50px; }
    .studios-page .journey .head .label{ font-size: 13px; }
    .studios-page .journey .head h2{ font-size: 32px; }
    .studios-page .journey .journey-list{ flex-direction: column; }
    .studios-page .journey .journey-list li{ width: 100%; margin-bottom: 20px; }
    .studios-page .journey .journey-list li .box-content .pill.main-pill{ padding: 8px 25px; }
    .studios-page .journey .journey-list li .box-content .pill-list .pill{ margin: 0; }
    .studios-page .journey .journey-list li .box-content .title{ font-size: 20px; letter-spacing: 0; }
    .studios-page .journey .journey-list li .box-content .description{ font-size: 13px; }

    /*Testimonials*/
    .studios-page .studios-testimonials{ padding: 120px 0; }
    .studios-page .studios-testimonials .content{ flex-direction: column; }
    
    .studios-page .studios-testimonials .left{ width: 100%; }
    .studios-page .studios-testimonials .left .title span{ display: inline; }
    .studios-page .studios-testimonials .left .carrousel-controls{ margin: 20px 0 40px; }

    .studios-page .studios-testimonials .right{ width: 100%; }
    .studios-page .studios-testimonials .right .studio-testimonials-carousel ul{ align-items: flex-start; }

    .studios-page .studios-testimonials .left .clutch-reviews{ width: 90%; max-width: 350px; margin: 30px 0 60px; }

}

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

    /*Cube*/
    .studios-page .specialist .cube{ scale: .7; margin-top: 40px; margin-bottom: 60px; }

    /* Steps */
    .studios-page .specialist .steps{ flex-direction: column; padding: 0; margin-bottom: 0; margin-top: 20px; }
    .studios-page .specialist .steps .step-wrapper{ width: 100%; min-width: 100%; margin-bottom: 40px; }

}

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

    /*Cube*/
    .studios-page .specialist .cube{ scale: .6; margin-top: 0; margin-bottom: 0; }

}