/* IHRPC Hero Component (safe on shared hosting) */
/* Namespace: .ihr-hero  | No global element overrides */
.h4{
  color: white;
}
/* ---------- Base ---------- */
.ihr-hero{
  /* local (scoped) palette – change per theme if needed */
  --ihr-blue:#2a2b69;
  --ihr-redish:#6b1d33;
  --ihr-gold:#fff79a;
  --ihr-ink:#ffffff;
  --ihr-muted:#e6ebff;
  z-index: 0 !important;   /* make hero stack lower than nav dropdown */
  color:var(--ihr-ink);
  position:relative;
  overflow:hidden;
  isolation:isolate; /* keeps ::before/::after behind text */
  padding:52px 0 68px;
  background:
    radial-gradient(800px 400px at 20% 80%, rgba(255,247,154,0.30) 0%, transparent 80%),
    linear-gradient(160deg, var(--ihr-blue) 0%, var(--ihr-redish) 70%);
}

@media (max-width:600px){
  .ihr-hero{ padding:56px 0 72px; }
}

/* inner wrap (75% width by default; swap with .container if you prefer Bootstrap) */
.ihr-hero__wrap{ width:75%; max-width:1200px; margin:0 auto; padding:0 16px; }
@media (max-width:900px){ .ihr-hero__wrap{ width:92%; } }

/* optional: use Bootstrap container instead of custom wrap */
.ihr-hero--use-bootstrap .ihr-hero__wrap{ width:auto; max-width:none; padding:0; }

/* ---------- Shapes ---------- */
.ihr-hero::before{
  content:"";
  position:absolute; top:-50px; right:-150px; z-index:0;
  width:500px; height:500px;
  background:rgba(255,247,154,0.12);
  border-radius:40% 60% 70% 30% / 30% 40% 60% 70%;
  filter:blur(.2px);
  animation:ihr-float-blob 14s ease-in-out infinite;
  transform-origin:60% 40%;
}
.ihr-hero::after{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,247,154,0.35) 1px, transparent 2px) 0 0/160px 160px,
    radial-gradient(circle at 60% 80%, rgba(255,247,154,0.28) 1.2px, transparent 2.2px) 0 0/200px 200px,
    radial-gradient(circle at 85% 30%, rgba(255,247,154,0.25) 1px, transparent 2px) 0 0/180px 180px;
  animation:ihr-sparkle-drift 22s linear infinite;
  opacity:.55;
  pointer-events:none;
}

/* ---------- Content ---------- */
.ihr-hero__inner{ position:relative; z-index:1; }

.ihr-hero__underline{
  display:inline-block; position:relative; padding-bottom:6px; margin-bottom:12px;
}
.ihr-hero__underline::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:82px;
  background:linear-gradient(90deg, var(--ihr-gold), rgba(255,247,154,0.6));
  border-radius:2px;
  transform-origin:left center;
  transform:scaleX(0);
  animation:ihr-underline-in .7s .25s cubic-bezier(.2,.8,.2,1) forwards;
}

.ihr-hero__title{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  font-weight:800; letter-spacing:.2px;
  font-size:clamp(1.9rem,3.5vw,3rem);
  opacity:0; transform:translateY(8px);
  animation:ihr-rise-in .6s ease-out forwards;
  color: white;
}
.ihr-hero__subtitle{
  margin:0; color:var(--ihr-muted); max-width:65ch;
  opacity:0; transform:translateY(8px);
  animation:ihr-rise-in .6s .15s ease-out forwards;
}

/* ---------- Variants (themes) ---------- */

/* Current red-accent theme (default) uses base vars/background above */

/* Alt: deep blue theme (less red, uses subtle gold) */
.ihr-hero--blue{
  --ihr-blue:#2a2b69;
  --ihr-redish:#1f2358; /* deeper blue tint */
  --ihr-gold:#fff79a;
  background:
    radial-gradient(900px 500px at 12% 18%, rgba(255,247,154,0.25) 0%, transparent 65%),
    linear-gradient(135deg, var(--ihr-blue) 0%, var(--ihr-redish) 100%);
}

