Introduction to <details>tag

/* General Styles */
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f0f4f8; /* Subtle light blue-gray background */
        color: #333;
        margin: 0;
        padding: 20px;
    }
    
    .container {
        max-width: 800px;
        margin: 0 auto;
        background-color: #fff;
        padding: 30px;
        border-radius: 12px; /* More rounded corners for the container */
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); /* Enhanced shadow for depth */
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transition for hover effects */
    }
    
    /* Hover effect for container */
    .container:hover {
        transform: translateY(-5px); /* Slight lift on hover */
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); /* More pronounced shadow on hover */
    }
    
    h1 {
        text-align: center;
        color: #0056b3; /* Slightly darker blue for the heading */
        margin-bottom: 25px;
        font-size: 2.4em; /* Larger font size for the heading */
        background: linear-gradient(to right, #6a11cb, #2575fc); /* Gradient text */
        -webkit-background-clip: text;
        color: transparent;
    }
    
    /* Details and Summary Styles */
    .faq-item {
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        transition: background-color 0.3s ease; /* Smooth transition for background color */
    }
    
    /* Hover effect for FAQ item */
    .faq-item:hover {
        background-color: #f1f5f9; /* Light background on hover */
    }
    
    .faq-item summary {
        cursor: pointer;
        padding: 20px; /* More padding for a spacious feel */
        background-color: #f7f9fc; /* Light blue-gray background */
        font-size: 1.2em;
        font-weight: bold;
        position: relative;
        list-style: none;
        transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for color changes */
        border-bottom: 1px solid #eee; /* Subtle border below summary */
    }
    
    /* Hover and active states for summary */
    .faq-item summary:hover {
        background-color: #eaf2f8; /* Slightly darker background on hover */
    }
    
    .faq-item[open] summary {
        background-color: #6b42ff; /* Blue background when expanded */
        color: #fff; /* White text when expanded */
    }
    
    /* Custom Icon for Summary */
    .faq-item summary::before {
        content: '➕'; /* Plus icon for closed state */
        font-size: 1.4em; /* Larger font size for the icon */
        color: #0056b3; /* Blue color for the icon */
        position: absolute;
        right: 20px;
        transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition for icon rotation and color */
    }
    
    /* Rotate and change icon color when open */
    .faq-item[open] summary::before {
        content: '➖'; /* Minus icon for open state */
        transform: rotate(180deg); /* Rotate icon on open */
        color: #fff; /* White color for the icon when open */
    }
    
    /* Details Content Styles */
    .faq-item p {
        padding: 20px; /* More padding for content */
        margin: 0;
        background-image: linear-gradient(to right, rgb(225, 246, 255), #ffd2fd);
        color: #333;
        border-top: 1px solid #ddd;
        font-size: 1em;
        animation: slideDown 0.4s ease-in-out; /* Slide down animation for opening content */
    }
    
    /* Keyframes for slide down animation */
    @keyframes slideDown {
        0% {
            opacity: 0;
            transform: translateY(-10px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Responsive Design */
    @media (max-width: 600px) {
        .container {
            padding: 20px;
        }
    
        .faq-item summary {
            font-size: 1.1em;
        }
    
        .faq-item p {
            font-size: 0.95em;
        }
    }