/* -------------------------------------
   GLOBAL DESIGN TOKENS
-------------------------------------- */
/* :root {
    --radius-md: 10px;
    --radius-lg: 16px;

    --shadow-sm: 0 4px 8px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.12);
} */

/* -------------------------------------
   TYPOGRAPHY SYSTEM (COMMON)
-------------------------------------- */
.heading-xl { font-size: 32px; font-weight: 600; color: var(--color-text); font-weight: 400; }
.heading-lg { font-size: 26px; font-weight: 600; color: var(--color-text); font-weight: 400; }
.heading-md { font-size: 20px; font-weight: 500; color: var(--color-text); font-weight: 400; }
.heading-sm { font-size: 16px; font-weight: 400; color: var(--color-text); font-weight: 400; }

.text-md { font-size: 15px; color: var(--color-text); }
.text-sm { font-size: 13px; color: var(--color-text); }
.text-xs { font-size: 12px; color: var(--color-text); }
.text-muted { color: var(--color-text-muted); }

.text-gradient {
    background: linear-gradient(90deg, #2E9AFE, #14E5BE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-prmary-light{
    background-color: var(--color-light);    
}


.f-weight-500 {font-weight: 500;}
.f-weight-600 {font-weight: 600;}

/* Spacing utilities */
.mb-1 { margin-bottom: 5px; }
.mb-2 { margin-bottom: 10px; }
.mb-3 { margin-bottom: 20px; }



/* -------------------------------------
   GLOBAL BUTTON COMPONENT
-------------------------------------- */
.cbe-btn, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px 26px;
    font-size: 16px;
    font-weight: 400;

    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;

    transition: .25s ease;
    user-select: none;

    box-shadow: var(--shadow-sm);
}

.btn-xs {padding: 6px 10px; font-size: 10.5px;}
.btn-sm { padding: 8px 16px; font-size: 14px; }
.btn-lg { padding: 16px 32px; font-size: 18px; }

.btn-primary {
    background: var(--btn-submit-bg);
    color: var(--color-text);
}

.btn-secondary {
    background: #eaa900;
    color: var(--color-text);
}

.btn-primary:hover { background: var(--btn-submit-bg); }
.btn-primary:active { transform: scale(.96); }

