:root {
    --primary: #1E5E38;
    --primary-hover: #2E7D4F;
    --accent:#D4A64A;
    --accent-hover: #B5724A;
    --secondary: #F4EDE3;
    --light: #FAFAF7;
    --dark: #162B1E;
    --muted: #5A7A65;
    --border: #D6E4DA;
    --soft: #f7f4ef;
    --text: #1c1c1c;
    --shadow-sm: 0 4px 12px rgba(22, 43, 30, 0.03);
    --shadow-md: 0 12px 30px rgba(22, 43, 30, 0.06);
    --shadow-lg: 0 20px 50px rgba(22, 43, 30, 0.12);
    --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================
   1. GLOBAL REBOOT & LAYOUT ARCHITECTURE
   ========================================== */
body {
    background-color: var(--light);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 2.5rem;
    width: 100%;
    box-sizing: border-box;
}

.text-center { text-align: center; }
.py-5 { padding-top: 7rem; padding-bottom: 7rem; }
.mt-4 { margin-top: 3.5rem; }

/* Elegant, authoritative typography anchors */
h1, h2, h3, h4 {
    color: var(--dark);
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin: 0;
}

/* ==========================================
   2. HERO HEADER (Split Layout with Image Asset)
   ========================================== */
.program-section {
    width: 100%;
    padding: 0 !important;
    background-color: var(--dark);
}

.program-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

/* Creates the edge-to-edge split responsive viewport container */
.program-banner {
    position: relative;
    width: 100%;
    min-height: 90vh; 
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Controls content to image asset width balance */
    align-items: center;
    background-color: var(--dark);
    border-bottom: 6px solid var(--accent);
}

/* Left Content Area */
.banner-content {
    padding: 6rem 4rem 6rem 10%; /* Beautiful padding balance pushing inward */
    z-index: 5;
    position: relative;
}

.banner-content h1 {
    font-size: 4.25rem;
    line-height: 1.05;
    color: var(--light);
    margin-bottom: 2rem;
}

.program-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 3.5rem;
}

.program-tags span {
    background: rgba(255, 255, 255, 0.06);
    color: var(--secondary);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.6rem 1.4rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

/* Premium Button Architecture */
.brochure-btn, .enroll-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent);
    color: var(--light);
    padding: 1.25rem 3rem;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: 1.5px;
    transition: var(--transition-smooth);
    box-shadow: 0 6px 20px rgba(201, 134, 90, 0.25);
}

.brochure-btn:hover {
    background-color: var(--accent-hover);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 30px rgba(201, 134, 90, 0.4);
}

/* Right Side Image Container Layer (Fulfills requested banner visual image update) */
.banner-overlay {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 500px;
    /* Dynamically loaded stock placeholder mimicking your source team graphic style */
    background:url("img/head-bg.webp") center center / cover no-repeat;
}

/* Subtle dark gradient mapping on overlay to unify the image into your --dark brand theme */
.banner-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--dark) 0%, rgba(22, 43, 30, 0.15) 30%);
    z-index: 2;
}

/* ==========================================
   3. STRUCTURAL PROGRAM DETAILS METRICS
   ========================================== */
.program-info {
    max-width: 1200px;
    margin: -5rem auto 6rem;
    background-color: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 10;
}

.program-info h2 {
    font-size: 2.5rem;
    color: var(--dark);
}

.program-info p {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    background: rgba(30, 94, 56, 0.06);
    padding: 0.85rem 2.25rem;
    border-radius: 12px;
    margin: 0;
}

/* ==========================================
   4. ROADMAP GRID ARCHITECTURE (3x3 Matrix)
   ========================================== */
.roadmap-grid {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 2.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-bottom: 4rem;
}

