/* SJI Homepage Hero */
.home-hero{
    position:relative;
    overflow:hidden;
    min-height:600px;
    padding:62px 5vw 48px;
    display:flex;
    align-items:center;
    background:
        radial-gradient(circle at 82% 35%,rgba(48,133,255,.22),transparent 30%),
        radial-gradient(circle at 15% 85%,rgba(0,196,255,.10),transparent 28%),
        linear-gradient(120deg,#081d3b 0%,#0d3f88 48%,#1768ae 100%);
}
.home-hero::before{
    content:"";
    position:absolute;
    width:520px;height:520px;
    right:-180px;top:-220px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:50%;
}
.home-hero-grid{
    position:relative;z-index:2;
    width:min(1380px,100%);
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);
    gap:45px;
    align-items:center;
}
.home-hero-content{max-width:790px}
.home-hero .home-eyebrow{
    margin-bottom:18px;
    color:#cfe3ff!important;
    font-size:.86rem;font-weight:800;
    letter-spacing:.12em;text-transform:uppercase;
}
.home-hero h1{
    margin:0;
    color:#fff!important;
    font-family:Montserrat,Arial,sans-serif;
    font-size:clamp(2.55rem,4.15vw,4.05rem);
    line-height:1.08;
    letter-spacing:-.045em;
    font-weight:800;
}
.home-hero-text{
    max-width:720px;margin:20px 0 0;
    color:rgba(255,255,255,.88)!important;
    font-size:1.13rem;line-height:1.72;
}
.home-hero-actions{
    display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;
}
.home-hero-actions .btn{
    min-height:54px;padding:13px 24px;
    border-radius:10px;font-weight:700;
}
.home-hero-actions .btn-light{color:#09244a}
.home-hero-trust{
    display:flex;flex-wrap:wrap;gap:22px;
    margin-top:25px;
    color:rgba(255,255,255,.86);
    font-size:.94rem;
}
.home-hero-trust span{display:inline-flex;align-items:center;gap:7px}
.home-hero-trust i{color:#bfe1ff}

.home-hero-visual{
    position:relative;min-height:420px;
    display:flex;align-items:center;justify-content:center;
}
.hero-orbit{
    width:310px;height:310px;border-radius:50%;
    border:1px solid rgba(255,255,255,.20);
    box-shadow:0 0 0 38px rgba(255,255,255,.025),0 0 0 78px rgba(255,255,255,.018);
}
.hero-orbit::before,.hero-orbit::after{
    content:"";position:absolute;inset:58px;
    border-radius:50%;border:1px solid rgba(92,192,255,.20);
}
.hero-orbit::after{inset:110px;border-color:rgba(255,255,255,.16)}
.hero-center{
    position:absolute;width:175px;height:175px;border-radius:50%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;
    background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.06));
    border:1px solid rgba(255,255,255,.24);
    box-shadow:0 25px 70px rgba(0,0,0,.22);
    backdrop-filter:blur(12px);
}
.hero-center i{margin-bottom:8px;color:#d8ecff;font-size:2rem}
.hero-center strong{color:#fff;font-size:1.03rem;line-height:1.25}
.hero-center small{margin-top:8px;color:rgba(255,255,255,.70);font-size:.68rem}

.hero-float{
    position:absolute;z-index:3;
    display:flex;align-items:center;gap:11px;
    min-width:205px;padding:13px 15px;
    border:1px solid rgba(255,255,255,.17);
    border-radius:14px;
    background:rgba(7,29,63,.62);
    box-shadow:0 18px 45px rgba(0,0,0,.18);
    backdrop-filter:blur(10px);
}
.hero-float i{
    width:38px;height:38px;flex:0 0 38px;
    display:flex;align-items:center;justify-content:center;
    border-radius:10px;background:rgba(255,255,255,.11);
    color:#d9edff;font-size:1.15rem;
}
.hero-float strong,.hero-float small{display:block}
.hero-float strong{color:#fff;font-size:.88rem}
.hero-float small{margin-top:2px;color:rgba(255,255,255,.65);font-size:.72rem}
.hero-float-1{top:25px;right:0}
.hero-float-2{bottom:48px;left:0}
.hero-float-3{bottom:0;right:18px}

@media(max-width:1100px){
    .home-hero{padding:65px 35px 48px}
    .home-hero-grid{grid-template-columns:1fr;gap:20px}
    .home-hero-content{max-width:900px;margin:0 auto;text-align:center}
    .home-hero-text{margin-left:auto;margin-right:auto}
    .home-hero-actions,.home-hero-trust{justify-content:center}
    .home-hero-visual{min-height:350px}
    .hero-float-1{right:10%}
    .hero-float-2{left:10%}
}
@media(max-width:575px){
    .home-hero{min-height:auto;padding:58px 20px 42px}
    .home-hero h1{font-size:clamp(2.2rem,11vw,3rem);line-height:1.1}
    .home-hero-text{font-size:1rem;line-height:1.65}
    .home-hero-actions{flex-direction:column}
    .home-hero-actions .btn{width:100%}
    .home-hero-trust{flex-direction:column;gap:9px;align-items:center}
    .home-hero-visual{min-height:315px;transform:scale(.80);margin:-20px -35px -15px}
    .hero-orbit{width:285px;height:285px}
    .hero-center{width:150px;height:150px}
    .hero-float{min-width:172px;padding:10px 12px}
    .hero-float-1{top:0;right:0}
    .hero-float-2{bottom:50px;left:0}
    .hero-float-3{bottom:0;right:0}
}

/* =========================================
   TRAINING CATEGORY CARDS
   ========================================= */

.training-category-card {
    border: 1px solid transparent !important;
    border-radius: 18px !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Professionals - light blue */
.training-professionals {
    background: #eef5ff !important;
    border-color: #cfe0ff !important;
}

/* Students - light purple */
.training-students {
    background: #f4efff !important;
    border-color: #ddd0ff !important;
}

/* Faculty & Educators - light green */
.training-faculty {
    background: #eefaf4 !important;
    border-color: #ccebd9 !important;
}

/* Teams & Organizations - light yellow */
.training-teams {
    background: #fff7e8 !important;
    border-color: #f3dfb3 !important;
}

/* Category icons */
.training-professionals .home-icon {
    background: #dceaff !important;
    color: #0d47a1 !important;
}

.training-students .home-icon {
    background: #e8ddff !important;
    color: #6a3fb5 !important;
}

.training-faculty .home-icon {
    background: #daf3e5 !important;
    color: #16804b !important;
}

.training-teams .home-icon {
    background: #ffedc7 !important;
    color: #b36b00 !important;
}

.training-category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 35px rgba(13, 71, 161, 0.14);
}

/* =========================================================
   HERO VISUAL - FINAL VISIBILITY / POSITIONING FIX
   Homepage only. Do not move these rules to styles.css.
   ========================================================= */
.home-hero-visual{
    position:relative;
    min-height:460px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
}

.hero-orbit{
    position:relative;
    z-index:1;
    width:320px;
    height:320px;
    flex:0 0 320px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.24);
    box-shadow:
        0 0 0 38px rgba(255,255,255,.035),
        0 0 0 78px rgba(255,255,255,.022);
}

.hero-orbit::before,
.hero-orbit::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.hero-orbit::before{
    inset:58px;
    border:1px solid rgba(92,192,255,.28);
}

.hero-orbit::after{
    inset:110px;
    border:1px solid rgba(255,255,255,.22);
}

.hero-center{
    position:absolute;
    z-index:3;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:178px;
    height:178px;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:linear-gradient(145deg,rgba(255,255,255,.24),rgba(255,255,255,.09));
    border:1px solid rgba(255,255,255,.30);
    box-shadow:0 25px 70px rgba(0,0,0,.24);
    backdrop-filter:blur(12px);
}

.hero-center i{
    margin-bottom:8px;
    color:#e8f4ff;
    font-size:2.05rem;
}

.hero-center strong{
    color:#fff;
    font-size:1.04rem;
    line-height:1.25;
}

.hero-center small{
    margin-top:8px;
    color:rgba(255,255,255,.78);
    font-size:.70rem;
}

.hero-float{
    position:absolute;
    z-index:5;
    display:flex;
    align-items:center;
    gap:11px;
    min-width:220px;
    max-width:245px;
    padding:14px 16px;
    border:1px solid rgba(255,255,255,.20);
    border-radius:15px;
    background:rgba(7,29,63,.78);
    box-shadow:0 18px 45px rgba(0,0,0,.22);
    backdrop-filter:blur(10px);
}

.hero-float i{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    background:rgba(255,255,255,.13);
    color:#e0f1ff;
    font-size:1.18rem;
}

.hero-float strong,
.hero-float small{
    display:block;
}

.hero-float strong{
    color:#fff;
    font-size:.90rem;
    line-height:1.3;
}

.hero-float small{
    margin-top:3px;
    color:rgba(255,255,255,.72);
    font-size:.73rem;
    line-height:1.35;
}

.hero-float-1{top:18px;right:-8px}
.hero-float-2{bottom:58px;left:-8px}
.hero-float-3{bottom:0;right:12px}

@media(max-width:1100px){
    .home-hero-visual{
        min-height:430px;
        margin-top:8px;
    }
    .hero-float-1{right:5%}
    .hero-float-2{left:5%}
    .hero-float-3{right:8%}
}

@media(max-width:575px){
    .home-hero-visual{
        min-height:390px;
        transform:none;
        margin:10px 0 0;
    }
    .hero-orbit{
        width:270px;
        height:270px;
        flex-basis:270px;
    }
    .hero-center{
        width:150px;
        height:150px;
    }
    .hero-center strong{font-size:.92rem}
    .hero-center small{font-size:.62rem}
    .hero-float{
        min-width:165px;
        max-width:185px;
        padding:10px 11px;
        gap:8px;
    }
    .hero-float i{
        width:34px;
        height:34px;
        flex-basis:34px;
        font-size:1rem;
    }
    .hero-float strong{font-size:.78rem}
    .hero-float small{font-size:.62rem}
    .hero-float-1{top:0;right:0}
    .hero-float-2{bottom:55px;left:0}
    .hero-float-3{bottom:0;right:0}
}


/* =========================================================
   FINAL HOMEPAGE HERO + COLOURED BUSINESS CARDS
   ========================================================= */

/* Four capability panels around the hero visual */
.home-hero-visual .hero-float-1{top:18px;left:-8px;right:auto}
.home-hero-visual .hero-float-2{top:18px;right:-8px;left:auto}
.home-hero-visual .hero-float-3{bottom:18px;left:-8px;right:auto}
.home-hero-visual .hero-float-4{bottom:0;right:12px;left:auto}

/* Four distinct capability colours */
.home-hero-visual .hero-float-1 i{background:#e8ddff;color:#6a3fb5}
.home-hero-visual .hero-float-2 i{background:#dceaff;color:#0d47a1}
.home-hero-visual .hero-float-3 i{background:#daf3e5;color:#16804b}
.home-hero-visual .hero-float-4 i{background:#fff0d9;color:#c46a12}

/* Make the five homepage business sections follow the same coloured-card language
   already used by Explore Our Solutions and Training cards. */
.challenge-card,
.what-card,
.who-card,
.why-card,
.approach-card{
    border:1px solid transparent !important;
    transition:transform .22s ease, box-shadow .22s ease;
}

.challenge-card:hover,
.what-card:hover,
.who-card:hover,
.why-card:hover,
.approach-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 32px rgba(30,50,80,.12);
}

/* Business Challenges - blue */
.challenge-card:nth-child(1),
.challenge-card:nth-child(4){background:#e5f0ff !important;border-color:#c9ddff !important}
.challenge-card:nth-child(2),
.challenge-card:nth-child(5){background:#e5f7ec !important;border-color:#c7ecd6 !important}
.challenge-card:nth-child(3),
.challenge-card:nth-child(6){background:#fff1df !important;border-color:#ffdfb5 !important}

/* What We Do - purple / blue / green */
.what-card{border-radius:18px !important}
.service-card-link:nth-child(1) .what-card{background:#f1e8ff !important;border-color:#dfc9ff !important}
.service-card-link:nth-child(2) .what-card{background:#e5f0ff !important;border-color:#c9ddff !important}
.service-card-link:nth-child(3) .what-card{background:#e5f7ec !important;border-color:#c7ecd6 !important}

/* Who We Help - six alternating colours */
.who-card:nth-child(1),.who-card:nth-child(4){background:#e5f0ff !important;border-color:#c9ddff !important}
.who-card:nth-child(2),.who-card:nth-child(5){background:#f1e8ff !important;border-color:#dfc9ff !important}
.who-card:nth-child(3),.who-card:nth-child(6){background:#e5f7ec !important;border-color:#c7ecd6 !important}
.who-card i{font-size:2rem}

/* Why Us - warm/cool alternating */
.why-card:nth-child(1),.why-card:nth-child(4){background:#e1f6f4 !important;border-color:#c4ebe7 !important}
.why-card:nth-child(2),.why-card:nth-child(5){background:#fbe7f2 !important;border-color:#f3c9df !important}
.why-card:nth-child(3),.why-card:nth-child(6){background:#fff1df !important;border-color:#ffdfb5 !important}

/* Our Approach - six process cards */
.approach-card{
    padding:24px 16px !important;
    border-radius:18px;
}
.approach-card:nth-child(1){background:#e5f0ff !important;border-color:#c9ddff !important}
.approach-card:nth-child(2){background:#f1e8ff !important;border-color:#dfc9ff !important}
.approach-card:nth-child(3){background:#e5f7ec !important;border-color:#c7ecd6 !important}
.approach-card:nth-child(4){background:#fff1df !important;border-color:#ffdfb5 !important}
.approach-card:nth-child(5){background:#e1f6f4 !important;border-color:#c4ebe7 !important}
.approach-card:nth-child(6){background:#fbe7f2 !important;border-color:#f3c9df !important}

/* Keep text printer-friendly and readable on coloured cards */
.challenge-card h3,.what-card h3,.who-card h3,.why-card h3,.approach-card h3{color:#172b4d !important}
.challenge-card p,.what-card p,.who-card p,.why-card p,.approach-card p{color:#475569 !important}

/* Matching icon treatment */
.challenge-card .home-icon,.what-card .home-icon,.why-card .home-icon{
    background:rgba(255,255,255,.62) !important;
}

@media(max-width:1100px){
    .home-hero-visual .hero-float-1{top:18px;left:5%;right:auto}
    .home-hero-visual .hero-float-2{top:18px;right:5%;left:auto}
    .home-hero-visual .hero-float-3{bottom:58px;left:5%;right:auto}
    .home-hero-visual .hero-float-4{bottom:0;right:8%;left:auto}
}

@media(max-width:575px){
    .home-hero-visual .hero-float-1{top:0;left:0;right:auto}
    .home-hero-visual .hero-float-2{top:0;right:0;left:auto}
    .home-hero-visual .hero-float-3{bottom:55px;left:0;right:auto}
    .home-hero-visual .hero-float-4{bottom:0;right:0;left:auto}
}


/* =========================================================
   SJI HERO VISUAL - FINAL 4-CARD VERSION
   Uses unique sji-hero-* classes to avoid conflicts with
   older hero-float rules elsewhere in home.css.
   ========================================================= */

.home-hero-visual{
    position:relative;
    width:100%;
    min-height:440px;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
    gap:22px;
    align-items:center;
    justify-items:center;
    overflow:visible;
}

.sji-hero-orbit{
    position:absolute;
    z-index:1;
    left:50%;
    top:50%;
    width:315px;
    height:315px;
    transform:translate(-50%,-50%);
    border:1px solid rgba(255,255,255,.24);
    border-radius:50%;
    box-shadow:
        0 0 0 38px rgba(255,255,255,.035),
        0 0 0 78px rgba(255,255,255,.022);
}

.sji-hero-orbit::before,
.sji-hero-orbit::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.sji-hero-orbit::before{
    inset:55px;
    border:1px solid rgba(92,192,255,.28);
}

.sji-hero-orbit::after{
    inset:105px;
    border:1px solid rgba(255,255,255,.20);
}

.sji-hero-center{
    position:absolute;
    z-index:4;
    left:50%;
    top:50%;
    width:174px;
    height:174px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:linear-gradient(145deg,rgba(105,171,235,.72),rgba(44,103,175,.72));
    border:1px solid rgba(255,255,255,.35);
    box-shadow:0 20px 55px rgba(0,0,0,.20);
    backdrop-filter:blur(8px);
}

.sji-hero-center i{
    margin-bottom:7px;
    color:#fff;
    font-size:2rem;
}

.sji-hero-center strong{
    color:#fff;
    font-size:1.03rem;
    line-height:1.25;
}

.sji-hero-center small{
    margin-top:8px;
    color:rgba(255,255,255,.82);
    font-size:.65rem;
    line-height:1.3;
}

.sji-hero-card{
    position:relative;
    z-index:5;
    width:100%;
    max-width:250px;
    min-height:102px;
    padding:14px 16px;
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid rgba(255,255,255,.20);
    border-radius:15px;
    background:rgba(7,29,63,.82);
    box-shadow:0 14px 35px rgba(0,0,0,.20);
    backdrop-filter:blur(10px);
}

.sji-hero-card-1{grid-column:1;grid-row:1;align-self:start;justify-self:start}
.sji-hero-card-2{grid-column:2;grid-row:1;align-self:start;justify-self:end}
.sji-hero-card-3{grid-column:1;grid-row:2;align-self:end;justify-self:start}
.sji-hero-card-4{grid-column:2;grid-row:2;align-self:end;justify-self:end}

.sji-hero-card-icon{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    font-size:1.18rem;
}

.sji-hero-card-1 .sji-hero-card-icon{
    background:#e8ddff;
    color:#6a3fb5;
}

.sji-hero-card-2 .sji-hero-card-icon{
    background:#dceaff;
    color:#0d47a1;
}

.sji-hero-card-3 .sji-hero-card-icon{
    background:#daf3e5;
    color:#16804b;
}

.sji-hero-card-4 .sji-hero-card-icon{
    background:#fff0d9;
    color:#c46a12;
}

.sji-hero-card-content{
    min-width:0;
}

.sji-hero-card-content strong,
.sji-hero-card-content small{
    display:block;
}

.sji-hero-card-content strong{
    color:#fff;
    font-size:.88rem;
    line-height:1.3;
}

.sji-hero-card-content small{
    margin-top:3px;
    color:rgba(255,255,255,.72);
    font-size:.70rem;
    line-height:1.35;
}

/* Tablet */
@media(max-width:1100px){
    .home-hero-visual{
        min-height:430px;
        max-width:720px;
        margin:10px auto 0;
    }
}

/* Mobile: keep four cards visible without overlap */
@media(max-width:575px){
    .home-hero-visual{
        min-height:470px;
        grid-template-columns:1fr;
        grid-template-rows:repeat(4,auto);
        gap:10px;
        padding:0 8px;
    }

    .sji-hero-orbit{
        width:260px;
        height:260px;
    }

    .sji-hero-center{
        width:145px;
        height:145px;
    }

    .sji-hero-center strong{font-size:.88rem}
    .sji-hero-center small{font-size:.58rem}

    .sji-hero-card{
        max-width:240px;
        min-height:76px;
        padding:10px 12px;
    }

    .sji-hero-card-1,
    .sji-hero-card-2,
    .sji-hero-card-3,
    .sji-hero-card-4{
        grid-column:1;
        justify-self:center;
        align-self:center;
    }

    .sji-hero-card-1{grid-row:1}
    .sji-hero-card-2{grid-row:2}
    .sji-hero-card-3{grid-row:3}
    .sji-hero-card-4{grid-row:4}

    .sji-hero-card-icon{
        width:34px;
        height:34px;
        flex-basis:34px;
        font-size:1rem;
    }

    .sji-hero-card-content strong{font-size:.78rem}
    .sji-hero-card-content small{font-size:.61rem}
}