body {
            margin: 0;
            font-family: 'Playfair Display', serif;
            background: linear-gradient(to bottom right, #ffe6f0, #fff0f5);
            color: #5c0033;
            text-align: center;
        }

        /* NAVIGATION */
        nav {
            background-color: #ff99c8;
            padding: 15px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        nav a {
            text-decoration: none;
            color: white;
            font-weight: bold;
            margin: 0 20px;
            font-size: 18px;
            transition: 0.3s;
        }

        nav a:hover {
            color: #5c0033;
        }
		
		.middle-text {
		max-width: 550px;
		}

		/* Row Layout */
		.content-row {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 100px;
		}

		/* Photos */
		.side-photo {
			width: 180px;
			height: 230px;
			object-fit: cover;
			border-radius: 20px;
			box-shadow: 0 8px 20px rgba(0,0,0,0.15);
			transition: 0.3s;
		}

		.side-photo:hover {
			transform: scale(1.05);
		}
		
		.center-photo {
			width: 450px;        /* adjust size */
			margin: 25px 0;      /* spacing above and below */
			border-radius: 20px; 
			box-shadow: 0 10px 25px rgba(0,0,0,0.2);
		}

        /* HERO SECTION */
        .hero {
            padding: 100px 20px;
        }

        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
        }

        .hero p {
            font-size: 18px;
            max-width: 600px;
            margin: auto;
            margin-bottom: 40px;
        }

        .button {
            background-color: #ff4d94;
            color: white;
            padding: 15px 30px;
            border: none;
            border-radius: 30px;
            font-size: 18px;
            cursor: pointer;
            transition: 0.3s;
            text-decoration: none;
        }

        .button:hover {
            background-color: #ff1a75;
        }

        footer {
            margin-top: 80px;
            padding: 20px;
            background-color: #ff99c8;
            color: white;
        }
		
		.photo-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			max-width: 250px;
		}

		.photo-caption {
			margin-top: 12px;
			font-size: 14px;
			font-style: italic;
			color: #7a0044;
		}

		@media (max-width: 768px) {
		.content-row {
			flex-direction: column;
		}

		.side-photo {
			width: 200px;
			height: 250px;
		}
	}

	.page-header {
		padding: 80px 20px 40px;
		text-align: center;
	}

	.page-header h1 {
		font-size: 40px;
	}

	.page-header p {
		font-size: 18px;
		margin-top: 10px;
	}

	.reasons-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 60px;
		padding: 40px 20px 80px;
	}

	.reason-card {
		background-color: #fff0f5;
		padding: 30px;
		border-radius: 25px;
		width: 90%;
		max-width: 700px;
		box-shadow: 0 10px 30px rgba(0,0,0,0.1);
		text-align: center;
	}

	.reason-photo {
		width: 350px;          /* smaller size */
		max-width: 100%;
		border-radius: 20px;
		margin: 20px 0;
	}

	.reason-card h2 {
		margin-bottom: 15px;
	}

	.reason-card p {
		font-size: 18px;
	}
	
	.hidden-link {
    color: inherit;            
}

	.bemine-page {
	  padding: 90px 20px 120px;
	  text-align: center;
	}

	.bemine-title {
	  font-size: 46px;
	  margin-bottom: 10px;
	}

	.bemine-subtitle {
	  font-size: 18px;
	  margin: 20px 0 12px;
	}
	
	.under-subtitle {
	  font-size: 8px;
	  margin: 0 0 35px;
	}

	.bemine-buttons {
	  display: flex;
	  justify-content: center;
	  gap: 25px;
	  flex-wrap: wrap;
	}

	.button-no {
	  background-color: #b30059; /* darker pink */
	}

	.button-no:hover {
	  background-color: #8f0047;
	}

	.bemine-note {
	  margin-top: 30px;
	  font-size: 16px;
	  font-style: italic;
	  color: #7a0044;
	}

	.bemine-photo {
	  width: 500px;
	  max-width: 90%;
	  border-radius: 20px;
	  margin: 25px 0 10px;
	  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
	}
	
		.yes-header {
		padding: 100px 20px 60px;
		text-align: center;
	}

	.yes-header h1 {
		font-size: 48px;
		margin-bottom: 10px;
	}

	.yes-header p {
		font-size: 20px;
	}

	.date-details {
    background-color: #fff0f5;
    padding: 30px;
    border-radius: 20px;
    max-width: 500px;
    margin: 30px auto;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
	}

	.date-details ul {
		list-style: none;       /* removes bullets */
		padding: 0;
		margin: 0;
	}

	.date-details li {
		font-size: 20px;
		margin: 15px 0;
	}


	.plan-section {
		padding: 60px 20px;
		text-align: center;
	}

	.plan-section h2 {
		font-size: 32px;
		margin-bottom: 30px;
	}

	.plan-card {
		background-color: #fff0f5;
		padding: 40px;
		border-radius: 25px;
		max-width: 800px;
		margin: 0 auto;
		box-shadow: 0 10px 30px rgba(0,0,0,0.1);
	}

	.plan-photo {
		width: 500px;
		max-width: 100%;
		border-radius: 20px;
		margin-bottom: 20px;
	}
	.getaway-list {
		list-style: none;      /* removes bullets */
		padding: 0;
		margin: 40px auto;
		max-width: 900px;
	}

	.getaway-list li {
		display: flex;
		align-items: center;
		gap: 30px;
		background-color: #fff0f5;
		padding: 25px;
		border-radius: 20px;
		margin-bottom: 30px;
		box-shadow: 0 8px 20px rgba(0,0,0,0.1);
	}

	.getaway-list img {
		width: 200px;
		height: 150px;
		object-fit: cover;
		border-radius: 15px;
	}

	.getaway-text h3 {
		margin: 0 0 10px;
	}

	.getaway-text p {
		margin: 0;
		font-size: 18px;
	}

	.reveal-card {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 40px;
		border-radius: 25px;
		max-width: 900px;
		margin: 60px auto;
	}

	.reveal-photo {
		width: 280px;
		border-radius: 20px;
	}

	.reveal-text {
		max-width: 450px;
	}

	.reveal-text h3 {
		margin-bottom: 15px;
		font-size: 24px;
	}

	.reveal-text p {
		font-size: 20px;
	}


}