@charset "utf-8";

/* YouthJob Canada - Canadian Theme CSS */



/* ========================

   CANADIAN COLOR VARIABLES

   ======================== */

:root {

    --primary: #CC1422;

    /* Canadian Flag Red */

    --secondary: #0F2547;

    /* Deep Navy Blue */

    --navy-mid: #1B3A5C;

    /* Medium Navy */

    --accent: #E63946;

    /* Light Red */

    --gold: #F4C430;

    /* Maple Leaf Gold */

    --light-bg: #F5F7FA;

    /* Light Background */

    --border: #E5E7EB;

    /* Border Color */

    --text-dark: #1B2A4A;

    /* Dark Text */

    --text-muted: #6B7280;

    /* Muted Text */

    --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    --radius: 12px;

    --theme1-gradient: linear-gradient(135deg, #0F2547, #1B3A5C, #0F2547);

}



/* ========================

   KEYFRAMES

   ======================== */

@keyframes gradientShiftTheme1 {

    0% {

        background-position: 0% 50%;

    }



    50% {

        background-position: 100% 50%;

    }



    100% {

        background-position: 0% 50%;

    }

}



@keyframes floatTheme1 {

    from {

        transform: translate(0, 0);

    }



    to {

        transform: translate(30px, 30px);

    }

}



@keyframes spinner {

    to {

        transform: rotate(360deg);

    }

}



@keyframes loading-skeleton-pulse {

    0% {

        background-position: -200% 0;

    }



    100% {

        background-position: 200% 0;

    }

}



@keyframes ripplePulse {

    0% {

        width: 0;

        height: 0;

        opacity: 0.5;

    }



    100% {

        width: 1200px;

        height: 1200px;

        opacity: 0;

    }

}



/* ========================

   GLOBAL STYLES

   ======================== */

body {

    line-height: 1.6;

    margin: 0;

    text-align: left;

    overflow-x: hidden;

    font-size: 1rem;

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

    color: var(--text-dark);

}



a {

    text-decoration: none;

    color: var(--text-dark) !important;

    line-height: normal;

}



ul {

    list-style-type: disc;

    margin-bottom: 20px;

    margin-left: 20px;

}



ul.num {

    list-style-type: decimal;

    margin-bottom: 20px;

    margin-left: 20px;

}



label {

    margin: 0;

}



.form-group {

    margin-bottom: 15px;

}



.max-width {

    max-width: 1320px;

    margin: 0 auto;

    padding-left: 1.5rem;

    padding-right: 1.5rem;

}



.fw-bold {

    font-weight: 600 !important;

}



/* ========================

   NAVBAR - CANADIAN NAVY

   ======================== */

.navbar-theme1 {

    background: #fff;

    transition: all 0.4s ease;

    padding-top: 0.75rem;

    padding-bottom: 0.75rem;

    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

}



.navbar-theme1 .nav-link {

    opacity: 1;

    font-weight: 500;

    transition: all 0.3s ease;

    color: #1B2A4A !important;

}



.navbar-theme1.scrolled {

    background: #fff !important;

    backdrop-filter: blur(10px);

    padding-top: 0.75rem;

    padding-bottom: 0.75rem;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;

}



.bg-dark {

    height: 80px;

    border-bottom: 0px solid #e8eaed;

    border-radius: var(--radius);

    background: var(--theme1-gradient);

}



.fixed-top {

    margin: 0;

}



.navbar-expand-lg .navbar-nav .nav-link {

    padding-right: 0.875rem;

    padding-left: 0.875rem;

    font-weight: 500;
     

}



.nav-link {

    color: #fff !important;

}



a.nav-link:hover {

    color: #22C55E !important;

}



.nav-link-custom {

    margin-left: 15px;

    padding: 8px 16px !important;

    border-radius: 100px;

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

}



.nav-item .nav-link-custom {

    display: block;

    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);

    font-size: var(--bs-nav-link-font-size);

    font-weight: var(--bs-nav-link-font-weight);

    color: #fff !important;

    text-decoration: none;

    background: var(--primary);

    border: 0;

    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;

}



.nav-item:nth-child(6) .nav-link {

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

    border-radius: 12px;

}



.navbar-light .navbar-toggler {

    color: #fff;

    border-color: var(--secondary);

    background: var(--secondary);

    border-radius: 50%;

    min-height: 40px;

}



/* ========================

   HERO SECTION

   ======================== */

.slider-bg-theme1 {

    margin-top: -95px;

    padding: 150px 50px 100px 50px;

    background-position: center center;

    background: linear-gradient(135deg, var(--secondary) 0%, var(--navy-mid) 50%, var(--secondary) 100%);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

}



.hero-decor {

    position: absolute;

    width: 300px;

    height: 300px;

    background: radial-gradient(circle, rgba(244, 196, 48, 0.12) 0%, transparent 70%);

    border-radius: 50%;

    z-index: 0;

    pointer-events: none;

}



.decor-1 {

    top: -100px;

    right: -50px;

    animation: floatTheme1 8s infinite alternate;

}



.decor-2 {

    bottom: -100px;

    left: -50px;

    animation: floatTheme1 10s infinite alternate-reverse;

}



