/*==========================================================
  E-CV Eddy Lemahieu
  Version Premium
==========================================================*/


/*==========================================================
VARIABLES
==========================================================*/

:root{

    --primary:#0A66FF;

    --primary-light:#EDF4FF;

    --secondary:#1E293B;

    --text:#475569;

    --light:#F8FAFC;

    --white:#FFFFFF;

    --border:#E2E8F0;

    --radius:24px;

    --shadow-small:
        0 8px 20px rgba(15,23,42,.05);

    --shadow:
        0 20px 50px rgba(15,23,42,.08);

    --transition:.35s ease;

    --max-width:1320px;

}


/*==========================================================
RESET
==========================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    font-family:"Inter",sans-serif;

    color:var(--text);

    background:var(--white);

    line-height:1.7;

    overflow-x:hidden;

}


img{

    display:block;

    max-width:100%;

}


a{

    text-decoration:none;

    color:inherit;

}


ul{

    list-style:none;

}


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

.container{

    width:90%;

    max-width:var(--max-width);

    margin:auto;

}


/*==========================================================
HEADER
==========================================================*/

header{

    position:sticky;

    top:0;

    z-index:999;

    backdrop-filter:blur(18px);

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

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

}


.nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:95px;

}


.logo{

    font-size:2rem;

    font-weight:800;

    color:var(--primary);

}


nav ul{

    display:flex;

    gap:40px;

}


nav a{

    position:relative;

    font-weight:600;

    color:var(--secondary);

    transition:var(--transition);

}


nav a:hover{

    color:var(--primary);

}


nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:0;

    height:3px;

    border-radius:10px;

    background:var(--primary);

    transition:var(--transition);

}


nav a:hover::after,

nav a.active::after{

    width:100%;

}


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

.badge{

    display:inline-flex;

    align-items:center;

    padding:12px 24px;

    border-radius:50px;

    background:var(--primary-light);

    color:var(--primary);

    font-size:.95rem;

    font-weight:600;

}


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

section{

    padding:120px 0;

}


.section-title{

    text-align:center;

    margin-bottom:70px;

}


.section-title h2{

    font-size:3rem;

    color:var(--secondary);

    margin-bottom:20px;

}


.section-title p{

    max-width:760px;

    margin:auto;

}


/*==========================================================
TITRES
==========================================================*/

h1{

    font-size:4.2rem;

    line-height:1.1;

    color:var(--secondary);

    font-weight:800;

    margin:35px 0;

}


h2{

    font-size:2.8rem;

    color:var(--secondary);

    font-weight:700;

}


h3{

    font-size:1.35rem;

    color:var(--secondary);

    margin-bottom:15px;

}


p{

    font-size:1.08rem;

    color:var(--text);

}


/*==========================================================
BLEU
==========================================================*/

span{

    color:var(--primary);

}


/*==========================================================
BOUTONS
==========================================================*/

.hero-buttons,
.contact-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-top:45px;

}

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 34px;

    border-radius:50px;

    font-weight:600;

    transition:var(--transition);

}

.btn-primary{

    background:var(--primary);

    color:white;

}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:
        0 20px 45px rgba(10,102,255,.25);

}

.btn-outline{

    border:2px solid var(--primary);

    color:var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:white;

}

/* Bouton Contact */

.btn-contact{

    background:#16A34A;

    color:#fff;

    border:2px solid #16A34A;

}

.btn-contact:hover{

    background:#15803D;

    border-color:#15803D;

    color:#fff;

    transform:translateY(-5px);

    box-shadow:
        0 20px 45px rgba(22,163,74,.25);

}

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

.hero{

    position:relative;

    overflow:hidden;

    padding:90px 0 140px;

    background:
        radial-gradient(circle at 95% 10%, rgba(10,102,255,.08), transparent 30%),
        radial-gradient(circle at 5% 80%, rgba(10,102,255,.05), transparent 40%),
        linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);

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

.hero{

    position:relative;

    overflow:hidden;

    padding:90px 0 140px;

    background:
        radial-gradient(circle at 95% 10%, rgba(10,102,255,.08), transparent 30%),
        radial-gradient(circle at 5% 80%, rgba(10,102,255,.05), transparent 40%),
        linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);

}


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

.hero-grid{

    display:grid;

    grid-template-columns:58% 42%;

    align-items:center;

    gap:70px;

}


/*==========================================================
COLONNE GAUCHE
==========================================================*/

.hero-left{

    position:relative;

    z-index:5;

}


