/* Import global styles and variables */
@import url("style.css");
/* Ensure page-banner styles are in style.css or copied here if they were only in contact.css */

/* --- Courses Page Specific Styles --- */

/* Inherited Page Banner Styles from style.css or contact.css */
#courses-banner {
    background: var(--bg-gradient-dark);
    color: var(--text-light);
    padding-top: calc(var(--header-height) + 60px);
    padding-bottom: 60px;
}

#courses-banner h1 { color: var(--text-light); }
#courses-banner p { color: var(--text-light-variant); }

/* Inherited Wave Divider Styles from style.css */
/* Ensure --divider-color is handled correctly via inline style in HTML */


/* --- Course Listing Section (Enhancements) --- */
#courses-listing {
    /* Uses bg-light and section-padding from style.css */
     position: relative;
    overflow: hidden;
}

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

/* Course Card Styling - Inherits from style.css (.course-card, .torch-jelly-effect) */
.course-card {
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-std), box-shadow var(--transition-std), border-color var(--transition-std);
    border-color: var(--border-color);
}

.course-card:hover {
     border-color: var(--primary-red-lighter);
}

.course-badge {
    /* Inherits basic badge styles from style.css */
     box-shadow: var(--shadow-xs);
}

.course-title-bar {
    font-size: 1.2em;
    padding: 15px 20px;
    background: linear-gradient(90deg, var(--primary-red), var(--primary-red-darker));
    border-bottom: 3px solid var(--accent-color);
    box-shadow: var(--shadow-xs) inset;
}

.course-image-container {
    height: 220px;
}
.course-image-container img {
     transition: transform var(--transition-slow); /* Keep image zoom */
}

.course-description {
     padding: 25px 25px 15px 25px; /* Adjusted bottom padding */
     margin-bottom: 0; /* Removed bottom margin */
     flex-grow: 1;
}
.course-description li {
    font-size: 1em;
    margin-bottom: 12px;
    color: var(--text-medium);
    display: flex; align-items: flex-start;
}
.course-description li i {
     color: var(--primary-red-lighter);
     margin-right: 12px;
     font-size: 1em;
     margin-top: 0.2em;
}

/* New: Course Details Section (Salary, Rating) */
.course-details {
    padding: 0 25px 20px 25px; /* Padding to match description left/right */
    border-top: 1px dashed var(--border-color); /* Subtle separator */
    margin-top: 15px; /* Space above details */
}
.detail-item {
    display: flex;
    align-items: center;
    font-size: 0.95em;
    color: var(--text-medium);
    margin-bottom: 8px; /* Space between detail lines */
    line-height: 1.4;
}
.detail-item:last-child {
    margin-bottom: 0;
}
.detail-item i {
    color: var(--primary-red-lighter);
    margin-right: 10px;
    font-size: 1.1em;
    min-width: 20px; /* Ensure consistent spacing */
    text-align: center;
}
.detail-item span {
    font-weight: 600; /* Make the value stand out */
}


.btn-course-view {
    margin: 0 25px 25px 25px;
    padding: 1em 2em;
    font-size: 0.9rem;
    background-color: var(--primary-red);
    color: var(--text-light);
    border: none;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.btn-course-view:hover {
    background-color: var(--primary-red-darker);
    transform: translateY(-3px);
     box-shadow: var(--shadow-md);
}


/* --- Expert CTA Section (Existing) --- */
#expert-cta {
    /* Uses bg-dark-red and section-padding from style.css */
    text-align: center;
     position: relative; overflow: hidden;
}
#expert-cta::before { /* Subtle background effect */
    content: '';
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at top right, rgba(255,255,255,0.05) 0%, transparent 40%);
    z-index: 0; pointer-events: none;
}
#expert-cta .section-title { color: var(--text-light); }
#expert-cta .section-subtitle { color: var(--text-light-variant); margin-bottom: 40px; }
.cta-buttons { display: flex; justify-content: center; gap: 25px; flex-wrap: wrap; }
.cta-buttons .btn { min-width: 220px; }


/* --- Ready to Reimagine Your Career Section (New) --- */
#reimagine-career {
     background-color: var(--bg-dark-red); /* Match Expert CTA */
     text-align: center;
     position: relative; overflow: hidden;
     padding: 80px 0; /* Slightly less padding if grouped */
}
#reimagine-career::before { /* Subtle background effect */
    content: '';
    position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at bottom left, rgba(255,255,255,0.05) 0%, transparent 40%);
    z-index: 0; pointer-events: none;
}
#reimagine-career .section-title { color: var(--text-light); }
#reimagine-career .section-subtitle { color: var(--text-light-variant); margin-bottom: 40px; }


