:root {
--color-primary: #1E3A8A;
--color-secondary: #9333EA;
--color-accent: #4F46E5;
--color-text: #ffffff;
--color-button: #4F46E5;
--color-button-hover: #9333EA;
--color-link-hover: #FACC15;
} body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
color: var(--color-text);
margin: 0;
padding: 0;
} .container,
.row,
.section {
border: none;
box-shadow: none;
} .header,
.site-header,
.navbar {
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
color: var(--color-text);
} .hero {
text-align: center;
padding: 100px 20px;
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
color: var(--color-text);
} .features {
padding: 80px 20px;
background: linear-gradient(135deg, var(--color-accent), var(--color-secondary));
} .how-it-works {
padding: 80px 20px;
background: linear-gradient(135deg, var(--color-secondary), #D946EF);
} .testimonials {
padding: 80px 20px;
background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
} .cta {
padding: 80px 20px;
background: linear-gradient(135deg, #FACC15, #F97316);
text-align: center;
} .button {
background: var(--color-button);
color: var(--color-text);
padding: 12px 24px;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s ease-in-out;
}
.button:hover {
background: var(--color-button-hover);
} .navbar a {
color: var(--color-text);
text-decoration: none;
font-weight: 500;
padding: 10px 20px;
transition: color 0.3s;
}
.navbar a:hover {
color: var(--color-link-hover);
} .footer {
text-align: center;
padding: 20px;
font-size: 14px;
opacity: 0.8;
} @media (max-width: 768px) {
.container {
padding: 10px;
}
.navbar {
flex-direction: column;
text-align: center;
}
.hero,
.features,
.how-it-works,
.testimonials,
.cta {
padding: 40px 20px;
}
} @media (max-width: 480px) {
input {
font-size: 16px !important;
}
}