:root {
	--darkText: #34495E;
	--blueText: #3498DB;
	--greenText: #2ECC71;
	--greenHover: #2bb966;
	--shadow-button: 0px 8px 15px #2ecc708e;
	--shadow-card: 0px 8px 15px #cfcfcf;
	--bronze: #CD7F32;
	--silver: #C0C0C0;
	--gold: #FFD700;
	--platinum: #E5E4E2;
}

@font-face {
	font-family: titleFont;
	src: url(/fonts/tt6804m_.ttf);
}

@font-face {
	font-family: subtitleFont;
	src: url(/fonts/HUM521L.ttf);
}

@font-face {
	font-family: poppins;
	src: url(/fonts/Poppins/Poppins-Medium.ttf);
}

* {
	word-wrap: break-word!important;
}

html,body {
	width: 100%!important;
	height: 100%!important;
	margin: 0!important;
	padding: 0!important;
	
}

h1,h2,h3,h4,h5,h6 {
	font-family: poppins;
	/* color: var(--blueText); */
}

p,html,body {
	font-size: 16px;
	font-family: subtitleFont;
}

.overlay::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	background-color: rgba(0, 0, 0, .3);
}

a:hover {
	color: var(--greenText) !important;
}

.mobile-show {
	display: none;
}

.mobile-hide {
	display: inherit;
}

.blue-color {
	color: var(--blueText);
}

.title {
	text-align: center;
}

.title h1 {
	font-size: 60px;
}

.title h2 {
	font-family: poppins;
}

.title p {
	font-family: subtitleFont;
	font-size: 25px;
}

.primary-button {
	font-family: poppins;
	background-color: var(--greenText);
	color: white!important;
	text-decoration: none;
	padding: 1em 1.5em;
	box-shadow: var(--shadow-button);
}

.primary-button:hover {
	background-color: var(--greenHover);
	color: white!important;
}

.bg-bronze {
	background-color: var(--bronze);
	color: white;
}

.bg-silver {
	background-color: var(--silver);
	color: white;
}

.bg-gold {
	background-color: var(--gold);
	color: white;
}

.bg-platinum {
	/* background-color: var(--platinum); */
	background-image: url('/img/24052.jpg');
	background-size: cover;
	background-position: center;
	color: #FFA500;
}

.theme-card {
	border-radius: 10px;
	width: 100%;
	height: auto;
	overflow: hidden;
	box-shadow: var(--shadow-card);
	position: relative;
}

.theme-card .packet {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: .3em 1em;
	border-radius: 30px;
	font-weight: 500;
	text-transform: capitalize;
}

.theme-card img {
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 768px) {
	.mobile-show {
		display: inherit;
	}

	.mobile-hide {
		display: none;
	}

	/* Footer */
		.foot-img {
			text-align: center;
		}

		.foot-img img{
			width: 90%;
		}
	/* End Footer */
}

