.text-white > .indexBoxes .indexBoxesHead .indexBoxesSmall,
.text-white > .indexBoxes .indexBoxesHead h2,
.text-white > .indexBoxes .indexBoxesHead p { color:var(--light-font-color); }
.text-white > .indexBoxes .indexBoxesGrid .indexBox:before { border: 1px solid var(--light-font-color); }

.text-body-alt > .indexBoxes .indexBoxesHead .indexBoxesSmall,
.text-body-alt > .indexBoxes .indexBoxesHead h2,
.text-body-alt > .indexBoxes .indexBoxesHead p { color:var(--light-font-color2); }
.text-body-alt > .indexBoxes .indexBoxesGrid .indexBox:before { border: 1px solid var(--light-font-color2); }

.text-primary > .indexBoxes .indexBoxesHead .indexBoxesSmall,
.text-primary > .indexBoxes .indexBoxesHead h2,
.text-primary > .indexBoxes .indexBoxesHead p { color:var(--main-clr); }

.text-secondary > .indexBoxes .indexBoxesHead .indexBoxesSmall,
.text-secondary > .indexBoxes .indexBoxesHead h2,
.text-secondary > .indexBoxes .indexBoxesHead p { color:var(--head-font-color); }

.indexBoxesHead{max-width:800px;margin:0 auto 50px;text-align:center;}
.indexBoxesSmall{display:block;color:var(--black-clr);opacity:.4;font-size:18px;font-weight:600;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:15px;}
.indexBoxesHead h2{color:var(--head-font-color);font-weight:700;font-size:var(--fs-28);}
.indexBoxesHead h2:not(:last-child){padding-bottom:15px;}
.indexBoxesHead p{color:var(--body-font-color);opacity:.75;font-size:16px; text-align: center;}
.indexBoxesHead p:last-child{padding-bottom:0;}

/* Same card design as .scrollBox (scroll-boxes-block.css), just laid out in a Bootstrap
   row/col grid (col-12/col-md-6/col-lg-4, matching image-content-block.php's convention)
   instead of a sticky-pinned, JS-driven horizontal scroll track - no data attributes, no JS
   file needed. */
.indexBoxesGrid{--bs-gutter-x:30px;row-gap:30px; justify-content: center;}

.indexBox{
	box-sizing:border-box;
	position:relative;
	aspect-ratio:440 / 510;
	background:var(--black-clr);border-radius:30px;padding:30px;display:flex;flex-direction:column;justify-content:space-between;
}
.indexBox:before{content:"";position:absolute;inset:0;background:rgba(255,255,255,0.1);border-radius:30px;}

.indexBoxNumber{position:relative;display:block;font-size:64px;font-weight:800;color:rgba(255,255,255,.08);line-height:1;text-align:right;}

.indexBoxContent{position:relative;}
.indexBoxContent h3{color:var(--light-font-color);font-weight:600;font-size:var(--fs-24);}
.indexBoxContent h3:not(:last-child){padding-bottom:10px;}
.indexBoxContent p{color:var(--light-font-color);opacity:.75;font-size:15px;}
.indexBoxContent p:last-child{padding-bottom:0;}

.indexBoxLink{position:relative;display:inline-flex;align-items:center;gap:8px;color:var(--tertiary-color);font-weight:600;margin-top:10px;}
.indexBoxLink i{font-size:12px;}

@media(min-width:576px){ .indexBoxContent h3 {font-size:var(--fs-26);} }
@media(min-width:768px){ .indexBoxesHead h2{font-size:var(--fs-36);} }
@media(min-width:992px){
	.indexBoxesHead h2{font-size:var(--fs-42);}
	.indexBoxContent h3 {font-size:var(--fs-28);}
}
@media(min-width:1600px){ .indexBoxesHead h2{font-size:var(--fs-48);} .indexBoxContent h3 {font-size:var(--fs-30);} }

@media(max-width:767.98px){ .indexBoxes br {display: none;} }