/* =========================================================
   GAME TESTER PAGE
   Cognivancee Solutions
   IMPORTANT:
   - Does NOT modify header.html
   - Does NOT modify footer.html
   - Keeps existing PHP markup
   ========================================================= */


/* =========================================================
   PAGE BASE
   ========================================================= */

html {
    margin: 0 !important;
    padding: 0 !important;
}

body.game-tester-page {
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff;
    color: #101828;
    overflow-x: hidden;
}

/*
   Fix: stray gap above the header.
   Some themes wrap the header in an outer element (a
   top-bar, a preloader, or the header wrapper itself)
   that carries its own margin/padding from main.css.
   Zero out the first element in the body so nothing can
   push the header down from the very top of the page.
*/

body.game-tester-page > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.game-tester-page *,
body.game-tester-page *::before,
body.game-tester-page *::after {
    box-sizing: border-box;
}


/* =========================================================
   HEADER
   Keep existing header HTML exactly as it is.
   Make the transparent website header dark on this page.
   ========================================================= */

body.game-tester-page #vl-header-sticky {
    background: #08051f !important;
    background-color: #08051f !important;
    background-image: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    margin: 0 !important;

    /*
       Sticky header: keep it pinned to the top of the
       viewport while the user scrolls the page.
    */
    position: sticky !important;
    top: 0 !important;
    inset-block-start: 0 !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    z-index: 99999 !important;

    /*
       Fix: uneven space above vs below the nav row.
       The theme's own top/bottom padding on this element
       (or .header2-bg below it) was tuned for a transparent
       overlay header, so it's asymmetric — fine when
       invisible, obvious now that the background is solid.
       Zero it out and re-center with flexbox + a fixed
       height instead, so the gap above and below the nav
       row is always identical regardless of the theme's
       original values.

       Extra bottom padding added on top of that so there's
       visibly more breathing room under the nav row.
    */
    display: flex !important;
    align-items: center !important;
    min-height: 92px !important;
    padding-top: 0 !important;
    padding-bottom: 18px !important;
}

body.game-tester-page #vl-header-sticky .container.header2-bg {
    background: #08051f !important;
    background-color: #08051f !important;
    background-image: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    width: 100%;
}

/*
   Fix: thin line around the inner header content.
   The theme's own main.css puts a border / box-shadow /
   outline on the header's inner wrapper(s). Our background
   overrides above don't remove that border, so it still
   shows as a faint line hugging the inner content. Strip it
   from every wrapper level inside the sticky header, without
   touching real UI elements like the logo, menu links or
   buttons.
*/

body.game-tester-page #vl-header-sticky,
body.game-tester-page #vl-header-sticky > *,
body.game-tester-page #vl-header-sticky .container,
body.game-tester-page #vl-header-sticky .container > *,
body.game-tester-page #vl-header-sticky .row,
body.game-tester-page #vl-header-sticky [class*="header"] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

body.game-tester-page #vl-header-sticky .vl-logo,
body.game-tester-page #vl-header-sticky .vl-logo a,
body.game-tester-page #vl-header-sticky .vl-logo img {
    opacity: 1 !important;
    visibility: visible !important;
}

body.game-tester-page #vl-header-sticky .vl-main-menu,
body.game-tester-page #vl-header-sticky .vl-main-menu nav {
    opacity: 1 !important;
    visibility: visible !important;
}

body.game-tester-page #vl-header-sticky .vl-main-menu ul {
    opacity: 1 !important;
    visibility: visible !important;
}

body.game-tester-page #vl-header-sticky .vl-main-menu ul li,
body.game-tester-page #vl-header-sticky .vl-main-menu ul li a {
    opacity: 1 !important;
    visibility: visible !important;
}

body.game-tester-page #vl-header-sticky .vl-main-menu ul li a {
    color: #ffffff !important;
}

body.game-tester-page #vl-header-sticky .vl-header3-btns,
body.game-tester-page #vl-header-sticky .theme-btn27 {
    opacity: 1 !important;
    visibility: visible !important;
}

/*
   Fix: third header column (col-lg-3 — buttons/icons on the
   right) was inheriting dark text from the theme, making it
   invisible against the new dark header background. Force
   everything in that column to white.
*/

