@import url("style.css");

/* --- AI & MACHINE LEARNING COURSE PAGE SPECIFIC STYLES --- */

/* Ensure main content has correct padding below fixed header */
main {
    padding-top: var(--header-height); /* Add padding to main content to avoid being hidden by fixed header */
}

/* Adjust root variables if needed, or ensure they are correctly defined in style.css */
:root {
    --mid-grey: #1a1a1a; /* Dark Grey */
    --light-grey: #333333; /* Darker Grey */
    --text-color-light: #E0E0E0; /* Off-White */
    --text-color-medium: #B0B0B0; /* Lighter Grey */
    /* Ensure dark-black, primary-red, accent-color are defined in style.css or fallback */
    --dark-black: #000;
    --primary-red: #D7263D; /* Your primary red */
    --primary-red-lighter: #F03A47; /* Lighter red variant */
    --primary-red-darker: #A31E2E; /* Darker red variant */
    --accent-color: #F0A07B; /* Your accent color */
    --bg-light: #f4f4f4; /* Light background */
    --bg-white: #ffffff; /* White background */
    --border-color: #e0e0e0; /* Light border */

    --background-dark: var(--dark-black);
    --card-background: var(--mid-grey); /* Dark card background */
    --card-border: var(--light-grey); /* Darker border for dark cards */
    --card-border-active: var(--primary-red);
    --card-shadow: rgba(255, 7, 58, 0.2); /* Red glow shadow */
    --card-text-color-dark: var(--text-color-light); /* Light text on dark cards */
    --card-icon-color-dark: var(--primary-red); /* Red icon on dark cards */


    /* New variables for forms */
    --form-background: var(--bg-white); /* Or use a darker background like var(--bg-light) or var(--mid-grey) */
    --form-border: var(--border-color);
    --form-input-background: var(--bg-light); /* Lighter input field background */
    --form-input-border: var(--border-color); /* Assuming light border exists in style.css */
    --form-input-text: var(--text-dark); /* Assuming text-dark exists in style.css */
    --form-input-placeholder: var(--text-medium); /* Assuming text-medium exists in style.css */
    --form-label-text: var(--text-dark); /* Assuming text-dark exists in style.css */
    --form-shadow: var(--shadow-md); /* Assuming shadow-md exists in style.css */

    --path-color-dotted: var(--light-grey);
    --path-width: 6px;
    --location-icon-color: var(--primary-red);
    --location-icon-border: var(--dark-black);
    --heading-color: var(--text-dark); /* Assuming standard headings are dark on light/white backgrounds */
    --section-title-color: var(--text-dark); /* Main section titles */

    --milestone-icon-background: var(--primary-red);
    --milestone-icon-color: var(--dark-black); /* Black icon number on red */
    --milestone-icon-border: var(--card-background);

    --end-message-background: var(--mid-grey);
    --end-message-border: var(--primary-red);
    --end-message-heading: var(--primary-red);
    --end-message-text: var(--text-color-light);
    --ai-icon-color: var(--primary-red);

    --spacing-unit: 1rem; /* Assuming spacing-unit exists in style.css */
    --container-padding-top: 5rem; /* Assuming container-padding-top exists in style.css */
    --section-padding-std: 80px; /* Standard section padding */

    /* Removed New colors for job profile cards - will use dark theme */
    /* --card-bg-yellow: #fff8e1; */
    /* --card-bg-green: #e8f5e9; */
    /* --card-bg-blue: #e3f2fd; */
    /* --card-bg-pink: #fce4ec; */
     /* Assuming border-radius-lg, xl etc and shadow-md, lg, xl exist in style.css */
     /* Assuming font-primary and font-secondary exist in style.css */
     /* Assuming transition-fast, std exist in style.css */
     /* Assuming bg-gradient-dark exists in style.css */
     /* Assuming text-dark, text-medium, text-light, text-light-variant exist in style.css */
}


/* Ensure main content has correct padding below fixed header */
main {
    padding-top: var(--header-height); /* Add padding to main content to avoid being hidden by fixed header */
}

/* Adjust padding for sections that start immediately after the header */
/* Assuming the first section is the banner, its padding-top already accounts for header */
/* main section:first-of-type { padding-top: calc(var(--header-height) + var(--section-padding-top)); } */
/* Reusing .section-padding is generally better than overriding margin-top on the first section */

/* Set distinct backgrounds for sections */
/* --- CHANGED ID --- */
#ai-ml-banner {
     /* Background and overlay are set below */
     padding-top: calc(var(--header-height) + var(--section-padding-std));
     padding-bottom: var(--section-padding-std);
     min-height: 75vh; /* Taller banner to accommodate form */
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
     /* --- CHANGED BACKGROUND IMAGE --- */
     background: linear-gradient(135deg, rgba(215, 38, 61, 0.08), rgba(240, 160, 123, 0.08)),
                 url('https://images.unsplash.com/photo-1574850338306-c123b5c9f10a?auto=format&fit=crop&w=1600&q=80'); /* Different abstract AI background */
     background-size: cover;
     background-position: center;
     color: var(--text-dark); /* Text color should be readable */
     /* text-align is now handled within .banner-content */
     z-index: 0;
}

/* Add a subtle overlay to ensure text readability */
#ai-ml-banner::before { /* --- CHANGED ID --- */
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent white overlay */
    z-index: -1; /* Behind content, above background image */
}

#ai-ml-banner .container.banner-content-wrap { /* --- CHANGED ID --- */
     display: flex; /* Use flexbox to arrange banner content and form */
     justify-content: space-between; /* Space between text and form */
     align-items: center;
     gap: 40px; /* Space between elements */
     position: relative;
     z-index: 1; /* Ensure content is above overlay */
     flex-wrap: wrap; /* Allow stacking on smaller screens */
}

#ai-ml-banner .banner-content { /* --- CHANGED ID --- */
     flex: 1 1 500px; /* Allow content to grow, basis 500px */
     max-width: 700px; /* Limit text width */
     text-align: left; /* Align text to the left */
}

#ai-ml-banner h1 { /* --- CHANGED ID --- */
    font-size: clamp(2.8em, 5vw, 4.5em); /* Larger title */
    margin-bottom: 15px;
    font-weight: 900; /* Bolder */
    color: var(--text-dark);
    text-shadow: var(--shadow-xs); /* Subtle text shadow */
     font-family: var(--font-primary); /* Explicitly ensure primary font */
     line-height: 1.3; /* Ensure consistency */
}

