.font-barlow {
  font-family: 'Barlow';
}

.font-tajawal {
  font-family: 'Tajawal';
}

h1.title-36::before {
  content: '';
  position: absolute;
  display: inline-block;
  width: 44.26px;
  height: 5px;
  top: 45px;
  background-color: #F7CC49;
}

h3::before {
  display: none;
}

.mt-1 {
  margin-top: 10px;
}

.mt-2 {
  margin-top: 20px;
}

.mt-3 {
  margin-top: 30px;
}

.mt-4 {
  margin-top: 40px;
}

.mt-5 {
  margin-top: 50px;
}

.mb-1 {
  margin-bottom: 10px;
}

.mb-2 {
  margin-bottom: 20px;
}

.mb-3 {
  margin-bottom: 30px;
}

.mb-4 {
  margin-bottom: 40px;
}

.mb-5 {
  margin-bottom: 50px;
}

.hero-content-container {
  min-height: 400px;
  width: 1080px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-content-container h1 {
  font-weight: 700;
  font-size: 60px;
  line-height: 60px;
}

.title-18 {
  font-weight: 700;
  font-size: 18px;
  line-height: 22.5px;
}

.title-20 {
  font-weight: 700;
  font-size: 20px;
  line-height: 25px;
}

.title-24 {
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
}

.title-36 {
  font-weight: 700;
  font-size: 36px;
  line-height: 45px;
}

.body-base-14 {
  font-weight: 400;
  font-size: 14px;
  line-height: 17.5px;
}

.body-base-16 {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.body-base-20 {
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
}

.body-base-24 {
  font-weight: 500;
  font-size: 24px;
  line-height: 30px;
}

.body-base-24-400 {
  font-weight: 400;
  font-size: 24px;
  line-height: 24px;
}

.color-ffffff {
  color: #FFFFFF;
}

.color-0E0C0A {
  color: #0E0C0A;
}

.color-000000 {
  color: #000000;
}

.color-3E3D3B {
  color: #3E3D3B;
}

.bg-f2f5f9f2 {
  background: #F2F5F9F2;
}

.bg-f2f5f9 {
  background: #f2f5f9;
}

.bg-f5f6f8 {
  background: #F5F6F8;
}

.hero-list-img {
  gap: 16px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.section-devops {
  padding: 60px 0;
}

.section-tab-layanan {
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.nav-layanan-parter {
  display: flex; 
  flex:0 0 100%
}

.nav-layanan-parter .tab-layanan-partner:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.nav-layanan-parter .tab-layanan-partner:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.tab-layanan-partner {
  width: 100%;
  background-color: #FFFAE6;
  color: #5E5C5B;
  padding: 16px;
  gap: 10px;
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  cursor: pointer;
}

.tab-layanan-partner.active {
  background-color: #FFCA00;
  font-weight: 700;
  color: #0E0C0A;
}

.tab-layanan-partner:hover {
  font-weight: 700;
  color: #0E0C0A;
}

.content-tab-layanan {
  display: none;
  padding: 24px 38px;
  gap: 24px;
}

.content-tab-layanan.active {
  display: block;
}

.card-head-layanan-partner {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border-radius: 8px;
  padding: 16px;
  gap: 32px;
}

.card-body-layanan-partner {
  height: 100%;
  background-color: #FFFFFF;
  padding: 24px;
  gap: 16px;
  border-radius: 8px; 
}
 

.section-kenapa-logique {
  background-image: url(../../img/service/revamp/layanan-devops/bg-kenapa-logique.png);
  background-color: #3A310A;
  background-size: cover;
  background-repeat: no-repeat;
}

.card-kenapa-logique {
  background-color: #FFFAE6;
  border-radius: 16px;
  padding: 24px;
  gap: 24px;
}

.section-devops-work {
  background: linear-gradient(360deg, rgba(255, 255, 255, 0) -7.51%, #F3F3F3 92.41%);
}

.centering-image {
  width: 477px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.centering-image-icon {
  display: block;
  margin-left: auto;
  margin-right: auto;            
}

.right-image {
  display: block;
  margin-left: auto;            
  width: 50%;
}

.left-image {
  display: block;
  margin-right: auto;            
  width: 50%;
}

/* CAROUSEL */
.carousel-control {
  background-image: none;
}

.carousel-control.left {
  background-image: none; 
  margin: 0;
  position: absolute;
  top: 45%;           
}

.carousel-control.right {
  background-image: none;    
  margin: 0;
  position: absolute;
  top: 45%;          
}
#service-solution-logique  .carousel-control.left {
  margin-left:-70px
}
#service-solution-logique  .carousel-control.right {
  margin-right:-70px
}
.custom__card-why-logique{                    
  background-color: white;
  padding: 4px;
  border-radius: 10px;         
}

.carousel-indicators li {           
  background-color: grey;
}
.carousel-indicators .active {           
  background-color: #ffca13;
}

.carousel-caption {
  text-shadow: none;
}

.flex-col {
  width: 972px;
  height: 233;
  margin: auto;
  background-color: #FFFFFF;
  border: 1px solid #F2F2F2;
  box-shadow: 0px 0px 40px 5px #1463A808;
  padding: 24px;
  gap: 32px;
  border-radius: 8px;
  flex-direction: row;
  align-items: center;
}

.section-hubungi-logique {
  background-image: linear-gradient(180deg, #FFF6D3 0%, rgba(231, 231, 231, 0) 100%);
 }
.service-devops-item >div{
  gap:16px;
  margin-bottom:16px;
  display: flex;
 }
.service-devops-item .img-container{
  flex:0 0 57px
}
.service-devops-item h3{
  flex:0 0 calc(100% - (57px + 16px)); 
  padding:0;
  margin: 0;
}
.server-option-item-header{
  gap:16px;
  margin-bottom: 24px;
}
.server-option-item-header .img-container{
  flex:0 0 40px
}
.server-option-item-header h3{
  flex:0 0 calc(100% - (40px + 16px)); 
  line-height: 125%;
}
.server-option-list{
  row-gap: 30px;
}
.custom__bg-image-partner-aws {
  background-image: url(/layanan/assets/img/img-devops/bg-aws-partner.webp);
  background-repeat: no-repeat;
  background-position: top right;
}
@media (max-width: 768px) {
  .hero-content-container h1{
    font-size: 32px;
    line-height: 125%;  
  }
  .hero-content-container {
    width: 100%;
    min-height: auto;
  }

  .img-fluid {
    width: 100%;
  }

  .hero-list-img {
    flex-direction: column;
    
  }

  .nav-layanan-parter {
    flex-direction: column;
    
  }

  .nav-layanan-parter .tab-layanan-partner:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  
  .nav-layanan-parter .tab-layanan-partner:last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .card-head-layanan-partner {
    flex-direction: column;
  }

  .card-head-layanan-partner img {
    width: 100%;
  }

  .card-body-layanan-partner {
    min-height: max-content;
  }

  .img-gedung {
    width: 100%;
  }

  .carousel-indicators {
    bottom: -32px;
  }

  .flex-col {
    width: 100%;
    flex-direction: column;
  }

  .centering-image {
    width: 100%;
  }
}