.month-card {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

.month-card:hover {
    transform: translateY(-10px) scale(1.01);
    box-shadow: var(--shadow-lg);
    border-color: var(--muted);
}

.month-head {
    align-self: flex-start;
    background-color: var(--dark);
    color: var(--light);
    padding: 0.45rem 1.25rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2rem;
}

.month-card h4 {
    font-size: 1.6rem;
    margin-bottom: 1.75rem;
}

.month-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.month-card ul li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 1.25rem;
    color: #3a3a3a;
    font-size: 1.05rem;
    font-weight: 500;
}

.month-card ul li::before {
    content: "✓";
    color: var(--accent);
    font-weight: 900;
    position: absolute;
    left: 0;
}

/* Emphasizes Month 9 Framework Milestone */
.month-card:nth-child(9) {
    border: 2px solid var(--accent);
    background: var(--soft);
}
.month-card:nth-child(9) .month-head {
    background-color: var(--accent);
}

/* ==========================================
   5. COMPLIANCE DOCUMENTS & PPO PANELS
   ========================================== */
.documents-section {
    background-color: var(--secondary);
    padding: 7rem 0;
}

.section-header h2 {
    font-size: 2.75rem;
    margin-bottom: 4rem;
}

.docs-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.doc-item {
    background: #FFFFFF;
    border: 1px solid var(--border);
    padding: 2.5rem 2rem;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

.doc-item:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.doc-item span {
    font-weight: 700;
    color: var(--dark);
    font-size: 1.1rem;
}

.doc-item i {
    color: var(--primary);
    font-size: 2rem;
}

/* PPO Segment Panels */
.ppo-section {
    background-color: var(--light);
}

.ppo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.ppo-card {
    background: var(--dark);
    color: var(--secondary);
    text-align: center;
    padding: 3rem 2rem;
    border-radius: 16px;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.4;
    border-bottom: 6px solid var(--primary);
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-sm);
}

.ppo-card:hover {
    transform: translateY(-8px);
    background: #1f3d2a;
    color: var(--light);
    border-bottom-color: var(--accent);
    box-shadow: var(--shadow-lg);
}

/* ==========================================
   6. PREMIUM INVESTMENT MATRIX
   ========================================== */
.pricing-section {
    background: #FFFFFF;
    border-top: 1px solid var(--border);
}

.pricing-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    max-width: 1000px;
    margin: 0 auto;
}

.price-box {
    background: var(--soft);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 5rem 3.5rem;
    text-align: center;
    transition: var(--transition-smooth);
}

.price-box h5 {
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 2px;
    color: var(--muted);
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.price-box h2 {
    font-size: 4rem;
    font-weight: 900;
}

.price-box.recommended {
    background: var(--dark);
    color: var(--light);
    border: 2px solid var(--accent);
    position: relative;
}

.price-box.recommended h2 { color: var(--light); }
.price-box.recommended h5 { color: var(--accent); }

.enroll-btn {
    background-color: var(--primary);
    margin-top: 4rem;
}

.enroll-btn:hover {
    background-color: var(--primary-hover);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(30, 94, 56, 0.3);
}

/* ==========================================
   7. SCROLL ANIMATION CONFIGURATION HOOKS
   ========================================== */
.reveal-up, .reveal-left, .reveal-right {
    opacity: 0;
    will-change: transform, opacity;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s ease;
}

.reveal-up { transform: translateY(60px); }
.reveal-left { transform: translateX(-60px); }
.reveal-right { transform: translateX(60px); }

/* Class injected into elements by your scroll trigger library (e.g., GSAP ScrollTrigger or IntersectionObserver) */
.active.reveal-up, .active.reveal-left, .active.reveal-right {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* ==========================================
   8. MEDIA QUERIES (FLUID RESPONSIVENESS)
   ========================================== */
@media (max-width: 1200px) {
    .banner-content h1 { font-size: 3.5rem; }
    .roadmap-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .docs-list, .ppo-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    .program-banner { grid-template-columns: 1fr; min-height: auto; }
    .banner-overlay { min-height: 400px; grid-row: 1; } /* Image snaps elegantly to the top on mobile/tablet */
    .banner-content { padding: 5rem 2.5rem; }
    .program-info { flex-direction: column; text-align: center; gap: 2rem; margin-top: -3rem; padding: 2.5rem; }
}

@media (max-width: 768px) {
    .banner-content h1 { font-size: 2.75rem; }
    .roadmap-grid, .docs-list, .ppo-grid, .pricing-card { grid-template-columns: 1fr; }
    .price-box { padding: 3.5rem 2rem; }
}
/* ==========================================
   UPDATED HERO BANNER ARCHITECTURE
   ========================================== */
.program-section {
    width: 100%;
    padding: 0 !important;
    background-color: var(--light);
}

.program-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

/* Implements the exact layout from WhatsApp Image 2026-06-27 at 1.00.11 AM.webp */
.program-banner {
    position: relative;
    width: 100%;
    min-height: 480px; /* Reduced vertical scale for a sleeker profile */
    display: flex;
    align-items: center;
    
    /* Full-bleed background image setup */
    background: url("head-bg.webp") center 40% / cover no-repeat;
    border-bottom: 5px solid var(--accent);
    overflow: hidden;
}

/* Elegant horizontal color fade layer: Solid dark green on left, transparent over team image on right */
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        var(--dark) 0%, 
        var(--dark) 40%, 
        rgba(22, 43, 30, 0.85) 55%, 
        rgba(22, 43, 30, 0.2) 100%
    );
    z-index: 1;
}

