:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-2de71bf *//* ============================================================
🌟 BEL-C PROGRAMS BY AGE PAGE
CLEAN • CENTERED • RESPONSIVE • ELEMENTOR-SAFE
============================================================ */

/* Page Sections */
.belc-programs-intro {
padding: 80px 20px;
background: #ffffff;
}

/* Container */
.belc-intro-container {
max-width: 1180px;
margin: 0 auto;
}

/* Headings */
.belc-intro-title {
text-align: center;
font-size: 2.4rem;
line-height: 1.2;
color: #2563eb;
margin: 0 0 20px;
}

/* Intro Text */
.belc-intro-text {
text-align: center;
max-width: 850px;
margin: 0 auto 20px;
line-height: 1.65;
color: #333333;
font-size: 1.15rem;
}

/* Age Grid */
.belc-program-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 28px;
margin-top: 50px;
align-items: stretch;
}

/* Cards */
.program-card {
background: #ffffff;
padding: 30px 24px;
border-radius: 22px;
box-shadow: 0 6px 16px rgba(0,0,0,0.07);
text-align: center;
display: flex;
flex-direction: column;
height: 100%;
border-top: 6px solid #e5e7eb;
}

/* Card Accent Colours */
.program-card:nth-child(1) {
border-top-color: #ff914d;
}

.program-card:nth-child(2) {
border-top-color: #14b8a6;
}

.program-card:nth-child(3) {
border-top-color: #9b8ac4;
}

.program-card:nth-child(4) {
border-top-color: #facc15;
}

.program-card:nth-child(5) {
border-top-color: #2563eb;
}

/* Icons */
.program-icon {
font-size: 2.4rem;
line-height: 1;
margin-bottom: 14px;
text-align: center;
}

/* Card Titles */
.program-card h3 {
font-size: 1.45rem;
color: #111827;
margin: 0 0 8px;
}

/* Age Band */
.age-band {
font-size: 0.95rem;
font-weight: 700;
color: #6b7280;
margin-bottom: 16px;
}

/* Card Text */
.program-description {
color: #444444;
line-height: 1.55;
margin: 0 0 24px;
flex-grow: 1;
}

/* Button Group */
.button-group {
display: flex;
gap: 12px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-top: auto;
}

/* ============================================================
BEL-C BUTTON BASE
============================================================ */

.belc-programs-intro a.belc-btn {
display: inline-block;
padding: 12px 26px;
border-radius: 40px;
font-weight: 700;
text-decoration: none;
color: #ffffff !important;
background-color: #2563eb;
transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.belc-programs-intro a.belc-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

/* Button Colours */
.belc-programs-intro a.belc-btn.beyond {
background-color: #2563eb;
}

.belc-programs-intro a.belc-btn.beyond:hover {
background-color: #1e4fd6;
}

.belc-programs-intro a.belc-btn.tlh {
background-color: #14b8a6;
}

.belc-programs-intro a.belc-btn.tlh:hover {
background-color: #0f8f83;
}

.belc-programs-intro a.belc-btn.homeroots {
background-color: #22c55e;
}

.belc-programs-intro a.belc-btn.homeroots:hover {
background-color: #16a34a;
}

.belc-programs-intro a.belc-btn.belh {
background-color: #ff914d;
}

.belc-programs-intro a.belc-btn.belh:hover {
background-color: #e97c3a;
}

.belc-programs-intro a.belc-btn.beytalent {
background-color: #9b8ac4;
}

.belc-programs-intro a.belc-btn.beytalent:hover {
background-color: #7f70a8;
}

/* ============================================================
RESPONSIVE
============================================================ */

/* Medium screens */
@media (max-width: 1200px) {
.belc-program-grid {
grid-template-columns: repeat(3, 1fr);
}
}

/* Tablets */
@media (max-width: 900px) {
.belc-program-grid {
grid-template-columns: repeat(2, 1fr);
}

.belc-intro-title {
font-size: 2rem;
}
}

/* Mobile */
@media (max-width: 600px) {
.belc-programs-intro {
padding: 60px 18px;
}

.belc-program-grid {
grid-template-columns: 1fr;
gap: 22px;
}

.belc-intro-title {
font-size: 1.8rem;
}

.belc-intro-text {
font-size: 1rem;
}

.program-card {
padding: 28px 22px;
}

.belc-programs-intro a.belc-btn {
width: 100%;
text-align: center;
}
}/* End custom CSS */