body {
font-family: 'Roboto', sans-serif;
background-color: #f5f5f9;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-image: linear-gradient(135deg, #a18cd1, #fbc2eb);
}

.container {
width: 80%;
max-width: 1000px;
text-align: center;
background-color: #f4f4f9;
padding: 40px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease forwards;
}

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

h1 {
color: #4B0082;
margin-bottom: 20px;
font-size: 2.5em;
animation: textPop 1s ease forwards;
}

p 

color: #555;
margin-bottom: 20px;
font-size: 1.2em;
}

.button-container {
margin-bottom: 20px;
}

.button {
margin: 0 10px;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 30px;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
background-color: #4B0082;
color: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.button:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.features {
text-align: left;
margin-top: 20px;
}

.features h2 {
color: #4B0082;
}

.feature-item {
margin-bottom: 20px;
padding: 20px;
background-color: #fff;
border: 2px solid #4B0082;
border-radius: 10px;
transition: all 0.3s ease;
}

.feature-item:hover {
background-color: #f0f0f0;
transform: scale(1.02);
}

.feature-item h3 {
color: #4B0082;
margin-bottom: 10px;
}

.feature-item p {
color: #666;
}

@keyframes textPop {
0% {
transform: scale(0.8);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}