/* ===========================================
   SERVICE PAGES CSS - NeuralPath
   =========================================== */

/* Base Service Wrapper */
.serviceDetailWrapper {
    min-height: 100vh;
    background: #ffffff;
}

/* ===========================================
   HERO SECTIONS
   =========================================== */

   
.serviceHeroSection {
    padding: 120px 0 80px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    overflow: hidden;
    position: relative;
}

.serviceHeroSection::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 200"><path d="M0,100 C300,150 500,50 1000,100 L1000,200 L0,200 Z" fill="rgba(255,255,255,0.1)"/></svg>') no-repeat bottom center;
    background-size: cover;
}

.heroContainer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.heroContent {
    animation: slideInLeft 0.8s ease-out;
}

.serviceBadge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.beginnerBadge { background: rgba(34, 197, 94, 0.2); border-color: rgba(34, 197, 94, 0.4); }
.intermediateBadge { background: rgba(59, 130, 246, 0.2); border-color: rgba(59, 130, 246, 0.4); }
.expertBadge { background: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.4); }
.mentorshipBadge { background: rgba(147, 51, 234, 0.2); border-color: rgba(147, 51, 234, 0.4); }
.enterpriseBadge { background: rgba(251, 191, 36, 0.2); border-color: rgba(251, 191, 36, 0.4); }
.careerBadge { background: rgba(236, 72, 153, 0.2); border-color: rgba(236, 72, 153, 0.4); }

