/* =========================================================
   VCCE SEA Challenge — Child-friendly Bootstrap 4 theme
   Part 1 (pop-out sections): Pure CSS (no HTML edits)
   - Section backgrounds with alternating accents
   - Fun, child-friendly visuals
   ========================================================= */

:root{
  --dp: #75308B; --dp-800: #5f2772;
  --db: #126081; --db-700: #0e4e69;
  --lb: #178FBF; --lb-600: #0f78a3;
  --peach: #F68D2C; --peach-700: #d6741e;
  --lp: #8E1CB0; --lp-700: #71158a;
  --green: #3DBE8B; --green-700: #2f946d;

  --paper: #F8FAFC; --paper-2: #EEF2F7;
  --ink: #1D2939; --ink-2: #475467;
  --focus: #FFD166;
  --shadow: 0 6px 16px rgba(18, 96, 129, .10), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg: 0 12px 30px rgba(18,96,129,.16), 0 3px 10px rgba(0,0,0,.08);

  --radius-lg: 1rem; --radius-md: .875rem; --radius-sm: .75rem;
}

/* Base */
body{
  background: linear-gradient(180deg, var(--paper) 0%, #fff 45%, var(--paper-2) 100%);
  color: var(--ink);
  letter-spacing: .15px;
}
h1,h2,h3{ font-weight: 800; color: var(--db); letter-spacing: .2px; }

/* Section wrappers with alternating colors */
.Main{
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1rem;
  margin: 1.5rem auto;
  position: relative;
  overflow: hidden;
}
.Main:nth-of-type(odd){
  background: linear-gradient(180deg, rgba(23,143,191,.08), #fff);
}
.Main:nth-of-type(even){
  background: linear-gradient(180deg, rgba(246,141,44,.10), #fff);
}
.Section.Main{
  background: linear-gradient(180deg, rgba(142,28,176,.08), #fff);
}

/* Decorative blobs */
.Main::after{
  content: "";
  position: absolute;
  width: 180px; height: 180px;
  right: -60px; bottom: -60px;
  background: radial-gradient(closest-side, rgba(117,48,139,.12), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Cards */
.card, .img-card, .iCard-style3{
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* Buttons */
.btn{/* border-radius: var(--radius-md); */min-height: 44px;font-weight: 800;}
.btn-primary{
  color: #fff;
  /* background: linear-gradient(90deg, var(--dp) 0%, var(--db) 100%); */
  border: 0;
}
.btn-primary:hover{ background: linear-gradient(90deg, var(--dp-800), var(--db-700)); }

/* DataTables header fix */
.table thead, table.dataTable thead{
  position: relative;
}
.table thead::before{
  content: ""; position: absolute; inset: 0;
  /* background: linear-gradient(90deg, var(--db), var(--dp)); */
  z-index: 0;
}
.table thead th{ background: transparent !important; color: #fff; font-weight: 900; position: relative; z-index: 1; }

/* Zebra rows */
.table-striped tbody tr:nth-of-type(odd){ background-color: #f6fbfe; }

/* Back-to-top */
#BackToTop{
  position: fixed; right: 1rem; bottom: 1rem;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--db), var(--dp));
  display: grid; place-items: center;
  box-shadow: var(--shadow);
}
#BackToTop:hover{ box-shadow: var(--shadow-lg); }

/* Section title highlight */
.section-title{
  background: linear-gradient(90deg, rgba(23,143,191,.12), rgba(246,141,44,.12));
  border-radius: var(--radius-sm);
  padding: .5rem .75rem;
  color: var(--db);
  display: inline-block;
}

/* Mobile */
@media(max-width:767.98px){
  .Main{ margin: 1rem auto; padding: .75rem; }
  .btn{ width: 100%; }
}


/* ===== Gallery Caption — Spelling Bee style (final) ===== */
.item.gallery-item { position: relative; overflow: visible; }

/* 1) Grey rail (behind) */
.item.gallery-item::after{
  content:"";
  position:absolute;
  left: 3%;
  right: 3%;
  bottom: 6px;
  height: 75px;                                  /* rail height */
  background: rgba(108,117,125,.85);             /* soft grey */
  border-radius: 12px;                            /* rounded ends */
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  z-index: 0;
}

/* 2) Gradient bar (front, inset) */
.item.gallery-item > .gallery-caption{
  position:absolute;
  left: 6%;
  right: 6%;
  bottom: 12px;
  padding: .65rem 1.25rem;
  background: linear-gradient(90deg, var(--db), var(--lb)) !important;
  border-radius: 10px;                            /* curved edges */
  text-align:center;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  z-index: 1;
  pointer-events: none;                           /* keep image clickable */
  color: #fff !important;
}

/* 3) Caption text — bold, readable, centered */
.item.gallery-item > .gallery-caption h4{
  margin: 0;
  font-size: 1.125rem;                            /* ~18px */
  font-weight: 800;
  letter-spacing: .0125em;
  line-height: 1.2;
  color: inherit;
}

/* 4) Nuke any legacy background/branding that may override */
.item.gallery-item > .gallery-caption::before,
.item.gallery-item > .gallery-caption::after{
  content: none !important;
  display: none !important;
  background: none !important;
}
.item.gallery-item > .gallery-caption{
  background-image: linear-gradient(90deg, var(--db), var(--lb)) !important;
  background-color: transparent !important;
}

/* 5) Image block fix (prevents 1–2px gaps) */
.item.gallery-item > a img{
  display:block; width:100%; height:auto;
}

/* 6) Mobile nudge */
@media (max-width: 767.98px){
  .item.gallery-item::after{ left:4%; right:4%; height:46px; bottom:6px; }
  .item.gallery-item > .gallery-caption{ left:6%; right:6%; bottom:10px; }
  .item.gallery-item > .gallery-caption h4{ font-size: 1rem; }
}



/* ===== Gallery caption: full-width grey rail with square gradient bar inside ===== */
.item.gallery-item { position: relative; }

/* 1) Full-width grey rail (background) */
.item.gallery-item > .gallery-caption{
  position: absolute;
  left: 0;                  /* full width of container */
  right: 0;
  bottom: 0;
  height: 52px;             /* rail height (tweak if needed) */
  background: rgba(71,84,103,.88);  /* soft grey */
  border-radius: 0 0 12px 12px;     /* grey can be rounded on the ends */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;         /* keeps inner color bar fully contained */
  pointer-events: none;     /* keep the image link clickable */
  z-index: 1;
}

/* 2) Colored bar INSIDE the grey rail (no border radius) */
.item.gallery-item > .gallery-caption::before{
  content: "";
  position: absolute;
  top: 8px;                 /* vertical inset inside the grey rail */
  bottom: 8px;
  left: 6%;                 /* horizontal inset so it sits “inside” */
  right: 6%;
  background: linear-gradient(90deg, var(--db), var(--dp));
  border-radius: 0;         /* ← no rounded corners per your note */
  z-index: 0;
}

/* 3) Text sits on the colored bar */
.item.gallery-item > .gallery-caption h4{
  position: relative;       /* above ::before */
  margin: 0;
  font-size: 1.125rem;      /* larger like the reference */
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.2;
  color: #fff;
}

/* (Optional) If any old logos were added via pseudo-elements, kill them */
.item.gallery-item > .gallery-caption::after{ content: none !important; }

/* Mobile nudge */
@media (max-width: 767.98px){
  .item.gallery-item > .gallery-caption{ height: 48px; }
  .item.gallery-item > .gallery-caption::before{ left: 6%; right: 6%; top: 6px; bottom: 6px; }
  .item.gallery-item > .gallery-caption h4{ font-size: 1rem; }
}

/* === Gallery caption: full-width GREY rail + SQUARE gradient bar inside === */

/* 0) Kill the old rail + any old gradient/branding */
.item.gallery-item::after{
  content: none !important;            /* remove earlier grey ::after */
}
.item.gallery-item > .gallery-caption{
  background-image: none !important;    /* beat earlier gradient !important */
}
.item.gallery-item > .gallery-caption::after{
  content: none !important;             /* remove any legacy logos */
}

/* 1) Full-width GREY rail (the background strip) */
.item.gallery-item > .gallery-caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 56px;                         /* rail height */
  background: rgba(71,84,103,.88) !important;  /* solid grey */
  border-radius: 0;                      /* no rounding on the rail itself */
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  overflow: hidden;                      /* contains the inner bar */
  pointer-events: none;                  /* keep image link clickable */
  z-index: 1;
}

/* 2) Inner COLORED bar (fully contained, NO border-radius) */
.item.gallery-item > .gallery-caption::before{
  content: "";
  position: absolute;
  top: 8px; bottom: 8px;                 /* vertical inset inside grey rail */
  left: 6%; right: 6%;                   /* horizontal inset */
  background: linear-gradient(90deg, var(--db), var(--dp));
  border-radius: 0;                       /* <-- square corners as requested */
  z-index: 0;
}

/* 3) Text sits on the colored bar */
.item.gallery-item > .gallery-caption h4{
  position: relative;                     /* above ::before */
  margin: 0;
  font-size: 1.125rem;                    /* ~18px */
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.2;
  color: #fff;
}

/* Optional: make the rail follow the card’s bottom rounding instead */
.item.gallery-item{
  position: relative;                     /* ensure positioning context */
}

/* --- RESET old overrides that remove the colored bar --- */
.item.gallery-item::after{ content: none !important; }              /* remove old grey ::after */
.item.gallery-item > .gallery-caption{ background-image: none !important; }
.item.gallery-item > .gallery-caption::after{ content: none !important; }

/* --- TARGET LOOK: full-width grey rail, square colored bar inside --- */
.item.gallery-item{ position: relative; }

.item.gallery-item > .gallery-caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 56px;                         /* grey rail height */
  background: rgba(71,84,103,.88) !important;   /* full-width grey */
  border-radius: 0;                     /* square rail (set to 12px if you want rounded ends) */
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  overflow: hidden;                     /* contain inner bar */
  pointer-events: none;
  z-index: 1;
}

.item.gallery-item > .gallery-caption::before{
  content: "" !important;               /* re-enable pseudo-element */
  display: block !important;
  position: absolute;
  top: 8px; bottom: 8px;                /* vertical inset inside grey rail */
  left: 6%; right: 6%;                  /* horizontal inset */
  background: linear-gradient(90deg, var(--db), var(--dp));  /* colored bar */
  border-radius: 0;                      /* NO radius on colored bar */
  z-index: 0;
}

.item.gallery-item > .gallery-caption h4{
  position: relative; z-index: 1;       /* sit above the colored bar */
  margin: 0;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.2;
  color: #fff;
}

/* mobile tweak */
@media (max-width: 767.98px){
  .item.gallery-item > .gallery-caption{ height: 48px; }
  .item.gallery-item > .gallery-caption::before{ top: 6px; bottom: 6px; left: 6%; right: 6%; }
  .item.gallery-item > .gallery-caption h4{ font-size: 1rem; }
}

/* === Definitive gallery caption: full-width grey rail + square inset color bar === */
.item.gallery-item { position: relative; }

.item.gallery-item > .gallery-caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;

  /* Controls overall rail height and the inset of the inner bar */
  min-height: 56px;              /* rail thickness */
  padding: 8px 6%;               /* 8px = top/bottom; 6% = left/right inset of color bar */

  /* Text */
  color: #fff;
  text-align: center;
  pointer-events: none;
  z-index: 1;

  /* Two background layers:
     1) gradient (content-box) → becomes the inset colored bar
     2) grey (border-box) → full-width rail behind */
  background-image:
    linear-gradient(90deg, var(--db), var(--dp)),
    linear-gradient(rgba(71,84,103,.88), rgba(71,84,103,.88)) !important;
  background-clip: content-box, border-box;
  background-origin: content-box, border-box;

  /* Square ends (no radius on the colored bar); change if you want rounded rail ends */
  border-radius: 0;

  /* Clean up any older styles that might persist */
  background-repeat: no-repeat, no-repeat;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}

/* Caption text */
.item.gallery-item > .gallery-caption h4{
  margin: 0;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.2;
  color: inherit;
}

/* Ensure any previous pseudo-elements/branding are off */
.item.gallery-item > .gallery-caption::before,
.item.gallery-item > .gallery-caption::after{
  content: none !important;
  display: none !important;
}

/* Mobile tweak */
@media (max-width: 767.98px){
  .item.gallery-item > .gallery-caption{
    min-height: 48px;
    padding: 6px 6%;
  }
  .item.gallery-item > .gallery-caption h4{ font-size: 1rem; }
}

/* Final: gradient bar over full-width grey rail */
.item.gallery-item { position: relative; }

.item.gallery-item > .gallery-caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;

  /* Rail thickness + inner bar inset */
  min-height: 56px;
  padding: 8px 6%;

  color: #fff !important;
  text-align: center;
  pointer-events: none;
  z-index: 1;

  /* TOP (on content box): gradient bar
     BOTTOM (on border box): grey rail */
  background:
    linear-gradient(90deg, var(--db), var(--dp)) no-repeat content-box content-box,
    linear-gradient(rgba(71,84,103,.88), rgba(71,84,103,.88)) no-repeat border-box border-box !important;

  border-radius: 0px 0px 10px 10px;               /* square ends for both */
  background-color: transparent !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}

/* Remove any old pseudo-elements/logos if present */
.item.gallery-item::after,
.item.gallery-item > .gallery-caption::before,
.item.gallery-item > .gallery-caption::after{
  content: none !important;
  display: none !important;
}

.item.gallery-item > .gallery-caption h4{
  margin: 0;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.2;
}

/* Mobile */
@media (max-width: 767.98px){
  .item.gallery-item > .gallery-caption{
    min-height: 48px;
    padding: 6px 6%;
  }
  .item.gallery-item > .gallery-caption h4{ font-size: 1rem; }
}

/* Caption typography — match reference */
.item.gallery-item > .gallery-caption h4{
  margin: 0;
  font-weight: 350;          /* strong, like the example */
  line-height: 1.15;         /* tighter lines */
  letter-spacing: .015em;    /* slight tracking for readability */
  font-size: 1.25rem;        /* ≈20px on default Bootstrap base */
  color: #fff;               /* ensure contrast on the bar */
}

/* Keep the bar tall enough for the larger text */
.item.gallery-item > .gallery-caption{
  min-height: 56px;
  padding: 10px 6%;          /* keeps the color bar inset and centered */
}

/* Responsive tweak */
@media (min-width: 1200px){
  .item.gallery-item > .gallery-caption h4{ font-size: 1.375rem; } /* ≈22px on large screens */
}
@media (max-width: 575.98px){
  .item.gallery-item > .gallery-caption h4{ font-size: 1rem; }     /* solid on phones */
}


.owl-carousel .owl-stage-outer,
.owl-carousel .owl-stage,
.owl-carousel .owl-item{ background: #fff !important; }

.item.gallery-item > a{
  display: flex;
  justify-content: center;      /* center the image in the slide */
  align-items: flex-start;
}


.item.gallery-item > a > img{
  width: auto !important;       /* keep native width */
  height: auto !important;
  max-width: none !important;   /* don’t downscale */
  display: block;
}

/* optional: add a white “canvas” so the gutters look intentional */
.item.gallery-item{
  background: #fff !important;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}