body{
font-family:Arial,sans-serif;
margin:0;
background:linear-gradient(to bottom,#ffe4ef,#ffc1dc);
color:#333;
overflow-x:hidden;
}
header{
display:flex;
justify-content:space-between;
padding:20px 8%;
background:rgba(255,255,255,.5);
backdrop-filter:blur(10px);
position:sticky;
top:0;
}
header h1{
color:#ff4f8b;
}
nav a{
margin-left:20px;
text-decoration:none;
color:#ff4f8b;
font-weight:bold;
}
.hero{
min-height:90vh;
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
padding:60px 8%;
}
.text h2{
font-size:60px;
color:#d63384;
}
.text p{
font-size:20px;
line-height:1.7;
}
button{
background:#ff4f8b;
border:none;
padding:16px 28px;
border-radius:20px;
color:white;
font-size:18px;
cursor:pointer;
}
.card{
background:rgba(255,255,255,.5);
padding:25px;
border-radius:30px;
box-shadow:0 10px 30px rgba(0,0,0,.1);
}
.card img{
width:100%;
height:320px;
object-fit:cover;
border-radius:20px;
}
footer{
text-align:center;
padding:40px;
background:rgba(255,255,255,.4);
}
@media(max-width:900px){
.hero{
grid-template-columns:1fr;
}
.text h2{
font-size:42px;
}
}