/***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*/
#nav-section{position:sticky;top:66px;z-index: 0;margin:50px 0 70px;background-color:#fff;z-index: 1;}
#nav-section .nav-pills{margin-left: 12px;width: 98%;}
.nav-sticky-shadow{box-shadow:0 1px 0 0 rgba(0,0,0,.1);margin-left: 12px;width: 98%;}
#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;}
#nav-section .active,#nav-section .nav-pills li a:hover,#nav-section .nav-pills li a.active{border-bottom:2px solid #5a4d9f;padding-bottom:2px;color:#5a4d9f;border-radius: 0px;}
/*Planning stage*/
#planning-stage h2 {font-family: o-semibold;font-size: 36px;color: var(--black);padding-bottom: 25px;}
#planning-stage p {font-family: l-regular;font-size: 18px;color: var(--black);}
/*Problem areas*/
#problem-areas {padding-top: 70px;}
#problem-areas .title {margin-bottom: 61px;font-family: o-semibold;font-size: 36px;}
#problem-areas .card {align-items: center;padding: 40px 0;border-radius:16px;box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);}
#problem-areas .col:nth-of-type(1) .card {border-color: #FFE2AC;}
#problem-areas .col:nth-of-type(2) .card {border-color: #E9E7F8;}
#problem-areas .col:nth-of-type(3) .card {border-color: #BFF4D9;}
#problem-areas .card img {max-width: 121px; margin-bottom: 45px;}
#problem-areas .card .card-body {display: flex;flex-direction: column;justify-content: space-between;padding: 0;}
#problem-areas .card .card-body h5 {text-align: center;font-family: l-bold;font-size: 30px;color: var(--black);margin-bottom: 0;}
#problem-areas .card .card-body p {text-align: center;font-family: l-regular;font-size: 20px;color: var(--black);padding: 20px;}
/*Benefits*/
#benefits {margin-top: 150px;margin-bottom: 120px;}
#benefits .container .benefits-box {background-color: #252F40;border-radius: 24px;padding: 20px 25px;}
#benefits .benefits-col {height: 488px;overflow: scroll;color: #ffffff;scrollbar-width: none;-ms-overflow-style: none;}
#benefits .benefits-col .be-h{font-family: o-semibold;margin: 0;}
#benefits .benefits-col::-webkit-scrollbar {display: none;}
#benefits .benefits-col h1 {font-family:o-semibold;font-size: 38px;padding-bottom: 40px;margin: 0;}
#benefits .benefits-col h2 {font-family: o-semibold;margin: 0;font-size: 22px;}
#benefits .benefits-col p {font-family: l-regular;font-size: 16px;}
#benefits .benefits-col .benefits-item:nth-last-child(n + 2) {padding-bottom: 30px;}
#benefits .benefits-col .benefits-item .item-title {display: flex;align-items: center;margin-bottom: 20px;}
#benefits .benefits-col .benefits-item .item-title img {margin-right: 20px;}
/*Implementation*/
#implementation .implementation-title {margin-bottom: 80px;margin-top: 140px;}
#implementation .implementation-title .im-h {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;}
/*Strategy execution*/
#implementation .strategy-execution ul {list-style: none;padding-left: 0;}
#implementation .strategy-execution li {font-family: l-regular;font-size: 18px;color: var(--black);position: relative;padding-left: 50px;padding-bottom: 40px;}
#implementation .strategy-execution li::before {content: '';position: absolute;left: 0;top: 0;width: 32px;height: 32px;
background-image: url('../img/check_circle.png');}
#implementation .strategy-execution .ho-h {font-family: o-semibold;font-size: 36px;color: var(--black);margin-bottom: 66px;}
#implementation .strategy-execution p {font-family: l-regular;font-size: 18px;color: var(--black);}
#implementation .mb-4{display: grid !important;align-items: end;}
/*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 (min-width:320px) and (max-width:767px){
#heading-banner .container,#planning-stage .container,#problem-areas .container,#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;}
.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;}
#problem-areas .card .card-body p{font-size: 16px !important;}
#planning-stage p{font-size: 16px;}
#benefits {margin-top: 70px;margin-bottom: 70px;}
#benefits .container .benefits-box {padding: 30px;}
#implementation .implementation-title {margin-top: 0px;}
#implementation .implementation-text h2{font-size: 30px !important;}
#implementation .implementation-text p{font-size: 16px !important;}
#implementation .strategy-execution li,#implementation .strategy-execution p{font-size: 16px;}
#trial {margin: 70px 0;}
#trial .trial-card .trial-img-col img{display: none;}
#trial .trial-card .trial-text{margin-bottom: 20px;padding: 70px 15px;}
#trial .trial-card .trial-text h1{font-size: 36px;}
#trial .trial-card .trial-text p,#trial .trial-card .button{font-size: 16px;}
}
@media screen and (min-width: 768px) {
#heading-banner .item p{line-height: 34px;}
/*Problem areas*/
#problem-areas .card {padding: 20px 10px;}
#problem-areas .card img {max-width: 100px;margin-bottom: 20px;}
#problem-areas .card .card-body h5 {font-size: 24px;}
#problem-areas .card .card-body p {font-size: 18px;}
/*Benefits*/
#benefits .container .benefits-box {padding: 65px 60px;}
#benefits .benefits-col h1 {font-size: 34px;}
#benefits .benefits-col h2 {font-size: 24px;}
#benefits .benefits-col p {font-size: 18px;}
#benefits {margin-top: 70px;margin-bottom: 70px;}
#implementation .implementation-title {margin-top: 0px;}
#implementation .mb-4{text-align: center;display: block;}
/*Trial footer*/
#trial {margin: 70px 0;}
#trial .trial-card .trial-text {margin-bottom: 0;padding: 60px 30px;}
#trial .trial-card .trial-img-col img {max-width: 50%;}
}
@media(min-width:992px) and (max-width:1199px){
#implementation .mb-4{display: grid;align-items: center;}
}
@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;line-height: 47px;}
/*Planning stage*/
#planning-stage h2 {font-size: 48px;}
#planning-stage p {font-size: 20px;}
/*Problem areas*/
#problem-areas .card {padding: 50px 10px;}
#problem-areas .title {font-size: 48px;}
#problem-areas .card img {max-width: 121px;margin-bottom: 45px;}
#problem-areas .card .card-body h5 {font-size: 30px;}
#problem-areas .card .card-body p {font-size: 20px;padding: 25px;}
/*Benefits*/
#benefits .container .benefits-box {padding: 95px 78px 85px;}
#benefits .benefits-col .be-h {font-size: 48px;padding-bottom: 75px;}
#benefits .benefits-col h2 {font-size: 30px;}
#benefits .benefits-col p {font-size: 20px;}
/*Implementation*/
#implementation .implementation-text {padding-right: 40px;}
#implementation .implementation-title .im-h {font-size: 48px;}
#implementation .implementation-text h2 {font-size: 30px;}
#implementation .implementation-text p {font-size: 20px;}
/*Strategy execution*/
#implementation .strategy-execution li {font-size: 20px;}
#implementation .strategy-execution .ho-h {font-size: 48px;}
#implementation .strategy-execution 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;}
}