body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
  }

  body.dark-mode .container,
  body.dark-mode .card {
    background-color: #1e1e1e;
    border-color: #333;
    color: #ccc;
  }

  body.dark-mode a,
  body.dark-mode .nav-link {
    color: #80bfff;
  }

  body.dark-mode .btn {
    border-color: #444;
  }

  body.dark-mode input,
  body.dark-mode select,
  body.dark-mode textarea {
    background-color: #1e1e1e;
    color: #ccc;
    border-color: #444;
  }

  body {
    background: linear-gradient(to right, #14532d, #57C785) !important;
  }

  .bg-gradient{
  background: linear-gradient(to right, #14532d, #57C785)!important;
    color: white;
  }


  .gradient-text {
    background: linear-gradient(to right, #14532d, #57C785);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .gradient-button{
    background: linear-gradient(to right,#14532d, #57C785);
    color:white;
  }

  .card, .card-login, .card-contact, .feature-card, .card-welcome {
    background: rgba(30, 60, 50, 0.35) !important;
    color: #fff !important;
    border-radius: 1rem;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.18);
  }

  .card-body, .card-title, .card-text, .card-login, .card-contact, .feature-card, .card-welcome {
    color: #fff !important;
  }

  .navbar,  .navbar-brand, .navbar-toggler {
    background: rgba(30, 60, 50, 0.35) !important;
    color: #fff !important;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,0.18);
  }

  .navbar .nav-item {
    margin: 0 0.5rem;
  }

  .navbar .nav-link {
    color: #fff !important;
    background: rgba(30, 60, 50, 0.25);
    border-radius: 1.5rem;
    padding: 0.5rem 1.2rem;
    margin: 0 0.2rem;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 2px 8px 0 rgba(31, 38, 135, 0.08);
    display: inline-block;
  }

  .navbar .nav-link.active, .navbar .nav-link:focus, .navbar .nav-link:hover {
    background: rgba(30, 60, 50, 0.45);
    color: #EDDD53 !important;
    box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.12);
  }

  .btn, .btn-primary, .btn-success, .btn-outline-primary, .btn-outline-success, .btn-gradient {
    background: rgba(30, 60, 50, 0.35) !important;
    color: #fff !important;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 1rem !important;
    transition: background 0.2s, color 0.2s;
  }

  .btn:hover, .btn:focus, .btn:active,
  .btn-primary:hover, .btn-primary:focus, .btn-primary:active,
  .btn-success:hover, .btn-success:focus, .btn-success:active,
  .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active,
  .btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active,
  .btn-gradient:hover, .btn-gradient:focus, .btn-gradient:active {
    background: rgba(30, 60, 50, 0.55) !important;
    color: #fff !important;
  }

  h2 {
    color: #fff !important;
  }

  footer, footer a, footer h6, footer .text-muted, footer .small, footer ul li, footer .text-success {
    color: #fff !important;
  }

  .card-register, .how-it-works-card {
    background: rgba(30, 60, 50, 0.35) !important;
    color: #fff !important;
    border-radius: 1rem;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.18);
  }

  .card-register *, .how-it-works-card * {
    color: #fff !important;
  }