/* ==========================
   Project Hero
========================== */
.page-hero{

	height:70vh;

	background:url("../images/banner_hk.png");

	background-size:cover;

	background-position:center;

	position:relative;

	display:flex;

	align-items:center;

	justify-content:center;

	text-align:center;

	color:#fff;

}

.page-hero .overlay{

position:absolute;

inset:0;

background:rgba(0,0,0,.45);

}

.hero-content{

position:relative;

z-index:2;

}

.hero-content h1{

font-size:56px;

margin-bottom:20px;

}

.hero-content p{

font-size:22px;

}


.project-hero{

    position:relative;

    height:90vh;

    background:url("../images/banner_hk.png") center center/cover;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

.project-hero .overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

}

.project-hero .hero-content{

    position:relative;

    z-index:2;

    text-align:center;

    color:#fff;

}

.project-hero h1{

    font-size:64px;

    margin-bottom:20px;

    letter-spacing:2px;

}

.project-hero p{

    font-size:22px;

    line-height:1.8;

}


/* ==========================
   General Section
========================== */

.project-section{

    padding:100px 8%;

    background:#fff;

}

.container{

    max-width:1200px;

    margin:auto;

}


/* ==========================
   Mission
========================== */

.project-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.project-image img{

    width:100%;

    border-radius:20px;

    display:block;

    box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.project-text h2{

    font-size:42px;

    margin-bottom:30px;

}

.project-text p{

    font-size:18px;

    line-height:2;

    color:#555;

}


/* ==========================
   Meaning
========================== */

.meaning{

    background:#f7f7f7;

    padding:100px 8%;

}

.meaning h2{

    text-align:center;

    font-size:42px;

    margin-bottom:70px;

}

.meaning-grid{

    display:grid;

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

    gap:40px;

}

.meaning-card{

    background:#fff;

    border-radius:20px;

    padding:50px;

    text-align:center;

    transition:.35s;

    box-shadow:0 15px 30px rgba(0,0,0,.08);

}

.meaning-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 45px rgba(0,0,0,.15);

}

.icon{

    font-size:60px;

    margin-bottom:20px;

}

.meaning-card h3{

    font-size:38px;

    margin-bottom:20px;

}

.meaning-card p{

    line-height:2;

}


/* ==========================
   Flow
========================== */

.flow{

    padding:100px 8%;

    background:#fff;

}

.flow h2{

    text-align:center;

    font-size:42px;

    margin-bottom:70px;

}

.flow-line{

    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;

}

.step{

    width:18%;

    text-align:center;

}

.circle{

    width:80px;

    height:80px;

    border-radius:50%;

    background:#b8860b;

    color:#fff;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:26px;

    margin-bottom:20px;

}

.step h3{

    font-size:20px;

}


/* ==========================
   Goal
========================== */

.goal{

    background:#fafafa;

    padding:100px 8%;

}

.goal h2{

    text-align:center;

    margin-bottom:60px;

    font-size:42px;

}

.goal-grid{

    display:grid;

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

    gap:30px;

}

.goal-item{

    background:white;

    border-radius:15px;

    padding:40px;

    text-align:center;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.goal-item h3{

    font-size:48px;

    margin-bottom:20px;

}

.goal-item p{

    font-size:18px;

}


/* ==========================
   Quote
========================== */

.quote{

    background:#222;

    color:white;

    text-align:center;

    padding:120px 8%;

}

.quote h2{

    font-size:54px;

    margin-bottom:30px;

}

.quote p{

    font-size:22px;

    line-height:2;

}

.button{

    display:inline-block;

    margin-top:50px;

    background:#b8860b;

    color:white;

    padding:18px 50px;

    border-radius:50px;

    text-decoration:none;

    transition:.3s;

}

.button:hover{

    background:#946d09;

}