/*=====================================================
        JOBS PAGE - PART 1
        PREMIUM HERO SECTION
======================================================*/

/*==============================
        MAIN
===============================*/

main{
    margin-top:10px;
    overflow:hidden;
}


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

.hero{

    position:relative;

    overflow:hidden;

    padding:30px 0 25px;

    background:
        radial-gradient(circle at top left,#d9e7ff 0%,transparent 35%),
        radial-gradient(circle at bottom right,#e8dcff 0%,transparent 32%),
        linear-gradient(135deg,#f8fbff 0%,#eef5ff 40%,#ffffff 100%);

}


/*==============================
        ANIMATED BACKGROUND
===============================*/

.hero::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    left:-220px;

    top:-250px;

    border-radius:50%;

    background:radial-gradient(circle,
                rgba(37,99,235,.18),
                transparent 72%);

    animation:floatOne 14s ease-in-out infinite;

}

.hero::after{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(circle,
                rgba(124,58,237,.14),
                transparent 72%);

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

}


/*==============================
        FLOATING GLOW CIRCLES
===============================*/

.hero-grid::before{

    content:"";

    position:absolute;

    width:18px;

    height:18px;

    background:#4f7eff;

    border-radius:50%;

    left:45%;

    top:8%;

    box-shadow:

        120px 70px 0 rgba(37,99,235,.22),

        -180px 210px 0 rgba(124,58,237,.18),

        240px 260px 0 rgba(0,180,255,.22);

    animation:glowDots 8s linear infinite;

}


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

.hero-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:70px;

    align-items:center;

}


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

.hero-copy{

    max-width:720px;

}


/*==============================
        EYEBROW
===============================*/

.eyebrow{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:11px 24px;

    border-radius:40px;

    background:linear-gradient(135deg,#2563eb,#4f46e5);

    color:#ffffff;

    font-size:.82rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

    box-shadow:

        0 15px 35px rgba(37,99,235,.25);

}

.eyebrow::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:#ffffff;

}


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

.hero h1{

    margin:28px 0 25px;

    font-size:clamp(2.8rem,5vw,4.8rem);

    line-height:1.08;

    font-weight:800;

    color:#17325c;

    letter-spacing:-1px;

}


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

.hero p{

    max-width:650px;

    font-size:1.12rem;

    line-height:2;

    color:#60738d;

}


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

.hero-card{

    display:flex;

    justify-content:center;

    align-items:center;

}


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

.card{

    position:relative;

    overflow:hidden;

    width:100%;

    max-width:400px;

    padding:40px;

    border-radius:30px;

    background:

        rgba(255,255,255,.55);

    backdrop-filter:blur(25px);

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

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

    box-shadow:

        0 30px 60px rgba(37,99,235,.12);

    transition:.45s;

}

.card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(135deg,

        rgba(255,255,255,.28),

        transparent 55%);

    pointer-events:none;

}


/*==============================
        TAG
===============================*/

.tag{

    display:inline-flex;

    align-items:center;

    padding:9px 18px;

    border-radius:30px;

    background:

        linear-gradient(135deg,#2f54eb,#6a5cff);

    color:#ffffff;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.8px;

    margin-bottom:18px;

}


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

.card h2{

    margin-bottom:18px;

    font-size:2rem;

    color:#17325c;

    font-weight:700;

}

.card p{

    color:#60738d;

    line-height:1.9;

    font-size:1rem;

}


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

.card:hover{

    transform:translateY(-10px);

    box-shadow:

        0 40px 80px rgba(37,99,235,.18);

}


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

@keyframes floatOne{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(35px);

    }

}

@keyframes floatTwo{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-30px);

    }

}

@keyframes glowDots{

    0%{

        transform:translateY(0);

        opacity:.5;

    }

    50%{

        transform:translateY(-20px);

        opacity:1;

    }

    100%{

        transform:translateY(0);

        opacity:.5;

    }

}


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

@media(max-width:1100px){

    .hero{

        padding:100px 0 80px;

    }

    .hero-grid{

        gap:45px;

    }

}


@media(max-width:900px){

    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-copy{

        margin:auto;

    }

    .hero p{

        margin:auto;

    }

    .hero-card{

        justify-content:center;

    }

}


@media(max-width:768px){

    .hero{

        padding:80px 0 70px;

    }

    .hero h1{

        font-size:2.5rem;

    }

    .card{

        padding:32px;

    }

}


@media(max-width:576px){

    .hero{

        padding:70px 0 60px;

    }

    .hero h1{

        font-size:2rem;

    }

    .hero p{

        font-size:1rem;

    }

    .card{

        padding:28px;

        border-radius:24px;

    }

    .eyebrow{

        font-size:.72rem;

        padding:10px 18px;

    }

}


  /*=====================================================
        JOBS PAGE - PART 2
        ADVANCED JOB SEARCH FILTER
======================================================*/


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

.filter-bar{

    position:relative;

    margin-top:45px;

    padding:35px;

    border-radius:30px;

    overflow:hidden;

    background:

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

    backdrop-filter:blur(22px);

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

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

    box-shadow:

        0 25px 60px rgba(20,45,90,.12);

}


/* Decorative Background */

.filter-bar::before{

    content:"";

    position:absolute;

    top:-120px;

    right:-120px;

    width:250px;

    height:250px;

    border-radius:50%;

    background:

        radial-gradient(circle,

        rgba(37,99,235,.12),

        transparent 72%);

}

.filter-bar::after{

    content:"";

    position:absolute;

    bottom:-130px;

    left:-130px;

    width:260px;

    height:260px;

    border-radius:50%;

    background:

        radial-gradient(circle,

        rgba(124,58,237,.10),

        transparent 72%);

}


/*==========================================
        FORM
==========================================*/

#jobFilterForm{

    position:relative;

    z-index:2;

}


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

.filter-grid{

    display:grid;

    grid-template-columns:

        2fr

        1.6fr

        1.5fr

        auto;

    gap:22px;

    align-items:end;

}


