body {
    background-color: #4997d4; /* Using a hex code */
    background-image: url("images/city.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Optional: prevents image from scrolling with content */
    margin: 0; /* Optional: removes default body margin */
}

.image-container {
display: flex;
  justify-content: center;
  align-items: top;
}

.bar-img{
  position: absolute; /* Allows images to overlap and be positioned relative to the container */
  top: 0;             /* Aligns the top edges */
  left: 0;            /* Aligns the left edges */
  width: 100%;        /* Makes images fill the container width */
  z-index: 5;        /* Ensures the overlay image is on top */
height: auto;
  top: 10%;
}

.logo-img {

display: block;
  margin-left: auto;
  margin-right: auto;
  width: 25%;
  z-index: 10;        /* Ensures the overlay image is on top */
  top: 10%;
}
.center-image-container {
display: flex;
position: relative;
  justify-content: center;
  align-items: top;
}
.center-image-container img {
  margin-left: auto;
  margin-right: auto;
  object-fit: cover; /* Ensures the image covers the area without distortion */
}

.buttons-container {
display: flex;
  justify-content: center;
  align-items: top;
}

.button-image{
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
}
.top-bar-container {
display: flex;
  justify-content: center;
  align-items: top;
  height:10%;
  background-color: #000000;
}
.copyright-container {
display: flex;
  justify-content: center;
  align-items: bottom;
}

.copyright-image{
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

.center-image-text-container {
display: flex;
position: relative;
  justify-content: center;
  align-items: top;
  
}


.center-image-text-back-img{
  position: absolute; /* Allows images to overlap and be positioned relative to the container */
  margin-left: auto;
  margin-right: auto;
  z-index: 2;        /* Ensures the overlay image is on top */
  transform: translate(0, 50%) scale(2,2);
}

.center-image-text-img {
display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;        /* Ensures the overlay image is on top */
}


/* Optional: Style the text to ensure it's visible on top of the overlay */
.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  z-index: 10; /* Ensure text is above the overlay */
  font-size: 1.5em;
  text-align: center;
  width: 450px;
}

.main-buttons-container {
	
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center;     /* Center vertically */
}

.main-buttons-container-image-stack {
  position: relative;
  /* Optional: Add a max-width or set dimensions for the stack as needed */
}
.main-buttons-container-button-img {
  max-width: 100%;
  height: auto;
  display: block; /* Helps with alignment */
  z-index: 15; /* Ensure text is above the overlay */
  
}

.main-buttons-container-text-img {

  position: absolute; /* Position the button relative to the container */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Precisely center the button */
  /* Add other button styling here (padding, color, etc.) */
  height: auto;
  z-index: 16; /* Ensure text is above the overlay */
    pointer-events: none; /* Allows clicks to go through this image */
}