/* Custom styles for Birgit website */

/* 1. Fix white text color in colored tabs */
#timelineSection ul li .date {
    color: #FFFFFF !important; /* True white color */
}

/* 2. Reposition "Ausbildung" section further down */
#timelineSection {
    margin-top: 3rem;
}

/* 3. Adjust contact header */
#contactSection h1 {
    font-size: 2.5rem;
    color: #647295;
    margin-bottom: 1.5rem;
}

/* 4. Scrolling text animation for "Hallo, ich bin Birgit" */
@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

.typewriter-text {
    overflow: hidden;
    white-space: nowrap;
    margin: 0 auto;
    animation: typewriter 2s steps(40) 1s 1 normal both;
    line-height: 1.5;
    min-height: 1.5em;
}

/* 5. Mouse-over effect for tabs */
#timelineSection ul li {
    transition: all 0.5s ease;
}

#timelineSection ul li .content-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 1.2s ease;
}

#timelineSection ul li:hover .content-container {
    max-height: 200px;
}

/* Increase spacing between timeline items */
#timelineSection ul li:not(:last-child) {
    margin-bottom: 4rem;
}

/* 6. Center text under "Ihre virtuelle Assistentin" */
.virtual-assistant-text {
    text-align: center;
}

/* 7. Center icons and ensure equal spacing */
.service-icon {
    margin: 0 auto;
    display: block;
}

/* 8. Center texts under icons */
#servicesSection h4,
#servicesSection p {
    text-align: center;
}

/* 9. Match background colors between FAQ section and hero section */
#questionsSection {
    background: #e1ebfa !important; /* Same as bg-light-blue */
}