.hero-left h1{

    max-width:700px;

}


.hero-left p{

    max-width:650px;

    margin-top:30px;

    font-size:1.15rem;

    line-height:1.9;

}


/*==========================================================
SERVICES
==========================================================*/

.hero-services{

    display:grid;

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

    gap:16px 28px;

    margin-top:35px;

    margin-bottom:35px;

}

.service{

    display:flex;

    align-items:center;

    gap:12px;

}

.service-icon{

    width:52px;

    height:52px;

    border-radius:16px;

    background:#EDF4FF;

    color:var(--primary);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.15rem;

    box-shadow:var(--shadow-small);

}

.service h3{

    font-size:0.95rem;

    line-height:1.3;

    margin:0;

}

/*==========================================================
COLONNE DROITE
==========================================================*/

.hero-right{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    margin-top:-70px;

}


/*==========================================================
PHOTO
==========================================================*/

.hero-photo{

    width:850px;

    max-width:120%;

    position:relative;

    z-index:20;

    filter:drop-shadow(0 30px 50px rgba(0,0,0,.18));

}


/*==========================================================
HALO
==========================================================*/

.hero-right::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

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

    filter:blur(15px);

}


/*==========================================================
FORMES FLOTTANTES
==========================================================*/

.circle{

    position:absolute;

    border-radius:50%;

    background:#DDEBFF;

    z-index:1;

}

.circle1{

    width:26px;

    height:26px;

    right:60px;

    top:30px;

}

.circle2{

    width:14px;

    height:14px;

    left:40px;

    bottom:80px;

}


.square{

    position:absolute;

    background:#EDF4FF;

    border-radius:10px;

    transform:rotate(25deg);

    z-index:1;

}

.square1{

    width:32px;

    height:32px;

    left:20px;

    top:120px;

}

.square2{

    width:18px;

    height:18px;

    right:30px;

    bottom:120px;

}


/*==========================================================
POINTS
==========================================================*/

.dots{

    position:absolute;

    right:-15px;

    top:120px;

    width:110px;

    height:110px;

    opacity:.45;

    background-image:radial-gradient(#0A66FF 1.4px, transparent 1.4px);

    background-size:16px 16px;

}


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

.hero-photo{

    animation:floating 5s ease-in-out infinite;

}


@keyframes floating{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0px);

    }

}


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

@media(max-width:1100px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-right{

order:-1;

margin-bottom:60px;

}

.hero-left p{

margin:auto;

}

.hero-services{

grid-template-columns:1fr;

}

.hero-buttons{

justify-content:center;

}

}


@media(max-width:768px){

.hero{

padding:70px 0;

}

.hero-photo{

width:300px;

}

h1{

font-size:2.7rem;

}

}
/*==========================================================
MA DÉMARCHE
==========================================================*/

.demarche{

    background:#FFFFFF;

}

.demarche-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:70px;

    align-items:start;

}


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

.timeline{

    position:relative;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

}


.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:20px;

    bottom:20px;

    width:2px;

    background:#E7EEF9;

    transform:translateX(-50%);

}


.timeline-column{

    display:flex;

    flex-direction:column;

    gap:35px;

}


.timeline-item{

    position:relative;

    display:flex;

    gap:20px;

    padding:30px;

    background:#FFFFFF;

    border-radius:24px;

    box-shadow:var(--shadow-small);

    transition:var(--transition);

}


.timeline-item:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

}


.timeline-icon{

    width:65px;

    height:65px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:var(--primary-light);

    color:var(--primary);

    font-size:1.4rem;

}


.timeline-content h3{

    margin-bottom:10px;

}


.timeline-content p{

    margin:0;

    font-size:.98rem;

    line-height:1.8;

}


/*==========================================================
OBJECTIF
==========================================================*/

.objectif-card{

    position:sticky;

    top:130px;

    padding:45px;

    background:#FFFFFF;

    border-radius:30px;

    box-shadow:var(--shadow);

}


.quote-icon{

    width:70px;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--primary-light);

    color:var(--primary);

    font-size:1.5rem;

    margin-bottom:30px;

}


.objectif-card blockquote{

    font-size:1.25rem;

    font-weight:600;

    line-height:1.8;

    color:var(--secondary);

    margin-bottom:30px;

}


.objectif-card hr{

    border:none;

    border-top:1px solid var(--border);

    margin:35px 0;

}


/*==========================================================
CONVICTION
==========================================================*/

.conviction{

    background:#F8FBFF;

}