.heroTitle {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.heroSubtitle {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 40px;
    opacity: 0.95;
}

.heroStats {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
}

.statItem {
    text-align: center;
}

.statNumber {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
}

.statLabel {
    display: block;
    color: black;
    font-size: 14px;
    opacity: 0.8;
    margin-top: 5px;
}

.heroActions {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

.primaryServiceButton, .secondaryServiceButton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.primaryServiceButton {
    background: #ffffff;
    color: #1e293b;
}

.primaryServiceButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.secondaryServiceButton {
    background: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

.secondaryServiceButton:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.trustElements {
    display: flex;
    gap: 30px;
}

.trustItem {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    opacity: 0.9;
}

.heroVisual {
    position: relative;
    animation: slideInRight 0.8s ease-out;
}

.heroImage {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.visualOverlay {
    position: absolute;
    top: 380px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* ===========================================
   SECTION LAYOUTS
   =========================================== */

.programOverview, .curriculumSection, .labStructure, .eliteFeatures,
.alumniImpact, .applicationProcess, .trainingPrograms, .industryExpertise,
.trainingApproach, .successStories, .trainingOptions, .mentorshipBenefits,
.mentorProfiles, .mentorshipPrograms, .mentorshipProcess, .successMetrics,
.careerServices, .careerProcess, .hiringPartners, .careerCoaching,
.studentSuccess, .programGuarantee {
    padding: 20px 0;
}

.overviewContainer, .curriculumContainer, .structureContainer, .featuresContainer,
.impactContainer, .processContainer, .programsContainer, .expertiseContainer,
.approachContainer, .storiesContainer, .optionsContainer, .benefitsContainer,
.profilesContainer, .programsContainer, .metricsContainer, .servicesContainer,
.partnersContainer, .coachingContainer, .successContainer, .guaranteeContainer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.sectionHeader {
    text-align: center;
    margin-bottom: 60px;
}

.sectionTitle {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 20px;
}

.sectionSubtitle {
    font-size: 1.2rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ===========================================
   CARD COMPONENTS
   =========================================== */

.learningModules, .researchGrid, .eliteGrid, .benefitsGrid, .servicesGrid,
.industryGrid, .deliveryOptions, .mentorsGrid, .programOptions,
.metricsGrid, .coachesGrid, .casesGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.moduleCard, .researchCard, .eliteCard, .benefitCard, .serviceCard,
.industryCard, .optionCard, .mentorCard, .programCard, .metricCard,
.coachCard, .caseCard {
    background: white;
    padding: 30px;
    margin: 20px 0;
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
}

.moduleCard:hover, .researchCard:hover, .eliteCard:hover, .benefitCard:hover,
.serviceCard:hover, .industryCard:hover, .optionCard:hover, .mentorCard:hover,
.programCard:hover, .metricCard:hover, .coachCard:hover, .caseCard:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: #3b82f6;
}

.moduleIcon, .researchIcon, .eliteIcon, .benefitIcon, .serviceIcon,
.industryIcon, .optionIcon, .metricIcon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.moduleIcon i, .researchIcon i, .eliteIcon i, .benefitIcon i,
.serviceIcon i, .industryIcon i, .optionIcon i, .metricIcon i {
    font-size: 24px;
    color: white;
}

.moduleTitle, .researchTitle, .eliteTitle, .benefitTitle, .serviceTitle,
.industryTitle, .optionTitle, .metricTitle {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 15px;
}

.moduleDescription, .researchDescription, .eliteDescription, .benefitDescription,
.serviceDescription, .industryDescription, .optionDescription {
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 20px;
}

.moduleTopics, .benefitFeatures, .serviceFeatures, .industryUseCases,
.optionFeatures, .eliteDetails {
    list-style: none;
    padding: 0;
    margin: 0;
}

.moduleTopics li, .benefitFeatures .feature, .serviceFeatures .feature,
.industryUseCases .useCase, .optionFeatures .feature, .eliteDetails .detail {
    padding: 8px 0;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 10px;
}

.moduleTopics li::before, .benefitFeatures .feature::before,
.serviceFeatures .feature::before, .industryUseCases .useCase::before,
.optionFeatures .feature::before, .eliteDetails .detail::before {
    content: '✓';
    color: #10b981;
    font-weight: 600;
}

/* ===========================================
   TIMELINE COMPONENTS
   =========================================== */

.advancedTimeline, .weeklyTimeline, .programPhases, .processTimeline,
.timelineTrack, .methodologySteps {
    position: relative;
    padding: 40px 0;
}

.phaseCard, .weekItem, .phaseBlock, .timelineItem, .methodStep {
    background: white;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-left: 4px solid #3b82f6;
    transition: all 0.3s ease;
    position: relative;
}

.phaseCard:hover, .weekItem:hover, .phaseBlock:hover, .timelineItem:hover,
.methodStep:hover {
    transform: translateX(10px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.phaseHeader, .weekContent h3, .phaseInfo h3, .timelineContent h3,
.stepContent h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.phaseTitle, .weekTitle, .timelineTitle, .stepTitle {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
}

.phaseWeeks, .phaseDuration, .timelineWeek, .phaseNumber {
    background: #3b82f6;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.weekNumber {
    position: absolute;
    left: -56px;
    top: 30px;
    width: 80px;
    height: 50px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
}

.stepIndicator {
    position: absolute;
    left: -20px;
    top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stepNumber, .markerNumber {
    width: 40px;
    height: 40px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
}

.stepLine {
    width: 2px;
    height: 60px;
    background: #e2e8f0;
    margin-top: 10px;
}

.timelineDeliverables, .phaseActivities, .stepDetails {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.deliverable, .activity, .detail {
    padding: 5px 0;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.deliverable::before, .activity::before, .detail::before {
    content: '•';
    color: #3b82f6;
    font-weight: 600;
}

/* ===========================================
   MENTOR PROFILES
   =========================================== */

.mentorCard {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.mentorCard::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(50%, -50%);
}

.mentorHeader {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.mentorAvatar {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.mentorAvatar i {
    font-size: 24px;
    color: white;
}

.mentorBadge {
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.mentorBadge.google { background: #4285f4; }
.mentorBadge.tesla { background: #cc0000; }
.mentorBadge.openai { background: #00d4aa; }
.mentorBadge.microsoft { background: #00bcf2; }

.mentorName {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.mentorTitle {
    opacity: 0.9;
    margin-bottom: 5px;
}

.mentorExperience {
    opacity: 0.8;
    font-size: 14px;
    margin-bottom: 15px;
}

.mentorRating {
    margin-bottom: 20px;
}

.stars {
    color: #fbbf24;
    margin-right: 10px;
}

.specialtiesTitle, .projectsTitle {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    opacity: 0.9;
}

.specialtyTags, .projectsList {
    margin-bottom: 20px;
}

.specialtyTags .tag {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    margin: 2px 4px 2px 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.projectsList {
    list-style: none;
    padding: 0;
    margin: 0;
}

.projectsList li {
    padding: 5px 0;
    opacity: 0.9;
    font-size: 14px;
}

.projectsList li::before {
    content: '→';
    margin-right: 10px;
    color: #fbbf24;
}

.mentorAvailability {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.availability, .sessionInfo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.availability i, .sessionInfo i {
    color: #fbbf24;
}

/* ===========================================
   PROGRAM TIERS
   =========================================== */

.programTiers, .programOptions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

.tierCard, .programCard {
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tierCard.professional, .programCard.professional {
    border-color: #3b82f6;
    transform: scale(1.05);
}

.tierCard.professional::before, .programCard.professional::before {
    content: 'Most Popular';
    position: absolute;
    top: 20px;
    right: -30px;
    background: #3b82f6;
    color: white;
    padding: 5px 40px;
    font-size: 12px;
    font-weight: 600;
    transform: rotate(45deg);
}

.tierHeader, .programHeader {
    padding: 30px 30px 20px;
    border-bottom: 1px solid #e2e8f0;
}

.tierTitle, .programTitle {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
}

.tierBadge, .programDuration {
    display: inline-block;
    background: #f1f5f9;
    color: #475569;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
}

.tierBadge.popular {
    background: #3b82f6;
    color: white;
}

.tierContent, .programContent {
    padding: 30px;
}

.tierPricing, .programPrice {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.priceRange, .programPrice {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
}

.priceNote {
    font-size: 14px;
    color: #64748b;
    margin-top: 5px;
}

.popularBadge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #10b981;
    color: white;
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

/* ===========================================
   SUCCESS STORIES & TESTIMONIALS
   =========================================== */

.impactStats, .outcomesGrid, .metricsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.impactMetric, .outcomeCard, .metricCard {
    text-align: center;
    padding: 30px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.metricNumber, .outcomeNumber, .metricData .metricNumber {
    font-size: 3rem;
    font-weight: 800;
    color: #3b82f6;
    display: block;
}

.metricLabel, .outcomeLabel, .metricData .metricLabel {
    font-size: 14px;
    color: #64748b;
    font-weight: 600;
    margin-top: 5px;
}

.spotlightCard, .storyCard {
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.storyCard.featured {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.alumniQuote, .storyQuote, .testimonialText {
    font-size: 1.1rem;
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 20px;
    position: relative;
}

.alumniQuote::before, .storyQuote::before, .testimonialText::before {
    content: '"';
    font-size: 4rem;
    position: absolute;
    top: -20px;
    left: -10px;
    color: #3b82f6;
    opacity: 0.3;
}

.storyCard.featured .storyQuote::before {
    color: rgba(255, 255, 255, 0.3);
}

.alumniInfo, .storyAuthor, .testimonialAuthor {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 20px;
}

.storyCard.featured .storyAuthor {
    border-top-color: rgba(255, 255, 255, 0.2);
}

.alumniName, .authorName, .storyName {
    font-weight: 700;
    margin-bottom: 5px;
}

.alumniRole, .authorRole, .storyTransition {
    color: #64748b;
    margin-bottom: 10px;
}

.storyCard.featured .storyTransition {
    color: rgba(255, 255, 255, 0.9);
}

.transitionMetrics, .storyMetrics {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}

.metric {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

.metricLabel {
    opacity: 0.8;
}

.metricValue {
    font-weight: 700;
    color: #10b981;
}

/* ===========================================
   HIRING PARTNERS & COMPANIES
   =========================================== */

.partnersCategories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.categoryCard {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.categoryHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e2e8f0;
}

.categoryTitle {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e293b;
}

.categoryCount {
    background: #f1f5f9;
    color: #475569;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.partnerLogos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.partnerItem {
    background: #f8fafc;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.categoryStats {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
}

.stat {
    text-align: center;
    flex: 1;
}

.stat .statNumber {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3b82f6;
    display: block;
}

.stat .statLabel {
    font-size: 12px;
    margin-top: 2px;
}

.companiesList {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.companyItem {
    background: #f8fafc;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    color: #475569;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.companyItem:hover {
    background: #3b82f6;
    color: white;
    transform: translateY(-2px);
}

/* ===========================================
   COACH PROFILES
   =========================================== */

.coachesGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

.coachCard {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    position: relative;
}

.coachAvatar {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.coachAvatar i {
    font-size: 32px;
    color: white;
}

.coachName {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 5px;
}

.coachTitle {
    color: #64748b;
    margin-bottom: 15px;
    line-height: 1.5;
}

.coachStats {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 20px;
}

.coachStats .stat {
    font-size: 14px;
    color: #475569;
}

.coachTestimonial p {
    font-style: italic;
    color: #64748b;
    line-height: 1.6;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

/* ===========================================
   GUARANTEE SECTION
   =========================================== */

.guaranteeContent {
    align-items: start;
}

.guaranteeCard {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 40px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.guaranteeCard::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>');
    animation: float 20s ease-in-out infinite;
}

.guaranteeIcon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.guaranteeIcon i {
    font-size: 32px;
    color: white;
}

.guaranteeTitle {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.guaranteeDescription {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    opacity: 0.95;
}

.guaranteeTerms {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.termsTitle {
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.termsList {
    margin: 0;
}

.term {
    padding: 5px 0;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 10px;
}

.term::before {
    content: '✓';
    color: #a7f3d0;
    font-weight: 600;
}

.guaranteeBenefits {
    display: flex;
    flex-direction: column;
}

.benefitCard {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.benefitIcon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.benefitIcon i {
    font-size: 20px;
    color: white;
}

.benefitTitle {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
}

.benefitDescription {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
}

/* ===========================================
   ENROLLMENT CTA
   =========================================== */

.enrollmentCTA {
    padding: 100px 0;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.enrollmentCTA::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 200"><path d="M0,0 C300,50 500,150 1000,100 L1000,0 Z" fill="rgba(59,130,246,0.1)"/></svg>') no-repeat top center;
    background-size: cover;
}

.ctaContainer {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.ctaContent {
    text-align: center;
    background: rgba(49, 49, 49, 0.8);
    border-radius: 20px;
    padding: 20px;
    max-width: 800px;
}

.ctaTitle {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ctaSubtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 50px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.pricingHighlight {
    margin-bottom: 50px;
}

.priceCard {
    background: white;
    color: #1e293b;
    padding: 40px;
    border-radius: 25px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.priceCard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.priceCard.elite::before { background: linear-gradient(135deg, #ef4444, #dc2626); }
.priceCard.advanced::before { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.priceCard.career::before { background: linear-gradient(135deg, #ec4899, #be185d); }

.priceHeader {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.priceTitle {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.priceAmount {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 10px;
}

.currency {
    font-size: 1.5rem;
    color: #64748b;
}

.amount {
    font-size: 3rem;
    font-weight: 800;
    color: #1e293b;
}

.priceNote {
    color: #64748b;
    font-size: 14px;
}

.priceFeatures {
    margin-bottom: 30px;
}

.priceFeatures .feature {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.priceFeatures .feature i {
    color: #10b981;
    width: 20px;
    text-align: center;
}

.priceActions {
    text-align: center;
}

.enrollButton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    padding: 16px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.enrollButton:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(59, 130, 246, 0.5);
}

.nextCohort {
    margin-top: 15px;
    color: #64748b;
    font-size: 14px;
}

.guarantees, .ctaGuarantees {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 40px;
}

.guarantee {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    opacity: 0.9;
}

.guarantee i {
    color: #10b981;
}

.ctaOptions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.ctaOptionCard {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: left;
}

.ctaOptionTitle {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.ctaOptionDescription {
    margin-bottom: 20px;
    opacity: 0.9;
    line-height: 1.6;
}

.ctaButton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.ctaButton.primary {
    background: white;
    color: #1e293b;
}

.ctaButton.secondary {
    background: transparent;
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.ctaButton:hover {
    transform: translateY(-2px);
}

.urgencyIndicator {
    margin-top: 30px;
    padding: 15px 25px;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.urgencyIcon i {
    color: #f87171;
}

.urgencyText {
    font-size: 14px;
    font-weight: 600;
}

/* ===========================================
   VISUAL OVERLAYS
   =========================================== */

.researchVisualization, .mentorshipVisualization, .careerMetrics,
.corporateMetrics, .architectureDisplay {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.dataFlow, .networkIndicator {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.dataNode, .node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.dataNode i, .node i {
    width: 30px;
    height: 30px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.dataNode span, .networkText {
    font-size: 10px;
    color: #64748b;
    font-weight: 600;
}

.arrow::before {
    content: '→';
    color: #3b82f6;
    font-weight: 600;
}

.researchMetrics, .metricDisplay {
    display: flex;
    gap: 20px;
}

.metric, .metricItem {
    text-align: center;
}

.metricValue {
    font-size: 14px;
    font-weight: 700;
    color: #3b82f6;
}

.metricLabel, .metricText {
    font-size: 10px;
    color: #64748b;
}

.profilePic {
    width: 40px;
    height: 40px;
    background: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.sessionIcon {
    font-size: 20px;
}

.progressIndicator {
    margin-top: 15px;
}

.progressBar {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.progressFill {
    height: 100%;
    background: linear-gradient(135deg, #10b981, #059669);
    transition: width 0.3s ease;
}

.progressLabel {
    font-size: 12px;
    color: #64748b;
    margin-top: 5px;
    text-align: center;
}

/* ===========================================
   ANIMATION EFFECTS
   =========================================== */

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(180deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.floating {
    animation: float 6s ease-in-out infinite;
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* ===========================================
   RESPONSIVE DESIGN
   =========================================== */

@media (max-width: 1024px) {
    .heroContainer {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .heroStats {
        justify-content: center;
    }
    
    .learningModules, .researchGrid, .eliteGrid, .benefitsGrid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .serviceHeroSection {
        padding: 100px 0 60px;
    }
    
    .heroTitle {
        font-size: 2.5rem;
    }
    
    .heroStats {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    
    .heroActions {
        flex-direction: column;
    }
    
    .primaryServiceButton, .secondaryServiceButton {
        justify-content: center;
    }
    
    .trustElements, .guarantees, .ctaGuarantees {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
    
    .sectionTitle {
        font-size: 2rem;
    }
    
    .ctaTitle {
        font-size: 2.5rem;
    }
    
    .learningModules, .researchGrid, .eliteGrid, .benefitsGrid,
    .servicesGrid, .industryGrid, .deliveryOptions, .mentorsGrid,
    .programOptions, .metricsGrid, .coachesGrid, .casesGrid,
    .impactStats, .outcomesGrid, .partnersCategories,
    .alumniSpotlight, .successStories {
        grid-template-columns: 1fr;
    }
    
    .weekNumber, .stepNumber, .markerNumber {
        position: relative;
        left: 0;
        top: 0;
        margin-bottom: 15px;
    }
    
    .stepIndicator {
        position: relative;
        left: 0;
        top: 0;
        flex-direction: row;
        margin-bottom: 20px;
    }
    
    .stepLine {
        width: 40px;
        height: 2px;
        margin-left: 10px;
        margin-top: 0;
    }
    
    .transitionMetrics, .storyMetrics {
        flex-direction: column;
        gap: 10px;
    }
    
    .ctaOptions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .heroContainer, .overviewContainer, .curriculumContainer,
    .structureContainer, .featuresContainer, .impactContainer,
    .processContainer, .programsContainer, .expertiseContainer,
    .approachContainer, .storiesContainer, .optionsContainer,
    .benefitsContainer, .profilesContainer, .metricsContainer,
    .servicesContainer, .partnersContainer, .coachingContainer,
    .successContainer, .guaranteeContainer, .ctaContainer {
        padding: 0 15px;
    }
    
    .moduleCard, .researchCard, .eliteCard, .benefitCard,
    .serviceCard, .industryCard, .optionCard, .mentorCard,
    .programCard, .metricCard, .coachCard, .caseCard,
    .phaseCard, .weekItem, .phaseBlock, .timelineItem,
    .methodStep, .spotlightCard, .storyCard {
        padding: 20px;
    }
    
    .priceCard {
        padding: 30px 20px;
    }
    
    .heroStats {
        gap: 15px;
    }
    
    .statNumber {
        font-size: 2rem;
    }
}

/* ===========================================
   PRINT STYLES
   =========================================== */

@media print {
    .serviceHeroSection {
        background: white !important;
        color: black !important;
    }
    
    .heroImage, .visualOverlay {
        display: none;
    }
    
    .primaryServiceButton, .secondaryServiceButton, .enrollButton {
        display: none;
    }
    
    .moduleCard, .researchCard, .eliteCard, .benefitCard,
    .serviceCard, .industryCard, .optionCard, .mentorCard,
    .programCard, .metricCard, .coachCard, .caseCard {
        break-inside: avoid;
        border: 1px solid #ccc;
        box-shadow: none;
    }
}

/* ===========================================
   ACCESSIBILITY IMPROVEMENTS
   =========================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus styles for better keyboard navigation */
.primaryServiceButton:focus, .secondaryServiceButton:focus,
.enrollButton:focus, .ctaButton:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .moduleCard, .researchCard, .eliteCard, .benefitCard,
    .serviceCard, .industryCard, .optionCard, .mentorCard,
    .programCard, .metricCard, .coachCard, .caseCard {
        border-width: 2px;
        border-color: #000;
    }
    
    .serviceBadge {
        background: #fff;
        color: #000;
        border: 2px solid #000;
    }
}

/* ===========================================
   INSTRUCTOR SPOTLIGHT SECTION
   =========================================== */

.instructorSpotlight {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.spotlightContainer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.spotlightContent {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    align-items: center;
}

.instructorInfo {
    padding-right: 40px;
}

.spotlightTitle {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 20px;
}

.instructorName {
    font-size: 2rem;
    font-weight: 700;
    color: #3b82f6;
    margin-bottom: 10px;
}

.instructorTitle {
    font-size: 1.2rem;
    color: #64748b;
    margin-bottom: 20px;
    font-weight: 600;
}

.instructorBio {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #475569;
    margin-bottom: 30px;
}

.instructorCredentials {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.credential {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: #374151;
}

.credential i {
    color: #3b82f6;
    width: 20px;
    text-align: center;
}

.instructorQuote {
    position: relative;
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #3b82f6;
}

.quoteIcon {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    background: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.instructorQuote blockquote {
    font-size: 1.2rem;
    line-height: 1.6;
    font-style: italic;
    color: #374151;
    margin: 0;
    padding-left: 60px;
}

/* ===========================================
   STUDENT SUCCESS STORIES
   =========================================== */

.studentSuccessStories {
    padding: 80px 0;
    background: #ffffff;
}

.storiesContainer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.successCards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

.successCard {
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
}

.successCard:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.studentQuote {
    margin-bottom: 25px;
    position: relative;
}

.studentQuote p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #374151;
    font-style: italic;
    margin: 0;
}

.studentQuote::before {
    content: '"';
    position: absolute;
    top: -15px;
    left: -5px;
    font-size: 3rem;
    color: #3b82f6;
    opacity: 0.3;
    font-weight: 700;
}

.studentInfo {
    padding-top: 25px;
    border-top: 1px solid #e2e8f0;
}

.studentName {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.studentRole {
    color: #64748b;
    margin-bottom: 10px;
    font-weight: 500;
}

.careerJump {
    display: inline-block;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
}

/* ===========================================
   PROGRAM DETAILS
   =========================================== */

.programDetails {
    padding: 80px 0;
    background: #f8fafc;
}

.detailsContainer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.detailsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.detailCard {
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    text-align: center;
}

.detailCard:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: #3b82f6;
}

.detailIcon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.detailIcon i {
    font-size: 24px;
    color: white;
}

.detailTitle {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 20px;
}

.detailList {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.detailList li {
    padding: 10px 0;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.detailList li:last-child {
    border-bottom: none;
}

.detailList li::before {
    content: '✓';
    color: #10b981;
    font-weight: 600;
    width: 16px;
}

/* ===========================================
   CODE SNIPPET OVERLAY
   =========================================== */

.codeSnippet {
    background: #1e293b;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.codeHeader {
    background: #334155;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #475569;
}

.codeLang {
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.codeDots {
    display: flex;
    gap: 6px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot.red { background: #ef4444; }
.dot.yellow { background: #f59e0b; }
.dot.green { background: #10b981; }

.codeBody {
    padding: 16px;
}

.codeBody code {
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.4;
    display: block;
}

/* ===========================================
   METRIC BOX COMPONENT
   =========================================== */

.metricBox {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.95);
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 15px;
}

.metricIcon {
    width: 40px;
    height: 40px;
    background: #3b82f6;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.metricIcon i {
    font-size: 16px;
}

/* ===========================================
   NETWORK NODES
   =========================================== */

.networkNodes {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.networkNodes .node {
    width: 30px;
    height: 30px;
    background: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
}

.networkText {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
    text-align: center;
}

/* ===========================================
   STORY SPECIFIC STYLES
   =========================================== */

.storyHeader {
    margin-bottom: 15px;
}

.storyName {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 5px;
}

.storyTransition {
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
}

.storyContent {
    margin-top: 15px;
}

.storyText {
    color: #374151;
    line-height: 1.6;
    margin-bottom: 15px;
    font-style: italic;
}

.storyMetrics {
    display: flex;
    gap: 15px;
    font-size: 12px;
}

.storyMetrics .metric {
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 12px;
    color: #475569;
    font-weight: 600;
}

/* ===========================================
   GUARANTEE CARD MODIFIER
   =========================================== */

.guaranteeCard.main {
    grid-column: 1 / -1;
    max-width: 800px;
    margin: 0 auto;
}

/* ===========================================
   RESPONSIVE ADJUSTMENTS
   =========================================== */

@media (max-width: 1024px) {
    .spotlightContent {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .instructorInfo {
        padding-right: 0;
        text-align: center;
    }
    
    .detailsGrid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .successCards {
        grid-template-columns: 1fr;
    }
    
    .spotlightTitle {
        font-size: 2rem;
    }
    
    .instructorName {
        font-size: 1.5rem;
    }
    
    .instructorQuote blockquote {
        font-size: 1.1rem;
        padding-left: 0;
    }
    
    .quoteIcon {
        position: relative;
        margin-bottom: 15px;
    }
    
    .instructorCredentials {
        align-items: center;
    }
    
    .detailCard {
        padding: 25px 20px;
    }
    
    .metricBox {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .networkNodes {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .studentQuote::before {
        display: none;
    }
    
    .codeBody code {
        font-size: 11px;
    }
    
    .storyMetrics {
        flex-direction: column;
        gap: 8px;
    }
}


/* ===========================================
   DEEP LEARNING PAGE - MISSING STYLES
   =========================================== */

/* Phase Project Styles */
.phaseProject {
    margin-top: 20px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border-radius: 12px;
    border-left: 4px solid #10b981;
    font-size: 14px;
}

.phaseProject strong {
    color: #059669;
    font-weight: 700;
}

/* Phase Content Additional Styles */
.phaseContent {
    padding-top: 20px;
}

.phaseContent p {
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Advanced Timeline Enhancements */
.advancedTimeline {
    position: relative;
    padding: 40px 0;
}

.timelineTrack {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

/* Career Outcomes Section */
.careerOutcomes {
    padding: 80px 0;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.careerOutcomes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 200"><path d="M0,100 C300,50 500,150 1000,100 L1000,0 L0,0 Z" fill="rgba(59,130,246,0.1)"/></svg>') no-repeat top center;
    background-size: cover;
}

.outcomesContainer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.careerOutcomes .sectionTitle {
    color: white;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.careerOutcomes .sectionSubtitle {
    color: rgba(255, 255, 255, 0.9);
}

/* Outcomes Grid */
.outcomesGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.outcomeCard {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 40px 30px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.outcomeCard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, #10b981, #059669);
}

.outcomeCard:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.15);
}

.outcomeStats {
    margin-bottom: 20px;
}

.outcomeNumber {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    color: #10b981;
    margin-bottom: 5px;
    text-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.outcomeLabel {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    margin-bottom: 15px;
}

.outcomeDescription {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    font-size: 14px;
}

/* Companies Section Enhancement */
.companiesSection {
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.companiesTitle {
    font-size: 1.8rem;
    font-weight: 700;
    color: white;
    margin-bottom: 30px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.companiesList {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.companyItem {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 15px 25px;
    border-radius: 25px;
    font-weight: 600;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    font-size: 14px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.companyItem:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
}

/* Advanced Features Section Enhancement */
.advancedFeatures {
    padding: 80px 0;
    background: white;
    position: relative;
}

.featuresContainer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.featuresGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.featureCard {
    background: white;
    padding: 35px 30px;
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.featureCard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.featureCard:hover::before {
    transform: scaleX(1);
}

.featureCard:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-color: #3b82f6;
}

.featureIcon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    color: white;
    font-size: 28px;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
}

.featureCard:hover .featureIcon {
    transform: scale(1.1) rotateY(10deg);
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.4);
}

.featureTitle {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.featureCard:hover .featureTitle {
    color: #3b82f6;
}

.featureDescription {
    color: #64748b;
    line-height: 1.7;
    font-size: 15px;
}

/* Enhanced Price Card for Advanced Level */
.priceCard.advanced {
    position: relative;
    overflow: hidden;
}

.priceCard.advanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.priceCard.advanced .priceTitle {
    color: #1e293b;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Floating Elements Animation */
@keyframes floatUp {
    0% {
        transform: translateY(0px);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-10px);
        opacity: 1;
    }
    100% {
        transform: translateY(0px);
        opacity: 0.7;
    }
}

.outcomeCard:nth-child(1) {
    animation: floatUp 6s ease-in-out infinite;
}

.outcomeCard:nth-child(2) {
    animation: floatUp 6s ease-in-out infinite;
    animation-delay: 2s;
}

.outcomeCard:nth-child(3) {
    animation: floatUp 6s ease-in-out infinite;
    animation-delay: 4s;
}

/* Enhanced Mobile Responsiveness */
@media (max-width: 1024px) {
    .outcomesGrid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 25px;
    }
    
    .companiesList {
        gap: 15px;
    }
    
    .companyItem {
        padding: 12px 20px;
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .careerOutcomes {
        padding: 60px 0;
    }
    
    .outcomeNumber {
        font-size: 2.5rem;
    }
    
    .outcomeLabel {
        font-size: 1rem;
    }
    
    .companiesTitle {
        font-size: 1.5rem;
    }
    
    .companiesList {
        gap: 12px;
    }
    
    .companyItem {
        padding: 10px 16px;
        font-size: 12px;
    }
    
    .featuresGrid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .featureCard {
        padding: 30px 25px;
    }
    
    .featureIcon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }
    
    .phaseProject {
        padding: 12px 16px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .outcomeCard {
        padding: 30px 20px;
    }
    
    .outcomeNumber {
        font-size: 2rem;
    }
    
    .companiesSection {
        padding-top: 30px;
    }
    
    .companiesList {
        flex-direction: column;
        gap: 10px;
    }
    
    .companyItem {
        width: 100%;
        max-width: 200px;
        text-align: center;
    }
    
    .featureTitle {
        font-size: 1.2rem;
    }
    
    .featureDescription {
        font-size: 14px;
    }
}

/* Print Styles */
@media print {
    .careerOutcomes {
        background: white !important;
        color: black !important;
    }
    
    .careerOutcomes .sectionTitle,
    .careerOutcomes .sectionSubtitle,
    .companiesTitle {
        color: black !important;
        background: none !important;
        -webkit-text-fill-color: black !important;
    }
    
    .outcomeCard {
        background: white !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }
    
    .outcomeNumber {
        color: #3b82f6 !important;
        text-shadow: none !important;
    }
    
    .outcomeLabel,
    .outcomeDescription {
        color: black !important;
    }
    
    .companyItem {
        background: #f5f5f5 !important;
        color: black !important;
        border: 1px solid #ccc !important;
        backdrop-filter: none !important;
        text-shadow: none !important;
    }
}

/* Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
    .outcomeCard:nth-child(1),
    .outcomeCard:nth-child(2),
    .outcomeCard:nth-child(3) {
        animation: none;
    }
    
    .featureCard:hover .featureIcon {
        transform: scale(1.05);
    }
    
    .outcomeCard:hover {
        transform: translateY(-5px);
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .outcomeCard,
    .featureCard {
        border-width: 2px;
        border-color: #000;
    }
    
    .outcomeNumber {
        color: #000;
        text-shadow: none;
    }
    
    .featureTitle {
        color: #000;
    }
}

/* Focus Styles for Accessibility */
.featureCard:focus-within {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}