/* HERO SECTION */
.hero-pro {
    background: linear-gradient(135deg, #1f3c88 0%, #26408b 40%, #1b3a6f 100%);
    color: white;
    padding: 80px 20px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

/* ensure text remains visible if Bootstrap overrides */
.hero-pro .display-4,
.hero-pro .lead,
.hero-pro a {
    color: white !important;
}

.hero-inner {
    max-width: 650px;
    position: relative;
    z-index: 2;
}

.hero-title {
    font-size: 2.6rem;
    margin: 0 0 10px;
    font-weight: 700;
}

.hero-sub {
    font-size: 1.2rem;
    opacity: 0.95;
    margin-bottom: 25px;
}

.hero-buttons a {
    margin-right: 12px;
}

.btn-lg-primary {
    background: #ffb703;
    color: #1f3c88 !important;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
}

.btn-lg-primary:hover {
    background: #ffa500;
}

.btn-lg-outline {
    border: 2px solid white;
    padding: 12px 24px;
    border-radius: 6px;
    color: white;
    text-decoration: none;
    font-weight: 600;
}

.btn-lg-outline:hover {
    background: rgba(255,255,255,0.15);
}

/* Decorative graphic */
.hero-graphic {
    position: absolute;
    right: -80px;
    top: -80px;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 70%);
    border-radius: 50%;
    z-index: 1;
}

/* VALUE CARDS */
.value-section {
    margin-top: 50px;
}

.section-title {
    font-size: 1.8rem;
    margin-bottom: 25px;
    font-weight: 700;
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

.value-card {
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    text-align: center;
}

.icon-circle {
    font-size: 2rem;
    background: #1f3c88;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

/* FUNDRAISER GRID */
.fundraiser-section {
    margin-top: 50px;
}

.fundraiser-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
}

.fundraiser-item {
    background: #fff;
    padding: 14px;
    border-radius: 6px;
    text-align: center;
    border-left: 4px solid #1f3c88;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    font-weight: 600;
}

/* CTA */
.cta-pro {
    margin-top: 60px;
    background: #1f3c88;
    color: white;
    padding: 40px;
    border-radius: 10px;
    text-align: center;
}

.cta-pro h2 {
    margin-top: 0;
    font-size: 1.9rem;
}

.cta-pro p {
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.hero-gradient {
    background: linear-gradient(135deg, #1f3c88, #26408b, #1b3a6f);
    border-radius: 10px;
}

.list-group-item {
    border-radius: 8px;
    background: #ffffff;
    border-left: 5px solid #1f3c88;
}

/* Custom font for What We Do section */
.what-we-do-font {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.1rem;
    line-height: 1.65;
    color: #2c2c2c;
}
/* Smaller, single-line hero title */
.single-line-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  font-size: 2.2rem;    /* desktop size — adjust as needed */
  line-height: 1.05;
  font-weight: 700;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .single-line-title { font-size: 1.4rem; }
}
@media (max-width: 576px) {
  .single-line-title { font-size: 1.1rem; }
}

/* stronger blue shadow for What We Do card */
.custom-shadow {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(31,60,136,0.25), 0 6px 18px rgba(31,60,136,0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* hover state: larger, deeper blue shadow and slight lift */
.custom-shadow:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(31,60,136,0.30), 0 10px 30px rgba(31,60,136,0.18);
}
.zoom-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-radius: 8px;
}

    .zoom-card:hover {
        transform: scale(1.05);
        box-shadow: 0 32px 70px rgba(31,60,136,0.35), /* big blue-tinted outer shadow */
        0 12px 30px rgba(31,60,136,0.20); /* secondary softer shadow */
    }

.clickable-card {
    display: block; /* makes the whole area clickable */
    color: inherit; /* keeps your card text colors */
    border-radius: 8px; /* matches your card styling */
}
h3 {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
    color: #1f3c88;
    margin: 1rem 0 0.5rem;
    letter-spacing: -0.01em;
}
.darker-lead {
    color: #222222; /* near-black for maximum readability */
}
.lead-strong {
    font-weight: 600; /* heavier than normal but still readable */
    color: #1b2b4a; /* keep the slightly darker tone you chose */
    letter-spacing: -0.01em;
}