body.game-tester-page #vl-header-sticky .col-lg-3,
body.game-tester-page #vl-header-sticky .col-lg-3 * {
    color: #ffffff !important;
}

body.game-tester-page #vl-header-sticky .col-lg-3 i,
body.game-tester-page #vl-header-sticky .col-lg-3 svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}


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

.game-tester-hero {
    position: relative;

    /*
       Top padding is intentionally larger than the bottom.
       The header floats over the hero (position: fixed/
       absolute in the theme), so this isn't just visual
       spacing — it's clearance so content doesn't start
       underneath the header. ~140px header height + ~70px
       breathing room.
    */
    padding: 210px 0 95px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(101, 70, 245, 0.11),
            transparent 32%
        ),
        radial-gradient(
            circle at 10% 80%,
            rgba(40, 100, 215, 0.08),
            transparent 30%
        ),
        #ffffff;
}

.game-tester-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(15, 23, 42, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(15, 23, 42, 0.025) 1px,
            transparent 1px
        );

    background-size: 56px 56px;
}

/*
   Decorative game-themed background element.
   Uses the gamepad glyph from Font Awesome (already loaded
   on this page) instead of a real game image, so there's no
   copyright/licensing concern. Large, faint, and sits behind
   the hero content (z-index 1 vs content's z-index 2).
*/

.game-tester-hero::after {
    content: "\f11b";

    font-family: "Font Awesome 6 Free";
    font-weight: 900;

    position: absolute;

    top: 50%;
    right: -30px;

    transform: translateY(-50%) rotate(-12deg);

    font-size: 480px;
    line-height: 1;

    color: #6546f5;
    opacity: 0.06;

    z-index: 1;

    pointer-events: none;
}

.game-tester-hero .container {
    position: relative;
    z-index: 2;
}

.game-tester-hero-content {
    max-width: 1050px;
}


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

.game-hiring-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 10px 18px;

    margin-bottom: 25px;

    border-radius: 50px;

    background: rgba(99, 102, 241, 0.09);

    color: #5b4bea;

    font-size: 15px;
    font-weight: 700;
}

.game-hiring-badge span {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background: #6546f5;
}


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

.game-tester-hero h1 {
    margin: 0;

    color: #101828;

    font-size: clamp(48px, 6vw, 76px);
    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -2.5px;
}

.game-tester-hero h1 span {
    background: linear-gradient(
        90deg,
        #6546f5,
        #2864d7
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


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

.game-tester-intro {
    max-width: 900px;

    margin: 28px 0 34px;

    color: #64748b;

    font-size: 20px;
    line-height: 1.75;
}


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

.game-tester-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-bottom: 38px;
}

.job-meta-item {
    display: inline-flex;
    align-items: center;

    min-height: 50px;

    padding: 0 20px;

    border-radius: 30px;

    background: #f1f3f7;

    color: #344054;

    font-size: 15px;
    font-weight: 700;

    white-space: nowrap;
}

.job-meta-highlight {
    background: rgba(99, 70, 245, 0.09);

    color: #6046e8;
}


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

.game-tester-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 18px;
}

