/* Hero */
.case-study-myrow .rowing-hero{ background: var(--black); color: var(--white); padding: 200px 0 0; position: relative; z-index: 20; }

.case-study-myrow .rowing-hero .head{ text-align: center; margin-bottom: 70px; position: relative; z-index: 20; }
.case-study-myrow .rowing-hero .head .label{ text-transform: uppercase; font-size: 13px; background: linear-gradient(90deg, #3E378B 5.95%, #3159F3 97.58%); display: inline-block; padding: 1px; border-radius: 30px; margin-bottom: 20px; }
.case-study-myrow .rowing-hero .head .label span{ display: inline-block; padding: 6px 25px; border-radius: 30px; background: var(--black); }
.case-study-myrow .rowing-hero .head .title{ letter-spacing: -1px; position: relative; font-family: var(--hanken); font-size: 52px; font-weight: 600; margin-bottom: 30px; }
.case-study-myrow .rowing-hero .head .title span{ display: block; }
.case-study-myrow .rowing-hero .head .description{ font-size: 17px; font-weight: 300; line-height: 1.7; max-width: 700px; margin: 0 auto; }
.case-study-myrow .rowing-hero .head .button{ margin-top: 40px; }

.case-study-myrow .rowing-hero .rowing-image{ width: 100%; max-width: 950px; margin: 0 auto; line-height: 0; }
.case-study-myrow .rowing-hero .rowing-image img{ width: 100%; }

.case-study-myrow .rowing-hero .rowing-stats{ display: flex; justify-content: space-between; position: relative; }
.case-study-myrow .rowing-hero .metric{ width: 300px; position: absolute; }
.case-study-myrow .rowing-hero .metric .box-border{ background: linear-gradient(88.91deg, #13139F -6.7%, #879FFF 48.17%, #080876 101.95%); padding: 1px; border-radius: 20px; }
.case-study-myrow .rowing-hero .metric .box-content{ display: flex; align-items: flex-start; flex-direction: column; justify-content: flex-start; text-align: left; padding: 20px; background: #09051f; border-radius: 20px; height: 100%; }
.case-study-myrow .rowing-hero .metric .box-content .value{ font-size: 62px; background: linear-gradient(80.75deg, #B8B2FF 17.92%, #3158F3 69.84%); color: transparent; background-clip: text; font-weight: 600; letter-spacing: -1px; }
.case-study-myrow .rowing-hero .metric .box-content .description{ font-size: 13px; color: #D7D7D7; font-weight: 300; line-height: 1.6; margin-top: 10px; }
.case-study-myrow .rowing-hero .metric .box-content .description span{ display: block; }

.case-study-myrow .rowing-hero .metric.improvement{ top: -30px; left: 0; }
.case-study-myrow .rowing-hero .metric.code{ top: -30px; right: 0; }
.case-study-myrow .rowing-hero .metric.issue{ bottom: -30px; left: 50%; transform: translateX(-50%); }

/* Framework*/
.case-study-myrow .framework{ background: var(--black) url("../../img/accelerate-ai/bg-framework.jpg"); background-size: cover; background-position: center; color: var(--white); padding: 120px 0 80px; text-align: center; position: relative; }
.case-study-myrow .framework:before{ content: ""; display: block; width: 100%; height: 300px; position: absolute; bottom: 0; left: 0; background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(13,13,13,1) 100%); }

.case-study-myrow .framework .content{ display: flex; align-items: center; justify-content: center; flex-direction: column; }
.case-study-myrow .framework .title{ font-size: 48px; font-weight: bold; font-family: var(--hanken); letter-spacing: -1px; max-width: 850px; margin: 0 auto 30px; }
.case-study-myrow .framework .title span{ display: block; }
.case-study-myrow .framework .description{ font-size: 16px; font-weight: 300; max-width: 700px; margin: 0 auto 30px; line-height: 1.6; }
.case-study-myrow .framework .button{ margin-top: 40px; }

/* Challenge */
.case-study-myrow .challenge{ background: var(--black); color: var(--white); padding: 140px 0 100px; position: relative; }
.case-study-myrow .challenge .content{ display: flex; justify-content: space-between; }

.case-study-myrow .challenge .left{ max-width: 550px; }
.case-study-myrow .challenge .left .label{ text-transform: uppercase; font-size: 13px; background: linear-gradient(90deg, #3E378B 5.95%, #3159F3 97.58%); display: inline-block; padding: 1px; border-radius: 30px; margin-bottom: 20px; }
.case-study-myrow .challenge .left .label span{ display: inline-block; padding: 6px 25px; border-radius: 30px; background: var(--black); }
.case-study-myrow .challenge .left .title{ font-size: 48px; font-weight: normal; letter-spacing: -1px; position: relative; margin-bottom: 30px; line-height: 1.2; }
.case-study-myrow .challenge .left .title strong{ font-style: italic; font-weight: 600; }
.case-study-myrow .challenge .left .title span{ display: block; }
.case-study-myrow .challenge .left .description{ line-height: 1.6; font-weight: 300; max-width: 430px; }

.case-study-myrow .challenge .challenge-list{ display: flex; justify-content: stretch; position: relative; z-index: 20; flex-wrap: wrap; max-width: 500px; }
.case-study-myrow .challenge .challenge-list li{ width: 50%; padding: 10px; }
.case-study-myrow .challenge .challenge-list li .box-border{ background: radial-gradient(177.99% 105.81% at 50.18% 100%, rgba(255, 255, 255, 0) 0%, rgba(181, 192, 255, 0.2) 100%); height: 100%; padding: 1px; border-radius: 20px; }
.case-study-myrow .challenge .challenge-list li .box-content{ display: flex; align-items: flex-start; flex-direction: column; justify-content: space-between; text-align: left; padding: 20px; background: #02010C; border-radius: 20px; height: 100%; box-shadow: 0 23px 38.3px 0 #FFFFFF0D inset; }
.case-study-myrow .challenge .challenge-list li .box-content figure{ height: 35px; }
.case-study-myrow .challenge .challenge-list li .box-content figure img{ width: auto; height: 100%; }
.case-study-myrow .challenge .challenge-list li .box-content .description{ font-size: 13px; color: var(--white); font-weight: 300; line-height: 1.6; }
.case-study-myrow .challenge .challenge-list li .box-content .description strong{ font-weight: bold; display: block; }

    .case-study-myrow .challenge .challenge-list li.code figure{}
    .case-study-myrow .challenge .challenge-list li.mountain figure{ height: 40px; }
    .case-study-myrow .challenge .challenge-list li.people figure{}
    .case-study-myrow .challenge .challenge-list li.shield figure{ height: 40px; }


/* The Solution */
.case-study-myrow .solution{ background: var(--black); color: var(--white); padding: 140px 0 100px; position: relative; }
.case-study-myrow .solution .head{ display: flex; flex-direction: column; align-items: center; margin-bottom: 100px; }
.case-study-myrow .solution .head .label{ text-transform: uppercase; font-size: 13px; background: linear-gradient(90deg, #3E378B 5.95%, #3159F3 97.58%); display: inline-block; padding: 1px; border-radius: 30px; margin-bottom: 20px; text-align: center; }
.case-study-myrow .solution .head .label span{ display: inline-block; padding: 6px 25px; border-radius: 30px; background: var(--black); }
.case-study-myrow .solution .head .title{ font-size: 48px; font-weight: bold; letter-spacing: -1px; position: relative; margin-bottom: 30px; line-height: 1.2; text-align: center; }
.case-study-myrow .solution .head .title span{ display: block; }
.case-study-myrow .solution .head .description{ font-size: 18px; font-weight: 300; line-height: 1.6; max-width: 800px; margin: 0 auto; text-align: center; }

.case-study-myrow .solution .items-list{ display: flex; flex-direction: column; max-width: 1024px; margin: 0 auto; }
.case-study-myrow .solution .items-list li{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 50px; }
.case-study-myrow .solution .items-list li .left{ width: 300px; font-weight: 600; font-size: 24px; position: relative; }
.case-study-myrow .solution .items-list li .left span{ display: block; }
.case-study-myrow .solution .items-list li .right{ width: 800px; line-height: 1.6; font-weight: 300; font-size: 17px; }

.case-study-myrow .solution .items-list li.secure .left:before{ content: ""; display: block; width: 100px; height: 100px; background: url("../../img/cases/myrow/bg-shield.svg") no-repeat center center; background-size: contain; position: absolute; top: -24px; left: -70px; }
.case-study-myrow .solution .items-list li.cross .left:before{ content: ""; display: block; width: 100px; height: 100px; background: url("../../img/cases/myrow/bg-people.svg") no-repeat center center; background-size: contain; position: absolute; top: -24px; left: -70px; }
.case-study-myrow .solution .items-list li.tools .left:before{ content: ""; display: block; width: 100px; height: 100px; background: url("../../img/cases/myrow/bg-wrench.svg") no-repeat center center; background-size: contain; position: absolute; top: -24px; left: -70px; }

.case-study-myrow .solution .logos-list{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 30px; margin-top: 30px; }
.case-study-myrow .solution .logos-list li{}
.case-study-myrow .solution .logos-list li figure{}
.case-study-myrow .solution .logos-list li figure img{ width: 100%; }

    .case-study-myrow .solution .logos-list li.block{ width: 45px; }
    .case-study-myrow .solution .logos-list li.gpt{ width: 30px; }
    .case-study-myrow .solution .logos-list li.ani{ width: 35px; }
    .case-study-myrow .solution .logos-list li.copilot{ width: 35px; }
    .case-study-myrow .solution .logos-list li.rabbit{ width: 160px; }
    .case-study-myrow .solution .logos-list li.grafana{ width: 110px; }
    .case-study-myrow .solution .logos-list li.sonarqube{ width: 120px; position: relative; top: -3px; }
    .case-study-myrow .solution .logos-list li.devlake{ width: 160px; }

/* Impact */
.case-study-myrow .impact{ background: var(--black); color: var(--white); padding: 140px 0 100px; position: relative; }

.case-study-myrow .impact .head{ display: flex; flex-direction: column; align-items: center; margin-bottom: 50px; }
.case-study-myrow .impact .head .label{ text-transform: uppercase; font-size: 13px; background: linear-gradient(90deg, #3E378B 5.95%, #3159F3 97.58%); display: inline-block; padding: 1px; border-radius: 30px; margin-bottom: 20px; text-align: center; }
.case-study-myrow .impact .head .label span{ display: inline-block; padding: 6px 25px; border-radius: 30px; background: var(--black); }
.case-study-myrow .impact .head .title{ font-size: 48px; font-weight: bold; letter-spacing: -1px; position: relative; margin-bottom: 30px; line-height: 1.2; }

.case-study-myrow .impact .impact-list{ display: flex; justify-content: stretch; position: relative; z-index: 20; }
.case-study-myrow .impact .impact-list li{ width: 33.3333%; padding: 10px; }
.case-study-myrow .impact .impact-list li .box-border{ background: radial-gradient(177.99% 105.81% at 50.18% 100%, rgba(255, 255, 255, 0) 0%, rgba(181, 192, 255, 0.2) 100%); height: 100%; padding: 1px; border-radius: 20px; }
.case-study-myrow .impact .impact-list li .box-content{ display: flex; align-items: flex-start; flex-direction: column; justify-content: flex-start; text-align: left; padding: 30px 25px 40px; background: #02010C; border-radius: 20px; height: 100%; box-shadow: 0 23px 38.3px 0 #FFFFFF0D inset; }
.case-study-myrow .impact .impact-list li .box-content .top{ display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 40px; }
.case-study-myrow .impact .impact-list li .box-content .top .value{ background: #1d1c26; display: flex; align-items: center; padding: 13px 10px; border-radius: 10px; line-height: 0; }
.case-study-myrow .impact .impact-list li .box-content .top .value figure{ width: 20px; margin-right: 10px; }
.case-study-myrow .impact .impact-list li .box-content .top .value figure img{ width: 100%; }
.case-study-myrow .impact .impact-list li .box-content .top .value span{ color: #84FF8E; font-weight: bold; display: inline-block; line-height: 1; }
.case-study-myrow .impact .impact-list li .box-content .top .main-icon{ height: 35px; }
.case-study-myrow .impact .impact-list li .box-content .top .main-icon img{ width: auto; height: 100%; }
.case-study-myrow .impact .impact-list li .box-content .meta{}
.case-study-myrow .impact .impact-list li .box-content .meta .title{ font-weight: 600; font-size: 20px; margin-bottom: 15px; }
.case-study-myrow .impact .impact-list li .box-content .meta .description{ font-size: 13px; color: #ABABAB; font-weight: 300; line-height: 1.6; }

/* Native*/
.case-study-myrow .native{ background: var(--black); color: var(--white); padding: 20px 0 120px; text-align: center; position: relative; }
.case-study-myrow .native .content{ display: flex; align-items: center; justify-content: center; flex-direction: column; }
.case-study-myrow .native .label{ text-transform: uppercase; font-size: 13px; background: linear-gradient(90deg, #3E378B 5.95%, #3159F3 97.58%); display: inline-block; padding: 1px; border-radius: 30px; margin-bottom: 20px; text-align: center; }
.case-study-myrow .native .label span{ display: inline-block; padding: 6px 25px; border-radius: 30px; background: var(--black); }
.case-study-myrow .native .title{ font-size: 48px; font-weight: bold; font-family: var(--hanken); letter-spacing: -1px; max-width: 850px; margin: 0 auto 30px; }
.case-study-myrow .native .title span{ display: block; }
.case-study-myrow .native .description{ font-size: 16px; font-weight: 300; max-width: 700px; margin: 0 auto 30px; line-height: 1.6; }

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

    /* Hero */
    .case-study-myrow .rowing-hero .head .title{ font-size: 42px; }
    .case-study-myrow .rowing-hero .head .description{ font-size: 16px; }

    /* Framweork */
    .case-study-myrow .framework .title{ font-size: 42px; }
    .case-study-myrow .framework .description{ font-size: 15px; }

    /* Native */
    .case-study-myrow .native .title{ font-size: 36px; }
    .case-study-myrow .native .title span{ font-size: 40px; }
    .case-study-myrow .native .description{ font-size: 15px; }

    /* Challenge */
    .case-study-myrow .challenge .challenge-list .box-content figure{ height: 150px; }
    .case-study-myrow .challenge .challenge-list .box-content .description{ font-size: 14px; }
    .case-study-myrow .challenge .left{ max-width: 450px; }
    .case-study-myrow .challenge .left .title{ font-size: 38px; }
    .case-study-myrow .challenge .left .description{ font-size: 16px; }
    .case-study-myrow .challenge .challenge-list li .box-content figure{ margin-bottom: 60px; }

    /* Solution */
    .case-study-myrow .solution .head .title{ font-size: 42px; }
    .case-study-myrow .solution .head .description{ font-size: 17px; }
    .case-study-myrow .solution .items-list{ padding-left: 70px; }
    .case-study-myrow .solution .items-list li .right{ font-size: 16px; }

    /* Impact */
    .case-study-myrow .impact .head .title{ font-size: 42px; }

}

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

    /* Hero */
    .case-study-myrow .rowing-hero{ padding: 140px 0 0; }
    .case-study-myrow .rowing-hero .head .title{ font-size: 36px; }
    .case-study-myrow .rowing-hero .head .title span{ display: inline; }
    .case-study-myrow .rowing-hero .head .description{ font-size: 14px; }
    .case-study-myrow .rowing-hero .rowing-image{ width: 90%; }
    .case-study-myrow .rowing-hero .metric .box-content .value{ font-size: 52px; }
    
    .case-study-myrow .rowing-hero .rowing-image{ display: none; }
    .case-study-myrow .rowing-hero .rowing-stats{ flex-direction: column; gap: 20px; padding-bottom: 60px; max-width: 500px; margin: 0 auto; }
    .case-study-myrow .rowing-hero .metric.improvement{ position: static; width: 100%; }
    .case-study-myrow .rowing-hero .metric.code{ position: static; width: 100%; }
    .case-study-myrow .rowing-hero .metric.issue{ position: static; width: 100%; transform: none; }
    .case-study-myrow .rowing-hero .metric .box-content .description span{ display: inline; }

    /* Framweork */
    .case-study-myrow .framework{ padding: 70px 0 40px; }
    .case-study-myrow .framework .title{ font-size: 32px; }

    /* Native */
    .case-study-myrow .native{ padding: 40px 0 0; }
    .case-study-myrow .native .title{ font-size: 28px; }
    .case-study-myrow .native .title span{ font-size: 32px; }

    /* Challenge */
    .case-study-myrow .challenge{ padding: 70px 0 0; }
    .case-study-myrow .challenge .content{ flex-direction: column; }
    .case-study-myrow .challenge .left{ max-width: 100%; }
    .case-study-myrow .challenge .left .title{ font-size: 32px; }
    .case-study-myrow .challenge .left .title span{ display: inline; }
    .case-study-myrow .challenge .left .description{ max-width: 100%; margin-bottom: 50px; font-size: 15px; }
    .case-study-myrow .challenge .challenge-list{ max-width: 100%; }
    .case-study-myrow .challenge .challenge-list li{ width: 50%; }

    /* Impact */
    .case-study-myrow .impact{ padding: 0 0 30px; }
    .case-study-myrow .impact .head{ margin-bottom: 10px; }
    .case-study-myrow .impact .head .title{ font-size: 36px; text-align: center; }
    .case-study-myrow .impact .impact-list{ flex-direction: column; }
    .case-study-myrow .impact .impact-list li{ width: 100%; }

    /* Solution */
    .case-study-myrow .solution{ padding: 80px 0 100px; }
    .case-study-myrow .solution .head .title{ font-size: 38px; }
    .case-study-myrow .solution .head .title span{ display: inline; }
    .case-study-myrow .solution .head .description{ font-size: 17px; }
    .case-study-myrow .solution .items-list{ padding-left: 70px; }
    .case-study-myrow .solution .items-list li{ flex-direction: column; justify-content: flex-start; align-items: flex-start; }
    .case-study-myrow .solution .items-list li .left{ margin-bottom: 20px; width: 100%; font-size: 20px; }
    .case-study-myrow .solution .items-list li .left span{ display: inline; }
    .case-study-myrow .solution .items-list li .right{ font-size: 14px; width: 100%; }
    
        .case-study-myrow .solution .items-list li.secure .left:before{ width: 50px; height: 50px; top: -14px; left: -67px; }
        .case-study-myrow .solution .items-list li.cross .left:before{ width: 50px; height: 50px; top: -14px; left: -67px; }
        .case-study-myrow .solution .items-list li.tools .left:before{ width: 50px; height: 50px; top: -14px; left: -67px; }
    
}

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

    /* Hero */
    .case-study-myrow .rowing-hero .head .title{ font-size: 30px; }
    .case-study-myrow .rowing-hero .metric .box-content .value{ font-size: 42px; }

    /* Challenge */
    .case-study-myrow .challenge .left .title{ font-size: 28px; }
    .case-study-myrow .challenge .challenge-list li{ width: 100%; }
    .case-study-myrow .challenge .left .description{ max-width: 100%; margin-bottom: 50px; font-size: 14px; }

    /* Solution */
    .case-study-myrow .solution .head .title{ font-size: 28px; }
    .case-study-myrow .solution .head .description{ font-size: 13px; }
    
}