html, body {
  height: 100%;
  margin: 0;
  padding: 0;

}



html{
    background: linear-gradient(to bottom, #1a1a2e, #16213e);
    background-color: black;
}

body {
     font-family: 'Roboto', sans-serif;
     background: linear-gradient(to bottom, #1a1a2e, #16213e);
     background-color: black;
     overflow-x: hidden;
     height: 100%;

}
 .hero {
     height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
}
 .hero-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.7);
     z-index: 1;
}
 .hero-content {
     position: relative;
     z-index: 2;
     max-width: 800px;
     padding: 20px;
}
 .hero-content h1 {
     font-size: 3.5rem;
     font-family: 'Spectral SC', serif;
     color: #00b4d8;
     margin-bottom: 20px;
}
 .hero-content p {
     font-size: 1.2rem;
     line-height: 1.8;
     color: #d1d1d1;
     margin-bottom: 30px;
}
 .cta-buttons {
     display: flex;
     justify-content: center;
     gap: 20px;
}
 .cta-buttons a {
     text-decoration: none;
     padding: 10px 20px;
     font-size: 1.1rem;
     font-weight: bold;
     border-radius: 5px;
     transition: background 0.3s;
}
 .cta-buttons a.primary {
     background: #00b4d8;
     color: white;
}
 .cta-buttons a.primary:hover {
     background: #00f260;
}
 .cta-buttons a.secondary {
     background: transparent;
     color: #00b4d8;
     border: 2px solid #00b4d8;
     align-content: center;
}
 .cta-buttons a.secondary:hover {
     background: #00b4d8;
     color: white;
}
 .features-section {
     padding: 50px 20px;
     text-align: center;
     background: linear-gradient(to bottom, #16213e, #0f3460);
}
 .features-section h2 {
     font-size: 2.5rem;
     font-family: 'Spectral SC', serif;
     color: #00f260;
     margin-bottom: 30px;
}
 .features {
     display: flex;
     justify-content: center;
     gap: 20px;
     flex-wrap: wrap;
}
 .feature {
     flex: 1 1 300px;
     max-width: 300px;
     background: rgba(0, 0, 0, 0.6);
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
 .feature:hover{
    transform: scale(1.05);
 }
 .feature h3 {
     font-size: 1.5rem;
     color: #00b4d8;
     margin-bottom: 10px;
}
 .feature p {
     font-size: 1rem;
     color: #d1d1d1;
     line-height: 1.6;
}
/* Testimonials Section */
.testimonials-section {
    padding: 50px 20px;
    text-align: center;
    color: #00f260;
    background-color: black;

}

.testimonials {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.testimonial {
    flex: 1 1 300px;
    max-width: 300px;
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.testimonial:hover {
    transform: scale(1.05);
}

.testimonial p {
    font-size: 1rem;
    color: #d1d1d1;
    line-height: 1.6;
    margin-bottom: 10px;
}

.testimonial h4 {
    font-size: 1.1rem;
    color: #00b4d8;
}

/* How It Works Section */
.how-it-works-section {
    padding: 50px 20px;
    text-align: center;
    background: linear-gradient(to bottom, #16213e, #0f3460);
}

h2 {
    font-size: 2.5rem;
    font-family: 'Spectral SC', serif;
    color: #00f260;
    margin-bottom: 30px;
}

.steps {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.step {
    flex: 1 1 300px;
    max-width: 300px;
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.step:hover {
    transform: scale(1.05);
}

.step h3 {
    font-size: 1.5rem;
    color: #00b4d8;
    margin-bottom: 10px;
}

.step p {
    font-size: 1rem;
    color: #d1d1d1;
    line-height: 1.6;
}

/* Enhanced Footer */
.footer {
    background: rgba(0, 0, 0, 0.8);
    padding: 40px 20px;
}

.footer-content {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-section {
    flex: 1 1 1;
}

.footer-section h3 {
    font-size: 1.5rem;
    color: #00b4d8;
    margin-bottom: 15px;
}

.footer-section p {
    font-size: 1rem;
    color: #d1d1d1;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 10px;
    color: #00b4d8;
}

.footer-section ul li a {
    color: #00b4d8;
    text-decoration: none;
    font-size: 1rem;
}

.footer-section ul li a:hover {
    color: #00f260;
}

.footer-bottom {
    text-align: center;
    font-size: 0.9rem;
    color: #d1d1d1;
    margin-top: 20px;
}

.footer-bottom a {
    color: #00b4d8;
    text-decoration: none;
}

.footer-bottom a:hover {
    color: #00f260;
}


.btn{
    background: transparent;
    color: #00b4d8;
    border: 2px solid #00b4d8;    cursor: pointer;
}

.form-control{
    display: inline-block;
}
form{
    display: flex;
    justify-content: space-evenly;
}




/* 2xl */
@media (max-width: 1536px) {

}

/* xl */
@media (max-width: 1280px) {

}

/* lg */
@media (max-width: 1024px) {

  .footer-content {
    display: grid;
    justify-content: space-evenly;
    align-items: flex-start;
    grid-template-columns: auto;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}


}

/* md */
@media (max-width: 768px) {

  .footer-content {
    display: grid;
    justify-content: space-evenly;
    align-items: flex-start;
    grid-template-columns: auto;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}


}

/* sm */
@media (max-width: 640px) {




 }

/* xs */
@media (max-width: 475px) {




}