body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
background-color: #fff0f5;
color: #333;
    }
header {
background-color: #ffb6c1;
padding: 2rem;
text-align: center;
    }
header h1 {
font-size: 2.5rem;
margin-top: 0;
color: #fff;
    }
.hero {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
    }
.hero img {
max-width: 400px;
width: 100%;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }
.hero h2 {
margin-top: 1.5rem;
font-size: 1.8rem;
color: #c71585;
text-align: center;
    }
.hero p {
max-width: 600px;
text-align: center;
font-size: 1.1rem;
line-height: 1.6;
    }
.features {
background-color: #fff;
padding: 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
    }
.feature {
background-color: #ffe4e1;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
.feature h3 {
color: #d63384;
    }
.cta {
text-align: center;
padding: 2rem;
background-color: #ff69b4;
color: white;
    }
.cta button {
background-color: white;
color: #ff69b4;
border: none;
padding: 1rem 2rem;
font-size: 1rem;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease;
    }
.cta button:hover {
background-color: #ffe4e1;
    }
.cta button:focus {
background-color: #ffcdc7;
outline: none;
box-shadow: #333 0 0 0 3px;
    }
.cta button:active {
background-color: #fd7e70a6;
outline: none;
shadow: #333 0 0 0 3px;
    }
footer {
text-align: center;
padding: 1rem;
font-size: 0.9rem;
background-color: #f8f8f8;
    }