body,
html {
	overflow-x: clip;
}

body {
	margin: 0px;
	font-family: "Playfair Display", serif;
	background-color: #ebdacc;
	/* background-color: red; */
	color: #333;
	font-size: 17px;
	/* min-width: 100%; */
	max-width: 100vw;
}

.section-heading-container {
	display: flex;
	justify-content: center;
	text-align: center;
	padding-left: 3em;
	padding-right: 3em;
}

/*#region nav*/
.nav {
	position: sticky;
	/* width: 100%; */
	background-color: #ebdacc;
	height: 50px;
	display: flex;
	justify-content: space-between;
	height: 4em;
	align-items: center;
	padding-left: 2em;
	padding-right: 2em;
	z-index: 3;
}
.nav-left,
.nav-right {
	display: flex;
	align-items: center;
}
.nav-item {
	margin-left: auto;
	padding: 8px 16px;
	/* font-size: 22px; */
}
.nav-item img {
	max-width: 2em;
	max-height: 2em;
	padding: 0px;
}
#nav-logo {
	padding-right: 0px;
}
.nav-item a {
	display: inline;
	color: black;

	text-decoration: none;
	text-align: end;
}
/*#endregion */

/*#region landing*/
#landing {
	position: relative;
	width: 100%;
	height: 120vh;
	display: flex;
	flex-direction: row-reverse;
}

#landing-bg {
	/* background-position: right; */
	background-image: url("pp1.png");
	background-position-x: center;
	background-position-y: center;
	background-repeat: no-repeat;
	width: 75%;
	height: 100%;
	position: absolute;
	right: 0;
	background-size: cover;
}
.side-wave {
	width: 35%;
	height: 100%;
	position: absolute;
	left: 0;
	z-index: 2;
	--mask:
		radial-gradient(168.85px at calc(100% - 229.6px) 50%, #000 99%, #0000 101%)
			0 calc(50% - 164px)/100% 328px,
		radial-gradient(168.85px at calc(100% + 147.6px) 50%, #0000 99%, #000 101%)
			calc(100% - 82px) 50%/100% 328px repeat-y;
	-webkit-mask: var(--mask);
	mask: var(--mask);
	background-color: #fdf8f9;
	background-image: url("landing.svg");
	background-size: cover;
	background-position: center;
}
.pill {
	color: #e2d9cc;
	background-color: #d93b59;
	width: 25%;
	/* padding: 8em 1.7em; */
	border-radius: 280px;
	text-align: center;
	display: flow;
	min-height: 45vh;
	position: absolute;
	left: 15%;
	top: 5%;
	z-index: 5;
	anchor-name: --pill;
	padding-top: 8%;
	padding-bottom: 8%;
	padding-left: 2%;
	padding-right: 2%;
}

.pill .center {
	text-align: center;
}

.svg-container {
	width: 80%;
	height: 150px;
	resize: both;
	overflow: clip;
	/* border: 1px dashed #aaa; */
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: -30%;
}
.pill svg {
	max-width: 100%;
	height: auto;
}
.pill .book {
	margin-top: -33px;
	width: 50px;
}
.pill p {
	margin: 10px;
	font-size: 14px;
}
h2 {
	/* font-size: 2em; */
	margin-bottom: 20px;
	color: #a0522d;
}

#landing-logo {
	min-width: 10em;
	height: 10em;
	background-image: url("landing-logo.svg");
	position: absolute;
	/* left: -7%;
	bottom: -4%; */
	position-anchor: --pill;
	bottom: calc(anchor(bottom) - 4em);
	left: anchor(left);
	z-index: 5;
}

/*#endregion */

#events,
#dress-code {
	background-color: #fffaf5;
	height: 85vh;
	position: relative;
}

#events {
	anchor-name: --eventsDiv;
}

#events-top-left {
	width: max(16%, 8rem);
	/* height: 14em; */
	position: absolute;
	/* margin-left: -2em; */
	/* margin-top: -2.1em; */
	position-anchor: --eventsDiv;
	left: anchor(left);
	top: anchor(top);
	/* transform: translateY(1%); */
	z-index: 1;
}
#events-left {
	width: max(9%, 5rem);
	position: absolute;
	position-anchor: --dressCode;
	left: anchor(left);
	top: anchor(top);
	z-index: 1;
}

