/* ===============================
   Pennacool KFC SEA — Child-friendly Bootstrap 4 theme
   Part 1: CSS only (no HTML edits)
   =============================== */
:root{
  /* Primary palette (Red-centric) */
  --lb: #FE3A4F;          /* light red (primary surface) */
  --lb-600: #FE0023;      /* brand red */
  --db: #B80019;          /* deep red */
  --db-700: #8F0014;      /* deeper red for outlines */

  /* Accents (harmonious) */
  --peach: #FFB59E;       /* warm accent */
  --peach-700: #E68E73;
  --green: #1FA97A;       /* success/focus accent */
  --green-700: #128162;

  /* Neutrals */
  --ink: #302F2F;         /* dark gray text */
  --ink-2: #4B4A4A;       /* secondary text */
  --paper: #FFFFFF;       /* white */
  --paper-2: #FFF4F4;     /* soft off-white tint */
  --focus: #1FA97A;       /* visible focus ring */

  /* Effects */
  --shadow-1: 0 2px 10px rgba(0,0,0,.08);
  --shadow-2: 0 6px 18px rgba(0,0,0,.12);
  --radius: 0.9rem;       /* 0.75–1rem rounded corners */
  --ring: 3px;            /* focus ring width */
  --hit: 44px;            /* min hit size */
}

/* ------- Base ------- */
html { scroll-behavior: smooth; }
body{
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(254,58,79,.08), transparent 60%),
    linear-gradient(180deg, var(--paper), var(--paper-2)) !important;
  color: var(--ink);
  letter-spacing: .1px;
}
h1,h2,h3,h4{
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--ink);
}
h3{ margin-top: 1.25rem; }

/* ------- Global containers & utilities ------- */
.container, .container-fluid { padding-left: 1rem; padding-right: 1rem; }
.card, .alert, .modal-content, .dropdown-menu{
  border-radius: var(--radius);
  border: 0;
  box-shadow: var(--shadow-1);
}
.badge, .chip{
  border-radius: 999px;
  padding: .35rem .6rem;
  font-weight: 600;
}

/* ------- Buttons & Links ------- */
.btn{
  min-height: var(--hit);
  /* border-radius: var(--radius); */
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: var(--shadow-1);
  padding: .65rem 1rem;
}
.btn:focus{ outline: none; box-shadow: 0 0 0 var(--ring) var(--focus); }
.btn-primary{
  /* background: var(--lb-600); */
  /* border-color: var(--lb-600); */
  color: #fff;
}
.btn-primary:hover{/* background: var(--db); *//* border-color: var(--db); */}
.btn-primary:active{ background: var(--db-700) !important; border-color: var(--db-700) !important; }
a{/* color: var(--lb-600); */}
a:hover{ color: var(--db); text-decoration: none; }
a:focus{ outline: none; box-shadow: 0 0 0 var(--ring) var(--focus); border-radius: .5rem; }

/* ------- Nav Tabs & Pills (Bootstrap 4) ------- */
.nav-tabs{
  border-bottom: 2px solid rgba(0,0,0,.06);
}
.nav-tabs .nav-link{
  min-height: var(--hit);
  display: inline-flex;
  align-items: center;
  border: 0;
  margin-right: .25rem;
  padding: .6rem 1rem;
  border-radius: 999px;
  background: rgba(254,58,79,.08);
  color: var(--ink);
  font-weight: 700;
  transition: background .2s ease;
}
.nav-tabs .nav-link:hover{ background: rgba(254,0,35,.12); }
.nav-tabs .nav-link.active{
  background: var(--lb-600);
  color: #fff;
  box-shadow: var(--shadow-1);
}
.tab-content{
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 1rem;
}

/* ------- Vertical nav pills (left sidebar) ------- */
.nav-pills .nav-link{
  min-height: var(--hit);
  border-radius: 999px;
  font-weight: 700;
}
.nav-pills .nav-link.active{
  background: var(--lb-600);
}