.decor-3 {

    top: 20%;

    left: 30%;

    width: 250px;

    height: 250px;

    animation: floatTheme1 12s infinite alternate;

    opacity: 0.1 !important;

}



.home-heading {

    font-size: 56px !important;

    line-height: 1.1;

    color: #fff;

    font-weight: 800;

}



.home-sub-heading {

    margin-bottom: 2rem !important;

    font-size: 18px !important;

    font-weight: 500 !important;

    line-height: 1.5em;

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

}



.search-bar {

    border-radius: 1rem;

    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);

    border: 1px solid rgba(255, 255, 255, 0.15);

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

    backdrop-filter: blur(20px);

    overflow: hidden;

    transition: all 0.3s ease;

}



.search-bar:hover {

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

}



.form-home,

.form-home:focus {

    border: 1px solid rgba(255, 255, 255, 0.25) !important;

    border-radius: 10px !important;

    color: #1e293b !important;

}



.search-bar:focus-within {

    transform: translateY(-3px);

    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5);

}



.advancelink,

.advancelink:hover {

    color: #fff !important;

    opacity: 0.8;

}



.advancelink:hover {

    opacity: 1;

    color: var(--gold) !important;

}



/* ========================

   STATS BAR

   ======================== */

.ycj-stats-bar {

    background: #fff;

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

    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

    padding: 1.25rem 0;

}



.ycj-stat-item {

    text-align: center;

    padding: 0.5rem 1.5rem;

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

}



.ycj-stat-item:last-child {

    border-right: none;

}



.ycj-stat-number {

    font-size: 1.8rem;

    font-weight: 800;

    color: var(--primary);

    line-height: 1;

}



.ycj-stat-label {

    font-size: 0.82rem;

    color: var(--text-muted);

    font-weight: 500;

    margin-top: 2px;

}



/* ========================

   FILTER SIDEBAR CARDS

   ======================== */

.ycj-filter-card {

    background: #fff;

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

    border-radius: var(--radius);

    padding: 1.25rem;

    margin-bottom: 1rem;

}



.ycj-filter-title {

    font-size: 0.9rem;

    font-weight: 700;

    color: var(--secondary);

    margin-bottom: 1rem;

    padding-bottom: 0.75rem;

    border-bottom: 2px solid var(--light-bg);

}



/* ========================

   JOB CARDS

   ======================== */

.ycj-job-card {

    padding: 1.25rem;

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

    border-radius: var(--radius);

    background: #fff;

    transition: all 0.25s ease;

    margin-bottom: 0.75rem;

}



.ycj-job-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 8px 24px rgba(204, 20, 34, 0.1);

    border-color: rgba(204, 20, 34, 0.3);

}



/* Logo wrap inside card */

.ycj-card-logo-wrap img,

.ycj-card-logo-wrap .featured-logo {

    width: 48px !important;

    height: 48px !important;

    object-fit: contain;

    border-radius: 10px;

}



.ycj-job-card.featured-job-tag {

    background: #fff9f9;

    border-left: 4px solid var(--primary);

}



.ycj-job-title {

    font-size: 1rem;

    font-weight: 600;

    color: var(--secondary);

    margin-bottom: 0.35rem;

}



.ycj-job-title a {

    color: var(--secondary) !important;

    transition: color 0.2s;

}



.ycj-job-title a:hover {

    color: var(--primary) !important;

}



.ycj-company-name {

    font-size: 0.875rem;

    color: var(--text-muted);

    font-weight: 500;

    margin-bottom: 0.4rem;

}



.ycj-job-meta {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    flex-wrap: wrap;

    font-size: 0.8rem;

    color: var(--text-muted);

}



.ycj-job-date {

    font-size: 0.78rem;

    color: var(--text-muted);

    white-space: nowrap;

}



.ycj-job-type-badge {

    background: #FFF0F1;

    color: var(--primary);

    padding: 2px 10px;

    border-radius: 100px;

    font-size: 0.75rem;

    font-weight: 600;

}



/* Backward compat - old card classes */

.card-home-job {

    padding: 1.5rem;

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

    border-radius: var(--radius);

    background: #fff;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.card-home-job:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 25px -5px rgba(204, 20, 34, 0.12);

    border-color: rgba(204, 20, 34, 0.25);

}



.featured-job-tag {

    background: #fff9f9;

    border: 1px solid rgba(204, 20, 34, 0.2);

}



/* ========================

   BROWSE CATEGORIES SECTION

   ======================== */

.ycj-browse-cats-section {

    background: var(--light-bg);

    padding: 5rem 0;

}



.ycj-browse-cat-card {

    background: #fff;

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

    border-radius: 16px;

    padding: 2rem 1.25rem;

    text-align: center;

    transition: all 0.3s ease;

    display: block;

    cursor: pointer;

    height: 100%;

}



.ycj-browse-cat-card:hover {

    border-color: var(--primary);

    transform: translateY(-6px);

    box-shadow: 0 12px 30px rgba(204, 20, 34, 0.12);

    background: #fff;

}