/* --- AI in One Place Section (New) --- */
#ai-in-one-place {
     background-color: var(--bg-light);
     position: relative; overflow: hidden;
     padding: 100px 0; /* Standard padding */
}
.ai-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
}
.ai-feature-item {
    background-color: var(--bg-white);
    border-radius: var(--border-radius-lg);
    padding: 30px;
    text-align: center;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    transition: transform var(--transition-std), box-shadow var(--transition-std), border-color var(--transition-std);
}
.ai-feature-item:hover {
     transform: translateY(-8px);
     box-shadow: var(--shadow-lg);
     border-color: var(--primary-red-lighter);
}
.ai-icon {
    font-size: 3rem;
    color: var(--primary-red);
    margin-bottom: 20px;
}
.ai-feature-item h3 {
    font-size: 1.4em;
    color: var(--text-dark);
    margin-bottom: 12px;
}
.ai-feature-item p {
    font-size: 0.95em;
    color: var(--text-medium);
    margin-bottom: 0;
    line-height: 1.6;
}

/* --- Goals Section (New) --- */
#student-goals {
    background-color: var(--bg-dark-red);
    position: relative; overflow: hidden;
    padding: 100px 0;
}
.goals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px; /* Tighter grid */
    margin-top: 50px;
}
.goal-item {
    background-color: rgba(255,255,255,0.08);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: var(--border-radius-md);
    padding: 20px;
    display: flex;
    align-items: flex-start; /* Align items to top */
    color: var(--text-light-variant);
    border: 1px solid rgba(255,255,255,0.1);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.goal-item:hover {
     background-color: rgba(255,255,255,0.15);
     border-color: var(--primary-red-lighter);
     transform: translateY(-5px);
}
.goal-item i {
    color: var(--accent-color); /* Accent color for checkmarks */
    margin-right: 15px;
    font-size: 1.4em;
    flex-shrink: 0; /* Don't shrink icon */
    margin-top: 0.1em;
}
.goal-item p {
    font-size: 1em;
    color: var(--text-light); /* Stronger white text for goals */
    margin-bottom: 0;
    line-height: 1.6;
}


/* --- Job Assistance Section (Existing) --- */
/* Styles already defined in previous version */
#job-assistance {
    /* Uses bg-light and section-padding from style.css */
    position: relative; overflow: hidden;
}
.job-assistance-grid { /* Existing */
     display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; margin-top: 50px;
}
.job-assistance-item { /* Existing */
    background-color: var(--bg-white); border-radius: var(--border-radius-lg);
    padding: 30px; text-align: center; box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    transition: transform var(--transition-std), box-shadow var(--transition-std), border-color var(--transition-std);
}
.job-assistance-item:hover { /* Existing */
     transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--primary-red-lighter);
}
.ja-icon { /* Existing */
    font-size: 3rem; color: var(--primary-red); margin-bottom: 20px;
    display: flex; justify-content: center; align-items: center; min-height: 60px;
}
.job-assistance-item h3 { font-size: 1.4em; color: var(--text-dark); margin-bottom: 12px; } /* Existing */
.job-assistance-item p { font-size: 0.95em; color: var(--text-medium); margin-bottom: 0; line-height: 1.6; } /* Existing */
.job-assistance-note { /* Existing */
    text-align: center; margin-top: 40px; font-size: 0.9em; color: var(--text-medium);
}


/* --- AI Applications Section (New) --- */
#ai-applications {
    background-color: var(--bg-dark-red);
    position: relative; overflow: hidden;
     padding: 100px 0;
}
.applications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    margin-top: 50px;
}
.application-block {
    background-color: rgba(185, 0, 0, 0.08);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: var(--border-radius-lg);
    padding: 35px;
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-light-variant);
    transition: transform var(--transition-std), box-shadow var(--transition-std), border-color var(--transition-std);
}
.application-block:hover {
     transform: translateY(-8px);
     box-shadow: var(--shadow-lg) rgba(0,0,0,0.3);
     border-color: var(--accent-color);
}
.app-icon {
    font-size: 2.8rem;
    color: var(--primary-red-lighter);
    margin-bottom: 20px;
    text-align: center; /* Center icon in its block */
}
.application-block h3 {
    color: var(--text-light);
    font-size: 1.5em;
    margin-bottom: 20px;
    text-align: center;
}
.application-block ul {
    list-style: none;
    padding: 0;
}
.application-block ul li {
    font-size: 1em;
    margin-bottom: 10px;
    color: var(--text-light-variant);
    line-height: 1.6;
    position: relative;
    padding-left: 20px; /* Space for custom bullet */
}
.application-block ul li::before {
    content: "\2022"; /* Unicode bullet point */
    color: var(--primary-red-lighter);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    position: absolute; left: 0; top: 0;
}

