/* ===================CSS GLOBAL========================== */
.kontainer {
	width: 100%;
	padding-right: var(--bs-gutter-x, 0.75rem);
	padding-left: var(--bs-gutter-x, 0.75rem);
	margin-right: auto;
	margin-left: auto;
  font-family: 'Montserrat', sans-serif !important;
  line-height: 1.4;
}
@media (min-width: 576px) {
	.kontainer {
		max-width: 540px;
	}

}
@media (min-width: 768px) {
	.kontainer {
		max-width: 720px;
	}
}
@media (min-width: 992px) {
	.kontainer {
		max-width: 960px;
	}
}
@media (min-width: 1200px) {
	.kontainer {
		max-width: 1140px;
	}
}
@media (min-width: 1400px) {
	.kontainer {
		max-width: 1320px;
	}
}

/* Media query for mobile devices */
@media (max-width: 767px) {
  .rows {
    flex-direction: column; /* Stack columns vertically */
  }
.kontainer {
  max-width: 767px;
}
.sl-item {
  width: 180%;
}
  .cols-7 {
    order: 1; /* Place cols-7 above cols-5 on mobile */
    
  }
  .utama {
  
    max-width: max-content;
  }

  .cols-5 {
    order: 2; /* Place cols-5 below cols-7 on mobile */
  }
}

