:root {
	--pink: #f14e95;
	--bg: #0a0a0a;
	--bg2: #102f38;
	--bg3: #fbf0ec;
	--shadow: 0 2px 2px rgb(0 0 0 / 0.5);
}


body {
	font-size: 1.2rem;
	font-family: 'Work Sans', sans-serif;
	/* min-height: 4000px; */
	/* min-height: -webkit-fill-available; */

}

.pembungkusSafari {
	height: -webkit-fill-available !important;
}

.pembungkus {
	width: 500px !important;
	background-image: url(img/asset/background.jpg);
	background-position: center;
	background-size: cover;
	margin-left: -12px !important;
	margin-right: -12px !important;
	position: relative;
	/* height: 100vh; */
	/* height: -webkit-fill-available; */
	/* min-height: -webkit-fill-available; */
	height: 100vh;
	/* Untuk browser umum */
	height: 100dvh;
	/* Untuk browser modern */
	min-height: 100%;
	/* Backup untuk beberapa browser */
}

.hero-opacity {
	opacity: 0;
	transition: 0.5s;
}

.hero-opacity2 {
	opacity: 0;
	transition: 3s;
}

.hero-hidden {
	/* position: absolute;
	z-index: -99 !important; */
	display: none !important;
}

.hero-show {
	position: absolute;
	z-index: 11 !important;
}