.btn-secondary:hover { background: #eaa900; }
.btn-secondary:active { transform: scale(.96); }

.btn-dark { background: #1c1c1c; color: #fff; }
.btn-dark:hover { background: #000; }

.btn-light { background: #fff; border: 1px solid #eee; }

.glass-green {
    background: rgba(0, 180, 70, 0.18); /* soft green tint */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(0, 255, 120, 0.25); /* neon edge glass */
}

.btn-outline-primary {
    background: transparent;
    color: var(--btn-submit-bg);
    border: 1px solid var(--btn-submit-bg);
}

.btn-outline-secondary {
    background: transparent;
    color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
}

/* -------------------------------------
   CARD COMPONENT (COMMON)
-------------------------------------- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: .25s ease;
}

.card-border-none{
    border: none !important;
}

.card-hover:hover {
    transform: translateY(-5px);
}

/* -------------------------------------
   PROJECT CARD
-------------------------------------- */
.project-card { composes: card card-hover; }

.project-card-img{
    position: relative;
}

.project-card-img img {
    width: 100%; height: 200px; object-fit: cover;
}

.project-status {
    position: absolute;
    top: 12px; right: 12px;

    background: #fff;
    padding: 4px 12px;

    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
}

.project-status-badge {
    position: absolute;
    top: 12px; right: 12px;    
    padding: 4px 12px;
    background-color: rgba(255, 255, 255, 0.5);
    

    border-radius: 20px;
    font-size: 10px;
    font-weight: bold;
}

.project-featured-badge{
    position: absolute;
    top: 12px; right: 12px;    
    padding: 4px 12px;
    background-color: orangered;

    border-radius: 20px;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
}

.project-status-badge.active{
    background: rgba(0, 180, 70, 0.25);
    color: lightgreen;
}

.project-info-badge {
    position: absolute;
    top: 12px; left: 12px;

    background: rgba(0, 0, 0, 0.5);    
    color: var(--color-white);
    padding: 4px 12px;
    font-size: 10px;

    border-radius: 20px;

    font-weight: bold;
}

.project-status.active { color: green; }

/* -------------------------------------
   PROGRESS BAR
-------------------------------------- */
.progress-bar {
    width: 100%; height: 6px;
    background: var(--color-border);
    border-radius: 6px;
}

.progress-fill {
    height: 100%;
    background: var(--color-fill);
    border-radius: 6px;
}

/* -------------------------------------
   IMPACT CARDS
-------------------------------------- */
.impact-card {
    composes: card card-hover;
    padding: 28px 20px;
}

.impact-icon { font-size: 48px; color: var(--color-primary); }
.impact-value { font-size: 26px; font-weight: 600; }
.impact-label { font-size: 14px; color: var(--color-text-muted); }

.impact-growth {
    background: var(--color-impact-bg);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    color: #0f0;
}

/* -------------------------------------
   CTA (BANNER)
-------------------------------------- */
.cta-section {    
    background: url('../images/yellow-banner.png') center/cover no-repeat;
    padding: 60px 0;
    position: relative;
}

.cta-section::before {
    content: "";
    position: absolute; inset: 0;    
    opacity: 0.25;
}

.cta-title { composes: heading-xl; color: #fff; }
.cta-subtitle { composes: text-md; color: #fff; opacity: .9; }

/* -------------------------------------
   FILTER WRAPPER (CLEANED)
-------------------------------------- */
.opp-filter-wrapper {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 18px;
    border-radius: 14px;
}

.opp-filter-row{
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
}

.resources-filter-row{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
}

.filter-box {
    background: #ddd;
    border: 1px solid var(--color-border);
    padding: 12px 16px;
    border-radius: var(--radius-md);

    height: 70px;
    width: calc(20% - 11px);

    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: 12px;
}

.filter-box input, .filter-box span {
    font-size: 12px;
    color: var(--color-text);
}

.filter-box select{
    width: 100%;
    border: none;
    background-color: transparent;
    color: var(--color-text);
}

.filter-box select:focus{
    outline: none;
    border: none;
}

.filter-box input{
    border: none;
    padding: 10px;
    background-color: #ccc;
    width: 100%; font-size:16px; 
}
.filter-box input:active, .filter-box input:focus{
    outline: none;
    border: none;
}

:root.dark .filter-box{
    background-color: #333;    
}

:root.dark .filter-box input{
    background: #222;
}





/* -------------------------------------
   OPPORTUNITY CARD (COMPACT)
-------------------------------------- */
.opp-card { composes: card card-hover; }

.opp-card-img img {
    height: 180px; width: 100%; object-fit: cover;
}

.opp-tag, .opp-status {
    position: absolute; top: 12px;
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 12px;
    color: #fff;
}

.opp-tag { left: 12px; background: rgba(0,0,0,0.4); }
.opp-status { right: 12px; background: rgba(0,180,0,0.3); color: #00e676; }

.opp-title { composes: heading-md; margin-bottom: 6px; }
.opp-desc, .opp-by { composes: text-sm text-muted; }

/* Outcome box */
.opp-outcome {
    background: #ddd;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: 12px;
}

.custom-badge{
    outline: 1px solid var(--color-text);
    padding: 3px 8px;
    border-radius: 10px;
}



.project-card-body{
    padding: 18px;
}
/* Card Body */
.project-card {    
    border: 1px solid var(--color-text-muted);    
    border-radius: 10px;    
    overflow: hidden;
}



/* Video section */
.video-section {
  width: 95%;
  max-width: 1100px;
  margin: 40px auto;
}

/* container - uses existing .card for background/border */
.video-wrapper {
  display: grid;
  gap: 18px;
  padding: 18px;
}

/* Responsive: video on top, card below */
.video-player {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}

/* iframe fills the container */
.video-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* small unmute button overlay (visible on top-right) */
.unmute-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  opacity: 0.95;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
}

/* Card body below video */
.video-card {
  padding: 16px;
}

/* tags */
.tag {
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  font-size: 13px;
  color: var(--color-text);
}

/* actions row */
.video-actions { display: flex; gap: 10px; align-items: center; }


.connect-with-us{
    background-color: var(--color-dark);    
}



/* small screens: keep vertical stack; larger screens keep same but narrower card */
@media (min-width: 900px) {
  .video-wrapper {
    grid-template-columns: 1fr;
  }
}