/*====================================================
EMPBRIDGE EXPERT PAGE
expert.css
PART 1
Hero + Experience
====================================================*/


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

.expert-hero{

    background:
    linear-gradient(135deg,
    #06132B 0%,
    #0C2348 55%,
    #153A67 100%);

    color:#ffffff;

    padding-top:170px;

    overflow:hidden;

    position:relative;

}

.expert-hero::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    top:-250px;

    right:-220px;

    border-radius:50%;

    background:radial-gradient(
    rgba(212,175,55,.08),
    transparent 70%);

    pointer-events:none;

}

.expert-hero::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:-180px;

    bottom:-220px;

    border-radius:50%;

    background:radial-gradient(
    rgba(255,255,255,.04),
    transparent 75%);

    pointer-events:none;

}

.hero-grid{

    display:grid;

    grid-template-columns:55% 45%;

    gap:70px;

    align-items:center;

    position:relative;

    z-index:2;

}


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

.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--secondary);

    font-size:14px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:24px;

}

.hero-tag::before{

    content:"";

    width:40px;

    height:2px;

    background:var(--secondary);

}

.hero-content h1{

    color:#ffffff;

    font-size:64px;

    line-height:1.08;

    margin-bottom:28px;

}

.hero-content h1 span{

    display:block;

    color:var(--secondary);

}

.hero-content p{

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

    font-size:18px;

    line-height:1.9;

    max-width:620px;

    margin-bottom:42px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}


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

.hero-image{

    position:relative;

}

.hero-image img{

    border-radius:22px;

    box-shadow:
    0 35px 70px rgba(0,0,0,.28);

}

.hero-image::before{

    content:"";

    position:absolute;

    inset:-18px;

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

    border-radius:28px;

}

.hero-image::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:

    radial-gradient(

    rgba(212,175,55,.15),

    transparent 70%);

    right:-50px;

    bottom:-50px;

    z-index:-1;

}


/*====================================================
EXPERIENCE SECTION
====================================================*/

.experience-section{

    background:#081827;

    color:#ffffff;

    position:relative;

    overflow:hidden;

}

.experience-section::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    top:-300px;

    left:-250px;

    border-radius:50%;

    background:

    radial-gradient(

    rgba(212,175,55,.05),

    transparent 70%);

}

.experience-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

    position:relative;

    z-index:2;

}


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

.section-tag{

    display:inline-block;

    color:var(--secondary);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:14px;

    font-weight:600;

    margin-bottom:22px;

}

.experience-content h2{

    color:#ffffff;

    font-size:50px;

    line-height:1.18;

    margin-bottom:28px;

}

.experience-content p{

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

    line-height:1.95;

    margin-bottom:18px;

}

.experience-points{

    margin-top:40px;

}

.point{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:18px;

}

.point i{

    color:#22C55E;

    font-size:18px;

}

.point span{

    color:#ffffff;

}


/*====================================================
EXPERIENCE IMAGE
====================================================*/

.experience-image{

    position:relative;

}

.experience-image img{

    border-radius:22px;

    box-shadow:

    0 30px 60px rgba(0,0,0,.30);

}

.experience-image::after{

    content:"";

    position:absolute;

    inset:-18px;

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

    border-radius:28px;

}


/*====================================================
QUOTE
====================================================*/

.experience-quote{

    margin-top:80px;

    padding:50px;

    border-radius:24px;

    text-align:center;

    background:

    rgba(255,255,255,.04);

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

    backdrop-filter:blur(8px);

}

.experience-quote span{

    display:block;

    color:var(--secondary);

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:13px;

    font-weight:600;

    margin-bottom:20px;

}

.experience-quote h3{

    color:#ffffff;

    font-size:34px;

    line-height:1.6;

    font-style:italic;

    font-weight:600;

    max-width:900px;

    margin:auto;

}


/*====================================================
PART 1 RESPONSIVE
====================================================*/

@media(max-width:992px){

.hero-grid,
.experience-grid{

    grid-template-columns:1fr;

    gap:50px;

}

.hero-content{

    text-align:center;

}

.hero-content p{

    margin-left:auto;

    margin-right:auto;

}

.hero-buttons{

    justify-content:center;

}

.hero-content h1{

    font-size:48px;

}

.experience-content h2{

    font-size:40px;

}

}

@media(max-width:768px){

.hero-content h1{

    font-size:38px;

}

.experience-content h2{

    font-size:34px;

}

.experience-quote{

    padding:35px 25px;

}

.experience-quote h3{

    font-size:26px;

}

}