/* ------- “Heading” hero/menu ------- */
.Base .Heading{
  position: relative;
  z-index: 2;
  text-align: center;
  padding: .75rem .5rem;
}
.Base .Heading .Menu{
  display: flex;
  gap: .5rem;
  justify-content: center;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: .25rem .25rem .75rem;
}
.Base .Heading .Menu .Item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  height: var(--hit);
  padding: 0 1rem;
  border-radius: 999px;
  background: rgba(254,58,79,.08);
  color: var(--ink);
  font-weight: 700;
  box-shadow: var(--shadow-1);
  transition: transform .1s ease, background .2s ease;
}
.Base .Heading .Menu .Item:hover{ background: rgba(254,0,35,.12); }
.Base .Heading .Menu .Item:active{ transform: scale(.98); }
.Base .Heading .Menu .Item:focus{
  outline: none;
  box-shadow: 0 0 0 var(--ring) var(--focus), var(--shadow-1);
}

/* ------- Poster/Overlay ------- */
#Poster{ position: relative; }
#Poster video{
  width: 100%;
  /* height: 32vh; */
  object-fit: cover;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.Overlay{
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,0));
  position: absolute; inset: 0;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

/* ------- Scroll prompt ------- */
.scroll-downs{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.99rem;
  text-align: center;
  color: #fff;
}
.scroll-downs .mousey{
  width: 28px; height: 46px; border: 2px solid #fff; border-radius: 20px; margin: 0 auto .25rem;
}
.scroll-downs .scroller{
  width: 4px; height: 10px; background: #fff; border-radius: 2px; margin: 6px auto 0;
  animation: scrolly 1.4s infinite;
}
@keyframes scrolly{ 0%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(10px)} }
.scroll-downs .scroll{ font-size: .85rem; font-weight: 700; letter-spacing: .5px; }

/* ------- Tables (scoreboard) ------- */
.table-responsive{
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  background: var(--paper);
}
.table thead th{
  background: rgba(254,58,79,.08);
  border: 0;
  color: var(--ink);
  font-weight: 700;
}
.table td, .table th{ vertical-align: middle; }

/* ------- Testimonials ------- */
.testimonial-heading{
  text-align: center; font-weight: 800; margin-top: 2rem;
}
.testimonial-grid{
  display: grid; grid-template-columns: repeat(12,1fr); grid-gap: .75rem;
}
.testimonial-card{
 
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 1rem;
}
.testimonial-content .message{ font-size: 1rem; color: var(--ink); }
.attribution{ display: flex; align-items: center; gap: .75rem; margin-top: .75rem; }
.testimonial-avatar{
  width: 48px; height: 48px; min-width: 48px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800;
  background: var(--lb-600); color:#fff; box-shadow: var(--shadow-1);
}
.attribution .name{ font-weight: 700; color: var(--ink); }
.attribution .school{ color: var(--ink-2); font-size: .9rem; }

/* ------- Games cards ------- */
.card-category-2 ul{ list-style: none; padding-left: 0; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: .75rem; }
.card-category-2 ul > a{ grid-column: span 12; text-decoration: none; }
.img-card{
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  transition: transform .15s ease;
}
.img-card:hover{ transform: translateY(-2px); }
.img-card .card-image{ position: relative; overflow: hidden; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.img-card .card-title{
  position: absolute; left: 0rem; top: .75rem;
  background: rgba(0,0,0,0.6); color:#fff; font-weight: 500; padding: .35rem .1rem; border-radius: .6rem;
}
.img-card img{ display:block; width:100%; height:auto; }
.img-card .card-text{ padding: .75rem 1rem; color: var(--ink-2); }
.img-card .card-text p{ color: white !important; } 

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

.img-card .card-title {
  position: absolute;
  bottom: .5rem;
  left: rem;
  right: .5rem;
  background: rgba(0,0,0,0.6); /* optional for contrast */
  color: #fff;
  padding: .25rem .5rem;
  border-radius: .25rem;
}

/* ------- Gallery tabs/carousel look ------- */
.gallery-tabs .nav-link{ background: rgba(254,58,79,.08); }
.gallery-tabs .nav-link.active{ background: var(--lb-600); color:#fff; }
.gallery-caption h4{ font-size: 1rem; font-weight: 800; margin: .5rem 0 0; }

/* Owl-like controls */
.owl-nav button{
  width: var(--hit); height: var(--hit);
  border: 0; border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--shadow-1);
  margin: .25rem;
}
.owl-nav button:focus{ outline: none; box-shadow: 0 0 0 var(--ring) var(--focus), var(--shadow-1); }
.carousel-arrow{ font-size: 1.25rem; line-height: var(--hit); display:inline-block; }
.owl-dots{ text-align:center; }
.owl-dot{ width: 12px; height: 12px; border-radius:50%; border:2px solid var(--lb-600); margin: 0 4px; background: transparent; }
.owl-dot.active{ background: var(--lb-600); }

/* ------- Back to top ------- */
#BackToTop{
  position: fixed; right: .75rem; bottom: .75rem; z-index: 999;
  width: var(--hit); height: var(--hit);
  display: grid; place-items: center;
  background: var(--lb-600); border-radius: 50%;
  box-shadow: var(--shadow-2);
}
#BackToTop img{ width: 24px; height: 24px; }

