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

/* Hero */

.about-hero{
    padding:90px 0 70px;
    background:var(--color-white);
}



/* Story */

.story{
    padding:100px 0;
}

.story__inner,
.approach__inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.story__content p,
.turning-point p,
.approach__content p,
.media__box p,
.page-cta p{
    margin-bottom:18px;

    font-size:17px;
    line-height:1.8;
}

.story__image img,
.approach__image img{
    height:460px;
    object-fit:cover;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-soft);
}

/* Turning point */

.turning-point{
    padding:90px 0;
    background:var(--color-white);
}

.turning-point__box{
    
    margin:0 auto;
    padding:50px;

    border-radius:var(--radius-lg);
    background:var(--color-bg);
    box-shadow:var(--shadow-soft);
}

/* Education */

.education{
    padding:100px 0;
}

.education__head{
    max-width:760px;
    margin-bottom:55px;
}

.education__gallery{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:25px;
}

.education__gallery img{
    height:380px;
    object-fit:cover;
    object-position:top;

    border-radius:var(--radius-md);
    box-shadow:var(--shadow-soft);
    background:var(--color-white);
}

.education__bottom{
    margin-top:40px;
}

/* Approach */

.approach{
    padding:100px 0;
    background:var(--color-white);
}

/* Media */

.media{
    padding:90px 0;
}

.media__box{
    padding:55px;
    border-radius:var(--radius-lg);
    background:var(--color-white);
    box-shadow:var(--shadow-soft);
    text-align:center;
}

.media__box .section-title{
    max-width:760px;
    margin:0 auto 24px;
}

.media__box p{
    max-width:620px;
    margin:0 auto 35px;
}

.media__buttons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
}

/* CTA */

.page-cta{
    padding:90px 0;
    background:var(--color-primary);
    color:var(--color-white);
    text-align:center;
}

.page-cta .section-title{
    color:var(--color-white);
    margin-bottom:20px;
}

.page-cta p{
    max-width:520px;
    margin:0 auto 35px;
}

.page-cta__buttons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
}

.page-cta .btn{
    background:var(--color-white);
    color:var(--color-primary);
}

.page-cta .btn--outline{
    background:transparent;
    border:1px solid var(--color-white);
    color:var(--color-white);
}

@media(max-width:992px){

    .about-hero,
    .story,
    .turning-point,
    .education,
    .approach,
    .media,
    .page-cta{
        padding:70px 0;
    }

    .story__inner,
    .approach__inner{
        grid-template-columns:1fr;
        gap:40px;
    }

    .story__image,
    .approach__image{
        order:-1;
    }

    .story__image img,
    .approach__image img{
        height:auto;
        max-height:520px;
    }

    .education__gallery{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media(max-width:768px){

    .education__gallery{
        gap:18px;
    }

    .education__gallery img{
        height:320px;
    }

    .turning-point__box,
    .media__box{
        padding:35px 25px;
    }

    .media__buttons,
    .page-cta__buttons{
        flex-direction:column;
    }
}

@media(max-width:576px){

    .about-hero,
    .story,
    .turning-point,
    .education,
    .approach,
    .media,
    .page-cta{
        padding:55px 0;
    }

    .story__content p,
    .turning-point p,
    .approach__content p,
    .media__box p,
    .page-cta p{
        font-size:15px;
        line-height:1.7;
    }

    .education__gallery{
        grid-template-columns:1fr;
    }

    .education__gallery img{
        height:auto;
    }

    .turning-point__box,
    .media__box{
        padding:28px 20px;
        border-radius:var(--radius-md);
    }

    .media__buttons .btn,
    .page-cta__buttons .btn{
        width:100%;
    }
}
@media(max-width:576px){

    .story__content,
    .approach__content{
        width:100%;
        max-width:none;
    }

    .story__image img,
    .approach__image img{
        width:100%;
        height:auto;
    }
    .container{
    max-width:100%;
    margin:0 auto;
    padding:0 20px;
}

}

@media(max-width:768px){

    .story__inner,
    .approach__inner{
        display:grid;
        grid-template-columns:1fr;
        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    .story__content,
    .story__image,
    .approach__content,
    .approach__image{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .story__image img,
    .approach__image img{
        width:100%;
        max-width:100%;
        height:auto;
        display:block;
    }

    .story__content p,
    .approach__content p{
        max-width:100%;
        overflow-wrap:break-word;
    }

    .page-title{
        font-size: 20px; 
    }
}