/* =========================== Journey Cards Section =========================== */
.journey-section { padding: 53px 0; background-color: var(--white); overflow: hidden; }

/* Background Watermark Patterns */
.journey-section .bg-pattern { position: absolute; width: 32%; max-width: 628px; pointer-events: none; z-index: 1; }
.journey-section .pattern-left { top: 28%; left: 0; transform: translateX(-55%); -webkit-transform: translateX(-55%); }
.journey-section .pattern-right { bottom: 5%; right: 0%; transform: translateX(55%); -webkit-transform: translateX(55%); }

/* Base Card Styling */
.journey-cards-wrapper { display: flex; flex-direction: column; gap: 10px; }
.journey-card { border-radius: 20px; padding: 150px 80px; }

.journey-title { margin-bottom: 20px; }
.journey-card p { color: var(--black); margin-bottom: 24px; }
.journey-card p:not(.para-md) { margin-bottom: 4px; }
.journey-card strong { color: var(--black); }

.journey-link { color: #A1432D; margin-top: 15px; display: inline-block; display: inline-flex; align-items: center; gap: 4px; }
.journey-link img { filter: opacity(0.3) drop-shadow(0 0 0 #A1432D) drop-shadow(0 0 0 #A1432D) drop-shadow(0 0 0 #A1432D); 
    -webkit-filter: opacity(0.3) drop-shadow(0 0 0 #A1432D) drop-shadow(0 0 0 #A1432D) drop-shadow(0 0 0 #A1432D);
}
.journey-link:hover { color: #A1432D; }
.journey-link:after { background: #A1432D; }

/* List Styles inside Cards */
.journey-list { margin-bottom: 30px; padding-left: 45px; }
.journey-list li { position: relative; display: flex; align-items: flex-start; gap: 8px; margin-bottom: 3px; }
.journey-list li::before { content: ''; position: absolute; top: 2px; left: -25px; width: 17px; height: 17px; background: url('../images/check-small.svg') no-repeat center center / 16px; }
.journey-list li .check-icon { flex-shrink: 0; margin-top: 3px; }
.journey-list li span { color: var(--black); }

/* Vector Image Limiter */
.journey-image-col img { max-width: 80%; height: auto; }


/* =========================================================================================
   NTH-CHILD LOGIC FOR COLORS AND LAYOUT (As requested)
========================================================================================= */

/* --- COLORS --- */
/* Card 1 */
.journey-card:nth-child(1) { background-color: var(--white-color-100); }
.journey-card:nth-child(1) .journey-title { color: var(--maroon-color); }

/* Card 2 */
.journey-card:nth-child(2) { background-color: var(--white-color-300); }
.journey-card:nth-child(2) .journey-title { color: var(--green-color-400); }

/* Card 3 */
.journey-card:nth-child(3) { background-color: #D7D2C699; }
.journey-card:nth-child(3) .journey-title { color: var(--beige-color); }

/* Card 4 */
.journey-card:nth-child(4) { background-color: var(--white-color-100); }
.journey-card:nth-child(4) .journey-title { color: var(--green-color-600); }

/* Reverses the row direction for even cards (2 and 4) */
.journey-card:nth-child(even) .row { flex-direction: row-reverse; }


/* =========================== Success Path Circles Section =========================== */
.success-path { background-color: var(--white-color-100); padding: 162px 0 196px; }
.success-title { max-width: 830px; margin-inline: auto; }
.success-title .title { color: var(--blue-color); }

/* Base Circle Styling */
.success-circle { border-radius: 50%; aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 30px; margin: 0 auto; color: var(--black); }
.success-circle h3 { margin-bottom: 10px; color: var(--blue-color); }
.success-circle p:last-child { margin-bottom: 0; }
/* =========================================================================================
   NTH-CHILD LOGIC FOR CIRCLE COLORS
========================================================================================= */

/* Circle 1: Dusty Rose/Pink */
.success-circle-wrapper:nth-child(1) .success-circle { background-color: rgba(138, 59, 47, 0.4); }
/* Circle 2: Muted Teal/Blue */
.success-circle-wrapper:nth-child(2) .success-circle { background-color: rgba(47, 102, 95, 0.4); }
/* Circle 3: Muted Sage Green */
.success-circle-wrapper:nth-child(3) .success-circle { background-color: rgba(95, 122, 71, 0.4); }
/* Circle 4: Muted Beige/Gold */
.success-circle-wrapper:nth-child(4) .success-circle { background-color: rgba(183, 154, 90, 0.4); }


.boost-skills-cta.part-of-nzcfi-section { margin-top: 148px; border-radius: 20px; padding: 80px; }
.boost-skills-cta.part-of-nzcfi-section .cta-content { max-width: unset;}


/* ================================================== Media Queries ================================================ */
@media screen and (max-width: 1199px) {

    .journey-card { padding: 60px; border-radius: 16px; }
    .journey-image-col img { max-width: 50%; }
    .success-path { padding: 60px 0px; }
    .success-circle { padding: 20px; }
    .boost-skills-cta.part-of-nzcfi-section { margin-top: 60px; padding: 60px; border-radius: 16px; }
}

@media screen and (max-width: 991px) {
    .journey-card { padding: 40px; border-radius: 12px; }
    .success-path { padding: 40px 0px; }
    .success-circle p { font-size: 12px; line-height: 1.4; }
    .boost-skills-cta.part-of-nzcfi-section { margin-top: 40px; padding: 40px; border-radius: 12px; }

}

@media screen and (max-width: 767px) {
    .journey-card { padding: 30px 20px; }
    .journey-card .row,
    .journey-card:nth-child(even) .row { flex-direction: column-reverse; }
    .journey-image-col {  max-width: 260px; margin: 0px auto 30px; }

    .success-title .title { font-size: 24px; line-height: 32px; }
    .success-circle { padding: 20px 16px;}
    

}