#ai-ml-banner p { /* --- CHANGED ID --- */
    font-size: clamp(1.1em, 1.8vw, 1.2em); /* Larger subtitle */
    max-width: 900px; /* Wider subtitle */
    margin-bottom: 30px; /* More space below subtitle */
    color: var(--text-medium);
    line-height: 1.6;
     font-family: var(--font-secondary); /* Explicitly ensure secondary font */
}
/* Add styles for the new button group */
#ai-ml-banner .banner-cta-group { /* --- CHANGED ID --- */
    display: flex; /* Arrange buttons side-by-side */
    justify-content: flex-start; /* Align buttons to the left */
    gap: 20px; /* Space between buttons */
    margin-top: 0; /* Space above the buttons */
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

#ai-ml-banner .banner-cta-group .btn { /* --- CHANGED ID --- */
     margin-top: 0; /* Remove margin added by general .btn rule if present */
     min-width: 180px; /* Give buttons a minimum width */
}


/* --- Free Demo Form Styles (IDs are unique in HTML, classes are generic) --- */
.demo-form-container {
     flex: 0 0 350px; /* Fix width for the form container */
     max-width: 100%; /* Ensure it doesn't overflow on small screens */
     margin-left: auto; /* Push form to the right */
     position: relative;
     z-index: 2; /* Ensure form is above other banner elements */
}

.demo-form-card {
     background-color: var(--form-background); /* White background for the form */
     padding: 30px; /* Padding inside the form card */
     border-radius: var(--border-radius-lg); /* Rounded corners */
     box-shadow: var(--form-shadow); /* Shadow */
     border-top: 5px solid var(--primary-red); /* Highlight border top */
}

.demo-form-card h3 {
     font-size: 1.5rem;
     color: var(--heading-color);
     margin-top: 0;
     margin-bottom: 20px;
     text-align: center;
     font-family: var(--font-primary);
     font-weight: 700;
     line-height: 1.3;
}

.demo-form-card .form-group {
     margin-bottom: 15px;
}

.demo-form-card label {
     display: block;
     margin-bottom: 5px;
     font-size: 0.95rem;
     color: var(--form-label-text);
     font-weight: 600;
     font-family: var(--font-secondary);
}

.demo-form-card input[type="text"],
.demo-form-card input[type="email"],
.demo-form-card input[type="tel"] {
     width: 100%; /* Full width inputs */
     padding: 12px 15px; /* Padding inside inputs */
     border: 1px solid var(--form-input-border);
     border-radius: var(--border-radius-sm);
     font-size: 1rem;
     color: var(--form-input-text);
     background-color: var(--form-input-background);
     transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
     font-family: var(--font-secondary);
}

.demo-form-card input::placeholder {
     color: var(--form-input-placeholder);
     opacity: 0.8;
}

.demo-form-card input:focus {
     outline: none;
     border-color: var(--primary-red-lighter);
     box-shadow: 0 0 5px rgba(215, 38, 61, 0.3);
}

.demo-form-card button[type="submit"] {
     width: 100%; /* Full width button */
     margin-top: 10px; /* Space above button */
}
/* End Free Demo Form Styles */


/* Section Backgrounds */
/* --- CHANGED ID --- */
#ai-ml-features { background-color: var(--bg-light); padding: var(--section-padding-std) 0; }
#course-overview { background-color: var(--bg-white); padding-bottom: var(--section-padding-std); }
#course-types { background: linear-gradient(180deg, var(--bg-light) 0%, var(--bg-white) 100%); padding: var(--section-padding-std) 0; }
/* --- CHANGED ID --- */
#ai-ml-career { background-color: var(--bg-light); padding: var(--section-padding-std) 0;} /* Career Section Background */
/* --- CHANGED ID --- */
#ai-ml-job-profiles { background-color: var(--dark-black); padding: var(--section-padding-std) 0;} /* NEW Job Profiles Section Background (Dark) - Keep dark like DS page */
#why-great-choice { /* Background image, attachment fixed, overlay from style.css's .who-can-join-section logic */
     position: relative;
     /* Keep or change image for this section - keeping the same as DS for visual consistency */
     background-image: url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     z-index: 0;
     padding: var(--section-padding-std) 0;
}
/* The overlay is defined in style.css under .who-can-join-overlay */
#course-curriculum { background-color: var(--bg-white); padding: var(--section-padding-std) 0;}
#contact-counselor { background: var(--bg-gradient-dark); padding: var(--section-padding-std) 0;} /* Dark gradient from style.css */
#course-faq { background: linear-gradient(0deg, var(--bg-light) 0%, var(--bg-white) 100%); padding: var(--section-padding-std) 0;} /* Subtle gradient, inverted */


/* Ensure consistent bottom margins for sections (already handled by section-padding) */
/* Specific adjustments might be needed based on content flow */

/* --- General Section Title & Subtitle Styles (if not already in style.css) --- */
.section-title {
     font-size: clamp(2em, 4vw, 3em);
     font-weight: 800;
     text-align: center;
     margin-bottom: 15px;
     color: var(--section-title-color);
     font-family: var(--font-primary);
     line-height: 1.3;
}
.section-subtitle {
     font-size: clamp(1em, 1.8vw, 1.1em);
     text-align: center;
     max-width: 800px;
     margin: 0 auto 60px auto;
     color: var(--text-medium);
     line-height: 1.6;
     font-family: var(--font-secondary);
}
.section-title .highlight-red,
.section-subtitle .highlight-red {
    color: var(--primary-red);
}
.section-title.text-light,
.section-subtitle.text-light-variant {
     color: var(--text-color-light);
}
.section-title .highlight-white,
.section-subtitle .highlight-white {
    color: var(--text-light);
}


/* --- Key Course Features (#ai-ml-features) --- */
/* Reusing unique-features-grid and unique-feature-card from style.css */
/* Adding some specific styling overrides */
/* --- CHANGED ID --- */
#ai-ml-features .unique-feature-card {
    display: flex; /* Ensure flex layout */
    align-items: flex-start;
    gap: 20px;
    padding: 30px; /* More padding */
    background-color: var(--bg-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-std), box-shadow var(--transition-std), border-color var(--transition-fast);
    border: 1px solid var(--border-color); /* Add border */
}
/* --- CHANGED ID --- */
#ai-ml-features .unique-feature-card:hover {
    border-color: var(--primary-red-lighter); /* Highlight border on hover */
}

/* --- CHANGED ID --- */
#ai-ml-features .unique-feature-icon {
    font-size: 2.5rem; /* Larger icons */
    color: var(--primary-red);
    background-color: rgba(215, 38, 61, 0.15); /* More prominent background */
    padding: 18px; /* Larger padding */
    border-radius: 50%;
    min-width: 70px; /* Larger size */
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
/* --- CHANGED ID --- */
#ai-ml-features .unique-feature-content h3 {
    font-size: 1.35rem; /* Larger heading */
    color: var(--text-dark);
    margin-bottom: 10px;
    font-family: var(--font-primary);
    font-weight: 700;
     line-height: 1.3;
}
/* --- CHANGED ID --- */
#ai-ml-features .unique-feature-content p {
    font-size: 1rem; /* Slightly larger text */
    color: var(--text-medium);
    margin-bottom: 0;
    font-family: var(--font-secondary);
     line-height: 1.7;
}