/*====================================================
PART 2
WHY EXPERTS MATTER
PILLARS
EXPERT CATEGORIES
====================================================*/


/*====================================================
WHY EXPERTS MATTER
====================================================*/

.importance-section{

    background:#ffffff;

    position:relative;

    overflow:hidden;

}

.importance-section::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    top:-220px;

    right:-180px;

    border-radius:50%;

    background:radial-gradient(
    rgba(212,175,55,.06),
    transparent 70%);

}

.comparison-card{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:35px;

    margin-top:60px;

}

.traditional,
.empbridge{

    background:#ffffff;

    padding:45px;

    border-radius:22px;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    transition:.35s ease;

    border:1px solid #e9eef3;

    position:relative;

    overflow:hidden;

}

.traditional::before,
.empbridge::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:6px;

    height:100%;

}

.traditional::before{

    background:#ef4444;

}

.empbridge::before{

    background:var(--secondary);

}

.traditional:hover,
.empbridge:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(0,0,0,.12);

}

.traditional h3,
.empbridge h3{

    margin-bottom:25px;

    font-size:28px;

}

.traditional h3{

    color:#dc2626;

}

.empbridge h3{

    color:var(--primary);

}

.traditional ul,
.empbridge ul{

    list-style:none;

    padding:0;

}

.traditional li,
.empbridge li{

    display:flex;

    gap:14px;

    align-items:flex-start;

    margin-bottom:18px;

    line-height:1.8;

}

.traditional i{

    color:#ef4444;

    margin-top:4px;

}

.empbridge i{

    color:#22c55e;

    margin-top:4px;

}

.importance-quote{

    max-width:900px;

    margin:80px auto 0;

    text-align:center;

}

.importance-quote h3{

    font-size:36px;

    color:var(--primary);

    margin-bottom:20px;

}

.importance-quote p{

    font-size:18px;

    color:#667085;

}


/*====================================================
THREE PILLARS
====================================================*/

.pillars-section{

    background:#f8fafc;

}

.pillars-grid{

    display:grid;

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

    gap:35px;

}

.pillar-card{

    background:#ffffff;

    padding:45px 35px;

    border-radius:22px;

    text-align:center;

    transition:.35s ease;

    box-shadow:0 18px 40px rgba(0,0,0,.08);

    border:1px solid #edf2f7;

}

.pillar-card:hover{

    transform:translateY(-12px);

}

.pillar-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(212,175,55,.12);

    margin-bottom:28px;

}

.pillar-icon i{

    font-size:38px;

    color:var(--secondary);

}

.pillar-card h3{

    margin-bottom:18px;

    font-size:28px;

}

.pillar-card p{

    line-height:1.9;

    color:#667085;

}

.featured{

    background:linear-gradient(
    135deg,
    #06132B,
    #153A67);

    color:#ffffff;

}

.featured h3{

    color:#ffffff;

}

.featured p{

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

}

.featured .pillar-icon{

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

}

.featured .pillar-icon i{

    color:#ffffff;

}


/*====================================================
EXPERT CATEGORIES
====================================================*/

.expert-category{

    background:#ffffff;

}

.expert-grid{

    display:grid;

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

    gap:35px;

}

.expert-card{

    background:#ffffff;

    border-radius:22px;

    padding:40px 35px;

    text-align:center;

    border:1px solid #edf2f7;

    box-shadow:0 18px 40px rgba(0,0,0,.08);

    transition:.35s ease;

    position:relative;

    overflow:hidden;

}

.expert-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(
    90deg,
    var(--secondary),
    #ffe082);

}

.expert-card:hover{

    transform:translateY(-10px);

}

.expert-card i{

    width:85px;

    height:85px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(212,175,55,.12);

    color:var(--secondary);

    font-size:34px;

    margin-bottom:25px;

}

.expert-card h3{

    margin-bottom:18px;

    font-size:26px;

}

.expert-card p{

    color:#667085;

    line-height:1.9;

}


/*====================================================
PART 2 RESPONSIVE
====================================================*/

@media(max-width:992px){

.comparison-card,
.pillars-grid,
.expert-grid{

    grid-template-columns:1fr;

}

.importance-quote h3{

    font-size:30px;

}

}

@media(max-width:768px){

.traditional,
.empbridge,
.pillar-card,
.expert-card{

    padding:35px 25px;

}

.importance-quote h3{

    font-size:26px;

}

}

/*====================================================
PART 3
TIMELINE
FRAMEWORK
BENEFITS
ETHICS
====================================================*/


/*====================================================
EXPERT JOURNEY / TIMELINE
====================================================*/

.role-section{

    background:#081827;

    position:relative;

    overflow:hidden;

}

.role-section::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    top:-320px;

    right:-260px;

    border-radius:50%;

    background:radial-gradient(
    rgba(212,175,55,.06),
    transparent 70%);

}

