@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&display=swap');

:root {
    --primary-color: #904AF2;
    --secondary-color: #6e6a64;
    --muted: #f5f6f8;
    --card-border: #ececec;
    --text: #222;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--text);
    background-color: var(--secondary-color);
}

main {

    .apropos--section {
        margin-top: 100px;
        padding: 0 120px 80px 120px;

        h1 {
                font-size: 4rem;
                font-weight: 900;
                color: white;
                margin-bottom: 100px;
                text-align: center;
                font-family: 'Oswald', sans-serif;
            }

        .apropos--container {
            display: flex;
            max-width: 1600px;
            justify-content: space-around;
            justify-self: center;
            align-items: center;
            
            .apropos--text--container {
                font-size: 18px;
                line-height: 1.6;
                color: #ffffff;
                width: 35%;
            }

            .apropos--image--container {
                width: 30%;
                text-align: end;

                img {
                    width: 100%;
                    height: auto;
                }
            }
        }
    }

    .parcours--section {
        margin-top: 100px;
        background-color: white;
        padding: 100px 120px 100px 120px;

        h2 {
            font-size: 40px;
            font-weight: 600;
            color: var(--primary-color);
            text-align: center;
            margin-bottom: 100px;
            font-family: 'Oswald', sans-serif;
        }

        .parcours--container {
            display: flex;
            max-width: 1200px;
            justify-self: center;
            align-items: center;
            gap: 120px;

            .parcours--image--container {
                width: 50%;

                img {
                    width: 100%;
                    height: auto;
                }
            }

            .parcours--list {
            list-style-type: none;
            width: 50%;

                .parcours--item {
                    max-width: fit-content;
                    font-size: 18px;
                    line-height: 1.6;
                    color: #000000;
                    margin-bottom: 30px;

                    p.description {
                        margin-block: 5px;
                        font-size: 14px;
                        color: #333333;
                    }
                }
            }
        }
    }
}

/* Responsive: tablet and mobile adjustments */
@media (max-width: 1024px) {
    main { padding: 0 40px 40px 40px; }
    .apropos--container {
        flex-direction: column;
        gap: 20px;
        align-items: center;
        padding: 0 12px;
    }
    .apropos--text--container { width: 100%; font-size: 16px; }
    .apropos--image--container { width: 100%; text-align: center; }
    .parcours--container { flex-direction: column; gap: 24px; }
    .parcours--image--container, .parcours--list { width: 100%; }
}

@media (max-width: 768px) {
    main { padding: 0;}
    .apropos--section {padding: 0 12px 40px 12px !important;}
    .apropos--section h1 { font-size: 28px !important; text-align: center; }
    .apropos--text--container { font-size: 16px !important; padding: 8px 0; width: 100% !important; text-align: center; }
    .apropos--image--container img { width: 100%; height: auto; }
    .parcours--section { padding: 60px 12px 40px 12px !important; }
    .parcours--section h2 { font-size: 28px !important; }
    .parcours--container { gap: 10px !important; text-align: center; }
    .parcours--list { width: 100% !important; text-align: center; justify-items: center; }
    .parcours--item { font-size: 16px; width: 100% !important; text-align: center; }
}