/* --- Course Overview Section (#course-overview) --- */
#course-overview .overview-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Image | Text */
    gap: 80px; /* More gap */
    align-items: center;
    margin-top: 60px; /* More space below subtitle */
}

#course-overview .overview-text h3 {
    color: var(--primary-red);
    margin-bottom: 20px; /* More space below sub-heading */
    font-size: clamp(1.8em, 3.5vw, 2.4em); /* Larger sub-heading */
    font-weight: 700;
    font-family: var(--font-primary);
    line-height: 1.3;
}
#course-overview .overview-text p {
     margin-bottom: 1.2em; /* Ensure paragraph margin */
     font-size: 1.05rem;
     line-height: 1.7;
     font-family: var(--font-secondary);
     color: var(--text-medium);
}
#course-overview .overview-text ul {
     list-style: none;
     padding-left: 0;
     margin-top: 25px; /* More space above list */
}
#course-overview .overview-text ul li {
     margin-bottom: 12px; /* More space between list items */
     font-size: 1rem;
     color: var(--text-medium);
     display: flex;
     align-items: flex-start;
     font-family: var(--font-secondary);
     line-height: 1.6;
}
#course-overview .overview-text ul li i {
     color: var(--primary-red); /* Stronger checkmark color */
     margin-right: 12px; /* More space */
     margin-top: 6px; /* Adjust alignment */
     font-size: 1em;
}

#course-overview .overview-image-container {
    position: relative;
    /* Add a subtle background shape or element */
}

#course-overview .overview-image-container::before {
    content: '';
    position: absolute;
    bottom: -20px; right: -20px; /* Position relative to container */
    width: 150px; height: 150px;
    background-color: var(--primary-red-lighter);
    opacity: 0.2;
    border-radius: var(--border-radius-lg);
    z-index: 0; /* Behind image */
    animation: floatShape 6s infinite ease-in-out alternate;
}
/* Keyframes inherited from style.css */
/* @keyframes floatShape {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-20px) rotate(10deg); }
} */


#course-overview .overview-image-container img {
    position: relative; /* Ensure image is above ::before pseudo-element */
    z-index: 1;
    border-radius: var(--border-radius-xl); /* Larger radius */
    box-shadow: var(--shadow-xl); /* Stronger shadow */
    /* JS will handle translateY animation based on scroll */
    transition: transform var(--transition-std), box-shadow var(--transition-std); /* Keep CSS transition for hover */
}
/* Hover effect also applies from style.css */


/* --- AI & Machine Learning Roadmap Section Styles --- */
.roadmap-container {
    position: relative;
    width: 90%;
    max-width: 900px; /* Slightly smaller max-width */
    margin: 0 auto;
    padding-top: var(--container-padding-top);
    min-height: 1600px; /* Adjust min-height based on milestone positioning */
    padding-bottom: 5rem;
    /* Ensure background is appropriate for dark elements */
    background-color: var(--background-dark); /* Use dark background */
    overflow: hidden; /* Hide parts of SVG/milestones outside */
}

.roadmap-container h1 {
    text-align: center;
    color: var(--heading-color);
    margin-bottom: 3rem;
    font-size: 2.8em;
    font-weight: 700;
    text-shadow: 0 0 5px var(--primary-red); /* Glowing text shadow */
    position: relative;
    z-index: 3;
    font-family: var(--font-primary);
    line-height: 1.3;
    color: var(--text-color-light); /* Use light color on dark background */
}

.milestones-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.milestone {
    position: absolute;
    pointer-events: auto;
    background-color: var(--card-background); /* Dark background */
    border: 1px solid var(--card-border); /* Dark border */
    border-radius: 2px; /* Very sharp corners */
    padding: 1.5rem;
    width: 250px; /* Smaller width */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); /* Darker shadow */
    text-align: center;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, opacity 0.6s ease-out, transform 0.6s ease-out;
    z-index: 2;
    cursor: pointer;
    color: var(--text-color-medium); /* Lighter grey text */
     /* Set initial state for JS visibility animation */
     opacity: 0;
     transform: translateY(20px);
}

/* Milestone visibility state handled by JS adding/removing .milestone-visible */
.milestone.milestone-visible {
    opacity: 1;
    transform: translateY(0);
}


.milestone.active {
    border-color: var(--card-border-active); /* Red border */
    box-shadow: 0 0 15px var(--card-shadow); /* Red glow */
}

.milestone:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 0 20px var(--card-shadow); /* More red glow on hover */
}

/* Positioning - Cyber Grid (Alternating) - Adjusted top values slightly if needed for new content heights */
/* Keeping the original top values for now, assuming content fits similarly */
.milestone[data-milestone-index="0"] { top: 120px; left: 10%; }
.milestone[data-milestone-index="1"] { top: 350px; right: 10%; }
.milestone[data-milestone-index="2"] { top: 580px; left: 12%; }
.milestone[data-milestone-index="3"] { top: 810px; right: 12%; }
.milestone[data-milestone-index="4"] { top: 1040px; left: 15%; }
.milestone[data-milestone-index="5"] { top: 1270px; right: 15%; }


.milestone-icon {
    width: 40px; /* Smaller icon */
    height: 40px;
    background-color: var(--milestone-icon-background); /* Red background */
    color: var(--milestone-icon-color); /* Black number */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.1em;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    border: 3px solid var(--milestone-icon-border); /* Dark border */
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    z-index: 3;
}


.milestone h3 {
    margin-top: 1rem;
    color: var(--heading-color); /* Light heading color */
    font-size: 1.2em;
    margin-bottom: 0.5rem;
    font-weight: 700;
     font-family: var(--font-primary);
     line-height: 1.3;
     color: var(--card-text-color-dark);
}

.milestone p {
    color: var(--text-color-medium); /* Lighter grey text */
    font-size: 0.9em;
    margin: 0;
     font-family: var(--font-secondary);
     line-height: 1.7;
}

/* SVG Styles */
.roadmap-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Height is set dynamically by JS based on container scrollHeight */
    pointer-events: none;
    z-index: 1;
    overflow: visible;
     /* Ensure smooth transition for path drawing */
     transition: stroke-dashoffset 0.8s ease-out; /* Keep CSS transition for path */
}

