body {
  background-image: url("images/exchange-bg.jpeg");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

#log-in-page {
  position: absolute;
  top: 50%; /* Move to the vertical center */
  left: 50%; /* Move to the horizontal center */
  transform: translate(-50%, -50%); /* Center the element completely */
  width: 400px; /* Optional fixed width */
  max-width: 100%; /* Ensures responsiveness */
}

/* Default size for larger screens */
#log-in-page h4 {
  font-size: 24px; /* Default size */
}

/* Medium screens (tablets, 768px to 991px) */
@media (max-width: 991px) {
  #log-in-page h4 {
    font-size: 20px; /* Slightly smaller for tablets */
  }
}

/* Small screens (landscape phones, 576px to 767px) */
@media (max-width: 767px) {
  #log-in-page h4 {
    font-size: 18px; /* Adjust for smaller devices */
  }
}

/* Extra small screens (portrait phones, less than 576px) */
@media (max-width: 575px) {
  #log-in-page h4 {
    font-size: 11px; /* Smaller size for small phones */
  }
}