/* ------- Focus visibility (WCAG) ------- */
button, [href], [tabindex], .Item{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
:focus{ outline-color: transparent; }
:focus-visible{
  outline: none;
  box-shadow: 0 0 0 var(--ring) var(--focus) !important;
  border-radius: .5rem;
}

/* ------- Collapse chevron rotation (if used) ------- */
.collapse-toggle .chev{ transition: transform .2s ease; display:inline-block; }
.collapse-toggle[aria-expanded="true"] .chev{ transform: rotate(180deg); }

/* ------- Accessibility helpers ------- */
.sr-only.sr-only-focusable:focus{
  position: static !important; width:auto; height:auto; margin: .5rem; clip:auto;
  background: var(--green); color:#fff; padding:.5rem .75rem; border-radius:.5rem;
}

/* ------- Mapping legacy color class names (compat) ------- */
.lightpurple-card, .deeppurple-card{
  background: linear-gradient(135deg, var(--lb) 0%, var(--db) 100%);
  color:#fff;
}
.lightpurple-card .card, .deeppurple-card .card{ background: transparent; color: inherit; }

/* ------- Forms ------- */
form{ text-align: center; }
form .btn{ margin-top: .5rem; }

/* ------- Responsive (mobile-first) ------- */
@media (min-width: 768px){
  #Poster video{/* height: 44vh; */}
  .testimonial-card{ grid-column: span 6; }
  .card-category-2 ul > a{ grid-column: span 6; }
}
@media (min-width: 992px){
  .testimonial-card{ grid-column: span 4; }
  .card-category-2 ul > a{ grid-column: span 4; }
}

/* ------- Reduced motion ------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior: auto !important; }
}

/* ===============================
   Part 2 additions (reuses Part 1)
   Helpers & minor refinements
   =============================== */

/* Paper backgrounds for sections */
.bg-paper{ background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-1); }

/* Friendlier pills with larger tap targets */
.fp-pills .nav-link{ min-height: var(--hit); padding: .7rem 1.1rem; }

/* 44px tap helper (if needed on custom elems) */
.tap-44{ min-height: var(--hit); display: inline-flex; align-items: center; }

/* Chips/badges */
.chip{ background: var(--peach); color: #4a2b26; }

/* Scoreboard loader alignment */
.table-transition{ display:flex; align-items:center; justify-content:center; gap:.5rem; }

/* Improve gallery arrow contrast on imagery */
.owl-nav button{ background: rgba(255,255,255,.95); }

/* Optional subdued section band */
.section-band{ background: linear-gradient(180deg, var(--paper-2), transparent); padding-top: .5rem; padding-bottom: .5rem; }

/* Headings with tiny underline accent */
h3{ position:relative; }
h3::after{
  content:""; display:block; width: 56px; height: 4px; border-rad/* ===============================
   Pennacool KFC SEA — Child-friendly Bootstrap 4 theme
   Part 1: CSS only (no HTML edits)
   =============================== */
:root{
  /* Primary palette (Red-centric) */
  --lb: #FE3A4F;          /* light red (primary surface) */
  --lb-600: #FE0023;      /* brand red */
  --db: #B80019;          /* deep red */
  --db-700: #8F0014;      /* deeper red for outlines */

  /* Accents (harmonious) */
  --peach: #FFB59E;       /* warm accent */
  --peach-700: #E68E73;
  --green: #1FA97A;       /* success/focus accent */
  --green-700: #128162;

  /* Neutrals */
  --ink: #302F2F;         /* dark gray text */
  --ink-2: #4B4A4A;       /* secondary text */
  --paper: #FFFFFF;       /* white */
  --paper-2: #FFF4F4;     /* soft off-white tint */
  --focus: #1FA97A;       /* visible focus ring */

  /* Effects */
  --shadow-1: 0 2px 10px rgba(0,0,0,.08);
  --shadow-2: 0 6px 18px rgba(0,0,0,.12);
  --radius: 0.9rem;       /* 0.75–1rem rounded corners */
  --ring: 3px;            /* focus ring width */
  --hit: 44px;            /* min hit size */
}

/* ------- Base ------- */
html { scroll-behavior: smooth; }
body{
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(254,58,79,.08), transparent 60%),
    linear-gradient(180deg, var(--paper), var(--paper-2));
  color: var(--ink);
  letter-spacing: .1px;
}
h1,h2,h3,h4{
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--ink);
}
h3{ margin-top: 1.25rem; }

