body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #000;
color: #fff;
line-height: 1.6;
text-align: center;
padding-bottom: 120px; /* Prevent content from hiding under the footer */
}
header, section {
padding: 20px;
text-align: center;
max-width: 1200px;
margin: 0 auto;
}
h1, h2, h3 {
margin-bottom: 10px;
}
.cta-button {
display: inline-block;
background: #ffcc00;
color: #000;
padding: 15px 25px;
margin: 10px auto;
font-weight: bold;
text-decoration: none;
border-radius: 5px;
border: none;
}
video {
width: 100%;
max-width: 800px;
height: auto;
margin: 20px auto;
display: block;
}
.intent-buttons {
display: flex;
flex-direction: column;
align-items: center;
}
.intent-buttons a {
display: inline-block;
margin: 10px auto;
max-width: 300px;
}
.faq, .testimonials {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.faq p {
text-align: left;
}
.bonus-wrapper {
margin: 20px auto;
text-align: center;
max-width: 800px;
}
.bonus-wrapper img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.badge {
margin-top: 20px;
font-size: 14px;
background: #222;
padding: 10px;
display: inline-block;
border: 1px solid #fff;
border-radius: 5px;
}
.form-optin {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-top: 20px;
}
.form-optin input[type="email"] {
padding: 10px;
width: 90%;
max-width: 400px;
}
.form-optin button {
padding: 10px 20px;
background: #fff;
color: #000;
border: none;
font-weight: bold;
}
.nav {
display: flex;
justify-content: right;
padding: 10px;
}
.nav a, .nav span {
color: #fff;
margin: 0 15px;
font-weight: bold;
text-decoration: none;
}
.carousel-container {
max-width: 800px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.carousel {
display: flex;
transition: transform 0.5s ease-in-out;
}
.carousel-item {
min-width: 100%;
box-sizing: border-box;
padding: 20px;
text-align: center;
}
.nav-dots {
display: flex;
justify-content: center;
margin-top: 20px;
}
.dot {
width: 10px;
height: 10px;
background-color: #bbb;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
.dot.active {
background-color: #4a5568;
}
.nav-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
font-size: 18px;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #333;
color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 0.75rem 1rem;
box-sizing: border-box;
font-size: 1rem;
z-index: 999;
text-align: center;
}

@media (max-width: 600px) {
footer {
font-size: 0.9rem;
padding: 1rem;
}
}
@keyframes zoomIn {
0% {
transform: scale(0.5);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}

.zoom-in {
animation: zoomIn 0.6s ease-out forwards;
}

.container {
display: flex;
gap: 2rem;
flex-wrap: wrap;
justify-content: center;
align-items: center;
max-width: 1200px;
}