body {
        margin: 0;
        padding: 0;
        height: auto;
        width: auto;
        font-family: Arial, sans-serif;
        color: #fff; /* Text colour */
        text-align: center; /* Center text inside container horizontally */
    }

    h1 {
        font-size: 36px;
        margin-bottom: 20px;
    }

    p {
        font-size: 18px;
        line-height: 1.6;
    }
    
    img {
      max-width: 100%; /* Set the maximum width of the image to 100% of its container */  
      height: auto; /* Ensure the aspect ratio of the image is maintained */
      width:auto;
    }

    #imageContainer {
      position: relative;
      width: 36%; /*400px; /* Adjust width and height as per your image */
      height: 56%; /*300px; */
      border: 1px solid black;
    }

    #imageContainer img {
      position: absolute;
      top: 25%;
      left: 25%;
      width: 100%;
      height: 100%;
    }
        
  container {
    position: relative;
    max-width: 100%;
    width: 100%; /* Adjust the width to match your background image */
    height: 100%;
  }

  .background-image {
    display: block;
    width: 100%;
  }

  .overlay-image {
    position: absolute;
    top: 31%; /* 62% 1178px Adjust the top position */
    left: 20%; /* 36.6%;  933px Adjust the left position */
    z-index: 1; /* Make sure overlay image is above background */
  }

figure {
    width: 100%;
    margin: 8px auto;
}
 
div.relative_div {
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    position: relative;
    background: black;
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat; 
    background-image: url('../resources/IMG_20230520_105528647.uhd4K.jpg');

}
 
div.relative_div > div {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    color: white;
    font-size: 24px;
    text-align: center;
}