/* Basic styling for the container */
   .read-more {
    
    transition: transform 0.3s ease, border-color 0.3s ease; 
    max-width: 400px; /* Adjust the width as needed */
    margin: 0 auto; /* Center the container */
    padding: 20px;
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Styling for the paragraph */
.read-more p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    overflow: hidden;
    max-height: 100px; /* Adjust the height to control the visible text */
}

/* Styling for the "Read More" link */
.read-more-link {
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
    color: #00B98E;
    transition: color 0.3s ease;
}

.read-more-link:hover {
    color: #00B98E;
}

/* Styling for the expanded text (hidden by default) */
.read-more.expanded p {
    max-height: none;
}
.read-more:hover {
    transform: scale(1.05); /* Scale up the div slightly on hover */
    transition: transform 0.3s ease; /* Add a transition effect */
}
.my-element {
    margin-top: 20px; /* Adjust the value (e.g., 20px) to add the desired space */
}