body{

    background:#07152d;
    
    font-family:Inter,sans-serif;
    
    overflow-x:hidden;
    
    }
    
    .membershipHero{
    
    position:relative;
    
    min-height:100vh;
    
    display:grid;
    
    grid-template-columns:1.05fr .95fr;
    
    align-items:center;
    
    padding:90px 8%;
    
    overflow:hidden;
    
    background:
    
    radial-gradient(circle at top left,#1e58bb55,transparent 45%),
    
    radial-gradient(circle at bottom right,#d4af3735,transparent 35%),
    
    linear-gradient(135deg,#06152b,#0b2e63,#153f85);
    
    }
    
    .heroOverlay{
    
    position:absolute;
    
    inset:0;
    
    background-image:
    
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    
    background-size:60px 60px;
    
    pointer-events:none;
    
    }
    
    .heroContent{
    
    position:relative;
    
    z-index:2;
    
    max-width:760px;
    
    }
    
    .heroBadge{
    
    display:inline-flex;
    
    align-items:center;
    
    gap:12px;
    
    padding:10px 22px;
    
    border-radius:40px;
    
    background:rgba(255,255,255,.12);
    
    backdrop-filter:blur(15px);
    
    color:#ffd96d;
    
    font-weight:700;
    
    letter-spacing:1px;
    
    margin-bottom:35px;
    
    }
    
    .heroBadge i{
    
    font-size:18px;
    
    }
    
    .heroContent h1{
    
    font-size:clamp(3.5rem,6vw,6rem);
    
    line-height:.95;
    
    font-weight:900;
    
    color:white;
    
    margin-bottom:35px;
    
    }
    
    .heroContent p{
    
    font-size:1.25rem;
    
    line-height:2;
    
    color:rgba(255,255,255,.88);
    
    margin-bottom:45px;
    
    }
    
    .heroButtons{
    
    display:flex;
    
    gap:25px;
    
    flex-wrap:wrap;
    
    }
    
    .primaryButton{
    
    padding:18px 38px;
    
    border-radius:60px;
    
    background:#d4af37;
    
    color:#081f45;
    
    font-weight:800;
    
    transition:.35s;
    
    }
    
    .primaryButton:hover{
    
    transform:translateY(-6px);
    
    box-shadow:0 20px 45px rgba(212,175,55,.45);
    
    }
    
    .secondaryButton{
    
    padding:18px 38px;
    
    border-radius:60px;
    
    border:2px solid rgba(255,255,255,.25);
    
    color:white;
    
    backdrop-filter:blur(20px);
    
    transition:.35s;
    
    }
    
    .secondaryButton:hover{
    
    background:white;
    
    color:#0b2e63;
    
    }
    
    .heroVisual{
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    position:relative;
    
    z-index:2;
    
    }
    
    .heroVisual img{
    
    width:min(650px,100%);
    
    filter:drop-shadow(0 40px 80px rgba(0,0,0,.45));
    
    animation:floatHero 6s ease-in-out infinite;
    
    }
    
    @keyframes floatHero{
    
    0%{
    
    transform:translateY(0);
    
    }
    
    50%{
    
    transform:translateY(-20px);
    
    }
    
    100%{
    
    transform:translateY(0);
    
    }
    
    }
    
    .scrollIndicator{
    
    position:absolute;
    
    bottom:35px;
    
    left:50%;
    
    transform:translateX(-50%);
    
    width:34px;
    
    height:58px;
    
    border:2px solid rgba(255,255,255,.45);
    
    border-radius:50px;
    
    display:flex;
    
    justify-content:center;
    
    padding-top:10px;
    
    }
    
    .scrollIndicator span{
    
    width:6px;
    
    height:10px;
    
    border-radius:20px;
    
    background:white;
    
    animation:scroll 2s infinite;
    
    }
    
    @keyframes scroll{
    
    0%{
    
    transform:translateY(0);
    
    opacity:0;
    
    }
    
    40%{
    
    opacity:1;
    
    }
    
    100%{
    
    transform:translateY(20px);
    
    opacity:0;
    
    }
    
    }
    
    @media(max-width:1100px){
    
    .membershipHero{
    
    grid-template-columns:1fr;
    
    text-align:center;
    
    gap:80px;
    
    }
    
    .heroButtons{
    
    justify-content:center;
    
    }
    
    }
    /*======================================================
POURQUOI REJOINDRE LA CJJD
======================================================*/

.whyJoin{

    padding:140px 8%;
    
    background:white;
    
    position:relative;
    
    overflow:hidden;
    
    }
    
    .sectionHeader{
    
    max-width:900px;
    
    margin:auto;
    
    text-align:center;
    
    margin-bottom:80px;
    
    }
    
    .sectionHeader span{
    
    display:inline-block;
    
    padding:10px 22px;
    
    border-radius:40px;
    
    background:#EDF3FF;
    
    color:#0B2E63;
    
    font-weight:700;
    
    margin-bottom:25px;
    
    }
    
    .sectionHeader h2{
    
    font-size:clamp(2.8rem,5vw,4.5rem);
    
    line-height:1.1;
    
    color:#0B2E63;
    
    margin-bottom:30px;
    
    }
    
    .sectionHeader p{
    
    font-size:1.15rem;
    
    line-height:2;
    
    color:#5B6473;
    
    }
    
    .joinGrid{
    
    display:grid;
    
    grid-template-columns:repeat(3,1fr);
    
    gap:35px;
    
    max-width:1500px;
    
    margin:auto;
    
    }
    
    .joinCard{
    
    background:white;
    
    padding:45px;
    
    border-radius:28px;
    
    box-shadow:0 25px 70px rgba(0,0,0,.08);
    
    transition:.45s;
    
    position:relative;
    
    overflow:hidden;
    
    cursor:pointer;
    
    }
    
    .joinCard::before{
    
    content:"";
    
    position:absolute;
    
    left:0;
    
    top:0;
    
    width:100%;
    
    height:6px;
    
    background:#D4AF37;
    
    transform:scaleX(0);
    
    transform-origin:left;
    
    transition:.45s;
    
    }
    
    .joinCard:hover::before{
    
    transform:scaleX(1);
    
    }
    
    .joinCard:hover{
    
    transform:translateY(-15px);
    
    box-shadow:0 35px 80px rgba(0,0,0,.15);
    
    }
    
    .joinIcon{
    
    width:90px;
    
    height:90px;
    
    border-radius:50%;
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    background:linear-gradient(135deg,#FFF7DD,#FFE08A);
    
    margin-bottom:35px;
    
    font-size:36px;
    
    color:#0B2E63;
    
    transition:.45s;
    
    }
    
    .joinCard:hover .joinIcon{
    
    transform:rotate(-12deg) scale(1.15);
    
    }
    
    .joinCard h3{
    
    font-size:1.7rem;
    
    color:#0B2E63;
    
    margin-bottom:20px;
    
    }
    
    .joinCard p{
    
    line-height:1.9;
    
    color:#666;
    
    }
    
    @media(max-width:1100px){
    
    .joinGrid{
    
    grid-template-columns:repeat(2,1fr);
    
    }
    
    }
    
    @media(max-width:700px){
    
    .joinGrid{
    
    grid-template-columns:1fr;
    
    }
    
    }
    /*======================================================
CONDITIONS
======================================================*/

.conditionsSection{

    padding:140px 8%;
    
    background:#eef4fb;
    
    }
    
    .conditionsProgress{
    
    max-width:900px;
    
    margin:60px auto;
    
    text-align:center;
    
    }
    
    .progressBar{
    
    height:14px;
    
    background:#dfe7f4;
    
    border-radius:50px;
    
    overflow:hidden;
    
    }
    
    .progressFill{
    
    width:0;
    
    height:100%;
    
    background:linear-gradient(90deg,#0B2E63,#D4AF37);
    
    transition:.6s;
    
    }
    
    .progressText{
    
    margin-top:20px;
    
    font-weight:700;
    
    color:#0B2E63;
    
    }
    
    .conditionsGrid{
    
    display:grid;
    
    grid-template-columns:repeat(3,1fr);
    
    gap:35px;
    
    max-width:1500px;
    
    margin:auto;
    
    }
    
    .conditionCard{
    
    background:white;
    
    padding:40px;
    
    border-radius:28px;
    
    box-shadow:0 20px 60px rgba(0,0,0,.08);
    
    transition:.45s;
    
    display:flex;
    
    flex-direction:column;
    
    }
    
    .conditionCard:hover{
    
    transform:translateY(-12px);
    
    }
    
    .conditionNumber{
    
    width:70px;
    
    height:70px;
    
    border-radius:50%;
    
    background:linear-gradient(135deg,#0B2E63,#184A9C);
    
    color:white;
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    font-size:24px;
    
    font-weight:800;
    
    margin-bottom:30px;
    
    }
    
    .conditionCard h3{
    
    color:#0B2E63;
    
    margin-bottom:20px;
    
    font-size:1.6rem;
    
    }
    
    .conditionCard p{
    
    flex:1;
    
    line-height:1.9;
    
    color:#666;
    
    margin-bottom:35px;
    
    }
    
    .conditionCard button{
    
    padding:16px;
    
    border:none;
    
    border-radius:50px;
    
    background:#0B2E63;
    
    color:white;
    
    font-weight:700;
    
    cursor:pointer;
    
    transition:.35s;
    
    }
    
    .conditionCard button:hover{
    
    background:#D4AF37;
    
    color:#111;
    
    }
    
    .conditionCard.completed{
    
    background:#eefbea;
    
    }
    
    .conditionCard.completed button{
    
    background:#27ae60;
    
    }
    
    .conditionCard.completed button::before{
    
    content:"✓ ";
    
    }
    
    @media(max-width:1100px){
    
    .conditionsGrid{
    
    grid-template-columns:repeat(2,1fr);
    
    }
    
    }
    
    @media(max-width:700px){
    
    .conditionsGrid{
    
    grid-template-columns:1fr;
    
    }
    
    }
    /*======================================================
TIMELINE
======================================================*/

.timelineSection{

    padding:160px 8%;
    
    background:linear-gradient(180deg,#081f45,#0f3776);
    
    position:relative;
    
    overflow:hidden;
    
    }
    
    .timelineSection .sectionHeader h2,
    
    .timelineSection .sectionHeader p{
    
    color:white;
    
    }
    
    .timelineSection .sectionHeader span{
    
    background:rgba(255,255,255,.12);
    
    color:#FFD54F;
    
    }
    
    .timeline{
    
    position:relative;
    
    max-width:1300px;
    
    margin:120px auto 0;
    
    }
    
    .timelineLine{
    
    position:absolute;
    
    left:50%;
    
    top:0;
    
    width:5px;
    
    height:100%;
    
    background:linear-gradient(#FFD54F,#ffffff);
    
    transform:translateX(-50%);
    
    border-radius:50px;
    
    }
    
    .timelineItem{
    
    position:relative;
    
    width:50%;
    
    padding:0 70px 90px;
    
    opacity:0;
    
    transform:translateY(80px);
    
    transition:1s;
    
    }
    
    .timelineItem.visible{
    
    opacity:1;
    
    transform:none;
    
    }
    
    .timelineItem.left{
    
    left:0;
    
    text-align:right;
    
    }
    
    .timelineItem.right{
    
    left:50%;
    
    }
    
    .timelineDot{
    
    position:absolute;
    
    top:20px;
    
    right:-33px;
    
    width:66px;
    
    height:66px;
    
    border-radius:50%;
    
    background:#FFD54F;
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    font-size:24px;
    
    color:#0B2E63;
    
    z-index:5;
    
    box-shadow:0 0 35px rgba(255,213,79,.45);
    
    }
    
    .timelineItem.right .timelineDot{
    
    left:-33px;
    
    }
    
    .timelineCard{
    
    background:white;
    
    border-radius:25px;
    
    padding:35px;
    
    transition:.4s;
    
    box-shadow:0 25px 70px rgba(0,0,0,.25);
    
    cursor:pointer;
    
    }
    
    .timelineCard:hover{
    
    transform:scale(1.03);
    
    }
    
    .timelineCard span{
    
    display:inline-block;
    
    margin-bottom:12px;
    
    font-weight:800;
    
    color:#D4AF37;
    
    }
    
    .timelineCard h3{
    
    color:#0B2E63;
    
    margin-bottom:15px;
    
    }
    
    .timelineCard p{
    
    line-height:1.9;
    
    color:#555;
    
    }
    
    @media(max-width:900px){
    
    .timelineLine{
    
    left:35px;
    
    }
    
    .timelineItem,
    
    .timelineItem.left,
    
    .timelineItem.right{
    
    left:0;
    
    width:100%;
    
    padding-left:95px;
    
    padding-right:0;
    
    text-align:left;
    
    }
    
    .timelineDot,
    
    .timelineItem.right .timelineDot{
    
    left:2px;
    
    right:auto;
    
    }
    
    }
    /*======================================================
DEPARTEMENTS
======================================================*/

.departmentsSection{

    padding:150px 8%;
    
    background:#ffffff;
    
    position:relative;
    
    overflow:hidden;
    
    }
    
    .departmentsGrid{
    
    display:grid;
    
    grid-template-columns:repeat(3,1fr);
    
    gap:35px;
    
    max-width:1500px;
    
    margin:auto;
    
    }
    
    .departmentCard{
    
    position:relative;
    
    padding:45px;
    
    border-radius:30px;
    
    background:white;
    
    cursor:pointer;
    
    overflow:hidden;
    
    transition:.45s;
    
    border:1px solid #edf2fb;
    
    box-shadow:0 25px 60px rgba(0,0,0,.08);
    
    transform-style:preserve-3d;
    
    }
    
    .departmentCard::before{
    
    content:"";
    
    position:absolute;
    
    inset:0;
    
    background:linear-gradient(135deg,#0B2E63,#2454B6);
    
    opacity:0;
    
    transition:.45s;
    
    }
    
    .departmentCard:hover{
    
    transform:perspective(900px) rotateX(6deg) rotateY(-6deg) translateY(-15px);
    
    box-shadow:0 40px 90px rgba(0,0,0,.18);
    
    }
    
    .departmentCard:hover::before{
    
    opacity:1;
    
    }
    
    .departmentCard>*{
    
    position:relative;
    
    z-index:2;
    
    transition:.35s;
    
    }
    
    .departmentCard:hover>*{
    
    color:white;
    
    }
    
    .departmentIcon{
    
    width:95px;
    
    height:95px;
    
    border-radius:50%;
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    background:linear-gradient(135deg,#FFF4D2,#FFD86A);
    
    font-size:38px;
    
    color:#0B2E63;
    
    margin-bottom:30px;
    
    transition:.4s;
    
    }
    
    .departmentCard:hover .departmentIcon{
    
    background:white;
    
    transform:rotate(-10deg) scale(1.12);
    
    }
    
    .departmentCard h3{
    
    font-size:1.8rem;
    
    color:#0B2E63;
    
    margin-bottom:20px;
    
    }
    
    .departmentCard p{
    
    line-height:1.9;
    
    color:#666;
    
    }
    
    .departmentCard.selected{
    
    outline:5px solid #D4AF37;
    
    transform:scale(1.03);
    
    }
    
    @media(max-width:1100px){
    
    .departmentsGrid{
    
    grid-template-columns:repeat(2,1fr);
    
    }
    
    }
    
    @media(max-width:700px){
    
    .departmentsGrid{
    
    grid-template-columns:1fr;
    
    }
    
    }
    .departmentCard small{

        display:inline-block;
        
        margin:10px 0 22px;
        
        padding:8px 18px;
        
        border-radius:30px;
        
        background:#EDF4FF;
        
        font-weight:700;
        
        letter-spacing:2px;
        
        color:#0B2E63;
        
        transition:.35s;
        
        }
        
        .departmentCard:hover small{
        
        background:#ffffff22;
        
        color:#FFD54F;
        
        }
        
        .deptButton{
        
        margin-top:30px;
        
        padding:15px 24px;
        
        border:none;
        
        border-radius:40px;
        
        background:#0B2E63;
        
        color:white;
        
        font-weight:700;
        
        cursor:pointer;
        
        transition:.35s;
        
        }
        
        .departmentCard:hover .deptButton{
        
        background:#FFD54F;
        
        color:#0B2E63;
        
        }
        /*======================================================
MODAL DEPARTEMENTS
======================================================*/

.departmentModal{

    position:fixed;
    
    inset:0;
    
    background:rgba(0,0,0,.75);
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    opacity:0;
    
    visibility:hidden;
    
    transition:.45s;
    
    z-index:9999;
    
    backdrop-filter:blur(8px);
    
    }
    
    .departmentModal.show{
    
    opacity:1;
    
    visibility:visible;
    
    }
    
    .modalOverlay{
    
    position:absolute;
    
    inset:0;
    
    }
    
    .modalWindow{
    
    position:relative;
    
    width:min(1500px,95%);
    
    height:min(88vh,900px);
    
    display:grid;
    
    grid-template-columns:420px 1fr;
    
    overflow:hidden;
    
    border-radius:35px;
    
    background:white;
    
    box-shadow:0 60px 120px rgba(0,0,0,.35);
    
    animation:modalUp .45s;
    
    }
    
    @keyframes modalUp{
    
    from{
    
    transform:translateY(80px) scale(.9);
    
    opacity:0;
    
    }
    
    to{
    
    transform:none;
    
    opacity:1;
    
    }
    
    }
    
    .modalLeft{
    
    padding:55px;
    
    background:linear-gradient(135deg,#08224D,#154B9C);
    
    color:white;
    
    display:flex;
    
    flex-direction:column;
    
    }
    
    .modalIcon{
    
    width:120px;
    
    height:120px;
    
    border-radius:50%;
    
    background:#FFD54F;
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    font-size:48px;
    
    color:#08224D;
    
    margin-bottom:35px;
    
    }
    
    .modalLeft h2{
    
    font-size:2rem;
    
    margin-bottom:25px;
    
    }
    
    .modalLeft p{
    
    line-height:2;
    
    opacity:.9;
    
    }
    
    .chooseDepartment{
    
    margin-top:auto;
    
    padding:18px;
    
    border:none;
    
    border-radius:60px;
    
    background:#FFD54F;
    
    font-weight:800;
    
    cursor:pointer;
    
    font-size:1rem;
    
    }
    
    .modalRight{
    
    padding:60px;
    
    overflow-y:auto;
    
    background:#F7FAFF;
    
    }
    
    .attributeCard{
    
    background:white;
    
    padding:28px;
    
    border-radius:22px;
    
    margin-bottom:22px;
    
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    
    display:flex;
    
    gap:20px;
    
    align-items:flex-start;
    
    transition:.35s;
    
    }
    
    .attributeCard:hover{
    
    transform:translateX(12px);
    
    }
    
    .attributeIcon{
    
    width:60px;
    
    height:60px;
    
    border-radius:50%;
    
    background:#EDF4FF;
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    font-size:22px;
    
    color:#0B2E63;
    
    flex-shrink:0;
    
    }
    
    .attributeCard h4{
    
    margin-bottom:10px;
    
    color:#0B2E63;
    
    }
    
    .attributeCard p{
    
    line-height:1.8;
    
    color:#666;
    
    }
    
    .closeModal{
    
    position:absolute;
    
    top:25px;
    
    right:25px;
    
    width:52px;
    
    height:52px;
    
    border:none;
    
    border-radius:50%;
    
    background:white;
    
    font-size:20px;
    
    cursor:pointer;
    
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    
    z-index:5;
    
    }
    
    @media(max-width:1000px){
    
    .modalWindow{
    
    grid-template-columns:1fr;
    
    height:95vh;
    
    }
    
    .modalLeft{
    
    padding:35px;
    
    }
    
    }
    /*======================================================
APPLICATION
======================================================*/

.applicationSection{

    padding:160px 8%;
    
    background:#EEF4FB;
    
    }
    
    .applicationContainer{
    
    display:grid;
    
    grid-template-columns:360px 1fr;
    
    gap:60px;
    
    max-width:1500px;
    
    margin:auto;
    
    margin-top:70px;
    
    }
    
    .applicationSidebar{
    
    background:linear-gradient(180deg,#08224D,#1A57B5);
    
    border-radius:35px;
    
    padding:45px;
    
    color:white;
    
    position:sticky;
    
    top:120px;
    
    height:max-content;
    
    }
    
    .candidateAvatar{

        width:170px;
        
        height:170px;
        
        margin:auto;
        
        border-radius:50%;
        
        overflow:hidden;
        
        background:white;
        
        border:6px solid rgba(255,255,255,.18);
        
        box-shadow:0 20px 50px rgba(0,0,0,.30);
        
        margin-bottom:25px;
        
        }
        
        .candidateAvatar img{
        
        width:100%;
        
        height:100%;
        
        object-fit:cover;
        
        }
        
        .candidateStatus{
        
        display:flex;
        
        justify-content:center;
        
        align-items:center;
        
        gap:10px;
        
        margin-bottom:25px;
        
        font-weight:700;
        
        }
        
        .statusDot{
        
        width:12px;
        
        height:12px;
        
        border-radius:50%;
        
        background:#f39c12;
        
        animation:pulseStatus 1.5s infinite;
        
        }
        
        @keyframes pulseStatus{
        
        0%{
        
        transform:scale(1);
        
        opacity:1;
        
        }
        
        50%{
        
        transform:scale(1.6);
        
        opacity:.4;
        
        }
        
        100%{
        
        transform:scale(1);
        
        opacity:1;
        
        }
        
        }
        
        .candidateId{
        
        background:rgba(255,255,255,.08);
        
        padding:16px;
        
        border-radius:18px;
        
        text-align:center;
        
        margin-bottom:35px;
        
        }
        
        .candidateId small{
        
        display:block;
        
        opacity:.7;
        
        margin-bottom:6px;
        
        }
        
        .candidateId strong{
        
        font-size:1.15rem;
        
        letter-spacing:2px;
        
        color:#FFD54F;
        
        }
    
    .applicationSidebar h3{
    
    text-align:center;
    
    margin-bottom:40px;
    
    }
    
    .resumeList{
    
    list-style:none;
    
    padding:0;
    
    margin:0;
    
    display:flex;
    
    flex-direction:column;
    
    gap:25px;
    
    }
    
    .resumeList li{
    
    display:flex;
    
    gap:18px;
    
    align-items:center;
    
    line-height:1.6;
    
    }
    
    .applicationWizard{
    
    background:white;
    
    padding:55px;
    
    border-radius:35px;
    
    box-shadow:0 25px 70px rgba(0,0,0,.08);
    
    }
    
    .wizardProgress{
    
    height:12px;
    
    background:#E6EDF8;
    
    border-radius:40px;
    
    margin-bottom:45px;
    
    overflow:hidden;
    
    }
    
    .wizardFill{
    
    width:25%;
    
    height:100%;
    
    background:linear-gradient(90deg,#0B2E63,#FFD54F);
    
    transition:.45s;
    
    }
    
    .wizardStep{
    
    display:none;
    
    animation:fadeStep .45s;
    
    }
    
    .wizardStep.active{
    
    display:block;
    
    }
    
    @keyframes fadeStep{
    
    from{
    
    opacity:0;
    
    transform:translateX(40px);
    
    }
    
    to{
    
    opacity:1;
    
    transform:none;
    
    }
    
    }
    
    .wizardStep label{
    
    display:block;
    
    font-size:1.2rem;
    
    font-weight:700;
    
    margin-bottom:18px;
    
    color:#08224D;
    
    }
    
    .wizardStep input,
    
    .wizardStep textarea{
    
    width:100%;
    
    padding:18px;
    
    border-radius:18px;
    
    border:2px solid #DDE7F5;
    
    font-size:1rem;
    
    outline:none;
    
    transition:.35s;
    
    }
    
    .wizardStep input:focus,
    
    .wizardStep textarea:focus{
    
    border-color:#0B2E63;
    
    }
    
    .wizardNavigation{
    
    display:flex;
    
    justify-content:space-between;
    
    margin-top:45px;
    
    }
    
    .wizardNavigation button{
    
    padding:16px 34px;
    
    border:none;
    
    border-radius:50px;
    
    font-weight:700;
    
    cursor:pointer;
    
    transition:.35s;
    
    }
    
    #previousStep{
    
    background:#EEF4FB;
    
    }
    
    #nextStep{
    
    background:#0B2E63;
    
    color:white;
    
    }
    
    #nextStep:hover{
    
    background:#FFD54F;
    
    color:#08224D;
    
    }
    
    @media(max-width:1100px){
    
    .applicationContainer{
    
    grid-template-columns:1fr;
    
    }
    
    .applicationSidebar{
    
    position:relative;
    
    top:0;
    
    }
    
    }/*======================================================
APPLICATION
======================================================*/

.applicationSection{

    padding:160px 8%;
    
    background:#EEF4FB;
    
    }
    
    .applicationContainer{
    
    display:grid;
    
    grid-template-columns:360px 1fr;
    
    gap:60px;
    
    max-width:1500px;
    
    margin:auto;
    
    margin-top:70px;
    
    }
    
    .applicationSidebar{
    
    background:linear-gradient(180deg,#08224D,#1A57B5);
    
    border-radius:35px;
    
    padding:45px;
    
    color:white;
    
    position:sticky;
    
    top:120px;
    
    height:max-content;
    
    }
    
    .applicationSidebar h3{
    
    text-align:center;
    
    margin-bottom:40px;
    
    }
    
    .resumeList{
    
    list-style:none;
    
    padding:0;
    
    margin:0;
    
    display:flex;
    
    flex-direction:column;
    
    gap:25px;
    
    }
    
    .resumeList li{
    
    display:flex;
    
    gap:18px;
    
    align-items:center;
    
    line-height:1.6;
    
    }
    
    .applicationWizard{
    
    background:white;
    
    padding:55px;
    
    border-radius:35px;
    
    box-shadow:0 25px 70px rgba(0,0,0,.08);
    
    }
    
    .wizardProgress{
    
    height:12px;
    
    background:#E6EDF8;
    
    border-radius:40px;
    
    margin-bottom:45px;
    
    overflow:hidden;
    
    }
    
    .wizardFill{
    
    width:25%;
    
    height:100%;
    
    background:linear-gradient(90deg,#0B2E63,#FFD54F);
    
    transition:.45s;
    
    }
    
    .wizardStep{
    
    display:none;
    
    animation:fadeStep .45s;
    
    }
    
    .wizardStep.active{
    
    display:block;
    
    }
    
    @keyframes fadeStep{
    
    from{
    
    opacity:0;
    
    transform:translateX(40px);
    
    }
    
    to{
    
    opacity:1;
    
    transform:none;
    
    }
    
    }
    
    .wizardStep label{
    
    display:block;
    
    font-size:1.2rem;
    
    font-weight:700;
    
    margin-bottom:18px;
    
    color:#08224D;
    
    }
    
    .wizardStep input,
    
    .wizardStep textarea{
    
    width:100%;
    
    padding:18px;
    
    border-radius:18px;
    
    border:2px solid #DDE7F5;
    
    font-size:1rem;
    
    outline:none;
    
    transition:.35s;
    
    }
    
    .wizardStep input:focus,
    
    .wizardStep textarea:focus{
    
    border-color:#0B2E63;
    
    }
    
    .wizardNavigation{
    
    display:flex;
    
    justify-content:space-between;
    
    margin-top:45px;
    
    }
    
    .wizardNavigation button{
    
    padding:16px 34px;
    
    border:none;
    
    border-radius:50px;
    
    font-weight:700;
    
    cursor:pointer;
    
    transition:.35s;
    
    }
    
    #previousStep{
    
    background:#EEF4FB;
    
    }
    
    #nextStep{
    
    background:#0B2E63;
    
    color:white;
    
    }
    
    #nextStep:hover{
    
    background:#FFD54F;
    
    color:#08224D;
    
    }
    
    @media(max-width:1100px){
    
    .applicationContainer{
    
    grid-template-columns:1fr;
    
    }
    
    .applicationSidebar{
    
    position:relative;
    
    top:0;
    
    }
    
    }
    /*======================================================
DOCUMENTS
======================================================*/

.documentsPanel{

    margin-top:70px;
    
    padding-top:60px;
    
    border-top:2px dashed #DDE6F4;
    
    }
    
    .uploadGrid{

        display:grid;
        
        grid-template-columns:repeat(2,minmax(320px,420px));
        
        justify-content:center;
        
        gap:40px;
        
        margin-top:45px;
        
        }
    
    .uploadCard{
    
    background:#F7FAFF;
    
    padding:45px;
    
    border-radius:25px;
    
    text-align:center;
    
    cursor:pointer;
    
    transition:.35s;
    
    border:2px dashed #D4DDEB;
    
    }
    
    .uploadCard:hover{
    
    background:white;
    
    transform:translateY(-10px);
    
    border-color:#0B2E63;
    
    }
    
    .uploadCard i{
    
    font-size:42px;
    
    color:#0B2E63;
    
    margin-bottom:20px;
    
    }
    
    .uploadCard h4{
    
    margin-bottom:15px;
    
    color:#0B2E63;
    
    }
    
    .uploadCard small{
    
    color:#666;
    
    display:block;
    
    margin-top:10px;
    
    word-break:break-word;
    
    }
    
    /*======================================================
    COMPLETION
    ======================================================*/
    
    .completionCard{
    
    margin-top:45px;
    
    padding-top:35px;
    
    border-top:1px solid rgba(255,255,255,.15);
    
    text-align:center;
    
    }
    
    .completionCircle{
    
    width:180px;
    
    height:180px;
    
    margin:30px auto;
    
    position:relative;
    
    }
    
    .completionCircle svg{
    
    transform:rotate(-90deg);
    
    width:100%;
    
    height:100%;
    
    }
    
    .completionCircle circle{
    
    fill:none;
    
    stroke-width:10;
    
    stroke:rgba(255,255,255,.12);
    
    }
    
    #progressCircle{
    
    stroke:#FFD54F;
    
    stroke-linecap:round;
    
    stroke-dasharray:327;
    
    stroke-dashoffset:327;
    
    transition:.6s;
    
    }
    
    .completionCircle span{
    
    position:absolute;
    
    inset:0;
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    font-size:2rem;
    
    font-weight:800;
    
    }
    .submitZone{

        margin-top:60px;
        
        text-align:center;
        
        }
        
        #submitApplication{
        
        padding:22px 55px;
        
        font-size:1.15rem;
        
        border:none;
        
        border-radius:60px;
        
        background:#D4AF37;
        
        color:#08224D;
        
        font-weight:800;
        
        cursor:not-allowed;
        
        opacity:.45;
        
        transition:.4s;
        
        }
        
        #submitApplication.ready{
        
        opacity:1;
        
        cursor:pointer;
        
        box-shadow:0 0 35px rgba(212,175,55,.55);
        
        animation:goldPulse 2s infinite;
        
        }
        
        @keyframes goldPulse{
        
        0%{
        
        transform:scale(1);
        
        }
        
        50%{
        
        transform:scale(1.04);
        
        }
        
        100%{
        
        transform:scale(1);
        
        }
        
        }
        .submitLoader{

            display:none;
            
            text-align:center;
            
            padding:80px 20px;
            
            animation:fadeIn .4s;
            
            }
            
            .submitLoader.show{
            
            display:block;
            
            }
            
            .loaderCircle{
            
            width:90px;
            
            height:90px;
            
            margin:auto;
            
            border-radius:50%;
            
            border:8px solid #E6ECF6;
            
            border-top:8px solid #D4AF37;
            
            animation:spinLoader 1s linear infinite;
            
            margin-bottom:35px;
            
            }
            
            @keyframes spinLoader{
            
            to{
            
            transform:rotate(360deg);
            
            }
            
            }
            
            .successScreen{
            
            display:none;
            
            text-align:center;
            
            padding:90px 30px;
            
            animation:fadeIn .5s;
            
            }
            
            .successScreen.show{
            
            display:block;
            
            }
            
            .successIcon{
            
            font-size:110px;
            
            color:#2ECC71;
            
            margin-bottom:35px;
            
            animation:popSuccess .6s;
            
            }
            
            @keyframes popSuccess{
            
            0%{
            
            transform:scale(.3);
            
            opacity:0;
            
            }
            
            100%{
            
            transform:scale(1);
            
            opacity:1;
            
            }
            
            }
            
            .receiptCard{
            
            max-width:420px;
            
            margin:40px auto;
            
            padding:25px;
            
            background:#EEF5FF;
            
            border-radius:25px;
            
            }
            
            .receiptCard small{
            
            display:block;
            
            margin-bottom:10px;
            
            color:#666;
            
            }
            
            .receiptCard strong{
            
            font-size:1.4rem;
            
            color:#0B2E63;
            
            letter-spacing:2px;
            
            }
            
            .successButtons{
            
            margin-top:50px;
            
            display:flex;
            
            justify-content:center;
            
            gap:25px;
            
            flex-wrap:wrap;
            
            }
            
            .successButtons button{
            
            padding:18px 32px;
            
            border:none;
            
            border-radius:50px;
            
            cursor:pointer;
            
            font-weight:700;
            
            background:#0B2E63;
            
            color:white;
            
            transition:.3s;
            
            }
            
            .successButtons button:hover{
            
            transform:translateY(-4px);
            
            background:#D4AF37;
            
            color:#0B2E63;
            
            }
            
            @keyframes fadeIn{
            
            from{
            
            opacity:0;
            
            transform:translateY(25px);
            
            }
            
            to{
            
            opacity:1;
            
            transform:none;
            
            }
            
            }
            .paymentMethods{

                margin-top:20px;
            
                padding:20px;
            
                background:#F8FAFD;
            
                border:1px solid #E4EAF4;
            
                border-radius:18px;
            
            }
            
            .paymentTitle{
            
                margin:0 0 15px;
            
                font-weight:700;
            
                color:#0B2E63;
            
            }
            
            .paymentOptions{
            
                display:flex;
            
                flex-direction:column;
            
                gap:15px;
            
            }
            
            .paymentOption{
            
                display:flex;
            
                align-items:center;
            
                gap:15px;
            
                padding:12px 15px;
            
                background:#fff;
            
                border-radius:14px;
            
                box-shadow:0 5px 15px rgba(0,0,0,.05);
            
            }
            
            .paymentOption img{
            
                width:48px;
            
                height:48px;
            
                object-fit:contain;
            
            }
            
            .paymentOption strong{
            
                display:block;
            
                color:#0B2E63;
            
                font-size:1rem;
            
            }
            
            .paymentOption span{
            
                color:#555;
            
                font-weight:600;
            
                letter-spacing:.5px;
            
            }