/* Safely centers typography blocks across web viewports */
.banner-content {
    max-width: 1360px;
    margin: 0 auto;
    padding: 3.5rem 2.5rem;
    width: 100%;
    box-sizing: border-box;
    z-index: 2; /* Forces text to layer cleanly on top of the gradient */
    position: relative;
}

.banner-content h1 {
    font-size: 3.25rem; /* Balanced, punchy headline scaling */
    line-height: 1.15;
    color: var(--light);
    font-weight: 800;
    margin-bottom: 1.5rem;
    max-width: 680px; /* Restricts layout text wrapping to mimic reference photo exactly */
    letter-spacing: -0.5px;
}

/* Compact pill tags layout directly beneath the heading */
.program-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 2rem;
}

.program-tags span {
    background-color: var(--accent); /* Matches the bright button pop fills */
    color: var(--light);
    padding: 0.45rem 1.1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Clean, crisp call to action buttons */
.brochure-btn {
    display: inline-block;
    background-color: var(--accent);
    color: var(--light);
    padding: 0.85rem 2rem; /* Tightened touch target spacing */
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(201, 134, 90, 0.3);
}

.brochure-btn:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(201, 134, 90, 0.4);
}

/* Adjusted info overlay box placement for smaller header height scale */
.program-info {
    max-width: 1200px;
    margin: 3rem auto; /* Swapped out negative margins for a clean, professional stack separation */
    background-color: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 30px rgba(22, 43, 30, 0.04);
}

/* Tablet & Mobile responsive optimization boundaries */
@media (max-width: 768px) {
    .program-banner {
        min-height: 400px;
    }
    .banner-overlay {
        background: linear-gradient(180deg, rgba(22, 43, 30, 0.9) 0%, var(--dark) 100%);
    }
    .banner-content h1 {
        font-size: 2.25rem;
    }
    .program-info {
        flex-direction: column;
        text-align: center;
        gap: 1.25rem;
        padding: 2rem;
    }
}
/* ==========================================
   1. PPO OPPORTUNITIES SECTION (Premium Grid)
   ========================================== */
.ppo-section {
    background-color: var(--light);
    padding: 7rem 0;
    position: relative;
}

.ppo-section .section-header h2 {
    font-size: 2.75rem;
    color: var(--dark);
    margin-bottom: 4rem;
    position: relative;
    display: inline-block;
}

/* Subtle accent underline indicator */
.ppo-section .section-header h2::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: var(--accent);
    border-radius: 2px;
}

/* 4-Column Grid layout */
.ppo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

