/* ==========================================================================
   GLOBAL INTER TYPOGRAPHY FORCING ENGINE
   ========================================================================== */
html, body, div, span, p, a, h1, h2, h3, h4, h5, h6, button, input, select, textarea {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

:root {
    /* Color Variables */
    --botticelli: rgba(207, 231, 231, 1);
    --white: rgba(255, 255, 255, 1);
    --themejunctionnetblack: rgba(0, 0, 0, 1);
    
    /* Typography Variables */
    --inter-bold-font-family: "Inter-Bold", Helvetica, Arial, sans-serif;
    --inter-bold-font-weight: 700;
    --inter-bold-font-size: 12px;
    --inter-bold-letter-spacing: 1.2px;
    --inter-bold-line-height: 12px;
    --inter-bold-font-style: normal;

    --inter-regular-font-family: "Inter-Regular", Helvetica, Arial, sans-serif;
    --inter-regular-font-weight: 400;
    --inter-regular-font-size: 18px;
    --inter-regular-letter-spacing: 0px;
    --inter-regular-line-height: 28.8px;
    --inter-regular-font-style: normal;

    --mona-sans-bold-font-family: "Mona Sans", system-ui, sans-serif;
    --mona-sans-bold-font-weight: 700;
    --mona-sans-bold-font-size: 32px;
    --mona-sans-bold-line-height: 41.6px;
    
    --semantic-button-font-family: "Inter-SemiBold", Helvetica, Arial, sans-serif;
    --semantic-button-font-weight: 600;
    --semantic-button-font-size: 16px;
    --semantic-button-line-height: 24px;

    --semantic-heading-1-font-family: "Inter-Bold", Helvetica, Arial, sans-serif;
    --semantic-heading-1-font-weight: 700;
    --semantic-heading-1-font-size: 64px;
    --semantic-heading-1-line-height: 72px;
}

/* ==========================================================================
   1. CORE ENGINE & BASE STYLING SETUP
   ========================================================================== */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

body {
    background: #ffffff;
    font-family: "Inter-Regular", Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
}

.btn-reset {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit; /* Inherits the font size, weight, and family from the nav */
    color: inherit; /* Inherits the text color from the nav */
    cursor: pointer; /* Keeps the hand icon when hovering */
    outline: none; /* Removes default focus rings (add custom focus if needed for accessibility) */
    appearance: none; /* Prevents mobile browsers from applying native styling */
    -webkit-appearance: none;
}

.WOA-home {
    width: 100%;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}

.WOA-home .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    align-self: stretch;
    width: 100%;
}

/* ==========================================================================
   2. PURE CSS RESPONSIVE NAVIGATION SHELL
   ========================================================================== */
.header-navigation {
    background-color: #fffaed;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(187, 202, 191, 0.3);
}

.nav {
    display: flex;
    max-width: 1280px;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    width: 100%;
    position: relative;
}

.container-16 {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.outsource-africa {
    width: 49px;
    height: 52px;
    object-fit: cover;
}

.text-wrapper-20 {
    font-family: "Inter-Bold", Helvetica, Arial;
    font-weight: 700;
    color: #202020;
    font-size: 24px;
    line-height: 32px;
    white-space: nowrap;
}

.container-17 {
    display: flex;
    align-items: center;
    gap: 32px;
}

.text-wrapper-21 {
    font-family: "Inter-Medium", Helvetica, Arial;
    font-weight: 500;
    color: #202020;
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.2s ease, font-weight 0.2s ease;
}

.text-wrapper-21:hover {
    color: #f3b806;
}

/* Active State Menu Item Rule */
.text-wrapper-21.active {
    color: #f3b806 !important;
    font-family: "Inter-Bold", Helvetica, Arial !important;
    font-weight: 700 !important;
}

.button-4 {
    all: unset;
    box-sizing: border-box;
    padding: 10px 24px;
    background-color: #ffe083;
    border-radius: 4px;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.05);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.button-4:hover {
    background-color: #f3b806;
    transition: background-color 0.2s ease;
}

.text-wrapper-22 {
    font-family: "Inter-Medium", Helvetica, Arial;
    font-weight: 500;
    color: #202020;
    font-size: 16px;
    white-space: nowrap;
}

.menu-toggle-checkbox {
    display: none;
}

.hamburger-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1100;
}

