body{
	margin:0;
	font-family:'Montserrat',sans-serif;
	color:#3c3c3c;
	background:#f6f6f4;
}

h1,h2,h3{
	font-family:'Playfair Display',serif;
}

section {
	max-width: 540px;
	width: 100%;
	margin: 0 auto;
}

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

h2 {
    font-size: 2rem;
    line-height: 1em;
}

.btn{
	display:inline-block;
	margin-top:20px;
	padding:14px 30px;
	background:#0886a1;
	color:white;
	text-decoration:none;
	border-radius:40px;
}

.hero{
	text-align:center;
	position: relative;
	margin-bottom: 4rem;
	&:before {
		position: absolute;
		top: -84%;
		left: 0;
		width: 100%;
		height: 100%;
		content: "";
		background:url("images/back-glitter.png") no-repeat center bottom/cover;
		opacity: 0.9;
	}
	.container {
		position: relative;
		margin-top: 5rem;
		.names{
			font-size:3rem;
			line-height: 1em;
			margin: 1rem 0;

		}

		.names span{
			color:#0886a1;
		}

		.date{
			letter-spacing:3px;
		}

		.invite {
			margin: 3rem 0;
			p {
				max-width: 400px;
				margin: 0 auto;
				font-size: 1.2rem;
			}
			h2 {
				font-size: 2rem;
				line-height: 1em;
			}
		}


		.music-player {
			margin-top: 4rem;
		}

	}
	// .overlay {
	// 	position: relative;
	// }
	// .overlay {
	// 	background:rgba(255,255,255,0.85);
	// 	padding:40px;
	// 	border-radius:12px;
	// }



}


.event-box{
	display:flex;
	flex-direction:column;
	gap:40px;
	.event-item {
		p {
			font-size: 1.4rem;
			margin-bottom: 1rem;
		}
		h2 {
			margin: 0;
		}

	}
}


.btn-small{
	display:inline-block;
	margin-top:10px;
	padding:8px 16px;
	background:#0886a1;
	color:white;
	border-radius:20px;
	font-size:14px;
}

.countdown-section{
	text-align:center;
	margin-bottom: 4rem;
}

#countdown{
	display:flex;
	justify-content:center;
	gap:20px;
	font-family:'Playfair Display',serif;
}

#countdown span{
	font-size:2rem;
	font-weight:bold;
	display:block;
}

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

.gallery-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
}

.gallery img{
	width:100%;
	border-radius:8px;
}

.dresscode img,
.gift img{
	width:40px;
	margin-bottom:10px;
}

.rsvp{
	background:#0886a1;
	color:white;
	padding:60px 20px;
	text-align:center;
}

.btn-whatsapp{
	display:inline-block;
	margin-top:20px;
	padding:14px 30px;
	background:white;
	color:#0886a1;
	border-radius:30px;
	font-weight:bold;
}

footer{
	text-align:center;
	padding:30px;
	font-size:14px;
}

@media(min-width:768px){

	.names{
		font-size:4rem;
	}

	.gallery-grid{
		grid-template-columns:repeat(3,1fr);
	}

	.event-box{
		flex-direction:row;
		justify-content:center;
		gap:100px;
	}

}

.music-player{
	display:flex;
	flex-wrap: wrap;
	justify-content:center;
	.text-intro {
		max-width: 370px;
	}
}

.player-card{
	max-width:420px;
	width:100%;
	text-align:center;
}

.player-info h3{

	font-family:'Playfair Display',serif;
	margin:0 auto 5px;
	color:#3c3c3c;
}

.player-info p{

	font-size:14px;
	color:#777;
	margin: 0;
}

.player-controls{

	display:flex;
	align-items:center;
	gap:15px;
}

.play-btn{

	background:#0886a1;
	border:none;
	color:white;

	width:48px;
	height:48px;

	border-radius:50%;

	font-size:20px;

	cursor:pointer;

	display:flex;
	align-items:center;
	justify-content:center;

	transition:all .3s;
}

.play-btn:hover{

	transform:scale(1.05);
	background:#6f7e5f;

}

.progress-container{

	flex:1;
	height:6px;

	background:#e3e6df;
	border-radius:10px;

	position:relative;
	cursor:pointer;

}

#progress{

	height:100%;
	width:0%;

	background:#0886a1;
	border-radius:10px;

}

#progress-heart{
	position:absolute;
	top:50%;
	left:0%;
	transform:translate(-50%,-50%);
	font-size:24px;
	color:#0886a1;
	pointer-events:none;
	transition:left .1s linear;
}

#time{

	font-size:12px;
	color:#666;
	width:40px;

}


.scroll-indicator{
	position:fixed;
	bottom:40px;
	left:50%;
	transform:translateX(-50%);
	display:flex;
	flex-direction:column;
	align-items:center;
	color:#0886a1;
	font-size:14px;
	animation:fadeIn 2s;
}

.scroll-text{
	margin-bottom:0;
	letter-spacing:1px;
}

.scroll-arrow{
	font-size:28px;
	animation:scrollBounce 1.6s infinite;
}

/* animación flecha */

@keyframes scrollBounce{

	0%{transform:translateY(0)}
	50%{transform:translateY(10px)}
	100%{transform:translateY(0)}

}

/* fade inicial */

@keyframes fadeIn{

	0%{opacity:0}
	100%{opacity:1}

}