html {
   margin: 0;
   padding: 0;
   font-family: 'Roboto', sans-serif;
   background-color: #1a1a1a;
   color: #e0e0e0;
   line-height: 1.6;
 }
 .container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px;
 }
 header {
   height: 300px;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
 }
 h1 {
   font-size: 3em;
   color: #fff;
   text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
 }
 nav {
   background-color: #333;
   padding: 10px 0;
   position: sticky;
   top: 0;
   z-index: 1000;
 }
 nav ul {
   list-style-type: none;
   padding: 0;
   display: flex;
   justify-content: center;
 }
 nav ul li {
   margin: 0 15px;
 }
 nav ul li a {
   color: #fff;
   text-decoration: none;
   font-weight: bold;
   transition: color 0.3s ease;
 }
 nav ul li a:hover {
   color: #ffd700;
 }
 section {
   margin-bottom: 50px;
 }
 h2 {
   color: #ffd700;
   border-bottom: 2px solid #ffd700;
   padding-bottom: 10px;
 }
 .feature-grid, .roadmap-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 20px;
   margin-top: 20px;
 }
 .feature-item, .roadmap-item {
   background-color: #333;
   padding: 20px;
   border-radius: 5px;
   box-shadow: 0 2px 5px rgba(0,0,0,0.2);
 }
 .feature-icon, .roadmap-icon {
   font-size: 2em;
   margin-bottom: 10px;
 }
 .progress-bar {
   background-color: #555;
   height: 20px;
   border-radius: 10px;
   overflow: hidden;
 }
 .progress {
   height: 100%;
   background-color: #ffd700;
   transition: width 0.5s ease-in-out;
 }

   @keyframes fadeInUp {
       0% {
           opacity: 0;
           transform: translateY(20px);
       }

       100% {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .feature-item {
       opacity: 0;
       animation: fadeInUp 1s ease forwards;
   }

   .feature-item {
       opacity: 0;
       animation: fadeInUp 1s ease forwards;
   }


   .roadmap-item {
       opacity: 0;
       animation: fadeInUp 1s ease forwards;
   }

   footer {
       background-color: #333;
       color: Black;
       font-size: 15px;
       text-align: center;
       padding: 1rem;
       margin-top: 2rem;
   }

   @keyframes pulseButton {
       0% {
           transform: scale(1);
       }

       50% {
           transform: scale(1.05);
       }

       100% {
           transform: scale(1);
       }
   }


.cta-button {
    display: inline-block;
    background-color: #676464;
    color: white;
    text-decoration: none;
    padding: 1rem 2rem;
    border-radius: 4px;
    font-weight: 600;
    transition: background-color 0.3s ease;
    animation: pulseButton 1.5s infinite;
    margin: 0px 80px;
}

@media (max-width: 800px) { 
    .cta-button {
        display: block;
        margin: 30px 0px;
    }
}

       .cta-button:hover {
           background-color: #9D9393;
       }