/* Global resets removed to prevent conflict with base.html */

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

/* Navbar styles removed as we use base.html navbar */

/* 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;
}


/* ===============================
   OUR MISSION SECTION
================================ */

.our-mission{
    background:#f2f2f2;
    padding:90px 0;
}

.mission-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:60px;
    align-items:center;
}

/* TITLE */

.mission-title{
    font-size:42px;
    font-weight:900;
    margin-bottom:40px;
}

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

/* QUOTE */

.mission-quote{
    border-left:4px solid #ddd;
    padding-left:20px;
    margin-bottom:35px;
}

.mission-quote p{
    font-style:italic;
    font-size:18px;
    color:#555;
}

/* TEXT */

.mission-left p{
    font-size:17px;
    line-height:1.8;
    color:#333;
    margin-bottom:22px;
}

/* TARGET ICON */

.target-icon{
    position:relative;
    width:200px;
    height:200px;
    margin:auto;
}

.circle{
    position:absolute;
    border-radius:50%;
    border:20px solid #e53935;
}

.circle.big{
    width:200px;
    height:200px;
}

.circle.mid{
    width:120px;
    height:120px;
    top:40px;
    left:40px;
}

.circle.small{
    width:40px;
    height:40px;
    top:80px;
    left:80px;
    background:#e53935;
}

/* RESPONSIVE */

@media(max-width:900px){

    .mission-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .mission-quote{
        border-left:none;
        border-top:3px solid #ddd;
        padding-top:20px;
    }

}
.mission-section{
    padding:120px 0;
    background:#f5f5f5;
}

.mission-container{
    width:85%;
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:100px;
}

.mission-text{
    flex:1;
    max-width:650px;
}

.mission-text h2{
    font-size:48px;
    font-weight:800;
    margin-bottom:35px;
}

.mission-text h2 span{
    color:#e63946;
}

.mission-text blockquote{
    border-left:4px solid #dcdcdc;
    padding-left:20px;
    font-style:italic;
    font-size:20px;
    margin-bottom:30px;
    color:#444;
}

.mission-text p{
    font-size:18px;
    line-height:1.8;
    margin-bottom:25px;
    color:#555;
}

.mission-icon{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
}

.mission-icon img{
    width:250px;
}

.vision-section{
padding:120px 0;
/* background:#f5f5f5; */
text-align:center;
font-family:Arial, sans-serif;
}

.vision-title{
font-size:48px;
font-weight:800;
margin-bottom:70px;
}

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

.vision-container{
width:75%;
margin:auto;
display:flex;
align-items:center;
gap:80px;
}

/* icon */

.vision-icon{
width:35%;
display:flex;
justify-content:center;
align-items:center;
}

.eye{
width:200px;
height:110px;
border:12px solid #e63946;
border-radius:120px / 70px;
position:relative;
}

.pupil{
width:60px;
height:60px;
border:12px solid #e63946;
border-radius:50%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}

/* text */

.vision-text{
width:65%;
text-align:left;
border-left:4px solid #ddd;
padding-left:35px;
}

.vision-text blockquote{
font-size:20px;
font-style:italic;
margin-bottom:30px;
color:#444;
}

.vision-text p{
font-size:18px;
line-height:1.8;
margin-bottom:25px;
color:#555;
}

.values-section{
padding:120px 0;
background:#f5f5f5;
font-family:Arial, sans-serif;
}

.values-title{
width:75%;
margin:auto;
font-size:48px;
font-weight:800;
margin-bottom:60px;
}

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

.values-container{
width:75%;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:80px;
}

.values-text{
width:65%;
}

/* numbering list */

.values-list{
font-size:18px;
line-height:1.9;
color:#333;
padding-left:20px;
}

.values-list li{
margin-bottom:18px;
}

/* icon */

.values-icon{
width:35%;
display:flex;
justify-content:center;
align-items:center;
}

/* diamond icon */

.diamond-icon{
width:140px;
height:140px;
border:12px solid #e63946;
transform:rotate(45deg);
position:relative;
}

.diamond-icon::before,
.diamond-icon::after{
content:"";
position:absolute;
background:#e63946;
}

.diamond-icon::before{
width:12px;
height:100%;
left:50%;
transform:translateX(-50%);
}

.diamond-icon::after{
height:12px;
width:100%;
top:50%;
transform:translateY(-50%);
}
.mission-section{
padding:120px 0;
background:#f5f5f5;
font-family:Arial, sans-serif;
}

.mission-title{
width:75%;
margin:auto;
font-size:48px;
font-weight:800;
margin-bottom:60px;
}

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

.mission-container{
width:75%;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:80px;
}

.mission-text{
width:60%;
}

.mission-text blockquote{
border-left:4px solid #ddd;
padding-left:25px;
font-style:italic;
font-size:20px;
margin-bottom:30px;
color:#444;
}

.mission-text p{
font-size:18px;
line-height:1.8;
margin-bottom:25px;
color:#333;
}

.mission-icon{
width:40%;
display:flex;
justify-content:center;
align-items:center;
}

/* TARGET ICON */

.target{
width:200px;
height:200px;
border-radius:50%;
background:#e63946;
display:flex;
justify-content:center;
align-items:center;
}

.circle2{
width:130px;
height:130px;
background:#f5f5f5;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
}

.circle3{
width:60px;
height:60px;
background:#e63946;
border-radius:50%;
}

.mv-intro{

padding:120px 5cm;
/* background:#f5f5f5; */
text-align:center;
font-family:Arial, sans-serif;
}

.mv-intro h1{
font-size:48px;
font-weight:800;
line-height:1.3;
max-width:1100px;
margin:auto;
margin-bottom:40px;
}

.mv-intro h1 span{
color:#e63946;
}

.mv-intro p{
/* padding:120px 2cm; */
font-size:18px;
line-height:1.8;
max-width:900px;
margin:20px auto;
color:#333;
}

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


.mv-intro-container{
max-width:1200px;
margin:auto;
padding:0 40px;
}