/* 
 * Theme Name:  Eviva Weddings version 2.0
 *
 * */
.eviva-theme-body {
	color: #746972 !important;
	background-color: #fdfaff !important;
	/* background: linear-gradient(180deg, #000100 0%, #605e5e 100%); */
	font-family: "Cormorant Garamond", serif;
	font-weight: 300; /* This activates the Light variant */
	font-size: 2.3rem; /* Adjust as needed */
	line-height: 1.6;
}

.two-column {
	margin-top: 3rem;
	position: relative;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 20px;
	justify-content: center;
	align-items: center;
	text-align: center !important;
	img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	.hero-two {
		animation: fadeIn 5s ease-in-out;
		transform-style: preserve-3d;
	}

	.photo-hero-div {
		position: relative;
		display: inline;
		text-align: center;
	}

	.photo-hero-div img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.photo-hero-div div {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center; /* Centers content vertically */
		align-items: center; /* Centers content horizontally */
	}
	@media (max-width: 920px) {
		position: relative;
		display: block !important;
		/* grid-template-columns: repeat(1, 1fr); */
		padding: 0;
		margin-bottom: 1rem;
		justify-content: center;
		text-align: center;
		.hero-two {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 9999;
		}

		h2 {
			font-size: 60px !important;
		}
		img {
			position: absolute;
			top: 0;
			left: 0;
			width: 20%;
			height: 20%;
			object-fit: cover;
		}
	}
}

@keyframes levitate {
	0%,
	100% {
		transform: translateY(0) translateZ(80px) rotateX(8deg);
	}
	50% {
		transform: translateY(15px) translateZ(20px) rotateX(-6deg);
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
		transform: translateY(100px) translateZ(-300px) rotateX(30deg);
	}
	20% {
		opacity: 0.3;
		transform: translateY(0) translateZ(100px) rotateX(0deg);
	}
	50% {
		opacity: 0.5;
		transform: translateY(0) translateZ(150px) rotateY(15deg) rotateX(-10deg);
		text-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
	}
	80% {
		opacity: 0.8;
		transform: translateY(0) translateZ(50px) rotateY(-10deg) rotateX(5deg);
	}
	100% {
		opacity: 1;
		transform: translateY(0) translateZ(0) rotateX(0);
	}
}
.two-column img {
	width: 100%;
	height: 100%;
	object-fit: fill;
}
.two-column span {
	font-size: 18px;
}
.two-column h2 {
	font-size: 82px;
}

.theme-button {
	background-color: #746972;
	color: #fdfaff !important;
	font-size: 16px;
	text-align: center;
	border: 1px solid #746972;
	padding: 5px;
	border-radius: 3px;
}
.two-column-brown {
	margin-top: 3rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: center;
	text-align: center !important;
	background-color: #dbd6dc !important;
	@media (max-width: 920px) {
		display: flex !important;
		flex-direction: column;
		grid-template-columns: none;
		align-items: center;
		text-align: center !important;
		background-color: #dbd6dc !important;
		justify-content: center;
		justify-content: center;
		h2 {
			font-size: 60px !important;
		}
		.hero-text h5 {
			font-size: 30px !important;
		}
	}
	img {
		width: 80%;
		height: 80%;
		object-fit: fill;
	}

	p {
		font-size: 16px;
	}
	h5 {
		opacity: 0;
		font-size: 24px;
		transform: translateY(80px) rotateX(-70deg);
		animation: letterPop 0.9s cubic-bezier(0.175, 0.885, 0.32, 0.1275) forwards;
		animation-delay: calc(var(--char-index) * 0.08s);
		text-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
		animation-timeline: view();
		animation-range: entry 10% cover 30%;
	}
}

@keyframes letterPop {
	to {
		opacity: 1;
		transform: translateY(0) rotateX(0);
	}
}

.single-column {
	margin-top: 2rem;
	display: block;
}
.single-column img {
	width: 100%;
	object-fit: fill;
}

.image-seperator {
	opacity: 0.5;
}

.brown-background {
	background-color: #746972 !important;
	color: #fdfaff;
}

@media (max-width: 920px) {
	.testimonials h2 {
		font-size: 40px !important;
	}
}
.testimonials {
	justify-content: center;
	text-align: center;

	h2 {
		font-size: 96px;
	}

	span {
		font-size: 18px;
		font-weight: thin;
	}

	.testimonials-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		border-bottom: 1px solid #fdfaff;
		justify-content: center;
	}

	.testimonials-grid-last {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.testimonials-grid h6 {
		padding: 2rem;
		text-align: center;
		font-weight: bold;
		font-size: 24px;
		animation: levitate 4s infinite ease-in-out;
		transform-style: preserve-3d;
		text-shadow:
			0 10px 30px rgba(0, 0, 0, 0.6),
			0 0 60px rgba(255, 255, 255, 0.4);
	}

	.testimonials-grid-last h6 {
		padding: 2rem;
		text-align: center;
		font-weight: bold;
		font-size: 24px;
		animation: levitate 4s infinite ease-in-out;
		transform-style: preserve-3d;
		text-shadow:
			0 10px 30px rgba(0, 0, 0, 0.6),
			0 0 60px rgba(255, 255, 255, 0.4);
	}
}

.wedding-process {
	text-align: center;
	padding: 3rem;
}

.wedding-process h2 {
	font-size: 62px;
}

.wedding-process h5 {
	font-size: 27px;
	font-weight: bold;
}
.wedding-process p {
	font-size: 20px;
}

.grid-box {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	background-color: #d7cddf !important;
	justify-content: center;
	animation-duration: 3s;
	@media (max-width: 920px) {
		grid-template-columns: repeat(1, 1fr);
	}
	span {
		font-size: 16px;
	}
	h5 {
		font-size: 48px;
	}
	/* padding: 2rem #fdfaff; */
	p {
		text-align: center;
		font-size: 24px;
	}
	.grid-tile {
		border-right: 1px solid #746972;
		border-top: 1px solid #fdfaff;
		padding: 20px;
		animation: moveInPlace linear;
		animation-timeline: view();
		animation-range: entry 10% cover 30%;
	}
}
@keyframes moveInPlace {
	from {
		opacity: 0;
		transform: translateX(-250px);
	}
	to {
		opacity: 1;
		transform: translateX(0px);
	}
}