.game-primary-btn,
.game-secondary-btn {
    min-height: 62px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 32px;

    border-radius: 9px;

    font-size: 16px;
    font-weight: 700;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.game-primary-btn {
    color: #ffffff !important;

    background: linear-gradient(
        135deg,
        #6546f5,
        #2864d7
    );

    box-shadow:
        0 15px 35px rgba(79, 70, 229, 0.20);
}

.game-primary-btn:hover {
    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow:
        0 20px 40px rgba(79, 70, 229, 0.28);
}

.game-secondary-btn {
    gap: 10px;

    color: #344054 !important;

    background: #ffffff;

    border: 1px solid #d9dee8;
}

.game-secondary-btn:hover {
    color: #344054 !important;

    transform: translateY(-2px);

    border-color: #aeb7c7;
}


/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

.game-tester-section {
    padding: 100px 0;

    background: #ffffff;
}

.game-tester-light-section {
    background: #f7f8fc;
}

.game-tester-section .container {
    position: relative;
}

.section-label {
    margin-bottom: 14px;

    color: #5b4bea;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.game-tester-section h2 {
    margin: 0 0 18px;

    color: #101828;

    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1.2px;
}

.section-intro {
    max-width: 900px;

    margin: 0 0 45px;

    color: #667085;

    font-size: 18px;
    line-height: 1.75;
}


/* =========================================================
   OVERVIEW CARDS
   ========================================================= */

.job-overview-grid {
    display: grid;

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

    gap: 22px;
}

.overview-card {
    min-height: 210px;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #e6e9ef;

    border-radius: 16px;

    box-shadow:
        0 10px 35px rgba(16, 24, 40, 0.04);
}

.overview-icon {
    width: 48px;
    height: 48px;

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

    margin-bottom: 22px;

    border-radius: 12px;

    background: rgba(99, 70, 245, 0.10);

    color: #5b4bea;

    font-size: 20px;
}

.overview-card h3 {
    margin: 0 0 10px;

    color: #101828;

    font-size: 20px;
    font-weight: 700;
}

.overview-card p {
    margin: 0;

    color: #667085;

    font-size: 16px;
}


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

.job-content-grid {
    display: grid;

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

    gap: 28px;
}

.job-content-card {
    padding: 36px;

    background: #ffffff;

    border: 1px solid #e6e9ef;

    border-radius: 18px;

    box-shadow:
        0 12px 40px rgba(16, 24, 40, 0.04);
}

.job-content-card h3 {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 0 0 25px;

    color: #101828;

    font-size: 22px;
    font-weight: 750;
}

.job-content-card h3 i {
    color: #6046e8;
}

.job-content-card ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.job-content-card li {
    position: relative;

    padding-left: 28px;

    margin-bottom: 17px;

    color: #667085;

    font-size: 16px;
    line-height: 1.65;
}

.job-content-card li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 1px;

    color: #6046e8;

    font-weight: 800;
}


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

.benefits-grid {
    display: grid;

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

    gap: 22px;
}

.benefit-card {
    padding: 34px 28px;

    background: #ffffff;

    border: 1px solid #e6e9ef;

    border-radius: 16px;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.benefit-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 45px rgba(16, 24, 40, 0.08);
}

.benefit-card > i {
    display: block;

    margin-bottom: 20px;

    color: #6046e8;

    font-size: 30px;
}

.benefit-card h3 {
    margin: 0 0 10px;

    color: #101828;

    font-size: 20px;
    font-weight: 700;
}

.benefit-card p {
    margin: 0;

    color: #667085;

    font-size: 15px;
    line-height: 1.65;
}


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

.selection-grid {
    display: grid;

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

    gap: 25px;
}

.selection-card {
    padding: 35px;

    background: #ffffff;

    border: 1px solid #e6e9ef;

    border-radius: 18px;
}

.selection-number {
    margin-bottom: 22px;

    color: #6046e8;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 1px;
}

.selection-card h3 {
    margin: 0 0 12px;

    color: #101828;

    font-size: 24px;
    font-weight: 750;
}

.selection-card p {
    margin: 0;

    color: #667085;

    font-size: 16px;
    line-height: 1.65;
}


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

.game-tester-application {
    position: relative;

    padding: 110px 0 140px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(101, 70, 245, 0.18),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(40, 100, 215, 0.12),
            transparent 30%
        ),
        #0c1224;
}


/*
   IMPORTANT:
   Your current PHP contains only:

       .container
           .application-box

   Therefore we make the form card FLOAT RIGHT
   without changing your PHP.
*/

.game-tester-application > .container {
    position: relative;

    min-height: 650px;

    max-width: 1400px;
}


/* =========================================================
   FLOATING APPLICATION CARD
   ========================================================= */

.game-tester-application .application-box {
    position: absolute;

    top: 0;
    right: 0;

    width: 500px;
    max-width: 100%;

    padding: 42px;

    background: #ffffff;

    border-radius: 22px;

    box-shadow:
        0 35px 90px rgba(0, 0, 0, 0.38);

    z-index: 5;
}


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

.game-tester-application .application-box .section-label {
    margin-bottom: 14px;

    color: #6046e8;
}

.game-tester-application .application-box h2 {
    margin: 0 0 15px;

    color: #101828;

    font-size: 36px;
    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1px;
}

.game-tester-application .application-box > p {
    margin: 0 0 28px;

    color: #667085;

    font-size: 16px;
    line-height: 1.7;
}


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

.game-tester-form {
    width: 100%;
}

