* {box-sizing: border-box; padding: 0; margin: 0;}
body {color: #01081B; font-size: 16px; font-family: 'Outfit'; font-weight: 400;}
.ccl-container {width: 1300px; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto;}
.ccl-main-wrap h1 {font-size: 64px; line-height: 1; margin: 0;}
.ccl-main-wrap h1 span {display: block; width: 100%; font-size: 40px;}
.ccl-main-wrap .bg-cover {background-size: cover;}
.ccl-main-wrap .bg-no-repeat {background-repeat: no-repeat;}
.ccl-main-wrap .flex {display: flex;}
.ccl-main-wrap .items-center {align-items: center;}
.ccl-main-wrap .justify-between {justify-content: space-between;}
.ccl-main-wrap .justify-center {justify-content: center;}
.ccl-main-wrap .flex-wrap {flex-wrap: wrap;}
.ccl-main-wrap .text-center {text-align: center;}
.ccl-main-wrap .relative {position: relative;}
.ccl-main-wrap .blue-color {color: #0094D9;}
.ccl-main-wrap img {max-width: 100%;}
.ccl-banner-content-block p {font-size: 18px; font-weight: 400; margin-bottom: 48px; color: #4D525F;}
.ccl-main-wrap .w-full {width: 100%;}

.ccl-main-wrap h1,
.ccl-main-wrap h2,
.ccl-main-wrap h3 {
    font-family: 'Urbanist';
    font-weight: bold;
}

.ccl-header {position: absolute; width: 100%; top: 0; left: 0; padding-top: 40px;}
.ccl-header .ccl-logo {width: 179px;}
.ccl-hero-banner {padding-top: 164px; padding-bottom: 54px;}
.ccl-banner-content-block {width: 55%;}
.ccl-banner-img-block {width: 45%;}
.ccl-main-wrap .btn-ccl {text-decoration: none; display: inline-block; font-weight: 600; font-size: 12px; padding: 13px 20px; border-radius: 4px; border: 1px solid #1E7CC1; letter-spacing: 2px;}
.ccl-main-wrap .decor-img-block {text-align: right; margin-top: -9px;}
.ccl-main-wrap .decor-img-block img {width: 558px;}
.ccl-main-wrap .ccl-sub-title {font-size: 18px;}
.ccl-main-wrap h2 {margin: 0; margin-bottom: 15px; font-size: 40px;}
.ccl-gap-top {padding-top: 80px;}
.ccl-gap-bottom {padding-bottom: 80px;}
.ccl-main-wrap .gap-sm-bottom {padding-bottom: 48px;}
.ccl-main-wrap .gap-sm-top {padding-top: 48px;}
.ccl-sub-title {font-weight: 400;}
.simplify-blocks>div {width: 24%; padding: 22px; border-radius: 16px;}
.simplify-blocks>div.combined-control {background-color: #FFF7EC;}
.simplify-blocks>div.smarter-utilization {background-color: #EEF9FE;}
.simplify-blocks>div.single-view-management {background-color: #F4EDFC;}
.simplify-blocks>div.spend-limit-control {background-color: #FFF4F4;}
.simplify-blocks-img {margin-bottom: 40px;}
.simplify-blocks-img img {max-height: 101px;}
.simplify-blocks h3 {font-size: 20px; margin: 0; margin-bottom: 10px;}
.simplify-blocks p {font-size: 16px; font-weight: 400; color: #4D525F; margin: 0;}
.understanding-blocks>div {width: 24%;}
.understanding-blocks h3 {font-size: 24px; margin: 0; margin-bottom: 16px;}
.understanding-combined-limit-wrap {padding-top: 33px; padding-bottom: 20px; background-color: #ffffff; -moz-box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.14); -webkit-box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.14); box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.14);}
.ccl-understanding-limit-block {font-weight: 400;}
.ccl-plus-block {position: absolute; top: 50%; right: -15px; transform: translateY(-50%);}
.ccl-equal-block {position: absolute; top: 35%; right: -15px; transform: translateY(-50%);}
.ccl-understanding-img-block {height: 124px; display: flex; align-items: end; justify-content: center; margin-bottom: 10px;}

.bulb-block {display: flex; align-items: center; padding: 14px 25px; border-left: 1px solid #FFCC00; width: 70%; margin: 0 auto; margin-top: 47px; background-color: #FDF4CB; font-size: 16px; color: #4E4E4E; font-weight: 500;}
.font-400 {font-weight: 400 !important;}
.keep-in-mind-block {width: 50%;}
.keep-in-mind-wrap {padding: 24px 0; background-color: #F7F7F7; border-radius: 16px; padding-top: 45px; width: 90%; margin: 0 auto;}
.keep-in-mind-block {padding: 0 42px; margin-bottom: 45px;}
.keep-in-mind-dot {width: 28px; height: 28px; border-radius: 100%; background-color: #ECF0FB; margin-bottom: 24px;}
.keep-in-mind-dot>span {display: block; border-radius: 100%; background-color: #2E68FD; width: 10px; height: 10px;}
.keep-in-mind-dot.green {background-color: #E5FCF2;}
.keep-in-mind-dot.green>span {background-color: #08A965;}
.keep-in-mind-dot.red {background-color: #FEEDED}
.keep-in-mind-dot.red>span {background-color: #FC4343}
.keep-in-mind-title {font-size: 16px; font-weight: bold; color: #4D525F; margin-bottom: 5px;}
.ccl-content-wrap h2 {margin-bottom: 32px;}
.ccl-benefits-wrap {margin-top: 90px;}
.ccl-tabs-and-accordion-wrap {margin-top: 90px; margin-bottom: 90px;}
.ccl-main-wrap .sr-only {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0);}
.ccl-main-wrap .tabs {display: flex; border-bottom: 2px solid #e5e7eb; justify-content: center; max-width: max-content; margin: 0 auto; margin-bottom: 1rem;}
.ccl-main-wrap .tab {background: none; border: none; padding: 12px 60px; font-size: 24px; font-weight: 400; cursor: pointer; border-bottom: 3px solid transparent;}
.ccl-main-wrap .tab[aria-selected="true"] {border-color: #473969; font-weight: 600; color: #473969;}
.ccl-main-wrap .tab:focus-visible {outline: 3px solid #2563eb; outline-offset: 2px;}
.ccl-main-wrap .accordion-item {border-bottom: 1px solid #e5e7eb; padding: 10px 0;}
.ccl-main-wrap .accordion-trigger {width: 100%; text-align: left; background: none; border: none; padding: 1rem 0; font-size: 18px; font-weight: 600; cursor: pointer; color: #483C65;}
.ccl-main-wrap .accordion-trigger[aria-expanded="true"] .ccl-accordion-arrow {transform: rotate(-90deg);}
.ccl-main-wrap .accordion-trigger:focus-visible {outline: 3px solid #2563eb;}
.ccl-main-wrap .tab-panel {padding-top: 1rem;}
.ccl-main-wrap .accordion-item h3 {margin: 0;}
.ccl-main-wrap .accordion-item p {font-weight: 400;}
.ccl-glow {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none;}
.ccl-main-wrap .faq-more {color: #1E7CC1; margin-top: 19px; font-weight: 600; font-size: 18px; display: flex; align-items: center; max-width: max-content; background-color: transparent;}
.ccl-main-wrap .bulb-block>img {margin-right: 5px;}
.ccl-main-wrap .hidden {display: none;}
.ccl-more-less-icon {margin-left: 6px;}
.ccl-more-less-icon>img {width: 20px;}

/* Understanding new style Starts */
/* wrapper */
.understanding-blocks-container {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* mobile default */
.understanding-scenario-block,
.understanding-blocks {
  width: 100%;
}

.understanding-scenario-block{
  width: 100%;
  flex-shrink:0;
  display:flex;
  justify-content:center;
}

.scenario-box{
  text-align:center;
  padding: 16px 0;
}

.scenario-title{
  font-family:'Outfit';
  font-weight:700;
  font-size:20px;
  margin-bottom:6px;
}

.scenario-desc {
  font-family:'Outfit';
  font-size: 20px;
  color: #000000;
  font-weight: 400;
}

/* Desktop */
@media (min-width:1201px){

  .understanding-blocks-container{
    flex-direction: row;
    gap: 0;
  }

  .understanding-scenario-block{
    width:120px;
    flex-shrink:0;
  }

  .understanding-blocks{
    flex:1;
    display:flex;
    flex-wrap:nowrap;
  }

  .understanding-blocks > div{
    flex:1;          /* each card takes equal remaining width */
    min-width:0;     /* prevents overflow */
  }

}
/* Understanding new style Ends */


@media(min-width: 767px) {
    .ccl-banner-content-block p {width: 70%;}
    .keep-in-mind-block:nth-of-type(odd) {border-right: 1px solid transparent;border-image: linear-gradient(180deg,#F5F5F5 0%,#CBCBCB 45.36%,#F5F5F5 100%) 1;}
    .ccl-benefits-wrap>div {width: 48%;}

    .ccl-content-wrap h2,
    .ccl-content-wrap p {
        width: 80%;
    }
}

@media(max-width: 1200px) {
    .ccl-container {width: 800px;}
    .understanding-blocks>div {width: 100%;}
    .ccl-plus-block {position: relative; top: auto; right: auto; transform: none; margin: 20px 0; margin-top: 30px;}
    .ccl-equal-block {position: relative; top: auto; right: auto; transform: none; margin: 20px 0; margin-top: 30px;}
    .understanding-blocks>div {margin-bottom: 15px;}

    .ccl-content-wrap h2, 
    .ccl-content-wrap p {
        width: 100%;
    }

    .bulb-block {width: 100%; font-size: 14px;}
    .bulb-block>img {width: 30px;}
    .understanding-combined-limit-wrap {-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}
    .ccl-main-wrap .decor-img-block {text-align: left;}
    .ccl-main-wrap .tab {font-size: 20px; padding: 12px 30px;}
    .ccl-main-wrap .accordion-trigger {font-size: 15px;}
    body {font-size: 14px;}
    .ccl-main-wrap .faq-more {font-size: 15px;}
    .ccl-main-wrap h1 {font-size: 36px;}
    .ccl-main-wrap h1 span {font-size: 25px;}
    .ccl-banner-content-block p {font-size: 16px;}
    .ccl-main-wrap h2 {font-size: 32px;}
    .ccl-main-wrap .ccl-sub-title {font-size: 16px;}
    .ccl-gap-bottom {padding-bottom: 60px;}
    .ccl-gap-top {padding-top: 60px;}
    .understanding-blocks h3 {font-size: 22px;}
}

@media(max-width: 767px) {
    .ccl-container {width: 100%;}
    .ccl-banner-content-block {width: 100%;}
    .ccl-banner-img-block {width: 100%; margin-top: 30px;}
    .simplify-blocks>div {width: 100%; margin-bottom: 15px;}
    .simplify-blocks>div:nth-last-child(1) {margin-bottom: 0;}
    .understanding-blocks>div:nth-last-child(1) {margin-bottom: 0;}
    .keep-in-mind-block {width: 100%; border-bottom: 1px solid #dddddd; padding-bottom: 30px;}
    .ccl-content-wrap {margin-bottom: 30px;}
    .simplify-blocks {flex-wrap: wrap;}
    .ccl-main-wrap .accordion {display: block;}
    .ccl-benefits-wrap {flex-wrap: wrap;}
    .ccl-main-wrap .tab {padding: 12px 5px;}
    .keep-in-mind-block:nth-last-of-type(1) {border-bottom: 0;}
}