.journey-path-dotted {
    fill: none;
    stroke: var(--path-color-dotted); /* Darker grey dotted path */
    stroke-width: var(--path-width);
    stroke-dasharray: 8 8;
    stroke-linecap: round;
    pointer-events: none; /* Ensure clicks pass through */
}

.journey-path-filled {
    fill: none;
    /* stroke color is set dynamically or via url(#gradient) in JS */
    stroke-width: var(--path-width);
    stroke-dasharray: 0; /* Initial state before JS */
    stroke-linecap: round;
    /* Transition handled by JS animation loop, but CSS transition can act as fallback */
    transition: stroke-dashoffset 0.08s linear; /* Keep CSS transition for animation frame updates */
    pointer-events: none; /* Ensure clicks pass through */
}

/* Location Icon Styles */
.location-icon {
    fill: var(--location-icon-color); /* Red fill */
    stroke: var(--location-icon-border); /* Black border */
    stroke-width: 4;
    r: 14; /* Radius - matches CSS initially */
    filter: drop-shadow(0 0 8px var(--primary-red)); /* Intense red glow */
    /* Transition handled by JS animation loop, but CSS transition can act as fallback */
    transition: cx 0.08s linear, cy 0.08s linear; /* Keep CSS transition for animation frame updates */
    z-index: 3;
    pointer-events: none; /* Ensure clicks pass through */
}


/* Beautiful AI Message at the End */
.ai-end-message {
    text-align: center;
    margin-top: 5rem;
    margin-bottom: 4rem;
    padding: 2.5rem;
    background-color: var(--mid-grey); /* Dark background */
    border: 2px solid var(--end-message-border); /* Red border */
    border-radius: 4px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0 20px rgba(255, 7, 58, 0.3); /* Red glow shadow */
    position: relative;
    z-index: 4;
    overflow: hidden;
    color: var(--end-message-text); /* Light text */
     /* Set initial state for JS visibility animation */
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Transition for JS animation */
    pointer-events: none; /* Initially not interactive */
}

/* Visible state handled by JS adding/removing .ai-end-message-hidden */
.ai-end-message:not(.ai-end-message-hidden) {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto; /* Make interactive when visible */
    transition: opacity 1s ease-out, transform 1s ease-out;
}


.ai-end-message h2 {
    color: var(--end-message-heading); /* Red heading */
    font-size: 1.8em;
    margin-bottom: 1rem;
    font-weight: 700;
    text-shadow: 0 0 5px rgba(255, 7, 58, 0.5); /* Red glow text shadow */
    position: relative;
    z-index: 1;
    font-family: var(--font-primary);
    line-height: 1.3;
}

.ai-end-message p {
    color: var(--text-color-medium); /* Lighter grey text */
    font-size: 0.95em;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
     font-family: var(--font-secondary);
}

.ai-icon {
    width: 45px;
    height: 45px;
    color: var(--ai-icon-color); /* Red icon */
    opacity: 0.8;
    filter: drop-shadow(0 0 5px var(--primary-red)); /* Red glow filter */
    position: relative;
    z-index: 1;
}
/* End Roadmap/AI Section Styles */


/* --- Course Types/Scheduling Section (#course-types) --- */
.course-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Slightly wider min */
    gap: 40px; /* More gap */
    margin-top: 60px;
}
.data-science-type-card { /* Specific class used for DS course types, re-using for AI/ML types */
    text-align: center;
    padding: 40px 30px; /* More vertical padding */
    background-color: var(--bg-white);
    border-radius: var(--border-radius-xl); /* Larger radius */
    box-shadow: var(--shadow-lg); /* Stronger shadow */
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none; /* Remove default border */
    /* Includes unified hover/torch effects from style.css */
}
/* Add a subtle gradient border effect on hover */
/* Using .is-visible only works if you have JS adding that class */
/* Let's apply hover effect directly */
.data-science-type-card:hover {
    border: 3px solid transparent; /* Allocate space for the border */
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(var(--bg-white), var(--bg-white)), linear-gradient(45deg, var(--primary-red-lighter), var(--accent-color));
    box-shadow: var(--shadow-xl); /* Make shadow larger on hover */
}


.data-science-type-card .type-icon {
    font-size: 3.5rem; /* Larger icons */
    color: var(--primary-red);
    margin-bottom: 25px; /* More space */
    background-color: rgba(215, 38, 61, 0.1);
    padding: 20px;
    border-radius: 50%;
}
.data-science-type-card h4 {
    color: var(--text-dark);
    font-size: 1.4rem; /* Larger heading */
    margin-bottom: 15px;
    font-family: var(--font-primary);
    font-weight: 600;
    line-height: 1.3;
}
.data-science-type-card p {
    font-size: 1rem;
    color: var(--text-medium);
    flex-grow: 1;
    margin-bottom: 25px; /* More space before list */
    font-family: var(--font-secondary);
    line-height: 1.7;
}
.data-science-type-card ul {
    list-style: none;
    padding: 0 20px; /* Add horizontal padding to list */
    margin-bottom: 30px; /* More space after list */
    text-align: left;
    width: 100%;
}
.data-science-type-card ul li {
    font-size: 0.95rem;
    color: var(--text-medium);
    margin-bottom: 10px;
     display: flex;
     align-items: flex-start;
     font-family: var(--font-secondary);
     line-height: 1.6;
}
.data-science-type-card ul li i {
    color: var(--primary-red-lighter);
    margin-right: 10px;
    margin-top: 4px;
    font-size: 0.9em;
}
.data-science-type-card .btn {
    font-size: 0.9rem;
    padding: 0.8em 2em;
    margin-top: auto; /* Push button to the bottom */
}


/* --- AI & Machine Learning Career Section (#ai-ml-career) --- */
/* --- CHANGED ID --- */
#ai-ml-career {
    /* Background set above */
}

/* Modified to use Flexbox for centering last row */
.career-points-grid.career-center-last {
    display: flex; /* Use flexbox */
    flex-wrap: wrap; /* Allow items to wrap */
    justify-content: center; /* Center items on the main axis */
    gap: 30px; /* Space between items */
    margin-top: 60px;
}

.career-points-grid.career-center-last .career-card {
    /* Reset flex properties that might conflict if card had display: flex */
    display: flex; /* Keep flex for inner layout */
    flex-direction: column;
    align-items: center;
    text-align: center;

    /* Define basis and grow properties for items within the flex container */
    flex-basis: 300px; /* Set a preferred width */
    flex-grow: 0; /* Prevent items from growing and filling the space */
    flex-shrink: 0; /* Prevent items from shrinking below basis */

    background-color: var(--bg-white);
    padding: 30px;
    border-radius: var(--border-radius-lg);
    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-fast);
}

