/* Roadmap Section Specific Styles */
.roadmap-section {
    background-color: #2f3136; /* Discord dark mode background */
    color: #fff;
    padding: 60px 0;
}

.roadmap-container {
    max-width: 80%; /* Adjust the container width */
    margin: 0 auto;
    padding: 20px;
    background-color: #36393f; /* Slightly lighter background for the container */
    color: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.timeline {
    list-style: none;
    padding: 0;
}

.event {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px; /* Increase margin for better spacing */
}

.event.left .milestone-wrapper,
.event.right .milestone-wrapper {
    background-color: #40444b; /* Discord chat bubble color */
    border-radius: 8px; /* Border radius for card-like appearance */
    padding: 15px; /* Increase padding */
    display: flex;
    align-items: center; /* Align items to the center for chat-like appearance */
    width: 80%;
    position: relative;
    margin: 10px 0;
}

.event.left .milestone-wrapper {
    margin-left: 0;
    margin-right: auto;
}

.event.right .milestone-wrapper {
    margin-left: auto;
    margin-right: 0;
}

.avatar {
    margin-right: 15px; /* Increase margin for better spacing */
}

.avatar img {
    width: 60px; /* Larger avatar size */
    height: auto; /* Maintain aspect ratio */
    border-radius: 0; /* Remove circular cropping */
}

.message {
    background-color: #40444b; /* Background color for message bubble */
    padding: 10px 15px; /* Increase padding */
    border-radius: 8px; /* Border radius for chat bubble effect */
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.username {
    font-weight: bold;
    color: #00b0f4;
    margin-bottom: 5px;
    display: block;
    text-align: left; /* Align username to the left */
}

.message-text {
    color: #dcddde;
    margin-bottom: 5px;
    text-align: left; /* Align text to the left */
}

#showNextMessage {
    margin-bottom: 20px;
    margin-top: 20px; /* Add margin for spacing */
    background-color: #7289da; /* Discord button color */
    border: none;
    padding: 10px 20px;
    color: white;
    font-weight: bold;
    border-radius: 5px;
}

#showNextMessage:hover {
    background-color: #5a6ab8;
}