:root {
	--pink: #f14e95;
	--pink2: #e6a0ad;
	--blue: rgb(61, 103, 164);
	--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;
	margin: 0;
	padding: 0;

}



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

.pembungkus {
	width: 500px !important;
	background-image: url(img/asset/background.jpg);
	background-position: center;
	background-size: cover;
	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-hidden {
	display: none !important;
}

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


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

.quotes,
.mempelai,
.akad,
.resepsi,
.rsvp,
.gifts,
.thanks {
	position: absolute;
	z-index: 24;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin-inline: center;
	margin-top: -50px;
}


.quotes h1 {
	font-family: 'Trajan Pro', sans-serif;
	color: #e6a0ad;
	margin-bottom: 50px;
	font-size: 3rem;
	color: rgb(61, 103, 164);
}

.mempelai h1 {
	font-family: 'Trajan Pro', sans-serif;
	color: #e6a0ad;
	margin-bottom: 30px;
	font-size: 3rem;
	color: rgb(61, 103, 164);
}

.akad h1,
.resepsi h1,
.rsvp h1,
.gifts h1,
.thanks h1 {
	font-family: 'Trajan Pro', sans-serif;
	color: #e6a0ad;
	margin-bottom: 30px;
	font-size: 3rem;
	color: rgb(61, 103, 164);
}

.rsvp h2,
.gifts h2,
.thanks h2 {
	font-family: 'Sacramento';
	color: var(--pink2);
	font-size: 1.8rem;
}

.rsvp p,
.gifts p,
.thanks p {
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
	font-size: 14px;
	color: rgb(61, 103, 164);
	padding-left: 50px;
	padding-right: 50px;
	line-height: 1.2;
}

.hadiah li img {
	width: 100px;
	margin-bottom: 10px;
}

.hadiah .modal h2 {
	color: var(--pink2);
	font-family: 'Luxia', sans-serif;
	font-size: 2rem;
	font-weight: 400;
}

.hadiah .modal-content {
	background-color: #141414;
}

.hadiah .modal .btnclose {
	border: none;
	background-color: #141414;
	color: #eee;
}

.akad h2,
.resepsi h2 {
	font-size: 38px;
	line-height: 1.2;
	font-family: 'Sacramento';
	color: #e6a0ad;
}

.quotes h2 {
	font-family: 'Great Vibes', cursive;
	color: #e6a0ad;
}

.quotes p {
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
	font-size: 14px;
	color: rgb(61, 103, 164);
	padding-left: 60px;
	padding-right: 60px;

}

.mempelai p {
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
	font-size: 14px;
	color: rgb(61, 103, 164);
	padding-left: 50px;
	padding-right: 50px;
}

.mempelai h3 {
	font-family: 'Great Vibes', cursive;
	color: #e6a0ad;
	font-size: 1.5rem;
}

.thanks h3 {
	text-shadow: var(--shadow);
	font-family: 'Trajan Pro', sans-serif;
	font-weight: bold;
	font-size: 1.8rem;
	color: var(--pink2);
}

.thanks a {
	text-decoration: none;
	font-size: 10px;
}


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

.generate {
	border-radius: 5px;
}

.hero h4,
.hero p {
	text-shadow: var(--shadow);
	color: rgb(61, 103, 164);
}

.hero h1 {
	font-family: 'Great Vibes', cursive;
	font-size: 3rem;
	color: #e6a0ad;
	margin-bottom: -10px;
}

.hero h5 {
	font-family: 'Great Vibes', cursive;
	font-size: 1rem;
	color: #e6a0ad
}

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

.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: #e6a0ad;
}

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

.animate-right img {
	transform-origin: top left;
	animation: wave-right 4s ease-in-out infinite alternate;
}

.animate-left img {
	transform-origin: bottom right;
	animation: wave-left 4s ease-in-out infinite alternate;
}

.frame-top-left {
	width: 50%;
	position: absolute;
	top: 0;
	left: 0
}

.frame-top-right {
	width: 50%;
	position: absolute;
	top: 0;
	right: 0
}

.frame-bottom-left {
	width: 50%;
	position: absolute;
	bottom: 60px;
	left: 0
}

.frame-bottom-left-2 {
	width: 50%;
	position: absolute;
	bottom: 0;
	left: 0
}

.frame-bottom-right {
	width: 50%;
	position: absolute;
	bottom: 60px;
	right: 0
}

.frame-bottom-right-2 {
	width: 50%;
	position: absolute;
	bottom: 0;
	right: 0
}

.menu {
	position: absolute;
	z-index: 22;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 80px;
	/*	background-color: #46a474;*/
	overflow: 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: #e6a0ad;
	border-radius: 15px;
}

.hitung-mundur {
	color: white;
}

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

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

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


.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%);
}



.footer-scroll {
	overflow-x: auto;
	white-space: nowrap;
	-ms-overflow-style: none;
	/* IE dan Edge */
	scrollbar-width: none;
	/* Firefox */

}

.footer-scroll::-webkit-scrollbar {
	display: none;
	/* Chrome, Safari, Opera */
}

.footer-item {
	flex: 0 0 20%;
	text-align: center;

}

.footer-item a {
	color: rgb(96 124 164);
	text-decoration: none;
	display: block;
	font-size: 0.8rem;
}

.footer-item i {
	font-size: 1.2rem !important;
}

.footer-item.active a {
	color: white;
	/* Warna aktif */
}

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

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

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

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


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

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

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

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

	font-size: 50%;
}

/* Media Query */
/* Extra Large */
@media (min-width:720px) {
	.pembungkus {
		width: 380px !important;
	}
}

@media (max-width:540px) {
	.pembungkus {
		width: 500px !important;
	}

}

@media (max-width: 430.5px) {}

@media (max-width: 375px) {}