.career-points-grid.career-center-last .career-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-red-lighter);
    box-shadow: var(--shadow-lg);
}

.career-points-grid.career-center-last .career-icon {
    font-size: 3rem; /* Larger icons */
    color: var(--primary-red);
    margin-bottom: 15px; /* Space below icon */
    background-color: rgba(215, 38, 61, 0.1);
    padding: 18px;
    border-radius: 50%;
    min-width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.career-points-grid.career-center-last .career-card h4 {
    font-size: 1.3rem;
    color: var(--text-dark);
    margin-bottom: 10px;
    font-family: var(--font-primary);
    font-weight: 700;
    line-height: 1.3;
}

.career-points-grid.career-center-last .career-card p {
    font-size: 1rem;
    color: var(--text-medium);
    margin-bottom: 0;
    flex-grow: 1; /* Allow paragraphs to push other content down */
    font-family: var(--font-secondary);
    line-height: 1.7;
}

.career-points-grid.career-center-last .career-card .talk-expert-link {
     margin-top: 15px; /* Space above the link */
     font-size: 1rem;
     font-weight: 600;
     font-family: var(--font-secondary);
     line-height: 1.6;
     display: flex; /* Align icon and text */
     align-items: center;
     justify-content: center; /* Center the link group */
     color: var(--primary-red); /* Link text color */
}
.career-points-grid.career-center-last .career-card .talk-expert-link i {
    margin-right: 8px;
    color: var(--primary-red);
}
.career-points-grid.career-center-last .career-card .talk-expert-link a {
    color: var(--primary-red); /* Link text color */
    text-decoration: none;
    transition: color var(--transition-fast);
}
.career-points-grid.career-center-last .career-card .talk-expert-link a:hover {
    color: var(--primary-red-darker);
    text-decoration: underline;
}

.career-points-grid.career-center-last .career-card.salary-highlight {
     /* Optional specific styles for the salary card */
     border: 1px solid var(--primary-red-lighter);
     background-color: rgba(215, 38, 61, 0.05); /* Very light red background */
}
.career-points-grid.career-center-last .career-card.salary-highlight p {
    margin-bottom: 10px; /* Add space below general description */
}

.career-points-grid.career-center-last .career-card.salary-highlight .salary-range-placeholder {
     font-size: 1.1rem;
     font-weight: 700;
     color: var(--primary-red);
     font-family: var(--font-primary);
     margin-top: 10px;
     margin-bottom: 0;
}
/* END AI & Machine Learning Career Section */


/* --- NEW: Job Profiles Section (#ai-ml-job-profiles) --- */

/* --- CHANGED ID --- */
#ai-ml-job-profiles {
    background-color: var(--dark-black); /* Title color on dark background */
    padding: var(--section-padding-std) 0;
}

/* --- CHANGED ID --- */
#ai-ml-job-profiles .section-title {
    /* Inherits from general section-title */
     color: var(--text-color-light); /* Title color on dark background */
}
/* --- CHANGED ID --- */
#ai-ml-job-profiles .section-title .highlight-red {
     color: var(--primary-red); /* Keep highlight red */
}

/* --- CHANGED ID --- */
#ai-ml-job-profiles .section-subtitle {
     /* Inherits from general section-subtitle */
     color: var(--text-color-medium); /* Subtitle color on dark background */
}


/* Using Flexbox for centering */
.job-profiles-grid.job-center-last {
    display: flex; /* Use flexbox */
    flex-wrap: wrap; /* Allow items to wrap */
    justify-content: center; /* Center items on the main axis */
    gap: 30px; /* Space between cards */
    margin-top: 60px;
}

.job-profile-card {
    /* Removed individual background color classes */
    /* Use dark card styles here, matching the DS page job profiles */
    background-color: var(--card-background); /* Use dark background */
    border: 1px solid var(--card-border); /* Use dark border */
    box-shadow: var(--shadow-md); /* Or adjust shadow for dark theme */
    /* Match padding and border radius to other dark cards like .milestone or .data-science-type-card */
    padding: 30px;
    border-radius: var(--border-radius-lg); /* Match course types */

    text-align: center;
    transition: transform var(--transition-std), box-shadow var(--transition-std), border-color var(--transition-fast);
    display: flex; /* Use flex for inner layout */
    flex-direction: column;
    align-items: center;

    /* Define flex properties for items within the flex container */
    flex-basis: 250px; /* Set a preferred width */
    flex-grow: 0; /* Prevent items from growing */
    flex-shrink: 0; /* Prevent items from shrinking */
}

.job-profile-card:hover {
    transform: translateY(-5px); /* Lift slightly on hover */
    /* Adjust hover effects to match dark theme */
    border-color: var(--primary-red-lighter); /* Highlight border red */
    box-shadow: 0 0 15px var(--card-shadow); /* Red glow on hover */
}


.job-profile-card .profile-icon {
    font-size: 3.5rem; /* Icon size matching the image roughly */
    color: var(--card-icon-color-dark); /* Use red color for icons */
    margin-bottom: 15px; /* Space below icon */
     /* Remove background/padding/border from the icon div itself based on image */
}

.job-profile-card h4 {
    font-size: 1.2rem; /* Title size */
    color: var(--card-text-color-dark); /* Use light text color */
    margin: 0; /* Remove default margin */
    font-family: var(--font-primary);
    font-weight: 700; /* Bolder text */
    line-height: 1.3;
}
/* END NEW: Job Profiles Section */


/* --- Why This Course is a Great Choice Section (#why-great-choice) --- */
#why-great-choice .container {
     position: relative; z-index: 1; /* Ensure content above overlay */
}

#why-great-choice .section-title {
     margin-bottom: 20px;
     color: var(--text-light);
     font-family: var(--font-primary);
     font-weight: 700;
     line-height: 1.3;
}
#why-great-choice .section-subtitle {
     margin-bottom: 50px; /* More space below subtitle */
     color: var(--text-light-variant);
     font-family: var(--font-secondary);
     line-height: 1.6;
}

.data-science-great-choice-grid { /* Specific grid for these cards - Re-using for AI/ML */
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
     /* margin-top handled by subtitle margin-bottom */
     position: relative; z-index: 1; /* Ensure grid is above overlay */
}
.data-science-great-choice-card { /* Specific card style - Re-using for AI/ML */
    display: flex;
    align-items: flex-start;
    gap: 20px; /* More gap */
    padding: 30px; /* More padding */
    background-color: rgba(255, 255, 255, 0.98); /* Less transparent white */
    backdrop-filter: blur(8px); /* More blur */
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--border-radius-lg);
    border-left: 6px solid var(--primary-red); /* Stronger, primary red border */
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-std), box-shadow var(--transition-std), border-color var(--transition-fast);
    /* Includes unified hover effect */
}
.data-science-great-choice-card:hover {
     border-left-color: var(--primary-red-darker); /* Darken border on hover */
}