/* Sleek glassmorphism / minimal border card */
.ppo-card {
    background: #FFFFFF;
    color: var(--dark);
    padding: 3rem 2rem;
    border-radius: 16px;
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.4;
    text-align: left; /* Shift away from boring centered alignment */
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

/* Modern clean indicator slot inside the card */
.ppo-card::before {
    content: '→';
    font-size: 1.5rem;
    color: var(--accent);
    margin-bottom: 1.5rem;
    display: block;
    transition: var(--transition-smooth);
}

/* Premium hover micro-interaction */
.ppo-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

.ppo-card:hover::before {
    transform: translateX(6px);
    color: var(--primary);
}


/* ==========================================
   2. PRICING SECTION (High-Conversion Matrix)
   ========================================== */
.pricing-section {
    background: var(--secondary); /* Contrast backdrop to block out the pricing area */
    padding: 8rem 0;
}

.pricing-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 950px;
    margin: 0 auto;
    align-items: center;
}

/* Clean Base Price Box Layout */
.price-box {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 4.5rem 3.5rem;
    text-align: center;
    position: relative;
    box-shadow: var(--shadow-md);
    transition: var(--transition-smooth);
}

.price-box h5 {
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 2px;
    color: var(--muted);
    margin: 0 0 1.5rem 0;
    font-weight: 700;
}

.price-box h2 {
    font-size: 3.75rem;
    font-weight: 900;
    color: var(--dark);
    margin: 0;
    line-height: 1;
}

.price-box small {
    display: block;
    font-size: 0.9rem;
    color: var(--muted);
    font-weight: 600;
    margin-top: 0.5rem;
}

/* Recommended Strategic Card Upgrade */
.price-box.recommended {
    background: var(--dark);
    border: 2.5px solid var(--accent);
    color: var(--light);
    transform: scale(1.05); /* Gives natural visual hierarchy */
    box-shadow: var(--shadow-lg);
}

.price-box.recommended h2 {
    color: #FFFFFF;
}

.price-box.recommended h5 {
    color: var(--accent);
}

.price-box.recommended small {
    color: rgba(255, 255, 255, 0.4);
}

/* Floating Ribbon "Badge" for Launch Offer */
.price-box.recommended::after {
    content: 'Most Popular';
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent);
    color: var(--light);
    padding: 0.4rem 1.5rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(201, 134, 90, 0.3);
}

/* Button CTA Section Alignment */
.enroll-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: var(--light);
    padding: 1.25rem 4rem;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 1.5px;
    transition: var(--transition-smooth);
    box-shadow: 0 6px 20px rgba(30, 94, 56, 0.2);
}

.enroll-btn:hover {
    background-color: var(--primary-hover);
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(30, 94, 56, 0.35);
}


/* ==========================================
   3. FLUID RESPONSIVE BREAKPOINTS
   ========================================== */
@media (max-width: 1024px) {
    .ppo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .ppo-grid, .pricing-card {
        grid-template-columns: 1fr;
    }
    .price-box.recommended {
        transform: scale(1); /* Reset scale overlay to prevent clipping on mobile viewports */
        margin-top: 1rem;
    }
    .price-box {
        padding: 3.5rem 2rem;
    }
}
/*==================================================
  TALENTBRIDGE PAGE
  PART 1
  Hero + Intro + Benefits
==================================================*/

.tb-program-page{
    width:100%;
    overflow-x:hidden;
    background:#fff;
}

/*------------------------------------
Section Spacing
------------------------------------*/

.tb-program-page section{
    padding:90px 0;
}

.tb-program-page .container{
    width:100%;
    max-width:1240px;
    margin:auto;
    padding:0 20px;
}

/*------------------------------------
Common Section Title
------------------------------------*/

.tb-program-page .section-title{
    text-align:center;
    max-width:760px;
    margin:0 auto 60px;
}