.form-grid {
    display: grid;

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

    column-gap: 18px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;

    margin-bottom: 8px;

    color: #344054;

    font-size: 14px;
    font-weight: 700;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    min-height: 52px;

    padding: 0 15px;

    border: 1px solid #d0d5dd;

    border-radius: 8px;

    background: #ffffff;

    color: #101828;

    font-family: inherit;

    font-size: 15px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #6046e8;

    box-shadow:
        0 0 0 3px rgba(96, 70, 232, 0.10);
}

.form-group input[type="file"] {
    padding: 13px 15px;
}

.form-group small {
    display: block;

    margin-top: 7px;

    color: #667085;

    font-size: 12px;
    line-height: 1.5;
}

.game-submit-btn {
    width: 100%;

    border: 0;

    cursor: pointer;
}


/* =========================================================
   SUCCESS / ERROR
   ========================================================= */

.application-success,
.application-error {
    margin-bottom: 22px;

    padding: 14px 16px;

    border-radius: 8px;

    font-size: 14px;
    font-weight: 600;
}

.application-success {
    background: #ecfdf3;
    color: #027a48;
}

.application-error {
    background: #fef3f2;
    color: #b42318;
}


/* =========================================================
   DOWNLOAD JD
   ========================================================= */

.game-tester-download {
    padding: 70px 0;

    background: #f7f8fc;
}

.download-box {
    display: flex;

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

    gap: 30px;

    padding: 38px;

    background: #101828;

    border-radius: 18px;
}

.download-box h3 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 25px;
    font-weight: 750;
}

.download-box p {
    margin: 0;

    color: #98a2b3;

    font-size: 15px;
}

.download-jd-btn {
    flex-shrink: 0;

    display: inline-flex;

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

    min-height: 58px;

    padding: 0 28px;

    border-radius: 8px;

    background: #ffffff;

    color: #101828 !important;

    font-size: 15px;
    font-weight: 700;

    text-decoration: none;
}

.download-jd-btn:hover {
    color: #101828 !important;

    transform: translateY(-2px);
}


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

@media (max-width: 1199px) {

    .job-overview-grid,
    .benefits-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .game-tester-application > .container {
        min-height: 700px;
    }

    .game-tester-application .application-box {
        width: 470px;
    }

    .game-tester-hero::after {
        font-size: 340px;
        right: -20px;
    }
}


@media (max-width: 991px) {

    .game-tester-hero {
        padding: 170px 0 70px;
    }

    .game-tester-section {
        padding: 75px 0;
    }

    .job-content-grid,
    .selection-grid {
        grid-template-columns: 1fr;
    }

    /*
       Tablet:
       stop floating so the form doesn't overflow.
    */

    .game-tester-application {
        padding: 80px 0;
    }

    .game-tester-application > .container {
        min-height: auto;
    }

    .game-tester-application .application-box {
        position: relative;

        top: auto;
        right: auto;

        width: 100%;
        max-width: 600px;

        margin-left: auto;
        margin-right: auto;
    }

    .game-tester-hero::after {
        font-size: 220px;
        opacity: 0.05;
    }
}


@media (max-width: 767px) {

    .game-tester-hero {
        padding: 150px 0 55px;
    }

    .game-tester-hero h1 {
        font-size: 43px;

        letter-spacing: -1.5px;
    }

    .game-tester-intro {
        font-size: 17px;

        line-height: 1.65;
    }

    .game-tester-meta {
        display: grid;

        grid-template-columns: 1fr;
    }

    .job-meta-item {
        justify-content: center;

        width: 100%;
    }

    .game-tester-actions {
        flex-direction: column;
    }

    .game-primary-btn,
    .game-secondary-btn {
        width: 100%;
    }

    .job-overview-grid,
    .benefits-grid {
        grid-template-columns: 1fr;
    }

    .job-content-card,
    .selection-card {
        padding: 27px;
    }

    .game-tester-application {
        padding: 65px 0;
    }

    .game-tester-application .application-box {
        padding: 28px 22px;

        border-radius: 16px;
    }

    .game-tester-application .application-box h2 {
        font-size: 30px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .download-box {
        flex-direction: column;

        align-items: flex-start;
    }

    .download-jd-btn {
        width: 100%;
    }

    .game-tester-hero::after {
        display: none;
    }
}

/* =========================================================
   GAME TESTER PAGE — STICKY HEADER ONLY
   ========================================================= */

body.game-tester-page #vl-header-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
}

