/* Default background height */
#greyBanner {
    position: absolute;
    margin-top: 140px;
    height: 60%;
    left: 0;
    right: 0;
}

/* Default container height */
#heroContainer {
    overflow: hidden;
    height: 50rem;
}

/* Default row margin */
#logoRow {
    margin-top: -120px !important;
}

/* Adjust background height for screens below 1440px */
@media (max-width: 1440px) {
    #greyBanner {
        height: 52%;
    }
}

/* Adjust background height for screens below 1310px */
@media (max-width: 1310px) {
    #greyBanner {
        height: 50%;
    }
}

/* Adjust background height for screens below 1240px */
@media (max-width: 1240px) {
    #greyBanner {
        height: 47%;
    }
}

/* For screens below 1200px */
@media (max-width: 1200px) {
    /* Set background color of #hero to match .bg-light */
    #hero {
        background-color: #f3f6f9; /* Match this color to .bg-light */
    }

    /* Adjust height of #heroContainer */
    #heroContainer {
        height: 35rem;
    }

    /* Adjust margin-top of #logoRow */
    #logoRow {
        margin-top: -78px !important;
    }
}

/* For screens below 992px */
@media (max-width: 992px) {
    /* Set background color of #hero to match .bg-light */
    #hero {
        background-color: #f3f6f9; /* Match this color to .bg-light */
    }

    /* Adjust height of #heroContainer */
    #heroContainer {
        height: 78rem;
    }

     /* Adjust margin-top of #heroRow */
     #heroRow {
        margin-top: 60px !important;
    }

    /* Adjust margin-top of #logoRow */
    #logoRow {
        margin-top: 10px !important;
    }
}

/* For screens below 767px */
@media (max-width: 767px) {
    /* Set background color of #hero to match .bg-light */
    #hero {
        background-color: #f3f6f9; /* Match this color to .bg-light */
    }

    /* Adjust height of #heroContainer */
    #heroContainer {
        height: 68rem;
    }

    /* Adjust margin-top of #heroRow */
    #heroRow {
        margin-top: 60px !important;
    }

    /* Adjust margin-top of #logoRow */
    #logoRow {
        margin-top: 32px !important;
    }
}
/* Navbar - active/focus nav links in skill-primary */
.job-navbar .nav-link.active,
.job-navbar .nav-link:focus,
.job-navbar .nav-link:hover {
    color: var(--skill-primary) !important;
}

/* Skilltracer brand colors (match skilltracer.co) */
:root {
    --skill-primary: #abc12b;
    --skill-secondary: #1d403a;
    --skill-primary-subtle: rgba(171, 193, 43, 0.15);
    --skill-secondary-subtle: rgba(29, 64, 58, 0.12);
}

.bg-skill-primary-subtle { background-color: var(--skill-primary-subtle); }
.bg-skill-secondary-subtle { background-color: var(--skill-secondary-subtle); }
.text-skill-primary { color: var(--skill-primary) !important; }
.text-skill-secondary { color: var(--skill-secondary) !important; }
.btn-skill-secondary { background-color: var(--skill-secondary); border-color: var(--skill-secondary); color: #fff; }
.btn-skill-secondary:hover { background-color: #16332e; border-color: #16332e; color: #fff; }
.btn-soft-skill-primary { background-color: var(--skill-primary-subtle); color: var(--skill-primary); border-color: transparent; }
.btn-soft-skill-primary:hover { background-color: rgba(171, 193, 43, 0.25); color: var(--skill-secondary); }

.skilltracer-cta-bg { background-color: var(--skill-secondary); }

/* Skilltracer job-icon-effect override */
.job-hero-section .job-icon-effect,
#process .job-icon-effect {
    background: repeating-linear-gradient(-55deg, rgba(255,255,255,0) 0.8px, var(--skill-primary) 1.6px, var(--skill-primary) 2px, rgba(255,255,255,0) 3.8px, rgba(255,255,255,0) 5px);
}

#hero.job-hero-section {
    overflow: visible;
    padding-top: 120px;
    padding-bottom: 80px;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

#hero .container,
#hero .row,
#hero [class*="col-"] {
    overflow: visible;
}

.skilltracer-hero-visual {
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
}

.skilltracer-hero-image {
    max-width: 180px;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    object-fit: contain;
}

.skilltracer-floating-card {
    position: absolute;
    z-index: 10;
    border: 0;
    max-width: 200px;
    width: 100%;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Top card - floats over top-right of phone */
.skilltracer-card-top {
    top: 8%;
    left: 50%;
    transform: translate(30px, 0);
    right: auto;
}

/* Bottom card - floats over bottom-left of phone */
.skilltracer-card-bottom {
    bottom: 8%;
    left: 50%;
    transform: translate(calc(-100% - 30px), 0);
    right: auto;
}

/* Decorative circles - centered behind phone */
.skilltracer-circle-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

.skilltracer-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(29, 64, 58, 0.12);
}

.skilltracer-circle-1 { width: 140px; height: 140px; }
.skilltracer-circle-2 { width: 200px; height: 200px; }
.skilltracer-circle-3 { width: 260px; height: 260px; }
.skilltracer-circle-4 { width: 320px; height: 320px; }

@media (max-width: 1199.98px) {
    .skilltracer-hero-image {
        max-width: 160px;
    }

    .skilltracer-card-top {
        top: 5%;
        transform: translate(20px, 0);
    }

    .skilltracer-card-bottom {
        bottom: 5%;
        transform: translate(calc(-100% - 20px), 0);
    }

    .skilltracer-circle-1 { width: 120px; height: 120px; }
    .skilltracer-circle-2 { width: 180px; height: 180px; }
    .skilltracer-circle-3 { width: 240px; height: 240px; }
    .skilltracer-circle-4 { width: 300px; height: 300px; }
}

@media (max-width: 991.98px) {
    .skilltracer-hero-visual {
        min-height: auto;
        padding-top: 2rem;
        padding-bottom: 1.5rem;
    }

    .skilltracer-hero-image {
        max-width: 200px;
    }

    .skilltracer-floating-card {
        position: relative;
        max-width: 100%;
        margin: 0 auto 1rem auto;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    .skilltracer-card-top,
    .skilltracer-card-bottom {
        left: auto !important;
        right: auto !important;
    }

    .skilltracer-circle-effect {
        display: none;
    }
}

/* Features section - prevent card cut-off */
.about-img-section {
    overflow: visible;
}
.about-img-section::before {
    border-color: var(--skill-primary) !important;
}

/* Scroll-to-top button - arrow in skill-primary */
#back-to-top.landing-back-top i {
    color: var(--skill-primary);
}