/* ------- Global containers & utilities ------- */
.container, .container-fluid { padding-left: 1rem; padding-right: 1rem; }
.card, .alert, .modal-content, .dropdown-menu{
  border-radius: var(--radius);
  border: 0;
  box-shadow: var(--shadow-1);
}
.badge, .chip{
  border-radius: 999px;
  padding: .35rem .6rem;
  font-weight: 600;
}

/* ------- Buttons & Links ------- */
.btn{
  min-height: var(--hit);
  /* border-radius: var(--radius); */
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: var(--shadow-1);
  padding: .65rem 1rem;
}
.btn:focus{ outline: none; box-shadow: 0 0 0 var(--ring) var(--focus); }
.btn-primary{
  /* background: var(--lb-600); */
  /* border-color: var(--lb-600); */
  color: #fff;
}
.btn-primary:hover{/* background: var(--db); *//* border-color: var(--db); */}
.btn-primary:active{ background: var(--db-700) !important; border-color: var(--db-700) !important; }
a{/* color: var(--lb-600); */}
a:hover{ color: var(--db); text-decoration: none; }
a:focus{ outline: none; box-shadow: 0 0 0 var(--ring) var(--focus); border-radius: .5rem; }

/* ------- Nav Tabs & Pills (Bootstrap 4) ------- */
.nav-tabs{
  border-bottom: 2px solid rgba(0,0,0,.06);
}
.nav-tabs .nav-link{
  min-height: var(--hit);
  display: inline-flex;
  align-items: center;
  border: 0;
  margin-right: .25rem;
  padding: .6rem 1rem;
  border-radius: 999px;
  background: rgba(254,58,79,.08);
  color: var(--ink);
  font-weight: 700;
  transition: background .2s ease;
}
.nav-tabs .nav-link:hover{ background: rgba(254,0,35,.12); }
.nav-tabs .nav-link.active{
  background: var(--lb-600);
  color: #fff;
  box-shadow: var(--shadow-1);
}
.tab-content{
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 1rem;
}

/* ------- Vertical nav pills (left sidebar) ------- */
.nav-pills .nav-link{
  min-height: var(--hit);
  border-radius: 999px;
  font-weight: 700;
}
.nav-pills .nav-link.active{
  background: var(--lb-600);
}

/* ------- “Heading” hero/menu ------- */
.Base .Heading{
  position: relative;
  z-index: 2;
  text-align: center;
  padding: .75rem .5rem;
}
.Base .Heading .Menu{
  display: flex;
  gap: .5rem;
  justify-content: center;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: .25rem .25rem .75rem;
}
.Base .Heading .Menu .Item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  height: var(--hit);
  padding: 0 1rem;
  border-radius: 999px;
  background: rgba(254,58,79,.08);
  color: var(--ink);
  font-weight: 700;
  box-shadow: var(--shadow-1);
  transition: transform .1s ease, background .2s ease;
}
.Base .Heading .Menu .Item:hover{ background: rgba(254,0,35,.12); }
.Base .Heading .Menu .Item:active{ transform: scale(.98); }
.Base .Heading .Menu .Item:focus{
  outline: none;
  box-shadow: 0 0 0 var(--ring) var(--focus), var(--shadow-1);
}

/* ------- Poster/Overlay ------- */
#Poster{ position: relative; }
#Poster video{
  width: 100%;
  /* height: 32vh; */
  object-fit: cover;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.Overlay{
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,0));
  position: absolute; inset: 0;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

