body {
  font-family: 'Jost', sans-serif;
  background-color: #F9F9F9;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensure the page takes the full height */
}

/* Header Section */
header {
  background-color: #FFF8E0;
  padding: 20px 0;
  text-align: center;
}

.logo img {
  width: 100%;
  max-width: 385px; /* Maximum width for larger screens */
  height: auto; /* Maintain aspect ratio */
}

@media (max-width: 768px) {
  .logo img {
    max-width: 300px; /* Scale down for smaller screens */
  }
}

@media (max-width: 480px) {
  .logo img {
    max-width: 250px; /* Further reduce size on very small screens */
  }
}

.main-content {
  text-align: center;
  padding: 40px 20px;
  flex-grow: 1; /* Ensures content takes up available space, pushing footer down */
}

.header-title {
  font-family: 'Barlow', sans-serif;
  color: #FF001F;
  font-size: 2.4rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
}

.header-subtitle {
  font-size: 1.1rem;
  color: #000000;
}

.subtext {
  color: #FF001F;
  font-size: 1.4rem;
  margin-top: 15px;
}

/* Card Section */
.card {
  background-color: #eaeaea;
  border: none;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  padding: 25px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.15);
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #000000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.icon {
  font-size: 1.5rem;
}

.icon-first-timer {
  color: #0E4992;
}

.icon-regular {
  color: #0E9231;
}

.btn-register {
  background-color: #0E4992;
  color: white;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-register:hover {
  background-color: #083366;
  color:white;
  transform: scale(1.05);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-attendance {
  background-color: #0E9231;
  color: white;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-attendance:hover {
  background-color: #086B23;
  transform: scale(1.05);
  color: white;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

/* Footer Section */
footer {
  background-color: #2e2e2e;
  color: white;
  text-align: center;
  padding: 15px 0;
  margin-top: auto; /* Pushes footer to the bottom */
}

footer p {
  margin: 0;
}

/* Sub-footer Section */
.sub-footer {
  background-color: #000; /* Darker red for contrast */
  color: white;
  font-size: 0.9rem;
  padding: 8px 0;
  text-align: center;
}

.sub-footer span {
  color: #FF001F; /* Highlight the heart in red */
}

/* Responsive Footer */
@media (max-width: 768px) {
  footer {
    font-size: 0.9rem;
  }

  .sub-footer {
    font-size: 0.8rem;
  }
}

/* Make the form compact */
form {
  width: 100%;
  max-width: 400px; /* Set a maximum width for the form */
  margin: 0 auto;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Form inputs to make them smaller */
.form-control {
  padding: 8px 10px;
  font-size: 14px;
}