.tb-program-page .section-title span{
    display:inline-block;
    padding:8px 18px;
    background:rgba(30,94,56,.08);
    color:#1E5E38;
    border-radius:100px;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.tb-program-page .section-title h2{
    font-size:2.8rem;
    font-weight:800;
    color:#162B1E;
    line-height:1.2;
    margin-bottom:18px;
}

.tb-program-page .section-title p{
    color:#666;
    line-height:1.8;
    font-size:1.05rem;
}


/*==================================================
  TALENTBRIDGE PAGE
  PART 3
  Skills • Tools • Practical Work • Career
==================================================*/

/*=====================================
  COMMON SECTION
======================================*/

.tb-program-page .tb-skills-section,
.tb-program-page .tb-tools-section,
.tb-program-page .tb-practical-section,
.tb-program-page .tb-career-section{
    padding:90px 0;
    background:#fff;
}

/*=====================================
  SKILLS GRID
======================================*/

.tb-program-page .tb-skills-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:24px;

    margin-top:55px;

}

.tb-program-page .tb-skill-card{

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:20px;

    padding:30px 25px;

    text-align:center;

    transition:.35s;

    box-shadow:0 6px 18px rgba(0,0,0,.03);

}

.tb-program-page .tb-skill-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 35px rgba(0,0,0,.08);

    border-color:#C9865A;

}

.tb-program-page .tb-skill-card i{

    width:72px;

    height:72px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto auto 22px;

    background:#F3F8F4;

    color:#1E5E38;

    font-size:30px;

}

.tb-program-page .tb-skill-card h4{

    margin:0;

    color:#162B1E;

    font-size:1.08rem;

    font-weight:700;

    line-height:1.4;

}

/*=====================================
  TOOLS
======================================*/

.tb-program-page .tb-tools-section{

    background:#F8FAF8;

}

.tb-program-page .tb-tools-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin-top:50px;

}

.tb-program-page .tool-box{

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:16px;

    padding:22px;

    text-align:center;

    font-weight:700;

    color:#162B1E;

    transition:.3s;

}

.tb-program-page .tool-box:hover{

    background:#1E5E38;

    color:#fff;

    transform:translateY(-5px);

}

/*=====================================
  PRACTICAL WORK
======================================*/

.tb-program-page .tb-practical-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

    margin-top:55px;

}

.tb-program-page .practical-card{

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:22px;

    padding:35px;

    transition:.35s;

    box-shadow:0 6px 18px rgba(0,0,0,.03);

}

.tb-program-page .practical-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 35px rgba(0,0,0,.08);

}

.tb-program-page .practical-card .number{

    width:64px;

    height:64px;

    background:#1E5E38;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    font-weight:800;

    margin-bottom:22px;

}

.tb-program-page .practical-card h3{

    color:#162B1E;

    margin-bottom:14px;

    font-size:1.3rem;

}

.tb-program-page .practical-card p{

    color:#666;

    line-height:1.8;

    margin:0;

}

/*=====================================
  CAREER SECTION
======================================*/

.tb-program-page .tb-career-section{

    background:#F8FAF8;

}

.tb-program-page .tb-career-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

    margin-top:55px;

}

.tb-program-page .career-box{

    background:#fff;

    border-radius:20px;

    padding:35px;

    border:1px solid #ECECEC;

    transition:.35s;

    text-align:center;

}

.tb-program-page .career-box:hover{

    background:#1E5E38;

    transform:translateY(-6px);

}

.tb-program-page .career-box h3{

    color:#162B1E;

    margin-bottom:15px;

    font-size:1.25rem;

    transition:.35s;

}

.tb-program-page .career-box p{

    color:#666;

    line-height:1.8;

    transition:.35s;

}

.tb-program-page .career-box:hover h3,

.tb-program-page .career-box:hover p{

    color:#fff;

}

/*=====================================
  TABLETS
======================================*/

