/*Hero*/
.case-study-one .hero{ overflow: hidden; height: 1050px; }
.case-study-one .hero .content{ position: relative; height: 100%; display: flex; align-items: flex-start; }
.case-study-one .hero .text{ max-width: 490px; margin-top: 200px; position: relative; z-index: 10; }
.case-study-one .hero .text figure{ margin-bottom: 10px; width: 130px; }
.case-study-one .hero .text figure img{ width: 100%; }
.case-study-one .hero .text h1{ font-weight: bold; font-size: 38px; line-height: 1.1; margin-bottom: 30px; letter-spacing: -1px; }
.case-study-one .hero .text h1 span{ display: block; }
.case-study-one .hero .text p{ color: #7A7A7A; font-weight: 300; line-height: 1.4; margin-bottom: 40px; font-size: 17px; }

.case-study-one .hero .text .reviews{ margin-top: 120px; }
.case-study-one .hero .text .reviews .title{ color: #072E81; font-weight: 500; margin-bottom: 20px; }
.case-study-one .hero .text .reviews .title span{ text-decoration: underline; color: #072E81; display: inline; }
.case-study-one .hero .text .reviews .avatars{ display: flex; padding-left: 20px; }
.case-study-one .hero .text .reviews .avatars li{ width: 50px; height: 50px; background: #6294FF; border: 2px solid var(--white); border-radius: 100%; margin-left: -20px; overflow: hidden; }
.case-study-one .hero .text .reviews .avatars li figure{ width: 100%; height: 100%; }
.case-study-one .hero .text .reviews .avatars li figure img{ width: 100%; height: 100%; object-fit: cover; }
.case-study-one .hero .text .reviews .avatars .value{ display: flex; color: var(--white); align-items: center; justify-content: center; font-size: 14px; font-weight: 500; }

.case-study-one .hero .circle{ width: 1000px; height: 900px; background: linear-gradient(181.92deg, #CDD2FD 20.36%, rgba(217, 221, 255, 0) 89.07%); position: absolute; bottom: -50%; margin-bottom: -50px; left: 50%; margin-left: -500px; border-radius: 100%; rotate: 180deg; }

.case-study-one .hero .cards{ position: absolute; width: 500px; height: 460px; top: 480px; left: 50%; margin-left: -200px; z-index: 10; }
.case-study-one .hero .cards figure{ width: 200px; position: absolute; }
.case-study-one .hero .cards figure img{ width: 100%; }
.case-study-one .hero .cards .card-one{ width: 450px; left: 0; }
.case-study-one .hero .cards .card-two{ width: 400px; left: 120px; top: -120px; }
.case-study-one .hero .cards .card-three{ width: 300px; left: 310px; top: -150px; }

.case-study-one .hero .numbers{ position: absolute; right: 0; top: 300px; z-index: 10; }
.case-study-one .hero .numbers .title{ text-transform: uppercase; font-weight: 500; margin-bottom: 20px; }
.case-study-one .hero .numbers ul li{ margin-bottom: 40px; }
.case-study-one .hero .numbers ul li .value{ font-size: 62px; font-weight: 600; letter-spacing: -2px; }
.case-study-one .hero .numbers ul li .label{ font-size: 16px; font-weight: 400; }

/*Load animations*/
.case-study-one .hero .text{ transform: translateY(-150px); opacity: 0; transition: all 2s; }
.case-study-one .hero.active .text{ transform: translateY(0); opacity: 1; }

.case-study-one .hero .numbers{ transform: translateY(-150px); opacity: 0; transition: all 2s; transition-delay: .5s; }
.case-study-one .hero.active .numbers{ transform: translateY(0); opacity: 1; }

.case-study-one .hero .cards .card-one{ transform: translateX(-50px) rotate(-12deg); opacity: 0; transition: all 1s; }
.case-study-one .hero.active .cards .card-one{ transform: translateY(0) rotate(0deg); opacity: 1; }

.case-study-one .hero .cards .card-two{ transform: translateX(-50px) rotate(-12deg); opacity: 0; transition: all 1s; transition-delay: .5s; }
.case-study-one .hero.active .cards .card-two{ transform: translateY(0) rotate(0deg); opacity: 1; }

.case-study-one .hero .cards .card-three{ transform: translateX(-50px) rotate(-12deg); opacity: 0; transition: all 1s; transition-delay: 1s; }
.case-study-one .hero.active .cards .card-three{ transform: translateY(0) rotate(0deg); opacity: 1; }

/*Market Success*/
.case-study-one .market-success{ background: linear-gradient(0deg, #000000, #000000), radial-gradient(70.04% 57.3% at 51.44% 4.83%, rgba(220, 220, 220, 0.2) 0%, rgba(0, 0, 0, 0) 100%); border-radius: 40px 40px 0 0; color: var(--white); overflow: hidden; padding-bottom: 100px; }
.case-study-one .market-success .content{ position: relative; }
.case-study-one .market-success .circle-gradient{ background: radial-gradient( #3a3c47, #000, #000); width: 1100px; height: 1100px; opacity: .4; position: absolute; left: 50%; margin-left: -550px; top: -470px; }
.case-study-one .market-success .qubika-logo{ position: absolute; top: 90px; width: 1214px; }
.case-study-one .market-success .qubika-logo img{ width: 100%; }
.case-study-one .market-success .head{ text-align: center; padding: 90px 0 60px; display: flex; justify-content: center; flex-direction: column; align-items: center; position: relative; z-index: 10; }
.case-study-one .market-success .head .subtitle{ text-transform: uppercase; font-size: 13px; margin-bottom: 30px; }
.case-study-one .market-success .head .title{ margin-bottom: 30px; }
.case-study-one .market-success .head .title span{ display: block; }
.case-study-one .market-success .head .description{ color: #E3E3E3; font-size: 18px; font-weight: 300; line-height: 1.6; }
.case-study-one .market-success .head .description span{ display: block; }

.case-study-one .market-success .partnership-image{ border-radius: 20px; overflow: hidden; position: relative; z-index: 10; width: 1400px; height: 700px; margin: 0 auto; }
.case-study-one .market-success .partnership-image img{ width: 100%; height: 100%; object-fit: cover; }

.case-study-one .market-success .quotes{ display: flex; justify-content: center; padding: 100px 0; }
.case-study-one .market-success .quotes li{ width: 100%; max-width: 600px; }
.case-study-one .market-success .quotes li figure{ margin-bottom: 15px; }
.case-study-one .market-success .quotes li figure img{ width: 100%; }
.case-study-one .market-success .quotes li.qubika-quote figure{ width: 100px; }
.case-study-one .market-success .quotes li.one-quote figure{ width: 40px; }
.case-study-one .market-success .quotes li .quote{ font-size: 15px; line-height: 1.7; margin-bottom: 40px; font-weight: 400; font-style: italic; color: #E3E3E3; }
.case-study-one .market-success .quotes li .quoter{ color: #E3E3E3; font-size: 15px; }

.case-study-one .market-success .big-quote{ font-size: 30px; text-align: center; font-weight: 200; line-height: 1.4; padding: 200px 0; position: relative; }
.case-study-one .market-success .big-quote .skyblue{ color: #50A0FF; }
.case-study-one .market-success .big-quote .block{ display: block; }

.case-study-one .market-success .big-quote .one-logo{ position: absolute; width: 550px; left: 50%; margin-left: -275px; top: 50%; margin-top: -190px; z-index: 20; }
.case-study-one .market-success .big-quote .circle-gradient{ background: radial-gradient(50% 50% at 50% 50%, rgba(13, 91, 255, 0.76) 0%, rgba(1, 22, 67, 0) 100%); position: absolute; width: 550px; height: 550px; top: 0; left: 50%; margin-left: -275px; z-index: 10; }
.case-study-one .market-success .big-quote p{ position: relative; z-index: 100; }

.case-study-one .market-success .big-quote .cash{ position: absolute; z-index: 50; top: 60px; right: 190px; width: 80px; }
.case-study-one .market-success .big-quote .card{ position: absolute; z-index: 50; bottom: 30px; left: 170px; width: 80px; }

.case-study-one .market-success .big-quote .cash img,
.case-study-one .market-success .big-quote .card img{ width: 100%; }

.case-study-one .market-success .timeline{}
.case-study-one .market-success .timeline .section-title{ font-size: 48px; font-weight: 300; text-align: center; padding: 120px 0 30px; letter-spacing: -1px; margin-bottom: 80px; }
.case-study-one .market-success .timeline ul{ position: relative; padding: 60px 0 30px; }
.case-study-one .market-success .timeline ul li{ display: flex; justify-content: space-between; flex-direction: row-reverse; align-items: center; margin-bottom: 160px; position: relative; }
.case-study-one .market-success .timeline ul li .main-image{ width: 470px; overflow: hidden; border-radius: 20px; line-height: 0; }
.case-study-one .market-success .timeline ul li .main-image img{ width: 100%; }
.case-study-one .market-success .timeline ul li .text{ width: 490px; }
.case-study-one .market-success .timeline ul li .text .icon{ width: 45px; margin-bottom: 20px; }
.case-study-one .market-success .timeline ul li .text .icon img{ width: 100%; }
.case-study-one .market-success .timeline ul li .text h5{ color: var(--white); margin-bottom: 20px; font-weight: 300; font-size: 19px; line-height: 1.4; position: relative; }
.case-study-one .market-success .timeline ul li .text p{ color: #C4C4C4; font-size: 16px; line-height: 1.8; font-weight: 300; padding-right: 40px; }

.case-study-one .market-success .timeline ul li:nth-child(2n){ flex-direction: row; }

.case-study-one .market-success .timeline ul:before{ content: ""; display: block; width: 1px; background: #565656; height: 100%; position: absolute; left: 50%; top: 0; }
.case-study-one .market-success .timeline ul:after{ content: ""; display: block; width: 7px; border: 1px solid #565656; height: 7px; position: absolute; left: 50%; top: -6px; border-radius: 100%; z-index: 10; margin-left: -3px; }

.case-study-one .market-success .timeline ul li .text h5:before{ content: ""; display: block; width: 80px; background: #565656; height: 1px; position: absolute; right: -100px; top: 14px; }
.case-study-one .market-success .timeline ul li .text h5:after{ content: ""; display: block; width: 7px; border: 1px solid #565656; height: 7px; position: absolute; right: 0; top: 11px; border-radius: 100%; margin-right: -21px; z-index: 10; background: var(--black); }

.case-study-one .market-success .timeline ul li:nth-child(2n) .text h5:before{ content: ""; display: block; width: 80px; background: #565656; height: 1px; position: absolute; left: -100px; right: auto; top: 14px; }
.case-study-one .market-success .timeline ul li:nth-child(2n) .text h5:after{ content: ""; display: block; width: 7px; border: 1px solid #565656; height: 7px; position: absolute; right: auto; left: -20px; top: 11px; border-radius: 100%; z-index: 10; }

/*Conclusion*/
.case-study-one .conclusion{ border-radius: 40px; margin-top: -40px; background: var(--white); padding-bottom: 100px; }
.case-study-one .conclusion .content{ position: relative; }
.case-study-one .conclusion .blue-circle{ background: radial-gradient(50% 50% at 50% 50%, rgba(13, 91, 255, 0.2232) 0%, rgba(217, 217, 217, 0) 100%); width: 400px; height: 400px; position: absolute; top: 20px; right: -381px; }
.case-study-one .conclusion .sky-circle{ background: radial-gradient(56.19% 56.19% at 47.07% 43.81%, rgba(36, 170, 246, 0.1702) 0%, rgba(217, 217, 217, 0) 100%); width: 400px; height: 400px; position: absolute; bottom: -310px; left: -260px; }
.case-study-one .conclusion .head{ text-align: center; padding: 50px 0 60px; display: flex; justify-content: center; flex-direction: column; align-items: center; position: relative; z-index: 10; }
.case-study-one .conclusion .head .subtitle{ text-transform: uppercase; font-size: 13px; margin-bottom: 30px; }
.case-study-one .conclusion .head .title{ margin-bottom: 30px; font-size: 42px; font-weight: 500; }
.case-study-one .conclusion .head .title span{ display: block; }
.case-study-one .conclusion .head .description{ font-size: 16px; font-weight: 300; line-height: 1.6; }
.case-study-one .conclusion .head .description span{ display: block; }

.case-study-one .conclusion .conclusion-image{ border-radius: 20px; overflow: hidden; position: relative; z-index: 10; width: 940px; height: 320px; margin: 0 auto; }
.case-study-one .conclusion .conclusion-image img{ width: 100%; height: 100%; object-fit: cover; }

@media screen and (max-width: 1500px){

    .case-study-one .market-success .partnership-image{ width: 94%; height: auto; }

}

@media screen and (max-width: 1280px){

    /*Hero*/
    .case-study-one .hero{ height: 870px; }
    .case-study-one .hero .text{ max-width: 350px; margin-top: 150px; }
    .case-study-one .hero .text figure{ width: 50px; }
    .case-study-one .hero .text h1{ font-size: 28px; }
    .case-study-one .hero .text h1 span{ display: inline; }
    .case-study-one .hero .text p{ font-size: 14px; }
    .case-study-one .hero .text p span{ display: inline; }
    .case-study-one .hero .text .reviews{ margin-top: 70px; }
    
    .case-study-one .hero .numbers{ right: 40px; }
    .case-study-one .hero .numbers .title{ font-size: 15px; }
    .case-study-one .hero .numbers ul li .value{ font-size: 42px; }
    .case-study-one .hero .numbers ul li .label{ font-size: 14px; }

    .case-study-one .hero .cards{ top: 420px; margin-left: -250px; }
    .case-study-one .hero .cards figure img{ width: 100%; }
    .case-study-one .hero .cards .card-one{ width: 380px; left: 0; }
    .case-study-one .hero .cards .card-two{ width: 320px; left: 120px; top: -120px; }
    .case-study-one .hero .cards .card-three{ width: 230px; left: 310px; top: -150px; }

    /*Market Success*/
    .case-study-one .market-success .qubika-logo{ width: 90%; left: 5%; }
    .case-study-one .market-success .quotes{ padding: 100px 0 0; }
    .case-study-one .market-success .big-quote{ font-size: 26px; }
    .case-study-one .market-success .big-quote .block{ display: inline; }
    .case-study-one .market-success .big-quote .cash{ right: 10px; }
    .case-study-one .market-success .big-quote .card{ left: 10px; }
    .case-study-one .market-success .big-quote .cash{ width: 70px; }
    .case-study-one .market-success .big-quote .card{ width: 70px; }
    .case-study-one .market-success .timeline .section-title{ font-size: 36px; }

    .case-study-one .market-success .timeline ul:before,
    .case-study-one .market-success .timeline ul li .text h5:before,
    .case-study-one .market-success .timeline ul li .text h5:after,
    .case-study-one .market-success .timeline ul:after{ display: none !important; }

    .case-study-one .market-success .timeline ul li .text{ padding-right: 30px; }
    .case-study-one .market-success .timeline ul li:nth-child(2n) .text{ padding-right: 0; padding-left: 30px; }

}

@media screen and (max-width: 1024px){
    

    /*Hero*/
    .case-study-one .hero{ height: auto; }
    .case-study-one .hero .content{ flex-direction: column; }
    .case-study-one .hero .text{ max-width: 100%; margin-top: 120px; }
    .case-study-one .hero .text .reviews{ margin-top: 40px; }
    .case-study-one .hero .numbers{ position: relative; right: auto; left: 0; top: 0; margin-top: -250px; }
    .case-study-one .hero .cards{ position: relative; top: 0; left: auto; margin-left: 0; right: -100px; }

    .case-study-one .hero .circle{ width: 800px; height: 800px; margin-left: -400px; margin-bottom: 50px; }

    /*Market Success*/    
    .case-study-one .market-success .head{ padding: 60px 0 40px; }
    .case-study-one .market-success .head .title{ font-size: 38px; }
    .case-study-one .market-success .head .description{ font-size: 16px; }
    .case-study-one .market-success .head .description span{ display: inline; }

    .case-study-one .market-success .timeline .section-title{ margin-bottom: 0; }

    .case-study-one .market-success .timeline ul{ padding: 30px 0; }
    .case-study-one .market-success .timeline ul li{ max-width: 600px; margin: 0 auto 40px; }
    .case-study-one .market-success .timeline ul li,
    .case-study-one .market-success .timeline ul li:nth-child(2n){ flex-direction: column; }

    .case-study-one .market-success .timeline ul li .main-image{ margin-bottom: 30px; width: 100%; }
    .case-study-one .market-success .timeline ul li .text{ width: 100%; }
    .case-study-one .market-success .timeline ul li .text p{ font-size: 14px; padding-right: 0; }
    
    .case-study-one .market-success .timeline ul li .text{ padding-right: 0; }
    .case-study-one .market-success .timeline ul li:nth-child(2n) .text{ padding-right: 0; padding-left: 0; }

    .case-study-one .market-success .big-quote{ padding: 170px 0 30px; }
    .case-study-one .market-success .big-quote .card{ bottom: -80px; }

    .case-study-one .market-success .quotes{ padding: 60px 0; }

    /*Conclusion*/
    .case-study-one .conclusion{ padding-bottom: 60px; }
    .case-study-one .conclusion .head .title{ font-size: 24px; }
    .case-study-one .conclusion .head .title span{ display: inline; }
    .case-study-one .conclusion .head .description{ font-size: 14px; }
    .case-study-one .conclusion .head .description span{ display: inline; }
    .case-study-one .conclusion .conclusion-image{ width: 100%; height: auto; }

}

@media screen and (max-width: 767px){

    /*Hero*/
    .case-study-one .hero .cards{ top: 0; margin-left: 0; }
    .case-study-one .hero .cards figure img{ width: 100%; }
    .case-study-one .hero .cards .card-one{ width: 310px; left: 0; }
    .case-study-one .hero .cards .card-two{ width: 250px; left: 90px; top: -90px; }
    .case-study-one .hero .cards .card-three{ width: 190px; left: 200px; top: -130px; }

    .case-study-one .hero .numbers{ margin-top: -290px; margin-bottom: 50px; }
    .case-study-one .hero .numbers .title{ font-size: 14px; }
    .case-study-one .hero .numbers ul li .value{ font-size: 36px; }
    .case-study-one .hero .numbers ul li .label{ font-size: 13px; }
    
    .case-study-one .hero .circle{ width: 90%; height: 50%; margin-left: 0; left: 5%; bottom: -30%; }

    /*Market Success*/
    .case-study-one .market-success{ margin-top: -40px; }
    .case-study-one .market-success .head .title{ font-size: 32px; }
    .case-study-one .market-success .head .description{ font-size: 14px; }
    .case-study-one .market-success .big-quote{ font-size: 22px; }

}

@media screen and (max-width: 480px){

    /*Hero*/
    .case-study-one .hero .circle{ height: 30%; bottom: -20%; }

}