.slider-text {
    background-color:#0b5d97; 
    color: white; /* Default text color */
    font-size: 1.2rem; 
    cursor: pointer;
    height: 680px; /* Initial height */
    width: 110px; /* Initial width */
    border-radius: 6px; /* Rounded corners */
    transition: height 0.5s ease, width 0.5s ease, background-color 0.5s ease, color 0.5s ease; /* Transition for height, width, background-color, and color */
    box-sizing: border-box; /* Include padding in total width/height */
    padding: 20px; /* Padding around the entire element */
    position: relative; /* Positioning for child elements */
    text-align: center; /* Center-aligning the icon */
}

.icon {
    font-size: 34px; /* Icon size */
    display: block; /* Block display for centering */
    margin-bottom: 10px; /* Space between icon and text */
    transition: opacity 0.1s ease; /* Transition for icon visibility */
    color: lightblue; /* Icon color */
}

.text-content {
    text-align: justify; /* Justified text */
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Initially not visible */
    transition: opacity 0.1s ease, visibility 0.1s ease; /* Faster transition for visibility */
    margin: 10px 20px; /* Increased left & right margins */
    padding: 0; /* Reset padding */
    background-color: #0b5d97; /* Default background color */
    color: inherit; /* Ensure it inherits the text color */  
}

/* Resetting styling for <p> elements */
.text-content p {
    margin: 10px 0; /* Margin for spacing between paragraphs */
    background-color: inherit; /* Ensure the background inherits from .text-content */
    color: inherit; /* Inherit color from .text-content */
    /* Optionally you can add some padding for better appearance */
    padding: 5px 0; /* Optional padding for spacing */
}

/* Styles when text slider is expanded */
.slider-text.expanded {
    height: 900px; /* New height when expanded */
    width: 900px; /* New width when expanded */
    background-color: #80c3d8; /* background color of the container when expanded */
    color: black; /* Set the container text color to black when expanded */
}

.slider-text.expanded .text-content {
    opacity: 1; /* Show text when expanded */
    visibility: visible; /* Make text visible */
    background-color: #80c3d8; /* background color of the text when expanded */
    color: black; /* Set the text color to black for the text content when expanded */
}

.slider-text.expanded .text-content p {
    color: black; /* Ensure p tags inside .text-content inherit black color when expanded */
    background-color: #80c3d8; /* Ensure paragraphs also have the correct background color */
}

.slider-text:not(.expanded) .icon {
    opacity: 1; /* Show icon when not expanded */
    visibility: visible; /* Keep icon visible */
}

.slider-text.expanded .icon {
    opacity: 0; /* Hide icon when expanded */
    visibility: hidden; /* Hide icon */
}