html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}



html {
  position: relative;
  /* min-height: 100vh; */
  height: 100%;
}

body {
  /* margin-bottom: 60px; */
  /* min-height: 100%; */
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  background-image: url('/images/zoom-bg-3.jpg'); /* Update with the correct path to your image */
  background-size: cover; /* Cover ensures the image covers the whole area without repeating */
  background-position: center; /* Centers the background image */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-attachment: fixed; /* Optional: Keeps the background fixed during scrolling */
}
.main-content {
  flex: 1;
}

/* Custom Button Styles for Red Buttons */
.btn-primary {
  background-color: #c0392b; /* Custom red color */
  border-color: #a83226; /* Slightly darker red for the border */
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-primary:hover,
.btn-primary:active {
  background-color: #a83226; /* A darker shade of red for hover states */
  border-color: #902d22;
}

.btn-primary:focus {
  background-color: #a83226; /* A darker shade of red for focus states */
  border-color: #902d22;
  box-shadow: 0 0 0 0.2rem rgba(192, 57, 43, 0.5); /* Red glow for focus outline */
  outline: none; /* Remove default browser outline */
}

.btn-primary:active,
.btn-primary.active {
  background-color: #902d22; /* Even darker for active state */
  border-color: #7a241e;
}

.btn-primary.disabled,
.btn-primary:disabled {
  background-color: #c0392b; /* Same custom red, slightly faded effect */
  border-color: #a83226;
  opacity: 0.65;
}

/* General styling */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem rgba(192, 57, 43, 0.25), 0 0 0 0.25rem rgba(192, 57, 43, 0.5);
}

.bg-secondary {
  background-color: #333; /* Darker shade for contrast */
  color: #fff;
  padding: 20px;
  border-radius: 10px;
}