/* ============================================================
   CFC — ABOUT.HTML PAGE STYLES
   ============================================================ */

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
    html { scroll-behavior:smooth; }
    
    body {
      font-family: 'Lato', sans-serif;
      color: #f0e8d0;
      overflow-x: hidden;
      background-color: #0D1B3E;
      background-position: center top;
      position: relative;
    }
    /* Overlay to control fade intensity */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-color: rgba(8, 15, 36, 0.93);
      pointer-events: none;
      z-index: 0;
    }
    /* Ensure all direct children sit above the overlay */
    body > * { position: relative; z-index: 1; }
    :root { --navy:#0D1B3E; --royal:#4B0082; --gold:#C9A84C; --gold-l:#E2C06A; }

    /* ── Nav ── */
    #navbar { position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(8,15,36,.97); box-shadow:0 2px 20px rgba(201,168,76,.2); transition:background .4s,box-shadow .4s; }
    #navbar.scrolled { background:rgba(5,10,26,1); box-shadow:0 2px 24px rgba(201,168,76,.25); }
    .gold-text   { color:var(--gold); }
    .gold-border { border:1px solid var(--gold); }
    .gold-divider { width:80px; height:3px; background:linear-gradient(90deg,transparent,var(--gold),transparent); margin:1rem auto; }
    .nav-link { font-family:'Cinzel',serif; font-size:.8rem; letter-spacing:.08em; color:#f0e8d0; transition:color .2s; padding:.25rem 0; position:relative; }
    .nav-link::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:2px; background:var(--gold); transform:scaleX(0); transition:transform .25s; }
    .nav-link:hover, .nav-link.active { color:var(--gold); }
    .nav-link:hover::after, .nav-link.active::after { transform:scaleX(1); }
    .btn-gold { display:inline-block; padding:.75rem 2rem; background:linear-gradient(135deg,var(--gold-l),var(--gold)); color:#0D1B3E; font-family:'Cinzel',serif; font-weight:700; letter-spacing:.05em; border-radius:4px; transition:transform .2s,box-shadow .2s; }
    .btn-gold:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(201,168,76,.4); }
    .btn-outline { display:inline-block; padding:.75rem 2rem; border:2px solid var(--gold); color:var(--gold); font-family:'Cinzel',serif; font-weight:700; letter-spacing:.05em; border-radius:4px; transition:background .2s,color .2s,transform .2s; }
    .btn-outline:hover { background:var(--gold); color:#0D1B3E; transform:translateY(-2px); }
    #mobile-menu { display:none; }
    #mobile-menu.open { display:block; }

    /* ── Hero ── */
    /* ── Page hero with faded photo background ── */
    .page-hero {
      padding-top:130px; padding-bottom:80px;
      position:relative; overflow:hidden;
      background-color: #080f24;
    }
    /* Real photo layer — faded */
    .page-hero::before {
      content:'';
      position:absolute; inset:0;
      background-image: url('assets/assets/images/slides/slide_3.jpg');
      background-position: center top;
      opacity: 0.13;
      filter: grayscale(30%);
    }
    /* Gradient overlay on top of photo */
    .page-hero::after {
      content:'';
      position:absolute; inset:0;
      background: linear-gradient(
        135deg,
        rgba(8,15,36,.92) 0%,
        rgba(75,0,130,.75) 50%,
        rgba(8,15,36,.92) 100%
      );
    }
    /* All children must sit above the overlays */
    .page-hero > * { position:relative; z-index:2; }

    /* ── Reveal ── */
    .reveal { opacity:0; transform:translateY(30px); transition:opacity .65s ease,transform .65s ease; }
    .reveal.visible { opacity:1; transform:translateY(0); }
    .pattern-bg { background-image:radial-gradient(circle at 1px 1px,rgba(201,168,76,.06) 1px,transparent 0); background-size:32px 32px; }

    /* ── Mission/Vision cards ── */
    .mv-card { background:linear-gradient(145deg,rgba(75,0,130,.22),rgba(13,27,62,.9)); border:1px solid rgba(201,168,76,.25); border-radius:16px; transition:transform .3s,box-shadow .3s,border-color .3s; }
    .mv-card:hover { transform:translateY(-5px); box-shadow:0 14px 40px rgba(0,0,0,.35),0 0 20px rgba(201,168,76,.1); border-color:rgba(201,168,76,.5); }

    /* ── Belief Accordion ── */
    .belief-item { border-bottom:1px solid rgba(201,168,76,.15); }
    .belief-item:last-child { border-bottom:none; }
    .belief-trigger { width:100%; display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.5rem; cursor:pointer; background:transparent; border:none; text-align:left; gap:12px; transition:background .2s; }
    .belief-trigger:hover { background:rgba(201,168,76,.05); }
    .belief-trigger.open { background:rgba(201,168,76,.07); }
    .belief-trigger-left { display:flex; align-items:center; gap:14px; }
    .belief-icon { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--gold-l),var(--gold)); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#0D1B3E; font-size:.85rem; }
    .belief-chevron { color:var(--gold); font-size:.75rem; transition:transform .3s; flex-shrink:0; }
    .belief-trigger.open .belief-chevron { transform:rotate(180deg); }
    .belief-body { overflow:hidden; max-height:0; transition:max-height .4s ease, padding .3s ease; padding:0 1.5rem; }
    .belief-body.open { max-height:300px; padding:.75rem 1.5rem 1.25rem; }

    /* ── Leadership cards ── */
    .leader-card { background:linear-gradient(145deg,rgba(75,0,130,.18),rgba(13,27,62,.92)); border:1px solid rgba(201,168,76,.2); border-radius:14px; overflow:hidden; text-align:center; transition:transform .3s,box-shadow .3s,border-color .3s; }
    .leader-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,.4),0 0 20px rgba(201,168,76,.1); border-color:rgba(201,168,76,.5); }
    .leader-photo { width:100%; height:200px; object-fit:cover; }
    .leader-photo-placeholder { width:100%; height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }

    /* ── Social link ── */
    .social-link { width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(201,168,76,.35); color:var(--gold); font-size:.75rem; transition:background .2s,color .2s,transform .15s; }
    .social-link:hover { background:var(--gold); color:#0D1B3E; transform:scale(1.1); }

    /* ── History timeline ── */
    .history-dot { width:14px; height:14px; border-radius:50%; background:var(--gold); border:3px solid #0D1B3E; box-shadow:0 0 0 3px rgba(201,168,76,.35); flex-shrink:0; }
    .history-line { width:2px; background:linear-gradient(to bottom,rgba(201,168,76,.5),rgba(201,168,76,.1)); flex-shrink:0; }

    /* ── Stats ── */
    .stat-item { text-align:center; padding:1.5rem 1rem; border-radius:14px; border:1px solid rgba(201,168,76,.2); background:rgba(201,168,76,.06); transition:transform .3s,border-color .3s; }
    .stat-item:hover { transform:translateY(-4px); border-color:rgba(201,168,76,.45); }

    /* ── Ticker ── */
    @keyframes tickerScroll { from{transform:translateX(100%)} to{transform:translateX(-100%)} }
    .ticker-inner { animation:tickerScroll 32s linear infinite; white-space:nowrap; }
    .ticker-inner:hover { animation-play-state:paused; }

.belief-card {
        background: linear-gradient(145deg, rgba(75,0,130,.18), rgba(13,27,62,.92));
        border: 1px solid rgba(201,168,76,.2);
        border-radius: 16px;
        padding: 1.75rem;
        display: flex;
        flex-direction: column;
        gap: .85rem;
        transition: transform .3s, box-shadow .3s, border-color .3s;
      }
      .belief-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 14px 40px rgba(0,0,0,.35), 0 0 20px rgba(201,168,76,.1);
        border-color: rgba(201,168,76,.5);
      }
      .belief-card-icon {
        width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
        background: linear-gradient(135deg, var(--gold-l), var(--gold));
        display: flex; align-items: center; justify-content: center;
        font-size: 1.3rem; color: #0D1B3E;
      }
      .belief-card-num {
        font-family: 'Cinzel', serif; font-weight: 900; font-size: .65rem;
        letter-spacing: .15em; color: var(--gold); opacity: .7;
        text-transform: uppercase;
      }
      .belief-card-title {
        font-family: 'Cinzel', serif; font-weight: 700; font-size: 1rem;
        color: #fff; line-height: 1.3;
      }
      .belief-card-text {
        font-size: .83rem; color: #9ca3af; line-height: 1.7;
      }
      .belief-card-divider {
        width: 40px; height: 2px;
        background: linear-gradient(90deg, var(--gold), transparent);
        border-radius: 2px;
      }