body {
    background-color: rgb(12, 12, 12);
     }

.image-container {
  position: relative;
  display: inline-block;
}

.bg-image {

    width: 100%;
    height: auto;
}

.overlay-image1 {
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.overlay-image2 {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.buttons img {
  width: 100;
    cursor: pointer;
    transition: 1s ease;
 }
 
.overlay-image1 img:hover {
    transform: scale (0.9);
    }

    .overlay-image2 img:hover {
    transform: scale(0.9);
    }

    .bg1 {
    width: 100%;
    height: auto;
    
 }

     .image_center
            {
                display: block;
                margin-left: 30px;
                margin-right: 10px;
              
              
            } 

    .box 
    {
      position: absolute;
      top: 50%;
      left: 70%;
      transform: translate(-50%, -50%);
      z-index: 2;
      width: 20%;
      background-color: rgb(77, 123, 66);
      background-blend-mode: color;
      padding: 10px;
      margin-left: 100px;

      } 

 .box1 
    {
      position: absolute;
      top: 50%;
      left: 15%;
      transform: translate(-50%, -50%);
      z-index: 2;
      width: 20%;
      background-color: rgb(77, 123, 66);
      background-blend-mode: color;
      padding: 10px;
      margin-left: 100px;

      } 

    .button_end
      {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 10px 20px;
      background-color: rgba(0, 0, 0, 0.7);
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      z-index: 10;
      
      }