.data-science-great-choice-card .icon {
    font-size: 2.5rem; /* Larger icons */
    color: var(--primary-red);
    margin-top: 0;
    min-width: 50px; /* Ensure consistent icon width */
    text-align: center;
}
.data-science-great-choice-card div h4 {
    font-size: 1.3rem; /* Slightly larger title */
    color: var(--text-dark);
    margin-bottom: 10px;
    font-family: var(--font-primary);
    font-weight: 600;
    line-height: 1.3;
}
.data-science-great-choice-card div p {
    font-size: 1rem;
    color: var(--text-medium);
    margin-bottom: 0;
    line-height: 1.6;
     font-family: var(--font-secondary);
}


/* --- Curriculum and FAQ Accordion Styles --- */
/* General Accordion Container */
.accordion-container {
    max-width: 900px;
    margin: 60px auto 0 auto; /* More space above */
    border: none; /* Remove default border */
    border-radius: var(--border-radius-xl); /* Very rounded corners */
    overflow: hidden;
    box-shadow: var(--shadow-lg); /* Stronger shadow */
    background-color: var(--bg-white); /* Ensure background for the container */
}

/* Accordion Item */
.accordion-item {
    border-bottom: 1px solid var(--border-color); /* Darker border */
    background-color: var(--bg-white);
}
.accordion-item:last-child {
    border-bottom: none;
}

/* Accordion Header (Clickable Area) */
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px; /* More padding */
    font-family: var(--font-primary);
    font-weight: 700; /* Bolder */
    font-size: 1.2rem; /* Larger text */
    color: var(--text-dark);
    cursor: pointer;
    background-color: var(--bg-white);
    transition: background-color var(--transition-fast), color var(--transition-fast), padding var(--transition-fast); /* Transition padding too */
    user-select: none;
}

.accordion-header:hover {
    background-color: var(--bg-light);
    color: var(--primary-red);
}

.accordion-header.active {
    background-color: var(--primary-red);
    color: var(--text-light);
    padding: 25px 30px; /* Slightly more padding when active */
}

.accordion-header.active .accordion-icon {
     color: var(--text-light);
}


.accordion-icon {
    font-size: 1.1rem; /* Slightly smaller icon */
    color: var(--primary-red);
    transition: transform var(--transition-fast);
    margin-left: 20px; /* More space */
    flex-shrink: 0;
}

.accordion-header.active .accordion-icon {
    transform: rotate(180deg);
}

/* Accordion Content */
.accordion-content {
    padding: 0 30px; /* Horizontal padding matches header */
    background-color: var(--bg-light);
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.6s ease-in-out, padding 0.6s ease-in-out, opacity 0.6s ease-in-out; /* Slower, smoother transition */
    opacity: 0;
}
.accordion-item.active .accordion-content {
    padding: 25px 30px; /* Add back padding when open */
    max-height: 2000px; /* Ensure height is sufficient for long content */
    opacity: 1;
}

/* Styles for the list inside curriculum weeks */
.accordion-content ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0; /* Remove default list margin */
}
.accordion-content ul li {
    margin-bottom: 12px; /* More space */
    font-size: 1rem; /* Slightly larger */
    color: var(--text-medium);
    display: flex;
    align-items: flex-start;
     font-family: var(--font-secondary);
     line-height: 1.6;
}
.accordion-content ul li i {
    color: var(--primary-red-lighter);
    margin-right: 12px; /* More space */
    margin-top: 5px;
    font-size: 0.95em;
}
/* Style for paragraphs inside FAQ accordion content */
.accordion-content p {
    margin-bottom: 1em; /* Space below paragraphs */
    font-size: 1rem; /* Slightly larger */
    color: var(--text-medium);
    line-height: 1.6;
    font-family: var(--font-secondary);
}
.accordion-content p:last-child {
    margin-bottom: 0;
}


/* --- Contact Counselor Section (#contact-counselor) --- */
#contact-counselor {
    /* Background set above */
    text-align: center;
}
#contact-counselor .container {
     max-width: 800px; /* Narrower container for focus */
}
#contact-counselor .section-title {
    margin-bottom: 20px;
    color: var(--text-light);
    font-family: var(--font-primary);
     font-weight: 700;
     line-height: 1.3;
}
#contact-counselor .section-subtitle {
     margin-bottom: 40px; /* More space before button */
     color: var(--text-light-variant);
     font-family: var(--font-secondary);
     line-height: 1.6;
}
#contact-counselor .btn {
    margin-top: 0; /* Button margin handled by subtitle */
    font-size: 1rem;
    padding: 1em 2.5em; /* Larger button */
}


/* --- Course Specific FAQ Section (#course-faq) --- */
/* Accordion container and inner styles are shared with curriculum */
#course-faq { /* --- CHANGED ID --- */
    background: linear-gradient(0deg, var(--bg-light) 0%, var(--bg-white) 100%); /* Subtle gradient, inverted */
    padding: var(--section-padding-std) 0;
}


/* --- Responsive Design Adjustments --- */
@media (max-width: 1200px) {
    /* Adjust grid column sizes slightly if needed */
     /* Removed grid specific styles */
     /* .job-profiles-grid {
         grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     }
     */
     /* Flexbox centering handles item sizing based on flex-basis */
      .job-profiles-grid.job-center-last .job-profile-card {
           flex-basis: 220px; /* Adjust basis */
      }
}

