/* How it works Section CSS */
:root {
    --primary-color: #27ae60;
    --secondary-color: #7251d1;
    --gradient-start: #51d172;
    --gradient-end: #32bd56;
    --text-color: #444444;
    --secondary-text-color: #f5f5f5;
    --bg-color: #333333;
    --secondary-bg-color: #424242;
}

#how-it-works {
    background-color: var(--secondary-bg-color);
    padding: 2rem 1rem; /* Default padding for all screens */
}

#how-it-works h3 {
    font-size: calc(2rem + 0.9vw);
    font-weight: bold;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 0.5rem; /* Space below text */
}

#how-it-works .underline {
    width: 25%; /* Default line width */
    height: 4px; /* Thickness of the line */
    background-color: var(--secondary-color); /* Purple color */
    margin: 0 auto 1rem auto; /* Center the line */
}

#how-it-works p {
    color: var(--secondary-text-color);
    margin: 25px auto; /* Center the paragraph vertically and horizontally */
    font-size: 1rem;
    line-height: 1.5;
    text-align: center; /* Align text evenly on both sides */
    max-width: 800px; /* Constrain the width of the paragraph */
    padding: 0 2rem; /* Add inner padding for better spacing */
}

.how-it-works-title-part {
    color: var(--primary-color); /* Green color */
    font-weight: bold;
}

.how-it-works-title-part-highlight {
    color: var(--secondary-color); /* Purple color */
    font-weight: bold;
}

.content-block {
    background-color: var(--bg-color); /* Subtle contrast for text blocks */
    padding: 1.5rem;
    margin-bottom: 1.5rem; /* Space between blocks */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

@media (min-width: 768px) {
    #how-it-works {
        padding: 3rem 10rem; /* Increased padding for larger screens */
    }

    #how-it-works .underline {
        width: 8%; /* Narrower line width for larger screens */
    }
}