body, p, div{
   line-height: 150%;
}
.font-barlow {
  font-family: 'Barlow', sans-serif;
}
.font-tajawal {
  font-family: 'Tajawal', sans-serif;
} 
.text-yellow{
  color: #FFCA00;
}
.f38{
  font-size: 38px;
}
.f32{
  font-size: 32px;
}
.f24{
  font-size: 24px;
}
.f20{
  font-size: 20px;
}
.f18{
  font-size: 18px;
}
.f16{
  font-size: 16px;
}
.f14{
  font-size: 14px;
}
.f12{
  font-size: 12px;
}
.lh-150{
  line-height: 150%;
}
.lh-125{
  line-height: 125%;
} 
.fw-400{
  font-weight: 400;
}
.fw-500{
  font-weight: 500;
}
.fw-600{
  font-weight: 600;
}
.fw-700{
  font-weight: 700;
}
.rounded-10{
  border-radius: 10px;
  overflow: hidden;
}

.hero {
  /* background-image: url(/case-study/mnc-motion-bank/img/hero-bg.png);
  background-size: cover; */
  background: linear-gradient(48deg, var(--color-azure-19, #152A4C) 55%, var(--color-orange-4984, rgba(219, 166, 33, 0.84)) 100%);
  background-repeat: no-repeat; 
} 
.hero-container {
  margin: 0;
  width: 100%;
} 
.hero-content-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 530px;
} 
.hero-content-container .img-content{
   display: none;
}
.hero-content-container .title-content{
  flex: 0 0 100%;
}
.hero-content-container .hero-icon-container{
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: flex;
  gap: 24px;
}
.hero-icon-container li{
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-content-container h1 {
  padding: 0;
}
.breadcrumb-container span {
  display: block;
  padding-top: 8px;
}
.section-title-container{
  margin-bottom: 16px;
}
p{
  margin-bottom: 16px;
}
p:last-child{
  margin-bottom: 0;
}
section.section-container{
  padding:40px 0;
  margin:0;
}
.section-background .section-inner-container{
  gap: 40px;
  justify-content: center;
}

.section-content-container.collaboration-container{
  gap: 96px; 
}
.section-project-summary{
  background: url(/case-study/mnc-motion-bank/img/bg-tantangan.jpg) no-repeat center right;
  background-size: cover;
}
.section-project-summary .section-title-container{
  margin-bottom: 40px;
}
.section-project-summary .challenges-container{
  gap: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.section-project-summary .challenges-container .challenges-item{
  border-radius: 10px;
  background: #FFF;
  padding:16px;
  flex:0 0 100%;
  display: flex;
  gap: 8px; 
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.section-challenge-solution{
    background:  linear-gradient(0deg, rgba(255, 255, 255, 0.00) -7.51%, #F3F3F3 92.41%);
}  
.section-result{
  background:  linear-gradient(180deg, #F0F9FF 0%, rgba(240, 249, 255, 0.00) 100%);
}
.challenge-solution-content {
  gap: 40px;
} 
.challenge-solution-content .left-content-container,
.challenge-solution-content .right-content-container{
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.challenge-solution-content .img-container img{
  border-radius: 10px;
  width: 100%;
}
.section-solution-container{
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.00) -7.51%, #F3F3F3 92.41%);
}
.challenge-solution-content .space-container{
  flex: 0 0 2px;
  height: 100%;
  background: #E7E7E7;
}
.section-solution-inner-container, .section-result-inner-container{
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
  
}
.section-result-inner-container .left-result-container, .section-result-inner-container .right-result-container{
  flex: 0 0 100%;
}
.section-result-inner-container  ul{
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.section-result-inner-container  ul li{
  display: flex;
  padding: 24px; 
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  border-radius: 10px;
  border: 1px solid #E6EDF2;
  background: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;  
}
.section-result-inner-container   ul li:before{
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url(/img/icon/icon-tick-circle.svg);
  background-size: contain;
  background-repeat: no-repeat;
}
.section-result-inner-container  ul li span{
  display: block; 
  flex: 0 0 calc(100% - 60px);
}
.section-solution-inner-container .section-solution-left-container,
.section-solution-inner-container .section-content-container {
  flex: 0 0 100%;
}


.section-inner-container.why-us-container{
  gap: 40px;
}
.solution-key-item{
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #E6EDF2;
}
.solution-key-item .solution-key-item-img{
  flex: 0 0 48px;
}
.solution-key-item .solution-key-item-content{
  flex: 0 0 calc(100% - 48px - 16px);
}
.solution-key-item-content h3{
  font-size: 18px;
  font-weight: 700;
}
.section-solution-inner-container{
  justify-content: space-between;
}

.why-us-container .right-content-container img{
  border-radius: 10px;
  height: 100%;
  width: 100%;
}
.section-why-us-inner-container{
  justify-content: center;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.section-why-us-inner-container .left-content-container,
.section-why-us-inner-container .right-content-container{
  flex: 0 0 100%;
}
.contact-cta-container{
  background: url(/case-study/mnc-motion-bank/img/bg-cta.png) no-repeat top left ;
  background-size: cover;
  padding: 15px 20px;
  border-radius: 10px;
  overflow: hidden;
  gap: 36px;
  flex-wrap: wrap;
}
.contact-cta-container .left-cta-container, .contact-cta-container .right-cta-container{
  flex: 0 0 100%;
  text-align: center;
}
 
.partnership-text{
  position: absolute;
  bottom:25px;
  left: 22px;
  right: 22px;
  border-radius: 10px;
  border: 1px solid #E6EDF2;
  background: var(--g1, linear-gradient(278deg, #E7A200 15.31%, #FFCA00 72.5%));
  padding: 16px;
  font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 27px */
color: #0E0C0A;
text-align: center;

}
.btn-white{
  border-radius: 8px;
  border: 1px solid  #0E0C0A;
  background: #FFF;
  padding:5px 18px;
}
.cta-header{
  margin-bottom:8px;
}
.btn-secondary-no-outline, .btn-secondary-outline, .btn-secondary-outline-white{
  height: auto;
}
.other-studi-kasus-wrapper{
  margin-bottom: 30px !important;
}
.other-studi-kasus-wrapper .slick-dots{
  bottom:-10px;
  position: static;
}
@media (min-width: 576px) {
  .right-item-collaboration, .left-item-collaboration{
    width: 422px;  
  } 
}
@media (min-width: 769px) {
  .f42-md{
    font-size: 42px;
  }
  .f40-md{
    font-size: 40px;
  }
  .f38-md{
    font-size: 38px;
  }
  .f30-md{
    font-size: 30px;
  }
  .f36-md{
    font-size: 36px;
  }
  .f24-md{
    font-size: 24px;
  }
  .f20-md{
    font-size: 20px;
  }
  .f18-md{
    font-size: 18px;
  }
  .hero-content-container .img-content{
    flex: 0 0 50%;
    display: block;
  }
  .hero-content-container .title-content{
    flex: 0 0 50%;
  }
  .feature-item{
    flex: 0 0 calc(60% - (24px /2));
  }
  .challenge-solution-content .left-content-container{
    flex: 0 0 calc(50% - 40px);
    padding-right: 40px;
    border-right: 1px solid #E7E7E7;
  }
  .challenge-solution-content .right-content-container{
    flex: 0 0 calc(50% - 40px);
  }
  .grid-container {
    width: 910px;
  } 
  .right-item-collaboration{
    float: right;
    margin-top: 60px;
    margin-bottom: 0;
  }
  .left-item-collaboration{
    float: left;
  }
  .left-item-collaboration:last-child{
    margin-bottom: 0; 
  }
  .item-collaboration-container, .left-item-collaboration{
    position: relative;
  }
  .challenge-solution-content {
    gap: 40px;
  } 
  .left-item-collaboration .root-item-container{
    right: -50px;
    top: 50%;
    transform: translateY(-50%);
  }
  .right-item-collaboration .root-item-container{
    left: -49px;
    top: 50%;
    transform: translateY(-50%);
  }
  section.section-container{
    padding:80px 0;
    margin:0;
  }
  .grid-item{
    font-size: 18px;
    padding:16px 24px;
  }

  .section-project-summary .challenges-container .challenges-item{
    flex:0 0 calc((50%) - 12px);
  }
  .section-solution-inner-container .section-solution-left-container {
    flex: 0 0 55%;
  }
  .section-solution-inner-container .section-content-container {
    flex: 0 0 45%;
  }
  .contact-cta-container .left-cta-container{
    flex: 0 0 161px;
  }
  .contact-cta-container .right-cta-container{
    flex: 0 0 calc(100% - (161px + 36px ));
    text-align: left;
  }
  .contact-cta-container{
    background: url(/case-study/mnc-motion-bank/img/bg-cta.png) no-repeat center center;
    padding: 36px 50px;
  }
  .section-background .section-inner-container .left-container{
    flex: 0 0  calc(100% - (511px + 40px));
  }
  .section-background .section-inner-container .right-container{
    flex:0 0 511px;
  }
}
@media (min-width: 992px) {
  .hero-content-container .img-content{
    flex: 0 0 50%;
    display: block;
  }
  .hero-content-container .title-content{
    flex: 0 0 50%; 
  }
  .hero{
    height: auto
  }
  .hero-content-container{
    height: auto;
    justify-content: center;
  }
 
   
  .hero-content-container h1{
    margin-bottom: 16px;
  }
  .section-project-summary .challenges-container .challenges-item{
    flex:0 0 calc((100% / 3) - ((24px * 2) / 3));
  }
  .section-solution-inner-container .section-solution-left-container {
    flex: 0 0 680px;
  }
  .section-solution-inner-container .section-content-container {
    flex: 0 0 calc(100% - 680px - 60px);
  }
  .section-result-inner-container .left-result-container {
    flex: 0 0 600px;
  }
  .section-result-inner-container .right-result-container{
    flex: 0 0 calc(100% - 600px - 60px);
  }
  .section-why-us-inner-container .left-content-container{
    flex: 0 0 540px;
  }
  .section-why-us-inner-container .right-content-container{
    flex: 0 0 calc(302px);
  }
}