/* Minimal: no shapes, simple gradient */
.ihr-hero--minimal{
  background: linear-gradient(160deg, var(--ihr-blue) 0%, var(--ihr-redish) 70%);
}
.ihr-hero--minimal::before,
.ihr-hero--minimal::after{ display:none; }

/* No animation (keep layout static) */
.ihr-hero--no-anim .ihr-hero__title,
.ihr-hero--no-anim .ihr-hero__subtitle,
.ihr-hero--no-anim .ihr-hero__underline::after{
  animation:none !important; opacity:1; transform:none;
}
.ihr-hero--no-anim::before,
.ihr-hero--no-anim::after{ animation:none !important; }

/* ---------- Keyframes (namespaced) ---------- */
@keyframes ihr-rise-in{
  to{ opacity:1; transform:translateY(0) }
}
@keyframes ihr-underline-in{
  to{ transform:scaleX(1) }
}
@keyframes ihr-float-blob{
  0%   { transform:translate(0,0) rotate(0deg) scale(1) }
  50%  { transform:translate(-8px,6px) rotate(4deg) scale(1.03) }
  100% { transform:translate(0,0) rotate(0deg) scale(1) }
}
@keyframes ihr-sparkle-drift{
  0%  { background-position: 0 0, 0 0, 0 0 }
  100%{ background-position: 320px 0, -300px 0, 260px 0 }
}

