/* Hero Section - Exact match */
.hero {
    position: relative;
    height: 350px;
    overflow: hidden;
}

.hero-image {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
}

.hero-content h1 {
    color: white;
    font-size: 64px;
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    animation: fadeInUp 1s ease-out;
}

/* Breadcrumb - Exact purple color */
.breadcrumb {
    background: #f8f9fa;
    padding: 15px 0;
    border-bottom: 1px solid #e5e7eb;
}

.breadcrumb .container {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}

.breadcrumb a {
    color: #6b21a8;
    text-decoration: none;
    font-weight: 500;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.sep {
    color: #6b21a8;
    font-weight: 500;
}

.current {
    color: #6b21a8;
    font-weight: 500;
}

/* =============================
   MISSION INTRO SECTION
============================= */

.mission-hero{
    padding:90px 20px;   /* background remove */
}

.mission-content{
    max-width:820px;     /* same width like screenshot */
    margin:0 auto;
    text-align:center;
}

.mission-heading{
    font-size:48px;
    font-weight:900;
    line-height:1.3;
    text-transform:uppercase;
    margin-bottom:40px;
    color:#000;
}

.mission-heading span{
    color:#e53935;
}

/* TEXT */

.mission-content p{
    font-size:18px;
    line-height:1.9;
    color:#333;
    margin-bottom:30px;
}

/* HIGHLIGHT WORD */

.mission-highlight{
    color:#e53935;
    font-weight:600;
}

.breadcrumb{
    background:#f3f4f6;
    padding:15px 0;
    border-bottom:1px solid #e5e7eb;
}

.breadcrumb .container{
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
    display:flex;
    align-items:center;
    gap:10px;
}

.breadcrumb a{
    color:#6b21a8;
    text-decoration:none;
    font-weight:500;
}

.breadcrumb a:hover{
    text-decoration:underline;
}

.sep{
    color:#6b21a8;
}

.current{
    color:#6b21a8;
}

.team-intro{
padding:80px 0 60px;
background:#ffffff;
}

/* container alignment */

.container{
max-width:1200px;
margin:0 auto;
padding:0 20px;
}

/* heading */

.team-title{
text-align:center;
font-size:44px;
font-weight:800;
letter-spacing:1px;
margin-bottom:40px;
}

.team-title span{
color:#e63946;
}

/* description */

.team-description{
max-width:900px;
margin:0 auto;
font-size:17px;
line-height:1.8;
color:#555;
text-align:center;
}

.team-description a{
color:#e63946;
text-decoration:none;
font-weight:500;
}

.team-description a:hover{
text-decoration:underline;
}

/* member section */

.team-member-section{
background:#f5f5f5;
padding:80px 0;
}

.team-container{
max-width:1200px;
margin:0 auto;
padding:0 20px;
}

/* layout */

.team-member{
display:flex;
align-items:center;
justify-content:space-between;
gap:80px;
}

/* reverse layout */

.team-member.reverse{
flex-direction:row-reverse;
}

/* image */

.team-photo{
flex:0 0 330px;
}

.team-photo img{
width:100%;
border-radius:12px;
display:block;
}

/* text */

.team-content{
flex:1;
}

.team-content h2{
font-size:36px;
margin-bottom:20px;
}

.team-content ul{
padding-left:20px;
line-height:1.8;
font-size:17px;
color:#333;
margin-bottom:25px;
}

/* facebook */

.team-social{
display:flex;
align-items:center;
gap:10px;
color:#3b5998;
font-size:17px;
}

.team-member-section{
background:#f5f5f5;
padding:80px 0;
border-bottom:1px solid #ccc;
}

.team-member-section:first-of-type{
border-top:1px solid #ccc;
}