.ycj-cat-icon-wrap {

    width: 64px;

    height: 64px;

    background: linear-gradient(135deg, #FFEAEC, #FFD0D3);

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1rem;

    font-size: 1.75rem;

    color: var(--primary);

    transition: all 0.3s ease;

}



.ycj-browse-cat-card:hover .ycj-cat-icon-wrap {

    background: linear-gradient(135deg, var(--primary), var(--accent));

    color: #fff;

}



.ycj-cat-name {

    font-weight: 600;

    font-size: 0.9rem;

    color: var(--text-dark);

    margin-bottom: 0.5rem;

}



.ycj-cat-count {

    display: inline-block;

    background: #FFEAEC;

    color: var(--primary);

    font-size: 0.75rem;

    padding: 3px 12px;

    border-radius: 100px;

    font-weight: 600;

    transition: all 0.3s ease;

}



.ycj-browse-cat-card:hover .ycj-cat-count {

    background: var(--primary);

    color: #fff;

}



/* ========================

   SECTION HEADERS

   ======================== */

.ycj-section-badge {

    display: inline-block;

    background: #FFF0F1;

    color: var(--primary);

    font-size: 0.8rem;

    font-weight: 700;

    padding: 5px 16px;

    border-radius: 100px;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    margin-bottom: 1rem;

}



.ycj-section-title {

    font-size: 2.2rem;

    font-weight: 800;

    color: var(--secondary);

    line-height: 1.2;

    margin-bottom: 1rem;

}



.ycj-section-subtitle {

    color: var(--text-muted);

    font-size: 1.05rem;

    max-width: 600px;

    margin: 0 auto;

}



.ycj-section-text {

    color: #4B5563;

    font-size: 1rem;

    line-height: 1.7;

    margin-bottom: 1rem;

}



/* ========================

   ABOUT + HOW IT WORKS

   ======================== */

.ycj-about-section {

    background: #fff;

    padding: 5rem 0;

}



.ycj-steps {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.ycj-step {

    display: flex;

    align-items: flex-start;

    gap: 1rem;

    padding: 1.25rem;

    background: var(--light-bg);

    border-radius: var(--radius);

    border-left: 4px solid var(--primary);

    transition: all 0.3s ease;

}



.ycj-step:hover {

    background: #FFF5F5;

    transform: translateX(5px);

}



.ycj-step-icon {

    width: 48px;

    height: 48px;

    min-width: 48px;

    background: linear-gradient(135deg, var(--primary), var(--accent));

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;

    color: #fff;

}



.ycj-step-content h6 {

    font-weight: 700;

    color: var(--secondary);

    margin-bottom: 0.25rem;

    font-size: 1rem;

}



.ycj-step-content p {

    color: var(--text-muted);

    margin: 0;

    font-size: 0.875rem;

}



/* ========================

   RECRUITER / JOBSEEKER CTA

   ======================== */

.ycj-cta-section {

    padding: 4rem 0;

    background: var(--light-bg);

}



.ycj-cta-recruiter {

    background: var(--secondary);

    color: #fff;

    padding: 4rem 3rem;

    border-radius: 20px 0 0 20px;

    height: 100%;

}



.ycj-cta-jobseeker {

    background: var(--primary);

    color: #fff;

    padding: 4rem 3rem;

    border-radius: 0 20px 20px 0;

    height: 100%;

}



.ycj-cta-icon {

    width: 72px;

    height: 72px;

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

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

    color: #fff;

    margin-bottom: 1.5rem;

}



.ycj-cta-recruiter h3,

.ycj-cta-jobseeker h3 {

    font-size: 1.75rem;

    font-weight: 800;

    margin-bottom: 0.75rem;

}



.ycj-cta-recruiter p,

.ycj-cta-jobseeker p {

    opacity: 0.85;

    margin-bottom: 2rem;

    font-size: 0.95rem;

    line-height: 1.6;

}



.ycj-btn-white {

    display: inline-block;

    background: #fff;

    color: var(--secondary) !important;

    padding: 10px 28px;

    border-radius: 100px;

    font-weight: 700;

    font-size: 0.9rem;

    border: 2px solid #fff;

    transition: all 0.3s ease;

}



.ycj-btn-white:hover {

    background: transparent;

    color: #fff !important;

}



.ycj-btn-outline-white {

    display: inline-block;

    background: transparent;

    color: #fff !important;

    padding: 10px 28px;

    border-radius: 100px;

    font-weight: 700;

    font-size: 0.9rem;

    border: 2px solid rgba(255, 255, 255, 0.6);

    transition: all 0.3s ease;

}



.ycj-btn-outline-white:hover {

    background: #fff;

    color: var(--primary) !important;

    border-color: #fff;

}



/* ---- CTA Section: label + feature list ---- */

.ycj-cta-label {

    display: inline-flex;

    align-items: center;

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

    color: #fff;

    font-size: 0.8rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    padding: 5px 14px;

    border-radius: 100px;

    margin-bottom: 1.25rem;

    border: 1px solid rgba(255, 255, 255, 0.25);

}



.ycj-cta-features {

    list-style: none;

    padding: 0;

    margin: 0;

}



.ycj-cta-features li {

    display: flex;

    align-items: center;

    gap: 10px;

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

    font-size: 0.9rem;

    padding: 5px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



.ycj-cta-features li:last-child {

    border-bottom: none;

}



.ycj-cta-features li i {

    font-size: 1rem;

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

    flex-shrink: 0;

}



/* ========================

   ABOUT BG SECTION (existing)

   ======================== */

.aboutBG {

    background: var(--theme1-gradient);

    background-size: 400% 400%;

    animation: gradientShiftTheme1 12s ease infinite;

    border-radius: 20px;

    padding: 40px 48px;

    color: #fff;

}



.premium-purple-section {

    background: linear-gradient(-45deg, #0F2547, #1B3A5C, #CC1422, #1B3A5C) !important;

    background-size: 400% 400% !important;

    animation: gradientShiftTheme1 10s ease infinite !important;

}



.ripple-background {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

    z-index: 1;

    pointer-events: none;

}



.ripple-circle {

    position: absolute;

    top: 50%;

    left: 50%;

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

    border: 2px solid rgba(255, 255, 255, 0.15);

    border-radius: 50%;

    animation: ripplePulse 6s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;

    opacity: 0;

}



.ripple-2 {

    animation-delay: 2s;

}



.ripple-3 {

    animation-delay: 4s;

}



/* ========================

   EMAIL ALERT SECTION

   ======================== */

.alertBG {

    display: flex;

    align-items: center;

    background: #fff;

    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1) !important;

    border-radius: 16px;

    position: relative;

    z-index: 99;

}



.alertBGTitle {

    font-size: 1.5rem;

    font-weight: 700;

    line-height: 1.3;

    color: var(--secondary);

}



.alertInput {

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

    border-radius: 8px !important;

    min-width: 300px !important;

}



.alertButton {

    border: none;

    border-radius: 8px !important;

    background: var(--primary);

    font-weight: 600;

    transition: all 0.2s ease;

}



.alertButton:hover {

    background: #9B0012;

    transform: translateY(-1px);

}



/* ========================

   BLOG / ARTICLE CARDS

   ======================== */

.card-custom {

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

    border-radius: var(--radius);

    overflow: hidden;

    transition: all 0.3s ease;

    background: #fff;

}



.card-custom:hover {

    transform: translateY(-5px);

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);

    border-color: rgba(204, 20, 34, 0.2);

}



.card-body-custom {

    padding: 1.5rem;

}



.job_search_title {

    font-weight: 700;

    font-size: 1rem;

    color: var(--secondary);

    margin-bottom: 0.5rem;

    line-height: 1.4;

}



.job_search_title a {

    color: var(--secondary) !important;

}



.job_search_title a:hover {

    color: var(--primary) !important;

}



/* ========================

   ARTICLE CARDS

   ======================== */

.ycj-article-card {

    background: #fff;

    border-radius: 16px;

    overflow: hidden;

    border: 1px solid #E5E7EB;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    display: flex;

    flex-direction: column;

}



.ycj-article-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 16px 40px rgba(15, 37, 71, 0.12);

}



.ycj-article-img-wrap {

    position: relative;

    overflow: hidden;

}



.ycj-article-img-wrap img,

.ycj-article-img-wrap .card-img-top {

    width: 100%;

    height: 200px;

    object-fit: cover;

    display: block;

    transition: transform 0.4s ease;

}



.ycj-article-card:hover .ycj-article-img-wrap img,

.ycj-article-card:hover .ycj-article-img-wrap .card-img-top {

    transform: scale(1.05);

}



.ycj-article-category-badge {

    position: absolute;

    top: 14px;

    left: 14px;

    background: #CC1422;

    color: #fff;

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;

    padding: 4px 12px;

    border-radius: 100px;

}



.ycj-article-body {

    padding: 1.5rem;

    display: flex;

    flex-direction: column;

    flex: 1;

}



.ycj-article-meta {

    display: flex;

    align-items: center;

    gap: 1rem;

    font-size: 0.78rem;

    color: #9CA3AF;

    margin-bottom: 0.85rem;

}



.ycj-article-meta i {

    color: #CC1422;

}



.ycj-article-title {

    font-size: 1rem;

    font-weight: 700;

    color: #0F2547;

    line-height: 1.45;

    margin-bottom: 0.6rem;

    flex: 1;

}



.ycj-article-title a {

    color: #0F2547 !important;

    text-decoration: none;

}



.ycj-article-title a:hover {

    color: #CC1422 !important;

}



.ycj-article-desc {

    font-size: 0.875rem;

    color: #6B7280;

    line-height: 1.6;

    margin-bottom: 1.25rem;

}



.ycj-article-read-more {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    font-size: 0.85rem;

    font-weight: 700;

    color: #CC1422 !important;

    text-decoration: none;

    border-bottom: 2px solid transparent;

    padding-bottom: 2px;

    transition: border-color 0.2s, gap 0.2s;

    width: fit-content;

    margin-top: auto;

}



.ycj-article-read-more:hover {

    border-color: #CC1422;

    gap: 8px;

}



/* ========================

   FEATURED EMPLOYERS

   ======================== */

.theme1-featured-logo {

    width: 100%;

    height: 78px;

    object-fit: contain;

    padding: 7px;

}



/* ========================

   BUTTONS

   ======================== */

.btn-primary,

.btn-warning {

    background: var(--primary) !important;

    border-color: var(--primary) !important;

    color: #fff !important;

}



.btn-primary:hover,

.btn-warning:hover {

    background: #9B0012 !important;

    border-color: #9B0012 !important;

}



.upload-button,

.upload-button:hover {

    font-weight: 600;

    border-radius: 7px;

    padding: 13px 22px;

    color: #fff !important;

    background: var(--primary);

}



.upload-button:hover {

    background: #9B0012;

}



/* ========================

   LOAD MORE BUTTON

   ======================== */

.load-more-container {

    text-align: center;

    margin-top: 2rem;

    margin-bottom: 1rem;

}



.load-more-btn {

    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);

    color: #fff;

    border: none;

    padding: 14px 32px;

    border-radius: 50px;

    font-weight: 600;

    font-size: 15px;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: 0 4px 15px rgba(204, 20, 34, 0.3);

    display: inline-flex;

    align-items: center;

    gap: 10px;

}