/*==========================================
        FIELD
==========================================*/

.field{

    display:flex;

    flex-direction:column;

    gap:10px;

}


/*==========================================
        LABELS
==========================================*/

.field label{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#52637c;

}

.field label::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:#2f54eb;

}


/*==========================================
        INPUTS
==========================================*/

.field input,

.field select{

    width:100%;

    height:58px;

    padding:0 20px;

    border-radius:18px;

    border:1px solid rgba(47,84,235,.12);

    background:

        rgba(255,255,255,.78);

    backdrop-filter:blur(10px);

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

    color:#17325c;

    font-size:15px;

    font-family:inherit;

    transition:

        all .35s ease;

    outline:none;

}


/* Placeholder */

.field input::placeholder{

    color:#9aa8ba;

}


/*==========================================
        DROPDOWN
==========================================*/

.field select{

    appearance:none;

    -webkit-appearance:none;

    cursor:pointer;

    padding-right:55px;

    background-image:

    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%232563eb' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5L8 12l6.5-6.5' stroke='%232563eb' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 18px center;

    background-size:18px;

}


/*==========================================
        INPUT FOCUS
==========================================*/

.field input:focus,

.field select:focus{

    background:#ffffff;

    border-color:#2f54eb;

    transform:translateY(-2px);

    box-shadow:

        0 0 0 5px rgba(47,84,235,.10),

        0 15px 35px rgba(37,99,235,.10);

}


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

.filter-grid .btn{

    height:58px;

    padding:0 34px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    font-size:.95rem;

    font-weight:700;

    letter-spacing:.4px;

    white-space:nowrap;

    color:#ffffff;

    background:

        linear-gradient(

            135deg,

            #2563eb,

            #4f46e5,

            #7c3aed

        );

    background-size:220%;

    box-shadow:

        0 18px 35px rgba(37,99,235,.28);

    transition:

        all .35s ease;

}


/* Button Shine */

.filter-grid .btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            120deg,

            transparent,

            rgba(255,255,255,.35),

            transparent

        );

    transform:translateX(-120%);

    transition:.8s;

}


/* Hover */

.filter-grid .btn:hover{

    transform:

        translateY(-4px);

    background-position:right;

    box-shadow:

        0 25px 40px rgba(37,99,235,.32);

}

.filter-grid .btn:hover::before{

    transform:translateX(120%);

}


/* Click */

.filter-grid .btn:active{

    transform:scale(.98);

}


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

.filter-bar{

    animation:filterFade .8s ease;

}

@keyframes filterFade{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==========================================
        TABLET
==========================================*/

@media(max-width:992px){

    .filter-grid{

        grid-template-columns:

            repeat(2,1fr);

    }

    .filter-grid .btn{

        width:100%;

    }

}


/*==========================================
        MOBILE
==========================================*/

@media(max-width:768px){

    .filter-bar{

        padding:28px;

    }

    .filter-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .field input,

    .field select,

    .filter-grid .btn{

        width:100%;

    }

}


/*==========================================
        SMALL MOBILE
==========================================*/

@media(max-width:480px){

    .filter-bar{

        padding:22px;

        border-radius:22px;

    }

    .field input,

    .field select{

        height:54px;

        font-size:14px;

    }

    .filter-grid .btn{

        height:54px;

        font-size:.92rem;

    }

}

/*=====================================================
        JOBS PAGE - PART 3
        OPEN POSITIONS SECTION
        Beautiful Section Heading
        Decorative Background
        Improved Spacing
        Responsive Jobs Grid
======================================================*/


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

.section{

    position:relative;

    padding:30px 0;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbff 100%
        );

}


/*==========================================
        DECORATIVE BACKGROUND
==========================================*/

.section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(37,99,235,.08),
            transparent 72%
        );

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

}

.section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(124,58,237,.08),
            transparent 72%
        );

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

}


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

.section .container{

    position:relative;

    z-index:2;

}


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

.section-heading{

    max-width:820px;

    margin:0 auto 70px;

    text-align:center;

}


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

.section-heading .eyebrow{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 28px;

    border-radius:40px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    color:#ffffff;

    font-size:.82rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

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

}

.section-heading .eyebrow::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:#ffffff;

}


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

.section-heading h2{

    margin:28px 0 20px;

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

    line-height:1.15;

    font-weight:800;

    color:#17325c;

    letter-spacing:-1px;

}

.section-heading h2::after{

    content:"";

    display:block;

    width:90px;

    height:5px;

    margin:25px auto 0;

    border-radius:30px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #4f46e5,
            #7c3aed
        );

}


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

.section-heading p{

    max-width:720px;

    margin:auto;

    font-size:1.08rem;

    line-height:2;

    color:#60738d;

}


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

.jobs-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:40px;

    align-items:start;

}


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

.job-list{

    display:flex;

    flex-direction:column;

    gap:28px;

}


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

.job-title{

    font-size:1.25rem;

    font-weight:700;

    color:#17325c;

    line-height:1.4;

}

.job-meta{

    display:flex;

    flex-wrap:wrap;

    gap:10px 20px;

    margin-top:10px;

    font-size:.92rem;

    color:#60738d;

}

.job-meta span{

    display:flex;

    align-items:center;

    gap:6px;

}


/*==========================================
        FLOATING SHAPES
==========================================*/

.section-heading::before{

    content:"";

    position:absolute;

    width:18px;

    height:18px;

    left:20%;

    top:-15px;

    border-radius:50%;

    background:#2563eb;

    opacity:.20;

    box-shadow:

        160px 40px 0 rgba(37,99,235,.15),

        340px 90px 0 rgba(124,58,237,.20),

        -120px 100px 0 rgba(0,180,255,.18);

    animation:dotFloat 10s linear infinite;

}

.section-heading{

    position:relative;

}


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

.section-heading{

    animation:headingFade .9s ease both;

}