/* ------- Scroll prompt ------- */
.scroll-downs{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.99rem;
  text-align: center;
  color: #fff;
}
.scroll-downs .mousey{
  width: 28px; height: 46px; border: 2px solid #fff; border-radius: 20px; margin: 0 auto .25rem;
}
.scroll-downs .scroller{
  width: 4px; height: 10px; background: #fff; border-radius: 2px; margin: 6px auto 0;
  animation: scrolly 1.4s infinite;
}
@keyframes scrolly{ 0%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(10px)} }
.scroll-downs .scroll{ font-size: .85rem; font-weight: 700; letter-spacing: .5px; }

/* ------- Tables (scoreboard) ------- */
.table-responsive{
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  background: var(--paper);
}
.table thead th{
  background: rgba(254,58,79,.08);
  border: 0;
  color: var(--ink);
  font-weight: 700;
}
.table td, .table th{ vertical-align: middle; }

/* ------- Testimonials ------- */
.testimonial-heading{
  text-align: center; font-weight: 800; margin-top: 2rem;
}
.testimonial-grid{
  display: grid; grid-template-columns: repeat(12,1fr); grid-gap: .75rem;
}
.testimonial-card{
  grid-column: span 12;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 1rem;
}
.testimonial-content .message{ font-size: 1rem; color: var(--ink); }
.attribution{ display: flex; align-items: center; gap: .75rem; margin-top: .75rem; }
.testimonial-avatar{
  width: 48px; height: 48px; min-width: 48px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800;
  background: var(--lb-600); color:#fff; box-shadow: var(--shadow-1);
}
.attribution .name{ font-weight: 700; color: var(--ink); }
.attribution .school{ color: var(--ink-2); font-size: .9rem; }

/* ------- Games cards ------- */
.card-category-2 ul{ list-style: none; padding-left: 0; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: .75rem; }
.card-category-2 ul > a{ grid-column: span 12; text-decoration: none; }
.img-card{
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  transition: transform .15s ease;
}
.img-card:hover{ transform: translateY(-2px); }
.img-card .card-image{ height: 300px; position: relative; overflow: hidden; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.img-card .card-title{
  position: absolute; left: .75rem; top: .75rem;
  background: rgba(0,0,0,.6); color:#fff; font-weight: 500; padding: .35rem .6rem; border-radius: .6rem;
}
.img-card img{ display:block; width:100%; height:auto; }
.img-card .card-text{ padding: .75rem 1rem; color: var(--ink-2); }
.img-card .card-text p{color: black !important;}

/* ------- Gallery tabs/carousel look ------- */
.gallery-tabs .nav-link{ background: rgba(254,58,79,.08); }
.gallery-tabs .nav-link.active{ background: var(--lb-600); color:#fff; }
.gallery-caption h4{ font-size: 1rem; font-weight: 800; margin: .5rem 0 0; }

/* Owl-like controls */
.owl-nav button{
  width: var(--hit); height: var(--hit);
  border: 0; border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--shadow-1);
  margin: .25rem;
}
.owl-nav button:focus{ outline: none; box-shadow: 0 0 0 var(--ring) var(--focus), var(--shadow-1); }
.carousel-arrow{ font-size: 1.25rem; line-height: var(--hit); display:inline-block; }
.owl-dots{ text-align:center; }
.owl-dot{ width: 12px; height: 12px; border-radius:50%; border:2px solid var(--lb-600); margin: 0 4px; background: transparent; }
.owl-dot.active{ background: var(--lb-600); }

/* ------- Back to top ------- */
#BackToTop{
  position: fixed; right: .75rem; bottom: .75rem; z-index: 999;
  width: var(--hit); height: var(--hit);
  display: grid; place-items: center;
  background: var(--lb-600); border-radius: 50%;
  box-shadow: var(--shadow-2);
}
#BackToTop img{ width: 24px; height: 24px; }

