h1 {
    font-size: 3rem; /* Size of the main heading */
    margin-bottom: 20px; /* Space below heading */
}

p {
    font-size: 1.2rem; /* Size of paragraph text */
    margin: 20px 0; /* Space above and below paragraphs */
}

/* Centering the Button */
.button-container {
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
}


header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 90px; /* Height of the header */
     background-color: white;
    color: #0F4C81;
    text-align: center;
    line-height: 90px; /* Center text vertically */
    transition: top 0.3s;
    display: flex;
    align-items: center; /* Align items vertically */
    justify-content: center; /* Center items horizontally */
}

#logo {
    height: 90px; /* Smaller logo size */
    margin-right: 10px; /* Space between logo and text */
}

#header-text {
    font-family: 'Edwardian Script ITC', cursive; /* Custom font */
    font-size: 45px; /* Adjust font size as needed */
}
@media (max-width: 768px) {
    header {
        height: 70px; /* Reduce height for smaller screens */
        line-height: 70px; /* Center text vertically with new height */
    }

    #logo {
        height: 50px; /* Reduce logo size for smaller screens */
        margin-right: 5px; /* Less spacing */
    }

    #header-text {
        font-size: 30px; /* Smaller font size for smaller screens */
    }
}
main {
    padding-top: 80px; /* Space for the header */
    position:center;
}




/* Scroll Buttons on the side */
.scroll-buttons {
    position: fixed;
    right: 20px;
    bottom: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .scroll-buttons button {
        margin: 10px 0; /* Space between buttons */
        padding: 10px;
        background-color: #555;
        color: white;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        transition: background-color 0.3s;
        font-size: 10px; /* Make arrows larger */
    }

        .scroll-buttons button:hover {
            background-color: #777; /* Change color on hover */
        }