@keyframes headingFade{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

@keyframes sectionFloatLeft{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-35px);

    }

}

@keyframes sectionFloatRight{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(30px);

    }

}

@keyframes dotFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}


/*==========================================
        TABLET
==========================================*/

@media(max-width:992px){

    .section{

        padding:90px 0;

    }

    .jobs-grid{

        grid-template-columns:1fr;

        gap:35px;

    }

}


/*==========================================
        MOBILE
==========================================*/

@media(max-width:768px){

    .section{

        padding:75px 0;

    }

    .section-heading{

        margin-bottom:50px;

    }

    .section-heading h2{

        font-size:2.4rem;

    }

    .section-heading p{

        font-size:1rem;

    }

    .job-title{

        font-size:1.15rem;

    }

}


/*==========================================
        SMALL MOBILE
==========================================*/

@media(max-width:480px){

    .section{

        padding:65px 0;

    }

    .section-heading{

        margin-bottom:40px;

    }

    .section-heading .eyebrow{

        padding:10px 22px;

        font-size:.72rem;

    }

    .section-heading h2{

        font-size:2rem;

    }

    .section-heading p{

        font-size:.95rem;

        line-height:1.8;

    }

    .job-meta{

        flex-direction:column;

        gap:8px;

        align-items:flex-start;

    }

}

/*=====================================================
        JOBS PAGE - PART 4
        PREMIUM JOB CARDS
        Modern Glassmorphism Design
======================================================*/


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

.job-card{

    position:relative;

    overflow:hidden;

    padding:35px;

    border-radius:28px;

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

    backdrop-filter:blur(18px);

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

    box-shadow:
        0 18px 45px rgba(15,23,42,.08),
        0 8px 20px rgba(37,99,235,.05);

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .35s ease;

}


/*=========================================
        GRADIENT TOP BORDER
=========================================*/

.job-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:6px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #4f46e5,
            #7c3aed,
            #06b6d4
        );

}


/*=========================================
        BACKGROUND GLOW
=========================================*/

.job-card::after{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    right:-140px;
    top:-140px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(37,99,235,.18),
        transparent 72%);

    opacity:0;

    transition:.45s;

}


.job-card:hover::after{

    opacity:1;

}


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

.job-card:hover{

    transform:
        translateY(-10px);

    border-color:#2563eb;

    box-shadow:
        0 30px 70px rgba(37,99,235,.16),
        0 10px 30px rgba(15,23,42,.10);

}


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

.job-card-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    margin-bottom:18px;

}


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

.job-title{

    font-size:1.45rem;

    font-weight:800;

    color:#17325c;

    line-height:1.35;

    transition:.3s;

}


.job-card:hover .job-title{

    color:#2563eb;

}


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

.job-card p{

    margin:22px 0;

    color:#5f7088;

    line-height:1.9;

    font-size:1rem;

}


/*=========================================
        JOB META
=========================================*/

.job-meta{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:16px;

}


/*=========================================
        META ITEMS
=========================================*/

.job-meta span{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:50px;

    background:#f3f8ff;

    color:#406080;

    font-size:.90rem;

    font-weight:600;

    border:1px solid rgba(37,99,235,.08);

    transition:.3s;

}


.job-meta span:hover{

    background:#2563eb;

    color:#fff;

    transform:translateY(-3px);

}


/*=========================================
        ICONS
=========================================*/

.job-meta span:nth-child(1)::before{

    content:"📍";

}

.job-meta span:nth-child(2)::before{

    content:"💼";

}

.job-meta span:nth-child(3)::before{

    content:"⭐";

}


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

.badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:50px;

    background:
        linear-gradient(
            135deg,
            #f59e0b,
            #f97316
        );

    color:#fff;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    box-shadow:
        0 12px 30px rgba(245,158,11,.35);

}


.badge::before{

    content:"★";

    font-size:.8rem;

}


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

.job-actions{

    display:flex;

    justify-content:flex-start;

    gap:16px;

    margin-top:30px;

    flex-wrap:wrap;

}


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

.job-actions .btn{

    min-width:170px;

    height:54px;

    border-radius:14px;

    font-weight:700;

    font-size:.95rem;

    transition:.35s;

}


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

.job-actions .btn-primary{

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    color:#fff;

    box-shadow:
        0 15px 30px rgba(37,99,235,.25);

}


.job-actions .btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:
        0 22px 45px rgba(37,99,235,.35);

}


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

.job-actions .btn-secondary{

    background:#fff;

    border:2px solid #dbe7ff;

    color:#1746a2;

}


.job-actions .btn-secondary:hover{

    background:#2563eb;

    border-color:#2563eb;

    color:#fff;

}


/*=========================================
        CARD ENTRY ANIMATION
=========================================*/

.job-card{

    animation:jobCardFade .8s ease both;

}

.job-card:nth-child(2){

    animation-delay:.15s;

}

.job-card:nth-child(3){

    animation-delay:.3s;

}


@keyframes jobCardFade{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*=========================================
        TABLET
=========================================*/

@media(max-width:992px){

    .job-card{

        padding:30px;

    }

}


/*=========================================
        MOBILE
=========================================*/

@media(max-width:768px){

    .job-card{

        padding:25px;

    }

    .job-card-header{

        flex-direction:column;

    }

    .job-title{

        font-size:1.25rem;

    }

    .job-actions{

        flex-direction:column;

    }

    .job-actions .btn{

        width:100%;

    }

}


/*=========================================
        SMALL MOBILE
=========================================*/

@media(max-width:480px){

    .job-card{

        padding:22px;

        border-radius:22px;

    }

    .job-meta{

        gap:10px;

    }

    .job-meta span{

        width:100%;

        justify-content:flex-start;

    }

    .badge{

        align-self:flex-start;

    }

}

/*=====================================================
        JOBS PAGE - PART 5
        PREMIUM CANDIDATE SIDEBAR
        Glassmorphism Design
======================================================*/


/*=========================================
        SIDEBAR
=========================================*/

.jobs-sidebar{

    position:sticky;

    top:120px;

    overflow:hidden;

    padding:35px 32px;

    border-radius:30px;

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

    backdrop-filter:blur(18px);

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

    box-shadow:
        0 25px 70px rgba(15,23,42,.10),
        0 8px 25px rgba(37,99,235,.08);

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

}


/*=========================================
        TOP GRADIENT BAR
=========================================*/

.jobs-sidebar::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:7px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #4f46e5,
            #7c3aed,
            #06b6d4
        );

}