.conviction-card{

    max-width:1050px;

    margin:auto;

    background:#FFFFFF;

    border-radius:30px;

    padding:70px;

    box-shadow:var(--shadow);

    position:relative;

}


.quote{

    position:absolute;

    top:-25px;

    left:60px;

    width:70px;

    height:70px;

    border-radius:50%;

    background:var(--primary);

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.5rem;

}


.conviction-card p{

    font-size:1.22rem;

    line-height:2;

    margin-bottom:25px;

}


.conviction-card strong{

    color:var(--primary);

}


/*==========================================================
EXPERTISES
==========================================================*/

.expertises{

    background:#FFFFFF;

}


.expertises-grid{

    display:grid;

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

    gap:35px;

}


.expertise-card{

    background:#FFFFFF;

    border-radius:26px;

    padding:45px;

    box-shadow:var(--shadow-small);

    transition:var(--transition);

    border:1px solid #EEF2F7;

}


.expertise-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}


.expertise-icon{

    width:75px;

    height:75px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:22px;

    background:var(--primary-light);

    color:var(--primary);

    font-size:1.7rem;

    margin-bottom:25px;

}


.expertise-card h3{

    margin-bottom:20px;

}


.expertise-card p{

    margin:0;

}


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

@media(max-width:1100px){

.demarche-grid{

grid-template-columns:1fr;

}

.objectif-card{

position:relative;

top:auto;

}

.timeline{

grid-template-columns:1fr;

}

.timeline::before{

display:none;

}

.expertises-grid{

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

}

}


@media(max-width:768px){

.expertises-grid{

grid-template-columns:1fr;

}

.timeline-item{

flex-direction:column;

text-align:center;

}

.timeline-icon{

margin:auto;

}

.conviction-card{

padding:40px;

}

}
/*==========================================================
REALISATIONS
==========================================================*/

.realisations{

    background:#F8FBFF;

}


.projects-grid{

    display:grid;

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

    gap:35px;

}


.project-card{

    background:#FFFFFF;

    border-radius:28px;

    overflow:hidden;

    box-shadow:var(--shadow-small);

    transition:var(--transition);

}


.project-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}


.project-image{

    height:180px;

    background:linear-gradient(135deg,#0A66FF,#4F8DFF);

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:3rem;

}


.project-content{

    padding:35px;

}


.project-category{

    display:inline-block;

    margin-bottom:15px;

    padding:8px 16px;

    border-radius:50px;

    background:#EDF4FF;

    color:var(--primary);

    font-size:.85rem;

    font-weight:600;

}


.project-content h3{

    margin-bottom:20px;

}


.project-content p{

    margin:0;

}



/*==========================================================
CONTACT
==========================================================*/

.contact{

    background:white;

}


.contact-card{

    display:grid;

    grid-template-columns:380px 1fr;

    gap:70px;

    align-items:center;

    background:white;

    padding:70px;

    border-radius:35px;

    box-shadow:var(--shadow);

}


.contact-photo{

    width:100%;

    border-radius:28px;

    box-shadow:var(--shadow);

}


.contact-right h2{

    margin:30px 0;

}


.contact-right p{

    margin-bottom:20px;

}



/*==========================================================
FOOTER
==========================================================*/

footer{

    background:#0F172A;

    color:white;

    padding:70px 0;

}


.footer-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

}


footer h3{

    color:white;

    margin-bottom:10px;

}


footer p{

    color:#CBD5E1;

}



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

.project-card,
.expertise-card,
.timeline-item,
.conviction-card,
.contact-card{

    animation:fadeUp .9s ease both;

}


@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/*==========================================================
SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:10px;

}


::-webkit-scrollbar-track{

    background:#EDF2F7;

}


::-webkit-scrollbar-thumb{

    background:#0A66FF;

    border-radius:20px;

}



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

::selection{

    background:#0A66FF;

    color:white;

}



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

@media(max-width:1100px){

.projects-grid{

grid-template-columns:1fr;

}

.contact-card{

grid-template-columns:1fr;

text-align:center;

}

.contact-photo{

max-width:350px;

margin:auto;

}

.footer-content{

flex-direction:column;

text-align:center;

}

}


@media(max-width:768px){

section{

padding:80px 0;

}

h1{

font-size:2.7rem;

}

h2{

font-size:2.2rem;

}

.hero-buttons,

.contact-buttons{

flex-direction:column;

}

.btn{

width:100%;

justify-content:center;

}

}
/* =====================================================
   HERO E-CV
===================================================== */

