body {
    font-family: Roboto;
}
#topbar {
    text-align: center;
    font-size: 20px;
    font-family: "Great Vibes";
}
#mainhero {
    width: 2000px;
    height: auto;
}
#imagecontainer {
    position: relative;
    width: 100%;
    overflow: hidden;
}
#imageoverlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border-radius: 10px;
}

#overlaytext {
    text-align: center;
    font-size: 120px;
    color: white;
    margin: 0;
}
#contactsection {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

#innercontactsection {
    width: 500px;
    max-width: 80%;
    border: 10px solid grey;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
}

#contactustitle {
    font-size: 36px;
}

#contactinfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#email, #phone {
    font-size: 24px;
}
#gallerysection {
    margin: 0 auto;
    border: 10px solid grey;
}
#gallerysectiontitle {
    text-align: center;
    font-size: 36px;
    width: 100%;
}
.galleryimage {
    min-width: 30%;
    width: 300px;
    max-width: 100%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Add shadow */
    margin: 10px; /* Add some margin around each image */
}

#footer {
    background-color: rgb(60, 60, 60);
    color: white;
    text-align: center;
    width: 100%;
}
#innergallery {
    display: flex;  /* Use flex display */
    justify-content: center; /* Center its contents horizontally */
    align-items: center; /* Center its contents vertically */
    flex-wrap: wrap; /* Allow images to wrap within the container */
}
@media only screen and (max-width: 1050px) {
    #overlaytext {
        text-align: center;
        font-size: 60px;
        color: white;
        margin: 0;
    }
    #mainhero {
        width: 1000px;
        height: auto;
    }
  }