/* Respect user motion settings */
@media (prefers-reduced-motion: reduce){
  .ihr-hero, .ihr-hero *{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition:none !important;
  }
}
/* ---------- Breadcrumbs () ---------- */
  /* Custom divider symbol */
  .breadcrumb {
    --bs-breadcrumb-divider: '»';
  }

  /* White text */
  .breadcrumb-item,
  .breadcrumb-item a {
    color: #fff !important;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
  }

  .breadcrumb-item.active {
    font-weight: 700;
    color: #fff !important;
  }

  /* Divider animation */
  .breadcrumb-item + .breadcrumb-item::before {
    animation: dividerFadeIn 0.6s ease forwards;
    opacity: 0;
    transform: translateX(-6px);
    color: #fff;
    font-weight: bold;
  }
  @keyframes dividerFadeIn {
    to { opacity: 1; transform: translateX(0); }
  }

  /* Home icon color */
  .icon-gold {
    color: #fff79a; /* gold */
    font-size: 1.1rem;
  }


 /*======== CTA to Volunteer / donation / Doctorate ========*/
    /* Container */
    .cta-wrap { width: 75%; margin: 40px auto; font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
    .cta-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
    @media (max-width:1024px){ .cta-grid{ grid-template-columns:repeat(2,1fr);} }
    @media (max-width:700px){ .cta-grid{ grid-template-columns:1fr;} .cta-wrap{ width:min(92%,1100px);} }

    /* Card */
    .cta-card{
        position:relative; overflow:hidden; display:flex; flex-direction:column; gap:12px;
        border-radius:20px; padding:26px 24px 22px; text-decoration:none; color:#0f1b1b;
        isolation:isolate; box-shadow:0 10px 28px rgba(0,0,0,.14);
        transform:translateY(0); transition:transform .35s ease, box-shadow .35s ease;
    }
    .cta-card:hover{ transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,.18); }

    /* Subtle moving texture (continuous) */
    .cta-ink{
        position:absolute; inset:-10% -10%; z-index:-1; opacity:.9;
        background:
        radial-gradient(120% 90% at 0% 100%, rgba(255,255,255,.08) 0 45%, transparent 46%),
        radial-gradient(90% 60% at 110% -10%, rgba(0,0,0,.06) 0 70%, transparent 71%);
        animation: drift 18s linear infinite;
    }
    @keyframes drift{
        0% { transform:translate3d(0,0,0) scale(1); }
        50% { transform:translate3d(-2%, -2%, 0) scale(1.02); }
        100%{ transform:translate3d(0,0,0) scale(1); }
    }

    /* Icon + orbit animation */
    .cta-icon{
        width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
        background:rgba(255,255,255,.9); color:#0b2a2a; font-size:28px;
        box-shadow:inset 0 0 0 2px rgba(255,255,255,.25), 0 6px 14px rgba(0,0,0,.12);
        transition:transform .35s ease, box-shadow .35s ease;
        position:relative;
    }
    .cta-card:hover .cta-icon{ transform:translateY(-2px) scale(1.03); box-shadow:inset 0 0 0 2px rgba(255,255,255,.35), 0 12px 24px rgba(0,0,0,.16); }

    /* Orbiting dots (continuous, subtle) */
    .orbit::before, .orbit::after{
        content:""; position:absolute; inset:-8px; border-radius:50%;
        background:
        radial-gradient(circle at 50% 0, currentColor 3px, transparent 4px) top center/8px 8px no-repeat,
        radial-gradient(circle at 0 50%, currentColor 3px, transparent 4px) left center/8px 8px no-repeat,
        radial-gradient(circle at 100% 50%, currentColor 3px, transparent 4px) right center/8px 8px no-repeat,
        radial-gradient(circle at 50% 100%, currentColor 3px, transparent 4px) bottom center/8px 8px no-repeat;
        opacity:.25;
        animation: orbit 12s linear infinite;
    }
    .orbit::after{ inset:-14px; opacity:.18; animation-duration:18s; }
    @keyframes orbit{ to{ transform:rotate(360deg);} }

    .cta-title{ margin:6px 0 2px; color:#fff; font-weight:800; line-height:1.2; font-size:clamp(20px,2.2vw,26px); letter-spacing:.2px;}
    .cta-text{ margin:2px 0 4px; color:rgba(255,255,255,.92); font-size:15px; line-height:1.5;}
    .cta-points{ margin:0 0 6px; padding-left:1.1em; color:rgba(255,255,255,.9); font-size:14px; }
    .cta-points li{ margin:6px 0; }

    .cta-btn{
        margin-top:auto; align-self:start; display:inline-block; padding:10px 16px; border-radius:999px;
        font-weight:700; font-size:14px; letter-spacing:.3px; background:#fff; color:#0e1e1e;
        box-shadow:0 8px 18px rgba(0,0,0,.15);
        transition:transform .25s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
    }
    .cta-card:hover .cta-btn{ transform:translateY(-1px); box-shadow:0 12px 24px rgba(0,0,0,.18); }
    .cta-btn::after{ content:" →"; transition:transform .25s ease; display:inline-block; }
    .cta-card:hover .cta-btn::after{ transform:translateX(2px); }

    /* Themes */
    .cta-volunteer{
        background:
        radial-gradient(120% 90% at 0% 100%, #18b495 0%, transparent 45%),
        linear-gradient(160deg, #073a39 0%, #0d4e4c 55%, #0a3c3b 100%);
    }
    .cta-donate{
        background:
        radial-gradient(120% 90% at 0% 100%, #ffd86b 0%, transparent 45%),
        linear-gradient(160deg, #402312 0%, #5b2e18 55%, #3d1f10 100%);
    }
    .cta-honor{
        background:
        radial-gradient(120% 90% at 0% 100%, #9ad1ff 0%, transparent 45%),
        linear-gradient(160deg, #15234a 0%, #1c2d64 55%, #111c3b 100%);
    }

    .cta-volunteer .cta-icon{ color:#0f7d6f; }
    .cta-donate .cta-icon{ color:#a34a00; }
    .cta-honor .cta-icon{ color:#2653d6; }

    .cta-volunteer:hover .cta-btn{ background:#d8fff6; color:#06443f; }
    .cta-donate:hover    .cta-btn{ background:#fff3d6; color:#3d1f10; }
    .cta-honor:hover     .cta-btn{ background:#e8f0ff; color:#0f1b3a; }

   /*======== CTA to Volunteer / donation / Doctorate  END ========*/