:root {
    --primary-color: #27ae60;
    --secondary-color: #7251d1;
    --gradient-start: #51d172;
    --gradient-end: #32bd56;
    --text-color: #444444;
    --secondary-text-color: #f5f5f5;
    --bg-color: #333333;
}

#about {
    background-color: var(--bg-color);
}

.about-text {
    flex: 1;
    max-width: 600px;
    padding: 1rem;
    margin: 0 auto;
    font-size: calc(1.5rem + 0.9vw);
}

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

#about h4 {
    font-size: calc(1rem + 0.2vw);
    font-weight: bold;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 0.5rem; /* Add space below text */
}

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

/* Styles for the "Greek" part */
.about-title-part {
    color: var(--primary-color); /* Green color */
    font-weight: bold;
}

.about-title-part-highlight {
    color: var(--secondary-color); /* Purple color */
    font-weight: bold;
}
/* Styles for the "Study" part */
#about p {
    color: var(--secondary-text-color);
    margin: 25px;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center; /* Centers the text horizontally */
}

.features-group {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    gap: 1.5rem; /* Space between items */
}

.features-group ul {
    list-style: none; /* Remove bullets */
    padding: 0;
    margin: 0;
}

.features-group li {
    margin-bottom: 1.5rem; /* Space between list items */
}

@media (min-width: 768px) {
    #about {
        padding: 3rem 10rem;
    }
    #about > p {
        padding: 0rem 10rem; /* Add padding only to these paragraphs */
    }
    .features-group {
        display: grid;
        grid-template-rows: auto auto auto; /* Three rows for the three lists */
        grid-template-columns: 1fr; /* Single column per row */
        gap: 2rem; /* Space between the rows */
    }
    #about .underline {
        width: 8%; /* Control the length of the line */
        height: 4px; /* Thickness of the line */
        background-color: var(--secondary-color); /* Purple color */
        margin: 0 auto 1rem auto; /* Center the line */
    }

    .features-group ul {
        display: grid;
        grid-template-columns: repeat(
            auto-fit,
            minmax(300px, 1fr)
        ); /* Create flexible items */
        gap: 1.5rem; /* Space between list items */
    }

    /* Special styling for the last list */
    .features-group ul:last-child {
        display: flex; /* Use Flexbox for even distribution */
        justify-content: space-evenly; /* Evenly space the 2 items */
        padding: 0rem 10rem;
    }

    .features-group li {
        margin-bottom: 1.5rem; /* Space between list items */
    }

    #about .features-group p {
        padding: 0; /* Reset padding for paragraphs inside the lists */
    }
}

@media (min-width: 768px) and (max-width: 1267px) {
    #about {
        padding: 2rem 4rem; /* Reduce side padding for medium screens */
        max-width: 100%; /* Constrain the width of the content */
        margin: 0 auto; /* Center the content */
    }

    #about > p {
        padding: 0 2rem; /* Reduce padding on paragraphs for better flow */
    }

    .features-group {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Two equal-width columns */
        gap: 1.5rem; /* Space between items */
    }

    .features-group ul {
        display: contents; /* Allow <li> elements to flow directly into the grid */
    }

    .features-group ul:last-child {
        display: contents; /* Ensure the last child behaves like the others */
    }

    .features-group li {
        margin-bottom: 1.5rem; /* Add spacing between list items */
    }
}