.about-intro,
.who-section,
.purpose-section,
.process-section,
.games-about-section,
.children-section,
.about-ending {

    font-family: "Nunito", sans-serif;

}




.about-intro {

    position: relative;

    min-height: 430px;

    padding: 75px 6% 70px;

    background: #fff8ec;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    overflow: hidden;

}


.about-intro-content {

    position: relative;

    z-index: 5;

    max-width: 900px;

}


.about-intro h1 {

    margin: 22px 0 18px;

    font-family: "Fredoka", sans-serif;

    font-size: clamp(52px, 6vw, 78px);

    line-height: 1.02;

    color: #315c49;

}


.about-intro h1 span {

    display: block;

    color: #61c9a5;

}


.about-intro p {

    max-width: 720px;

    margin: 0 auto;

    font-size: 18px;

    line-height: 1.7;

    color: #527766;

}


/* DECORATIONS */

.about-intro-decoration {

    position: absolute;

    border-radius: 50%;

    opacity: 0.55;

}


.decoration-left {

    width: 230px;

    height: 230px;

    left: -100px;

    bottom: -100px;

    background: #c7eaf2;

}


.decoration-right {

    width: 180px;

    height: 180px;

    right: -70px;

    top: -70px;

    background: #f7d5e0;

}




.who-section {

    padding: 85px 6%;

    background: #d9f3df;

}


.who-container {

    max-width: 1180px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 0.8fr;

    gap: 80px;

    align-items: center;

}


.who-text {

    max-width: 650px;

}


.who-text h2 {

    margin: 22px 0;

    font-family: "Fredoka", sans-serif;

    font-size: clamp(45px, 5vw, 65px);

    line-height: 1;

    color: #315c49;

}


.who-text h2 span {

    display: block;

    color: #61c9a5;

}


.who-text p {

    margin: 0 0 18px;

    font-size: 17px;

    line-height: 1.75;

    color: #527766;

}


/* ILLUSTRATION */

.who-illustration {

    position: relative;

    height: 430px;

    border-radius: 45px;

    background: #f7d5e0;

    overflow: hidden;

}


.illustration-circle {

    position: absolute;

    width: 360px;

    height: 360px;

    right: -50px;

    top: 30px;

    border-radius: 50%;

    background: #f7e4a7;

}


.illustration-small-circle {

    position: absolute;

    width: 75px;

    height: 75px;

    left: 45px;

    top: 45px;

    border-radius: 50%;

    background: #61c9a5;

}


.who-illustration img {

    position: absolute;

    z-index: 5;

    width: 340px;

    bottom: -20px;

    left: 50%;

    transform: translateX(-50%);

}




.purpose-section {

    padding: 90px 6%;

    background: #fff8ec;

}


.purpose-header {

    max-width: 780px;

    margin: auto;

    text-align: center;

}


.purpose-header h2 {

    margin: 22px 0 16px;

    font-family: "Fredoka", sans-serif;

    font-size: clamp(45px, 5vw, 65px);

    line-height: 1;

    color: #315c49;

}


.purpose-header h2 span {

    color: #61c9a5;

}


.purpose-header p {

    max-width: 700px;

    margin: auto;

    font-size: 17px;

    line-height: 1.7;

    color: #527766;

}


/* PURPOSE CARDS */

.purpose-cards {

    max-width: 1180px;

    margin: 55px auto 0;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

}


.purpose-card {

    min-height: 250px;

    padding: 28px;

    border-radius: 30px;

}


.green-card {

    background: #d9f3df;

}


.pink-card {

    background: #f7d5e0;

}


.yellow-card {

    background: #f7e4a7;

}


.blue-card {

    background: #c7eaf2;

}


.purpose-icon {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background: rgba(255,255,255,0.75);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    font-weight: 900;

    color: #315c49;

    margin-bottom: 45px;

}


.purpose-card h3 {

    margin: 0 0 10px;

    font-family: "Fredoka", sans-serif;

    font-size: 28px;

    color: #315c49;

}


.purpose-card p {

    margin: 0;

    font-size: 15px;

    line-height: 1.6;

    color: #527766;

}




.process-section {

    padding: 90px 6%;

    background: #d9f3df;

}


.process-header {

    max-width: 800px;

    margin: auto;

    text-align: center;

}


.process-header h2 {

    margin: 22px 0 16px;

    font-family: "Fredoka", sans-serif;

    font-size: clamp(45px, 5vw, 65px);

    line-height: 1;

    color: #315c49;

}


.process-header h2 span {

    color: #61c9a5;

}


.process-header p {

    margin: auto;

    max-width: 650px;

    font-size: 17px;

    line-height: 1.7;

    color: #527766;

}


/* PROCESS CARDS */

.learning-process {

    max-width: 1180px;

    margin: 60px auto 0;

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 18px;

}


.process-card {

    padding: 25px 18px;

    text-align: center;

}


.process-number {

    width: 72px;

    height: 72px;

    margin: 0 auto 20px;

    border-radius: 50%;

    background: #315c49;

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

    font-weight: 900;

}


.process-card:nth-child(2) .process-number {

    background: #61c9a5;

}


.process-card:nth-child(3) .process-number {

    background: #e9aebe;

    color: #315c49;

}


.process-card:nth-child(4) .process-number {

    background: #e9cf70;

    color: #315c49;

}


.process-card:nth-child(5) .process-number {

    background: #a9dce8;

    color: #315c49;

}


.process-card h3 {

    margin: 0 0 8px;

    font-family: "Fredoka", sans-serif;

    font-size: 25px;

    color: #315c49;

}


.process-card p {

    margin: 0;

    font-size: 14px;

    line-height: 1.5;

    color: #527766;

}




.games-about-section {

    padding: 90px 6%;

    background: #fff8ec;

}


