/*==========================================================
TRAINING PAGE
Part 1 - Foundation + Hero + Intro + Benefits
==========================================================*/

:root{

    --training-radius:20px;
    --training-gap:1.8rem;

}



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

.training-hero{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    display:flex;

    align-items:center;

    min-height:75vh;

    padding:10rem 0 8rem;

    background:

        radial-gradient(circle at 12% 20%,
        rgba(214,51,132,.12),
        transparent 32%),

        radial-gradient(circle at 88% 12%,
        rgba(242,140,184,.16),
        transparent 30%),

        radial-gradient(circle at 85% 85%,
        rgba(255,228,239,.85),
        transparent 40%),

        linear-gradient(
            180deg,
            #ffffff 0%,
            #fff8fb 55%,
            #fffdfd 100%
        );

}


/*==========================================================
DECORATION
==========================================================*/

.training-hero::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    top:-260px;

    right:-220px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(214,51,132,.18),

            rgba(214,51,132,.05) 45%,

            transparent 72%

        );

    filter:blur(35px);

    animation:heroFloatOne 15s ease-in-out infinite;

}

.training-hero::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:-180px;

    bottom:-180px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(242,140,184,.18),

            transparent 72%

        );

    filter:blur(28px);

    animation:heroFloatTwo 18s ease-in-out infinite;

}


/*==========================================================
CONTAINER
==========================================================*/

.training-hero .container{

    position:relative;

    z-index:5;

    max-width:900px;

    text-align:center;

}

.training-hero .container::before{

    content:"";

    position:absolute;

    inset:-60px;

    border-radius:42px;

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

    box-shadow:

        0 35px 70px rgba(214,51,132,.08);

    z-index:-1;

}


/*==========================================================
BADGE
==========================================================*/

.training-hero .section-badge{

    display:inline-flex;

    align-items:center;

    gap:.75rem;

    padding:.8rem 1.6rem;

    margin-bottom:2rem;

    border-radius:999px;

    background:rgba(214,51,132,.08);

    border:1px solid rgba(214,51,132,.14);

    color:var(--primary);

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.12em;

    text-transform:uppercase;

    box-shadow:

        0 12px 30px rgba(214,51,132,.08);

}

.training-hero .section-badge::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--primary);

    box-shadow:

        0 0 15px rgba(214,51,132,.5);

}


/*==========================================================
TITLE
==========================================================*/

.training-hero h1{

    margin-bottom:1.8rem;

    font-size:clamp(3rem,6vw,5.2rem);

    line-height:1.05;

    letter-spacing:-.04em;

    color:var(--text-primary);

}

.training-hero h1 span{

    background:var(--gradient-primary);

    background-clip:text;

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}


/*==========================================================
DESCRIPTION
==========================================================*/

.training-hero p{

    max-width:720px;

    margin:0 auto 3rem;

    color:var(--text-secondary);

    font-size:1.08rem;

    line-height:2;

}


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

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:1.25rem;

    flex-wrap:wrap;

}

.hero-buttons .btn{

    min-width:210px;

    padding:1rem 2.3rem;

    border-radius:999px;

    font-weight:600;

}

.hero-buttons .btn-primary{

    box-shadow:

        0 18px 35px rgba(214,51,132,.25);

}

.hero-buttons .btn-primary:hover{

    transform:translateY(-5px);

}

.hero-buttons .btn-outline{

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

    backdrop-filter:blur(10px);

    border:2px solid rgba(214,51,132,.15);

}

.hero-buttons .btn-outline:hover{

    transform:translateY(-5px);

}


/*==========================================================
ANIMATION
==========================================================*/

@keyframes heroFloatOne{

    0%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(24px) rotate(8deg);

    }

    100%{

        transform:translateY(0) rotate(0deg);

    }

}

@keyframes heroFloatTwo{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-22px);

    }

    100%{

        transform:translateY(0);

    }

}


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

@media(max-width:992px){

    .training-hero{

        min-height:65vh;

        padding:8rem 0 7rem;

    }

    .training-hero .container::before{

        inset:-35px;

    }

}

@media(max-width:768px){

    .training-hero{

        min-height:auto;

        padding:7rem 0 6rem;

    }

    .training-hero .container::before{

        inset:-25px;

        border-radius:28px;

    }

    .training-hero h1{

        font-size:2.8rem;

    }

    .training-hero p{

        font-size:1rem;

        line-height:1.9;

    }

}

