.nama_pasangan{font-family: 'tulisan_keren';font-size: 70pt;font-variant: inherit;}
.opening-header{font-family: 'Poppins', sans-serif;}

.play-now {
	position: relative;
	display: block;
	z-index: 9;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.play-now .icon{
	position: relative;
	display: inline-block;
	height: 80px;
	width: 80px;
	text-align: center;
	line-height: 80px;
	background-color: #000000;
	color: #ffffff;
	z-index: 1;
	padding-left: 5px;
	font-size: 24px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	-webkit-box-shadow: 0 0px 10px 0 rgba(255, 255, 255, .3);
	-moz-box-shadow: 0 0px 10px 0 rgba(255, 255, 255, .3);
	-ms-box-shadow: 0 0px 10px 0 rgba(255, 255, 255, .3);
	-o-box-shadow: 0 0px 10px 0 rgba(255, 255, 255, .3);
	box-shadow: 0  0px 10px 0 rgba(255, 255, 255, .3);
	-webkit-transform-origin:center; 
	transform-origin:center; 
}

.play-now .ripple,
.play-now .ripple:before,
.play-now .ripple:after {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 70px;
	width: 70px;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
	-moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
	-ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
	-o-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
	box-shadow: 0 0 0 0 rgb(187 146 78 / 60%);
	-webkit-animation: ripple 3s infinite;
	-moz-animation: ripple 3s infinite;
	-ms-animation: ripple 3s infinite;
	-o-animation: ripple 3s infinite;
	animation: ripple 3s infinite;
}

.play-now .ripple:before {
	-webkit-animation-delay: .9s;
	-moz-animation-delay: .9s;
	-ms-animation-delay: .9s;
	-o-animation-delay: .9s;
	animation-delay: .9s;
	content: "";
	position: absolute;
}

.play-now .ripple:after {
	-webkit-animation-delay: .6s;
	-moz-animation-delay: .6s;
	-ms-animation-delay: .6s;
	-o-animation-delay: .6s;
	animation-delay: .6s;
	content: "";
	position: absolute;
}


@-webkit-keyframes ripple {
	70% {box-shadow: 0 0 0 70px rgba(255, 255, 255, 0);}
	100% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);}
}

@keyframes ripple {
	70% {box-shadow: 0 0 0 70px rgba(255, 255, 255, 0);}
	100% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);}
} 

.video-section .play-now{
    position: relative;
    display: inline-block;
    margin-top: 50px;
    text-decoration:none;
}

.video-section .play-now .icon{
	height: 100px;
	width: 100px;
	line-height: 100px;
	background-color: #bb924e;
	padding-left: 0;
	font-size: 50px;
}

@media (max-width: 576px) {
/* pastikan parent sebagai reference */
.row.justify-content-center.mb-5.overflow-hidden > .col-lg-8.text-center.mb-3 {
  position: relative;
  /* tidak wajib, tapi membuat stacking lebih jelas */
}

/* pseudo-element: lingkaran blur tertengah */
.row.justify-content-center.mb-5.overflow-hidden > .col-lg-8.text-center.mb-3::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(700px, 90vw);
  height: min(700px, 90vw);     /* pakai nilai sama untuk benar-benar bulat */
  border-radius: 50%;
  /* gunakan radial-gradient yang valid */
  background: radial-gradient(ellipse at center, rgb(0 0 0 / 95%) 0%, rgb(0 0 0 / 60%) 25%, rgb(0 0 0 / 0%) 65%);
  opacity: 0.9;                 /* sesuaikan (0.6 - 0.95) */
  filter: blur(20px);
  pointer-events: none;
  z-index: 1;                    /* letakkan di bawah teks */
}

/* angkat semua anak (h3, p, h5) agar berada di atas pseudo-element */
.row.justify-content-center.mb-5.overflow-hidden > .col-lg-8.text-center.mb-3 > * {
  position: relative;
  z-index: 2;
  /* opsional: bantu keterbacaan */
  text-shadow: 0 2px 6px rgba(0,0,0,0.55);
}
}