.hamburger-toggle .bar {
    width: 100%;
    height: 3px;
    background-color: #202020;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
}

/* ==========================================================================
   3. VISUAL MARKETING MODULES LAYOUT (HERO & CORE)
   ========================================================================== */
.WOA-home .hero-section {
    max-width: 1280px;
    padding: 0 24px;
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.WOA-home .hero-grid {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    width: 100%;
}

.WOA-home .hero-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.WOA-home .background {
    display: inline-flex;
    padding: 4px 12px;
    background-color: #ffe083;
    border-radius: 2px;
}

.WOA-home .text-wrapper {
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #202020;
    font-size: 12px;
    letter-spacing: 0.6px;
    line-height: 16px;
    white-space: nowrap;
}

.WOA-home .africa-s-talent-your {
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    font-size: 64px;
    letter-spacing: -1.28px;
    line-height: 72px;
    margin: 0;
}

.WOA-home .span {
    color: #161d19;
}

.WOA-home .text-wrapper-2 {
    color: #f2b706;
}

.WOA-home .we-simplify-human-wrapper {
    width: 100%;
    max-width: 512px;
}

.WOA-home .we-simplify-human {
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #3c4a42;
    font-size: 20px;
    line-height: 28px;
    margin: 0;
}

.WOA-home .button-wrapper {
    display: flex;
    width: 100%;
}

.WOA-home .button {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 17px 32px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    overflow: hidden; /* Encapsulates the flowing gradient shine */
    
    /* Brand baseline color backed by an oversized dual-gradient canvas */
    background: linear-gradient(
        135deg, 
        #ffe083 0%, 
        #fff2cc 25%, 
        #ffe083 50%, 
        #f3b806 100%
    );
    background-size: 200% 100%;
    background-position: left center;
    
    /* Hardware-accelerated transitions for seamless animation handling */
    transition: 
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
        background-position 0.6s ease;
        
    box-shadow: 0px 4px 10px rgba(242, 183, 6, 0.1);
}

/* INTERACTIVE ACTIVATION STATE (HOVER) */
.WOA-home .button:hover {
    /* Grows smoothly by 4% */
    transform: scale(1.04); 
    
    /* Flows the gradient shine from left to right across the canvas */
    background-position: right center; 
    
    /* Deepens depth perception shadow as it "lifts" closer to the user screen */
    box-shadow: 0px 12px 28px rgba(242, 183, 6, 0.25);
}

/* OPTIONAL: Adds a fast spring pop response directly when clicked */
.WOA-home .button:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

/* Smooth rotational pop for the icon graphic inside the text wrapper block */
.WOA-home .button .icon-wrapper img {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.WOA-home .button:hover .icon-wrapper img {
    transform: translateX(4px) rotate(-15deg);
}

.WOA-home .text-wrapper-3 {
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #202020;
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
}

.WOA-home .banner-man-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.WOA-home .banner-man {
    width: 100%;
    max-width: 420px;
    height: auto;
    object-fit: cover;
}

/* Core Framework Sections */
.WOA-home .section-core {
    padding: 96px 0;
    align-self: stretch;
    width: 100%;
    background-color: #fff8e4;
}

.WOA-home .container-2 {
    display: flex;
    flex-direction: column;
    max-width: 1280px;
    align-items: center;
    gap: 64px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.WOA-home .container-3 {
    display: flex;
    flex-direction: column;
    max-width: 672px;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.WOA-home .text {
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #161d19;
    font-size: 40px;
    line-height: 48px;
    margin: 0;
}

.WOA-home .p {
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #3c4a42;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}

.WOA-home .framework-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    width: 100%;
}

/* ==========================================================================
   INTERACTIVE GRID INTERACTION MATRIX 
   ========================================================================== */

/* Base configuration for structural wrapper cards */
.WOA-home .framework-card {
    background-color: #ffffff;
    background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
    border-radius: 16px;
    border: 1px solid rgba(187, 202, 191, 0.2);
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    text-decoration: none; /* Prevents default browser links underlines */
    cursor: pointer;
    
    /* Global smooth transition hooks */
    transition: 
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
        background-image 0.5s ease;
}

/* Card image target vectors */
.WOA-home .framework-card .container-wrapper img {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* DEEP DIVE BUTTON COMPONENT STANDARDIZATION */
.WOA-home .framework-card .container-5 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: #fff8e4; /* Starts clean matching background tones */
    border: 1px solid rgba(242, 183, 6, 0.15);
    border-radius: 5px;
    margin-top: auto; /* Pushes button safely to the bottom */
    padding-top: 8px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.WOA-home .framework-card .text-wrapper-7 {
    font-family: "Inter-SemiBold", Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #202020;
}

/* Micro-interaction layout for the arrow asset inside deep dive button */
.WOA-home .framework-card .container-5 .icon-2 {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: block;
}

/* ==========================================================================
   DYNAMIC COMBINED HOVER EFFECT MATRIX
   ========================================================================== */
.WOA-home .framework-card:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #ffe083;
    box-shadow: 0px 16px 36px rgba(242, 183, 6, 0.12);
    
    /* Legible subtle gradient fading down softly into your dark text fields */
    background-image: linear-gradient(180deg, #fffcf3 0%, #ffffff 60%);
}

/* Scale up the graphic icon elegantly on card focus */
.WOA-home .framework-card:hover .container-wrapper img {
    transform: scale(1.15);
}

/* Active animation response inside Deep Dive pill structure */
.WOA-home .framework-card:hover .container-5 {
    background-color: #ffe083;
    border-color: #f3b806;
    box-shadow: 0px 4px 10px rgba(242, 183, 6, 0.15);
}

/* Translate the icon arrow slightly forward horizontally to mimic momentum */
.WOA-home .framework-card:hover .container-5 .icon-2 {
    transform: translateX(4px);
}

.WOA-home .container-wrapper {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    background-color: #ffe083;
    border-radius: 4px;
}

.WOA-home .text-wrapper-5 {
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #161d19;
    font-size: 24px;
    line-height: 32px;
    margin: 0;
}

.WOA-home .text-wrapper-6 {
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #3c4a42;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}

.WOA-home .container-5 {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 12px;
    margin-top: auto;
}

/* ==========================================================================
   UNIVERSAL ROUNDED RECTANGLE HOVER MATRIX (20% BORDER RADIUS)
   ========================================================================== */


/* 1. OUTSOURCING & RECRUITMENT FEATURE FRAMES */
.WOA-home .unified-rounded-frame,
.WOA-home .feature-grid .feature-image-container,
.WOA-home .reverse-layout + .feature-image-container {
    border-radius: 5% !important; /* Enforces 20% configuration universally */
    overflow: hidden;
    transform: translateZ(0);
}
.WOA-home .unified-rounded-frame .image,
.WOA-home .feature-grid .image {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
/* Trigger matching both structural feature rows */
.WOA-home .unified-rounded-frame:hover .image,
.WOA-home .feature-grid .image:hover {
    transform: scale(1.08);
}

/* 2. LOWER BACKGROUND VERIFICATION FRAME */
.WOA-home .container-15 {
    border-radius: 5% !important; /* Rounds out your verification illustration */
    overflow: hidden;
    transform: translateZ(0);
}
.WOA-home .image-2 {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.WOA-home .container-15:hover .image-2 {
    transform: scale(1.08);
}


/* ==========================================================================
   OUTSOURCING FEATURE SECTION PREMIUM EXPANSION
   ========================================================================== */
.WOA-home .outsourcing-feature-section {
    padding: 80px 0; /* Generous structural vertical padding injection */
    width: 100%;
}

.WOA-home .content-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
}

/* IMAGE BOUNDING FRAME TREATMENT */
.WOA-home .unified-rounded-frame {
    border-radius: 14px; /* Locked between 10px - 15px standard matching image_0b10ba.jpg */
    overflow: hidden;
}
.WOA-home .unified-rounded-frame:hover {
    transform: translateY(-2px);
    box-shadow: 0px 16px 36px rgba(0, 0, 0, 0.08);
}

/* INTERACTIVE CHECKLIST ENGINE */
.WOA-home .interactive-checklist {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    margin: 8px 0 16px 0;
}

.WOA-home .interactive-checklist li {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: default;
}

.WOA-home .check-icon-box {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Target matching the golden circles seen in image_0b10ba.jpg */
.WOA-home .check-icon-box .icon-check {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.WOA-home .checklist-text {
    font-family: "Inter-Regular", Arial, sans-serif;
    font-size: 16px;
    color: #3c4a42;
    transition: color 0.2s ease, transform 0.2s ease;
}

/* Micro-interactions for individual checklist item rows */
.WOA-home .interactive-checklist li:hover .check-icon-box {
    transform: scale(1.25) rotate(5deg);
}
.WOA-home .interactive-checklist li:hover .checklist-text {
    color: #000000;
    transform: translateX(2px);
}

/* ==========================================================================
   PREMIUM ROUNDED RECTANGLE OUTSOURCING PILL BUTTON
   ========================================================================== */
.WOA-home .outsourcing-pill-btn {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 12px 12px 28px;
    
    /* Rounded Rectangle Specification Match */
    border-radius: 12px; /* Perfect 10px-15px intermediate standard */
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    
    /* 200% width fluid linear gradient engine */
    background: linear-gradient(135deg, #ffe083 0%, #fff2cc 25%, #ffe083 50%, #f3b806 100%);
    background-size: 200% 100%;
    background-position: left center;
    
    transition: 
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
        background-position 0.6s ease;
        
    box-shadow: 0px 4px 12px rgba(242, 183, 6, 0.15);
}

.WOA-home .outsourcing-pill-btn .text-wrapper-3 {
    font-family: "Inter-SemiBold", Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: #202020;
    font-size: 15px;
    white-space: nowrap;
}

/* Crisp internal baseline white circular anchor frame for the chevron asset */
.WOA-home .outsourcing-pill-btn .btn-icon-circle {
    width: 36px;
    height: 36px;
    background-color: #ffffff;
    border-radius: 8px; /* Matches the rounded rectangle theme framework */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 2px 6px rgba(0,0,0,0.04);
}

.WOA-home .outsourcing-pill-btn .btn-icon-circle .icon-arrow {
    width: 14px;
    height: 14px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* BUTTON ACTION STATE TRIGGERS */
.WOA-home .outsourcing-pill-btn:hover {
    transform: scale(1.04);
    background-position: right center; /* Shifts the core shimmer from left to right */
    box-shadow: 0px 12px 24px rgba(242, 183, 6, 0.25);
}

.WOA-home .outsourcing-pill-btn:hover .btn-icon-circle .icon-arrow {
    transform: translateX(3px);
}

.WOA-home .outsourcing-pill-btn:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

/* ==========================================================================
   DYNAMIC INTERACTIVE DIFFERENTIATOR COLS
   ========================================================================== */
.WOA-home .differentiator {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    width: 100%;
    gap: 32px;
    padding: 10px 0 0 0;
}

.WOA-home .differentiator-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 24px;
    position: relative; /* Anchor hook for our custom border element */
    border-radius: 0 8px 8px 0;
    background-color: rgba(255, 248, 228, 0); /* Invisible baseline */
    
    /* Hardware accelerated transition handles */
    transition: 
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.4s ease;
}

/* CUSTOM BORDER ENGINE: Acts as the left vertical border rule line seen in image_0b97fe.png */
.WOA-home .differentiator-col::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 0;
    width: 2px;
    height: 80%; /* Starts shorter and more subdued */
    background-color: rgba(242, 183, 6, 0.4); /* Muted brand color initially */
    transition: 
        height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        top 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        width 0.3s ease,
        background-color 0.3s ease;
}

/* ==========================================================================
   HOVER ACTIVATION LOGIC MATRIX
   ========================================================================== */
.WOA-home .differentiator-col:hover {
    /* Subtle push to the right and soft background highlight */
    transform: translateX(4px);
    background-color: rgb(255, 255, 255);
}

.WOA-home .differentiator-col:hover::before {
    width: 4px; /* Thickens up perfectly */
    height: 100%; /* Fully scales to encapsulate card height */
    top: 0; /* Moves seamlessly into square alignment positions */
    background-color: #f3b806; /* Becomes vivid brand golden token */
}

/* Quick font transition tweaks to pull attention to active headers */
.WOA-home .differentiator-col .text-wrapper-8 {
    transition: color 0.3s ease;
}
.WOA-home .differentiator-col:hover .text-wrapper-8 {
    color: #000000;
}

.WOA-home .vertical-border,
.WOA-home .vertical-border-2,
.WOA-home .vertical-border-3 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-left: 24px;
    border-left: 2px solid #ffe083;
}

.WOA-home .text-wrapper-8 {
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #202020;
    margin: 0;
}

.WOA-home .text-wrapper-9 {
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #202020;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}

/* ==========================================================================
   4. DUAL PORTAL PORTS LAYOUT
   ========================================================================== */
.WOA-home .section-dual-portal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    width: 100%;
    min-height: 420px;
}

.portal-card {
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    box-sizing: border-box;
}

/* BACKGROUND 1: Subtle Left Gold Linear Radial Mix */
.portal-left {
    background: linear-gradient(135deg, #ffe596 0%, #ffe083 100%);
}

/* BACKGROUND 2: Deep Off-Black Pearl Linear Charcoal Mix */
.portal-right {
    background: linear-gradient(135deg, #242424 0%, #1a1a1a 100%);
}

/* Typography Overrides to lock in with image_0b887e.png layout weights */
.portal-left .text-wrapper-5 {
    font-family: "Inter-Bold", Arial, sans-serif;
    padding-top: 20px;
    font-size: 40px;
    font-weight: 700;
    color: #202020;
    line-height: 48px;
}
.portal-right .text-wrapper-7 {
    font-family: "Inter-Bold", Arial, sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: #ffffff;
    line-height: 48px;
}
.portal-left .our-enterprise {
    color: #3c4a42;
    font-size: 16px;
    line-height: 26px;
}
.portal-right .text {
    color: #cccccc;
    font-size: 16px;
    line-height: 26px;
    font-weight: 100;
}

/* ==========================================================================
   PORTED GRADIENT SHINE ACTION BUTTONS ENGINE
   ========================================================================== */
.portal-btn {
    display: inline-block;
    padding: 16px 36px;
    border-radius: 8px;
    font-family: "Inter-SemiBold", Arial, sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    background-size: 200% 100%;
    background-position: left center;
    
    /* Hardware accelerated animation layout hooks */
    transition: 
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
        background-position 0.6s ease;
}

/* BUTTON VARIANT A: Left Side White Pearlescent Shimmer */
.btn-white {
    background-image: linear-gradient(135deg, #ffffff 0%, #fffbf2 25%, #ffffff 50%, #ffeec2 100%);
    color: #202020;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.05);
}

/* BUTTON VARIANT B: Right Side Golden Shimmer */
.btn-gold {
    background-image: linear-gradient(135deg, #ffe083 0%, #fff2cc 25%, #ffe083 50%, #f3b806 100%);
    color: #202020;
    box-shadow: 0px 4px 12px rgba(242, 183, 6, 0.15);
}

/* HOVER ANIMATION TRIGGER LAYER */
.portal-btn:hover {
    transform: scale(1.04);
    background-position: right center;
}

.btn-white:hover {
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.12);
}

.btn-gold:hover {
    box-shadow: 0px 12px 28px rgba(242, 183, 6, 0.3);
}

.portal-btn:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

/* Responsive breakpoint scaling handles for small mobile viewports */
@media (max-width: 768px) {
    .section-dual-portal {
        grid-template-columns: 1fr;
    }
    .portal-card {
        padding: 60px 32px;
    }
}

.WOA-home .background-2,
.WOA-home .background-3 {
    padding: 120px 48px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.WOA-home .background-2 { background-color: #ffe083; }
.WOA-home .background-3 { background-color: #202020; }

.WOA-home .text-wrapper-10 {
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #000000;
    font-size: 40px;
    line-height: 48px;
    margin: 0 0 16px 0;
}

.WOA-home .text-wrapper-11 {
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #f4fbf4;
    font-size: 40px;
    line-height: 48px;
    margin: 0 0 16px 0;
}

.WOA-home .our-enterprise {
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    line-height: 28px;
    opacity: 0.9;
    margin: 0 0 10px 0;
}

.WOA-home .text-2 {
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #f4fbf4;
    font-size: 18px;
    line-height: 28px;
    opacity: 0.8;
    margin: 0 0 32px 0;
}

.WOA-home .link,
.WOA-home .link-2 {
    display: inline-flex;
    padding: 16px 32px;
    border-radius: 8px;
    cursor: pointer;
}

.WOA-home .link { background-color: #ffffff; }
.WOA-home .link-2 { background-color: #ffe083; }

/* ==========================================================================
   5. LONG FORMAT LAYOUT COMPLIANCE TRACKS
   ========================================================================== */
.WOA-home .container-wrapper-2 {
    display: flex;
    flex-direction: column;
    max-width: 1280px;
    padding: 40px 24px;
    position: relative;
    width: 100%;
    margin: 0 auto;
    border-bottom: 1px solid rgba(187, 202, 191, 0.2);
}

.force-move{
    margin-top: 40px !important;
}

.WOA-home .feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 64px;
    align-items: center;
    width: 100%;
}

.WOA-home .container-7 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.WOA-home .text-wrapper-13,
.WOA-home .text-wrapper-16 {
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #202020;
    font-size: 30px;
    line-height: 48px;
    margin: 0;
}

.WOA-home .text-wrapper-14 {
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #202020;
    font-size: 18px;
    line-height: 28px;
    margin: 0;
}

ul.list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0 0 0;
    margin: 0;
    list-style: none !important;
}

.WOA-home .div-3 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.WOA-home .icon-6 {
    width: 20px;
    height: 20px;
}

.WOA-home .button-2 {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-top: 16px;
    cursor: pointer;
}

.WOA-home .text-wrapper-15 {
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #202020;
    font-size: 16px;
    line-height: 24px;
}

.WOA-home .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    width: 100%;
    padding: 16px 0 32px;
}

.WOA-home .stat-card {
    padding: 24px;
    background-color: #fff8e4;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    border: 1px solid rgba(242, 183, 6, 0.1);
    
    /* Hardware accelerated transition curves */
    transition: 
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.3s ease;
}

/* Hidden decorative line indicator inside the card box */
.WOA-home .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0; /* Hidden baseline height */
    background-color: #f3b806;
    border-radius: 8px 0 0 8px;
    transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Stat card hover state activations */
.WOA-home .stat-card:hover {
    transform: translateY(-4px);
    background-color: #ffffff;
    box-shadow: 0px 10px 24px rgba(242, 183, 6, 0.12);
    border-color: #ffe083;
}

.WOA-home .stat-card:hover::before {
    height: 100%; /* Drops line element seamlessly to full height */
}

.WOA-home .background-4,
.WOA-home .background-5 {
    padding: 24px;
    background-color: #ffe083;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Base text elements matching image metrics */
.WOA-home .text-wrapper-17 {
    font-family: "Inter-Bold", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #202020;
    font-size: 30px;
    line-height: 32px;
}
.WOA-home .text-wrapper-18 {
    font-family: "Inter-SemiBold", Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: #3c4a42;
    font-size: 13px;
    line-height: 18px;
}

/* ==========================================================================
   PREMIUM SOURCING PILL BUTTON ENGINE
   ========================================================================== */
.WOA-home .sourcing-pill-btn {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 12px 12px 28px; /* Room for left padding breathing space */
    border-radius: 10px; /* Turns the square button into a pill layout */
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    
    /* Dual gradient canvas engine */
    background: linear-gradient(135deg, #ffe083 0%, #fff2cc 25%, #ffe083 50%, #f3b806 100%);
    background-size: 200% 100%;
    background-position: left center;
    
    transition: 
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
        background-position 0.6s ease;
        
    box-shadow: 0px 4px 12px rgba(242, 183, 6, 0.15);
}

.WOA-home .sourcing-pill-btn .text-wrapper-3 {
    font-family: "Inter-SemiBold", Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: #202020;
    font-size: 15px;
    white-space: nowrap;
}

/* Inner white circle backing for the icon arrow element */
.WOA-home .sourcing-pill-btn .btn-icon-circle {
    width: 36px;
    height: 36px;
    background-color: #ffffff;
    border-radius: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 2px 6px rgba(0,0,0,0.05);
}

.WOA-home .sourcing-pill-btn .btn-icon-circle .icon-arrow {
    width: 14px;
    height: 14px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* HOVER TRIGGERS LAYER */
.WOA-home .sourcing-pill-btn:hover {
    transform: scale(1.04);
    background-position: right center; /* Flows gradient shine right across */
    box-shadow: 0px 12px 24px rgba(242, 183, 6, 0.25);
}

/* Translates arrow element slightly inside circle frame on hover */
.WOA-home .sourcing-pill-btn:hover .btn-icon-circle .icon-arrow {
    transform: translateX(2px);
}

.WOA-home .sourcing-pill-btn:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

.WOA-home .button-3 {
    all: unset;
    box-sizing: border-box;
    padding: 16px 32px;
    background-color: #f2b706;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.WOA-home .img-2,
.WOA-home .image {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    border-radius: 12px;
}

/* ==========================================================================
   6. LEARNING & HOVER MATRICES
   ========================================================================== */
.WOA-home .section-learning {
    padding: 96px 0;
    align-self: stretch;
    width: 100%;
    background-color: #ffe083;
}

.WOA-home .container-10 {
    display: flex;
    flex-direction: column;
    max-width: 1280px;
    gap: 48px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.WOA-home .container-11 {
    display: flex;
    flex-direction: column;
    max-width: 768px;
    gap: 24px;
}

.WOA-home .learning-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    width: 100%;
}

.WOA-home .background-border,
.WOA-home .background-border-2,
.WOA-home .background-border-3 {
    background-color: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(187, 202, 191, 0.2);
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* ==========================================================================
   7. VERIFICATION MATRIX
   ========================================================================== */
.WOA-home .verification-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 64px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 96px 24px;
    align-items: center;
    width: 100%;
}

.WOA-home .verification-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.WOA-home .border {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid rgba(187, 202, 191, 0.3);
}

.WOA-home .text-3 {
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #202020;
    font-size: 14px;
    line-height: 20px;
    margin: 0;
}

.WOA-home .text-4,
.WOA-home .text-5 {
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #202020;
    font-size: 14px;
    line-height: 20px;
    margin: 0;
}

.WOA-home .image-2 {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    border-radius: 12px;
}

.WOA-home .overlay-blur {
    position: absolute;
    top: -16px;
    left: -16px;
    width: 96px;
    height: 96px;
    background-color: rgba(0, 108, 73, 0.1);
    border-radius: 12px;
    filter: blur(20px);
}

/* ==========================================================================
   8. PURE GLOBAL VISUAL FOOTER SYSTEM
   ========================================================================== */
.footer {
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding: 80px 0;
    background-color: #202020;
    width: 100%;
}

.container-18 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 48px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.container-19 {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.text-wrapper-23 {
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #fffaed;
    font-size: 24px;
    line-height: 32px;
}

.text-6 {
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #dde4dd;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}

.text-wrapper-24 {
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #f2b706;
    font-size: 14px;
    letter-spacing: 0.7px;
    line-height: 20px;
    padding-bottom: 16px;
}

.list-2 {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.text-wrapper-25 {
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #dde4dd;
    font-size: 16px;
    line-height: 24px;
    text-decoration: none;
    display: block;
}

.horizontal-border {
    display: flex;
    max-width: 1280px;
    align-items: center;
    justify-content: space-between;
    padding: 32px 24px 0;
    margin: 0 auto;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
    gap: 16px;
}

.text-7 {
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #dde4dd;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}

.container-25 {
    display: flex;
    align-items: center;
    gap: 24px;
}

.text-8 {
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #dde4dd;
    font-size: 14px;
    line-height: 20px;
    margin: 0;
}

/* ==========================================================================
   9. PURE CSS MEDIA QUERY BREAKPOINTS LAYOUT ENGINE
   ========================================================================== */
@media (max-width: 991px) {
    .WOA-home .hero-grid {
        flex-direction: column-reverse;
        text-align: center;
    }
    
    .WOA-home .div { align-items: center; }
    .WOA-home .button-wrapper { justify-content: center; }
    .reverse-layout { display: flex; flex-direction: column-reverse; }

    /* Hide the hero illustration completely on tablet/mobile views */
    .WOA-home .banner-man-wrapper {
        display: none !important;
    }

    /* Activate Hamburger Layout Display */
    .hamburger-toggle {
        display: flex;
    }

    /* Target mobile overlay drawer menu */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background-color: #202020;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 100px 40px !important;
        gap: 24px !important;
        transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: -10px 0 30px rgba(0,0,0,0.15);
    }

    /* Checkbox Hack Navigation Controls */
    .menu-toggle-checkbox:checked ~ .nav-menu {
        right: 0;
    }

    .menu-toggle-checkbox:checked ~ .hamburger-toggle .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
        background-color: #ffffff;
    }

    .menu-toggle-checkbox:checked ~ .hamburger-toggle .bar:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle-checkbox:checked ~ .hamburger-toggle .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
        background-color: #ffffff;
    }

    .nav-menu .text-wrapper-21 {
        color: #ffffff;
    }
    
    /* Mobile Active State Support color shift overrides */
    .nav-menu .text-wrapper-21.active {
        color: #f3b806 !important;
    }

    /* Mobile Accordion Dropdown Setup mechanics overrides */
    .nav-item, .dropdown-toggle { width: 100%; }
    .dropdown { flex-direction: column; align-items: flex-start; }
    .dropdown-caret { border-top-color: #ffffff; }

    .dropdown-menu {
        display: none;
        width: 100%;
        padding: 8px 0 0 16px;
        background: transparent;
        box-shadow: none;
        border: none;
    }
    
    .dropdown:hover .dropdown-menu {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .dropdown:hover .dropdown-caret {
        transform: rotate(180deg);
    }

    .dropdown-item {
        font-family: "Inter-Medium", Helvetica, Arial;
        font-size: 15px;
        color: #dde4dd;
        padding: 6px 0;
        display: block;
        text-decoration: none;
        opacity: 0.8;
    }
}

@media (max-width: 600px) {
    .WOA-home .africa-s-talent-your { font-size: 36px; line-height: 44px; }
    .WOA-home .text { font-size: 28px; line-height: 36px; }
    .WOA-home .stats-grid { grid-template-columns: 1fr; }
    .horizontal-border { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   10. SOLUTIONS DROPDOWN HOVER PURE CONTROLS (DESKTOP MODE)
   ========================================================================== */
.nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.dropdown-caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-top: 2px;
    vertical-align: middle;
    border-top: 4px solid #202020;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    transition: transform 0.2s ease;
}

@media (min-width: 992px) {
    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1050;
        min-width: 240px;
        padding: 12px 0;
        margin: 8px 0 0;
        background-color: #ffffff;
        border: 1px solid rgba(32, 32, 32, 0.08);
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        
        /* 3-SECOND FADE MECHANICS */
        display: block;
        visibility: hidden;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 3.0s ease, transform 3.0s ease, visibility 0s linear 3.0s;
    }

    .dropdown:hover .dropdown-menu {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0s; 
    }
    
    .dropdown:hover .dropdown-caret {
        transform: rotate(180deg);
    }

    .dropdown-item {
        display: block;
        width: 100%;
        padding: 10px 20px;
        font-family: "Inter-Regular", Helvetica, Arial;
        font-weight: 400;
        color: #3c4a42;
        text-decoration: none;
        white-space: nowrap;
        transition: all 0.2s ease;
    }

    .dropdown-item:hover {
        color: #202020;
        background-color: #fff8e4;
        padding-left: 24px;
    }
}

/* ==========================================================================
   11. RECRUITMENT HERO OPTIMIZATION WITH GEOMETRIC SPIRAL BACKGROUND
   ========================================================================== */
.WOA-home .recruitment-hero {
    height: 260px;
    display: flex;
    align-items: center;
    background-color: #fffaed;
    
    /* Pure CSS Abstract Spiral Vector Overlay Engine */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M100,100 C120,60 160,80 160,110 C160,150 110,170 80,150 C40,120 50,60 90,40 C140,20 180,70 170,120 C160,180 90,190 50,160 C10,120 20,40 80,20 C140,0 200,60 180,130' fill='none' stroke='%23f2b706' stroke-width='1.5' stroke-opacity='0.15'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10% center;
    background-size: contain;
}

.recruitment-hero .africa-s-talent-your {
    font-size: 44px;
    line-height: 50px;
}

@media (max-width: 991px) {
    .WOA-home .recruitment-hero {
        height: auto;
        padding: 40px 24px;
        background-position: center bottom;
    }
}