#events-top-right {
	width: max(10%, 6rem);
	position-anchor: --eventsDiv;
	position: absolute;
	top: calc(anchor(top) + 1%);
	/* right: calc(anchor(right) - 3%); */
	right: anchor(right);
	/* transform: translateX(20%); */
	z-index: 1;
}
#events-right2 {
	width: max(6%, 4rem);
	/* height: 14em; */
	position: absolute;
	/* margin-top: 75vh; */
	/* bottom: -5%; */
	/* margin-left: 88vw; */
	right: 0;
	/* transform: translateX(47%); */
	/* background-color: black; */
}
.btn-rsvp {
	background-color: #d93b59;
	margin: 5em 0 2em 0;
	width: 11em;
	height: 6em;
	border-radius: 3em;
}
.event-grid {
	padding: 3% 7%;
	/* display: grid; */
	justify-content: space-around;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: -11px;
	display: flex;
	height: 70%;
}

.event-card {
	/* background-color: #b7947e; */
	/* border: 1px solid #eee; */
	padding: 20px;
	/* border-radius: 1530px; */
	width: 19%;
	height: 51%;
	display: flow;
	justify-content: center;
	align-content: center;
	text-align: center;
	/* background-color: #ebdacc; */
	background-image: url("events-circle2.svg");
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: grab;
}

.event-card div {
	width: 100%;
	/* border: black; */
	height: 100%;
	display: flow;
	justify-content: center;
	align-content: center;
	text-align: center;
}
.event-date {
	display: block;
	font-family: "Rochester", cursive;
	font-size: 4.2em;
}

.event-date sup {
	font-family: "Playfair Display", serif;
	font-size: 0.5em;
	font-weight: bold;
}

.event-text {
	display: block;
	font-family: "Playfair Display", serif;
	font-size: 1.5em;
	font-weight: bold;
}
#dress-code {
	position: relative;
	anchor-name: --dressCode;
}
.dress-code {
	padding: 20px;
	border-radius: 8px;
}

#dress-code-bottom-right {
	/* height: 25em; */
	width: max(20%, 10rem);
	position: absolute;
	position-anchor: --dressCode;
	right: anchor(right);
	/* position-area: center span-inline-end; */
	bottom: anchor(bottom);
	/* margin-top: -10em; */
	z-index: 5;
	/* margin-left: 61vw; */
	/* right: 2%; */
	/* bottom: -15%; */
}

.dress-code-row {
	display: flex;
	justify-content: space-evenly;
}
.dress-code-event {
	max-width: 30%;
	text-align: center;
}
.dress-code-event h1 {
	font-family: "Rochester", cursive;
	text-align: center;
	font-weight: 100;
	margin-bottom: 0em;
}

#venue {
	background-color: #ebdacc;
	min-height: 100vh;
	z-index: 6;
	position: relative;
	anchor-name: --venue;
}

#venue-top {
	width: 30%;
	height: 25%;
	position: absolute;
	left: 70%;
	margin-top: -5em;
}
#venue-bottom-left {
	width: 16%;
	height: auto;
	position: absolute;
	bottom: -248px;
	left: -91px;
}

#venue .section-heading-container {
	padding-top: 1%;
}

.venue-content h1 {
	font-family: "Rochester", cursive;
	font-weight: 100;
	/* font-size: 36px; */
}
.venue-content {
	text-align: center;
	font-weight: 100;
}

#venue-side-div {
	background-color: #d93b59;
	position: absolute;
	border-radius: 300px;
	anchor-name: --venueSideDiv;
	position-anchor: --venue;
	height: calc(anchor-size(height) * 0.3);
	width: calc(anchor-size(width) * 0.35);
	bottom: calc(anchor(bottom) - 5em);
	right: calc(anchor(right) - 13%);
	z-index: 7;
}
#venue-side-logo {
	position: absolute;
	position-anchor: --venueSideDiv;
	width: calc((anchor-size(width) * 0.22));
	position-area: center;
	left: calc(anchor(left) - 46%);
	z-index: 8;
}

#venue-text-logo {
	position: absolute;
	width: calc((anchor-size(width) * 0.4));
	position-anchor: --venueSideDiv;
	position-area: center;
	left: calc(anchor(left) - 42%);
	z-index: 8;
}

#venue-details {
	margin: 2em 0em 2.7em;
}
#venue-map {
	width: 91%;
	display: flex;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
}
#venue-map iframe {
	border: 0;
	width: 80%;
	height: 60vh;
}
#guide {
	margin-top: 10%;
	background-color: #ebdacc;
}
.guide-content {
	padding: 0 9%;
	width: 65%;
}
#flower-container {
	background-color: #fffaf5;
}

#lavendar {
	width: 100vw;
	margin-top: 2em;
	anchor-name: --lavendar;
}