.hero {
	/* position: relative;
	z-index: 20;
	min-height: 100vh; */

	position: absolute;
	z-index: 11;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.hero2 {
	/* position: relative;
	z-index: 20;
	min-height: 100vh; */

	position: absolute;
	z-index: 11;
	/* top: 0;
	left: 0; */
	width: 100%;
	height: 100%;
}

.hero3 {
	position: absolute;
	z-index: 11;
	width: 100%;
	height: 100%;
}

.hero4 {
	position: absolute;
	z-index: 11;
	width: 100%;
	height: 100%;
}

main {
	position: relative;
	z-index: 10;
}

.isi-acara {
	position: absolute;
	z-index: 24;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin-top: -50px;
}

.thanks,
.rsvp {
	position: absolute;
	z-index: 23;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin-top: -50px;
	padding-left: 5px;
	padding-right: 5px;
}

.thanks h3,
.rsvp h3 {
	font-family: 'dancing script', sans-serif;
	font-size: 2rem;
	color: #063558;
}

.isi-hidden {
	display: none !important;
}

.generate {
	border-radius: 5px;
}

.hero h4,
.hero p {
	text-shadow: var(--shadow);
	color: #000000;
}

.hero h1 {
	margin-bottom: -10px;
}

.hero h1,
.isi-acara h1 {
	text-shadow: var(--shadow);
	color: #FF9800;
	font-family: "Luckiest Guy", cursive;
	font-weight: 400;
	font-style: normal;
	font-size: 72px;
}

.hero h2,
.isi-acara h2 {
	font-family: "Luckiest Guy", cursive;
	font-weight: 100;
	font-style: normal;
	font-size: 50px;
	color: #2874b0;
}

.hero h3,
.isi-acara h3 {
	font-family: "Luckiest Guy", cursive;
	font-weight: 100;
	font-style: normal;
	font-size: 30px;
	color: #2874b0;
}

.isi-acara h3 {
	text-shadow: var(--shadow);
}

.hero h4 {
	font-family: 'montserrat';
	font-weight: 200;
	font-size: 18px;
}

.isi-acara h4 {
	text-shadow: var(--shadow);
	font-family: 'Trajan Pro', sans-serif;
	font-weight: bold;
	font-size: 1.8rem;
	color: #FF9800;
}

.hero p {
	font-size: 1.4rem;
	font-weight: 200;
}

.hero a {
	font-size: 0.8rem;
	font-family: 'montserrat';
	font-weight: 400;
	color: #fbf0ec;
	background-color: #FF9800;
}

.hero a:hover {
	background-color: #da8d19;
	color: #fbf0ec;
}

/* .isi-acara {
	margin-top: -130px;
} */


.img1 {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 5;
}

.img1 img {
	width: 500px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin-inline: auto;
}

.img11 {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 5;
}

.img11 img {
	width: 500px;
	position: absolute;
	bottom: 80px;
	left: 0;
	right: 0;
	margin-inline: auto;
}


.daun1a {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	/* animation: mymoveleft 9s ease infinite; */

}

.daun1a img {
	width: 300px;
	position: absolute;
	bottom: -70px;
	left: -100px;
	transform-origin: bottom left;
	animation: wave-left-1 4s ease-in-out infinite alternate;
}


.daun1b {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	/* animation: mymoveright 9s ease infinite; */
}

.daun1b img {
	width: 300px;
	position: absolute;
	bottom: -70px;
	right: -100px;
	transform-origin: bottom right;
	animation: wave-right-1 4s ease-in-out infinite alternate;
}

.daun2a {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	/* animation: mymoveleft 10s ease infinite; */
}

.daun2a img {
	width: 270px;
	position: absolute;
	bottom: -80px;
	left: -50px;
	transform-origin: bottom left;
	animation: wave-left-2 3s ease-in-out infinite alternate;
}

.daun2b {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	/* animation: mymoveright 10s ease infinite; */
}

.daun2b img {
	width: 270px;
	position: absolute;
	bottom: -80px;
	right: -50px;
	transform-origin: bottom right;
	animation: wave-right-1 3s ease-in-out infinite alternate;
}

.daun3a {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.daun3a img {
	width: 210px;
	position: absolute;
	bottom: -80px;
	left: 20px;
}

.daun3b {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.daun3b img {
	width: 210px;
	position: absolute;
	bottom: -80px;
	right: 20px;
}

.burung {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.burung img {
	width: 100px;
	position: absolute;
	top: 50%;
	left: -20px;
}

.kupu-kupu {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.kupu-kupu img {
	width: 35px;
	position: absolute;
	top: 35%;
	right: 40px;
	animation: right-left 4s ease-in-out infinite alternate;
}

.monyet-balon {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.monyet-balon img {
	width: 120px;
	position: absolute;
	top: 20px;
	left: 30px;
	animation: zoom 3s ease infinite;
}

.teddy-balon {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.teddy-balon img {
	width: 100px;
	position: absolute;
	top: 40px;
	right: 30px;
	animation: zoom 3s ease infinite;
}

.tirai {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.tirai img {
	width: 350px;
	position: absolute;
	top: -15px;
	right: 0;
	left: 0;
	margin-inline: auto;
}

.harvey {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.harvey img {
	width: 180px;
	height: 180px;
	position: absolute;
	top: 150px;
	right: 0;
	left: 0;
	margin-inline: auto;
	border: #FF9800 solid 1px;
	animation: updown 1s ease infinite;
}

.menu {
	position: absolute;
	z-index: 22;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 80px;
	background-color: #46a474;
	overflow: hidden;
	display: flex;
}

.menu-hidden {
	display: none;
}

.box-menu {
	padding: 0;
	margin: 0;
	list-style: none;
	height: 100%;
	min-width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	/* transition: all ease-in-out .5s; */
}

.box-menu-item {
	width: 100%;
	height: 100%;
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	position: relative;
	/* transition: all ease-in-out .1s; */
}

.box-menu span {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 1rem;
}

.active {
	background-color: #FF9800;
	border-radius: 15px;
}

.hitung-mundur {
	color: #063558;
}

.box-menu a {
	font-size: 0.8rem;
	font-family: 'montserrat';
	font-weight: 400;
	color: #fbf0ec;
	background-color: #FF9800;
}

.box-menu a:hover {
	background-color: #da8d19;
	color: #fbf0ec;
}

.btnclose {
	background-color: #ffffff;
	border: 0;
	color: #0a0a0a;
}

.zoom {
	animation: zoom 1s;
	scale: 100%;
}

.bg-kolom {
	/* background-color: #858b73; */
	background-color: var(--bg3);
	border-radius: 25px 25px 25px 25px;
}

.modal h2 {

	color: #64503b;
	font-family: 'Monserrat';
	font-size: 1.7rem;
	font-weight: 400;

}

.bg-kolom p {
	color: white;
}


.bg-kolom form label {
	color: white;
}



.bg-kolom button {
	background-color: #64503b;
	color: white;
	border: 1px solid white;
	border: none;
	font-size: 0.8rem !important;
}

.bg-kolom button:hover {
	background-color: #644e36;
	color: white;
	border: 1px solid white;
	border: none;
}

.komentar {
	font-family: 'Montserrat', sans-serif;
	position: relative;
	z-index: 3;
}

.tabel-komen {
	border-bottom: 1px solid #64503b;
}

.nama-komentar {
	color: #ad8004;
	font-weight: bold;
	font-size: 0.8rem;
}

.isi-komentar {
	color: #000000;
	font-size: 0.8rem;
}


.jmlh-komentar {
	color: #ad8004;
	font-family: 'montserrat', sans-serif;
	font-weight: 600;
	font-size: 1.3rem;
}

.audio-icon-wrapper {
	width: 4rem;
	height: 4rem;
	font-size: 4rem;
	position: fixed;
	bottom: 2.5rem;
	right: 2rem;
	cursor: pointer;
	color: white;
	opacity: 0.5;
	mix-blend-mode: difference;
	animation: rotating 4s linear infinite;
	transform-origin: center;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 0;
}

.pagination_ {
	text-align: center;
	margin: 10px 10px 60px;
	user-select: none;
}

.pagination_ li {
	display: inline-block;
	margin: 3px;
	box-shadow: 0 5px 25px rgb(1 1 1 / 10%);
}

.pagination_ li a {
	color: #fff;
	text-decoration: none;
	font-size: 0.6em;
	line-height: 35px;
}

.previous_page,
.next_page {
	background: #6e5942;
	width: 60px;
	border-radius: 45px;
	cursor: pointer;
	transition: 0.3s ease;
}

.previous_page:hover {
	transform: translateX(-5px);
}

.next_page:hover {
	transform: translateX(5px);
}

.current_page,
.dots {
	background: #6e5942;
	width: 35px;
	border-radius: 50%;
	cursor: pointer;
}

.active_ {
	background: #ccc;
}

.disable_ {
	background: #ccc;
}


.link {
	text-decoration: none !important;
}

.link:hover,
.link:focus {
	color: cadetblue !important;
}

.custom-scrollbar-css {
	height: 410px;
}


/* Custom Scrollbar using CSS */
.custom-scrollbar-css {
	overflow-y: scroll;
}

/* scrollbar width */
.custom-scrollbar-css::-webkit-scrollbar {
	width: 5px;
}

/* scrollbar track */
.custom-scrollbar-css::-webkit-scrollbar-track {
	background: #eee;
}

/* scrollbar handle */
.custom-scrollbar-css::-webkit-scrollbar-thumb {
	border-radius: 1rem;
	background-color: #f14e95;
	background-image: linear-gradient(to top, #f14e95 0%, #dd78a4 100%);
}


@keyframes rotating {
	from {
		transform: rotate(0);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes updown {
	0% {
		top: 150px;
	}

	50% {
		top: 120px;
	}

	100% {
		top: 150px;
	}
}

@keyframes wave-left-1 {
	0% {
		transform: rotate(-10deg);
	}

	100% {
		transform: rotate(10deg);
	}
}

@keyframes wave-left-2 {
	0% {
		transform: rotate(-14deg);
	}

	100% {
		transform: rotate(20deg);
	}
}

@keyframes wave-right-1 {
	0% {
		transform: rotate(10deg);
	}

	100% {
		transform: rotate(-10deg);
	}
}

@keyframes wave-right-2 {
	0% {
		transform: rotate(14deg);
	}

	100% {
		transform: rotate(-20deg);
	}
}

@keyframes left-right {
	0% {
		transform: translateX(8%);
	}

	100% {
		transform: translateX(0%);
	}
}

@keyframes right-left {
	0% {
		transform: translateX(0%);
	}



	100% {
		transform: translateY(100%);
	}
}


@keyframes mymoveleft {
	0% {
		transform-origin: bottom left;
		/* Poros di tengah */
		transform: rotate(-30deg);
		/* Rotasi 45 derajat */
	}

	50% {
		transform-origin: bottom left;
		/* Poros di tengah */
		transform: rotate(10deg);
		/* Rotasi 45 derajat */
	}

	100% {
		transform-origin: bottom left;
		/* Poros di tengah */
		transform: rotate(-30deg);
		/* Rotasi 45 derajat */
	}

}

@keyframes mymoveright {
	0% {
		transform-origin: bottom right;
		/* Poros di tengah */
		transform: rotate(30deg);
		/* Rotasi 45 derajat */
	}

	50% {
		transform-origin: bottom right;
		/* Poros di tengah */
		transform: rotate(-10deg);
		/* Rotasi 45 derajat */
	}

	100% {
		transform-origin: bottom right;
		/* Poros di tengah */
		transform: rotate(30deg);
		/* Rotasi 45 derajat */
	}

}

@keyframes zoom {
	0% {
		scale: 100%;
	}

	50% {
		scale: 108%;
	}

	100% {
		scale: 100%;
	}
}

@keyframes zoom-in {
	0% {
		scale: 50%;
	}

	100% {
		scale: 100%;
	}
}


@keyframes zoom-out {
	0% {
		scale: 160%;
	}

	100% {
		scale: 150%;
	}
}


.simply-countdown>.simply-section {
	padding: 30px;
	margin: 3px;
}

.simply-countdown>.simply-section .simply-word {

	font-size: 50%;
}

/* Media Query */
/* Extra Large */

@media (max-width:540px) {


	.harvey img {
		width: 175px;
		height: 175px;
		position: absolute;
		top: 120px;
		right: 0;
		left: 0;
		margin-inline: auto;
		border: #FF9800 solid 1px;
		animation: updown 1s ease infinite;
	}

	.isi-acara {
		margin-top: -70px;
	}

	@keyframes updown {
		0% {
			top: 120px;
		}

		50% {
			top: 90px;
		}

		100% {
			top: 120px;
		}
	}
}

@media (max-width: 430.5px) {

	.img1 img {
		width: 430px;
	}

	.img11 img {
		width: 430px;
	}

	.daun1a img {
		width: 280px;
	}

	.daun1b img {
		width: 280px;
	}

	.daun2a img {
		width: 250px;
	}

	.daun2b img {
		width: 250px;
	}

	.daun3a img {
		width: 190px;
	}

	.daun3b img {
		width: 190px;
	}

	.burung img {
		width: 80px;
		position: absolute;
		top: 50%;
		left: -20px;
	}

	.kupu-kupu img {
		width: 30px;
		position: absolute;
		top: 25%;
		right: 40px;
	}

	.monyet-balon img {
		width: 100px;
		position: absolute;
		top: 20px;
		left: 10px;
	}

	.teddy-balon img {
		width: 90px;
		position: absolute;
		top: 40px;
		right: 10px;
	}

	.tirai img {
		width: 350px;
		position: absolute;
		top: -15px;
		right: 0;
		left: 0;
		margin-inline: auto;
	}

	.harvey img {
		width: 175px;
		height: 175px;
		position: absolute;
		top: 120px;
		right: 0;
		left: 0;
		margin-inline: auto;
		border: #FF9800 solid 1px;
		animation: updown 1s ease infinite;
	}

	.isi-acara {
		margin-top: -50px;
	}

	@keyframes updown {
		0% {
			top: 120px;
		}

		50% {
			top: 90px;
		}

		100% {
			top: 120px;
		}
	}
}

@media (max-width:390px) {
	.img1 img {
		width: 390px;
	}

	.img11 img {
		width: 390px;
	}
}

@media (max-width: 375px) {
	.hero h1 {
		font-size: 55px;
	}

	.isi-acara h1 {
		font-size: 50px;
	}

	.hero h2 {
		font-size: 35px;
	}

	.isi-acara h4 {
		font-size: 1.5rem;
		margin-top: -10px;
	}

	.img1 img {
		width: 360px;
	}

	.img11 img {
		width: 360px;
	}

	.kupu-kupu img {
		width: 30px;
		position: absolute;
		top: 23%;
		right: 20px;
	}

	.harvey img {
		width: 140px;
		height: 140px;
		position: absolute;
		top: 110px;
		right: 0;
		left: 0;
		margin-inline: auto;
		border: #FF9800 solid 1px;
		animation: updown 1s ease infinite;
	}

	.monyet-balon {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 2;
		animation: zoom 7s ease infinite;
	}

	.monyet-balon img {
		width: 100px;
		position: absolute;
		top: 20px;
		left: 20px;
	}

	.teddy-balon {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 2;
		animation: zoom 7s ease infinite;
	}

	.teddy-balon img {
		width: 70px;
		position: absolute;
		top: 60px;
		right: 20px;
	}



	@keyframes updown {
		0% {
			top: 110px;
		}

		50% {
			top: 80px;
		}

		100% {
			top: 110px;
		}
	}
}