.load-more-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(204, 20, 34, 0.4);

}



.load-more-btn:disabled {

    background: #94a3b8;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;

}



.load-more-btn .spinner {

    width: 18px;

    height: 18px;

    border: 2px solid rgba(255, 255, 255, 0.3);

    border-top-color: #fff;

    border-radius: 50%;

    animation: spinner 0.8s linear infinite;

}



.no-more-jobs {

    color: var(--text-muted);

    font-size: 14px;

    padding: 1rem;

}



/* ========================

   JOB LISTING CONTAINER

   ======================== */

.job-listing-container {

    height: auto;

    position: relative;

    margin-bottom: 1.5rem;

}



/* ========================

   SKELETON LOADING

   ======================== */

#skeleton-loader {

    margin-top: 1rem;

}



.loading-skeleton-card {

    background: #fff;

    border-radius: var(--radius);

    padding: 1.25rem;

    margin-bottom: 0.75rem;

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

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

}



.loading-skeleton-el {

    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);

    background-size: 200% 100%;

    animation: loading-skeleton-pulse 1.5s ease-in-out infinite;

    border-radius: 4px;

}



.loading-skeleton-avatar {

    width: 55px;

    height: 55px;

    min-width: 55px;

    border-radius: 8px;

    flex-shrink: 0;

}



