body {

    margin: 0;

    font-family: Arial, sans-serif;

    color: white;

    background-color: rgb(234, 234, 231);

  }



  header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 20px;

    background-color: white;

    color: rgb(13, 85, 192);

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  }



  .logo {

    font-size: 1.5em;

    font-weight: bold;

  }



  .logo a {

    text-decoration: none;

    color:rgb(13, 85, 192);

  }





  nav ul {

    list-style: none;

    display: flex;

    margin: 0;

    padding: 0;

  }



  nav ul li {

    margin: 0 15px;

  }



  nav ul li a {

    text-decoration: none;

    color: rgb(13, 85, 192);

    font-size: 1em;

    transition: color 0.3s ease;

  }



  nav ul li a:hover {

    color: rgb(13, 85, 192)f;

  }



  .cta {

    background-color: rgb(13, 85, 192);

    color: white;

    padding: 10px 20px;

    text-decoration: none;

    border-radius: 5px;

    font-size: 1em;

    transition: background-color 0.3s ease;

  }



  .cta:hover {

    background-color: white;

    color:rgb(13, 85, 192);

  }



  .container {

    text-align: center;

    padding: 50px;

  }



  .header {

    text-align: center;

  }



  .features {

    margin: 40px auto;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

  }



  .feature {

    background-color: white;

    color: rgb(13, 85, 192);

    margin: 10px;

    padding: 20px;

    border-radius: 8px;

    width: 250px;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

    text-align: center;

  }



  .cta-button {

    margin-top: 20px;

    padding: 10px 20px;

    font-size: 1.1em;

    color: white;

    background-color: rgb(13, 85, 192);

    border: none;

    border-radius: 5px;

    cursor: pointer;

    transition: background-color 0.3s ease;

  }



  .cta-button:hover {

    background-color: rgb(13, 85, 192);

  }



  .quote {

    margin-top: 30px;

    font-size: 1.2em;

    font-style: italic;

    color:rgb(13, 85, 192);

  }



  body {

    font-family: Arial, sans-serif;

    background-color: rgb(245, 245, 245);

    margin: 0;

    padding: 0;

}



.container {

    text-align: center;

    margin: 50px;

}



h2 {

    font-size: 2.5em;

    color: #333;

}



.features {

    display: flex;

    justify-content: space-around;

    flex-wrap: wrap;

    margin-top: 30px;

}



.feature-card {

    width: 250px;

    background-color: rgba(255, 255, 255, 0.8);

    border-radius: 15px;

    margin: 20px;

    overflow: hidden;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    position: relative;

    text-align: center;

}



.image-container {

    background-image: url('images/income.jpg'); /* Replace with your image URL */

    background-size: cover;

    background-position: center;

    height: 150px;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

}



.image-container1 {

  background-image: url('images/datavisualization.jpg'); /* Replace with your image URL */

  background-size: cover;

  background-position: center;

  height: 150px;

  display: flex;

  justify-content: center;

  align-items: center;

  position: relative;

}

.image-container2 {

  background-image: url('images/budget.jpg'); /* Replace with your image URL */

  background-size: cover;

  background-position: center;

  height: 150px;

  display: flex;

  justify-content: center;

  align-items: center;

  position: relative;

}

.image-container3 {

  background-image: url('images/password.jpg'); /* Replace with your image URL */

  background-size: cover;

  background-position: center;

  height: 150px;

  display: flex;

  justify-content: center;

  align-items: center;

  position: relative;

}





h3.typewriter {

    font-size: 1.5em;

    color: rgb(191, 215, 250);

    font-weight: bold;

    border-right: 4px solid white;

    width: 0;

    white-space: nowrap;

    overflow: hidden;

    animation: typing 4s steps(40) 1s forwards, blinkCaret 0.75s step-end infinite;

    position: absolute;

}



p {

    padding: 15px;

    font-size: 1em;

    color: #555;

    line-height: 1.5;

}







/* Typewriting effect */

@keyframes typing {

    from {

        width: 0;

    }

    to {

        width: 100%;

    }

}



@keyframes blinkCaret {

    50% {

        border-color: transparent;

    }

}