.cv-hero{

    position:relative;

    overflow:hidden;

    padding:120px 0 80px;

    background:
        radial-gradient(circle at 95% 10%, rgba(10,102,255,.08), transparent 30%),
        radial-gradient(circle at 5% 80%, rgba(10,102,255,.05), transparent 40%),
        linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);

}

.cv-hero-grid{
    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:70px;
    align-items:center;
}

.cv-title{
    font-size:3.3rem;
    font-weight:800;
    color:#1E293B;
    margin:20px 0 10px;
    line-height:1.1;
}

.cv-job{
    font-size:1.45rem;
    font-weight:600;
    color:#0A66FF;
    margin-bottom:25px;
    line-height:1.4;
}

.cv-description{
    font-size:1.08rem;
    line-height:1.9;
    color:#475569;
    max-width:650px;
    margin-bottom:35px;
}

.cv-infos{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-bottom:40px;
}

.cv-info{
    display:flex;
    align-items:center;
    gap:15px;
    font-size:1rem;
    color:#475569;
}

.cv-info i{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#EDF4FF;
    color:#0A66FF;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1rem;
}

/* ===========================
Photo
=========================== */

.cv-hero-right{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:520px;

    margin-top:-40px;      /* remonte légèrement la photo */
}

.cv-photo{
    position:relative;
    width:650px;           /* avant : 520px */
    max-width:150%;
    z-index:10;
}

/* ===========================
Décors
=========================== */

.cv-circle{

    position:absolute;

    border-radius:50%;

    background:#DDEBFF;

    z-index:1;

}

.cv-circle{

    width:26px;

    height:26px;

    right:60px;

    top:30px;

}

.cv-circle2{

    width:14px;

    height:14px;

    left:40px;

    bottom:80px;

}


.cv-square{

    position:absolute;

    background:#EDF4FF;

    border-radius:10px;

    transform:rotate(25deg);

    z-index:1;

}

.cv-square1{

    width:32px;

    height:32px;

    left:20px;

    top:120px;

}

.square2{

    width:18px;

    height:18px;

    right:30px;

    bottom:120px;

}

/* ===========================
Responsive
=========================== */

@media(max-width:992px){

    .cv-hero-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .cv-description{
        margin:auto auto 35px;
    }

    .cv-infos{
        align-items:center;
    }

    .cv-hero-right{
        order:-1;
        min-height:auto;
        margin-bottom:40px;
    }

    .cv-photo{
        width:300px;
    }

}

@media(max-width:768px){

    .cv-title{
        font-size:2.4rem;
    }

    .cv-job{
        font-size:1.2rem;
    }

    .cv-photo{
        width:250px;
    }

}
/* =====================================================
STATISTIQUES E-CV
===================================================== */

.cv-stats{

    padding:30px 0 100px;

}

.cv-stats-grid{

    display:grid;

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

    gap:30px;

}

.cv-stat-card{

    background:#fff;

    border-radius:18px;

    padding:35px;

    border:1px solid #E2E8F0;

    box-shadow:0 10px 25px rgba(0,0,0,.05);

    transition:.3s;

}

.cv-stat-card:hover{

    transform:translateY(-6px);

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

}

.cv-stat-number{

    display:block;

    font-size:2.8rem;

    font-weight:800;

    color:#0A66FF;

    margin-bottom:15px;

}

.cv-stat-card h3{

    font-size:1.2rem;

    margin-bottom:15px;

    color:#1E293B;

}

.cv-stat-card p{

    color:#64748B;

    line-height:1.7;

}

@media(max-width:992px){

    .cv-stats-grid{

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

    }

}

@media(max-width:768px){

    .cv-stats-grid{

        grid-template-columns:1fr;

    }

}
/* =====================================================
   CAREER TIMELINE
===================================================== */

.career{

    padding:120px 0;

    background:#F8FAFC;

}

.career-timeline{

    position:relative;

    max-width:1000px;

    margin:70px auto 0;

    padding-left:140px;

}

/* Ligne verticale */

.career-timeline::before{

    content:"";

    position:absolute;

    left:95px;

    top:0;

    bottom:0;

    width:2px;

    background:#D9E4F3;

}

/* =====================================================
ITEM
===================================================== */

.career-item{

    position:relative;

    margin-bottom:25px;

}

/* =====================================================
HEADER
===================================================== */

.career-header{

    width:100%;

    background:#fff;

    border:none;

    border-radius:18px;

    padding:22px 30px;

    display:flex;

    align-items:center;

    cursor:pointer;

    transition:.30s;

    box-shadow:0 8px 25px rgba(15,23,42,.05);

    position:relative;

}