/*=========================================
        BACKGROUND GLOW
=========================================*/

.jobs-sidebar::after{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    right:-180px;
    top:-180px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(37,99,235,.18),
            transparent 72%
        );

    pointer-events:none;

}


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

.jobs-sidebar:hover{

    transform:translateY(-10px);

    box-shadow:
        0 35px 80px rgba(37,99,235,.16),
        0 15px 35px rgba(15,23,42,.12);

}


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

.jobs-sidebar h3{

    position:relative;

    margin:0 0 25px;

    font-size:1.55rem;

    font-weight:800;

    line-height:1.3;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5,
            #7c3aed
        );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    background-clip:text;

}


.jobs-sidebar h3::after{

    content:"";

    display:block;

    width:70px;

    height:4px;

    margin-top:14px;

    border-radius:30px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #7c3aed
        );

}


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

.jobs-sidebar ul{

    margin:30px 0 0;

    padding:0;

    list-style:none;

}


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

.jobs-sidebar li{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:15px;

    padding:18px 18px 18px 58px;

    margin-bottom:16px;

    border-radius:18px;

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

    border:1px solid rgba(37,99,235,.08);

    color:#54677f;

    line-height:1.7;

    transition:
        all .35s ease;

}


/*=========================================
        ICONS
=========================================*/

.jobs-sidebar li::before{

    content:"✓";

    position:absolute;

    left:18px;
    top:17px;

    width:28px;
    height:28px;

    border-radius:50%;

    display:flex;

    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    color:#fff;

    font-weight:700;

    font-size:.9rem;

    box-shadow:
        0 10px 20px rgba(37,99,235,.30);

}


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

.jobs-sidebar li:hover{

    transform:translateX(8px);

    background:#ffffff;

    color:#17325c;

    box-shadow:
        0 15px 35px rgba(37,99,235,.12);

}


/*=========================================
        DIFFERENT ICONS
=========================================*/

.jobs-sidebar li:nth-child(1)::before{

    content:"📄";

}

.jobs-sidebar li:nth-child(2)::before{

    content:"📞";

}

.jobs-sidebar li:nth-child(3)::before{

    content:"🔒";

}

.jobs-sidebar li:nth-child(4)::before{

    content:"🎯";

}


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

.jobs-sidebar{

    isolation:isolate;

}

.jobs-sidebar .floating-circle{

    display:none;

}

.jobs-sidebar:hover::after{

    animation:sidebarGlow 6s linear infinite;

}


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

.jobs-sidebar{

    animation:sidebarFade .9s ease both;

}


@keyframes sidebarFade{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


@keyframes sidebarGlow{

    0%{

        transform:rotate(0deg);

    }

    100%{

        transform:rotate(360deg);

    }

}


/*=========================================
        TABLET
=========================================*/

@media(max-width:992px){

    .jobs-sidebar{

        position:relative;

        top:0;

        margin-top:10px;

    }

}


/*=========================================
        MOBILE
=========================================*/

@media(max-width:768px){

    .jobs-sidebar{

        padding:28px;

        border-radius:24px;

    }

    .jobs-sidebar h3{

        font-size:1.35rem;

    }

    .jobs-sidebar li{

        padding:16px 16px 16px 54px;

        font-size:.95rem;

    }

}


/*=========================================
        SMALL MOBILE
=========================================*/

@media(max-width:480px){

    .jobs-sidebar{

        padding:24px 20px;

    }

    .jobs-sidebar h3{

        font-size:1.2rem;

    }

    .jobs-sidebar li{

        padding:14px 14px 14px 50px;

        font-size:.90rem;

        margin-bottom:14px;

    }

    .jobs-sidebar li::before{

        width:24px;

        height:24px;

        left:15px;

        top:15px;

        font-size:.75rem;

    }

}

/*=====================================================
        JOBS PAGE - PART 6
        FINAL POLISH
        Responsive Layout
        Mobile Optimisation
        Scrollbar
        Animations
        Accessibility
        Print Styles
======================================================*/


/*=====================================================
        GLOBAL SMOOTH SCROLLING
======================================================*/

html{
    scroll-behavior:smooth;
}

body{
    overflow-x:hidden;
}


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

::-webkit-scrollbar{
    width:12px;
}

::-webkit-scrollbar-track{
    background:#edf4ff;
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(
        180deg,
        #2563eb,
        #4f46e5,
        #7c3aed
    );
    border-radius:30px;
    border:2px solid #edf4ff;
}

::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(
        180deg,
        #1746a2,
        #4338ca,
        #6d28d9
    );
}


/* Firefox */

*{
    scrollbar-width:thin;
    scrollbar-color:#2563eb #edf4ff;
}


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

*,
*::before,
*::after{

    transition:
        background-color .30s ease,
        color .30s ease,
        border-color .30s ease,
        box-shadow .35s ease,
        transform .35s ease;

}


/*=====================================================
        FADE-IN ANIMATION
======================================================*/

.hero,
.section,
.job-card,
.jobs-sidebar,
.filter-bar{

    animation:fadeUp .9s ease both;

}

.job-card:nth-child(2){

    animation-delay:.15s;

}

.job-card:nth-child(3){

    animation-delay:.3s;

}


@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

.hero-card{

    animation:floatingCard 6s ease-in-out infinite;

}

@keyframes floatingCard{

    0%,
    100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}


