section.section-container{
  padding:40px 0 40px;
  margin:0
}
.font-barlow {
  font-family: 'Barlow';
}
.font-tajawal {
  font-family: 'Tajawal';
}
.normal-weight {
  font-weight: var(--normal-font-weight) !important;
}
.hero {
  background-image: url(/case-study/jba-bastk/img/2025/main-banner-jba-ebastk.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  /* height: 730px; */
}
.hero-content-container{
  gap: 36px;
}
.hero-content-container .title-content{
  flex:0 0 100%;
}
.hero-content-container .img-content{
  flex:0 0 calc(100% - (635px + 36px)) ;
}
.breadcrumb-container span{
  margin-top:5px;
  display: block;
}
.breadcrumb-container .items-center img{
  margin:0 5px;
}
.border-radius-10{
  border-radius: 10px;
  overflow: hidden;
}
.gap-sm-40{
  gap: 40px;
}
.gap-sm-30{
  gap: 30px;
}
.gap-sm-24{
  gap: 24px;
}
.gap-sm-20{
  gap: 20px;
}
.gap-sm-16{
  gap: 16px;
}
.img-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.title-36-sm{
  font-size: 36px;
}
.title-24-sm{
  font-size: 24px;
}
section.jba-problem-container{
  background: url(/case-study/jba-bastk/img/2025/problem-challange.jpg) no-repeat center center;
  background-size: cover;
  background-repeat: no-repeat;
  padding:0;
  margin-bottom: 0px;
}
.jba-problem-container .section-content{
  position: relative;
  padding:80px 0;
}
.jba-problem-container .section-content::before{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: url(/case-study/jba-bastk/img/2025/bg-shape.png) no-repeat left; 
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.section-content .container{
  z-index: 2;
}
.jba-solution-list-item{
  flex:0 0  100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding:24px;
  border-radius: 10px;
  border: 1px solid #E6EDF2; 
  background: #FFF; 
  box-shadow: 0 0 40px 5px rgba(20, 99, 168, 0.03);

}
.technology-stack-container{
  background:  linear-gradient(180deg, #F0F9FF 0%, rgba(240, 249, 255, 0.00) 100%);
}
.technology-stack-list-item{
  flex:0 0  100%;
  border-radius: 10px;
  border: 1px solid #E6EDF2;
  background: #FFF;
  box-shadow: 0 0 40px 5px rgba(20, 99, 168, 0.03);
  padding:30px;
}
.technology-stack-list-item-img{
  margin-bottom: 40px;
}
.technology-conclusion-container{
  border-radius: 10px;
  border: 1px solid #E6EDF2;
  background: linear-gradient(180deg, rgba(255, 202, 0, 0.00) 0%, #FFCA00 241.82%);
  text-align: center;
  padding:30px;
}
.duration-container .section-content, .kendala-tantangan-container .section-content{
  gap: 40px;
}
.kendala-tantangan-container .section-content{
  justify-content: center;
}
.problem-list-container li{
  padding:24px;
  border-radius: 10px;
    border: 1px solid #E6EDF2;
    background: #FFF;
}
.problem-list-container li.custom-problem-item{
  border-radius: 10px;
  border: 1px solid #E6EDF2;
  background:  linear-gradient(180deg, rgba(255, 202, 0, 0.00) 0%, #FFCA00 241.82%);
  display: flex;
  gap: 10px;

}
.custom-problem-item::before{
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:  url(../../../img/icon/icon-tick-circle.svg) no-repeat center center;
  background-size: 100%;
  flex:0 0 20px;
  margin-top: 5px;
}
.result-hasil-container{
  background:  linear-gradient(0deg, rgba(255, 255, 255, 0.00) -7.51%, #F3F3F3 92.41%);
}
.result-hasil-table table th, .result-hasil-table table td{
  padding:16px 24px;
  line-height: 150%;  
  vertical-align: middle;
  white-space: nowrap;
  text-align: center;
}
.result-hasil-table table th{
  background: #3E3D3B;
  color: #FFF; 
  border: 0px;
  border-right-color: #3E3D3B; 
}
.result-hasil-table table th:first-child{
  border-top-left-radius: 10px;
}
.result-hasil-table table th:last-child{
  border-top-right-radius: 10px;
}
.result-hasil-table-container td:nth-child(3){
    font-weight: 700;
    background:  linear-gradient(180deg, #F0F9FF 0%, rgba(240, 249, 255, 0.00) 100%);
}
.kendala-tantangan-content-left{
  flex:0 0 50%;
}
.kendala-tantangan-content-right{
  flex:0 0 100%;
}


@media (min-width: 768px) {
  section.section-container{
    padding:80px 0 80px;
    margin:0
  }
  .jba-solution-list-item{
    flex:0 0 calc((100% / 2) - (24px * 2 / 2));
  }
  .technology-stack-list-item{
    flex:0 0 calc((100% / 3) - (24px * 2 / 3));
  }
  .gap-lg-40{
    gap: 40px;
  }
  .gap-lg-30{
    gap: 30px;
  }
  .gap-lg-24 {
    gap: 24px;
  }
  .gap-lg-20{
    gap: 20px;
  }
  .gap-lg-16{
    gap: 16px;
  }
  .title-36-lg{
    font-size: 36px;
  }
 .duration-content-left,  .duration-content-right {
  flex:0 0 calc(50% - 35px) ;
 }
 .duration-container .section-content, .kendala-tantangan-container .section-content{
  gap: 70px;
  }
  .hero-content-container .title-content{
    flex:0 0 635px;
  }
 
}
@media (min-width: 992px) {
  .jba-solution-list-item{
    flex:0 0 calc((100% / 3) - (24px * 2 / 3));
  }
  .kendala-tantangan-content-right{
    flex:0 0 calc(100% - (442px + 70px)) ;
  }
  .kendala-tantangan-content-left{
    flex:0 0 442px;
  }
}