html {
    scroll-behavior: smooth;
}

.testimonial-fade-out {
    -webkit-mask-image: linear-gradient(to bottom, black 66%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 66%, transparent 100%);
}
/* For mobile dropdown chevron rotation */
.rotate-180 {
    transform: rotate(180deg);
}
.key-outcome-stat-label { /* Style for portfolio stats label, copied from graphic-design.html Key Outcomes */
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-family: 'Poppins', sans-serif;
    font-size: clamp(0.75rem, 2vw, 1rem); 
    font-weight: 500;
    color: #1e293b; /* slate-800 */
    background-color: #f8fafc; /* slate-50 */
    padding: 0.3em 0.8em 0.3em 0; 
    border-radius: 4px;
    line-height: 1.2;
    white-space: nowrap; /* Ensures "Completed Projects" stays on one line */
    z-index: 10;
    text-align: left;
}
/* Custom form styles */
select.custom-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
}

#success-modal, #booking-modal {
    transition: opacity 0.3s ease-in-out;
}

#modal-panel, #booking-modal-panel {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.font-dancing-script {
    font-family: 'Dancing Script', cursive;
}
.font-dynalight {
    font-family: 'Dynalight', cursive;
}

/* --- CSS Masonry for Testimonials --- */
@media (min-width: 768px) { /* md breakpoint */
    #testimonial-grid-container {
        display: block;
        column-count: 2;
        column-gap: 2rem; /* Corresponds to md:gap-8 */
    }
    .testimonial-card {
        break-inside: avoid;
        margin-bottom: 2rem; /* Provides vertical gap */
    }
}
@media (min-width: 1024px) { /* lg breakpoint */
    #testimonial-grid-container {
        column-count: 3;
    }
}

#cta-section {
    transition: height 0.3s ease-out; /* Smooth height transition */
}
#cta-heading {
     transition: font-size 0.3s ease-out; /* Smooth font size transition */
}

/* --- Component-specific Styles from courses.css --- */

/* Awards Section */
.award-year-number {
    font-size: 2.625rem; /* Base: 3 * 14px (text-sm equivalent) */
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 1px #ffaa00;
    text-stroke: 1px #ffaa00;
    display: inline-block; 
    line-height: 1;
    letter-spacing: 0.05em;
    transform: rotate(-90deg); /* Rotated for all screen sizes */
    white-space: nowrap; /* Prevent wrapping */
}

@media (min-width: 768px) { /* md breakpoint */
    .award-year-number {
        font-size: 3rem; /* Desktop: 3 * 16px (text-base equivalent) */
        -webkit-text-stroke-width: 1.5px;
        text-stroke-width: 1.5px;
    }
}

/* Statistics Section */
.stat-label {
    position: absolute;
    top: 50%;
    left: 0; /* Align to the left of the number */
    transform: translateY(-50%);
    font-family: 'Poppins', sans-serif;
    font-size: clamp(0.75rem, 2vw, 1rem); 
    font-weight: 500; 
    color: #1e293b; /* slate-800 */
    line-height: 1.2;
    white-space: nowrap; 
    z-index: 10; 
    text-align: left;
    background-color: #f8fafc; /* slate-50 (page background) */
    padding: 0.3em 0.8em 0.3em 0; /* Adjusted padding */
    border-radius: 4px;
}

/* FAQ Section Styles */
.faq-item .faq-icon {
    transition: transform 0.3s ease-in-out;
}
.faq-item .faq-question-button[aria-expanded="true"] .faq-icon-closed {
    display: none;
}
.faq-item .faq-question-button[aria-expanded="false"] .faq-icon-open {
    display: none;
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding-top 0.4s ease-in-out, padding-bottom 0.4s ease-in-out;
}
.faq-answer.open {
    max-height: 500px; /* Adjust as needed for content */
}

/* --- Added from services.css --- */

#masked-image-container svg {
    display: block;
}

#services-heading,
#why-choose-heading,
#how-it-works-heading,
#comparison-heading,
#how-it-works-heading-2,
#what-students-learn-heading,
#what-students-carry-heading,
#testimonials-heading,
#faq-heading,
#ui-ux-training-heading {
    line-height: 1.25 !important;
}

/* Segregated Inline Styles */

.bg-brand-gradient {
    background-image: linear-gradient(to right, #ffaa00, #d44d7d, #4477cc);
}

.text-brand-gradient {
    background-image: linear-gradient(to right, #ffaa00, #d44d7d, #4477cc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-heading {
    line-height: 1.25 !important;
}

@media (min-width: 1280px) {
    .hero-heading {
        font-size: 80px;
    }
}

/* --- Stacking Cards Animation (Moved from short-term-courses.css) --- */
.process-card {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    will-change: transform, opacity;
    
    /* Animation initial state */
    transform: translateY(50px);
    opacity: 0;
    transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s ease-out;
}
.process-card.is-visible {
    transform: translateY(0);
    opacity: 1;
}

/* Staggered top offset and z-index for stacking */
.process-card:nth-of-type(1) { top: 4rem; z-index: 1; }
.process-card:nth-of-type(2) { top: 5rem; z-index: 2; }
.process-card:nth-of-type(3) { top: 6rem; z-index: 3; }
.process-card:nth-of-type(4) { top: 7rem; z-index: 4; }
.process-card:nth-of-type(5) { top: 8rem; z-index: 5; }

/* Ensure the container has enough height for the last card to stick before the next section starts */
.process-card-container {
    /* Add some padding to the top to not be too close to the previous section */
    padding-top: 2rem;
    /* Add padding to the bottom to allow the last card to scroll into its sticky position fully */
    padding-bottom: 7.5vh; 
}