@media(max-width:992px){

.tb-program-page .tb-skills-grid{

grid-template-columns:repeat(2,1fr);

}

.tb-program-page .tb-tools-grid{

grid-template-columns:repeat(2,1fr);

}

.tb-program-page .tb-career-grid{

grid-template-columns:1fr;

}

}

/*=====================================
  MOBILE
======================================*/

@media(max-width:768px){

.tb-program-page .tb-skills-section,

.tb-program-page .tb-tools-section,

.tb-program-page .tb-practical-section,

.tb-program-page .tb-career-section{

padding:70px 0;

}

.tb-program-page .tb-practical-grid{

grid-template-columns:1fr;

gap:20px;

}

.tb-program-page .tb-skill-card{

padding:24px;

}

.tb-program-page .tb-skill-card i{

width:60px;

height:60px;

font-size:24px;

}

.tb-program-page .tool-box{

padding:18px;

}

.tb-program-page .practical-card{

padding:26px;

}

.tb-program-page .career-box{

padding:26px;

}

}

/*=====================================
  SMALL PHONES
======================================*/

@media(max-width:480px){

.tb-program-page .tb-skills-grid{

grid-template-columns:1fr;

gap:16px;

}

.tb-program-page .tb-tools-grid{

grid-template-columns:1fr;

gap:16px;

}

.tb-program-page .tb-skill-card{

padding:22px;

}

.tb-program-page .tb-skill-card h4{

font-size:1rem;

}

.tb-program-page .tool-box{

font-size:.95rem;

}

.tb-program-page .practical-card{

padding:22px;

}

.tb-program-page .practical-card h3{

font-size:1.15rem;

}

.tb-program-page .career-box{

padding:22px;

}

.tb-program-page .career-box h3{

font-size:1.1rem;

}

.tb-program-page .career-box p{

font-size:.95rem;

}

}
/*==================================================
  TALENTBRIDGE PAGE
  PART 4
  Stipend • Documents • PPO • FAQ • CTA
==================================================*/

/*=========================================
SECTION SPACING
=========================================*/

.tb-program-page .tb-stipend-section,
.tb-program-page .tb-documents,
.tb-program-page .tb-placement,
.tb-program-page .tb-faq,
.tb-program-page .tb-final-cta{
    padding:90px 0;
}

/*=========================================
STIPEND TIMELINE
=========================================*/

.tb-program-page .stipend-timeline{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:22px;

    margin-top:55px;

}

.tb-program-page .stipend-card{

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:20px;

    padding:28px;

    text-align:center;

    transition:.35s;

    box-shadow:0 8px 20px rgba(0,0,0,.04);

}

.tb-program-page .stipend-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 35px rgba(0,0,0,.08);

}

.tb-program-page .stipend-card h4{

    color:#666;

    font-size:.95rem;

    margin-bottom:12px;

}

.tb-program-page .stipend-card h2{

    color:#1E5E38;

    font-size:2rem;

    margin-bottom:10px;

    font-weight:800;

}

.tb-program-page .stipend-card h3{

    color:#162B1E;

    font-size:1.3rem;

    margin-bottom:10px;

}

.tb-program-page .stipend-card span{

    color:#777;

    font-size:.9rem;

}

.tb-program-page .stipend-card.active{

    background:#1E5E38;

}

.tb-program-page .stipend-card.active h2,

.tb-program-page .stipend-card.active h3,

.tb-program-page .stipend-card.active h4,

.tb-program-page .stipend-card.active span{

    color:#fff;

}

.tb-program-page .stipend-card.final{

    background:#C9865A;

}

.tb-program-page .stipend-card.final h2,

.tb-program-page .stipend-card.final h4,

.tb-program-page .stipend-card.final span{

    color:#fff;

}

.tb-program-page .stipend-total{

    margin-top:55px;

    text-align:center;

}

.tb-program-page .stipend-total h3{

    color:#666;

    margin-bottom:12px;

}

.tb-program-page .stipend-total h2{

    color:#1E5E38;

    font-size:3rem;

    font-weight:800;

}