@media(max-width:576px){

    .training-hero{

        padding:6rem 0 5rem;

    }

    .training-hero .container::before{

        display:none;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons .btn{

        width:100%;

    }

}































/* ==========================================================
   TRAINING INTRO
========================================================== */

.training-intro{

    position:relative;

    padding:6rem 0;

    background:

        linear-gradient(
            180deg,
            #ffffff 0%,
            #fffafb 100%
        );

    overflow:hidden;

}

.training-intro::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-180px;

    left:-120px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(214,51,132,.08),

            transparent 72%

        );

}

.training-intro::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    bottom:-140px;

    right:-100px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(242,140,184,.08),

            transparent 72%

        );

}


/*==========================================================
CONTENT
==========================================================*/

.training-intro .section-heading{

    position:relative;

    z-index:2;

    max-width:850px;

    margin:auto;

    text-align:center;

    padding:4rem 3rem;

    border-radius:32px;

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(214,51,132,.08);

    box-shadow:

        0 20px 45px rgba(214,51,132,.06);

}


/*==========================================================
BADGE
==========================================================*/

.training-intro .section-badge{

    display:inline-flex;

    align-items:center;

    gap:.7rem;

    padding:.75rem 1.5rem;

    margin-bottom:1.8rem;

    border-radius:999px;

    background:rgba(214,51,132,.08);

    border:1px solid rgba(214,51,132,.12);

    color:var(--primary);

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.12em;

    text-transform:uppercase;

}

.training-intro .section-badge::before{

    content:"";

    width:9px;

    height:9px;

    border-radius:50%;

    background:var(--primary);

}


/*==========================================================
HEADING
==========================================================*/

.training-intro h2{

    margin-bottom:1.5rem;

    font-size:clamp(2.4rem,4vw,3.6rem);

    line-height:1.15;

    color:var(--text-primary);

    letter-spacing:-.03em;

}


/*==========================================================
TEXT
==========================================================*/

.training-intro p{

    max-width:700px;

    margin:0 auto;

    font-size:1.05rem;

    line-height:1.9;

    color:var(--text-secondary);

}


/*==========================================================
DECORATIVE DIVIDER
==========================================================*/

.training-intro .section-heading::after{

    content:"";

    display:block;

    width:90px;

    height:5px;

    margin:2.5rem auto 0;

    border-radius:999px;

    background:var(--gradient-primary);

}


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

@media(max-width:768px){

    .training-intro{

        padding:5rem 0;

    }

    .training-intro .section-heading{

        padding:3rem 2rem;

        border-radius:24px;

    }

    .training-intro h2{

        font-size:2.2rem;

    }

    .training-intro p{

        font-size:1rem;

    }

}

@media(max-width:576px){

    .training-intro .section-heading{

        padding:2.5rem 1.5rem;

    }

}




















/* ==========================================================
   TRAINING BENEFITS
========================================================== */

.training-benefits{

    position:relative;

    padding:3rem 0;

    background:var(--gradient-primary);

    overflow:hidden;

}

.training-benefits::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at top right,
        rgba(255,255,255,.12),
        transparent 35%),

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

}


/*==========================================================
GRID
==========================================================*/

.benefits-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:1.5rem;

    align-items:center;

}


/*==========================================================
CARD
==========================================================*/

.benefit-card{

    display:flex;

    align-items:center;

    gap:1rem;

    padding:1.2rem 1.4rem;

    border-radius:18px;

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

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

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

    transition:.35s ease;

}


/*==========================================================
ICON
==========================================================*/

.benefit-card i{

    flex-shrink:0;

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:#fff;

    font-size:1.35rem;

}


/*==========================================================
TEXT
==========================================================*/

.benefit-card h3{

    margin:0 0 .35rem;

    font-size:1rem;

    color:#fff;

    line-height:1.3;

}

.benefit-card p{

    margin:0;

    font-size:.9rem;

    line-height:1.5;

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

}


/*==========================================================
HOVER
==========================================================*/

.benefit-card:hover{

    transform:translateY(-5px);

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

}

.benefit-card:hover i{

    transform:scale(1.08);

}


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

@media(max-width:1100px){

    .benefits-grid{

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

    }

}

