/*==========================================================
PROFILE HERO
==========================================================*/

.profile-hero{

    padding:120px 0 80px;

}

.profile-hero__text{

    max-width:720px;

    margin:40px auto 0;

    text-align:center;

        font-size:1.2rem;   

         font-weight:400;  

    line-height:2;

    color:var(--color-gray);

}


/*==========================================================
PROFILE STORY
==========================================================*/

.profile-story{

    padding:100px 0;

}

.profile-story__inner{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.profile-story--reverse .profile-story__image{

    order:2;

}

.profile-story--reverse .profile-story__content{

    order:1;

}

.profile-story__image img{

    width:100%;

    border-radius:16px;

    display:block;

}

.profile-story__content .section-en{

    margin-bottom:16px;

}

.profile-hero h2{

    font-size:2.3rem;

}

.profile-story__content h3{

    margin-bottom:32px;

    font-size:clamp(1.4rem,5vw,2.4rem);

    line-height:1.3;


}

.profile-story__content p{

    margin-bottom:24px;

    line-height:2;

    color:var(--color-gray);

}


/*==========================================================
VALUES
==========================================================*/

.profile-values{

    padding:120px 0;

    background:#fff;

}

.profile-values__list{

    display:grid;

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

    gap:40px;

    margin-top:80px;

}

.profile-value{

    padding-bottom:32px;

    border-bottom:1px solid #e6e6e6;

}

.profile-values .section-title h2{

    font-size:2rem;

}

.profile-value h3{

    margin-bottom:20px;

    font-size:1.6rem;

}

.profile-value p{

    line-height:2;

    color:var(--color-gray);

}


/*==========================================================
HISTORY
==========================================================*/

.profile-history{

    padding:120px 0;

}


/*==========================================================
MESSAGE
==========================================================*/

.profile-message{

    padding:120px 0;

}

.profile-message__inner{

    display:grid;

    grid-template-columns:320px 1fr;

    gap:80px;

    align-items:center;

}

.profile-message__image img{

    width:100%;

    border-radius:16px;

    display:block;

}

.profile-message__content h2{

    margin-bottom:32px;

    font-size:2.6rem;

}

.profile-message__content p{

    margin-bottom:24px;

    line-height:2;

    color:var(--color-gray);

}




/*==========================================================
PROFILE Responsive
==========================================================*/

@media(max-width:768px){

.profile-hero{

    padding:96px 0 10px;

}

.profile-story{

    padding:16px 0 72px;

}

.profile-story__inner{

    display:flex;

    flex-direction:column;

    gap:48px;

}

.profile-story--reverse .profile-story__image,

.profile-story--reverse .profile-story__content{

    order:initial;

}



.profile-story__content{

    text-align:center;

}

.profile-story__content h3{

    font: size 1.7rem;

}

.profile-values{

    padding:80px 0;

}

.profile-values .section-title h2{

    font-size:1.7rem;

    line-height:1.3;

}

.profile-value h3{

    font-size:1.35rem;

    line-height:1.4;

}

.profile-values__list{

    grid-template-columns:1fr;

    gap:32px;

    margin-top:56px;

}

.profile-history{

    padding:80px 0;

}

.profile-message{

    padding:80px 0;

}

.profile-message__inner{

    display:flex;

    flex-direction:column;

    gap:48px;

    text-align:center;

}

.profile-message__image{

    width:280px;

}

}