/*=========================================
DOCUMENTS
=========================================*/

.tb-program-page .documents-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    margin-top:55px;

}

.tb-program-page .document-card{

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:20px;

    padding:35px;

    text-align:center;

    transition:.35s;

}

.tb-program-page .document-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.08);

}

.tb-program-page .document-card i{

    font-size:40px;

    color:#1E5E38;

    margin-bottom:22px;

}

.tb-program-page .document-card h4{

    margin-bottom:12px;

    color:#162B1E;

}

.tb-program-page .document-card p{

    color:#666;

    line-height:1.7;

}

/*=========================================
PLACEMENT
=========================================*/

.tb-program-page .placement-card{

    background:linear-gradient(135deg,#16361F,#1E5E38);

    border-radius:24px;

    padding:60px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:50px;

    color:#fff;

}

.tb-program-page .placement-card span{

    color:#C9865A;

    font-weight:700;

    letter-spacing:1px;

}

.tb-program-page .placement-card h2{

    margin:15px 0 20px;

    font-size:2.2rem;

}

.tb-program-page .placement-card p{

    line-height:1.8;

    opacity:.92;

}

/*=========================================
FAQ
=========================================*/

.tb-program-page .faq-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

    margin-top:55px;

}

.tb-program-page .faq-item{

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:20px;

    padding:30px;

    transition:.35s;

}

.tb-program-page .faq-item:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 35px rgba(0,0,0,.08);

}

.tb-program-page .faq-item h4{

    color:#162B1E;

    margin-bottom:14px;

}

.tb-program-page .faq-item p{

    color:#666;

    line-height:1.8;

}

/*=========================================
FINAL CTA
=========================================*/

.tb-program-page .tb-final-cta{

    background:#F8FAF8;

}

.tb-program-page .cta-box{

    background:#fff;

    border-radius:26px;

    padding:70px;

    text-align:center;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.tb-program-page .cta-box span{

    display:inline-block;

    color:#C9865A;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:18px;

}

.tb-program-page .cta-box h2{

    font-size:2.7rem;

    color:#162B1E;

    margin-bottom:22px;

}

.tb-program-page .cta-box p{

    max-width:760px;

    margin:auto;

    line-height:1.9;

    color:#666;

}

.tb-program-page .cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:40px;

}

/*=========================================
TABLET
=========================================*/