/* --- Industry Facts Section (New) --- */
#industry-facts {
     background-color: var(--bg-light);
     position: relative; overflow: hidden;
      padding: 100px 0;
}
/* Inherits .stats-grid and .stat-item styles from style.css */
/* No specific overrides needed unless you want different colors/styles for THIS section */

.stat-item2 {
    text-align: center;
    padding: 25px;
    background-color: black;
    border-radius: var(--border-radius-md);
    /* Ensure transition includes transform and box-shadow */
    transition: transform var(--transition-std), box-shadow var(--transition-std), background-color var(--transition-std);
}
.stat-item2:hover {
     transform: translateY(-8px);
     box-shadow: var(--shadow-lg) rgba(0,0,0,0.3);
     border-color: var(--accent-color);
}

/* --- Subscription Plans Section (New) --- */
#pricing-plans {
    background-color: var(--bg-dark-red);
    position: relative; overflow: hidden;
    padding: 100px 0;
}
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}
.pricing-card {
    background-color: rgba(255,255,255,0.05); /* Very subtle background */
     backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: var(--text-light);
    text-align: center;
     box-shadow: var(--shadow-md) rgba(0,0,0,0.2);
     transition: transform var(--transition-std), box-shadow var(--transition-std), border-color var(--transition-std);
}
.pricing-card:hover {
     transform: translateY(-15px); /* More pronounced lift on hover */
     box-shadow: var(--shadow-xl);
     border-color: var(--primary-red-lighter);
     background-color: rgba(255,255,255,0.08);
}

.pricing-card.highlighted {
    background-color: rgba(215, 38, 61, 0.15); /* Light red tint */
    border-color: var(--primary-red); /* Stronger border */
     transform: translateY(-10px); /* Start slightly lifted */
     box-shadow: var(--shadow-lg) rgba(215, 38, 61, 0.4); /* Red shadow */
     position: relative; z-index: 2; /* Bring highlighted card forward */
}
.pricing-card.highlighted:hover {
     transform: translateY(-20px); /* Even more lift on hover */
     box-shadow: var(--shadow-xl) rgba(215, 38, 61, 0.6);
}

.plan-header {
    padding: 30px 20px 20px 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%); /* Subtle gradient */
}
.pricing-card.highlighted .plan-header {
     background: linear-gradient(180deg, rgba(215, 38, 61, 0.1) 0%, rgba(215, 38, 61, 0.05) 100%);
}

.plan-header h3 {
    color: var(--text-light);
    font-size: 1.8em; /* Larger plan name */
    margin-bottom: 5px;
}
.plan-subtitle {
    font-size: 1em;
    color: var(--text-light-variant);
}

.plan-features {
    padding: 20px 20px 30px 20px;
    flex-grow: 1; /* Allow features list to push CTA down */
}
.plan-features ul {
    list-style: none;
    padding: 0;
    text-align: left; /* Align list items left */
}
.plan-features ul li {
    font-size: 1em;
    color: var(--text-light-variant);
    margin-bottom: 10px;
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
}
.plan-features ul li i {
    color: var(--primary-red-lighter); /* Red checkmarks */
    margin-right: 10px;
    font-size: 1.1em;
    flex-shrink: 0;
    margin-top: 0.1em;
}

.plan-cta {
    padding: 20px 30px 30px 30px;
    border-top: 1px dashed rgba(255,255,255,0.1); /* Subtle divider */
}
.plan-price {
    font-size: 0.9em;
    color: var(--text-light-variant);
    margin-bottom: 5px;
}
.price-value {
    font-size: 2.2em; /* Large price */
    font-weight: 800;
    color: var(--accent-color); /* Accent color for price */
    margin-bottom: 20px;
    line-height: 1;
}
.pricing-card.highlighted .price-value {
     color: var(--bg-white); /* White price for highlighted card */
}