/* Header */
	/* Navbar */
		.navbar {
			position: fixed!important;
			left: 0;
			top: 0;
			padding: 0!important;
			width: 100%;
			transition: background 0.6s ease-in;
			z-index: 99999;
			background-color: transparent;
		}

		.navbar .navbar-brand {
			font-size: 2.5rem;
		}

		.navbar .navbar-toggler {
			position: relative;
			height: 50px;
			width: 50px;
			border: none;
			cursor: pointer;
			outline: none;
		}

		.navbar .navbar-toggler .menu-icon-bar {
			position: absolute;
			left: 15px;
			right: 15px;
			height: 2px;
			background-color: var(--darkText);
			opacity: 0;
			-webkit-transform: translateY(-1px);
			-ms-transform: translateY(-1px);
			transform: translateY(-1px);
			transition: all 0.3s ease-in;
		}

		.navbar .navbar-toggler .menu-icon-bar:first-child {
			opacity: 1;
			-webkit-transform: translateY(-1px) rotate(45deg);
			-ms-sform: translateY(-1px) rotate(45deg);
			transform: translateY(-1px) rotate(45deg);
		}

		.navbar .navbar-toggler .menu-icon-bar:last-child {
			opacity: 1;
			-webkit-transform: translateY(-1px) rotate(135deg);
			-ms-sform: translateY(-1px) rotate(135deg);
			transform: translateY(-1px) rotate(135deg);
		}

		.navbar .navbar-toggler.collapsed .menu-icon-bar {
			opacity: 1;
		}

		.navbar .navbar-toggler.collapsed .menu-icon-bar:first-child {
			-webkit-transform: translateY(-7px) rotate(0);
			-ms-sform: translateY(-7px) rotate(0);
			transform: translateY(-7px) rotate(0);
		}

		.navbar .navbar-toggler.collapsed .menu-icon-bar:last-child {
			-webkit-transform: translateY(5px) rotate(0);
			-ms-sform: translateY(5px) rotate(0);
			transform: translateY(5px) rotate(0);
		}

		.navbar-light .navbar-nav .nav-link {
			position: relative;
			font-size: 18px;
			color: white;
		}

		.navbar-light .navbar-nav .nav-link:focus {
			color: var(--darkText);
		}

		.navbar-light .navbar-nav .nav-link:hover {
			color: var(--greenText);
		}

		.navbar .dropdown-menu {
			padding: 0;
			background-color: white;
		}

		.navbar .dropdown-menu .dropdown-item {
			position: relative;
			padding: 10px 20px;
			color: var(--darkText);
			font-size: 18px;
			border-bottom: 1px solid rgba(255, 255, 255, .1);
			transition: color 0.2s ease-in;
		}

		.navbar .dropdown-menu .dropdown-item:last-child {
			border-bottom: none;
		}

		.navbar .dropdown-menu .dropdown-item:hover {
			background: transparent;
			color: var(--blueText);
		}

		.navbar .dropdown-menu .dropdown-item::before {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			top: 0;
			width: 5px;
			background-color: var(--blueText);
			opacity: 0;
			transition: opacity 0.2s ease-in;
		}

		.navbar .dropdown-menu .dropdown-item:hover::before {
			opacity: 1;
		}

		.navbar.fixed-top {
			position: fixed;
			-webkit-animation: navbar-animation 0.6s;
			animation: navbar-animation 0.6s;
			background-color: white;
		}

		.navbar.fixed-top .nav-link {
			color: var(--darkText);
		}

		.navbar.fixed-top.navbar-light .navbar-nav .nav-link.active,
		.navbar.navbar-light .navbar-nav .nav-link.active {
			color: var(--greenText);
		}

		.navbar-nav .show > .nav-link {
			color: var(--greenText)!important;
		}

		.login-button {
			padding: 0 1em;
		}

		.login-button a {
			background-color: var(--greenText);
			color: white!important;
			font-weight: 500;
			width: 100px;
			height: 20px;
			text-align: center;
			box-shadow: var(--shadow-button);
		}

		.login-button a:hover {
			background-color: var(--greenHover);
		}

		@media screen and (max-width: 768px) {
			.navbar-brand {
				margin-left: 20px;
			}

			.navbar-nav {
				padding: 0 20px;
				background-color: white;
			}

			.navbar.fixed-top .navbar-nav {
				background: transparent;
			}
		}

		@media screen and (min-width: 767px) {
			.navbar-light .navbar-nav .nav-link {
				padding: 23px 15px;
			}

			.navbar-light .navbar-nav .nav-link:hover::after {
				-webkit-transform: scaleX(1);
				-ms-transform: scaleX(1);
				transform: scaleX(1);
			}

			.dropdown-menu {
				min-width: 200px;
				-webkit-animation: dropdown-animation 0.3s;
				animation: dropdown-animation 0.3s;
				-webkit-transform-origin: top;
				-ms-transform-origin: top;
				transform-origin: top;
			}
		}

		@-webkit-keyframes navbar-animation {
			0% {
				opacity: 0;
				-webkit-transform: translateY(-100%);
				-ms-transform: translateY(-100%);
				transform: translateY(-100%);
			}
			100% {
				opacity: 1;
				-webkit-transform: translateY(0);
				-ms-transform: translateY(0);
				transform: translateY(0);
			}
		}

		@keyframes navbar-animation {
			0% {
				opacity: 0;
				-webkit-transform: translateY(-100%);
				-ms-transform: translateY(-100%);
				transform: translateY(-100%);
			}
			100% {
				opacity: 1;
				-webkit-transform: translateY(0);
				-ms-transform: translateY(0);
				transform: translateY(0);
			}
		}

		@-webkit-keyframes dropdown-animation {
			0% {
				-webkit-transform: scaleY(0);
				-ms-transform: scaleY(0);
				transform: scaleY(0);
			}
			75% {
				-webkit-transform: scaleY(1.1);
				-ms-transform: scaleY(1.1);
				transform: scaleY(1.1);
			}
			100% {
				-webkit-transform: scaleY(1);
				-ms-transform: scaleY(1);
				transform: scaleY(1);
			}
		}

		@keyframes dropdown-animation {
			0% {
				-webkit-transform: scaleY(0);
				-ms-transform: scaleY(0);
				transform: scaleY(0);
			}
			75% {
				-webkit-transform: scaleY(1.1);
				-ms-transform: scaleY(1.1);
				transform: scaleY(1.1);
			}
			100% {
				-webkit-transform: scaleY(1);
				-ms-transform: scaleY(1);
				transform: scaleY(1);
			}
		}
	/* End Navbar */

	.header-area {
		background:url(/img/wedding_background.jpg);
		background-size: cover;
		position: relative;
		z-index: 1;
		height: 100vh;
	}

	.header-area::before {
		content: " ";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		/* background-color: rgba(46, 204, 113, .8); */
		/* background-color: rgb(0, 0, 0, .6); */
		background-color: rgb(44, 62, 80, .8);
		z-index: -1;
	}
/* End Header */

/* Main */
	html, body {
		height: auto;
	}
	main {
		position: relative;
  		z-index: 2;
	}

	.mengapa .card img {
		width:50%;
		margin:auto auto 10px auto;
	}
/* End Main */

/* Footer */
	footer {
		background-color: #2C3E50;
		color: white;
	}

	footer .sosmed {
		font-size: 20px;
	}

	footer .sosmed a i {
		color: white;
	}

	.facebook i, .twitter i, .youtube i, .instagram i {
		transition: color 0.2s ease-in;
	}

	.facebook:hover > i {
		color:#4267B2;
	}

	.twitter:hover > i {
		color: #00acee;
	}

	.youtube:hover > i {
		color: #FF0000;
	}

	.instagram:hover > i {
		background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
		-webkit-background-clip: text;
				/* Also define standard property for compatibility */
				background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	footer .navbar-nav {
		background-color: inherit;
	}

	footer .quote {
		color: white;
	}
/* End Footer */