/* Mission & Vision Section */
.mission-vision {
    background-color: #fff; 
    padding: 40px 20px;
}


.mission-vision .section {
    display: flex;
    flex-direction: column;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.mission {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-direction: row-reverse;
}


.vision {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-direction: row-reverse;
}

.mission img, .vision img {
    width: 40%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}


.mission-text, .vision-text {
    width: 50%;
    background-color: #BF5700;
    color: #fff;
    border-radius: 20px;
    padding: 40px 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    min-height: 250px;
}

.mission, .vision {
    height: 350px;
}

.mission-text h2, .vision-text h2 {
    color: #fff; 
    font-size: 2em;
    font-weight: 700;
    margin-bottom: 20px;
}

.mission-text p, .vision-text p{
    color: #fff;
    font-size: 1.1em;
    line-height: 1.8;
}

/* UT SHPE In Numbers Section */
.numbers-section {
    background-color: #fff;
    padding: 80px 20px;
    text-align: center;
}

.section-title {
    font-size: 2.2em;
    color: #BF5700;
    margin-bottom: 40px;
    font-weight: 700;
}

.numbers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.stat {
    background-color: #fff7f5;
    border-radius: 12px;
    padding: 30px 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

.stat:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
}

.stat h3 {
    color: #BF5700;
    font-size: 2.5em;
    margin-bottom: 10px;
}

.stat p {
    font-size: 1.1em;
    color: #444;
}

/* Shared Section Wrapper */
.section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navbar Highlight for Active Page */
.nav-link.active {
    color: #BF5700; 
    font-weight: bold;
}

.nav-link.active:hover {
    color: #BF5700;
}

/* 6 pillars */
.pillars {
    --band: clamp(110px, 13vw, 150px);
    position: relative;
    background: #FFF7F0;
    padding: 0 20px 72px;
    isolation: isolate;
}

.pillars::before{
    content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: var(--band); 
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 18px, rgba(255,255,255,.02) 18px 36px),
    linear-gradient(135deg, #0E2244, #142d5e);
  border-bottom-left-radius:0px;
  border-bottom-right-radius:0px;
  box-shadow: inset 0 10px 30px rgba(0,0,0,.12);
  z-index:0 ;
}

.pillars .section-title {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--band);
    margin: 0;                      
    line-height: 1.1;
    font-weight: 800;
    font-size: clamp(2rem, 3.5vw, 3rem);
    color: #BF5700;
    letter-spacing: .5px;
    padding: 0;
}

.pillars-wrap {
    max-width: 1200px;
    margin: 0 auto;
}

.pillars-grid { 
    display:grid; 
    grid-template-columns:1.2fr 1fr; 
    gap:40px; 
    align-items:start; 
}
.pillars-panel { 
    background:#fff; 
    border-radius:18px; 
    border:1px solid #e8e8e8; 
    box-shadow:0 10px 28px rgba(0,0,0,.12); 
    overflow:hidden; 
}

.pillars-tabs { 
    display:grid; 
    grid-template-columns:repeat(3,1fr); 
    gap: 0;
    padding: 6px 6px 0;
    background:#fafafa; 
    border-bottom:1px solid #eee; 
}

.pillars-tab { 
    position: relative;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px; 
    padding: 18px 14px; 
    min-height: 84px;
    border: 0; 
    background: #fff; 
    font: inherit; 
    cursor: pointer;  
    color:#111; 
    transition: background .15s, color .15s, box-shadow .15s, transform .15s; 
    box-shadow: inset 0 -3px 0 transparent;
    outline-offset: 3px;
}

.pillars-tab:hover { 
    background: #f3f3f3; 
}

.pillars-tab.is-active { 
    color:#BF5700; 
    background: #fff; 
    box-shadow: inset 0 -3px 0 #BF5700; 
}

.pillars-tab:focus-visible {
    outline: 3px solid #1457C3;
    background: #fff;
}

.pillars-content { 
    padding:28px 28px 34px; 
    border-top: 1px solid rgba(15,23,42,0.06);
    background:
        linear-gradient(to right, rgba(191,87,0,.12), rgba(191,87,0,0)) top / 100% 3px no-repeat,
        #fff;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
}

.pillars-content h3 { 
    margin:0 0 10px; 
    font-size:1.6rem; 
    color:#0f172a; 
}

.pillars-content p { 
    margin:0; 
    line-height:1.7; 
    color:#444; 
}

.pillars-figure { 
    position:relative; 
    border-radius:20px; 
    overflow:hidden; 
    min-height: 0; 
    box-shadow:0 16px 34px rgba(0,0,0,.16); 
    height: 380px;  
    
}

.pillars-figure img { 
    width:100%; 
    height:100%; 
    object-fit:cover; 
    display:block; 
    transition: opacity .25s ease;
}

.mask-icon {
    width:22px; 
    height:22px; 
    display:inline-block;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
    opacity:.85; 
    transition:opacity .2s, transform .2s;
}

.pillars-tab.is-active .mask-icon { 
    opacity:1; 
}

.pillars-tab:hover .mask-icon { 
    transform: translateY(-1px); 
}

.history { 
    background: #FFF7F0; 
    padding:60px 20px; 
}

.history .section {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 32px 28px 28px;
    border-radius: 18px;
    background: #EAF2FF;
    border: 1px solid #d9e6ff;
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

.history-title {
  text-align:center; 
    color:#BF5700; 
    font-weight:800;
    margin:0 0 14px; 
    font-size:clamp(2rem,3vw,2.4rem);
}

.history-text {
    max-width:900px; 
    margin:0 auto 22px; 
    line-height:1.75; 
    color:#2b2b2b;
    text-align:center; 
    font-size:1.06rem;
}

/* Buttons row */
.history-cta {
    display:flex; 
    flex-wrap:wrap; 
    gap:12px; 
    justify-content:center; 
    margin-top:8px;
}

.btn {
    display:inline-block; 
    padding:12px 18px; 
    border-radius:999px; 
    font-weight:700;
    text-decoration:none; 
    line-height:1; 
    transition:transform .12s, box-shadow .12s, background .12s, color .12s;
}
.btn:hover { 
    transform:translateY(-1px); 
}
.btn:active { 
    transform:none; 
}

.btn-primary {
  background:#BF5700; 
    color:#fff; 
    box-shadow:0 6px 16px rgba(191,87,0,.25);
}
.btn-primary:hover { 
    background:#9E4700; 
}

.btn-outline {
  background:#fff; 
    color:#0f172a; 
    border:2px solid #e8e8e8;
}
.btn-outline:hover { 
    border-color:#BF5700; 
    color:#BF5700; 
}

/* 
   MOBILE (<=768px) — ABOUT
*/
@media (max-width: 768px) {
  .about .section { padding: 16px !important; }


  .mission, .story, .values { display: grid; grid-template-columns: 1fr !important; gap: 16px; }
  .mission img, .story img, .values img { width: 100% !important; height: auto !important; }


  .pillars-grid, .pillars-panel { display: grid; grid-template-columns: 1fr !important; gap: 12px !important; }

 
  .numbers, .stats, .highlights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .numbers .item, .stats .item { padding: 12px; }

  @supports (grid-template-columns: 1fr) {
    .numbers, .stats, .highlights { grid-template-columns: 1fr; }
  }
}