.loading-skeleton-title {

    height: 18px;

    width: 200px;

    max-width: 60%;

    margin-bottom: 10px;

}



.loading-skeleton-text {

    height: 14px;

    width: 120px;

    max-width: 35%;

    margin-bottom: 8px;

}



.loading-skeleton-text-sm {

    height: 12px;

    width: 80px;

    max-width: 25%;

}



.loading-skeleton-btn {

    height: 32px;

    width: 65px;

    border-radius: 6px;

}



/* ========================

   FOOTER

   ======================== */

.footer {

    margin-top: 32px;

}



.white-bg {

    background-color: #fff;

}



.dark-bg-theme1 {

    background: #F5F7FA !important;

}



.dark-bg-theme1 div a,

.copyright {

    color: #212529 !important;

}



/* ========================

   FORM ELEMENTS

   ======================== */

.form-control,

.form-select {

    border: 1px solid #9da7b2;

    font-size: 0.875rem;

    padding: 0.25rem 0.75rem;

    color: #525252dd;

    font-weight: 600;

    border-radius: 7px !important;

}



.form-select-filter {

    min-height: 30px;

    color: #6c757d;

    border-radius: 6px;

}



.btn-100 {

    width: 100%;

}



.rounded-12 {

    border-radius: 12px;

}



/* ========================

   MISC UTILITIES

   ======================== */

.text-muted {

    overflow-wrap: anywhere;

    color: var(--text-muted) !important;

}



.text-muted a {

    color: var(--text-muted) !important;

}



.text-muted a:hover {

    color: var(--primary) !important;

}



.posted {

    color: var(--text-muted);

    font-size: 0.82rem;

}



.mb-12 {

    margin-bottom: 12px;

}



.btn-font {

    font-size: 16px;

}



.home-info {

    font-size: 42px !important;

}



.home-info-bg {

    padding: 3rem;

}



.home-info-para {

    font-size: 1rem;

}



.list-hover:hover {

    background-color: #FFF0F1;

}



.danger-bg {

    color: #842029;

    background: #f8d7da;

    border-color: #f5c2c7;

    border-radius: 5px;

    padding: 10px 25px;

}



.required {

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

}



.active-tab {

    color: #fff !important;

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

    border-radius: 5px;

    background: var(--primary);

}



.active-tab:hover {

    color: #fff !important;

    border: 2px solid #9B0012;

    border-radius: 5px;

    background: #9B0012;

}



/* Category bg card in sidebar */

.category-bg {

    background: #FFFFFF;

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

    border-radius: var(--radius);

    padding: 1.5rem;

    margin-bottom: 1.5rem;

    width: 100%;

    transition: all 0.3s ease;

}



.category-bg:hover {

    background: #fff9f9;

    border-color: var(--primary);

    transform: scale(1.02);

    box-shadow: 0 4px 12px rgba(204, 20, 34, 0.1);

}



/* Job title */

.card-title-theme1 {

    color: var(--secondary);

    font-size: 18px !important;

}



h3.job-title-theme1 a {

    font-size: 17px;

    font-weight: 500;

}



/* Nav tabs */