/*=====================================================
        BUTTON RIPPLE EFFECT
======================================================*/

.btn{

    position:relative;

    overflow:hidden;

}

.btn::after{

    content:"";

    position:absolute;

    width:0;

    height:0;

    border-radius:50%;

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

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    transition:.6s;

}

.btn:hover::after{

    width:320px;

    height:320px;

}


/*=====================================================
        INPUT PLACEHOLDER
======================================================*/

::placeholder{

    color:#94a3b8;

    opacity:1;

}


/*=====================================================
        ACCESSIBILITY
======================================================*/

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible{

    outline:3px solid #2563eb;

    outline-offset:4px;

    border-radius:8px;

}


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

::selection{

    background:#2563eb;

    color:#ffffff;

}


/*=====================================================
        IMAGE IMPROVEMENTS
======================================================*/

img{

    max-width:100%;

    display:block;

    height:auto;

}


/*=====================================================
        REDUCE MOTION
======================================================*/

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/*=====================================================
        LARGE DESKTOP
======================================================*/

@media(min-width:1600px){

    .container{

        max-width:1450px;

    }

}


/*=====================================================
        LAPTOP
======================================================*/

@media(max-width:1200px){

    .container{

        padding-inline:30px;

    }

}


/*=====================================================
        TABLET
======================================================*/

@media(max-width:992px){

    .hero{

        padding:45px 0 35px;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .jobs-grid{

        grid-template-columns:1fr;

    }

    .hero-card{

        justify-content:center;

    }

    .filter-grid{

        grid-template-columns:1fr 1fr;

    }

}


/*=====================================================
        MOBILE
======================================================*/

@media(max-width:768px){

    .container{

        padding-inline:22px;

    }

    .hero{

        padding:35px 0 25px;

    }

    .hero h1{

        font-size:2.4rem;

    }

    .hero p{

        font-size:1rem;

    }

    .filter-grid{

        grid-template-columns:1fr;

    }

    .job-actions{

        flex-direction:column;

    }

    .job-actions .btn{

        width:100%;

    }
	
	 .header-contact{

        Display:none;

    }

}


/*=====================================================
        SMALL MOBILE
======================================================*/

@media(max-width:576px){

    .container{

        padding-inline:18px;

    }

    .hero{

        padding:30px 0 20px;

    }

    .hero h1{

        font-size:2rem;

    }

    .eyebrow{

        font-size:.72rem;

        padding:8px 16px;

    }

    .card,
    .filter-bar,
    .job-card,
    .jobs-sidebar{

        border-radius:20px;

    }

    .job-title{

        font-size:1.15rem;

    }
 .header-contact{

        Display:none;

    }
}


/*=====================================================
        EXTRA SMALL DEVICES
======================================================*/

@media(max-width:360px){

    .hero h1{

        font-size:1.75rem;

    }

    .btn{

        width:100%;

    }

}


/*=====================================================
        PRINT STYLES
======================================================*/

@media print{

    *{

        box-shadow:none !important;

        text-shadow:none !important;

        animation:none !important;

        background:#ffffff !important;

        color:#000000 !important;

    }

    body{

        background:#ffffff;

    }

    .hero{

        padding:20px 0;

    }

    .filter-bar,
    .btn,
    .jobs-sidebar{

        display:none !important;

    }

    .jobs-grid{

        display:block;

    }

    .job-card{

        page-break-inside:avoid;

        border:1px solid #999;

        margin-bottom:20px;

    }

    a::after{

        content:" (" attr(href) ")";

        font-size:10px;

    }

}


/*=====================================================
        FINAL PROFESSIONAL POLISH
======================================================*/

.hero,
.section{

    position:relative;

    isolation:isolate;

}

.card,
.job-card,
.jobs-sidebar,
.filter-bar{

    will-change:transform;

}

.job-card:hover,
.jobs-sidebar:hover,
.card:hover{

    z-index:10;

}

a{

    text-decoration:none;

}

button{

    cursor:pointer;

}

input,
select,
textarea,
button{

    font-family:inherit;

}

hr{

    border:none;

    border-top:1px solid rgba(0,0,0,.08);

    margin:30px 0;

}


  
  
  



    .popup-overlay{
      position:fixed;
      inset:0;
      background:rgba(16,32,51,.62);
      backdrop-filter:blur(6px);
      z-index:999;
    }
    .popup-modal{
      position:fixed;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      width:min(92%,640px);
      max-height:90vh;
      overflow:auto;
      background:#fff;
      border-radius:28px;
      padding:1.5rem;
      box-shadow:0 30px 80px rgba(0,0,0,.28);
      z-index:1000;
      border:1px solid rgba(16,32,51,.08);
    }
    .popup-header{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:1rem;
    }
    .popup-badge{
      display:inline-block;
      padding:.35rem .7rem;
      border-radius:999px;
      background:#edf4ff;
      color:#1746a2;
      font-size:.8rem;
      font-weight:700;
      margin-bottom:.7rem;
    }
    .popup-header h2{
      margin:0 0 .4rem;
      font-size:1.7rem;
    }
    .popup-header p{
      margin:0;
      color:#60738d;
    }
    .popup-close{
      width:42px;
      height:42px;
      border:0;
      border-radius:12px;
      background:#f1f5fb;
      color:#102033;
      font-size:1.8rem;
      line-height:1;
      cursor:pointer;
    }
    .popup-form{margin-top:1rem}
    .form-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:1rem;
    }
    .field-full{grid-column:1 / -1}
    .field textarea{
      resize:vertical;
    }
    .popup-submit{margin-top:1.2rem;width:100%}
    body.modal-open{overflow:hidden}

    @media (max-width: 1024px){
      .hero-grid,.jobs-grid,.footer-grid{grid-template-columns:1fr 1fr}
      .filter-grid{
        grid-template-columns:1fr 1fr;
        row-gap:1rem;
      }
      .header-contact{margin-left:0}
      .main-nav{justify-content:flex-start}
    }
    @media (max-width: 900px){
      .hero-grid,.jobs-grid,.footer-grid{grid-template-columns:1fr}
      .main-nav{
        width:100%;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:.65rem;
        padding:1rem 0 .25rem;
      }
      .main-nav.show{display:flex}
      .nav-item{
        width:100%;
        min-width:unset;
        justify-content:flex-start;
      }
      .menu-toggle{display:inline-flex}
      .header-contact{
        width:100%;
        justify-content:space-between;
      }
      .filter-grid{
        grid-template-columns:1fr;
      }
    }
    @media (max-width: 700px){
      .form-grid{grid-template-columns:1fr}
    }
    @media (max-width: 640px){
      .brand-tagline{display:none}
      .phone-link{font-size:.95rem}
      .apply-btn{padding:.75rem 1rem}
      .header-contact{gap:.75rem}
    }
	
	.go-top-btn{
  position:fixed;
  right:1.4rem;
  bottom:1.4rem;
  width:32px;
  height:32px;
  border-radius:50%;
  border:0;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  color:#fff;
  font-size:1.2rem;
  font-weight:700;
  box-shadow:0 12px 30px rgba(37,99,235,.35);
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:800;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.go-top-btn.show{
  display:flex;
  opacity:1;
}
.go-top-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(37,99,235,.45);
}