body.game-tester-page {
    padding-top: 100px !important;
}

/* =========================================================
   GAME TESTER PAGE — ADDITIONAL OVERRIDES
   IMPORTANT:
   DO NOT DELETE OR MODIFY ANY CSS ABOVE.
   These are additional styles only.
   ========================================================= */


/* =========================================================
   APPLICATION SECTION — FIX INVISIBLE TEXT
   ========================================================= */

body.game-tester-page .application-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 500px) !important;
    align-items: center !important;
    gap: 70px !important;
    width: 100% !important;
}


/* Left-side application content */

body.game-tester-page .application-intro {
    position: relative !important;
    max-width: 560px !important;
    color: #ffffff !important;
    z-index: 2 !important;
}

body.game-tester-page .application-intro .section-label {
    color: #8f7cff !important;
}

body.game-tester-page .application-intro h2 {
    color: #ffffff !important;
    margin: 0 0 20px !important;
    font-size: clamp(38px, 4vw, 58px) !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;
    letter-spacing: -1.8px !important;
}

body.game-tester-page .application-intro > p {
    color: #c7cede !important;
    margin: 0 0 30px !important;
    font-size: 18px !important;
    line-height: 1.75 !important;
    max-width: 520px !important;
}


/* Application checklist */

body.game-tester-page .application-highlights {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body.game-tester-page .application-highlights li {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    margin-bottom: 15px !important;

    color: #e5e9f2 !important;

    font-size: 16px !important;
    font-weight: 500 !important;
}

body.game-tester-page .application-highlights li i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 25px !important;
    height: 25px !important;

    flex: 0 0 25px !important;

    border-radius: 50% !important;

    background: rgba(101, 70, 245, 0.18) !important;

    color: #9a8cff !important;

    font-size: 11px !important;
}


/* =========================================================
   APPLICATION FORM — KEEP EXISTING CARD
   ONLY IMPROVE POSITIONING
   ========================================================= */

body.game-tester-page .game-tester-application .application-box {
    position: relative !important;

    top: auto !important;
    right: auto !important;

    width: 100% !important;
    max-width: 500px !important;

    margin: 0 0 0 auto !important;

    z-index: 5 !important;
}


/* =========================================================
   APPLICATION FORM TEXT
   ========================================================= */

body.game-tester-page .game-tester-application .application-box label {
    color: #344054 !important;
}

body.game-tester-page .game-tester-application .application-box small {
    color: #667085 !important;
}


/* =========================================================
   APPLICATION SECTION — EXTRA VISUAL DEPTH
   ========================================================= */

body.game-tester-page .game-tester-application::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -250px;
    bottom: -300px;

    border-radius: 50%;

    background: rgba(101, 70, 245, 0.08);

    pointer-events: none;
}


/* =========================================================
   SECTION CARD HOVER POLISH
   ========================================================= */

body.game-tester-page .overview-card,
body.game-tester-page .job-content-card,
body.game-tester-page .benefit-card,
body.game-tester-page .selection-card {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease !important;
}

body.game-tester-page .overview-card:hover,
body.game-tester-page .job-content-card:hover,
body.game-tester-page .benefit-card:hover,
body.game-tester-page .selection-card:hover {
    transform: translateY(-4px);

    border-color: rgba(101, 70, 245, 0.20) !important;

    box-shadow:
        0 18px 45px rgba(16, 24, 40, 0.08) !important;
}


/* =========================================================
   FOOTER — PAGE-SPECIFIC MATCH
   footer.html IS NOT CHANGED
   ========================================================= */

body.game-tester-page footer {
    background: #ffffff !important;
    border-top: 1px solid #e8ebf1 !important;
    box-shadow: none !important;
}


/* Footer headings */

body.game-tester-page footer h1,
body.game-tester-page footer h2,
body.game-tester-page footer h3,
body.game-tester-page footer h4,
body.game-tester-page footer h5,
body.game-tester-page footer h6 {
    color: #101828 !important;
}


/* Footer normal text */

body.game-tester-page footer p,
body.game-tester-page footer span,
body.game-tester-page footer li {
    color: #344054 !important;
}


/* Footer links */

