body {
      background-color: #f8f9fa;
      color: #212529;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      transition: background-color 0.3s, color 0.3s;
    }

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

/* Fix Bootstrap elements */
body.dark-mode .btn-primary {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

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

body.dark-mode .btn-outline-dark:hover {
  background-color: #f1f1f1;
  color: #121212;
}

/* footer match dark mode */
body.dark-mode footer {
  background-color: #f1f1f1;
  color: #121212;
  border-color: #333;
}

    .profile-img {
        border-radius: 50%;
        object-fit: cover;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

    h1 {
      font-weight: 600;
    }

    p {
      font-size: 1.1rem;
      color: inherit;
    }

    /* buttons */
.btn-custom {
  border-radius: 2rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-custom:hover {
  transform: translateY(-2px);
}

    /* Toggle button */
    .theme-toggle {
      position: fixed;
      top: 20px;
      right: 20px;
      background: none;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      color: inherit;
      transition: transform 0.3s;
    }

    .theme-toggle:hover {
      transform: rotate(15deg);
    }