/*=========================================
        JOB BANNER POPUP
=========================================*/

/* Background Overlay */

.job-banner{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    display:none;

    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.70);

    backdrop-filter:blur(6px);

    z-index:999999;

    padding:20px;

    box-sizing:border-box;

}

/* Show Popup */

.job-banner.show{

    display:flex;

}

/*=========================================
        POPUP BOX
=========================================*/

.job-banner-content{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    background:#ffffff;

    border-radius:18px;

    overflow:hidden;

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

    animation:popupZoom .35s ease;

    width:auto;

    max-width:700px;

}

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

.job-banner-image{

    display:block;

    width:100%;

    height:auto;

    max-width:700px;

    max-height:75vh;

    object-fit:contain;

}

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

.job-banner-buttons{

    width:100%;

    display:flex;

    justify-content:center;

    gap:18px;

    padding:10px;

    background:#ffffff;

    box-sizing:border-box;

}

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

.banner-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:#ffffff;

    padding:5px 15px;

    border-radius:30px;

    font-size:12px;

    font-weight:500;

    transition:.30s;

}

.brochure-btn{

    background:#1565c0;

}

.apply-btn{

    background:#16a34a;

}

.banner-btn:hover{

    transform:translateY(-3px);

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

}

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

.job-banner-close{

    position:absolute;

    top:12px;

    right:12px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#ffffff;

    color:#1565c0;

    font-size:30px;

    font-weight:bold;

    cursor:pointer;

    box-shadow:0 6px 15px rgba(0,0,0,.20);

    transition:.30s;

    z-index:10;

}

.job-banner-close:hover{

    background:#1565c0;

    color:#ffffff;

    transform:rotate(180deg);

}

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

@keyframes popupZoom{

    0%{

        transform:scale(.70);

        opacity:0;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

/*=========================================
        TABLET
=========================================*/

@media(max-width:768px){

    .job-banner-content{

        max-width:95vw;

    }

    .job-banner-image{

        max-width:95vw;

        max-height:70vh;

    }

}

/*=========================================
        MOBILE
=========================================*/

@media(max-width:600px){

    .job-banner-buttons{

        flex-direction:column;

    }

    .banner-btn{

        width:100%;

        justify-content:center;

    }

    .job-banner-image{

        max-height:60vh;

    }

}








/* =========================================================
   VBlink HR CONSULTANTS
   A4 JOB ADVERTISEMENTS
   ---------------------------------------------------------
   Two A4 PNG Advertisements
   Responsive
   Lazy Loading
   Scroll Animation
   Fullscreen
   Download Buttons
========================================================= */


/* =========================================================
   1. MAIN ADVERTISEMENT SECTION
========================================================= */

.job-ad-section {

    position: relative;

    width: 100%;

    padding:
        85px
        20px
        100px;

    box-sizing: border-box;

    overflow: hidden;

    /*
       Premium soft background.
    */

    background:
        linear-gradient(
            135deg,
            #f5f8ff 0%,
            #ffffff 48%,
            #eef4ff 100%
        );

}


/* =========================================================
   2. DECORATIVE TOP GLOW
========================================================= */

.job-ad-section::before {

    content: "";

    position: absolute;

    top: -180px;

    left: 50%;

    width: 600px;

    height: 350px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                47,
                84,
                235,
                0.12
            ),
            transparent 70%
        );

    pointer-events: none;

}


/* =========================================================
   3. MAIN CONTAINER
========================================================= */

.job-ad-container {

    position: relative;

    z-index: 1;

    width: min(
        100%,
        1100px
    );

    margin:
        0
        auto;

    box-sizing: border-box;

}


/* =========================================================
   4. COMMON HEADING AREA
========================================================= */

.job-ad-heading {

    width: 100%;

    margin:
        0
        auto
        48px;

    text-align: center;

}


/* =========================================================
   5. COMPANY LABEL
========================================================= */

.job-ad-label {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 14px;

    padding:
        8px
        20px;

    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            #2f54eb,
            #5b8cff
        );

    color: #ffffff;

    font-size:
        0.78rem;

    font-weight: 700;

    letter-spacing:
        1.2px;

    line-height: 1.2;

    text-transform:
        uppercase;

    box-shadow:
        0 8px 22px
        rgba(
            47,
            84,
            235,
            0.18
        );

}


/* =========================================================
   6. MAIN HEADING
========================================================= */

.job-ad-heading h2 {

    margin:
        6px
        0
        14px;

    color:
        #172b4d;

    font-size:
        clamp(
            1.8rem,
            4vw,
            2.8rem
        );

    font-weight:
        800;

    line-height:
        1.2;

    letter-spacing:
        -0.5px;

}