body.game-tester-page footer a {
    color: #344054 !important;
    transition: color 0.2s ease !important;
}

body.game-tester-page footer a:hover {
    color: #6046e8 !important;
}


/* Footer icons */

body.game-tester-page footer i,
body.game-tester-page footer svg {
    color: #344054 !important;
}


/* Social buttons */

body.game-tester-page footer a[class*="social"],
body.game-tester-page footer .social-icon,
body.game-tester-page footer .social-icons a {
    background: #ffffff !important;
    color: #101828 !important;

    border: 1px solid #e1e5ec !important;
}

body.game-tester-page footer a[class*="social"]:hover,
body.game-tester-page footer .social-icon:hover,
body.game-tester-page footer .social-icons a:hover {
    color: #6046e8 !important;

    border-color: #c9c2fa !important;
}


/* Footer divider */

body.game-tester-page footer hr {
    border-color: #e5e7eb !important;
    opacity: 1 !important;
}


/* =========================================================
   FOOTER BACKGROUND EFFECTS
   Remove ONLY visual background effects,
   NOT footer structure/content.
   ========================================================= */

body.game-tester-page footer::before,
body.game-tester-page footer::after {
    opacity: 0 !important;
}


/* =========================================================
   DOWNLOAD SECTION POLISH
   ========================================================= */

body.game-tester-page .download-box {
    position: relative !important;
    overflow: hidden !important;

    box-shadow:
        0 15px 40px rgba(16, 24, 40, 0.10) !important;
}

body.game-tester-page .download-box::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -90px;
    top: -110px;

    border-radius: 50%;

    background: rgba(101, 70, 245, 0.14);

    pointer-events: none;
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 991px) {

    body.game-tester-page .application-wrapper {
        grid-template-columns: 1fr !important;
        gap: 45px !important;
    }

    body.game-tester-page .application-intro {
        max-width: 700px !important;
    }

    body.game-tester-page .game-tester-application .application-box {
        max-width: 600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 767px) {

    body.game-tester-page .application-wrapper {
        gap: 35px !important;
    }

    body.game-tester-page .application-intro h2 {
        font-size: 38px !important;
        letter-spacing: -1px !important;
    }

    body.game-tester-page .application-intro > p {
        font-size: 16px !important;
    }

    body.game-tester-page
    .game-tester-application
    .application-box {
        max-width: 100% !important;
    }
}

/* =====================================================
   APPLICATION FORM - COMPACT HEIGHT
   ===================================================== */

.game-tester-application {
    padding-top: 70px;
    padding-bottom: 70px;
}

.application-wrapper {
    align-items: center;
}

.application-box {
    padding: 28px;
}

.game-tester-form .form-group {
    margin-bottom: 14px;
}

.game-tester-form label {
    margin-bottom: 5px;
}

.game-tester-form input,
.game-tester-form select,
.game-tester-form textarea {
    padding: 9px 11px;
}

.game-tester-form textarea {
    min-height: 70px;
}

.game-tester-form small {
    margin-top: 3px;
}

.game-submit-btn {
    margin-top: 4px;
}

/* Keep the application section compact on smaller screens */
@media (max-width: 991px) {
    .game-tester-application {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .application-box {
        padding: 24px;
    }
}

/* =====================================
   FORCE DARK HEADER
===================================== */

header{
    background:#0f172a !important;
}

.navbar{
    background:#0f172a !important;
}

.header-area{
    background:#0f172a !important;
}

.sticky-header{
    background:#0f172a !important;
}

.menu-area{
    background:#0f172a !important;
}

.main-header{
    background:#0f172a !important;
}

.navbar a,
.menu-area a,
.main-header a{
    color:#ffffff !important;
}

.navbar a:hover,
.menu-area a:hover,
.main-header a:hover{
    color:#60a5fa !important;
}

.dashboard-tabs{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    margin-bottom:35px;
}

.dashboard-tab{
    background:#ffffff;
    color:#1e3a8a;
    text-decoration:none;
    padding:14px 24px;
    border-radius:12px;
    font-weight:700;
    box-shadow:
    0 8px 20px rgba(0,0,0,.08);
    transition:.3s;
}

.dashboard-tab:hover{
    background:#1e3a8a;
    color:#ffffff;
    transform:translateY(-2px);
}