@media(max-width:768px){

    .training-benefits{

        padding:2.5rem 0;

    }

    .benefits-grid{

        grid-template-columns:1fr;

    }

    .benefit-card{

        padding:1rem 1.2rem;

    }

}

















/* ==========================================================
   COURSE CATEGORIES + FEATURED COURSES
========================================================== */

.course-categories,
.featured-courses{

    position:relative;

    padding:7rem 0;

    background:

        linear-gradient(
            180deg,
            #ffffff 0%,
            #fffafb 100%
        );

    overflow:hidden;

}

.featured-courses{

    padding-top:0;

}


/*==========================================================
BACKGROUND DECORATION
==========================================================*/

.course-categories::before,
.featured-courses::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(214,51,132,.08),

            transparent 72%

        );

    filter:blur(30px);

    z-index:0;

}

.course-categories::before{

    top:-220px;

    right:-180px;

}

.featured-courses::before{

    bottom:-220px;

    left:-180px;

}


/*==========================================================
CONTAINER
==========================================================*/

.course-categories .container,
.featured-courses .container{

    position:relative;

    z-index:2;

}


/*==========================================================
CATEGORY GRID
==========================================================*/

.categories-grid{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}


/*==========================================================
CATEGORY CARD
==========================================================*/

.category-card{

    position:relative;

    padding:2.5rem 2rem;

    border-radius:26px;

    text-align:center;

    background:#fff;

    border:1px solid rgba(214,51,132,.08);

    box-shadow:

        0 14px 35px rgba(0,0,0,.05);

    transition:.35s ease;

    overflow:hidden;

}

.category-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            180deg,

            rgba(214,51,132,.03),

            transparent

        );

}

.category-card::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:var(--gradient-primary);

}

.category-card h3{

    position:relative;

    margin:0;

    color:var(--text-primary);

    font-size:1.35rem;

    z-index:2;

}

.category-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 24px 45px rgba(0,0,0,.10);

}


/*==========================================================
COURSE GRID
==========================================================*/

.course-grid{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}


/*==========================================================
COURSE CARD
==========================================================*/

.course-card{

    position:relative;

    display:flex;

    flex-direction:column;

    padding:2.5rem;

    border-radius:28px;

    background:#fff;

    border:1px solid rgba(214,51,132,.08);

    box-shadow:

        0 15px 35px rgba(0,0,0,.06);

    transition:.35s ease;

}

.course-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:6px;

    background:var(--gradient-primary);

}

.course-card h3{

    margin-bottom:1rem;

    color:var(--text-primary);

    font-size:1.45rem;

}

.course-card p{

    flex:1;

    margin-bottom:2rem;

    color:var(--text-secondary);

    line-height:1.8;

}

.course-card strong{

    display:block;

    margin-bottom:2rem;

    font-size:1.5rem;

    color:var(--primary);

    font-weight:700;

}

.course-card .btn{

    width:100%;

    justify-content:center;

}

.course-card:hover{

    transform:translateY(-10px);

    box-shadow:

        0 28px 55px rgba(0,0,0,.12);

}


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

@media(max-width:1100px){

    .categories-grid{

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

    }

    .course-grid{

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

    }

}

@media(max-width:768px){

    .course-categories,
    .featured-courses{

        padding:5rem 0;

    }

    .featured-courses{

        padding-top:0;

    }

    .categories-grid,
    .course-grid{

        grid-template-columns:1fr;

    }

    .category-card,
    .course-card{

        padding:2rem;

    }

}




























/* ==========================================================
   TRAINING CATALOGUE
========================================================== */

.training-catalogue{

    position:relative;

    padding:8rem 0;

    background:

        linear-gradient(
            180deg,
            #fffafb 0%,
            #ffffff 100%
        );

    overflow:hidden;

}

.training-catalogue::before{

    content:"";

    position:absolute;

    top:-220px;

    right:-180px;

    width:550px;

    height:550px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(214,51,132,.08),

            transparent 72%

        );

    filter:blur(35px);

}

.training-catalogue::after{

    content:"";

    position:absolute;

    bottom:-250px;

    left:-180px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(242,140,184,.08),

            transparent 72%

        );

    filter:blur(30px);

}


/*==========================================================
GRID
==========================================================*/

.catalogue-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}


/*==========================================================
CARD
==========================================================*/

