/* ====== SUPPORT HUB HERO TEXT ====== */
body.support-hub .hero-title,
body.support-hub .hero-tagline {
  text-align: center;
  margin: 0 auto;
  display: block;
}

/* ====== SUPPORT HUB HEADINGS ====== */
body.support-hub .section-heading,
body.support-hub .care-heading {
  font-size: 3.5rem;
  font-weight: 900;
  text-align: center;
  margin: 5rem auto 4rem;
  display: block;
  color: #fff;
  text-shadow: 
    0 0 10px #00bfff,
    0 0 20px #8a2be2,
    0 0 30px #ff6a00,
    0 0 40px #ffcc00,
    0 0 50px #00fff7,
    0 0 60px #ff1493;
}

/* ====== SUPPORT HUB CARE GRID ====== */
body.support-hub .care-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 2rem;
  column-gap: 2rem;
  justify-items: center;
  align-items: stretch;
}

/* ====== SUPPORT HUB CARDS ====== */
body.support-hub .support-card {
  width: 320px;
  min-height: 320px;
  padding: 1.5rem;
  border-radius: 12px;
  background: rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* ====== SUPPORT HUB CARD TITLES ====== */
body.support-hub .support-card h3 {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 0 0.75rem;   /* only bottom margin */
  color: #fff;
  text-align: center;
}

/* ====== SUPPORT HUB CARD DESCRIPTIONS ====== */
body.support-hub .support-card p,
body.support-hub .support-card ul,
body.support-hub .support-card li {
  font-size: 1rem;
  line-height: 1.4;
  color: #ddd;
  text-align: left;
  margin: 0.25rem 0;
  width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  flex-grow: 1;          /* description area expands to fill space */
}

/* ====== SUPPORT HUB CARD BUTTONS ====== */
body.support-hub .support-card .btn,
body.support-hub .support-card button {
  align-self: center;    /* center horizontally */
  margin-top: auto;      /* push to bottom of card */
  text-align: center;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  background: #ff6a00;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

body.support-hub .support-card .btn:hover,
body.support-hub .support-card button:hover {
  box-shadow: 0 0 12px #ff6a00, 0 0 24px #ffcc00;
  transform: scale(1.05);
}


/* Neon borders for Support Grid cards */
body.support-hub .support-grid .support-card:nth-child(1) {
  border: 2px solid #ff6a00;
  box-shadow: 0 0 15px #ff6a00, 0 0 30px #ffcc00;
}
body.support-hub .support-grid .support-card:nth-child(2) {
  border: 2px solid #a020f0;
  box-shadow: 0 0 15px #a020f0, 0 0 30px #d580ff;
}
body.support-hub .support-grid .support-card:nth-child(3) {
  border: 2px solid #00fff7;
  box-shadow: 0 0 15px #00fff7, 0 0 30px #00fff7;
}

/* Neon borders for Care Grid cards */
body.support-hub .care-grid .support-card:nth-child(1) {
  border: 2px solid #ff1493;
  box-shadow: 0 0 15px #ff1493, 0 0 30px #ff69b4;
}
body.support-hub .care-grid .support-card:nth-child(2) {
  border: 2px solid #32cd32;
  box-shadow: 0 0 15px #32cd32, 0 0 30px #00ff7f;
}
body.support-hub .care-grid .support-card:nth-child(3) {
  border: 2px solid #1e90ff;
  box-shadow: 0 0 15px #1e90ff, 0 0 30px #00bfff;
}
body.support-hub .care-grid .support-card:nth-child(4) {
  border: 2px solid #ffd700;
  box-shadow: 0 0 15px #ffd700, 0 0 30px #ffa500;
}
body.support-hub .care-grid .support-card:nth-child(5) {
  border: 2px solid #9400d3;
  box-shadow: 0 0 15px #9400d3, 0 0 30px #8a2be2;
}
body.support-hub .care-grid .support-card:nth-child(6) {
  border: 2px solid #ff6a00;
  box-shadow: 0 0 15px #ff6a00, 0 0 30px #ffcc00;
}
/* ====== SUPPORT HUB LIGHTBOX CONTENT ====== */
body.support-hub .lightbox-content {
  width: 800px;
  height: 800px;
  border-radius: 20px;
  background: rgba(0,0,0,0.75);
  padding: 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0 30px rgba(255,140,0,0.9),
              0 0 60px rgba(255,200,0,0.8);
  animation: moltenGlowBox 5s infinite alternate;
  overflow: hidden;   /* remove scrollbars */
}

/* ====== SUPPORT HUB LIGHTBOX TITLES ====== */
body.support-hub .lightbox-content h2 {
  font-size: 3.5rem;   /* larger, proportional to 800px box */
  font-weight: 900;
  text-align: center;
  margin: 1.5rem auto;
  color: #fff;
  text-shadow: 0 0 12px rgba(255,140,0,0.9),
               0 0 24px rgba(255,200,0,0.7);
  animation: heroGlow 4s infinite alternate;
}

/* ====== SUPPORT HUB LIGHTBOX TAGLINES ====== */
body.support-hub .lightbox-content .hero-tagline {
  font-size: 2.2rem;   /* slightly larger */
  font-weight: 600;
  text-align: center;
  margin: 1rem auto;
  color: #eee;
  text-shadow: 0 0 8px rgba(255,140,0,0.8),
               0 0 16px rgba(255,200,0,0.6);
  animation: heroGlow 4s infinite alternate;
}

/* ====== SUPPORT HUB LIGHTBOX DESCRIPTIONS ====== */
body.support-hub .lightbox-content p,
body.support-hub .lightbox-content ul,
body.support-hub .lightbox-content li {
  font-size: 1.5rem;   /* increased font size */
  line-height: 1.4REM;    /* reduced REMline spacing */
  text-align: left;    /* align text and bullets left */
  margin: 0.5rem 0;
  color: #ddd;
  width: 100%;
  max-width: 700px;
  padding-left: 1.5rem; /* indent bullets neatly */
}

/* ====== SUPPORT HUB ANIMATIONS ====== */
@keyframes moltenGlowBox { /* glow for lightbox */ }
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
@keyframes scaleIn { from {transform:scale(0.9);opacity:0;} to {transform:scale(1);opacity:1;} }
@keyframes heroGlow {
  from { text-shadow: 0 0 8px rgba(255,140,0,0.6); }
  to   { text-shadow: 0 0 20px rgba(255,200,0,0.9); }
}