@media(max-width:992px){

.tb-program-page .stipend-timeline{

grid-template-columns:repeat(2,1fr);

}

.tb-program-page .documents-grid{

grid-template-columns:repeat(2,1fr);

}

.tb-program-page .placement-card{

flex-direction:column;

text-align:center;

padding:45px;

}

.tb-program-page .faq-grid{

grid-template-columns:1fr;

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:768px){

.tb-program-page .tb-stipend-section,

.tb-program-page .tb-documents,

.tb-program-page .tb-placement,

.tb-program-page .tb-faq,

.tb-program-page .tb-final-cta{

padding:70px 0;

}

.tb-program-page .stipend-timeline{

grid-template-columns:1fr;

gap:18px;

}

.tb-program-page .documents-grid{

grid-template-columns:1fr;

gap:18px;

}

.tb-program-page .placement-card{

padding:30px 24px;

}

.tb-program-page .placement-card h2{

font-size:1.8rem;

}

.tb-program-page .cta-box{

padding:40px 24px;

}

.tb-program-page .cta-box h2{

font-size:2rem;

}

.tb-program-page .cta-buttons{

flex-direction:column;

}

.tb-program-page .cta-buttons a{

width:100%;

}

}

/*=========================================
SMALL PHONES
=========================================*/

@media(max-width:480px){

.tb-program-page .stipend-total h2{

font-size:2.3rem;

}

.tb-program-page .document-card{

padding:25px;

}

.tb-program-page .faq-item{

padding:22px;

}

.tb-program-page .cta-box{

padding:30px 20px;

border-radius:20px;

}

.tb-program-page .cta-box h2{

font-size:1.6rem;

}

.tb-program-page .placement-card{

border-radius:20px;

}

}
/*======================================================
FINAL CTA
======================================================*/

.tb-program-page .tb-final-cta{

    padding:100px 0;

    background:linear-gradient(
        180deg,
        #f7faf8,
        #ffffff
    );

}

.tb-program-page .tb-cta-card{

    background:#fff;

    border-radius:30px;

    overflow:hidden;

    display:grid;

    grid-template-columns:1.6fr .8fr;

    box-shadow:0 25px 70px rgba(0,0,0,.08);

    border:1px solid #ececec;

}

.tb-program-page .tb-cta-content{

    padding:70px;

}

.tb-program-page .tb-cta-tag{

    display:inline-block;

    background:#EEF6F1;

    color:#1E5E38;

    padding:8px 18px;

    border-radius:50px;

    font-size:.8rem;

    font-weight:700;

    margin-bottom:25px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.tb-program-page .tb-cta-content h2{

    font-size:2.8rem;

    color:#162B1E;

    font-weight:800;

    line-height:1.2;

    margin-bottom:25px;

}

.tb-program-page .tb-cta-content p{

    color:#666;

    font-size:1.05rem;

    line-height:1.9;

    margin-bottom:35px;

}

.tb-program-page .tb-cta-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-bottom:45px;

}

.tb-program-page .tb-feature-item{

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:600;

    color:#162B1E;

}

.tb-program-page .tb-feature-item i{

    color:#1E5E38;

    font-size:18px;

}

.tb-program-page .tb-cta-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.tb-program-page .tb-btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

    border:2px solid #1E5E38;

    color:#1E5E38;

    border-radius:10px;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}

.tb-program-page .tb-btn-outline:hover{

    background:#1E5E38;

    color:#fff;

}

/*=============================*/

.tb-program-page .tb-cta-side{

    background:linear-gradient(
        135deg,
        #16361F,
        #1E5E38
    );

    display:flex;

    align-items:center;

    justify-content:center;

    padding:45px;

}

.tb-program-page .tb-side-box{

    width:100%;

}

.tb-program-page .tb-side-box h3{

    color:#fff;

    font-size:1.5rem;

    margin-bottom:35px;

}

.tb-program-page .tb-highlight{

    display:flex;

    justify-content:space-between;

    gap:20px;

    padding:18px 0;

    border-bottom:1px solid rgba(255,255,255,.15);

}

.tb-program-page .tb-highlight:last-child{

    border:none;

}

.tb-program-page .tb-highlight strong{

    color:#fff;

}

.tb-program-page .tb-highlight span{

    color:rgba(255,255,255,.8);

    text-align:right;

    max-width:180px;

}

/*=============================*/

@media(max-width:992px){

.tb-program-page .tb-cta-card{

grid-template-columns:1fr;

}

.tb-program-page .tb-cta-content{

padding:50px;

}

.tb-program-page .tb-cta-side{

padding:40px;

}

}

@media(max-width:768px){

.tb-program-page .tb-final-cta{

padding:70px 0;

}

.tb-program-page .tb-cta-content{

padding:35px 25px;

}

.tb-program-page .tb-cta-content h2{

font-size:2rem;

}

.tb-program-page .tb-cta-features{

grid-template-columns:1fr;

gap:15px;

}

.tb-program-page .tb-cta-buttons{

flex-direction:column;

}

.tb-program-page .tb-btn-primary,

.tb-program-page .tb-btn-outline{

width:100%;

}

.tb-program-page .tb-highlight{

flex-direction:column;

gap:8px;

}

.tb-program-page .tb-highlight span{

text-align:left;

max-width:none;

}

}

@media(max-width:480px){

.tb-program-page .tb-cta-content h2{

font-size:1.7rem;

}

.tb-program-page .tb-cta-content{

padding:30px 20px;

}

.tb-program-page .tb-cta-side{

padding:30px 20px;

}

}