.custom-title {
    margin: 20px auto; /* Ensures margin top and bottom are 20px, left and right are auto */
    width: 60%; /* If 90% width is required, else set to 100% if alignment issues persist */
    font-size: 28px;
    font-weight: 400;
    text-align: center;
}

@media (max-width: 768px) {
    .custom-title {
        width: 95%; /* Set full width on mobile */
        font-size: 20px; /* Smaller size for mobile devices */
        margin: 20px auto; /* Ensures margin top and bottom are 20px, left and right are auto */


    }
}




/* Basic container styling for the title section */
#title-section {
    text-align: center;
    padding: 60px 0 20px 0; /* Changed from margin-top: 50px to padding-top: 60px to align with other pages */
}

/* Styling for the logo container and image within the title section */
.title-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}

.title-logo img {
    max-width: 70%; /* Ensures the image is responsive and scales with the container */
    height: auto; /* Maintains the aspect ratio of the image */
    display: block;
}

/* Styling for the typewriter text beneath the logo */
.typewriter-text {
    color: #000; /* Set the text color to black */
    font-size: 24px; /* Adjust the font size as necessary */
    font-family: 'Courier New', Courier, monospace; /* Gives a typewriter-style font */
    overflow: hidden; /* Keeps the text hidden until 'typed' */
    border-right: 2px solid black; /* Simulates the typewriter cursor */
    white-space: nowrap; /* Keeps the text in a single line to mimic typewriter */
    margin: 20px auto; /* Centers the text block and adds vertical spacing */
    display: inline-block;
    animation: blink-caret .75s step-end infinite; /* Cursor blinking effect */
    min-height: 20px;
    white-space: normal; /* Allow text wrapping */
    word-break: break-word; /* Break words to wrap text properly */
    width: auto; /* Auto width to adapt to content */
}

/* Keyframes for the blinking cursor effect */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black }
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    .typewriter-text {
        font-size: 18px; /* Adjust font size for smaller screens if needed */
    }
}