.role-section .section-title h2,
.role-section .section-title p{

    color:#ffffff;

}

.timeline{

    display:grid;

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

    gap:30px;

    position:relative;

    margin-top:70px;

}

.timeline::before{

    content:"";

    position:absolute;

    top:42px;

    left:8%;

    width:84%;

    height:2px;

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

}

.timeline-item{

    position:relative;

    z-index:2;

    text-align:center;

}

.step{

    width:85px;

    height:85px;

    margin:auto;

    border-radius:50%;

    background:linear-gradient(135deg,var(--secondary),#ffe082);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    color:var(--primary);

    margin-bottom:25px;

    box-shadow:0 15px 35px rgba(0,0,0,.25);

}

.timeline-item h3{

    color:#ffffff;

    margin-bottom:15px;

    font-size:22px;

}

.timeline-item p{

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

    line-height:1.8;

}


/*====================================================
ASSESSMENT FRAMEWORK
====================================================*/

.framework-section{

    background:#ffffff;

}

.framework-grid{

    display:grid;

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

    gap:35px;

}

.framework-card{

    background:#ffffff;

    padding:40px 35px;

    border-radius:22px;

    text-align:center;

    border:1px solid #edf2f7;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    transition:.35s;

}

.framework-card:hover{

    transform:translateY(-10px);

}

.framework-icon{

    width:85px;

    height:85px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(212,175,55,.12);

    margin-bottom:25px;

}

.framework-icon i{

    color:var(--secondary);

    font-size:34px;

}

.framework-card h3{

    font-size:25px;

    margin-bottom:18px;

}

.framework-card p{

    color:#667085;

    line-height:1.9;

}


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

.benefits-section{

    background:#f8fafc;

}

.benefits-grid{

    display:grid;

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

    gap:35px;

}

.benefit-card{

    background:#ffffff;

    border-radius:22px;

    padding:40px;

    border:1px solid #edf2f7;

    box-shadow:0 18px 40px rgba(0,0,0,.08);

    transition:.35s;

}

.benefit-card:hover{

    transform:translateY(-10px);

}

.benefit-card i{

    color:var(--secondary);

    font-size:34px;

    margin-bottom:20px;

}

.benefit-card h3{

    margin-bottom:18px;

    font-size:24px;

}

.benefit-card p{

    line-height:1.9;

    color:#667085;

}


/*====================================================
CODE OF ETHICS
====================================================*/

.ethics-section{

    background:linear-gradient(
    135deg,
    #06132B,
    #14345e);

    color:#ffffff;

    position:relative;

    overflow:hidden;

}

.ethics-section::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    left:-250px;

    bottom:-250px;

    border-radius:50%;

    background:radial-gradient(
    rgba(212,175,55,.05),
    transparent 70%);

}

.ethics-section .section-title h2,
.ethics-section .section-title p{

    color:#ffffff;

}

.ethics-grid{

    display:grid;

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

    gap:35px;

}

.ethics-card{

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

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

    border-radius:22px;

    padding:40px 35px;

    text-align:center;

    backdrop-filter:blur(8px);

    transition:.35s;

}

.ethics-card:hover{

    transform:translateY(-10px);

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

}

.ethics-card i{

    color:var(--secondary);

    font-size:36px;

    margin-bottom:22px;

}

.ethics-card h3{

    color:#ffffff;

    margin-bottom:18px;

    font-size:24px;

}

.ethics-card p{

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

    line-height:1.9;

}

.ethics-note{

    margin:70px auto 0;

    max-width:900px;

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

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

    border-left:5px solid var(--secondary);

    border-radius:22px;

    padding:45px;

    text-align:center;

    backdrop-filter:blur(8px);

}

.ethics-note h3{

    color:#ffffff;

    margin-bottom:18px;

}

.ethics-note p{

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

    line-height:1.9;

}


/*====================================================
PART 3 RESPONSIVE
====================================================*/

@media(max-width:992px){

.timeline,
.framework-grid,
.benefits-grid,
.ethics-grid{

    grid-template-columns:1fr;

}

.timeline::before{

    display:none;

}

.timeline{

    gap:45px;

}

}

@media(max-width:768px){

.framework-card,
.benefit-card,
.ethics-card,
.ethics-note{

    padding:35px 25px;

}

.step{

    width:75px;

    height:75px;

    font-size:26px;

}

}

/*====================================================
PART 4
SELECTION
VISION
CTA
ANIMATIONS
====================================================*/


/*====================================================
SELECTION PROCESS
====================================================*/

.selection-section{

    background:#ffffff;

    position:relative;

    overflow:hidden;

}

.selection-section::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    top:-250px;

    left:-180px;

    border-radius:50%;

    background:
    radial-gradient(
    rgba(212,175,55,.05),
    transparent 70%);

}

