.banner-hero {
	width: 100%;
	height: 100vh;
	min-height: 540px;
	max-height: 860px;
	background-color: #0C55AB;
	background-image: url('../imgs/product/gambar-81.png'), url('../imgs/product/gambar-79.png'), url('../imgs/product/gambar-80.png');
	background-position: bottom left, bottom, center;
	background-repeat: no-repeat;
	background-size: 60% auto, 100% auto, 100% auto;
}

.banner-hero .content-hero {
	width: auto;
}

.banner-hero .content-hero h1 {
	font-size: clamp(36px, 5.5vw, 70px);
	font-weight: bold;
	line-height: 110px;
	color: #FFFFFF;
}

.banner-hero .content-hero h2 {
	font-size: 2vw;
	font-weight: bold;
	line-height: 1.8;
	color: #FFFFFF;
}

.banner-hero .content-hero h2 span:before {
  content: '';
  background-image: url('../imgs/product/gambar-83.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  width: 35px;
  height: 35px;
  display: inline-block;
  margin-right: 12px;
  position: relative;
  top: 8px;
}

.banner-hero img.img-top {
	width: 10vw;
	max-width: 200px;
}

.banner-hero img {
	width: 30vw;
	max-width: 360px;
}

.title-subpage {
	font-size: clamp(30px, 2.2vw, 70px);
	color: #1D609E;
}

.content-spectra .title-subpage {
	margin-bottom: 7rem;
}

.content-spectra .card {
	background: linear-gradient(214.33deg, rgba(5, 206, 186, 0.05) -11.57%, rgba(0, 139, 254, 0.05) 90.85%);
	border: 3px solid #578CA70D;
	border-radius: 22px;
	position: relative;
}

.content-spectra .card img {
	width: 145px;
	height: auto;
}

.content-spectra .card .card-body {
	padding-top: 5rem;
}

.content-spectra .card .card-body p {
	color: #242424;
}

.border-manfaat {
	position: relative;
}

.content-manfaat {
	background-color: #F6F9FE;
}

.content-manfaat .title-subpage {
	margin-bottom: 3rem;
}

.content-manfaat img {
	width: 100%;
	height: auto;
}

.container-div-chart {
	background-image: url('../imgs/product/gambar-93.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 80% 70%;
}

.content-unitkerja .title-subpage {
	margin-bottom: 7rem;
}

.content-unitkerja .cont-chart {
	/*background: yellow;*/
	margin-bottom: 6rem;
}

.content-unitkerja .cont-chart.justify-content-start {
	padding-left: 10rem;
}

.content-unitkerja .cont-chart.justify-content-end {
	padding-right: 10rem;
}

.content-unitkerja .card {
	border: none;
	border-radius: 22px;
	padding: 28px;
	max-width: 560px;
}

.content-unitkerja .card.blue {
	background: #0D6CF7;
	background: linear-gradient(45deg, rgba(13, 108, 247, 1) 80%, rgba(111, 241, 247, 0.95) 100%);
}

.content-unitkerja .card.green {
	background: #0BB4AC;
	background: linear-gradient(45deg, rgba(11, 180, 172, 1) 80%, rgba(34, 217, 208, 0.95) 100%);
}

.content-unitkerja .card.orange {
	background: #FF7735;
	background: linear-gradient(45deg, rgba(255, 119, 53, 1) 80%, rgba(238, 245, 140, 0.95) 100%);
}

.content-unitkerja .card.left {
	padding-left: 6rem;
}

.content-unitkerja .card.right {
	padding-right: 6rem;
}

.content-unitkerja .card .card-body {
	color: #FFFFFF;
}

.content-unitkerja .card.left .card-body .translate-middle {
    transform: translate(-65%,-50%)!important;
}

.content-unitkerja .card.right .card-body .translate-middle {
    transform: translate(-40%,-50%)!important;
}

.content-unitkerja .card .card-body img {
	max-width: 230px;
}

/*X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1280.98px) {
	.banner-hero {
	    min-height:800px;
		background-image: url('../imgs/product/gambar-81.png'), url('../imgs/product/gambar-79.png'), url('../imgs/product/gambar-80.png');
		background-position: bottom left, bottom, center;
		background-size: 50% auto, 100% auto, 100% auto;
	}
}

@media (max-width: 1199.98px) {
	.banner-hero {
		background-image: url('../imgs/product/gambar-81.png'), url('../imgs/product/gambar-79.png'), url('../imgs/product/gambar-80.png');
		background-position: bottom left -80px, bottom, center;
		background-size: 70% auto, 100% auto, 100% auto;
	}
}

@media (max-width: 991.98px) {
	.banner-hero {
		background-image: url('../imgs/product/gambar-81.png'), url('../imgs/product/gambar-79.png'), url('../imgs/product/gambar-80.png');
		background-position: bottom left -260px, bottom, center;
		background-size: 90% auto, 100% auto, 100% auto;
	}

	.banner-hero img.img-top {
		margin-bottom: 0.75rem
	}

	.banner-hero .content-hero h1 {
		font-size: clamp(70px, 5.7vw, 60px);
		line-height: 80px;
	}

	.banner-hero .content-hero h2 {
		font-size: 2.2vw;
		line-height: 1.8;
	}

	.banner-hero .content-hero h2 span:before {
	  width: 27px;
	  height: 27px;
	}

	.content-spectra .row .col {
		padding-top: 1.75rem;
		padding-bottom: 1.75rem;
	}
}

@media (max-width: 767.98px) {
	.banner-hero {
		background-image: url('../imgs/product/gambar-81.png'), url('../imgs/product/gambar-79.png'), url('../imgs/product/gambar-80.png');
		background-position: bottom left -400px, bottom, center;
		background-size: 110% auto, 100% auto, 100% auto;
	}

	.banner-hero img.img-top {
		width: 17vw;
		margin-bottom: 1rem
	}

	.banner-hero .content-hero h1 {
		font-size: clamp(50px, 6.9vw, 70px);
		line-height: 80px;
	}

	.banner-hero .content-hero h2 {
		font-size: clamp(24px, 2.8vw, 70px);
		line-height: 1.8;
	}

	.banner-hero .content-hero h2 span:before {
	  width: 24px;
	  height: 24px;
	  top: 6px;
	}

	.container-div-chart {
		background-image: url('../imgs/product/gambar-93.png');
		background-size: 70% 60%;
	}

	.content-unitkerja .cont-chart {
		margin-bottom: 3rem;
	}

	.content-unitkerja .cont-chart.justify-content-start {
		padding-left: 10rem;
	}

	.content-unitkerja .cont-chart.justify-content-end {
		padding-right: 10rem;
	}

	.content-unitkerja .card {
		padding: 16px;
		max-width: 500px;
	}

	.content-unitkerja .card.left {
		padding-left: 3rem;
	}

	.content-unitkerja .card.right {
		padding-right: 3.5rem;
	}

	.content-unitkerja .card .card-body img {
		max-width: 160px;
	}

	.content-unitkerja .card .card-body h4 {
		font-size: 1.2em;
	}

	.content-unitkerja .card .card-body ul li {
		font-size: 0.95em;
	}
}

@media (max-width: 575.98px) {
	.sm-display {
		position: relative;
		top: 14%;
	}

	.banner-hero {
		background-image: url('../imgs/product/gambar-81.png'), url('../imgs/product/gambar-79.png'), url('../imgs/product/gambar-80.png');
		background-position: bottom center, bottom, center;
		background-size: 100% auto, 100% auto, 100% auto;
	}

	.banner-hero img.img-top {
		width: 15vw;
		min-width: 100px;
		margin-bottom: 0.7rem
	}

	.banner-hero .content-hero h1 {
		font-size: clamp(50px, 6.3vw, 70px);
		line-height: 70px;
	}

	.banner-hero .content-hero h2 {
		font-size: clamp(22px, 2.8vw, 70px);
		line-height: 1.8;
	}

	.banner-hero .content-hero h2 span:before {
	  width: 27px;
	  height: 27px;
	  top: 6px;
	}

	.container-div-chart {
		background-image: url('../imgs/product/gambar-93.png');
		background-size: 75% 70%;
	}

	.content-unitkerja .cont-chart {
		margin-bottom: 4rem;
	}

	.content-unitkerja .cont-chart.justify-content-start {
		padding-left: 6rem;
	}

	.content-unitkerja .cont-chart.justify-content-end {
		padding-right: 6rem;
	}

	.content-unitkerja .card {
		padding: 12px;
		max-width: 500px;
	}

	.content-unitkerja .card.left {
		padding-left: 3rem;
	}

	.content-unitkerja .card.right {
		padding-right: 3.5rem;
	}

	.content-unitkerja .card .card-body img {
		max-width: 130px;
	}

	.content-unitkerja .card .card-body h4 {
		font-size: 1.1em;
	}

	.content-unitkerja .card .card-body ul li {
		font-size: 0.8em;
	}
}

@media (max-width: 399.98px) {
	.container-div-chart {
		background-image: url('../imgs/product/gambar-93.png');
		background-size: 75% 70%;
	}

	.content-unitkerja .cont-chart.justify-content-start {
		padding-left: 4rem;
	}

	.content-unitkerja .cont-chart.justify-content-end {
		padding-right: 4rem;
	}

	.content-unitkerja .card.left {
		padding-left: 2rem;
	}

	.content-unitkerja .card.right {
		padding-right: 2rem;
	}

	.content-unitkerja .card .card-body img {
		max-width: 100px;
	}

	.content-unitkerja .card .card-body h4 {
		font-size: 1em;
	}

	.content-unitkerja .card .card-body ul li {
		font-size: 0.7em;
		line-height: 1.4;
	}
}