h1{
    font-size: 100px;
    text-align: center;
    text-shadow: 2px 2px 4px #000000;
    margin-bottom: 0%;
    margin-top: 0%;
    background-color: rgb(0, 255, 55);
    color: white; /* Change the color to white */
    padding: 20px; /* Add padding for better spacing */
    border-radius: 10px; /* Add rounded corners */
    
}
@media (max-width: 600px) {
    h1 {
        font-size: 50px; /* Adjust font size for smaller screens */
        padding: 10px; /* Adjust padding for smaller screens */
    }
}
h2{
    font-size: 20px;
    text-align: center;
    
}
img {
    display: block;
    margin: 0 auto; /* Center the image */
    width: 50%; /* Set the width of the image */
    height: auto; /* Maintain aspect ratio */
}
p{
    font-size: larger;
}
.bottom-right-link{
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: rgb(84, 245, 3); /* Change the background color to blue */
    color: white; /* Change the text color to white */
    padding: 10px 20px; /* Add padding for better appearance */
    text-decoration: none; /* Remove underline from link */
    border-radius: 5px; /* Add rounded corners */
}
.bottom-right-link:hover {
    background-color: rgb(0, 123, 255); /* Change background color on hover */
    color: white; /* Ensure text color remains white on hover */
}
.bottom-left-link{
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: rgb(84, 245, 3); /* Change the background color to blue */
    color: white; /* Change the text color to white */
    padding: 10px 20px; /* Add padding for better appearance */
    text-decoration: none; /* Remove underline from link */
    border-radius: 5px; /* Add rounded corners */
}
.bottom-left-link:hover {
    background-color: rgb(0, 123, 255); /* Change background color on hover */
    color: white; /* Ensure text color remains white on hover */
    }
      .row {
      display: flex;           /* Turns container into a flexbox */
      align-items: center;     /* Vertically centers content */
      gap: 20px;              /* Adds space between image and text */
      max-width: 1000px;      /* Adjust container width as needed */
      margin: 0 auto;         /* Centers the row on the page */
      padding: 20px;
    }

    .row img {
      width: 300px;           /* Fixed width for image */
      height: auto;           /* Maintains aspect ratio */
      border-radius: 8px;     /* Optional: Adds rounded corners */
    }

    .text-content {
      flex: 1;                /* Takes remaining space */
    }

    /* Optional: Stack on small screens */
    @media (max-width: 768px) {
      .row {
        flex-direction: column;
      }
      .row img {
        width: 100%;
      }
    }