@media (max-width: 992px) {
     /* Adjust banner padding */
     #ai-ml-banner { /* --- CHANGED ID --- */
         padding-top: calc(var(--header-height) + 60px);
         padding-bottom: 60px;
         min-height: auto; /* Allow height to adjust based on content */
     }
     #ai-ml-banner .container.banner-content-wrap { /* --- CHANGED ID --- */
         flex-direction: column; /* Stack items */
         gap: 40px;
     }
      #ai-ml-banner .banner-content { /* --- CHANGED ID --- */
         flex: none; /* Remove flex properties */
         max-width: 100%; /* Allow full width */
         text-align: center; /* Center text */
     }
     #ai-ml-banner .banner-cta-group { /* --- CHANGED ID --- */
         justify-content: center; /* Center buttons when stacked */
     }
     .demo-form-container {
         flex: none; /* Remove flex properties */
         width: 100%; /* Full width form */
         margin-left: auto;
         margin-right: auto; /* Center form */
     }
      .demo-form-card {
          max-width: 400px; /* Limit form width slightly on medium screens */
          margin: 0 auto; /* Center the card within its container */
      }

     /* --- CHANGED ID --- */
     #ai-ml-features { padding: 60px 0; } /* Adjust padding */
     /* --- CHANGED ID --- */
      #ai-ml-features .section-subtitle { margin-bottom: 30px; }
      /* --- CHANGED ID --- */
     #ai-ml-features .unique-feature-card { padding: 25px; gap: 15px; }
      /* --- CHANGED ID --- */
      #ai-ml-features .unique-feature-icon { font-size: 2rem; padding: 15px; min-width: 60px; height: 60px; }
      /* --- CHANGED ID --- */
     #ai-ml-features .unique-feature-content h3 { font-size: 1.2rem; }
     /* --- CHANGED ID --- */
     #ai-ml-features .unique-feature-content p { font-size: 0.95rem; }


    #course-overview .overview-grid {
        grid-template-columns: 1fr; /* Stack text and image */
        gap: 40px;
        margin-top: 40px;
    }
     #course-overview .overview-image-container::before { /* Adjust background shape position */
         bottom: -10px; right: -10px; width: 100px; height: 100px;
     }
    #course-overview .overview-text h3 { text-align: center; font-size: clamp(1.6em, 3vw, 2em); margin-bottom: 15px;}
    #course-overview .overview-text p { text-align: center; font-size: 1rem; }
     #course-overview .overview-text ul { padding-left: 20px; }
     #course-overview .overview-text ul li { justify-content: center; }


    .course-types-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 40px;}
    .data-science-type-card { padding: 30px 20px; border-radius: var(--border-radius-lg);}
     .data-science-type-card .type-icon { font-size: 3rem; padding: 15px;}
     .data-science-type-card h4 { font-size: 1.3rem; margin-bottom: 10px;}
     .data-science-type-card p { font-size: 0.95rem; margin-bottom: 20px; }
     .data-science-type-card ul { padding: 0 10px; margin-bottom: 20px; }
     .data-science-type-card ul li { font-size: 0.9rem; margin-bottom: 8px;}

     /* Career Section Responsive (Flexbox) */
     /* --- CHANGED ID --- */
     #ai-ml-career { padding: 60px 0;}
     /* .career-points-grid is already flexbox, gap adjusts */
     .career-points-grid.career-center-last {
         gap: 20px; /* Smaller gap on medium screens */
         margin-top: 40px;
     }
     .career-points-grid.career-center-last .career-card {
          flex-basis: 280px; /* Adjust basis */
          padding: 25px;
          border-radius: var(--border-radius-md);
     }
     .career-points-grid.career-center-last .career-icon { font-size: 2.5rem; padding: 15px; min-width: 60px; height: 60px; }
     .career-points-grid.career-center-last .career-card h4 { font-size: 1.1rem; }
     .career-points-grid.career-center-last .career-card p { font-size: 0.95rem; }
     .career-points-grid.career-center-last .career-card .talk-expert-link { font-size: 0.95rem; }
     .career-points-grid.career-center-last .career-card.salary-highlight .salary-range-placeholder { font-size: 1rem; }

    /* NEW Job Profiles Section Responsive */
     /* --- CHANGED ID --- */
     #ai-ml-job-profiles { padding: 60px 0;}
      .job-profiles-grid.job-center-last {
          gap: 20px; /* Smaller gap */
          margin-top: 40px;
      }
     .job-profile-card {
          flex-basis: 200px; /* Adjust minmax -> flex-basis */
          padding: 25px 15px;
          border-radius: var(--border-radius-md);
     }
     .job-profile-card .profile-icon { font-size: 3rem; margin-bottom: 10px; }
     .job-profile-card h4 { font-size: 1.1rem; }


    .data-science-great-choice-grid { grid-template-columns: 1fr; gap: 20px; }
    .data-science-great-choice-card { flex-direction: column; align-items: center; text-align: center; padding: 25px; gap: 15px; border-radius: var(--border-radius-md); }
    .data-science-great-choice-card .icon { margin-bottom: 10px; font-size: 2rem; min-width: auto; }
     .data-science-great-choice-card div h4 { font-size: 1.1rem; margin-bottom: 8px; }
     .data-science-great-choice-card div p { font-size: 0.95rem; }


    .accordion-container {
        border-radius: var(--border-radius-md); /* Smaller radius on mobile */
        margin-top: 40px;
    }
    .accordion-header {
        font-size: 1rem; /* Smaller font size */
        padding: 15px 20px;
    }
    .accordion-icon { font-size: 1rem; margin-left: 15px;}
    .accordion-content { padding: 15px 20px; }
    .accordion-content ul li, .accordion-content p { font-size: 0.9rem; }


     #contact-counselor { padding: 70px 0; } /* Adjust padding */
     #contact-counselor .section-subtitle { margin-bottom: 30px; }
     #contact-counselor .btn { font-size: 0.95rem; padding: 0.9em 2em;}

}