.career-header:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 40px rgba(15,23,42,.08);

}

/* =====================================================
ANNEE
===================================================== */

.career-year{

    position:absolute;

    left:-155px;

    width:70px;

    text-align:right;

    font-size:1rem;

    font-weight:700;

    color:#64748B;

}

/* =====================================================
POINT
===================================================== */

.career-dot{

    position:absolute;

    left:-57px;

    width:16px;

    height:16px;

    background:#fff;

    border:4px solid #0A66FF;

    border-radius:50%;

    z-index:2;

}

/* =====================================================
TITRE
===================================================== */

.career-summary{

    flex:1;

    text-align:left;

}

.career-summary h3{

    margin:0;

    font-size:1.25rem;

    font-weight:700;

    color:#1E293B;

}

.career-summary p{

    margin-top:6px;

    color:#64748B;

    font-size:1rem;

}

/* =====================================================
CHEVRON
===================================================== */

.career-header i{

    font-size:1.1rem;

    color:#94A3B8;

    transition:.35s;

}

.career-item.active .career-header i{

    transform:rotate(180deg);

    color:#0A66FF;

}

/* =====================================================
EFFET EXPERIENCE ACTIVE
===================================================== */

.career-item.active .career-header{

    border-left:5px solid #0A66FF;

}

.career-item.active .career-dot{

    background:#0A66FF;

}

/* =====================================================
CONTENU
===================================================== */

.career-content{

    display:none;

    margin-left:20px;

    padding:35px;

    background:#fff;

    border-radius:0 0 18px 18px;

    border-left:5px solid #0A66FF;

    box-shadow:0 15px 35px rgba(15,23,42,.05);

}

.career-item.active .career-content{

    display:block;

}
/* =====================================================
ONGLETS
===================================================== */

.career-tabs{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-bottom:30px;

    border-bottom:1px solid #E2E8F0;

    padding-bottom:20px;

}

.career-tabs .tab{

    border:none;

    background:#EDF4FF;

    color:#0A66FF;

    padding:10px 18px;

    border-radius:999px;

    font-size:.95rem;

    font-weight:600;

    cursor:pointer;

    transition:.30s;

}

.career-tabs .tab:hover{

    background:#0A66FF;

    color:#fff;

}

.career-tabs .tab.active{

    background:#0A66FF;

    color:#fff;

}

/* =====================================================
PANELS
===================================================== */

.career-panel{

    color:#475569;

    line-height:1.9;

    font-size:1rem;

}

.career-panel h4{

    margin-bottom:18px;

    color:#1E293B;

    font-size:1.1rem;

}

.career-panel ul{

    margin:20px 0;

    padding-left:20px;

}

.career-panel li{

    margin-bottom:12px;

}

/* =====================================================
COMPETENCES
===================================================== */

.timeline-tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:25px;

}

.timeline-tags span{

    background:#EDF4FF;

    color:#0A66FF;

    padding:10px 16px;

    border-radius:999px;

    font-size:.90rem;

    font-weight:600;

    transition:.30s;

}

.timeline-tags span:hover{

    background:#0A66FF;

    color:#fff;

}

/* =====================================================
BOUTON
===================================================== */

.career-content .btn{

    margin-top:35px;

}

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

.career-content{

    animation:fadeCareer .35s ease;

}

@keyframes fadeCareer{

    from{

        opacity:0;

        transform:translateY(-12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:992px){

    .career-timeline{

        padding-left:90px;

    }

    .career-year{

        left:-80px;

        width:55px;

        font-size:.90rem;

    }

    .career-timeline::before{

        left:55px;

    }

    .career-dot{

        left:-36px;

    }

}

@media(max-width:768px){

    .career{

        padding:80px 0;

    }

    .career-timeline{

        padding-left:0;

    }

    .career-timeline::before{

        display:none;

    }

    .career-year{

        position:relative;

        left:0;

        width:auto;

        text-align:left;

        margin-bottom:10px;

        color:#0A66FF;

    }

    .career-dot{

        display:none;

    }

    .career-header{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

    .career-header i{

        position:absolute;

        right:25px;

        top:28px;

    }

    .career-content{

        margin-left:0;

        padding:25px;

    }

    .career-tabs{

        gap:8px;

    }

}
/* ==========================================
TABS
========================================== */

.tab-content{

    display:none;

}

.tab-content.active{

    display:block;

}