.rows {
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 0;
	display: flex;
	flex-wrap: wrap;
	margin-top: calc(-1 * var(--bs-gutter-y));
	margin-right: calc(-0.5 * var(--bs-gutter-x));
	margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.rows > * {
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	padding-right: calc(var(--bs-gutter-x) * 0.5);
	padding-left: calc(var(--bs-gutter-x) * 0.5);
	margin-top: var(--bs-gutter-y);
}

.cols {
	flex: 1 0 0%;
}
.cols-5 {
	flex: 0 0 auto;
	width: 41.66666667%
}

.cols-6 {
	flex: 0 0 auto;
	width: 50%
}

.cols-7 {
	flex: 0 0 auto;
	width: 58.33333333%
}
.cols-12 {
	flex: 0 0 auto;
	width: 100%
}

/* ===================RIBON============== */
.pita {
  text-align: center;
  position: relative;
}

.pita-judul {
  color: #fff;
  background: #066aa8bb;
  font-size: 17px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 12px 9px;
  margin: -10px 0 18px;
  display: inline-block;
  position: relative;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.pita-judul::before,
.pita-judul::after {
  content: "";
  background: linear-gradient(to top left, #0b466aa9 49%, transparent 50%);
  width: 10px;
  height: 10px;
  position: absolute;
  top: 0;
  left: -10px;
}
.pita-judul::after {
  transform: rotateY(180deg);
  left: auto;
  right: -10px;
}
/* ================================================ */

/* ===================KOTAK FRAME================== */
.kotak-utama {
  margin: 0.40rem;
  border-radius: 0.5rem;
  padding-bottom: 1.5rem;
  padding-inline: 1rem;
  background-color: #f7f7f7;
  box-shadow: 
  inset 1px 1px 0px #d8d8d8,
  inset -1px -1px 0px rgb(0 0 0 / .25),
  calc(00.40rem * .25) calc(00.40rem * .25) calc(00.40rem * .5) rgb(0 0 0 / .25);
  position: relative;
  -webkit-border-radius: 0.5rem;
  -moz-border-radius: 0.5rem;
  -ms-border-radius: 0.5rem;
  -o-border-radius: 0.5rem;
}
.kotak-utama::before {
  content: "";
  position: absolute;
  width: calc(100% + (0.75rem * 2));
  height: 100%;
  bottom: calc(0.75rem * -1);
  left: calc(0.75rem * -1);
  z-index: -1;  /* behind the card */
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  background-color: #f1f1f1;
  background-image: 
    linear-gradient(to left, #e5e5e5 calc(1.75rem * 2), transparent 0),
    linear-gradient(135deg, #008DC2 80%, #e5e5e5 0);
}
/* ================================================ */
/* =================LIST ITEM==================== */
.utama {
  position: relative;
}
.judul {
  color: #008DC2;
  font-size: 20px !important;
  font-weight: bold !important;
}
.ikon-1::before {
  font-family: "Font Awesome 6 Free"; /* Pastikan ini sesuai dengan versi Font Awesome yang Anda gunakan */
  content: "\f51c"; /* Unicode untuk ikon rumah (home) */
  font-weight: 900; /* Wajib untuk ikon solid */
  font-size: 19px;
  color: #008DC2;
  padding-right: 10px;
  vertical-align: middle;
}
.ikon-2::before {
  font-family: "Font Awesome 6 Free"; /* Pastikan ini sesuai dengan versi Font Awesome yang Anda gunakan */
  content: "\f570"; /* Unicode untuk ikon rumah (home) */
  font-weight: 900; /* Wajib untuk ikon solid */
  font-size: 20px;
  color: #008DC2;
  padding-right: 10px;
  vertical-align: middle;
}
.sl-gariss {
  width: 100%;
  height: 1px;
  background-color: #cccccc;
  margin: 5px 1px 10px 5px;
}
.list-item {
  color: #000000;
}
.sl-item {
  display: flex;
  margin-top: 5px;
  padding-left: 20px;
}
.sl-item-inves {
  display: flex;
  margin-top: 5px;
  padding-left: 20px;
  font-weight: bold;
}
.sl-nomor {
  min-width: 20px;
  line-height: 23px;
}
.sl-sub {
  padding-left: 55px;
}

.sl-ket-1 {
  padding-right:5px;
  font-weight: bold;
}
.sl-sub-kat {
  padding-top: 4px;
}
.sl-sub-list::before {
  font-family: "Font Awesome 6 Free"; /* Pastikan ini sesuai dengan versi Font Awesome yang Anda gunakan */
  content: "\f111"; /* Unicode untuk ikon rumah (home) */
  font-weight: 900; /* Wajib untuk ikon solid */
  font-size: 5px;
  color: #399b00;
  padding-right: 5px;
  vertical-align: middle;
}
.sl-sub-kat::before {
  font-family: "Font Awesome 6 Free"; /* Pastikan ini sesuai dengan versi Font Awesome yang Anda gunakan */
  content: "\f0da"; /* Unicode untuk ikon rumah (home) */
  font-weight: 900; /* Wajib untuk ikon solid */
  font-size: 17px;
  color: #04619e;
  padding-right: 5px;
  vertical-align: top;
}
.sl-ket::before {
  font-family: "Font Awesome 6 Free"; /* Pastikan ini sesuai dengan versi Font Awesome yang Anda gunakan */
  content: "\f111"; /* Unicode untuk ikon rumah (home) */
  font-weight: 900; /* Wajib untuk ikon solid */
  font-size: 5px;
  color: #399b00;
  padding-right: 5px;
  padding-top: 6px;
}
.sl-benefit, .sl-ket {
  font-size: 14px;
  font-style: italic;
  padding-left: 25px;
  color: #333;
  margin-top: 0px;
  margin-bottom: 0px;
  display: flex;
}
.sl-benefit::before {
  font-family: "Font Awesome 6 Free"; /* Pastikan ini sesuai dengan versi Font Awesome yang Anda gunakan */
  content: "\f00c"; /* Unicode untuk ikon rumah (home) */
  font-weight: 900; /* Wajib untuk ikon solid */
  font-size: 12px;
  color: #399b00;
  padding-right: 5px;
  vertical-align: middle;
}
.foot {
  font-size: 0.6rem;
  bottom: 0.2rem;
  position: absolute;
  font-style: italic;
}

/* ===============================border warna=========== */
.border-merah {border: 1px solid brown;}
.border-kuning {border: 1px solid #fccd04}
.border-hijau {border: 1px solid rgb(9, 255, 0);}
.border-biru {border: 1px solid rgb(0, 47, 255);}
/* ===============================margin top============= */
.mrt-5 {margin-top: 3rem !important;}
.mrt-4 {margin-top: 1.5rem !important;}
.mrt-3 {margin-top: 1rem !important;}
.mrt-2 {margin-top: 0.5rem !important;}
.mrt-1 {margin-top: 0.25rem !important;}
.mrt-auto {margin-top: auto !important;}
/* ===============================margin bottom========= */
.mrb-5 {margin-bottom: 3rem !important;}
.mrb-4 {margin-bottom: 1.5rem !important;}
.mrb-3 {margin-bottom: 1rem !important;}
.mrb-2 {margin-bottom: 0.5rem !important;}
.mrb-1 {margin-bottom: 0.25rem !important;}
.mrb-auto {margin-bottom: auto !important;}
/* ===============================PADDING=============== */