/***Authored by Preethi R***/
@charset "utf-8";
/* CSS Document */
.use-case h1,.use-case h2, .use-case h4{font-family:o-semibold;}
.use-case p{font-family:l-regular;}
/*banner*/
.use-case #heading-banner .breadcrumb{background-color:transparent;content:">";margin-bottom:70px}
.use-case #heading-banner .breadcrumb li{text-transform:uppercase;font-size: 12px;color: #252F4096;}
.use-case #heading-banner .breadcrumb li:nth-child(2){color: #252F40;}
.use-case #heading-banner .breadcrumb li:not(:first-of-type)::before{content:">";margin:0 10px}
.use-case #heading-banner .carousel-item .button{color: #fff;background: linear-gradient(to left, #5A4D9F 50%, #FFC65A 50%);background-size: 200% 100%;background-position: right bottom;transition: all .5s ease-out;padding: 10px 45px;border-radius: 50px;font-family: l-bold;font-size: 20px;text-decoration: none;letter-spacing: 1.5px;}
.use-case #heading-banner .carousel-item .button:hover{background-position: left bottom;color:#252F40;}
.use-case #heading-banner .carousel-item h1{color:#5a4d9f;font-size:56px;margin-bottom:32px}
.use-case #heading-banner .carousel-item p{font-size: 36px;line-height:47px;margin-bottom:50px}
.use-case #heading-banner{padding:150px 0 25px}
.use-case #heading-banner .carousel-item{transition:transform .6s ease-in-out,-webkit-transform .6s ease-in-out}
.use-case #heading-banner .carousel-control{background:0 0;width:fit-content;height:fit-content;top:-99px;position:absolute;right:-12px;}
.use-case #heading-banner .left.carousel-control{right:40px;left:auto}
.use-case #heading-banner .carousel-control img{width: 40px;}
.use-case .mobile-only{display:none}
/*navbar*/
.use-case #nav-section{position:sticky;top:66px;z-index: 0;margin:50px 0 70px;background-color:#fff;z-index: 1;}
.use-case #nav-section .nav-pills{margin-left: 12px;width: 98%;}
.use-case .nav-sticky-shadow{box-shadow:0 1px 0 0 rgba(0,0,0,.1);margin-left: 12px;width: 98%;}
.use-case #nav-section .nav-pills li a{font-family:l-bold;color:#252F40;max-width:800px;background-color:transparent;padding: 8px 0px 2px;padding-bottom: 2px;font-size: 16px;border-bottom: 2px solid white;border-radius: 0px;margin-right: 50px;}
.use-case #nav-section .active,.use-case #nav-section .nav-pills li a:hover,.use-case #nav-section .nav-pills li a.active{border-bottom:2px solid #5a4d9f;padding-bottom:2px;color:#5a4d9f;border-radius: 0px;}
/*past puzzles and turning point*/
.use-case #turning-point{margin-bottom:70px}
.use-case #past-puzzles .past-puzzles-item{padding-bottom:2vw}
.use-case #past-puzzles .past-puzzles-item h4,.use-case #turning-point .turning-point-item h4{padding-bottom:25px;font-size:48px;color: #252F40;}
.use-case #past-puzzles .past-puzzles-item p,.use-case #turning-point .turning-point-item p{text-align:justify;font-size:20px}
/*benefits*/
.use-case #benefits{margin-bottom:80px}
.use-case #benefits .container .benefits-box{background-color:#252f40;border-radius:24px;padding:75px;}
.use-case #benefits .benefits-col{height:503px;overflow:scroll;color:#fff;scrollbar-width:none;-ms-overflow-style:none}
.use-case #benefits .benefits-col::-webkit-scrollbar{display:none}
.use-case #benefits .benefits-col h4{font-size:48px;padding-bottom:40px;margin:0;color: white;}
.use-case #benefits .benefits-col h2{font-size: 30px;color: white;}
.use-case #benefits .benefits-col p,.use-case #grading-system p,.use-case #okr-google .text p,.use-case #okr-google-description{font-size:20px}
.use-case #benefits .benefits-col .benefits-item:nth-last-child(n+2){padding-bottom:15px}
.use-case #benefits .benefits-col .benefits-item .item-title{display:flex;align-items:center;margin-bottom:15px}
.use-case #benefits .benefits-col .benefits-item .item-title img{margin-top:-7px;margin-right:20px}.use-case #grading-system h4{font-size:48px;padding-bottom:45px;color: #252F40;}
/*score*/
.use-case .scoreboard{display:flex;justify-content:center}
.use-case .scoreboard img{padding:6px}
.use-case .grading-purpose .purpose-container,.use-case .scores-container .score-wrapper{display:flex}
.use-case .scores-container .score-desc-wrapper{display:flex;flex-direction:column;align-items:center}
.use-case .scores-container .score-desc-wrapper.middle{margin-left: 40px;}
.use-case #grading-system .scores-container .score-desc-wrapper p{text-align:center;font-size:16px;max-width:245px;font-family: o-semibold;}
.use-case .scores-container .score-border{height:24.63px;border:1.64211px solid #fff;border-top:none;margin:15px 0 20px}
.use-case .scores-container .score-border.first,.use-case .scores-container .score-border.last{width:262.79px}
.use-case .scores-container .score-desc-wrapper.first{position:relative;right:13px}
.use-case .scores-container .score-border.middle{width:177.79px}
.use-case .scores-container .score-desc-wrapper.last{position:relative;left: 55px;}
.use-case .scores-container .score-border img{display:block;margin:auto}
.use-case .scores-container{border-radius:15px;background:linear-gradient(272.4deg,rgba(255,255,255,.1) .45%,rgba(255,255,255,.05) 96.32%);border:2px solid rgba(255,255,255,.25);padding:20px 100px 10px}
.use-case .score-card{background-color:#5a4d9f;padding:30px;border-radius:25px;color:#fff;margin-top:45px;margin-bottom:50px}
.use-case .score-card h2{margin:26px 0 19px;font-size: 39px;color: white;}
.use-case .score-label{text-align:center;margin-top:10px}
.use-case .score-label.last p{margin-left:20px}
.use-case .score-emoji{width:50px}
.use-case .score-text p{margin-bottom:20px}
.use-case .scores-container.scores-mobile{display:none}
/*grading*/
.use-case .grading-purpose{margin-top:50px}
.use-case .grading-purpose .purpose{box-shadow:0 20px 27px rgba(0,0,0,.05);border-radius:16px;padding:40px 35px;text-align:center}
.use-case .grading-purpose .purpose h2{margin:30px 0 20px;font-size: 30px;font-family: l-bold;}
.use-case .grading-purpose .purpose.ambition{border:.5px solid #ffe2ac;margin-right:13px}
.use-case .grading-purpose .purpose.learn{border:.5px solid #e9e7f8;margin-right:13px;min-height: 100%;}
.use-case .grading-purpose .purpose.flexibility{border:.5px solid #bff4d9;min-height: 100%;}
.use-case #okr-google .container{padding: 0px !important;}
.use-case #okr-google .text{display: grid;align-content: end;}
.use-case #okr-google .text h2{margin-bottom:35px;font-size: 30px;}
.use-case #okr-google .text p{margin-bottom: 0px;}
.use-case #okr-google .okr-google-title{margin-bottom:30px;margin-top:140px}
.use-case #okr-google .okr-google-title h4{font-size:48px;color: #252F40;}
.use-case #okr-google .okr-google-row{margin-bottom:80px}
.use-case #okr-google-description p:nth-of-type(n+1){margin-bottom:40px}
.use-case #trial{margin:120px 0}
/*trail card*/
.use-case #trial .trial-card{background-color:#5a4d9f;border-radius:36px;position:relative;}
.use-case #trial .trial-card .trial-text{margin:80px 0;text-align:center;position:relative}
.use-case #trial .trial-card .trial-text h2{padding-bottom:30px;font-size:36px;color:#fff}
.use-case #trial .trial-card .trial-text p{padding-bottom:46px;font-size:24px;color:#fff}
.use-case .trial-text-medium{font-family:medium,sans-serif}
.use-case #trial .trial-card .trial-img-col{position:absolute;bottom:0;left:0;padding-left:0}
.use-case #trial .trial-card .button{color: #5a4d9f;background: linear-gradient(to right, #fff 50%, #FFC65A 50%);background-size: 202% 100%;background-position: right bottom;transition: all .5s ease-out;padding: 15px 35px;border-radius: 50px;font-family: l-bold;font-size: 20px;text-decoration: none;letter-spacing: 1.5px;}
.use-case #trial .trial-card .button:hover{background-position: left bottom;color: #2B2B2B;}
@media(min-width:992px) and (max-width:1199px){
.use-case .carousel-item .col-md-6:nth-child(2) {display: grid;align-items: center;}
.use-case .carousel-item .col-md-6:nth-child(2) img{width: 100%;}
.use-case .scoreboard img {width: 70px;}
.use-case .scores-container .score-desc-wrapper.first {right: 20px;}
.use-case .scores-container .score-border.first, .use-case .scores-container .score-border.last {width: 217.79px;}
.use-case .scores-container .score-desc-wrapper.middle {margin-left: 0px;}
.use-case .scores-container .score-border.middle {width: 145.79px;}
.use-case .scores-container .score-desc-wrapper.last {left: 17px;}
.use-case .okr-google-row img {width: 100%;}
}
@media(min-width:768px) and (max-width:991px){
.use-case .carousel-item .col-md-6 {width: 100%;}
.use-case .carousel-item .col-md-6:nth-child(2) img{width: 100%;}
.use-case .scoreboard img {width: 55px;}
.use-case .scores-container .score-desc-wrapper.first {right: 58px;}
.use-case .scores-container .score-border.first, .use-case .scores-container .score-border.last {width: 165.79px;}
.use-case .scores-container .score-desc-wrapper.middle {margin-left: -5px;}
.use-case .scores-container .score-border.middle {width: 115.79px;}
.use-case .scores-container .score-desc-wrapper.last {left: 50px;}
.use-case .grading-purpose .purpose.ambition {min-height: 100%;}
.use-case #okr-google .okr-google-title {margin-bottom: 30px;margin-top: 120px;}
.use-case #okr-google .okr-google-row img {width: 100%;}
.use-case #okr-google .okr-google-row:nth-child(2) .col-md-6:nth-child(2),.use-case #okr-google .okr-google-row:nth-child(4) .col-md-6:nth-child(2),.use-case #okr-google .okr-google-row:nth-child(3) .col-md-6:nth-child(1){display: grid;align-items: center;}
}
@media(min-width:320px) and (max-width:767px){
.use-case #heading-banner .container{width: 100%;max-width: 100%;padding: 0px 30px;}
.use-case #heading-banner .col-md-6{width: 100%;}
.use-case #heading-banner .carousel-item .button{display: block;width: fit-content;text-align: center;}
.use-case .carousel-item .col-md-6:nth-child(2) img{width: 100%;margin-top: 40px;}
.use-case #heading-banner .carousel-item h1 {font-size: 36px;margin-bottom: 15px;}
.use-case #heading-banner .carousel-item p {font-size: 16px;line-height: 1.4;}
.use-case #heading-banner .carousel-control{top: -50px}
.use-case #nav-section{z-index: 1;}
.use-case #nav-section .container{width: 100%;max-width: 100%;padding: 0px 45px;}
.use-case #nav-section .nav-pills{padding-right: 0px;margin: 0px;width: 100%;}
.use-case #nav-section .nav-pills li{width: 100%;text-align: center;}
.use-case #nav-section .nav-pills li a{margin-right: 0px;}
.use-case #past-puzzles .container,.use-case #turning-point .container,.use-case #benefits .container,.use-case #grading-system .container,.use-case #trial .container,.use-case #okr-google-description .container{width: 100%;max-width: 100%;padding: 0px 30px;}
.use-case #past-puzzles .past-puzzles-item h1, .use-case #turning-point .turning-point-item h1{font-size: 36px;}
.use-case #past-puzzles .past-puzzles-item p, .use-case #turning-point .turning-point-item p{font-size: 16px;}
.use-case #benefits .container .benefits-box{padding: 30px;}
.use-case #benefits .benefits-col h1{font-size: 36px;}
.use-case #benefits .benefits-col h2{font-size: 24px;}
.use-case #benefits .benefits-col p, .use-case #grading-system p, .use-case #okr-google .text p, .use-case #okr-google-description{font-size: 16px;}
.use-case #grading-system h1{font-size: 36px;}
.use-case .scores-container.scores-desktop{display: none;}
.use-case .scores-container.scores-mobile{display: block;}
.use-case .scoreboard img {width: 45px;}
.use-case .scores-container .score-desc-wrapper.first {right: 0px;}
.use-case .scores-container .score-border.first, .use-case .scores-container .score-border.last {width: 137.79px;}
.use-case .scores-container .score-desc-wrapper.middle {margin-left: 0px;}
.use-case .scores-container .score-border.middle {width: 92.79px;}
.use-case .scores-container .score-desc-wrapper.last {left: 0px;}
.use-case .grading-purpose .purpose-container{display: block;}
.use-case .grading-purpose .purpose-container .col-md-4{margin-bottom: 20px;width: 100%;}
.use-case .grading-purpose .purpose-container .col-md-4 div{margin-right:0px;}
.use-case #okr-google .okr-google-title {margin-bottom: 20px;margin-top: 70px;}
.use-case #okr-google .okr-google-title h1 {font-size: 36px;}
.use-case #okr-google .okr-google-row{margin-bottom: 60px;}
.use-case #okr-google .okr-google-row:nth-child(3) .col-md-6:nth-child(1){order: 2;}
.use-case #okr-google .col-md-6{width: 100%;}
.use-case #okr-google .col-md-6 img{width: 100%;margin-top: 50px;}
.use-case #trial {margin: 60px 0;}
.use-case #trial .trial-card .trial-img-col{display: none}
.use-case #trial .trial-card .col-md-8{margin-left: 0px;width: 100%;padding: 0px 30px;}
.use-case #trial .trial-card .trial-text p,.use-case #trial .trial-card .button {font-size: 16px;}
}