#rsvp {
	margin-top: -186px;
	background-color: #f4f4f4;
	min-height: 60vh;
	padding-left: 5%;
	/* width: 100%; */
	padding-bottom: 2em;
	background-color: #fffaf5;
	--mask:
		radial-gradient(223.06px at 50% 312.8px, #000 99%, #0000 101%)
			calc(50% - 272px) 0/544px 100%,
		radial-gradient(223.06px at 50% -176.8px, #0000 99%, #000 101%) 50%
			136px/544px 100% repeat-x;
	-webkit-mask: var(--mask);
	mask: var(--mask);
}
#rsvp h2 {
	color: #d93b59;
	margin-top: 0;
}
#rsvp-content {
	display: flex;
	padding-top: 2em;
}
#rsvp-yap {
	width: 50%;
	padding-top: 2em;
	padding-left: 4em;
}
#rsvp-form-wrapper {
	width: 50%;
	padding-left: 2em;
	padding-right: 2em;
	margin-top: 2em;
	text-align: center;
}
#rsvp-form {
	margin-left: auto;
	margin-right: auto;
}
#rsvp-form-wrapper iframe {
	width: 100%;
	height: 100%;
}

#countDown-wrapper {
	font-family: "Rochester", cursive;
	margin-top: 6%;
	margin-bottom: 6%;
}

#countdown {
	font-size: 6em;
	color: #d93b59;
	font-weight: bold;
	anchor-name: --countdownDay;
}

#countdown-label {
	/* padding-top: 1.2%; */
	font-size: 2.1em;
	font-family: "Playfair Display", serif;
	position: absolute;
	position-anchor: --countdownDay;
	left: calc(anchor(right) + 1%);
	top: calc(anchor(top) + 17px);
}

#mehendiUnderline,
#mameraUnderline,
#sangeetUnderline,
#muhratUnderline {
	width: 45%;
	margin-top: -0.5em;
	height: 30px;
}
#mameraUnderline,
#sangeetUnderline,
#muhratUnderline {
	width: 50%;
	height: 30px;
}
footer {
	text-align: center;
	padding: 40px 20px;
	font-size: 0.9em;
	color: #777;
}

input,
textarea {
	font-size: medium;
	font-family: "Playfair Display", serif;
	width: 50%;
	padding: 1em;
	margin: 10px auto;
	border: 1px solid #ccc;
	border-radius: 4px;
}
button {
	background-color: #a0522d;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}
#rsvp-btn {
	display: block;
	background-color: #fbf8f8;
	color: #d93b59;
	padding: 1em;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: large;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
}
#rsvp-btn-text {
	font-size: xx-large;
	font-family: "Playfair Display", serif;
	font-weight: bold;
}
#rsvp-btn:hover {
	background-color: #d93b59;
	color: #fbf8f8;
}

#rsvp-btn-text a {
	color: inherit;
	text-decoration: none;
}

.event-popup {
	/* top: 50%;
	left: 25%; */
	right: 20%;

	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 10; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0, 0, 0); /* Fallback color */
	background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.event-popup-content {
	background-color: #ebdacc;
	/* margin: 15% auto; */ /* 15% from the top and centered */
	padding: 3em 5em;
	border: 1px solid #888;
	width: 50%; /* Could be more or less, depending on screen size */
	border-radius: 1em;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.event {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 2em;
}
.event.right {
	flex-direction: row-reverse;
}
.event-title {
	font-family: "Rochester", cursive;
	/* font-size: 2em; */
	text-align: center;
	width: 30%;
	color: #a0522d;
	display: flex;
	align-items: center;
	/* width: 40%; */
}

.event-details {
	width: 65%;
}
.event-details.right {
	text-align: justify;
	text-align-last: right;
}

.event-details.left {
	text-align: justify;
	text-align-last: left;
}
.close {
	color: black;
	/* float: right; */
	font-size: 28px;
	font-weight: bold;
	margin: 10px;
	text-align: right;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}
.event-popup-content .section-heading-container h2 {
	font-family: "Rochester", cursive;
}
footer {
	margin: 2em;
	position: relative;

	color: #000;
}

#footer-left {
	width: 23%;
	position: absolute;
	left: -10%;
	top: 0;
}
#footer-right {
	width: 33%;
	position: absolute;
	right: -10%;
	top: 0;
}