.games-about-header {

    max-width: 800px;

    margin: auto;

    text-align: center;

}


.games-about-header h2 {

    margin: 22px 0 15px;

    font-family: "Fredoka", sans-serif;

    font-size: clamp(45px, 5vw, 65px);

    line-height: 1;

    color: #315c49;

}


.games-about-header h2 span {

    color: #61c9a5;

}


.games-about-header p {

    margin: auto;

    color: #527766;

    font-size: 17px;

}


/* GAME GRID */

.games-about-grid {

    max-width: 1180px;

    margin: 55px auto 0;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;

}


.about-game {

    position: relative;

    min-height: 400px;

    padding: 40px;

    border-radius: 38px;

    overflow: hidden;

}


.find-game {

    background: #f7d5e0;

}


.puzzle-game {

    background: #c7eaf2;

}


.game-content {

    position: relative;

    z-index: 5;

    max-width: 450px;

}


.game-age {

    display: inline-block;

    padding: 9px 17px;

    border-radius: 30px;

    background: rgba(255,255,255,0.85);

    color: #315c49;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1px;

}


.about-game h3 {

    margin: 25px 0 12px;

    font-family: "Fredoka", sans-serif;

    font-size: 45px;

    color: #315c49;

}


.about-game p {

    max-width: 430px;

    font-size: 16px;

    line-height: 1.65;

    color: #527766;

}


.about-game a {

    display: inline-flex;

    margin-top: 10px;

    padding: 13px 23px;

    border-radius: 30px;

    background: #315c49;

    color: white;

    text-decoration: none;

    font-size: 14px;

    font-weight: 900;

    transition: 0.3s ease;

}


.about-game a:hover {

    background: #61c9a5;

    transform: translateY(-3px);

}


.game-character {

    position: absolute;

    z-index: 3;

    width: 210px;

    right: 5px;

    bottom: -35px;

}




.children-section {

    padding: 90px 6%;

    background: #d9f3df;

}


.children-container {

    max-width: 1180px;

    min-height: 400px;

    margin: auto;

    padding: 50px 65px;

    border-radius: 40px;

    background: #315c49;

    display: grid;

    grid-template-columns: 0.8fr 1fr;

    gap: 60px;

    align-items: center;

    overflow: hidden;

}


.children-character {

    position: relative;

    height: 350px;

}


.character-bg {

    position: absolute;

    width: 310px;

    height: 310px;

    left: 10px;

    top: 15px;

    border-radius: 50%;

    background: #61c9a5;

}


.children-character img {

    position: absolute;

    z-index: 4;

    width: 300px;

    left: 10px;

    bottom: -15px;

}


.children-content {

    max-width: 600px;

}


.children-content .section-badge {

    background: #61c9a5;

    color: white;

}


.children-content h2 {

    margin: 22px 0;

    font-family: "Fredoka", sans-serif;

    font-size: clamp(45px, 5vw, 65px);

    line-height: 1;

    color: white;

}


.children-content h2 span {

    color: #61c9a5;

}


.children-content p {

    margin: 0 0 17px;

    color: #d9f3df;

    font-size: 16px;

    line-height: 1.7;

}




.about-ending {

    padding: 80px 6%;

    background: #fff8ec;

    text-align: center;

}


.about-ending-content {

    max-width: 750px;

    margin: auto;

}


.about-ending h2 {

    margin: 22px 0 15px;

    font-family: "Fredoka", sans-serif;

    font-size: clamp(45px, 5vw, 65px);

    line-height: 1;

    color: #315c49;

}


.about-ending h2 span {

    color: #61c9a5;

}


.about-ending p {

    margin: 0;

    font-size: 17px;

    color: #527766;

}




@media (max-width: 1000px) {

    .who-container {

        grid-template-columns: 1fr 0.8fr;

        gap: 40px;

    }


    .purpose-cards {

        grid-template-columns: repeat(2, 1fr);

    }


    .learning-process {

        grid-template-columns: repeat(3, 1fr);

    }


    .games-about-grid {

        grid-template-columns: 1fr;

    }

}




@media (max-width: 750px) {

    .about-intro {

        min-height: 360px;

        padding: 65px 6%;

    }


    .about-intro h1 {

        font-size: 48px;

    }


    .about-intro p {

        font-size: 16px;

    }


    .who-section {

        padding: 70px 6%;

    }


    .who-container {

        grid-template-columns: 1fr;

        gap: 40px;

    }


    .who-text {

        text-align: center;

    }


    .who-illustration {

        max-width: 500px;

        width: 100%;

        margin: auto;

    }


    .purpose-section,
    .process-section,
    .games-about-section,
    .children-section {

        padding: 70px 6%;

    }


    .purpose-cards {

        grid-template-columns: 1fr;

    }


    .learning-process {

        grid-template-columns: 1fr;

    }


    .games-about-grid {

        grid-template-columns: 1fr;

    }


    .about-game {

        min-height: 480px;

        padding: 30px;

    }


    .children-container {

        grid-template-columns: 1fr;

        padding: 45px 30px;

        text-align: center;

    }


    .children-character {

        height: 300px;

    }


    .character-bg {

        left: 50%;

        transform: translateX(-50%);

    }


    .children-character img {

        left: 50%;

        transform: translateX(-50%);

    }

}




@media (max-width: 500px) {

    .about-intro h1 {

        font-size: 42px;

    }


    .who-text h2,
    .purpose-header h2,
    .process-header h2,
    .games-about-header h2,
    .children-content h2,
    .about-ending h2 {

        font-size: 40px;

    }


    .who-illustration {

        height: 360px;

    }


    .who-illustration img {

        width: 290px;

    }


    .about-game h3 {

        font-size: 38px;

    }


    .game-character {

        width: 175px;

    }

}