/* Ensure buttons within pricing cards match plan style */
.pricing-card .btn-secondary {
     color: var(--accent-color); /* Accent color */
     border-color: var(--accent-color);
     background-color: transparent;
}
.pricing-card .btn-secondary:hover {
     background-color: var(--accent-color);
     color: var(--bg-darker-gray);
     border-color: var(--accent-color);
}
.pricing-card.highlighted .btn-primary {
     background-color: var(--accent-color); /* Accent color for highlight button */
     border-color: var(--accent-color);
     color: var(--bg-dark-red); /* Dark red text on accent */
     box-shadow: var(--shadow-md) rgba(var(--accent-color), 0.5);
}
.pricing-card.highlighted .btn-primary:hover {
     background-color: var(--accent-color);
     border-color: var(--accent-color);
     color: var(--bg-dark-red);
     box-shadow: var(--shadow-lg) rgba(var(--accent-color), 0.7);
}


/* Footer (Inherited) */


/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    /* Inherits general mobile styles */

    #courses-banner { padding-top: calc(var(--header-height) + 40px); padding-bottom: 40px; }
     #courses-banner h1 { font-size: clamp(2em, 4vw, 2.8em); }
     #courses-banner p { font-size: clamp(1em, 2vw, 1.1em); }

    #courses-listing { padding: 80px 0; }
    .courses-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 30px; margin-top: 40px;
    }
    .course-card:hover { transform: translateY(-5px); }
     .course-image-container { height: 200px; }
     .course-title-bar { font-size: 1.1em; padding: 12px 15px; }
     .course-description { padding: 20px 20px 15px 20px; }
     .course-description li { font-size: 0.95em; margin-bottom: 10px; }
    .course-details { padding: 0 20px 20px 20px; } /* Adjusted padding */
     .detail-item { font-size: 0.9em;}
     .btn-course-view { margin: 0 20px 20px 20px; padding: 0.9em 1.8em; }


    #expert-cta { padding: 80px 0; }
    #reimagine-career { padding: 60px 0; } /* Reduce padding */
    .cta-buttons .btn { min-width: unset; width: 200px; }


    #ai-in-one-place { padding: 80px 0; }
    .ai-features-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 25px; margin-top: 40px; }
    .ai-feature-item { padding: 25px; }
    .ai-icon { font-size: 2.5rem; margin-bottom: 15px; }
    .ai-feature-item h3 { font-size: 1.3em; }
    .ai-feature-item p { font-size: 0.9em; }


    #student-goals { padding: 80px 0; }
    .goals-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin-top: 40px; }
    .goal-item { padding: 15px; }
    .goal-item i { font-size: 1.2em; margin-right: 10px; }
    .goal-item p { font-size: 0.95em; }


    #job-assistance { padding: 80px 0; } /* Existing adjustments */


    #ai-applications { padding: 80px 0; }
    .applications-grid { grid-template-columns: 1fr; gap: 30px; margin-top: 40px; }
    .application-block { padding: 30px; }
    .app-icon { font-size: 2.2rem; margin-bottom: 15px; }
    .application-block h3 { font-size: 1.3em; margin-bottom: 15px; }
     .application-block ul li { font-size: 0.95em; margin-bottom: 8px;}


    #industry-facts { padding: 80px 0; } /* Existing adjustments */
    .stats-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 40px;}


    #pricing-plans { padding: 80px 0; }
    .pricing-grid { grid-template-columns: 1fr; gap: 30px; margin-top: 40px;}
    .pricing-card { max-width: 400px; margin: 0 auto;} /* Center stacked cards */
     .pricing-card.highlighted { transform: translateY(-8px); } /* Reduce initial lift */
     .pricing-card:hover { transform: translateY(-10px); } /* Reduce hover lift */
     .pricing-card.highlighted:hover { transform: translateY(-15px); } /* Reduce highlighted hover lift */
    .plan-header { padding: 25px 20px 15px 20px; }
    .plan-header h3 { font-size: 1.6em; }
    .plan-subtitle { font-size: 0.95em; }
    .plan-features { padding: 15px 20px 20px 20px; }
    .plan-features ul li { font-size: 0.95em; }
    .plan-cta { padding: 20px 25px 25px 25px; }
    .price-value { font-size: 2em; }
    .pricing-card .btn { padding: 0.9em 1.8em; font-size: 0.9rem;}

}

