/* ============================================================ Career Growth Section — Snake Grid Layout Font: Playfair Display (headings) + Outfit (body) Add to your : ============================================================ */ /* ---------- Section Wrapper ---------- */ /* ---------- Header ---------- */ .careergrowth .cg-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #8B6CF6; margin-bottom: 1rem; } .careergrowth .cg-badge span { display: inline-block; width: 20px; height: 1px; background: #8B6CF6; } .careergrowth h1 { font-family: 'Playfair Display', serif; font-size: clamp(28px, 4vw, 44px); font-weight: 800; line-height: 1.15; color: #1a1a2e; max-width: 520px; margin: 0 auto 4rem; text-align: center; } .careergrowth h1 em { font-style: italic; color: #8B6CF6; } /* ---------- Grid ---------- */ .careergrowth .cg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; row-gap: 2rem; max-width: 1120px; margin: 0 auto; } /* ---------- Arrow Row (between rows) ---------- */ .careergrowth .cg-arrow-row { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; padding: 0 0.5rem; margin: -0.5rem 0; } .careergrowth .cg-arrow-row svg { width: 48px; height: 48px; /* opacity: 0.2; */ opacity: 0.5; } /* ---------- Card Base ---------- */ .career-step-card { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 24px; padding: 2rem 1.5rem 1.75rem; position: relative; overflow: hidden; cursor: default; transition: transform 0.32s cubic-bezier(.34, 1.4, .64, 1), box-shadow 0.3s ease, border-color 0.25s ease; animation: cg-riseUp 0.55s cubic-bezier(.22, 1, .36, 1) both; } /* Staggered entrance */ .career-step-card:nth-child(1) { animation-delay: 0.04s; } .career-step-card:nth-child(2) { animation-delay: 0.11s; } .career-step-card:nth-child(3) { animation-delay: 0.18s; } .career-step-card:nth-child(4) { animation-delay: 0.25s; } .career-step-card:nth-child(6) { animation-delay: 0.32s; } .career-step-card:nth-child(7) { animation-delay: 0.39s; } .career-step-card:nth-child(8) { animation-delay: 0.46s; } .career-step-card:nth-child(9) { animation-delay: 0.53s; } /* Hover lift */ .career-step-card:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.13); } /* Glow orb bottom-right */ .career-step-card::after { content: ''; position: absolute; width: 120px; height: 120px; border-radius: 50%; bottom: -40px; right: -30px; opacity: 0.08; transition: opacity 0.3s, transform 0.3s; pointer-events: none; } .career-step-card:hover::after { opacity: 0.16; transform: scale(1.2); } /* Top accent bar */ .career-step-card::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 2px; border-radius: 0 0 4px 4px; opacity: 0; transition: opacity 0.25s; } .career-step-card:hover::before { opacity: 1; } /* ---------- Card Inner Elements ---------- */ .career-step-card .cg-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.5rem; } .career-step-card .step-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.4; color: #1a1a2e; margin-bottom: 2px; } .career-step-card .step-number { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 800; line-height: 1; display: block; } .career-step-card .step-icon { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .career-step-card .step-icon img { width: 28px; height: 28px; object-fit: contain; } .career-step-card .cg-line { width: 32px; height: 2.5px; border-radius: 4px; margin-bottom: 0.85rem; } .career-step-card p { font-size: 16px; font-weight: 400; color: #000; line-height: 1.65; margin: 0; font-family: "Open Sans"; } .careergrowth h2{ font-size: 2.5rem; color: #1d025b; font-weight: 700; font-family: "Cairo"; } /* ---------- Per-Step Colors ---------- */ /* Step 01 — Purple */ .career-step-card.step-01 .step-number { color: #1d025b; } .career-step-card.step-01 .step-icon { background: #f0eeff; } .career-step-card.step-01 .cg-line { background: #1d025b; } .career-step-card.step-01::before { background: linear-gradient(90deg, #1d025b, #6c5dd3); } .career-step-card.step-01::after { background: #7C6FE0; } .career-step-card.step-01:hover { border-color: #6c5dd3; } /* Step 02 — Teal */ .career-step-card.step-02 .step-number { color: #1d025b; } .career-step-card.step-02 .step-icon { background: #f0eeff; } .career-step-card.step-02 .cg-line { background: #1d025b; } .career-step-card.step-02::before { background: linear-gradient(90deg, #1d025b, #6c5dd3); } .career-step-card.step-02::after { background: #7C6FE0; } .career-step-card.step-02:hover { border-color: #6c5dd3; } /* Step 03 — Amber */ .career-step-card.step-03 .step-number { color: #1d025b; } .career-step-card.step-03 .step-icon { background: #f0eeff; } .career-step-card.step-03 .cg-line { background: #1d025b; } .career-step-card.step-03::before { background: linear-gradient(90deg, #1d025b, #6c5dd3); } .career-step-card.step-03::after { background: #7C6FE0; } .career-step-card.step-03:hover { border-color: #6c5dd3; } /* Step 04 — Coral */ .career-step-card.step-04 .step-number { color: #1d025b; } .career-step-card.step-04 .step-icon { background: #f0eeff; } .career-step-card.step-04 .cg-line { background: #1d025b; } .career-step-card.step-04::before { background: linear-gradient(90deg, #1d025b, #6c5dd3); } .career-step-card.step-04::after { background: #7C6FE0; } .career-step-card.step-04:hover { border-color: #6c5dd3; } /* Step 05 — Green */ .career-step-card.step-05 .step-number { color: #1d025b; } .career-step-card.step-05 .step-icon { background: #f0eeff; } .career-step-card.step-05 .cg-line { background: #1d025b; } .career-step-card.step-05::before { background: linear-gradient(90deg, #1d025b, #6c5dd3); } .career-step-card.step-05::after { background: #7C6FE0; } .career-step-card.step-05:hover { border-color: #6c5dd3; } /* Step 06 — Pink */ .career-step-card.step-06 .step-number { color: #1d025b; } .career-step-card.step-06 .step-icon { background: #f0eeff; } .career-step-card.step-06 .cg-line { background: #1d025b; } .career-step-card.step-06::before { background: linear-gradient(90deg, #1d025b, #6c5dd3); } .career-step-card.step-06::after { background: #7C6FE0; } .career-step-card.step-06:hover { border-color: #6c5dd3; } /* Step 07 — Blue */ .career-step-card.step-07 .step-number { color: #1d025b; } .career-step-card.step-07 .step-icon { background: #f0eeff; } .career-step-card.step-07 .cg-line { background: #1d025b; } .career-step-card.step-07::before { background: linear-gradient(90deg, #1d025b, #6c5dd3); } .career-step-card.step-07::after { background: #7C6FE0; } .career-step-card.step-07:hover { border-color: #6c5dd3; } /* Step 08 — Red */ .career-step-card.step-08 .step-number { color: #1d025b; } .career-step-card.step-08 .step-icon { background: #f0eeff; } .career-step-card.step-08 .cg-line { background: #1d025b; } .career-step-card.step-08::before { background: linear-gradient(90deg, #1d025b, #6c5dd3); } .career-step-card.step-08::after { background: #7C6FE0; } .career-step-card.step-08:hover { border-color: #6c5dd3; } /* ---------- Entrance Animation ---------- */ @keyframes cg-riseUp { from { opacity: 0; transform: translateY(30px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ============================================================ RESPONSIVE BREAKPOINTS ============================================================ */ /* Tablet landscape — 2 columns */ @media (max-width: 1024px) { .careergrowth .cg-grid { grid-template-columns: repeat(2, 1fr); } /* Arrow hidden on tablet/mobile — snake layout not applicable */ .careergrowth .cg-arrow-row { display: none; } /* Reset all cards to normal order on tablet/mobile */ .careergrowth .cg-grid .career-step-card { order: unset !important; } } /* Tablet portrait — 2 columns */ @media (max-width: 768px) { .careergrowth { padding: 3.5rem 1rem 4rem; } .careergrowth h1 { font-size: 28px; margin-bottom: 2.5rem; } .careergrowth .cg-grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; row-gap: 0.85rem; } .career-step-card { padding: 1.5rem 1.25rem 1.5rem; } .career-step-card .step-number { font-size: 26px; } } /* Mobile — 1 column */ @media (max-width: 480px) { .careergrowth { padding: 2.5rem 1rem 3rem; } .careergrowth h1 { font-size: 24px; margin-bottom: 2rem; } .careergrowth .cg-grid { grid-template-columns: 1fr; gap: 0.85rem; row-gap: 0.85rem; } .career-step-card { padding: 1.5rem 1.25rem; border-radius: 18px; } .career-step-card .step-number { font-size: 24px; } .career-step-card .step-icon { width: 44px; height: 44px; } .career-step-card .step-icon img { width: 24px; height: 24px; } }