body {
    background-color: #f8f9fa;
    font-family: 'Roboto', sans-serif;
}

.card-header h1 {
    margin-bottom: 0;
}

.form-control {
    margin-bottom: 0rem;
}

button {
    font-size: 1.25rem;
    font-weight: 700;
    padding: 0.75rem;
}

button:active {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

input::placeholder {
    color: #aaa;
}
              .navbar {
            background-color: #333;
            overflow: hidden;
        }
        .navbar a {
            float: left;
            display: block;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
        }
        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }
/* Optional custom styles for the logo */
.img-fluid {
    max-height: 100px; /* Adjust max height */
}

@media (max-width: 576px) {
    .img-fluid {
        max-width: 80px; /* Adjust logo size on small screens */
    }
  .hero-section {
    padding: 20px !important;
}
          .hero-title {
            font-size: 1.3em !important;
            color: #321e5d;
        }

        .hero-text {
            font-size: 1.2em !important;
            margin-top: 10px !important;
            color: #555;
        }
  .btn-hero {
    margin-top: 10px !important;
}
}