/* ==========================================================
   AlterMind - Career Crisis
   ========================================================== */


/* ==========================================================
   HERO
   ========================================================== */

.career-hero{

    position:relative;

    overflow:hidden;

    padding:190px 0 120px;

    background:
    radial-gradient(circle at top right,
    rgba(124,92,255,.18),
    transparent 45%),

    radial-gradient(circle at bottom left,
    rgba(0,212,255,.12),
    transparent 40%);

}

.career-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    rgba(255,255,255,.02),
    rgba(255,255,255,.01));

}

.career-hero .section-title{

    max-width:900px;

    margin:auto;

}

.career-hero span{

    display:inline-flex;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:var(--accent);

    font-weight:700;

    margin-bottom:24px;

}

.career-hero h1{

    font-size:clamp(46px,6vw,70px);

    color:#fff;

    margin-bottom:24px;

}

.career-hero p{

    color:rgba(255,255,255,.74);

    max-width:760px;

    margin:auto;

    line-height:1.9;

}

.career-hero .am-buttons{

    justify-content:center;

    margin-top:45px;

    gap:20px;

}


/* ==========================================================
   GLOBAL
   ========================================================== */

.career-overview,
.career-outcomes,
.career-audience,
.career-faq,
.career-cta{

    padding:110px 0;

}

.career-overview .section-title,
.career-outcomes .section-title,
.career-audience .section-title,
.career-faq .section-title,
.career-cta .section-title{

    max-width:760px;

    margin:0 auto 70px;

}

.career-overview h2,
.career-outcomes h2,
.career-audience h2,
.career-faq h2,
.career-cta h2{

    font-size:clamp(34px,4vw,50px);

    color:#fff;

}

.career-overview p,
.career-outcomes p,
.career-audience p,
.career-faq p,
.career-cta p{

    color:rgba(255,255,255,.72);

    line-height:1.9;

}

.card{

    transition:.35s ease;

}

.card:hover{

    transform:translateY(-8px);

}
/* ==========================================================
   OVERVIEW
   ========================================================== */

.career-overview{

    position:relative;

}

.career-overview .grid-3{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:32px;

    margin-top:60px;

}

.career-overview .card{

    padding:40px;

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

}

.career-overview .card h3{

    color:#fff;

    margin-bottom:18px;

    font-size:1.45rem;

}

.career-overview .card p{

    margin:0;

}


/* ==========================================================
   COURSE META
   ========================================================== */

.career-meta{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:24px;

    margin:70px 0;

}

.career-meta-item{

    padding:30px;

    text-align:center;

    border-radius:22px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    transition:.35s ease;

}

.career-meta-item:hover{

    transform:translateY(-8px);

    border-color:rgba(124,92,255,.30);

    box-shadow:

        0 20px 40px rgba(0,0,0,.20);

}

.career-meta-item span{

    display:block;

    color:rgba(255,255,255,.60);

    font-size:.9rem;

    margin-bottom:12px;

}

.career-meta-item strong{

    display:block;

    color:#fff;

    font-size:1.2rem;

}


/* ==========================================================
   OUTCOMES
   ========================================================== */

.career-outcomes .grid-2{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.career-outcomes .card{

    padding:38px;

    border-radius:22px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

}

.career-outcomes .card h3{

    color:#fff;

    margin-bottom:18px;

    font-size:1.4rem;

}

.career-outcomes .card p{

    margin:0;

}

.career-outcomes .card:hover{

    border-color:rgba(124,92,255,.28);

    box-shadow:

        0 16px 40px rgba(124,92,255,.10);

}
/* ==========================================================
   AUDIENCE
   ========================================================== */

.career-audience .grid-2{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:32px;

}

.career-audience .card{

    padding:42px;

    text-align:center;

    border-radius:24px;

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

}

.career-audience .card:hover{

    border-color:rgba(124,92,255,.30);

    box-shadow:

        0 18px 45px rgba(124,92,255,.12);

}

.audience-icon{

    width:74px;

    height:74px;

    margin:0 auto 24px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    background:rgba(124,92,255,.10);

    border:1px solid rgba(124,92,255,.25);

}

.career-audience h3{

    color:#fff;

    margin-bottom:18px;

}

.career-audience p{

    margin:0;

}


/* ==========================================================
   FAQ
   ========================================================== */

.faq-list{

    max-width:950px;

    margin:auto;

}

.career-faq .faq-item{

    padding:32px;

    margin-bottom:24px;

    border-radius:20px;

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    transition:.35s ease;

}

.career-faq .faq-item:hover{

    border-color:rgba(124,92,255,.30);

    transform:translateY(-5px);

}

.career-faq .faq-item h3{

    color:#fff;

    margin-bottom:15px;

    font-size:1.2rem;

}

.career-faq .faq-item p{

    margin:0;

}


/* ==========================================================
   CTA
   ========================================================== */

.career-cta{

    position:relative;

}

.career-cta .section-title{

    max-width:920px;

    margin:auto;

    padding:70px 60px;

    border-radius:30px;

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.08);

}

.career-cta-actions{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    margin-top:45px;

}

.career-cta-actions .btn{

    min-width:220px;

}


/* ==========================================================
   DIVIDERS
   ========================================================== */

.career-overview,
.career-outcomes,
.career-audience,
.career-faq{

    border-bottom:1px solid rgba(255,255,255,.05);

}


/* ==========================================================
   BUTTONS
   ========================================================== */

.career-hero .btn,
.career-cta .btn{

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.career-hero .btn:hover,
.career-cta .btn:hover{

    transform:translateY(-3px);

    box-shadow:

        0 14px 32px rgba(124,92,255,.18);

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1100px){

    .career-meta{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:992px){

    .career-overview .grid-3{

        grid-template-columns:1fr;

    }

    .career-outcomes .grid-2{

        grid-template-columns:1fr;

    }

    .career-audience .grid-2{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .career-hero{

        padding:130px 0 80px;

    }

    .career-overview,
    .career-outcomes,
    .career-audience,
    .career-faq,
    .career-cta{

        padding:75px 0;

    }

    .career-meta{

        grid-template-columns:1fr;

    }

    .career-cta .section-title{

        padding:40px 30px;

    }

    .career-cta-actions{

        flex-direction:column;

    }

    .career-cta-actions .btn{

        width:100%;

    }

}

@media(max-width:480px){

    .career-hero h1{

        font-size:2.5rem;

    }

    .career-overview .card,
    .career-outcomes .card,
    .career-audience .card{

        padding:28px;

    }

}


/* ==========================================================
   PERFORMANCE
   ========================================================== */

.career-overview .card,
.career-outcomes .card,
.career-audience .card,
.career-faq .faq-item{

    will-change:transform;

}