/* ------- Focus visibility (WCAG) ------- */
button, [href], [tabindex], .Item{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
:focus{ outline-color: transparent; }
:focus-visible{
  outline: none;
  box-shadow: 0 0 0 var(--ring) var(--focus) !important;
  border-radius: .5rem;
}

/* ------- Collapse chevron rotation (if used) ------- */
.collapse-toggle .chev{ transition: transform .2s ease; display:inline-block; }
.collapse-toggle[aria-expanded="true"] .chev{ transform: rotate(180deg); }

/* ------- Accessibility helpers ------- */
.sr-only.sr-only-focusable:focus{
  position: static !important; width:auto; height:auto; margin: .5rem; clip:auto;
  background: var(--green); color:#fff; padding:.5rem .75rem; border-radius:.5rem;
}

/* ------- Mapping legacy color class names (compat) ------- */
.lightpurple-card, .deeppurple-card{
  background: linear-gradient(135deg, var(--lb) 0%, var(--db) 100%);
  color:#fff;
}
.lightpurple-card .card, .deeppurple-card .card{ background: transparent; color: inherit; }

/* ------- Forms ------- */
form{ text-align: center; }
form .btn{ margin-top: .5rem; }

/* ------- Responsive (mobile-first) ------- */
@media (min-width: 768px){
  #Poster video{/* height: 44vh; */}
  .testimonial-card{ grid-column: span 6; }
  .card-category-2 ul > a{ grid-column: span 6; }
}
@media (min-width: 992px){
  .testimonial-card{ grid-column: span 4; }
  .card-category-2 ul > a{ grid-column: span 4; }
}

/* ------- Reduced motion ------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior: auto !important; }
}

/* ===============================
   Part 2 additions (reuses Part 1)
   Helpers & minor refinements
   =============================== */

/* Paper backgrounds for sections */
.bg-paper{ background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-1); }

/* Friendlier pills with larger tap targets */
.fp-pills .nav-link{ min-height: var(--hit); padding: .7rem 1.1rem; }

/* 44px tap helper (if needed on custom elems) */
.tap-44{ min-height: var(--hit); display: inline-flex; align-items: center; }

/* Chips/badges */
.chip{ background: var(--peach); color: #4a2b26; }

/* Scoreboard loader alignment */
.table-transition{ display:flex; align-items:center; justify-content:center; gap:.5rem; }

/* Improve gallery arrow contrast on imagery */
.owl-nav button{ background: rgba(255,255,255,.95); }

/* Optional subdued section band */
.section-band{ background: linear-gradient(180deg, var(--paper-2), transparent); padding-top: .5rem; padding-bottom: .5rem; }

/* Headings with tiny underline accent */
h3{ position:relative; }
h3::after{
  content:""; display:block; width: 56px; height: 4px; border-radius: 3px;
  background: var(--lb-600); margin-top: .35rem;
}

/* Ensure .Overlay sits above video but below menu */
#Poster, .Overlay{ border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }ius: 3px;
  background: var(--lb-600); margin-top: .35rem;
}


/* Ensure .Overlay sits above video but below menu */
#Poster, .Overlay{ border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }

    /* Testimonial Heading */
    .testimonial-heading {
      text-align: center;
      font-size: 2rem;
      font-weight: 700;
      color: #c4001a;
      margin: 2rem 0 1rem 0;
      position: relative;
    }

    .testimonial-heading::after {
      content: "";
      display: block;
      width: 80px;
      height: 3px;
      background: #c4001a;
      margin: 0.5rem auto 0;
      border-radius: 2px;
    }

    /* Main container and Header */
    .testimonial-container { max-width: 1200px; margin: 0 auto; padding: 1rem; }
    .page-header-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; }
    .page-header-container h3 { margin-bottom: 0; }

    /* Grid Layout for Testimonials */
    .testimonial-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
      margin: 2rem auto;
      max-width: 1000px;
    }

    @media (max-width: 1024px) {
      .testimonial-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 640px) {
      .testimonial-grid {
        grid-template-columns: 1fr;
      }
    }
    /* Individual Testimonial Card */
    .testimonial-card { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 2rem; box-shadow: 0 4px 15px rgba(0,0,0,0.05); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .testimonial-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
    .testimonial-card::before { content: '\201C'; position: absolute; top: -10px; left: 15px; font-family: Georgia, serif; font-size: 100px; color: #c4001a; opacity: 0.1; z-index: 1; }

    /* Card Content */
    .testimonial-content { position: relative; z-index: 2; }
    .testimonial-content .message { font-size: 0.9em; color: #333; line-height: 1.6; margin-bottom: 1.5rem; min-height: 100px; }

    /* Attribution (Name & School) Section */
    .attribution { display: flex; align-items: center; margin-top: auto; padding-top: 1rem; border-top: 1px solid #f0f0f0; }
    .testimonial-avatar { width: 50px; height: 50px; border-radius: 50%; background-color: #c4001a; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; margin-right: 1rem; flex-shrink: 0; }
    .attribution-details .name { font-weight: 600; color: #000; }
    .attribution-details .school { font-size: 0.9em; color: #666; }