.header-section {
    width: 100%;
    padding: 20px;
    color: white; /* Text color for header content */
    background: #8A8AFF; /* Match main-container background */
    z-index: 1; /* Keep it above the curved box */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box; /* Ensure padding is included in the width */
}

.time-display {
    font-size: 2.5em; /* Increasing clock font size */
    margin-bottom: 10px;
    width: 100%; /* Ensure it takes full width to position time and icon */
}

.time-and-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align to the start */
    gap: 10px; /* Increased space between time and icon */
}

/* Keyframe animation for subtle up-and-down movement */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px); /* Move 5px up */
    }
}

.weather-icon {
    font-size: 4em; /* Final increase for icon size */
    margin-right: 10px;
    color: #ffd700; /* Yellow for sun icon */
    animation: bounce 2s infinite ease-in-out; /* Apply animation */
}

.greeting-container {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: -40px;
}

.weather-icon {
    font-size: 4em; /* Final increase for icon size */
    margin-right: 10px;
    color: #ffd700; /* Yellow for sun icon */
}

.greeting-text h2 {
    font-size: 2.8em; /* Reverted to a more reasonable size */
    margin: 0;
    line-height: 1.2;
}

.greeting-text p {
    font-size: 2.1em; /* Reverted to a more reasonable size */
    margin: 50px 0 0 0;
    opacity: 0.8;
    font-style: italic;
}

.book-image {
    width: 350px; /* Increased image size */
    height: auto;
    margin-left: auto; /* Push to the right */
}