/* =========================================================
   7. HEADING DESCRIPTION
========================================================= */

.job-ad-heading p {

    width:
        min(
            100%,
            720px
        );

    margin:
        0
        auto;

    color:
        #667085;

    font-size:
        1rem;

    font-weight:
        400;

    line-height:
        1.75;

}


/* =========================================================
   8. A4 ADVERTISEMENT WRAPPER
========================================================= */

.job-ad-image-wrapper {

    position: relative;

    width:
        min(
            100%,
            794px
        );

    /*
       A4 paper ratio:

       Width  = 210
       Height = 297

       This keeps the container
       proportional on every device.
    */

    aspect-ratio:
        210 / 297;

    margin:
        0
        auto;

    overflow:
        hidden;

    box-sizing:
        border-box;

    background:
        #ffffff;

    border:
        1px solid
        rgba(
            15,
            23,
            42,
            0.08
        );

    border-radius:
        18px;

    box-shadow:
        0 22px 55px
        rgba(
            15,
            35,
            70,
            0.16
        );

    /*
       Initial scroll animation state.
    */

    opacity:
        0;

    transform:
        translateY(55px)
        scale(0.975);

    transition:
        opacity
        0.8s
        ease,

        transform
        0.8s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


/* =========================================================
   9. SECOND ADVERTISEMENT
========================================================= */

#jobAdImageWrapper2 {

    /*
       Gives a little extra visual separation
       if the separator is removed or hidden.
    */

    margin-top:
        0;

}


/* =========================================================
   10. SCROLL VISIBLE STATE
========================================================= */

.job-ad-image-wrapper.ad-visible {

    opacity:
        1;

    transform:
        translateY(0)
        scale(1);

}


/* =========================================================
   11. A4 IMAGE
========================================================= */

.job-ad-image {

    display:
        block;

    width:
        100%;

    height:
        100%;

    /*
       Keep complete A4 advertisement visible.
    */

    object-fit:
        contain;

    object-position:
        center;

    background:
        #ffffff;

    /*
       Initially invisible while loading.
    */

    opacity:
        0;

    transition:
        opacity
        0.5s
        ease;

}


/* =========================================================
   12. IMAGE LOADED
========================================================= */

.job-ad-image.image-loaded {

    opacity:
        1;

}


/* =========================================================
   13. LOADING OVERLAY
========================================================= */

.job-ad-image-loading {

    position:
        absolute;

    inset:
        0;

    z-index:
        10;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        16px;

    padding:
        20px;

    box-sizing:
        border-box;

    background:
        rgba(
            255,
            255,
            255,
            0.97
        );

    color:
        #475467;

    font-size:
        0.95rem;

    font-weight:
        500;

    text-align:
        center;

    transition:
        opacity
        0.4s
        ease,

        visibility
        0.4s
        ease;

}


/* =========================================================
   14. HIDE LOADING
========================================================= */

.job-ad-image-loading.hidden {

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

}


/* =========================================================
   15. LOADING SPINNER
========================================================= */

.job-ad-spinner {

    width:
        44px;

    height:
        44px;

    box-sizing:
        border-box;

    border:
        4px
        solid
        rgba(
            47,
            84,
            235,
            0.15
        );

    border-top-color:
        #2f54eb;

    border-radius:
        50%;

    animation:
        jobAdSpin
        0.8s
        linear
        infinite;

}


/* =========================================================
   16. SPINNER ANIMATION
========================================================= */

@keyframes jobAdSpin {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   17. A4 SEPARATOR
========================================================= */

.job-ad-separator {

    position:
        relative;

    width:
        min(
            100%,
            794px
        );

    height:
        55px;

    margin:
        0
        auto;

}


/* =========================================================
   18. SEPARATOR LINE
========================================================= */

.job-ad-separator::before {

    content:
        "";

    position:
        absolute;

    left:
        15%;

    right:
        15%;

    top:
        50%;

    height:
        1px;

    transform:
        translateY(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                47,
                84,
                235,
                0.25
            ),
            transparent
        );

}


/* =========================================================
   19. SEPARATOR CENTER DOT
========================================================= */

.job-ad-separator::after {

    content:
        "✦";

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            47,
            84,
            235,
            0.18
        );

    border-radius:
        50%;

    background:
        #ffffff;

    color:
        #2f54eb;

    font-size:
        0.8rem;

    box-shadow:
        0 5px 15px
        rgba(
            47,
            84,
            235,
            0.08
        );

}


/* =========================================================
   20. ACTION BUTTON CONTAINER
========================================================= */

.job-ad-actions {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        15px;

    width:
        100%;

    margin:
        38px
        auto
        0;

}


/* =========================================================
   21. COMMON ACTION BUTTON
========================================================= */

.job-ad-action-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    min-height:
        50px;

    padding:
        12px
        23px;

    box-sizing:
        border-box;

    border:
        1px solid
        transparent;

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #2f54eb,
            #5b8cff
        );

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        0.94rem;

    font-weight:
        700;

    line-height:
        1.2;

    text-decoration:
        none;

    cursor:
        pointer;

    box-shadow:
        0 9px 22px
        rgba(
            47,
            84,
            235,
            0.20
        );

    transition:
        transform
        0.25s
        ease,

        box-shadow
        0.25s
        ease,

        background
        0.25s
        ease;

}


/* =========================================================
   22. BUTTON HOVER
========================================================= */

.job-ad-action-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 14px 30px
        rgba(
            47,
            84,
            235,
            0.27
        );

}


/* =========================================================
   23. BUTTON ACTIVE
========================================================= */

.job-ad-action-button:active {

    transform:
        translateY(-1px);

}


/* =========================================================
   24. BUTTON ICON
========================================================= */

.job-ad-action-button span {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        1.15rem;

    line-height:
        1;

}


