.banner-hero {
	width: 100%;
	height: 100vh;
	min-height: 860px;
	background-color: #060D21;
	background-image: url('../imgs/product/gambar-51.png'), url('../imgs/product/gambar-52.png');
	background-position: top 70px right, bottom left;
	background-repeat: no-repeat, no-repeat;
	background-size: 55% auto, 80% auto;
}

.banner-hero .content-hero {
	width: 100%;
}

.banner-hero .content-hero h1 {
	font-size: clamp(46px, 7vw, 90px);
	font-weight: bold;
	line-height: 110px;
	background: linear-gradient(75deg,rgba(4, 168, 102, 1) 0%, rgba(218, 242, 177, 0.81) 17%, rgba(177, 206, 242, 1) 57%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.banner-hero .content-hero h2 {
	font-size: 2.35vw;
	font-weight: bold;
	line-height: 1.4;
	background: linear-gradient(90deg, #3F8DFF 11.54%, #00C978 43.92%, #00A060 55.65%, #3F8DFF 80.69%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.banner-hero .content-hero p {
	font-size: 1.8vw;
	font-weight: bold;
	line-height: 1.4;
	background: linear-gradient(75deg,rgba(12, 153, 248, 1) 0%, rgba(43, 57, 221, 0.81) 18%, rgba(248, 188, 90, 1) 44%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.banner-hero img.img-top {
	width: 45vw;
	max-width: 260px;
}

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

.container-center-cav {
	position: relative;
	padding-bottom: 4rem;
}

.container-center-cav::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('../imgs/product/gambar-62.png'), url('../imgs/product/gambar-69.png');
	background-position: top right, bottom -700px left;
	background-repeat: no-repeat;
	background-size: 482px auto, 100% auto;
	z-index: 2;
}

.card-top-content {
	background: linear-gradient(214.33deg, rgba(5, 206, 186, 0.05) -11.57%, rgba(0, 139, 254, 0.05) 90.85%);
	border-radius: 22px;
	padding: 32px;
}

.title-subpage {
	font-size: 2.3vw;
	color: #1D609E;
}

.card-top-content p {
	font-size: 1.1em;
	text-align: center;
	line-height: 3;
}

.card-content-manfaat {
	padding-top: 4em;
	padding-bottom: 0;
}

.ratio-box, .ratio-box-2 {
  position: relative;
  width: 100%;
  padding-bottom: 88%;
}

.ratio-box > *, .ratio-box-2 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ratio-box {
  padding-bottom: 88%;
}

.ratio-box-2 {
  padding-bottom: 38%;
}

.ratio-box-2 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card-content-manfaat .card-body .card {
	background: linear-gradient(214.33deg, rgba(5, 206, 186, 0.6) -11.57%, rgba(0, 139, 254, 0.6) 90.85%);
	color: #FFFFFF;
	border: none;
	border-radius: 22px;
}

.card-content-manfaat .card-body .card .card-body {
	background-image: url('../imgs/product/gambar-61.png');
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: 90px auto;
	border-radius: 22px;
}

.card-content-manfaat .card-body .card .card-body p {
	font-size: inherit;
	line-height: 1.6;
}

.card-content-manfaat .card-body .card .card-body .box-card {
	background-color: #FFFFFF;
	width: 75px;
	height: 75px;
	border: 1px solid #EAEAEA;
	box-shadow: 0px 6px 30px 0px #7C8BA333;
	border-radius: 28px;
}

.card-content-manfaat .card-body .card .card-body .box-card img {
	width: auto;
	height: 45px;
}

.content-unggul {
	background: #F6F9FE;
	backdrop-filter: blur(32px);
}

.content-unggul .card {
	border: none;
	border-radius: 24px;
	box-shadow: 0px 6px 30px 0px #7C8BA326;
	text-align: center;
}

.content-unggul .card .card-body {
	padding-top: 2em;
	padding-bottom: 2em;
}

.content-unggul .card .card-body img {
	width: 63px;
	height: 63px;
}

.content-unggul .card .card-body img.img-top {
	margin-bottom: 1.4rem;
}

.content-unggul .card .card-body h5 {
	font-weight: bold;
}

.content-unggul .card .card-body p {
	color: #939393;
	line-height: 1.5;
}

.content-prompt {
	background-color: #FFFFFF;
	background-image: url('../imgs/product/gambar-67.png'), url('../imgs/product/gambar-68.png'), url('../imgs/product/gambar-69.png');
	background-position: top -330px left, bottom -300px right, bottom -700px left;
	background-repeat: no-repeat;
	background-size: 340px auto 394px auto, 100% auto;
}



.content-prompt .cont-struktur-prompt {
	margin-bottom: 6rem;
}

.content-prompt .title-subpage {
	font-size: 2.5vw;
}

.content-prompt .card {
	background: #0D6CF7;
	background: linear-gradient(40deg, rgba(13, 108, 247, 0.81) 80%, rgba(111, 241, 247, 1) 100%);
	border: none;
	border-radius: 22px;
	padding: 32px;
}

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

@media (max-width: 991.98px) {
	.banner-hero {
		background-image: url('../imgs/product/gambar-51.png'), url('../imgs/product/gambar-52.png');
		background-position: top 30px right, bottom left;
		background-size: 70% auto, 120% auto;
	}

	.banner-hero .content-hero h1 {
		font-size: clamp(55px, 8vw, 90px);
	}

	.banner-hero .content-hero h2 {
		font-size: clamp(28px, 3.6vw, 60px);
	}

	.banner-hero .content-hero p {
		font-size: clamp(20px, 2.6vw, 45px);
	}

	.title-subpage {
		font-size: clamp(32px, 3.6vw, 65px);
		color: #1D609E;
	}

	.card-top-content p {
		font-size: 1.1em;
		line-height: 1.7;
	}

	.ratio-box-2 {
	  padding-bottom: 80%;
	}

	.ratio-box {
	  margin-bottom: 2.3rem;
	}
	
	.container-center-cav::after {
    	background-position: top right, bottom -500px left;
    	background-size: 482px auto, 120% auto;
    }

	.content-prompt .title-subpage {
		font-size: clamp(32px, 3.6vw, 65px);
	}

	.content-prompt .cont-struktur-prompt {
		margin-bottom: 3rem;
	}
}

@media (max-width: 767.98px) {
	.banner-hero {
		background-image: url('../imgs/product/gambar-51.png'), url('../imgs/product/gambar-52.png');
		background-position: top 30px right, bottom left;
		background-size: 90% auto, 200% auto;
	}

	.ratio-box-2 {
	  padding-bottom: 40%;
	  margin-bottom: 2.3rem;
	}
	
	.container-center-cav {
    	padding-bottom: 3rem;
    }
	
	.container-center-cav::after {
    	background-position: top right, bottom -400px left;
    	background-size: 482px auto, 120% auto;
    }

	.content-prompt .cont-struktur-prompt {
		margin-bottom: 1rem;
	}
}

@media (max-width: 575.98px) {
	.ratio-box {
	  padding-bottom: 40%;
	}

	.ratio-box-2 {
	  padding-bottom: 80%;
	}
	
	.container-center-cav {
    	padding-bottom: 2rem;
    }
	
	.container-center-cav::after {
    	background-position: top right, bottom -200px left;
    	background-size: 482px auto, 140% auto;
    }

	.content-prompt .cont-struktur-prompt {
		margin-bottom: 0;
	}
}