.catalogue-card{

    position:relative;

    overflow:hidden;

    background:#fff;

    border-radius:28px;

    padding:2.5rem;

    border:1px solid rgba(214,51,132,.08);

    box-shadow:

        0 18px 40px rgba(0,0,0,.06);

    transition:.35s ease;

}

.catalogue-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:7px;

    background:var(--gradient-primary);

}

.catalogue-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            180deg,

            rgba(214,51,132,.03),

            transparent

        );

    pointer-events:none;

}


/*==========================================================
TITLE
==========================================================*/

.catalogue-card h3{

    position:relative;

    margin-bottom:2rem;

    padding-bottom:1rem;

    font-size:1.65rem;

    color:var(--text-primary);

}

.catalogue-card h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:70px;

    height:4px;

    border-radius:999px;

    background:var(--gradient-primary);

}


/*==========================================================
LIST
==========================================================*/

.catalogue-card ul{

    list-style:none;

    margin:0;

    padding:0;

}

.catalogue-card li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:1rem;

    padding:1rem 0;

    border-bottom:1px solid rgba(0,0,0,.06);

    color:var(--text-secondary);

    line-height:1.5;

}

.catalogue-card li:last-child{

    border-bottom:none;

}


/*==========================================================
PRICE
==========================================================*/

.catalogue-card strong{

    flex-shrink:0;

    color:var(--primary);

    font-size:1rem;

    font-weight:700;

}


/*==========================================================
HOVER
==========================================================*/

.catalogue-card:hover{

    transform:translateY(-10px);

    box-shadow:

        0 28px 60px rgba(0,0,0,.12);

}


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

@media(max-width:1100px){

    .catalogue-grid{

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

    }

}

@media(max-width:768px){

    .training-catalogue{

        padding:6rem 0;

    }

    .catalogue-grid{

        grid-template-columns:1fr;

    }

    .catalogue-card{

        padding:2rem;

    }

    .catalogue-card li{

        flex-direction:column;

        align-items:flex-start;

        gap:.4rem;

    }

}

























/* ==========================================================
   LEARNING JOURNEY
========================================================== */

.learning-journey{

    position:relative;

    padding:8rem 0;

    background:

        linear-gradient(
            180deg,
            #fffdfd 0%,
            #fff6f9 100%
        );

    overflow:hidden;

}

.learning-journey::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    top:-280px;

    right:-220px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(214,51,132,.08),

            transparent 72%

        );

    filter:blur(35px);

}

.learning-journey h2{

    text-align:center;

    margin-bottom:5rem;

    font-size:clamp(2.3rem,4vw,3.5rem);

}



/*==========================================================
TIMELINE
==========================================================*/

.journey-grid{

    position:relative;

    display:grid;

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

    gap:2rem;

    align-items:flex-start;

}


/* line */

.journey-grid::before{

    content:"";

    position:absolute;

    top:38px;

    left:12%;

    width:76%;

    height:6px;

    background:#ead9e2;

    border-radius:999px;

}

.journey-grid::after{

    content:"";

    position:absolute;

    top:38px;

    left:12%;

    width:0;

    height:6px;

    background:var(--gradient-primary);

    border-radius:999px;

    transition:2.2s ease;

}


/*==========================================================
STEP
==========================================================*/

.journey-grid>div{

    position:relative;

    text-align:center;

    padding-top:90px;

    font-weight:600;

    color:var(--text-primary);

    transition:.5s ease;

    opacity:.4;

    transform:translateY(35px);

}


/* circles */

.journey-grid>div::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:76px;

    height:76px;

    border-radius:50%;

    background:#fff;

    border:5px solid #f2c7d7;

    box-shadow:

        0 12px 30px rgba(214,51,132,.10);

    transition:.4s;

    z-index:2;

}


/* numbers */

.journey-grid>div:nth-child(1)::after{

    content:"01";

}

.journey-grid>div:nth-child(2)::after{

    content:"02";

}

.journey-grid>div:nth-child(3)::after{

    content:"03";

}

.journey-grid>div:nth-child(4)::after{

    content:"04";

}

.journey-grid>div::after{

    position:absolute;

    top:23px;

    left:50%;

    transform:translateX(-50%);

    color:var(--primary);

    font-weight:700;

    font-size:1.1rem;

    z-index:3;

}


/*==========================================================
ACTIVE
==========================================================*/

.learning-journey.active .journey-grid::after{

    width:76%;

}

