/***Authored by Preethi R***/
:root {
    --purple: #5A4D9F;
    --black: #252F40;
}
#heading-banner .breadcrumb {font-family: l-regular;color: #252F40;font-size: 12px;text-transform: uppercase;}
#heading-banner .breadcrumb li:nth-of-type(1) {opacity: 50%;}
#heading-banner .breadcrumb li:not(:nth-of-type(1))::before {content: ">";margin: 0 10px;}
#heading-banner .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;}
#heading-banner .item .button:hover{background-position: left bottom;color: #252F40;}
#heading-banner .item h1 {font-family: o-semibold;color: #5A4D9F;font-size: 36px;margin-bottom: 32px;}
#heading-banner .item p {font-family: l-regular;font-size: 24px;color: var(--black);line-height: 47px;margin-bottom: 50px;}
#heading-banner {padding-top: 150px;}
#heading-banner .item {transition: transform .6s ease-in-out, -webkit-transform .6s ease-in-out;}
#heading-banner .carousel-control {text-decoration: none;margin-top: -11px;}
#heading-banner .carousel-control .img-fluid {max-width: 40px;margin-left: 12px;}
#heading-banner #track-slider .mb-3{margin-bottom: 55px !important;}
/*Nav-section*/
.use-case #nav-section{position:sticky;top: 57px;z-index: 1;margin:50px 0 70px;background-color:#fff;}
.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;}
.amazon-continues p {font-family: l-regular;font-size: 20px;line-height: 30px;  margin-top: 66px;}
.growth-mindset {margin-top: 50px;}
.growth-mindset .growth-mindset-title h4{ margin-bottom: 40px;font-family: o-semibold;font-size: 40px;}
.growth-mindset .growth-mindset-title .how-okr-title{font-size: 48px;}
.growth-mindset .growth-mindset-title h2{font-size: 24px;}
.growth-mindset .growth-mindset-title p {margin-bottom: 50px;font-family: l-regular;font-size: 18px;}
.growth-mindset .card {align-items: center;padding: 40px 0;border-radius: 16px;box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);border: 0.2px solid #FFE2AC;}
.growth-mindset .col-lg-4:nth-of-type(1) .card {border-color: #FFE2AC;}
.growth-mindset .col-lg-4:nth-of-type(2) .card {border-color: #E9E7F8;}
.growth-mindset .col-lg-4:nth-of-type(3) .card {border-color: #BFF4D9;}
.growth-mindset .card img {min-width: 135px;margin-bottom: 10px;}
.growth-mindset .card .card-body{padding: 16px 35px;}
.growth-mindset .card .card-body h5 {text-align: center;font-family: l-bold;font-size: 30px;margin-bottom: 20px;}
.growth-mindset .card .card-body p {text-align: center;font-family: l-regular;font-size: 18px;}
.continuous-improvement {margin-top: 50px;}
.continuous-improvement .continuous-improvement-title h4 { margin-bottom: 40px;font-family: o-semibold;font-size: 48px;}
.continuous-improvement .continuous-improvement-title p {margin-bottom: 50px;font-family: l-regular;font-size: 18px;}
.continuous-improvement .card {padding: 40px 30px;box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);border-radius: 15px; }
.continuous-improvement .card-con-1{border-style: none;border-radius: 0px;box-shadow: 0px 13px 19px 0px #00000012;}
.continuous-improvement .card-con-1 h5.card-title{font-size: 24px !important;}
.continuous-improvement .card img {max-width: 65px;margin-bottom: 7px;}
.continuous-improvement .card .card-body{padding: 16px 0px;}
.continuous-improvement .card .card-body h5 {font-family: l-bold;font-size: 28px;margin-bottom: 20px;}
.continuous-improvement .card .card-body p {font-family: l-regular;font-size: 18px;color: #737373;} 
.continuous-improvement hr {border: none;border-top: 2px solid #5A4D9F;width: 56px;opacity: 100%;}  
#turning-point {padding-top: 100px;margin-bottom: 50px;}
#turning-point .container .turning-point-box {background-color: #252F40;border-radius: 24px;padding: 95px 78px 85px;}
#turning-point .turning-point-col {height: 522px;overflow: scroll;color: #ffffff;scrollbar-width: none;-ms-overflow-style: none;}
#turning-point .turning-point-col::-webkit-scrollbar {display: none;}
#turning-point .turning-point-col h4 {font-family: o-semibold;font-size: 48px;padding-bottom: 40px;margin: 0;}
#turning-point .turning-point-col h2 {font-family: o-semibold;margin: 0;font-size: 30px;}
#turning-point .turning-point-col p {font-family: l-regular;font-size: 20px;}
#turning-point .turning-point-col .turning-point-item:nth-last-child(n + 2) {padding-bottom: 30px;}
#turning-point .turning-point-col .turning-point-item .item-title {display: flex;align-items: center;margin-bottom: 20px;}
#turning-point .turning-point-col .turning-point-item .item-title img { margin-right: 20px;}  
/*Past puzzles*/
#past-puzzles h2 {font-family: o-semibold;font-size: 34px;color: var(--black);margin-bottom: 40px;}
#past-puzzles p {font-family: l-regular;font-size: 18px;color: var(--black);}
/*Problem areas*/
#turning-point {padding-top: 70px;}
#turning-point .turning-point-title h4 {margin-bottom: 50px;font-family: o-semibold;font-size: 34px;}
#turning-point .turning-point-title p {margin-bottom: 50px;font-family: l-regular;font-size: 18px;}
#turning-point .turning-point-footer p {margin-top: 50px;font-family: l-regular;font-size: 18px;}
#turning-point .card {align-items: center;padding: 30px 0;border-radius: 16px;box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);}
#turning-point .col:nth-of-type(1) .card {border-color: #FFE2AC;}
#turning-point .col:nth-of-type(2) .card {border-color: #E9E7F8;}
#turning-point .col:nth-of-type(3) .card {border-color: #BFF4D9;}
#turning-point .col:nth-of-type(4) .card {border-color: #F4BFD2;}
#turning-point .card img {max-width: 121px;margin-bottom: 45px;}
#turning-point .card .card-body .card-text {margin-top: 20px;}
#turning-point .card .card-body h5 {text-align: center;font-family: l-bold;font-size: 30px;color: var(--black);margin-bottom: 0;}
#turning-point .card .card-body p {text-align: center;font-family: l-regular;font-size: 20px;color: var(--black);line-height: 22.42px;}
/*Bouquet of benefits*/
#bouquet-of-benefits {padding-top: 100px;margin-bottom: 50px;}
#bouquet-of-benefits .container .benefits-box {background-color: #252F40;border-radius: 24px;padding: 20px 25px;}
#bouquet-of-benefits .benefits-col {height: 444px;overflow: scroll;color: #ffffff;scrollbar-width: none;-ms-overflow-style: none;}
#bouquet-of-benefits .benefits-col::-webkit-scrollbar {display: none;}
#bouquet-of-benefits .benefits-col h1 {font-family: o-semibold;font-size: 28px;padding-bottom: 20px;margin: 0;}
#bouquet-of-benefits .benefits-col h2 {font-family: o-semibold;margin: 0;font-size: 22px;}
#bouquet-of-benefits .benefits-col p {font-family: l-regular;font-size: 16px;}
#bouquet-of-benefits .benefits-col .benefits-item:nth-last-child(n + 2) {padding-bottom: 30px;}
#bouquet-of-benefits .benefits-col .benefits-item .item-title {display: flex;align-items: center;margin-bottom: 20px;}
#bouquet-of-benefits .benefits-col .benefits-item .item-title img { margin-right: 20px;}
/*Benefits example*/
.benefits-examples {margin-top: 100px;}
.benefits-examples h4 {font-family: o-semibold;font-size: 34px;color: var(--black);margin-bottom: 50px;}
.benefits-examples h5 {font-family: o-semibold;font-size: 18px;color: var(--black);margin-bottom: 20px;}
.benefits-examples ul {list-style: none;padding-left: 0;}
.benefits-examples li {font-family: l-regular;font-size: 18px;color: var(--black);position: relative;padding-left: 34px;padding-bottom: 10px;}
.benefits-examples li::before {content: '';position: absolute;left: 0;top: 0;width: 24px;height: 24px;background-size: cover;}
.benefits-examples li:nth-of-type(odd)::before {background-image: url('../img/account-tree.png');}
.benefits-examples li:nth-of-type(even)::before {background-image: url('../img/key-vertical.png');}
.benefits-examples span {font-family: o-semibold;font-size: 18px;color: var(--black);padding-right: 10px;}
/*Benefits evaluation*/
.benefits-evaluation {margin-top: 50px;}
.benefits-evaluation .benefits-evaluation-title h4 { margin-bottom: 40px;font-family: o-semibold;font-size: 34px;}
.benefits-evaluation .benefits-evaluation-title p {margin-bottom: 50px;font-family: l-regular;font-size: 18px;}
.benefits-evaluation .card {align-items: center;padding: 40px 0;border-radius: 16px;box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);}
.benefits-evaluation .col:nth-of-type(1) .card {border-color: #A7B5FF;}
.benefits-evaluation .col:nth-of-type(2) .card {border-color: #F3ACFF;}
.benefits-evaluation .col:nth-of-type(3) .card {border-color: #FFC15B;}
.benefits-evaluation .card img {max-width: 121px;margin-bottom: 45px;}
.benefits-evaluation .card .card-body{padding: 16px 35px;}
.benefits-evaluation .card .card-body h5 {text-align: center;font-family: l-bold;font-size: 30px;color: var(--black);margin-bottom: 20px;}
.benefits-evaluation .card .card-body p {text-align: center;font-family: l-regular;font-size: 20px;color: var(--black);}
/*Implementation*/
#implementation {padding-top: 70px;}
#implementation .implementation-title {margin-bottom: 80px;}
#implementation .implementation-title h4 {font-family: o-semibold;font-size: 34px;color: var(--black);}
#implementation .implementation-text h2 {font-family: o-semibold;font-size: 22px;margin-bottom: 35px;color: var(--black);}
#implementation .implementation-text p {font-family: l-regular;font-size: 18px;color: var(--black);}
#implementation .implementation-row {margin-bottom: 80px;}
#implementation .implementation-row.flex-lg-row-reverse .mb-4{text-align: right;}
/*Continuing journey*/
.continuing-journey h4 {font-family: o-semibold;font-size: 48px;color: var(--black);margin-bottom: 66px;}
.continuing-journey p {font-family: l-regular;font-size: 20px;color: var(--black);line-height: 30px;}
/*Trial footer*/
#trial {margin: 120px 0;}
#trial .trial-card {position: relative;background-color: #5A4D9F;border-radius: 36px;}
#trial .trial-card .trial-text {margin-bottom: 45%;padding: 35px 20px;text-align: center;}
#trial .trial-card .trial-text h2 {font-family: o-semibold;font-size: 30px;color: #FFFFFF;padding-bottom: 15px;}
#trial .trial-card .trial-text p {font-family: l-regular;padding-bottom: 30px;font-size: 20px;color: #FFFFFF;}
#trial .trial-card .trial-img-col img {max-width: 90%;position: absolute;bottom: 0;left: 0;padding-left: 0;}
#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 screen and (min-width: 768px) {
/*Turning point*/
#turning-point .card {padding: 20px 0;}
#turning-point .card img { max-width: 100px;margin-bottom: 20px}
/*Bouquet of benefits*/
#bouquet-of-benefits .container .benefits-box {padding: 65px 60px;}
#bouquet-of-benefits .benefits-col h4 {font-size: 34px;}
#bouquet-of-benefits .benefits-col h2 {font-size: 24px;}
#bouquet-of-benefits .benefits-col p {font-size: 18px;}
/*Benefits evaluation*/
.benefits-evaluation .card img {margin-bottom: 25px;}
.benefits-evaluation .card .card-body h5 {font-size: 26px;}
.benefits-evaluation .card .card-body p {font-size: 18px;}
/*Trial footer*/
#trial .trial-card .trial-text {margin-bottom: 0;padding: 60px 30px;}
#trial .trial-card .trial-img-col img {max-width: 50%;}
}
@media screen and (min-width: 992px) {
#heading-banner .item .button {font-size: 20px;}
#heading-banner .item h1 {font-size: 56px;}
#heading-banner .item p {font-size: 36px;}
/*Past puzzles*/
#past-puzzles h2 {font-size: 48px;}
#past-puzzles p {font-size: 20px;}
/*Turning point*/
#turning-point .card {padding: 50px 40px;}
#turning-point .turning-point-title h4 {font-size: 48px;}
#turning-point .turning-point-title p {font-size: 20px;}
#turning-point .turning-point-footer p {font-size: 20px;}
#turning-point .card img {max-width: 121px;margin-bottom: 45px;}
#turning-point .card .card-body {padding: 0;}
#turning-point .card .card-body h5 {font-size: 22px;}
#turning-point .card .card-body p {font-size: 15px;}
/*Bouquet of benefits*/
#bouquet-of-benefits .benefits-col {height: 522px;}
#bouquet-of-benefits .container .benefits-box {padding: 95px 78px 85px;}
#bouquet-of-benefits .benefits-title-text {margin: 0;padding-bottom: 40px;}
#bouquet-of-benefits .benefits-col h4 {font-size: 48px;padding-bottom: 40px;}
#bouquet-of-benefits .benefits-col h2 {font-size: 30px;}
#bouquet-of-benefits .benefits-col p {font-size: 20px;}
/*Benefits example*/
.benefits-examples h4 {font-size: 48px;}
.benefits-examples h5 {font-size: 20px;}
.benefits-examples li {font-size: 20px;}
/*Benefits evaluation*/
.benefits-evaluation .card img {margin-bottom: 25px;}
.benefits-evaluation .card .card-body h5 {font-size: 30px;}
.benefits-evaluation .card .card-body p {font-size: 20px;}
.benefits-evaluation .benefits-evaluation-title h4 {font-size: 48px;}
.benefits-evaluation .benefits-evaluation-title p {font-size: 20px;}
/*Evolution*/
#implementation .implementation-title h4 {font-size: 48px;}
#implementation .implementation-text h2 {font-size: 30px;}
#implementation .implementation-text p {font-size: 20px;}
/*Continuing journey*/
#continuing-journey h1 {font-size: 48px;}
#continuing-journey p {font-size: 20px;}
/*Trial footer*/
#trial .trial-card .trial-text {margin-bottom: 0;padding: 80px 50px;}
#trial .trial-card .trial-text h2 {font-size: 36px;}
#trial .trial-card .trial-text p {font-size: 24px;}
#trial .trial-card .trial-img-col img {max-width: 40%;}
#trial .trial-card .button {font-size: 20px;}
}
@media (min-width:992px) and (max-width:1199px){
#heading-banner .item .flex-md-row-reverse .col-lg-5{display: grid;align-content: center;}
#bouquet-of-benefits,#implementation{padding-top: 70px;}
.benefits-examples{margin-top: 70px;}
}
@media (min-width:768px) and (max-width:991px){
#heading-banner .item p{line-height: 34px;}
#heading-banner .item .flex-md-row-reverse .col-lg-5{display: grid;align-content: center;}
#bouquet-of-benefits {padding-top: 70px;}
.implementation-row.flex-lg-row-reverse .mb-4 {text-align: left !important;}
.continuing-journey h1{font-size: 36px;}
#trial {margin: 70px 0;}
}
@media (min-width:320px) and (max-width:767px){
#heading-banner .container,#past-puzzles .container,#turning-point .container, #bouquet-of-benefits .container,#implementation .container,#trial .container{width: 100%;max-width: 100%;padding: 0px 30px;}
#track-slider .col-8, #track-slider .col-4{width: 100%;}
#heading-banner #track-slider .mb-3 {margin-bottom: 10px !important;}
#track-slider .carousel-controls{margin-top: 30px;}
#track-slider .col-lg-5{order: 2;width: 100%;}
#track-slider .col-lg-5 .img-fluid{width: 100%;}
#heading-banner .item p{font-size: 16px;line-height: 24px;}
#heading-banner .item .button{display: block;width: fit-content;text-align: center;}
.use-case #nav-section{z-index: 1;top: 70px;}
.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;}
#turning-point .turning-point-col h1 {font-size: 36px!important;}
.growth-mindset .growth-mindset-title .how-okr-title {font-size: 36px!important;}
.continuous-improvement .continuous-improvement-title h1 {font-size: 36px!important;}
.growth-mindset .growth-mindset-title h1 {font-size: 36px!important;}
#past-puzzles p,#turning-point .turning-point-title p,#turning-point .card .card-body p,#turning-point .turning-point-footer p,.benefits-examples li,.benefits-evaluation .benefits-evaluation-title p,.benefits-evaluation .card .card-body p,#implementation .implementation-text p,.continuing-journey p{font-size: 16px;}
#bouquet-of-benefits .container .benefits-box{padding: 30px;}
#bouquet-of-benefits {padding-top: 70px;margin-bottom: 0px;}
.continuing-journey h1{font-size: 36px;}
#implementation .implementation-text h2{font-size: 30px !important;}
#trial {margin: 70px 0;}
#trial .trial-card .trial-text{padding: 45px 20px;margin-bottom: 20px;}
#trial .trial-card .trial-text h2{font-size: 36px;}
#trial .trial-card .trial-text p,#trial .trial-card .button{font-size: 16px;}
#trial .trial-card .trial-img-col img{display: none;}
}