/* =========================================================
   25. SECONDARY / DOWNLOAD BUTTON
========================================================= */

.job-ad-action-button.secondary {

    background:
        #ffffff;

    color:
        #2f54eb;

    border-color:
        rgba(
            47,
            84,
            235,
            0.25
        );

}


/* =========================================================
   26. SECONDARY HOVER
========================================================= */

.job-ad-action-button.secondary:hover {

    background:
        #f5f8ff;

    border-color:
        rgba(
            47,
            84,
            235,
            0.40
        );

}


/* =========================================================
   27. FOCUS ACCESSIBILITY
========================================================= */

.job-ad-action-button:focus-visible {

    outline:
        3px
        solid
        rgba(
            47,
            84,
            235,
            0.35
        );

    outline-offset:
        3px;

}


/* =========================================================
   28. FULLSCREEN CONTAINER
========================================================= */

#jobAdvertisement.advertisement-fullscreen {

    position:
        fixed;

    inset:
        0;

    z-index:
        99999;

    width:
        100vw;

    height:
        100vh;

    max-width:
        none;

    overflow-y:
        auto;

    overflow-x:
        hidden;

    padding:
        35px
        20px
        50px;

    box-sizing:
        border-box;

    background:
        #101828;

}


/* =========================================================
   29. FULLSCREEN HEADING
========================================================= */

#jobAdvertisement.advertisement-fullscreen
.job-ad-heading {

    color:
        #ffffff;

}


/* =========================================================
   30. FULLSCREEN HEADING TEXT
========================================================= */

#jobAdvertisement.advertisement-fullscreen
.job-ad-heading h2 {

    color:
        #ffffff;

}


/* =========================================================
   31. FULLSCREEN DESCRIPTION
========================================================= */

#jobAdvertisement.advertisement-fullscreen
.job-ad-heading p {

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

}


/* =========================================================
   32. FULLSCREEN A4 WRAPPER
========================================================= */

#jobAdvertisement.advertisement-fullscreen
.job-ad-image-wrapper {

    width:
        min(
            90vw,
            794px
        );

    margin:
        0
        auto;

}


/* =========================================================
   33. FULLSCREEN SEPARATOR
========================================================= */

#jobAdvertisement.advertisement-fullscreen
.job-ad-separator {

    height:
        40px;

}


/* =========================================================
   34. FULLSCREEN ACTIONS
========================================================= */

#jobAdvertisement.advertisement-fullscreen
.job-ad-actions {

    padding-bottom:
        20px;

}


/* =========================================================
   35. TABLET
========================================================= */

@media (
    max-width: 992px
) {

    .job-ad-section {

        padding:
            70px
            18px
            80px;

    }


    .job-ad-container {

        width:
            100%;

    }


    .job-ad-image-wrapper {

        width:
            min(
                100%,
                700px
            );

    }


    .job-ad-heading {

        margin-bottom:
            40px;

    }

}


/* =========================================================
   36. MOBILE / TABLET
========================================================= */

@media (
    max-width: 768px
) {

    .job-ad-section {

        padding:
            58px
            12px
            70px;

    }


    .job-ad-heading {

        margin-bottom:
            30px;

    }


    .job-ad-label {

        padding:
            7px
            16px;

        font-size:
            0.72rem;

    }


    .job-ad-heading h2 {

        font-size:
            1.85rem;

    }


    .job-ad-heading p {

        font-size:
            0.92rem;

        line-height:
            1.65;

    }


    .job-ad-image-wrapper {

        width:
            100%;

        border-radius:
            12px;

        box-shadow:
            0 15px 35px
            rgba(
                15,
                35,
                70,
                0.14
            );

    }


    .job-ad-separator {

        height:
            38px;

    }


    .job-ad-actions {

        flex-direction:
            column;

        gap:
            12px;

        margin-top:
            30px;

    }


    .job-ad-action-button {

        width:
            min(
                100%,
                420px
            );

    }

}


/* =========================================================
   37. SMALL MOBILE
========================================================= */

@media (
    max-width: 480px
) {

    .job-ad-section {

        padding:
            45px
            7px
            55px;

    }


    .job-ad-heading {

        padding:
            0
            8px;

    }


    .job-ad-heading h2 {

        font-size:
            1.55rem;

    }


    .job-ad-heading p {

        font-size:
            0.86rem;

    }


    .job-ad-label {

        font-size:
            0.68rem;

        letter-spacing:
            0.8px;

    }


    .job-ad-image-wrapper {

        border-radius:
            8px;

        box-shadow:
            0 10px 25px
            rgba(
                15,
                35,
                70,
                0.13
            );

    }


    .job-ad-separator {

        height:
            28px;

    }


    .job-ad-separator::before {

        left:
            10%;

        right:
            10%;

    }


    .job-ad-action-button {

        min-height:
            47px;

        padding:
            11px
            15px;

        font-size:
            0.86rem;

    }


    #jobAdvertisement.advertisement-fullscreen {

        padding:
            20px
            8px
            35px;

    }


    #jobAdvertisement.advertisement-fullscreen
    .job-ad-image-wrapper {

        width:
            96vw;

        border-radius:
            8px;

    }

}


/* =========================================================
   38. VERY SMALL SCREENS
========================================================= */

@media (
    max-width: 360px
) {

    .job-ad-section {

        padding-left:
            5px;

        padding-right:
            5px;

    }


    .job-ad-heading h2 {

        font-size:
            1.4rem;

    }


    .job-ad-heading p {

        font-size:
            0.82rem;

    }


    .job-ad-action-button {

        font-size:
            0.82rem;

    }

}


/* =========================================================
   39. REDUCED MOTION
========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .job-ad-image-wrapper {

        opacity:
            1;

        transform:
            none;

        transition:
            none;

    }


    .job-ad-image {

        transition:
            none;

    }


    .job-ad-action-button {

        transition:
            none;

    }


    .job-ad-spinner {

        animation:
            none;

    }

}