/* Center the form */
.login-form {
  max-width: 400px; /* Limit form width */
  margin: 0 auto; /* Center the form horizontally */
  padding: 20px; /* Add space inside the form */
  background-color: #fffff6; /* #f9f9f9; /* Light background */
  border: 1px solid #ddd; /* Subtle border */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add shadow */
}

/* Style input fields */
.login-form input[type="text"],
.login-form input[type="password"],
.login-form input[type="hidden"] {
  width: 100%; /* Full-width inputs */
  padding: 10px; /* Add space inside the inputs */
  margin-bottom: 15px; /* Space between inputs */
  border: 1px solid #ccc; /* Border color */
  border-radius: 4px; /* Rounded corners */
  font-size: 16px; /* Increase font size */
}

/* Style the button */
.btn-login {
  display: block;
  width: 100%; /* Full-width button */
  padding: 10px; /* Add space inside the button */
  color: white; /* White text */
  border: none; /* Remove default border */
  border-radius: 4px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor on hover */
  font-size: 16px; /* Increase font size */
  text-align: center; /* Center text */
}

.btn-login:hover {
  background-color: #0056b3; /* Darker blue on hover */
}

/* Style the registration link */
.login-form p {
  margin-top: 20px; /* Add space above the text */
  text-align: center; /* Center align text */
}

.login-form a {
  color: #007bff; /* Link color */
  text-decoration: underline; /* Underline the link */
}

.login-form a:hover {
  color: #0056b3; /* Darker color on hover */
  text-decoration: none; /* Remove underline on hover */
}

.error-messages {
    color: red;
    font-size: 0.9em;
    list-style-type: none;
    padding: 0;
}

.hero-section {
  position: relative;
  background-image:var(--hero-background, url('/media/images/open_bible_min_crop.jpg'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh; /* Adjust the height as needed */
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Overlay color */
  z-index: 1;
}

.hero-section .container {
  position: relative;
  z-index: 2;
}


/*****/
.hero {
  position: relative;
}

@media (min-width: 834px) {
  .hero__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    z-index:0;
  }
}

@media (min-width: 834px) {
  .hero__background-image {
    object-position: unset;
  }
}
@media (min-width: 480px) {
  .d2-sm-none {
    display: none;
  }
}
@media (min-width: 480px) {
  .hero__background-image {
    object-position: right;
    height: 100%;
  }
}
.d2-block {
  display: block;
}
.hero__background-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: unset;
  object-fit: cover;
  object-position: top;
}

.banner {
  width: 100%;         /* Make the container full width */
  height: auto;  /* 72vh;        /* Allow height to adjust based on content */
  overflow: hidden;    /* Hide any overflow content */
}

.banner-img {
  width: 100%;         /* Ensure the image takes the full width of the container */
  height: auto;        /* Maintain the aspect ratio */
  max-height: auto;  /* 72vh;   /* Prevent the image from exceeding the viewport height */
  display: block;      /* Remove any inline spacing */
}

/* Media query for tablets and smaller devices */
@media (max-width: 1020px) {
  .banner {
    height: 60vh;               /* Adjust height for smaller screens */
    background-size: cover;     /* Still cover the container */
  }
}

@media (max-width: 880px) {
  .banner {
    height: 50vh;               /* Adjust height for smaller screens */
    background-size: cover;     /* Still cover the container */
  }
}

@media (max-width: 768px) {
  .banner {
    height: 40vh;               /* Adjust height for smaller screens */
    background-size: cover;     /* Still cover the container */
  }
}

@media (max-width: 590px) {
  .banner {
    height: 35vh;               /* Adjust height for smaller screens */
    background-size: cover;     /* Still cover the container */
  }
}

/* Media query for mobile devices in portrait mode */
@media (max-width: 480px) {
  .banner {
    height: 30vh;               /* Further reduce height for mobile portrait mode */
    background-size: contain;   /* Use 'contain' to ensure the full image is visible */
  }
}