@media only screen and (max-width: 600px) {
	.nav {
		display: flex;
		flex-wrap: wrap;
		padding: 0;
		margin: 0;
		font-size: large;
	}
	.nav-left {
		width: 100%;
		background-color: #ebdacc;
		display: flex;
		justify-content: center;
	}
	.nav-right {
		width: 100%;
		background-color: #ebdacc;
		display: flex;
		justify-content: space-around;
		height: 3em;
	}
	.nav-item {
		padding: 0;
		margin: 0;
	}
	.nav-item img {
		padding-right: 10px;
		padding-top: 1px;
	}

	#landing {
		flex-direction: column-reverse;
		min-height: max(210vh, 2000px);
	}
	#landing-bg,
	.side-wave {
		width: 100%;
		height: 50%;
	}
	#landing-bg {
		top: 0;
		background-position: center;
	}
	.side-wave {
		position: relative;
		mask: no-mask;
		width: 100vw;
		--mask: none;
	}
	.pill {
		position: absolute;
		top: 52%;
		left: 50%;
		transform: translateX(-50%);
		/* height: 30%; */
		width: 70%;
		/* padding: 134px 20px; */
		padding-top: 20%;
		padding-bottom: 22%;
	}
	#lastP {
		margin-bottom: 5em;
	}
	#events {
		height: auto;
		padding-top: 10%;
		/* margin-top: 30%; */
	}

	#events-left {
		transform: translateY(-34%);
	}
	.event-grid {
		/* flex-wrap: wrap; */
		flex-direction: column;
		min-height: 100dvh;
		justify-content: space-evenly;
	}
	.event-card {
		width: auto;
		background-position: center;
	}

	#dress-code {
		height: auto;
		padding-top: 20%;
	}

	.dress-code-row {
		flex-direction: column;
	}

	.dress-code .dress-code-row:last-child {
		margin-bottom: 3rem;
	}
	.dress-code-event {
		min-width: 100%;
		margin-bottom: 2em;
	}
	#venue {
		height: 125vh;
	}
	#venue-details {
		padding-left: 3em;
		padding-right: 3em;
		white-space: pre-line;
	}

	#venue-side-div {
		height: calc(anchor-size(height) * 0.17);
		width: calc(anchor-size(width) * 0.9);
		/* bottom: calc(anchor(bottom) - 1em); */
		left: calc(anchor(left) + 38%);
		z-index: 7;
		top: anchor(bottom);
		transform: translateY(-60%);
	}
	#guide {
		margin-top: 35%;
	}
	#rsvp {
		margin-top: -15%;
		--mask:
			radial-gradient(76.59px at 50% 104.5px, #000 99%, #0000 101%)
				calc(50% - 76px) 0/152px 100%,
			radial-gradient(76.59px at 50% -66.5px, #0000 99%, #000 101%) 50%
				38px/152px 100% repeat-x;
		-webkit-mask: var(--mask);
		mask: var(--mask);
		mask: var(--mask);
		min-height: 150vh;
		/* overflow-y: auto; */
	}

	#rsvp-content {
		flex-direction: column;
		height: auto;
	}

	#rsvp-form-wrapper {
		padding: 0;
		padding-right: 2em;
		width: 100%;
	}

	#rsvp-form-wrapper iframe {
		width: 80%;
		height: 100vh;
	}

	#footer-left,
	#footer-right {
		width: 60%;
	}
	#footer-right {
		bottom: 0;
		top: unset;
		width: 55%;
	}
	#footer-left {
		top: 0;
		bottom: unset;
		left: -25%;
		width: 50%;
	}
	.event-popup-content {
		background-color: #ebdacc;
		height: 50%;
		overflow-y: auto;
		margin: unset;
		padding: 2em 2em;
		border: 1px solid #888;
		width: 75%; /* Could be more or less, depending on screen size */
		border-radius: 1em;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: justify;
	}

	.event {
		flex-direction: column;
	}
	.event-title {
		width: 100%;
	}
	.event-details {
		width: 100%;
	}
	.event.right {
		flex-direction: column;
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 767px) {
	#landing {
		flex-direction: column-reverse;
		height: 230vh;
	}
	#landing-bg,
	.side-wave {
		width: 100%;
		height: 50%;
	}
	#landing-bg {
		top: 0;
		background-position: center;
	}
	.side-wave {
		position: relative;
		mask: no-mask;
		width: 100vw;
		--mask: none;
	}
	.pill {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 52%;
		/* height: 30%; */
		width: 70%;
		/* padding: 134px 20px; */
		padding-top: 22%;
		padding-bottom: 22%;
	}

	#pill-content {
		height: 100%;
		width: 80%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	#lastP {
		margin-bottom: 5em;
	}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}