:root {
    --ncep-green: #1a4731;     /* Deep Forest Green from screenshots */
    --ncep-gold: #c59d5f;      /* Muted Gold for accents */
    --ncep-cream: #fcf9f2;     /* Off-white/Cream background */
    --ncep-text: #2d2d2d;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #fff;
    color: var(--ncep-text);
}

h1, h2, h3, .serif {
    font-family: 'Playfair Display', serif; /* Or any elegant Serif font */
    color: var(--ncep-green);
}

/* --- Header & Nav --- */
.navbar {
    background-color: var(--ncep-green) !important;
    padding: 1rem 0;
}
.nav-link { 
    font-size: 0.85rem; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

/* --- Specific Components --- */
.bg-cream { background-color: var(--ncep-cream); }
.bg-forest { background-color: var(--ncep-green); color: white; }

.btn-gold {
    background-color: var(--ncep-gold);
    color: white;
    border: none;
    transition: 0.3s;
}
.btn-gold:hover { background-color: #b08a4f; color: white; }

.quote-box {
    border-left: 3px solid var(--ncep-gold);
    padding-left: 20px;
    font-style: italic;
    font-size: 1.25rem;
}

.commitment-card {
    border: none;
    background: #fff;
    border-radius: 8px;
}

.badge-outline {
    border: 1px solid var(--ncep-gold);
    color: var(--ncep-gold);
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 0.8rem;
}

.logo {
  display: block;
  width: 780px;
  height: 359px;
  margin: 54px auto;
  font-size: 260px;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  color: #FFF;
}
.flipchar {
  display: inline-block;
  animation: mirrorflip 10s 0s linear infinite;
  color: #f66e49;  
}

@keyframes mirrorflip {
	0% {
		transform: scale(1, 1);
		-webkit-transform: scale(1, 1);
		-moz-transform: scale(1, 1);
		-o-transform: scale(1, 1);
		-ms-transform: scale(1, 1);
		
	}
    20% {
    /* Stay normal until 20% of the time has passed (2 seconds) */
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
		-moz-transform: scale(1, 1);
		-o-transform: scale(1, 1);
		-ms-transform: scale(1, 1);
  }
	50% {
		transform: scale(-1, 1);
		-webkit-transform: scale(-1, 1);
		-moz-transform: scale(-1, 1);
		-o-transform: scale(-1, 1);
		-ms-transform: scale(-1, 1);
	}
	100% {
		transform: scale(1, 1);
		-webkit-transform: scale(1, 1);
		-moz-transform: scale(1, 1);
		-o-transform: scale(1, 1);
		-ms-transform: scale(1, 1);
	}
}

.flipchar:hover {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
  /* Do NOT add transform here */
}

/* CTA Box Custom Styling */
.cta-box {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* The subtle background circle seen in the screenshots */
.cta-decoration {
    position: absolute;
    width: 400px;
    height: 400px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    bottom: -150px;
    right: -100px;
    z-index: 1;
}

.cta-decoration::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    top: 50px;
    left: 50px;
}

/* Ensure the Gold Button pops on the Green background */
.btn-gold {
    background-color: #c59d5f; /* From your screen color palette */
    color: #fff;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.btn-gold:hover {
    background-color: #b08a4f;
    transform: translateY(-2px);
    color: #fff;
}


/* News Card Styling */
.news-card {
    background-color: #fcfbf7 !important; /* Soft off-white/cream */
    border-radius: 12px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
}

/* Icons */
.news-icon {
    font-size: 2.5rem;
    opacity: 0.4;
    color: var(--ncep-green);
}

/* Beige/Gold Badges from Screenshot */
.news-badge {
    background-color: #f2e8d5 !important;
    color: #b08a4f !important;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 1px;
    padding: 6px 12px;
    border-radius: 4px;
}

/* Button override for the "View All" look */
.btn-outline-dark {
    border: 1px solid #dee2e6;
    color: #444;
    font-size: 0.75rem;
    letter-spacing: 1px;
}


/* Identity Section Tweaks */
.border-gold {
    border-color: var(--ncep-gold) !important;
}

.lead-sm {
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Subtle floating animation for side cards */
@media (min-width: 992px) {
    .col-lg-2 .border {
        transition: transform 0.5s ease;
    }
    .col-lg-2:hover .border {
        transform: translateY(-10px);
        background: rgba(255,255,255,0.08) !important;
    }
}

/* Timeline Graphics */
.timeline-container {
    border-color: #f2e8d5 !important; /* The Cream color */
}

.timeline-item {
    padding-left: 1rem;
}

.timeline-dot {
    position: absolute;
    width: 14px;
    height: 14px;
    background-color: var(--ncep-gold);
    border: 3px solid #fff;
    border-radius: 50%;
    left: -32px; /* Centers it on the left border */
    top: 5px;
    box-shadow: 0 0 0 4px rgba(197, 157, 95, 0.1);
}

.story-content p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

/* HOW TO JOIN */
    .join-section{padding:5rem 0;background:var(--ncep-white)}
    .step-item{display:flex;gap:1.5rem;margin-bottom:2.5rem;align-items:flex-start}
    .step-num{width:48px;height:48px;background:var(--ncep-green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--ff-display);font-size:1.1rem;font-weight:700;color:var(--ncep-gold);flex-shrink:0}
    .step-item h5{font-family:var(--ff-display);font-size:1.1rem;font-weight:700;color:var(--ncep-dark);margin-bottom:.4rem}
    .step-item p{font-size:.88rem;color:var(--ncep-gray);line-height:1.7;margin:0}

/* BENEFITS */
    .benefits-section{padding:5rem 0;background:var(--ncep-green);position:relative;overflow:hidden}
    .benefits-section::before{content:'';position:absolute;top:-80px;right:-80px;width:400px;height:400px;border:1px solid rgba(200,151,58,.1);border-radius:50%;pointer-events:none}
    .benefit-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:1.8rem;height:100%;transition:all .3s}
    .benefit-card:hover{background:rgba(255,255,255,.12);border-color:rgba(200,151,58,.4);transform:translateY(-3px)}
    .benefit-icon{font-size:1.8rem;color:var(--ncep-gold);margin-bottom:1rem}
    .benefit-card h5{font-family:var(--ff-display);font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:.5rem}
    .benefit-card p{font-size:.85rem;color:rgba(255,255,255,.6);line-height:1.7;margin:0}


    /* CTA BAND */
    .cta-band{padding:5rem 0;background:var(--ncep-cream);border-top:1px solid rgba(26,71,49,.08)}
    .cta-inner{background:var(--ncep-green);border-radius:16px;padding:4rem 3rem;position:relative;overflow:hidden;text-align:center}
    .cta-inner::before{content:'';position:absolute;bottom:-60px;right:-60px;width:300px;height:300px;border:1px solid rgba(200,151,58,.15);border-radius:50%}
    .cta-inner h2{font-family:var(--ff-display);font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;color:#fff;margin-bottom:1rem}
    .cta-inner p{color:rgba(255,255,255,.72);font-size:1rem;max-width:560px;margin:0 auto 2rem;line-height:1.75}


       /* QUALIFICATIONS */
    .qual-section{padding:5rem 0;background:var(--ncep-cream)}
    .qual-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:1.5rem}
    .qual-chip{background:var(--ncep-white);border:1px solid rgba(26,71,49,.1);border-radius:10px;padding:1.2rem 1rem;display:flex;align-items:center;gap:.8rem;transition:all .3s}
    .qual-chip:hover{border-color:var(--ncep-gold);box-shadow:0 6px 18px rgba(26,71,49,.08);transform:translateY(-2px)}
    .qual-chip-icon{width:38px;height:38px;background:var(--ncep-light);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--ncep-green);font-size:1.1rem;flex-shrink:0}
    .qual-chip span{font-size:.85rem;font-weight:500;color:var(--ncep-dark)}