.btn-orange {
  background: linear-gradient(135deg, #ffde59, #ff914d);
  color: #fff;
  border: none;
  transition: all 0.3s ease-in-out;
}

.btn-orange:hover {
  background: linear-gradient(135deg, #ff914d, #ff4500); /* Darker Orange */
  transform: scale(1.05); /* Slight scale effect */
  box-shadow: 0 4px 10px rgba(255, 145, 77, 0.5); /* Soft glow */
  color: #fff;
}

.btn-orange:active {
  transform: scale(0.98); /* Slight press effect */
}

/* TEXT */

.text-orange {
  color: #fcaf40;
}

.text-dark {
  color: #000000;
}

/* Default (Desktop First) Styling */
h1 {
  font-size: 2rem;
}

label {
  font-size: 1rem;
}

input.form-control {
  font-size: 1rem;
  padding: 0.6rem 1rem;
}

input.form-control::placeholder {
  font-size: 1rem;
}

button {
  font-size: 1rem;
  padding: 0.6rem 1rem;
}

p {
  font-size: 1rem;
}

a {
  font-size: 1.02rem;
  color: #fcaf40;
  transition: color 0.3s ease;
}

a:hover {
  color: #ff4500;
}

/* Medium devices (tablets, 768px and below) */
@media (max-width: 768px) {
  h1 {
    font-size: 1.75rem;
  }

  label {
    font-size: 0.95rem;
  }

  input.form-control {
    font-size: 0.95rem;
    padding: 0.55rem 0.9rem;
  }

  input.form-control::placeholder {
    font-size: 0.95rem;
  }

  button {
    font-size: 0.95rem;
    padding: 0.55rem 0.9rem;
  }

  p {
    font-size: 0.95rem; /* Smaller font size for paragraphs */
  }
}

/* Small devices (phones, 576px and below) */
@media (max-width: 576px) {
  h1 {
    font-size: 1.5rem;
    text-align: center;
  }

  label {
    font-size: 0.8rem;
    margin-left: 10px;
  }

  input.form-control {
    font-size: 0.7rem !important;
    padding: 0.5rem 0.8rem !important;
    margin-top: -10px;
  }

  input.form-control::placeholder {
    font-size: 0.7rem !important;
  }

  button {
    font-size: 0.9rem;
    padding: 0.4rem 0.6rem; /* Smaller padding for mobile */
  }

  p {
    font-size: 0.85rem; /* Smaller font size for mobile paragraphs */
  }

  a {
    font-size: 0.9rem;
  }

  .error {
    font-size: 0.75rem; /* Smaller for mobile */
    padding: 0.5rem; /* Padding can stay the same */
  }
}

/* Style all <span> inside form for error message */
.error {
  font-size: 0.75rem; /* Smaller for mobile */
  padding: 0.5rem; /* Padding can stay the same */
}