/* description-boxes.css complete code */
.dynamic-description {
    position: relative;
    min-height: 150px;
    width: 90%;
    margin: 20px auto;
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    line-height: 1.8;
    color: #2d3c2f;
    text-align: center; /* Ensures horizontal text centering */
    transition: all 0.9s ease; /* Smooth overall transition */
    /* background: url('../images/border1.png') no-repeat left center; */ /* Temporarily removed */
    /* background-size: 150px 150px; */ /* Temporarily removed */
    display: flex;
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
}


.description-text {
    position: relative;
    z-index: 1;
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Keeps the text hidden until needed */
    transition: opacity 1s ease, visibility 0s linear 1s; /* Smooth fade-in and fade-out */
    max-width: 60%; /* Limit text width for readability */
    margin: 0 auto; /* Center text within container */
    word-wrap: break-word; /* Wrap long words to the next line */
    line-height: 1.8; /* Maintain consistent line spacing */
    overflow: hidden; /* Prevents any text overflow */
}



.description-text.fade-in {
    opacity: 1; /* Fully visible */
    visibility: visible; /* Ensures the element is visible */
    transition: opacity 1s ease, visibility 0s linear 0s; /* Instant visibility with smooth fade-in */
}

.description-text.fade-out {
    opacity: 0; /* Fully hidden */
    visibility: hidden; /* Hides after fade-out completes */
    transition: opacity 1s ease, visibility 0s linear 1s; /* Delays hiding for smooth fade-out */
}




/* First Letter Styling */
.description-text::first-letter {
    font-size: 2rem; /* Larger first letter */
    font-weight: bold;
    color: #2d3c2f; /* Accent color */
}


/* Dark Theme Adjustments */
.dark-theme .dynamic-description {
    color: #f7f7f7; /* Off-white text color for dark theme */
}

/* Dark Theme Adjustments */
.dark-theme .description-text::first-letter {
    color: #fbf3d2; /* Accent color for dark theme */
}