/* How It Works Page Styles */
body {
font-family: 'Poppins', sans-serif;
background-color: #fff0e6;
color: #183b4e;
line-height: 1.6;
margin: 0;
padding: 0;
}
/* Hero Section */
.works-hero {
padding: 80px 0 40px 0;
text-align: center;
}
.works-hero h1 {
font-family: 'Caprasimo', serif;
font-size: 3.5rem;
margin-bottom: 20px;
color: #183b4e;
}
/* Main flowing content */
.main-content {
padding: 60px 0;
position: relative;
overflow: hidden;
}
.content-section {
margin-bottom: 80px;
}
.content-section h2 {
font-family: 'Caprasimo', serif;
font-size: 2.2rem;
margin-bottom: 30px;
color: #183b4e;
text-align: center;
}
.content-section p {
font-size: 1.1rem;
margin-bottom: 20px;
text-align: left;
}
.content-section p:last-child {
margin-bottom: 0;
}
/* Call to Action Section - Neon Style */
.cta-section {
padding: 120px 20px;
text-align: center;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 30px;
margin: 60px 20px;
color: #183b4e;
}
.neon-link {
text-decoration: none;
display: block;
cursor: pointer;
position: relative;
z-index: 3;
margin-bottom: 20px;
}
.neon {
font-family: 'Monoton', cursive;
font-size: 3.2rem;
color: #283f59;
position: relative;
font-weight: 400;
letter-spacing: 6px;
margin: 0;
text-shadow:
0 0 3px #283f59,
0 0 6px #283f59,
0 0 9px #1e2f42;
transition: all 0.3s ease;
line-height: 1.2;
}
.neon:hover {
color: #3a5b7f;
text-shadow:
0 0 3px #3a5b7f,
0 0 6px #3a5b7f,
0 0 9px #283f59,
0 0 12px #283f59;
animation: neon-flicker 0.5s ease-in-out infinite alternate;
}
.flicker-slow {
animation: flicker 3s linear infinite;
}
.flicker-fast {
animation: flicker 1s linear infinite;
}
.cta-section p {
font-size: 1.2rem;
max-width: 600px;
}
@keyframes flicker {
 0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
opacity: 0.99;
 }
 20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
opacity: 0.4;
 }
}
@keyframes neon-flicker {
 0% {
text-shadow:
0 0 3px #3a5b7f,
0 0 6px #3a5b7f,
0 0 9px #283f59,
0 0 12px #283f59;
 }
 100% {
text-shadow:
0 0 2px #3a5b7f,
0 0 4px #3a5b7f,
0 0 6px #283f59;
 }
}
/* Responsive Design */
@media (max-width: 768px) {
.container {
padding: 0 15px;
}
.works-hero {
padding: 60px 0 30px 0;
}
.works-hero h1 {
font-size: 2.8rem;
}
.main-content {
padding: 40px 0;
}
.content-section {
margin-bottom: 60px;
}
.cta-section h2 {
font-size: 2rem;
}
.neon {
font-size: 2.2rem;
letter-spacing: 3px;
}
.cta-section {
padding: 80px 15px;
margin: 40px 15px;
}
.cta-section p {
font-size: 1.1rem;
}
}