.example-usage {
        background: rgba(0, 0, 0, 0.6); /* Dark transparent background to match overall theme */
        border-radius: 15px;
        padding: 30px 20px;
        margin: 20px 0;
        box-shadow: 0 5px 15px rgba(0, 255, 204, 0.2); /* Glowing shadow */
        backdrop-filter: blur(5px); /* Subtle background blur effect */
        transition: all 0.3s ease-in-out;
    }

    .example-usage h3 {
        font-size: 2rem;
        color: #00ffcc; /* Glowing cyan for headings */
        text-align: center;
        margin-bottom: 20px;
        text-shadow: 0 5px 10px rgba(0, 255, 204, 0.5);
        animation: glow 1.5s infinite alternate; /* Adding the glow effect */
    }

    .example-usage h3:hover {
        color: #fff; /* Color change on hover */
    }

    .example-usage ul {
        list-style: none;
        padding: 0;
    }

    .example-usage li {
        font-size: 1.1rem;
        color: #ddd;
        margin-bottom: 15px;
        padding: 10px 15px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.1); /* Transparent background for list items */
        transition: transform 0.3s ease, background-color 0.3s ease;
    }

    .example-usage li strong {
        color: #00ffcc; /* Accent color for strong text */
    }

    .example-usage li:hover {
        background: rgba(0, 255, 204, 0.2); /* Hover effect for list items */
        transform: translateX(10px); /* Subtle horizontal slide effect */
    }

    @keyframes glow {
        from {
            text-shadow: 0 5px 10px rgba(0, 255, 204, 0.5);
        }
        to {
            text-shadow: 0 5px 20px rgba(0, 255, 204, 1);
        }
    }

    /* Responsive Design for smaller screens */
    @media (max-width: 768px) {
        .example-usage {
            padding: 20px 15px;
        }

        .example-usage h3 {
            font-size: 1.6rem;
        }

        .example-usage li {
            font-size: 1rem;
        }
    }