@media (max-width: 768px) {
     /* Further stack or adjust layouts if needed below 768px */
     #ai-ml-banner { padding: calc(var(--header-height) + 40px) 0;} /* --- CHANGED ID --- */
     #ai-ml-banner h1 { font-size: 1.8em; } /* --- CHANGED ID --- */
     #ai-ml-banner p { font-size: 1em; margin-bottom: 20px; } /* --- CHANGED ID --- */
      .demo-form-card {
           max-width: 350px; /* Further limit form width on smaller mobiles */
       }

     /* --- CHANGED ID --- */
     #ai-ml-features { padding: 50px 0;}
     /* --- CHANGED ID --- */
     #ai-ml-features .unique-feature-card { flex-direction: column; align-items: center; text-align: center; }
     /* --- CHANGED ID --- */
     #ai-ml-features .unique-feature-icon { margin-bottom: 15px; }

      #course-overview .overview-text ul { padding-left: 0; }
      #course-overview .overview-text ul li { justify-content: center; text-align: left; width: fit-content; margin-left: auto; margin-right: auto; } /* Center the list group */

     .course-types-grid { grid-template-columns: 1fr; gap: 20px;}
     .data-science-type-card ul { padding: 0 20px; }
      .data-science-type-card ul li { justify-content: flex-start; } /* Back to left align in list */

     /* Career Section Responsive (Flexbox) */
     /* --- CHANGED ID --- */
     #ai-ml-career { padding: 50px 0;}
     .career-points-grid.career-center-last {
         gap: 15px; /* Smaller gap */
         margin-top: 30px;
     }
     .career-points-grid.career-center-last .career-card {
          flex-basis: 90%; /* Allow cards to be wider on very small screens */
          max-width: 300px; /* Prevent them from getting too wide */
          padding: 20px;
     }
     .career-points-grid.career-center-last .career-icon { font-size: 2rem; padding: 12px; min-width: 50px; height: 50px; }
     .career-points-grid.career-center-last .career-card h4 { font-size: 1rem; }
     .career-points-grid.career-center-last .career-card p { font-size: 0.85rem; }
     .career-points-grid.career-center-last .career-card .talk-expert-link { font-size: 0.9rem; }
     .career-points-grid.career-center-last .career-card.salary-highlight .salary-range-placeholder { font-size: 0.95rem; }


    /* NEW Job Profiles Section Responsive */
     /* --- CHANGED ID --- */
     #ai-ml-job-profiles { padding: 50px 0;}
      .job-profiles-grid.job-center-last {
          gap: 15px; /* Smaller gap */
          margin-top: 30px;
      }
     .job-profile-card {
          flex-basis: 180px; /* Adjust basis */
          padding: 20px 10px;
     }
     .job-profile-card .profile-icon { font-size: 2.8rem; margin-bottom: 8px;}
     .job-profile-card h4 { font-size: 1.1rem; }


     .accordion-header { padding: 15px; font-size: 0.95rem;}
     .accordion-header.active { padding: 20px 15px; }
     .accordion-content { padding: 15px; }
     .accordion-content ul li, .accordion-content p { font-size: 0.85rem; }


     #contact-counselor { padding: 60px 0; }

     /* Roadmap Adjustments for Mobile - Keeping original values for consistency */
      .roadmap-container {
          padding-top: 4rem;
          min-height: 1800px; /* Adjusted */
          padding-bottom: 4rem;
      }
      .roadmap-container h1 { font-size: 2.2em; margin-bottom: 2.5rem; }

     .milestone {
          width: 85%; /* Wider card */
          left: 50% !important; /* Center horizontally */
          right: auto !important;
          transform: translateX(-50%) translateY(20px); /* Combined initial transform */
          opacity: 0; /* Initial state */
      }
     .milestone.milestone-visible { transform: translateX(-50%) translateY(0); opacity: 1; } /* Visible state */

      /* Adjust top positions for vertical stacking on smaller screens - Keeping original values for consistency */
     .milestone[data-milestone-index="0"] { top: 150px; } /* Adjust based on card size/gap */
     .milestone[data-milestone-index="1"] { top: 400px; }
     .milestone[data-milestone-index="2"] { top: 650px; }
     .milestone[data-milestone-index="3"] { top: 900px; }
     .milestone[data-milestone-index="4"] { top: 1150px; }
     .milestone[data-milestone-index="5"] { top: 1400px; }


      .milestones-container, .roadmap-svg { min-height: 1900px; /* Match container height + buffer */ } /* Adjusted min-height */

      .milestone-icon { width: 35px; height: 35px; top: -18px; font-size: 1em; }
      .milestone h3 { font-size: 1.1em; }
      .milestone p { font-size: 0.85em; }

      .journey-path-dotted, .journey-path-filled { stroke-width: var(--path-width); stroke-dasharray: 6 6; }
      .location-icon { r: 12; stroke-width: 3; filter: drop-shadow(0 0 6px var(--primary-red)); }

      .ai-end-message { margin-top: 4rem; padding: 2rem; max-width: 95%; box-shadow: 0 0 15px rgba(255, 7, 58, 0.2); }
      .ai-end-message h2 { font-size: 1.5em; text-shadow: 0 0 3px rgba(255, 7, 58, 0.4); }
      .ai-end-message p { font-size: 0.9em; }
      .ai-icon { width: 40px; height: 40px; filter: drop-shadow(0 0 3px var(--primary-red));}


}

@media (max-width: 480px) {
     .roadmap-container { min-height: 1500px; padding-top: 3rem; padding-bottom: 3rem;}
     .roadmap-container h1 { font-size: 2em; margin-bottom: 2rem; }
     .milestone { padding: 1.2rem; width: 90%; }
      /* Adjust top positions - Keeping original values for consistency */
    .milestone[data-milestone-index="0"] { top: 120px; }
    .milestone[data-milestone-index="1"] { top: 340px; }
    .milestone[data-milestone-index="2"] { top: 560px; }
    .milestone[data-milestone-index="3"] { top: 780px; }
    .milestone[data-milestone-index="4"] { top: 1000px; }
    .milestone[data-milestone-index="5"] { top: 1220px; }

      .milestones-container, .roadmap-svg { min-height: 1600px; }

     .milestone-icon { width: 30px; height: 30px; top: -15px; font-size: 0.9em; }
     .milestone h3 { font-size: 1em; }
     .milestone p { font-size: 0.8em; }

     .journey-path-dotted, .journey-path-filled { stroke-width: 4; stroke-dasharray: 5 5; }
     .location-icon { r: 10; stroke-width: 2; filter: drop-shadow(0 0 4px var(--primary-red)); }

      .ai-end-message { margin-top: 3rem; padding: 1.5rem; box-shadow: 0 0 10px rgba(255, 7, 58, 0.15); }
     .ai-end-message h2 { font-size: 1.3em; text-shadow: 0 0 2px rgba(255, 7, 58, 0.3); }
     .ai-end-message p { font-size: 0.8em; }
      .ai-icon { width: 35px; height: 35px; filter: drop-shadow(0 0 3px var(--primary-red));}


     /* Career Section Responsive (Flexbox) */
     /* --- CHANGED ID --- */
     #ai-ml-career { padding: 40px 0;}
     .career-points-grid.career-center-last { gap: 10px; margin-top: 20px; }
     .career-points-grid.career-center-last .career-card {
          flex-basis: 95%; /* Almost full width */
          max-width: 280px; /* Prevent them from getting too wide */
          padding: 15px;
     }
     .career-points-grid.career-center-last .career-icon { font-size: 1.8rem; padding: 10px; min-width: 40px; height: 40px; }
     .career-points-grid.career-center-last .career-card h4 { font-size: 0.9rem; }
     .career-points-grid.career-center-last .career-card p { font-size: 0.8rem; }
     .career-points-grid.career-center-last .career-card .talk-expert-link { font-size: 0.8rem; }
     .career-points-grid.career-center-last .career-card.salary-highlight .salary-range-placeholder { font-size: 0.95rem; }

    /* NEW Job Profiles Section Responsive */
     /* --- CHANGED ID --- */
     #ai-ml-job-profiles { padding: 40px 0;}
      .job-profiles-grid.job-center-last {
          gap: 10px; /* Smaller gap */
          margin-top: 20px;
      }
     .job-profile-card {
          flex-basis: 150px; /* Adjust basis */
          padding: 15px 8px;
     }
     .job-profile-card .profile-icon { font-size: 2.5rem; margin-bottom: 5px;}
     .job-profile-card h4 { font-size: 0.9rem; }
}