.nav-tabs .nav-item.show .nav-link,

.nav-tabs .nav-link.active {

    color: #121224 !important;

    border-radius: 12px;

    background: var(--N400, #E7E7F1);

    border: 1px solid var(--N800, #121224);

    font-weight: 700;

    font-size: 12px;

    line-height: 15px;

}



.nav-tabs .nav-link {

    color: #474D6A !important;

    background: var(--N100, #fff);

    border: 1px solid var(--N500, #979EC2);

    border-radius: 12px;

    font-weight: 500;

    font-size: 12px;

    line-height: 15px;

    padding: 6px 12px;

    margin-right: 14px;

    margin-bottom: 14px;

    display: inline-block;

    cursor: pointer;

}



.list-group-item:first-child {

    border-top-left-radius: 12px;

    border-top-right-radius: 12px;

}



.list-group-item:last-child {

    border-bottom-right-radius: 12px;

    border-bottom-left-radius: 12px;

}



.list-group {

    --bs-border-width: 1px;

    --bs-list-group-border-width: var(--bs-border-width);

    --bs-list-group-item-padding-x: 1.2rem;

    --bs-list-group-item-padding-y: 1rem;

}



.form-check .form-check-input {

    border: 1px solid #ccc;

}



.x-hover:hover {

    cursor: pointer;

}



.list {

    gap: 10px;

}



.list-grid-icon {

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

    border-radius: 5px;

    width: 24px;

    height: 24px;

    display: inline-flex;

    font-size: 18px;

    padding: 2px;

    color: #797987;

}



/* ========================

   GRID / LIST VIEW

   ======================== */

.list {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin: 0;

    padding: 0;

}



/* LIST VIEW */

.list.list-view-filter {

    flex-direction: column;

}



.list.list-view-filter .ycj-job-card {

    width: 100%;

}



.list.list-view-filter .ycj-grid-apply {

    display: none;

}



.list.list-view-filter .ycj-list-meta {

    display: flex !important;

}



/* GRID VIEW */

.list.grid-view-filter .ycj-job-card {

    width: calc(33.333% - 10px);

    display: flex;

    flex-direction: column;

}



.list.grid-view-filter .ycj-job-card>.d-flex {

    flex: 1;

    flex-wrap: wrap;

}



.list.grid-view-filter .ycj-card-logo-wrap {

    width: 56px;

    padding-right: 0.75rem;

    border-right: 1px solid #E5E7EB;

    margin-right: 0.25rem;

    display: flex;

    align-items: center;

    justify-content: center;

}



.list.grid-view-filter .ycj-grid-apply {

    display: block;

}



.list.grid-view-filter .ycj-list-meta {

    display: none !important;

}



/* Card logo wrap in list view */

.list.list-view-filter .ycj-card-logo-wrap {

    width: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

}



@media (max-width: 991px) {

    .list.grid-view-filter .ycj-job-card {

        width: calc(50% - 8px);

    }

}



@media (max-width: 575px) {

    .list.grid-view-filter .ycj-job-card {

        width: 100%;

    }

}



/* New Footer for Grid View: Time Left, Apply Right */

.ycj-grid-footer {

    display: none; /* Hidden in list view */

}



.grid-view-filter .ycj-grid-footer {

    display: block;

}



.ycj-job-date-grid {

    color: #64748B;

    font-size: 0.85rem;

    font-weight: 500;

}



.ycj-grid-apply-btn .btn,

.ycj-grid-apply-btn button,

.ycj-grid-apply-btn a {

    padding: 6px 20px !important;

    font-size: 14px !important;

    border-radius: 6px !important;

    background: #FFFFFF !important;

    color: #0F2547 !important;

    border: 1px solid #0F2547 !important;

    font-weight: 600 !important;

    display: inline-block;

    text-decoration: none;

    transition: all 0.2s ease;

}



.ycj-grid-apply-btn a:hover,

.ycj-grid-apply-btn button:hover {

    background: #0F2547 !important;

    color: #FFFFFF !important;

}



/* Filter bar */

.filters-bar {

    background: #fff;

    margin: -29px 0 0 0;

    padding-top: 10px;

    box-shadow: 0 5px 10px -5px #ccc;

}



/* Has search icon */

.has-search .form-control,

.form-select {

    padding-left: 2.375rem;

}



.has-search .form-control-feedback {

    position: absolute;

    z-index: 2;

    display: block;

    width: 2.375rem;

    pointer-events: none;

    color: #aaa;

    margin: 11px 0 0 0;

}



/* Misc */

.hidden-category {

    display: none;

}



.border-bottom-0 {

    border-bottom: 0px !important;

}



a.list-group-item-primary {

    color: #000 !important;

    background: linear-gradient(180deg, rgb(247 247 247) 0%, rgb(231 231 231) 100%);

    border: 1px solid #e9e9e9;

}



.list-view-button,

.grid-view-button {

    border: 1px solid white;

    padding: 5px;

    cursor: pointer;

    border-radius: 12px;

    height: 36px;

    width: 36px;

    text-align: center;

    line-height: 25px;

    font-size: 22px;

}



.list-view-button:hover,

.grid-view-button:hover {

    background: white;

    color: #0e2439;

}



.list-view-button {

    margin-right: 10px;

}



.no-border {

    border-color: #fff;

}



.border-left {

    border-left: 1px solid #ccc;

}



.main-heading {

    margin-bottom: 12px;

}



.resume-heading {

    margin-bottom: 12px;

    font-size: 1.4rem;

}



.social-signup {

    text-align: right;

    margin: -25px 0 0 0;

    position: relative;

    font-size: 16px;

}



.label-text {

    padding: 0;

    margin-bottom: 0.5rem;

    font-size: 16px;

    font-weight: 600;

}



.badge2 {

    background: #F5F7FB;

}



.border-login {

    border-bottom: 2px solid transparent;

    border-image: linear-gradient(0.25turn, rgba(255, 249, 34), rgba(255, 0, 128), rgba(56, 2, 155, 0));

    border-image-slice: 1;

    display: table;

    margin: 0 auto 15px auto;

    width: 117px;

}



.forum-icon-bg {

    border-radius: 3px;

    font-size: 20px !important;

    color: #0c5460;

    background-color: #d1ecf1;

    border: 1px solid #bee5eb;

}



.img-circle-custom {

    border-radius: 50% !important;

    background-color: #fff;

    padding: 5px;

    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.02);

}



img.img-circle {

    width: 114px;

    height: 114px;

}



ul.categories {

    list-style-type: none;

}



ul.categories li a {

    line-height: 45px;

    font-weight: 400;

    padding: 8px 15px;

    border-radius: 5px;

}



.mini-profile-img img {

    width: 100px;

    height: 100px;

    object-fit: cover;

    border-radius: 100px;

}



.mini-profile-img {

    width: 100px;

    height: 100px;

    object-fit: cover;

    border-radius: 100px !important;

}



.profile {

    width: 100px;

    object-fit: contain;

    object-position: left;

    border-radius: 3px;

}



img.logo-dashboard {

    width: 130px !important;

    height: 130px !important;

    object-fit: fill;

}



.resume-name {

    position: relative;

    float: right;

    margin-top: -40px;

}



.card-body-new {

    padding: 0 !important;

}



.mini-profile-img-dashboard img {

    width: 119px;

    height: 119px;

    object-fit: contain;

    padding: 0;

    border-radius: 5px;

}



.jobseeker-rate {

    float: right;

    position: absolute;

    top: 20px;

    right: 0px;

    border: 1px solid #ddd;

    border-radius: 5px;

    padding: 10px 20px;

    max-width: 215px;

}



.card-home {

    border: transparent;

    box-sizing: border-box;

    background: #FFEAEC;

    border-radius: 10px;

}



.mf-size26 {

    font-size: 26px !important;

}



.input-group-text {

    line-height: 1.9;

    border-radius: 0;

}



/* ========================

   RESPONSIVE

   ======================== */

@media only screen and (max-width: 900px) {

    .slider-bg-theme1 {

        padding: 90px 0 30px 0;

    }

}



@media only screen and (max-width: 768px) {

    .ycj-cta-recruiter {

        border-radius: 20px 20px 0 0;

    }



    .ycj-cta-jobseeker {

        border-radius: 0 0 20px 20px;

    }



    .ycj-stat-item {

        border-right: none;

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

    }



    .ycj-stat-item:last-child {

        border-bottom: none;

    }



    .ycj-browse-cats-section {

        padding: 3rem 0;

    }



    .ycj-about-section {

        padding: 3rem 0;

    }



    .ycj-cta-recruiter,

    .ycj-cta-jobseeker {

        padding: 3rem 2rem;

    }



    .ycj-section-title {

        font-size: 1.75rem;

    }

}



@media only screen and (max-width: 426px) {

    h1.home-heading {

        font-size: 30px !important;

        line-height: normal;

        width: 90%;

        margin: 0 auto 20px auto;

    }



    .home-sub-heading {

        font-size: 18px;

        width: 85%;

        margin: 0 auto 1.3rem auto !important;

    }



    .m-w-100 {

        width: 100% !important;

    }



    .m-text-center {

        text-align: center !important;

    }



    .m-dblock {

        display: block !important;

    }



    .mmt-10 {

        margin-top: 10px;

    }



    .home-info {

        font-size: 24px;

        margin-bottom: 15px;

    }



    .home-info-para {

        font-size: 18px;

    }



    .home-info-bg {

        padding: 2rem !important;

    }



    .mp-0 {

        padding-left: 0rem !important;

        padding-right: 0rem !important;

    }



    .mmb-10 {

        margin-bottom: 10px !important;

    }



    .mmr-0 {

        margin-right: 0px !important;

    }



    .navbar-collapse {

        background: #0F2547;

        padding: 21px 0;

    }

}



/* ============================================================

   FEATURED EMPLOYERS MARQUEE

   ============================================================ */

.ycj-employers-marquee-section {

    display: none;

    background: #0F2547;

    padding: 1.25rem 0 1.75rem;

}



.ycj-marquee-label {

    text-align: center;

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;

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

    margin-bottom: 1rem;

}



.ycj-marquee-wrapper {

    overflow: hidden;

    width: 100%;

    position: relative;

}



/* Fade edges — match navy bg */

.ycj-marquee-wrapper::before,

.ycj-marquee-wrapper::after {

    content: "";

    position: absolute;

    top: 0;

    bottom: 0;

    width: 60px;

    z-index: 2;

    pointer-events: none;

}



.ycj-marquee-wrapper::before {

    left: 0;

    background: linear-gradient(to right, #FFFFFF 0%, transparent 100%);

}



.ycj-marquee-wrapper::after {

    right: 0;

    background: linear-gradient(to left, #FFFFFF 0%, transparent 100%);

}



.ycj-marquee-track {

    display: flex;

    align-items: center;

    gap: 2.5rem;

    width: max-content;

    animation: ycjMarquee 60s linear infinite;

}



.ycj-marquee-track:hover {

    animation-play-state: paused;

}



.ycj-marquee-item {

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 0.5rem;

    transition: opacity 0.3s;

}



.ycj-marquee-item:hover {

    opacity: 0.85;

}



.ycj-marquee-item img {

    max-height: 60px;

    max-width: 140px;

    width: auto;

    object-fit: contain;

}



@keyframes ycjMarquee {

    0% {

        transform: translateX(0);

    }



    100% {

        transform: translateX(-50%);

    }

}



@media screen and (max-width: 479px) {

    .nav-link {

        color: #fff !important;

    }



    .g-5,

    .gx-5 {

        --bs-gutter-x: 0rem;

    }



    .max-width {

        max-width: 100% !important;

    }



    .m-none {

        display: none !important;

    }



    .mmt-4 {

        margin-top: 1.5rem !important;

    }



    .mmy-4 {

        margin-top: 1.5rem !important;

        margin-bottom: 1.5rem !important;

    }



    .mmb-4 {

        margin-bottom: 1.5rem !important;

    }



    .job-listing-container {

        height: auto;

    }



    .home-info {

        margin-bottom: 10px !important;

    }



    .upload-button {

        padding: 20px 30px;

    }



    .alertBG {

        text-align: center;

    }



    .alertBGTitle {

        font-size: 18px;

        margin: 0 auto 15px auto;

    }



    .alertInput {

        min-width: 200px !important;

        margin-right: 0px !important;

        margin-bottom: 15px;

    }



    .alertButton {

        min-width: -webkit-fill-available;

        text-align: center;

        display: block !important;

    }



    .slider-bg-theme1 {

        overflow-x: hidden;

        border-radius: 0px;

    }



    .footer {

        margin-top: 40px;

    }



    .ycj-cta-recruiter {

        border-radius: 16px 16px 0 0 !important;

        padding: 2.5rem 1.5rem;

    }



    .ycj-cta-jobseeker {

        border-radius: 0 0 16px 16px !important;

        padding: 2.5rem 1.5rem;

    }



    .m-font-size1 {

        font-size: 22px !important;

        margin: 0 !important;

    }



    .mpt-20 {

        padding-top: 0px !important;

    }



    .mmt-0 {

        margin-top: 0px !important;

    }



    .mmt-15 {

        margin-top: 15px !important;

    }



    .mmb-10 {

        margin-bottom: 10px !important;

    }



    .advance-link:hover,

    .nav-link:hover {

        color: var(--gold) !important;

    }



    .search-bar {

        width: 90%;

        margin: 0 auto;

    }



    .aboutBG {

        padding: 0px;

    }



    .alertBG {

        text-align: center;

    }

}



/* ========================

   PRICING SECTION

   ======================== */

.ycj-pricing-card {

    background: #fff;

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

    border-radius: 20px;

    padding: 2.5rem 2rem;

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    position: relative;

    display: flex;

    flex-direction: column;

}



.ycj-pricing-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 40px rgba(15, 37, 71, 0.1);

    border-color: var(--primary);

}



.ycj-price-header {

    text-align: center;

    margin-bottom: 2rem;

    padding-bottom: 2rem;

    border-bottom: 1px solid #f0f0f0;

}



.ycj-plan-name {

    font-size: 0.9rem;

    font-weight: 700;

    color: var(--text-muted);

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 0.5rem;

}



.ycj-plan-price {

    font-size: 2.5rem;

    font-weight: 800;

    color: var(--secondary);

    line-height: 1;

    margin-bottom: 0.5rem;

}



.ycj-plan-duration {

    font-size: 0.85rem;

    color: var(--text-muted);

}



.ycj-plan-features {

    list-style: none;

    padding: 0;

    margin: 0 0 2.5rem 0;

    flex-grow: 1;

}



.ycj-plan-features li {

    font-size: 0.95rem;

    color: #4B5563;

    margin-bottom: 1rem;

    display: flex;

    align-items: center;

}



.ycj-pricing-card.featured {

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

    background: #fff;

    box-shadow: 0 10px 30px rgba(204, 20, 34, 0.08);

}



.ycj-featured-badge {

    position: absolute;

    top: 0;

    left: 50%;

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

    background: var(--primary);

    color: #fff;

    font-size: 0.75rem;

    font-weight: 800;

    padding: 6px 20px;

    border-radius: 100px;

    white-space: nowrap;

    box-shadow: 0 4px 12px rgba(204, 20, 34, 0.3);

}



@media (max-width: 768px) {

    .ycj-pricing-card {

        margin-bottom: 1.5rem;

    }

}