.top-bar img{
    width: 100%;
    height: 450px;
    /* max-width: 600px;  */
    max-height: 550px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.top-bar{
    position: relative;
}

.text-overlay {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white; /* Set text color */
    font-size: 70px; /* Set text size */
    z-index: 1; /* Ensure the text is on top of the image */
    /* Add any other text styles as desired */
    text-align: center;
    font-weight: bold;
}

.centered-text {
    margin: 5px 0; /* Optional: Add some spacing between lines */
}


.text-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.story{
    padding: 60px 80px;
}
.about-text{
    padding: 3%;
    background-color: #b5c8f4;
    margin-bottom: 5%;
}
.vision{
    padding: 60px 80px;
}

.vision img{
    margin-bottom: 5%;
}

/* Style for the submit button */
.contact-button{
    padding: 10px 20px; /* Adjust padding */
    background-color: #2694af; /* Button background color */
    color: #fff; /* Button text color */
    border: none; /* Remove border */
    border-radius: 4px; /* Rounded corners */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Cursor style */
    transition: background-color 0.3s ease-in-out; /* Adding transition for smooth effect */
    text-decoration: none;
}

/* Hover effect for the submit button */
.contact-button:hover {
    background-color: #1e7b8e; /* Change background color on hover */
}


@media screen and (max-width: 768px) {
    .text-overlay {
        font-size: 2.4rem;
        text-align: center;
        position: absolute;
    }

    .top-bar {
        width: 100vw;
        height: 40vh;
        overflow: hidden; /* Ensure content doesn't overflow the container */
        position: relative;
    }   

    .top-bar img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Maintain aspect ratio and cover container */
    }

    .text-container{
        display: grid;
        grid-template-columns: 1fr;
    }

    .story,
    .vision{
        padding: 1rem;
        text-align: left;
    }

    .story h1,
    .vision h1{
        font-size: 1.5rem;
        padding-bottom: 1rem;
    }

    .story p,
    .vision p{
        line-height: 1;
        text-align: left;
    }

    
}


  
@media screen and (max-width: 480px) {
    .text-overlay {
        font-size: 2.4rem;
        text-align: center;
        position: absolute;
    }

    .top-bar {
        width: 100vw;
        height: 40vh;
        overflow: hidden; /* Ensure content doesn't overflow the container */
    }   

    .top-bar img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Maintain aspect ratio and cover container */
    }

    .text-container{
        display: grid;
        grid-template-columns: 1fr;
    }

    .story,
    .vision{
        padding: 1rem;
        text-align: center;
    }

    .story h1,
    .vision h1{
        font-size: 1.5rem;
        padding-bottom: 1rem;
    }

    .story p,
    .vision p{
        line-height: 1;
        text-align: left;
    }

    
}