:root{
      --brand-green: #008000;      /* resources */
      --brand-light-green: #90EE90;
      --brand-yellow: #FFD700;     /* readiness */
      --brand-red:   #FF0000;      /* sacrifice */
      --brand-white: #FFFFFF;      /* love & peace */
      --nav-bg: rgba(255,255,255,.9);
    }

    /* Fixed navbar styling */
    .navbar { transition: background-color .25s, box-shadow .25s; backdrop-filter: saturate(140%) blur(6px); }
    .navbar.scrolled { background: var(--nav-bg); box-shadow: 0 6px 24px rgba(0,0,0,.08); }

    /* Hero */
    .hero { min-height: 100vh; }
    .hero .carousel-item {
      /* IMPORTANT: do NOT set display here! Bootstrap controls it. */
      min-height: 100vh;
      position: relative;
      overflow: hidden;
      color: #111;
      text-align: center;
    }
    /* Center content using an inner wrapper so we don’t touch .carousel-item’s display */
    .pane {
      min-height: 100vh;
      display: grid;
      place-items: center;
    }

    /* Gradients */
    .slide-sunrise {
      background: linear-gradient(110deg, var(--brand-green) 0%, var(--brand-yellow) 38%, var(--brand-red) 72%, var(--brand-white) 100%);
    }
    .slide-peace {
      background: linear-gradient(135deg, var(--brand-white) 0%, var(--brand-light-green) 35%, var(--brand-yellow) 70%, var(--brand-red) 100%);
    }
    .slide-unity {
      background: linear-gradient(160deg, var(--brand-light-green) 0%, var(--brand-yellow) 55%, var(--brand-red) 100%);
    }

    /* Texture overlay */
    .hero .carousel-item::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(40rem 40rem at 10% 10%, rgba(255,255,255,.18), transparent 60%),
        radial-gradient(32rem 32rem at 85% 25%, rgba(255,255,255,.16), transparent 60%),
        radial-gradient(48rem 48rem at 30% 80%, rgba(255,255,255,.15), transparent 60%);
      pointer-events:none;
    }

    .hero-content { position: relative; z-index: 2; max-width: 980px; padding: 2rem 1.25rem; }
    .display-title { font-weight: 800; letter-spacing: .4px; text-shadow: 0 2px 24px rgba(255,255,255,.35); }
    .lead-strong { font-size: 1.2rem; font-weight: 600; }

    /* Buttons */
    .btn-brand { background-color: var(--brand-red); border-color: var(--brand-red); color:#fff; }
    .btn-brand:hover { background-color:#d60000; border-color:#d60000; }
    .btn-outline-brand { border:2px solid #111; color:#111; }
    .btn-outline-brand:hover { background:#111; color:#fff; }

    section.anchor-below-hero { scroll-margin-top: 88px; }
  
  
  
  .footer-link {
  display: inline-block;
  transition: all 0.3s ease;
}


.footer-link i {
  color: #09682c; 
  transition: transform 0.3s ease, color 0.3s ease;
}

.footer-link:hover {
  color: #ffc107; /* highlight text on hover */
  transform: translateX(5px);
}

.footer-link:hover i {
  transform: translateX(3px);
  color: #fff; /* arrow turns white on hover */
}

.footer-link:active {
  transform: translateX(7px); /* slight push when clicked */
}

.footer-link:hover {
  background: rgba(255, 255, 255, 0.05);
}

  .icon-circle {
    width: 80px;
    height: 80px;
    background-color: #f0f0f0; /* light gray background */
    color: #0d6efd; /* bootstrap blue icon color */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transition: all 0.3s ease;
  }

  .icon-circle:hover {
    background-color: #0d6efd;
    color: white;
    transform: scale(1.1);
  }