.learning-journey.active .journey-grid>div{

    opacity:1;

    transform:none;

}

.learning-journey.active .journey-grid>div.active::before{

    background:var(--gradient-primary);

    border-color:#fff;

    box-shadow:

        0 0 35px rgba(214,51,132,.35);

}

.learning-journey.active .journey-grid>div.active::after{

    color:#fff;

}


/*==========================================================
INCLUDES
==========================================================*/

.training-includes{

    padding:7rem 0;

    background:#fff;

}

.training-includes h2{

    text-align:center;

    margin-bottom:3.5rem;

}

.includes-list{

    display:grid;

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

    gap:1.5rem;

    list-style:none;

    margin:0;

    padding:0;

}

.includes-list li{

    display:flex;

    align-items:center;

    gap:1rem;

    padding:1.25rem 1.6rem;

    background:#fff;

    border-radius:18px;

    border:1px solid rgba(214,51,132,.08);

    box-shadow:

        0 12px 25px rgba(0,0,0,.05);

    transition:.35s;

    font-weight:500;

    color:var(--text-primary);

}

.includes-list li::before{

    content:"✓";

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    border-radius:50%;

    background:var(--gradient-primary);

    color:#fff;

    font-weight:700;

    flex-shrink:0;

}

.includes-list li:hover{

    transform:translateY(-6px);

    box-shadow:

        0 18px 40px rgba(214,51,132,.12);

}


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

@media(max-width:992px){

    .journey-grid{

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

        gap:3rem;

    }

    .journey-grid::before,

    .journey-grid::after{

        display:none;

    }

    .includes-list{

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

    }

}

@media(max-width:768px){

    .journey-grid{

        grid-template-columns:1fr;

    }

    .includes-list{

        grid-template-columns:1fr;

    }

}









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

.training-cta{

    position:relative;

    padding:8rem 0;

    overflow:hidden;

    background:

        linear-gradient(
            180deg,
            #fff7fa 0%,
            #ffffff 100%
        );

}


/*==========================================================
BACKGROUND DECORATION
==========================================================*/

.training-cta::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    top:-320px;

    right:-220px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(214,51,132,.12),

            transparent 72%

        );

    filter:blur(35px);

}

.training-cta::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    bottom:-250px;

    left:-180px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(242,140,184,.10),

            transparent 72%

        );

    filter:blur(30px);

}


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

.training-cta .container{

    position:relative;

    z-index:2;

    max-width:950px;

    text-align:center;

    padding:5rem 4rem;

    border-radius:36px;

    background:

        linear-gradient(

            135deg,

            rgba(214,51,132,.92),

            rgba(168,31,97,.95)

        );

    color:#fff;

    overflow:hidden;

    box-shadow:

        0 35px 80px rgba(214,51,132,.25);

}


/* decorative circles */

.training-cta .container::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    top:-130px;

    right:-90px;

    border-radius:50%;

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

}

.training-cta .container::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    bottom:-80px;

    left:-60px;

    border-radius:50%;

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

}


/*==========================================================
TYPOGRAPHY
==========================================================*/

.training-cta h2{

    position:relative;

    z-index:2;

    margin-bottom:1.5rem;

    color:#fff;

    font-size:clamp(2.3rem,4vw,3.6rem);

    line-height:1.2;

}

.training-cta p{

    position:relative;

    z-index:2;

    max-width:700px;

    margin:0 auto 2.8rem;

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

    font-size:1.1rem;

    line-height:1.9;

}


/*==========================================================
BUTTON
==========================================================*/

.training-cta .btn{

    position:relative;

    z-index:2;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:240px;

    padding:1rem 2.8rem;

    border-radius:999px;

    background:#fff;

    color:var(--primary);

    font-weight:700;

    box-shadow:

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

    transition:.35s ease;

}

.training-cta .btn:hover{

    transform:translateY(-6px) scale(1.03);

    box-shadow:

        0 28px 55px rgba(0,0,0,.20);

}


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

@media(max-width:768px){

    .training-cta{

        padding:6rem 0;

    }

    .training-cta .container{

        padding:3.5rem 2rem;

        border-radius:28px;

    }

    .training-cta h2{

        font-size:2.2rem;

    }

    .training-cta p{

        font-size:1rem;

    }

    .training-cta .btn{

        width:100%;

        min-width:unset;

    }

}