@media (max-width: 768px) {
     /* Inherits further mobile adjustments */

     #courses-banner { padding-top: calc(var(--header-height) + 30px); padding-bottom: 30px; }
     #courses-banner h1 { font-size: 1.8em; }
     #courses-banner p { font-size: 1em; max-width: 90%; }

     #courses-listing { padding: 60px 0; }
     .courses-grid { grid-template-columns: 1fr; gap: 25px; margin-top: 30px; }
      .course-card { max-width: 90%; margin: 0 auto;}
      .course-image-container { height: 180px; }
      .course-title-bar { font-size: 1.05em; padding: 10px 15px;}
     .course-description { padding: 15px 15px 10px 15px;}
     .course-description li { font-size: 0.9em; margin-bottom: 8px;}
      .course-details { padding: 0 15px 15px 15px; }
     .detail-item { font-size: 0.85em;}
     .btn-course-view { margin: 0 15px 15px 15px; padding: 0.8em 1.6em; font-size: 0.85rem;}


    #expert-cta { padding: 60px 0; }
    #reimagine-career { padding: 50px 0; }
    .cta-buttons { flex-direction: column; gap: 15px;}
    .cta-buttons .btn { width: 100%; max-width: 250px; margin: 0 auto; }


    #ai-in-one-place { padding: 60px 0; }
    .ai-features-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 30px; }
    .ai-feature-item { max-width: 400px; margin: 0 auto; padding: 20px;}
    .ai-icon { font-size: 2.2rem; margin-bottom: 10px; }
    .ai-feature-item h3 { font-size: 1.2em; }
    .ai-feature-item p { font-size: 0.85em; }


    #student-goals { padding: 60px 0; }
    .goals-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 30px; }
    .goal-item { padding: 12px; max-width: 400px; margin: 0 auto; }
    .goal-item i { font-size: 1.1em; margin-right: 12px; }
    .goal-item p { font-size: 0.9em; }


    #job-assistance { padding: 60px 0; } /* Existing adjustments */
     .job-assistance-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 30px;}
      .job-assistance-item { max-width: 400px; margin: 0 auto;}


    #ai-applications { padding: 60px 0; }
    .applications-grid { gap: 25px; margin-top: 30px; }
    .application-block { padding: 25px; max-width: 450px; margin: 0 auto;}
    .app-icon { font-size: 2rem; margin-bottom: 12px; }
    .application-block h3 { font-size: 1.2em; margin-bottom: 12px; }
     .application-block ul li { font-size: 0.9em; margin-bottom: 8px; padding-left: 18px;}
     .application-block ul li::before { width: 0.9em; margin-left: -0.9em;}


    #industry-facts { padding: 60px 0; } /* Existing adjustments */
     .stats-grid { grid-template-columns: 1fr; gap: 15px; margin-top: 30px;}


    #pricing-plans { padding: 60px 0; }
    .pricing-grid { gap: 25px; margin-top: 30px;}
    .pricing-card { max-width: 90%; margin: 0 auto;}
     .pricing-card.highlighted { transform: translateY(-5px); }
     .pricing-card:hover { transform: translateY(-8px); }
     .pricing-card.highlighted:hover { transform: translateY(-10px); }
    .plan-header { padding: 20px 15px 12px 15px;}
    .plan-header h3 { font-size: 1.4em; }
    .plan-subtitle { font-size: 0.9em; }
    .plan-features { padding: 12px 15px 15px 15px; }
    .plan-features ul li { font-size: 0.9em; margin-bottom: 8px;}
    .plan-features ul li i { font-size: 1em; margin-right: 8px;}
    .plan-cta { padding: 15px 20px 20px 20px; }
    .price-value { font-size: 1.8em; margin-bottom: 15px;}
     .pricing-card .btn { padding: 0.8em 1.6em; font-size: 0.85rem;}
}

@media (max-width: 576px) {
     /* Further fine-tuning */
      .courses-grid .course-card,
      .job-assistance-grid .job-assistance-item,
      .ai-features-grid .ai-feature-item,
      .goals-grid .goal-item,
      .applications-grid .application-block,
      .pricing-grid .pricing-card {
          max-width: 95%; /* Slightly less max-width */
      }
     .cta-buttons .btn {
          max-width: 95%;
     }
}