.selection-timeline{

    display:grid;

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

    gap:30px;

    margin-top:70px;

    position:relative;

}

.selection-timeline::before{

    content:"";

    position:absolute;

    top:42px;

    left:8%;

    width:84%;

    height:2px;

    background:#e2e8f0;

}

.selection-step{

    text-align:center;

    position:relative;

    z-index:2;

}

.step-number{

    width:85px;

    height:85px;

    border-radius:50%;

    background:linear-gradient(
    135deg,
    var(--secondary),
    #ffe082);

    color:var(--primary);

    font-size:28px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 25px;

    box-shadow:0 18px 35px rgba(0,0,0,.15);

}

.selection-step h3{

    margin-bottom:15px;

    font-size:22px;

}

.selection-step p{

    color:#667085;

    line-height:1.9;

}


/*====================================================
VISION
====================================================*/

.vision-section{

    background:

    linear-gradient(
    135deg,
    #06132B,
    #153A67);

    color:#ffffff;

    text-align:center;

    position:relative;

    overflow:hidden;

}

.vision-section::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    right:-250px;

    top:-300px;

    border-radius:50%;

    background:

    radial-gradient(

    rgba(212,175,55,.08),

    transparent 70%);

}

.vision-content{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:auto;

}

.vision-content span{

    display:inline-block;

    color:var(--secondary);

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:14px;

    font-weight:600;

    margin-bottom:25px;

}

.vision-content h2{

    color:#ffffff;

    font-size:52px;

    margin-bottom:30px;

}

.vision-content p{

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

    line-height:2;

    font-size:18px;

}


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

.expert-cta{

    background:#f8fafc;

}

.cta-box{

    background:

    linear-gradient(
    135deg,
    #06132B,
    #153A67);

    border-radius:28px;

    padding:80px 60px;

    text-align:center;

    color:#ffffff;

    position:relative;

    overflow:hidden;

}

.cta-box::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    top:-220px;

    right:-180px;

    background:

    radial-gradient(
    rgba(212,175,55,.10),
    transparent 70%);

}

.cta-box h2{

    color:#ffffff;

    font-size:46px;

    margin-bottom:25px;

    position:relative;

}

.cta-box p{

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

    max-width:750px;

    margin:0 auto 40px;

    line-height:1.9;

    position:relative;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    position:relative;

}


/*====================================================
PAGE ANIMATIONS
====================================================*/

.hero-content,
.hero-image{

    opacity:1;
    transform:none;

}
.experience-content,
.experience-image,
.experience-quote,
.pillar-card,
.expert-card,
.framework-card,
.benefit-card,
.ethics-card,
.timeline-item,
.selection-step,
.vision-content,
.cta-box{

    opacity:0;

    transform:translateY(32px);

    transition:

    opacity .8s ease,

    transform .8s ease;

}

.active-reveal{

    opacity:1;

    transform:translateY(0);

}


/* Floating Image */

.hero-image img{

    animation:

    heroFloat

    6s ease-in-out infinite;

}

@keyframes heroFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}


/* Card Hover */

.pillar-card:hover,
.expert-card:hover,
.framework-card:hover,
.benefit-card:hover,
.ethics-card:hover{

    transform:

    translateY(-12px);

}


/* Smooth Scroll */

html{

scroll-behavior:smooth;

}


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

@media(max-width:992px){

.selection-timeline{

grid-template-columns:1fr;

gap:45px;

}

.selection-timeline::before{

display:none;

}

.vision-content h2{

font-size:40px;

}

.cta-box{

padding:60px 35px;

}

.cta-box h2{

font-size:38px;

}

}


@media(max-width:768px){

.vision-content h2{

font-size:32px;

}

.cta-box h2{

font-size:30px;

}

.step-number{

width:75px;

height:75px;

font-size:24px;

}

.cta-buttons{

flex-direction:column;

align-items:center;

}

}

.hero-content,
.hero-image{

opacity:1 !important;

visibility:visible !important;

display:block !important;

transform:none !important;

}