.main-content {
    padding: 30px; /* Reset padding to ensure content fits well */
    flex-direction: column;
}

.school-content {
    animation: typing 1s steps(30, end) forwards;
    padding-left: 300px; /* Adjust padding to fit content within the container */
    padding-right: 300px;
    max-width: 100%; /* Ensure it doesn't exceed the width of the container */
    box-sizing: border-box; /* Include padding in the width calculation */
}


@keyframes typing {
    from {width: 0}
    to {width: 100%}
}


.bu-logo-container {
    text-align: center; 
}

.bu-logo-container img {
    max-width: 150px;
    width: auto;
    height: auto;
}

/* Media query for mobile screens */
@media (max-width: 768px) {
    .school-content{
        max-width: 100%; /* Full width on small screens */
        padding: 0 5px; /* Adjust padding for smaller screens */
    }

}