/* ============================================================ */
/* RESET & BASE */
/* ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.7;
    color: #1a2634;
    background: #f4f6f9;
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5px 0;
}

a {
    text-decoration: none;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================================ */
/* SCROLL BAR */
/* ============================================================ */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0f1a2b;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #f47a20, #d96a18);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #c95f10;
}

/* ============================================================ */
/* GLASS NAVBAR */
/* ============================================================ */
header.glass-nav {
    background: rgba(15, 26, 43, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.4s ease;
}

header.glass-nav.scrolled {
    background: rgba(15, 26, 43, 0.98);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
    padding: 8px 0;
}

header.glass-nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0;
}

header .logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

header .logo .logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-icon img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(244, 122, 32, 0.3);
}

header .logo span {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.5px;
}

header .logo span span {
    color: #f47a20;
}

header nav ul {
    display: flex;
    gap: 4px;
}

header nav ul li a {
    color: #b8c5d4;
    padding: 8px 18px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    position: relative;
}

header nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: 0;
    height: 2.5px;
    background: #f47a20;
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 3px;
}

header nav ul li a:hover::after,
header nav ul li a.active::after {
    width: 60%;
}

header nav ul li a:hover,
header nav ul li a.active {
    color: #fff;
}

header nav ul li a.active {
    color: #f47a20;
}

.nav-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.nav-actions .btn {
    padding: 8px 18px;
    font-size: 0.78rem;
}

/* ============================================================ */
/* HAMBURGER MENU */
/* ============================================================ */
.unique-hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    padding: 6px 4px;
    position: relative;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}

.unique-hamburger .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    transition: all 0.4s ease;
    position: absolute;
}

.unique-hamburger .dot:nth-child(1) {
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
}

.unique-hamburger .dot:nth-child(2) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.unique-hamburger .dot:nth-child(3) {
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
}

.unique-hamburger:hover .dot {
    background: #f47a20;
}

.unique-hamburger.active .dot:nth-child(1) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 20px;
    height: 3px;
    border-radius: 3px;
    background: #f47a20;
}

.unique-hamburger.active .dot:nth-child(2) {
    opacity: 0;
    transform: scale(0);
}

.unique-hamburger.active .dot:nth-child(3) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 20px;
    height: 3px;
    border-radius: 3px;
    background: #f47a20;
}

/* ============================================================ */
/* BUTTONS */
/* ============================================================ */
.btn {
    display: inline-block;
    padding: 10px 28px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    font-size: 0.88rem;
    text-align: center;
    font-family: 'Inter', sans-serif;
}

.btn-primary {
    background: linear-gradient(135deg, #f47a20, #d96a18);
    color: #fff;
    box-shadow: 0 4px 20px rgba(244, 122, 32, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #d96a18, #c95f10);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(244, 122, 32, 0.4);
}

.btn-secondary {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.btn-secondary:hover {
    background: #fff;
    color: #0f1a2b;
    transform: translateY(-3px);
    border-color: #fff;
    box-shadow: 0 8px 30px rgba(255, 255, 255, 0.15);
}

.btn-outline {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(244, 122, 32, 0.4);
}

.btn-outline:hover {
    background: rgba(244, 122, 32, 0.15);
    color: #f47a20;
    border-color: #f47a20;
    transform: translateY(-2px);
}

.btn-outline-primary {
    background: transparent;
    color: #f47a20;
    border: 2px solid #f47a20;
}

.btn-outline-primary:hover {
    background: #f47a20;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(244, 122, 32, 0.3);
}

.btn-lg {
    padding: 14px 36px;
    font-size: 1rem;
}

.btn-sm {
    padding: 6px 16px;
    font-size: 0.78rem;
}

/* ============================================================ */
/* SECTION HEADERS */
/* ============================================================ */
.section-header {
    text-align: center;
    margin-bottom: 45px;
}

.section-tag {
    display: inline-block;
    background: rgba(244, 122, 32, 0.1);
    color: #f47a20;
    padding: 4px 20px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    border: 1px solid rgba(244, 122, 32, 0.08);
}

.section-header h2 {
    font-size: 2.4rem;
    color: #0f1a2b;
    margin-bottom: 12px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.section-header h2 span {
    color: #f47a20;
    position: relative;
}

.section-header h2 span::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(244, 122, 32, 0.15);
    border-radius: 3px;
}

.section-header p {
    color: #6b7a8a;
    max-width: 550px;
    margin: 0 auto;
    font-size: 0.95rem;
}

/* ============================================================ */
/* HERO SECTION */
/* ============================================================ */
.hero,
.page-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 100px 0 60px;
    background: #0f1a2b;
}

.hero-bg,
.page-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-bg img,
.page-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay,
.page-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(135deg, rgba(15, 26, 43, 0.92) 0%, rgba(15, 26, 43, 0.7) 40%, rgba(15, 26, 43, 0.4) 100%);
}

.hero .container,
.page-hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    margin-bottom: 40px;
}

.page-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 40px;
}

.hero-text {
    color: #fff;
    
}

.page-hero-text {
    color: #fff;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.hero-text .hero-badge {
    display: inline-block;
    background: rgba(244, 122, 32, 0.18);
    color: #f47a20;
    padding: 6px 22px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 20px;
    border: 1px solid rgba(244, 122, 32, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: absolute;
    top: -50px;
}

.page-hero-badge {
    display: inline-block;
    background: rgba(244, 122, 32, 0.18);
    color: #f47a20;
    padding: 6px 22px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 20px;
    border: 1px solid rgba(244, 122, 32, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-text .hero-badge i,
.page-hero-badge i {
    margin-right: 8px;
}

.hero-text h1 {
    font-size: 2.5rem;
    line-height: 1.1;
    font-weight: 900;
    margin-top: -30px !important;
    letter-spacing: -1px;
}

.page-hero-text h1 {
    font-size: 2.8rem;
    line-height: 1.2;
    font-weight: 900;
    margin-bottom: 18px;
    letter-spacing: -1px;
}

.hero-text h1 .typing-wrapper,
.page-hero-text h1 span {
    color: #f47a20;
    position: relative;
}

.hero-text h1 .typing-wrapper::after {
    content: '|';
    display: inline-block;
    animation: blink 0.7s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.hero-text p {
    font-size: 1.0rem;
    color: #b0c0d0;
    margin-bottom: 20px;
    max-width: 580px;
    margin-top: 100px;
}

.page-hero-text p {
    font-size: 1.1rem;
    color: #b0c0d0;
    margin-bottom: 20px;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.page-hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.hero-buttons .btn,
.page-hero-buttons .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.hero-image {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
}

.hero-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    border: 3px solid rgba(244, 122, 32, 0.15);
}

.page-hero-image {
    display: none !important;
}

.hero-floating-badge {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(15, 26, 43, 0.9);
    backdrop-filter: blur(10px);
    padding: 12px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.hero-floating-badge i {
    color: #f47a20;
    font-size: 1.2rem;
}

.hero-floating-badge span {
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Search Box */
.search-box {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 60px;
    padding: 3px 3px 2px 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    max-width: 500px;
    margin: 0 auto;
    transition: all 0.3s ease;
    margin: -10px;
    margin-top: -120px;
    margin-left: 20px;
}

.search-box:focus-within {
    box-shadow: 0 10px 50px rgba(244, 122, 32, 0.2);
    transform: scale(1.01);
}

.search-box .search-icon {
    color: #999;
    font-size: 1rem;
}

.search-box input {
    flex: 1;
    padding: 5px 5px;
    border: none;
    font-size: 0.95rem;
    outline: none;
    background: transparent;
    color: #1a2634;
    font-family: 'Inter', sans-serif;
}

.search-box input::placeholder {
    color: #aab5c5;
}

.search-box .btn {
    padding: 5px 20px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.scroll-indicator {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    animation: bounce 2s infinite;
}

.scroll-indicator i {
    margin-top: 5px;
    font-size: 1.2rem;
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

/* ============================================================ */
/* FLYER CAROUSEL */
/* ============================================================ */
.flyer-carousel {
    position: relative;
    width: 100%;
    max-width: 650px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    background: #0f1a2b;
    aspect-ratio: 4 / 5;
}

.flyer-carousel-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.flyer-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

.flyer-slide.active {
    opacity: 1;
    z-index: 2;
}

.flyer-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flyer-slide-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 25px 25px;
    background: linear-gradient(transparent, rgba(15, 26, 43, 0.85));
    color: #fff;
    z-index: 3;
}

.flyer-slide-overlay h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: #fff;
}

.flyer-slide-overlay p {
    font-size: 0.85rem;
    color: #b0c0d0;
    margin-bottom: 8px;
}

.flyer-slide-overlay .flyer-tag {
    display: inline-block;
    background: rgba(244, 122, 32, 0.2);
    color: #f47a20;
    padding: 2px 14px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.flyer-slide-overlay .flyer-ref {
    font-size: 0.75rem;
    color: #8a9aa8;
    margin-left: 10px;
}

.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.carousel-control:hover {
    background: rgba(244, 122, 32, 0.3);
    border-color: #f47a20;
    transform: translateY(-50%) scale(1.1);
}

.carousel-control.prev {
    left: 12px;
}

.carousel-control.next {
    right: 12px;
}

.carousel-indicators {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
}

.carousel-indicators .indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    padding: 0;
}

.carousel-indicators .indicator.active {
    background: #f47a20;
    width: 28px;
    border-radius: 5px;
}

.carousel-indicators .indicator:hover {
    background: rgba(255, 255, 255, 0.8);
}

.carousel-indicators .indicator.active:hover {
    background: #f47a20;
}

/* ============================================================ */
/* STATS */
/* ============================================================ */
.stats {
    background: #fff;
    padding: 40px 0;
    border-bottom: 1px solid #eee;
}

.stats .container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

.stat-item .stat-number {
    font-size: 1.5rem;
    font-weight: 900;
    color: #f47a20;
    line-height: 1;
}

.stat-item p {
    color: #555;
    font-weight: 500;
    margin-top: 8px;
}

.stat-item p i {
    color: #f47a20;
    margin-right: 6px;
}

/* ============================================================ */
/* CATEGORIES */
/* ============================================================ */
.categories {
    padding: 70px 0;
    background: #f4f6f9;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

.category-card {
    background: #fff;
    padding: 20px 15px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #eee;
    cursor: pointer;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.category-card .category-icon {
    width: 50px;
    height: 50px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 1.4rem;
    color: #f47a20;
    transition: all 0.3s ease;
}

.category-card:hover .category-icon {
    background: #f47a20;
    color: #fff;
}

.category-card h3 {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f1a2b;
}

/* ============================================================ */
/* FEATURED JOBS */
/* ============================================================ */
.featured-jobs {
    padding: 70px 0;
    background: #fff;
}

.job-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.job-card {
    background: #f8f9fc;
    padding: 25px;
    border-radius: 16px;
    transition: all 0.4s ease;
    border: 1px solid #eee;
}

.job-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.job-card .job-tag {
    display: inline-block;
    padding: 2px 14px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(244, 122, 32, 0.1);
    color: #f47a20;
    margin-bottom: 12px;
}

.job-card h3 {
    font-size: 1.1rem;
    color: #0f1a2b;
    margin-bottom: 5px;
}

.job-card .company {
    color: #666;
    font-size: 0.9rem;
}

.job-card .company i {
    color: #f47a20;
    width: 18px;
}

.job-card .location {
    color: #888;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.job-card .location i {
    color: #f47a20;
    width: 18px;
}

.job-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.job-type {
    padding: 3px 14px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #e8f4f8;
    color: #1a7a9e;
}

.job-type.full-time {
    background: #e6f7e6;
    color: #2d7a2d;
}

.job-type.part-time {
    background: #fef0e6;
    color: #c97a1a;
}

.job-type.contract {
    background: #fef3c7;
    color: #b45309;
}

.job-salary {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f1a2b;
}

.job-card .btn {
    width: 100%;
}

.view-all {
    text-align: center;
}

/* ============================================================ */
/* EXPERIENCE LEVELS SECTION */
/* ============================================================ */
.experience-levels {
    padding: 70px 0;
    background: #fff;
}

.experience-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.experience-card {
    background: #f8f9fc;
    padding: 30px 20px;
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.experience-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.experience-card .experience-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.6rem;
    color: #f47a20;
    transition: all 0.3s ease;
}

.experience-card:hover .experience-icon {
    background: #f47a20;
    color: #fff;
}

.experience-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f1a2b;
    margin-bottom: 8px;
}

.experience-card p {
    font-size: 0.85rem;
    color: #6b7a8a;
    margin-bottom: 15px;
}

.experience-card .job-count {
    font-weight: 700;
    color: #f47a20;
    font-size: 1.1rem;
}

.experience-card .btn {
    width: 100%;
}

.experience-all {
    background: linear-gradient(135deg, #0f1a2b, #1a2a3a);
    border-color: #0f1a2b;
}

.experience-all h3 {
    color: #fff;
}

.experience-all p {
    color: #b0c0d0;
}

.experience-all .job-count {
    color: #f47a20;
}

.experience-all .experience-icon {
    background: rgba(244, 122, 32, 0.15);
    color: #f47a20;
}

.experience-all:hover .experience-icon {
    background: #f47a20;
    color: #fff;
}

/* ============================================================ */
/* HOW IT WORKS */
/* ============================================================ */
.how-it-works {
    padding: 70px 0;
    background: #f4f6f9;
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.step {
    text-align: center;
    padding: 30px 20px;
    background: #fff;
    border-radius: 16px;
    position: relative;
    transition: all 0.3s ease;
}

.step:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.step .step-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 35px;
    background: #f47a20;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
}

.step-icon {
    width: 65px;
    height: 65px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto 15px;
    font-size: 1.6rem;
    color: #f47a20;
}

.step h3 {
    font-size: 1.1rem;
    color: #0f1a2b;
    margin-bottom: 8px;
}

.step p {
    color: #666;
    font-size: 0.95rem;
}

/* ============================================================ */
/* EMPLOYER SECTION */
/* ============================================================ */
.employer-section {
    padding: 70px 0;
    background: #fff;
}

.employer-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.employer-image img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.employer-text .section-tag {
    margin-bottom: 12px;
}

.employer-text h2 {
    font-size: 2.4rem;
    color: #0f1a2b;
    margin-bottom: 18px;
    font-weight: 800;
}

.employer-text h2 span {
    color: #f47a20;
}

.employer-text p {
    color: #555;
    margin-bottom: 20px;
    line-height: 1.8;
}

.employer-benefits {
    margin-bottom: 25px;
}

.employer-benefits li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    color: #555;
}

.employer-benefits li i {
    color: #f47a20;
    font-size: 1.1rem;
}

.employer-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.employer-buttons .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* ============================================================ */
/* TESTIMONIALS */
/* ============================================================ */
.testimonials {
    padding: 70px 0;
    background: #f4f6f9;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.testimonial-card {
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.testimonial-stars {
    color: #f47a20;
    margin-bottom: 15px;
}

.testimonial-stars i {
    margin-right: 3px;
}

.testimonial-card p {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.7;
    margin-bottom: 20px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.testimonial-author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-author h4 {
    font-size: 1rem;
    color: #0f1a2b;
}

.testimonial-author span {
    font-size: 0.85rem;
    color: #888;
}

/* ============================================================ */
/* PARTNERS */
/* ============================================================ */
.partners {
    padding: 60px 0;
    background: #fff;
}

.partner-logos {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
    align-items: center;
}

.partner-item {
    text-align: center;
    transition: all 0.3s ease;
}

.partner-item:hover {
    transform: scale(1.05);
}

.partner-logo-placeholder {
    width: 80px;
    height: 80px;
    background: rgba(244, 122, 32, 0.06);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 2rem;
    color: #f47a20;
    border: 1px solid rgba(244, 122, 32, 0.08);
}

.partner-item p {
    font-weight: 600;
    color: #0f1a2b;
    font-size: 0.95rem;
}

/* ============================================================ */
/* CTA SECTION */
/* ============================================================ */
.cta-section {
    padding: 70px 0;
    background: linear-gradient(135deg, #0f1a2b 0%, #1a2a3a 100%);
    color: #fff;
    text-align: center;
}

.cta-content h2 {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 15px;
}

.cta-content p {
    font-size: 1.1rem;
    opacity: 0.8;
    margin-bottom: 30px;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-buttons .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* ============================================================ */
/* FOOTER */
/* ============================================================ */
footer {
    background: #0a1420;
    color: #b8c5d4;
    padding: 45px 0 0;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.5fr 3fr;
    gap: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-brand .footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.footer-brand .footer-logo .logo-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
}

.footer-brand .footer-logo .logo-icon img {
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

.footer-brand .footer-logo span {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
}

.footer-brand .footer-logo span span {
    color: #f47a20;
}

.footer-brand p {
    font-size: 0.85rem;
    line-height: 1.8;
    margin-bottom: 18px;
    max-width: 300px;
    color: #8a9aa8;
}

.social-links {
    display: flex;
    gap: 10px;
}

.social-links a {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a9aa8;
    transition: all 0.3s ease;
    font-size: 0.85rem;
}

.social-links a:hover {
    background: #f47a20;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(244, 122, 32, 0.3);
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.footer-col h4 {
    color: #fff;
    font-size: 0.9rem;
    margin-bottom: 14px;
    font-weight: 600;
}

.footer-col ul li {
    margin-bottom: 8px;
}

.footer-col ul li a {
    color: #8a9aa8;
    font-size: 0.82rem;
    transition: all 0.3s ease;
}

.footer-col ul li a:hover {
    color: #f47a20;
    padding-left: 5px;
}

.footer-col ul li i {
    color: #f47a20;
    width: 18px;
    font-size: 0.85rem;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
    gap: 10px;
}

.footer-bottom p {
    font-size: 0.8rem;
    opacity: 0.6;
}

.footer-bottom-right {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.footer-bottom-right a {
    color: #8a9aa8;
    font-size: 0.8rem;
    transition: color 0.3s ease;
}

.footer-bottom-right a:hover {
    color: #f47a20;
}

.footer-bottom-right a i {
    margin-right: 4px;
}

/* ============================================================ */
/* BACK TO TOP */
/* ============================================================ */
#backToTop {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, #f47a20, #d96a18);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 999;
    display: none;
    box-shadow: 0 4px 25px rgba(244, 122, 32, 0.35);
}

#backToTop:hover {
    background: linear-gradient(135deg, #d96a18, #c95f10);
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 35px rgba(244, 122, 32, 0.45);
}

#backToTop.show {
    display: block;
}

/* ============================================================ */
/* PAGE STATS */
/* ============================================================ */
.page-stats {
    padding: 50px 0;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.page-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

.page-stat-item .page-stat-number {
    font-size: 1.5rem;
    font-weight: 900;
    color: #f47a20;
    line-height: 1;
}

.page-stat-item p {
    color: #555;
    font-weight: 500;
    margin-top: 8px;
}

.page-stat-item p i {
    color: #f47a20;
    margin-right: 6px;
}

/* ============================================================ */
/* HOW IT WORKS DETAILED */
/* ============================================================ */
.how-it-works-detailed {
    padding: 70px 0;
    background: #f4f6f9;
}

.steps-detailed {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}

.step-detailed {
    background: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.step-detailed:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.step-detailed-number {
    font-size: 2.5rem;
    font-weight: 900;
    color: rgba(244, 122, 32, 0.1);
    position: absolute;
    top: 10px;
    right: 20px;
    font-family: 'Inter', sans-serif;
}

.step-detailed-icon {
    width: 65px;
    height: 65px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.6rem;
    color: #f47a20;
    transition: all 0.3s ease;
}

.step-detailed:hover .step-detailed-icon {
    background: #f47a20;
    color: #fff;
}

.step-detailed h3 {
    font-size: 1.1rem;
    color: #0f1a2b;
    margin-bottom: 10px;
}

.step-detailed p {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.step-link {
    color: #f47a20;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.step-link:hover {
    gap: 12px;
    color: #d96a18;
}

/* ============================================================ */
/* BENEFITS SECTION */
/* ============================================================ */
.benefits-section {
    padding: 70px 0;
    background: #fff;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.benefit-card {
    padding: 30px 25px;
    background: #f8f9fc;
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.benefit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.06);
    border-color: #f47a20;
}

.benefit-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #f47a20;
}

.benefit-card h3 {
    font-size: 1rem;
    color: #0f1a2b;
    margin-bottom: 8px;
}

.benefit-card p {
    color: #666;
    font-size: 0.9rem;
}

/* ============================================================ */
/* TESTIMONIALS SIMPLE */
/* ============================================================ */
.testimonials-simple {
    padding: 70px 0;
    background: #f4f6f9;
}

.testimonials-simple-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.testimonial-simple-card {
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.testimonial-simple-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.testimonial-simple-stars {
    color: #f47a20;
    margin-bottom: 15px;
}

.testimonial-simple-stars i {
    margin-right: 3px;
}

.testimonial-simple-card p {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.7;
    margin-bottom: 20px;
}

.testimonial-simple-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.testimonial-simple-author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-simple-author h4 {
    font-size: 1rem;
    color: #0f1a2b;
}

.testimonial-simple-author span {
    font-size: 0.85rem;
    color: #888;
}

/* ============================================================ */
/* CTA SECTION SIMPLE */
/* ============================================================ */
.cta-section-simple {
    padding: 60px 0;
    background: linear-gradient(135deg, #0f1a2b 0%, #1a2a3a 100%);
    color: #fff;
    text-align: center;
}

.cta-simple-content h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 15px;
}

.cta-simple-content h2 span {
    color: #f47a20;
}

.cta-simple-content p {
    font-size: 1.05rem;
    opacity: 0.8;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-simple-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-simple-buttons .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* ============================================================ */
/* EMPLOYER BENEFITS */
/* ============================================================ */
.employer-benefit-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #f47a20;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    margin-top: 5px;
    text-decoration: none;
}

.employer-benefit-link:hover {
    gap: 14px;
    color: #d96a18;
}

.employer-benefit-link i {
    transition: transform 0.3s ease;
}

.employer-benefit-link:hover i {
    transform: translateX(4px);
}

.employer-benefits-section {
    padding: 70px 0;
    background: #fff;
}

.employer-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.employer-benefit-card {
    padding: 30px 25px;
    background: #f8f9fc;
    border-radius: 16px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #eee;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.employer-benefit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #f47a20, #d96a18);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.employer-benefit-card:hover::before {
    transform: scaleX(1);
}

.employer-benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.employer-benefit-icon {
    width: 65px;
    height: 65px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.6rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.employer-benefit-card:hover .employer-benefit-icon {
    background: #f47a20;
    color: #fff;
    transform: scale(1.1);
}

.employer-benefit-card h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 10px;
}

.employer-benefit-card p {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.employer-benefit-hover {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #f47a20;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.employer-benefit-card:hover .employer-benefit-hover {
    gap: 14px;
}

/* ============================================================ */
/* SAVE JOB BUTTON */
/* ============================================================ */
.save-job-btn {
    transition: all 0.3s ease !important;
    min-width: 80px;
}

.save-job-btn:hover {
    transform: scale(1.05);
}

.save-job-btn.btn-success {
    background: #22c55e !important;
    color: #fff !important;
    border-color: #22c55e !important;
}

.save-job-btn.btn-success:hover {
    background: #16a34a !important;
    border-color: #16a34a !important;
}

/* ============================================================ */
/* NOTIFICATION ANIMATIONS */
/* ============================================================ */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100px);
    }
}

/* ============================================================ */
/* SAVED JOBS - Dashboard Enhanced */
/* ============================================================ */
.saved-job-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #f0f2f5;
    transition: all 0.3s ease;
}

.saved-job-item:last-child {
    border-bottom: none;
}

.saved-job-item:hover {
    background: #f8f9fc;
    margin: 0 -10px;
    padding: 14px 10px;
    border-radius: 8px;
}

.saved-job-item .job-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #0f1a2b;
    flex: 1;
}

.saved-job-item .job-title small {
    display: block;
    font-weight: 400;
    color: #6b7a8a;
    font-size: 0.78rem;
    margin-top: 2px;
}

.saved-job-item .saved-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.saved-job-item .saved-actions .btn {
    font-size: 0.7rem;
    padding: 4px 10px;
    min-width: 36px;
    justify-content: center;
}

.saved-job-item .saved-actions .btn-success {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
}

.saved-job-item .saved-actions .btn-success:hover {
    background: #16a34a;
    border-color: #16a34a;
}

.saved-job-item .saved-actions .btn-outline-primary {
    border-color: #f47a20;
    color: #f47a20;
}

.saved-job-item .saved-actions .btn-outline-primary:hover {
    background: #f47a20;
    color: #fff;
}

.saved-job-item .saved-actions .btn-outline-danger {
    border-color: #dc2626;
    color: #dc2626;
}

.saved-job-item .saved-actions .btn-outline-danger:hover {
    background: #dc2626;
    color: #fff;
}

/* Saved Jobs Badge */
#savedJobsCountBadge {
    background: #f47a20;
    color: #fff;
    border-radius: 50%;
    padding: 0 8px;
    font-size: 0.7rem;
    margin-left: 8px;
    display: inline-block;
    min-width: 20px;
    text-align: center;
}

/* ============================================================ */
/* EMPLOYER STEPS */
/* ============================================================ */
.employer-steps-section {
    padding: 70px 0;
    background: #f4f6f9;
}

.employer-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.employer-step {
    background: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    text-align: center;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #eee;
}

.employer-step:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.employer-step-number {
    font-size: 2.8rem;
    font-weight: 900;
    color: rgba(244, 122, 32, 0.08);
    position: absolute;
    top: 5px;
    right: 20px;
}

.employer-step-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.employer-step:hover .employer-step-icon {
    background: #f47a20;
    color: #fff;
    transform: scale(1.05) rotate(-5deg);
}

.employer-step h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 8px;
}

.employer-step p {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.employer-step-link {
    color: #f47a20;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.employer-step-link:hover {
    gap: 12px;
    color: #d96a18;
}

/* ============================================================ */
/* EMPLOYER TESTIMONIALS */
/* ============================================================ */
.employer-testimonials {
    padding: 70px 0;
    background: #fff;
}

.employer-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.employer-testimonial-card {
    background: #f8f9fc;
    padding: 30px;
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #eee;
}

.employer-testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    border-color: #f47a20;
}

.employer-testimonial-stars {
    color: #f47a20;
    margin-bottom: 15px;
}

.employer-testimonial-stars i {
    margin-right: 3px;
}

.employer-testimonial-card p {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.7;
    margin-bottom: 20px;
}

.employer-testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.employer-testimonial-author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.employer-testimonial-author h4 {
    font-size: 1rem;
    color: #0f1a2b;
}

.employer-testimonial-author span {
    font-size: 0.82rem;
    color: #888;
}

/* ============================================================ */
/* POST JOB SECTION */
/* ============================================================ */
.post-job-section {
    padding: 70px 0;
    background: #f4f6f9;
}

.post-job-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.post-job-text .post-job-badge {
    display: inline-block;
    background: rgba(244, 122, 32, 0.1);
    color: #f47a20;
    padding: 4px 18px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.post-job-text h2 {
    font-size: 2.4rem;
    color: #0f1a2b;
    margin-bottom: 15px;
    font-weight: 800;
}

.post-job-text h2 span {
    color: #f47a20;
}

.post-job-text > p {
    color: #555;
    font-size: 0.95rem;
    margin-bottom: 25px;
    max-width: 480px;
}

.post-job-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 30px;
}

.post-job-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #444;
    font-size: 0.9rem;
}

.post-job-feature i {
    color: #f47a20;
    font-size: 1rem;
}

.post-job-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.post-job-buttons .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.post-job-image {
    position: relative;
}

.post-job-image img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.post-job-pulse {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 26, 43, 0.9);
    backdrop-filter: blur(10px);
    padding: 12px 24px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.pulse-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #4ade80;
    display: inline-block;
    animation: pulse-dot 1.5s infinite;
}

@keyframes pulse-dot {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

/* ============================================================ */
/* CAREERS PAGE — Unique Styles */
/* ============================================================ */
.careers-hero {
    padding: 72px 0 18px;
    min-height: 360px;
}

.careers-hero .page-hero-bg img {
    object-position: center 60%;
}

.careers-hero .page-hero-content {
    gap: 18px;
    min-height: 260px;
    align-items: center;
}

.careers-hero .page-hero-image img {
    max-width: 360px;
    max-height: 260px;
    object-fit: cover;
}

.careers-hero .page-hero-text h1 {
    font-size: clamp(1.8rem, 2.4vw, 2.5rem);
    line-height: 1.15;
}

/* ============================================================ */
/* CAREERS STATS */
/* ============================================================ */
.careers-stats {
    padding: 40px 0;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.careers-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

.careers-stat-item .careers-stat-number {
    font-size: 1.5rem;
    font-weight: 900;
    color: #f47a20;
    line-height: 1;
}

.careers-stat-item p {
    color: #555;
    font-weight: 500;
    margin-top: 8px;
}

.careers-stat-item p i {
    color: #f47a20;
    margin-right: 6px;
}

/* ============================================================ */
/* JOB LISTINGS */
/* ============================================================ */
.job-listings-section {
    padding: 50px 0 70px;
    background: #f4f6f9;
}

.job-listings-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.job-listings-title .section-tag {
    margin-bottom: 8px;
}

.job-listings-title h2 {
    font-size: 2rem;
    color: #0f1a2b;
    font-weight: 800;
}

.job-listings-title h2 span {
    color: #f47a20;
}

.job-listings-title p {
    color: #6b7a8a;
    font-size: 0.95rem;
}

.job-listings-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.search-box-mini {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 50px;
    padding: 8px 16px;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
}

.search-box-mini:focus-within {
    border-color: #f47a20;
    box-shadow: 0 0 0 3px rgba(244, 122, 32, 0.1);
}

.search-box-mini i {
    color: #999;
    margin-right: 10px;
}

.search-box-mini input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    width: 180px;
}

.sort-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    padding: 8px 16px;
    border-radius: 50px;
    border: 1px solid #ddd;
}

.sort-box i {
    color: #999;
}

.sort-box select {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    color: #333;
}

/* Filter Tabs */
.filter-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.filter-tab {
    padding: 8px 20px;
    border-radius: 50px;
    border: 1px solid #ddd;
    background: #fff;
    color: #666;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.filter-tab:hover {
    border-color: #f47a20;
    color: #f47a20;
}

.filter-tab.active {
    background: #f47a20;
    color: #fff;
    border-color: #f47a20;
}

.filter-tab i {
    margin-right: 6px;
}

/* Job Listings Grid */
.job-listings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.job-listings-grid .job-card {
    background: #fff;
    padding: 22px 25px;
    border-radius: 12px;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.job-listings-grid .job-card:hover {
    border-color: #f47a20;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transform: translateX(4px);
}

.job-listings-grid .job-card .job-info {
    flex: 1;
}

.job-listings-grid .job-card .job-tag {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 50px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(244, 122, 32, 0.1);
    color: #f47a20;
    margin-bottom: 6px;
}

.job-listings-grid .job-card h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 4px;
}

.job-listings-grid .job-card h3 a {
    color: #0f1a2b;
    transition: color 0.3s ease;
}

.job-listings-grid .job-card h3 a:hover {
    color: #f47a20;
}

.job-listings-grid .job-card .company {
    color: #666;
    font-size: 0.9rem;
}

.job-listings-grid .job-card .company i {
    color: #f47a20;
    width: 16px;
}

.job-listings-grid .job-card .location {
    color: #888;
    font-size: 0.85rem;
    margin-top: 4px;
}

.job-listings-grid .job-card .location i {
    color: #f47a20;
    width: 16px;
}

.job-listings-grid .job-card .job-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.job-listings-grid .job-card .job-meta .job-posted {
    color: #999;
    font-size: 0.75rem;
}

.job-listings-grid .job-card .job-meta .job-posted i {
    color: #f47a20;
    margin-right: 3px;
}

.job-listings-grid .job-card .job-meta .job-experience {
    color: #8a9aa8;
    font-size: 0.75rem;
}

.job-listings-grid .job-card .job-meta .job-experience i {
    color: #f47a20;
    margin-right: 3px;
}

.job-listings-grid .job-card .job-actions .btn {
    font-size: 0.8rem;
    padding: 6px 18px;
    white-space: nowrap;
}

/* ============================================================ */
/* CAREER TIPS / BLOG */
/* ============================================================ */
.career-tips-section {
    padding: 70px 0;
    background: #fff;
}

.career-tips-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.career-tip-card {
    background: #f8f9fc;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s ease;
    border: 1px solid #eee;
}

.career-tip-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.career-tip-image {
    position: relative;
    overflow: hidden;
    height: 180px;
}

.career-tip-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.career-tip-card:hover .career-tip-image img {
    transform: scale(1.05);
}

.career-tip-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #f47a20;
    color: #fff;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.career-tip-body {
    padding: 20px 22px 25px;
}

.career-tip-body h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 8px;
}

.career-tip-body p {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 15px;
    line-height: 1.6;
}

.career-tip-link {
    color: #f47a20;
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.career-tip-link:hover {
    gap: 12px;
    color: #d96a18;
}

/* ============================================================ */
/* PARTNERS PAGE */
/* ============================================================ */
.partners-hero .page-hero-bg img {
    object-position: center 40%;
}

/* ============================================================ */
/* PARTNER STATS */
/* ============================================================ */
.partner-stats {
    padding: 40px 0;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.partner-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

.partner-stat-item .partner-stat-number {
    font-size: 1.5rem;
    font-weight: 900;
    color: #f47a20;
    line-height: 1;
}

.partner-stat-item p {
    color: #555;
    font-weight: 500;
    margin-top: 8px;
}

.partner-stat-item p i {
    color: #f47a20;
    margin-right: 6px;
}

/* ============================================================ */
/* RESET PASSWORD PAGE */
/* ============================================================ */
.reset-password-page {
    padding: 120px 0 60px;
    background: #f4f6f9;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.reset-password-card {
    background: #fff;
    border-radius: 20px;
    padding: 45px 40px 40px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.08);
    border: 1px solid #eee;
}

.reset-password-card .password-requirements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 20px;
    margin-top: 10px;
    padding: 12px 16px;
    background: #f8f9fc;
    border-radius: 10px;
    border: 1px solid #e8ecf0;
}

.reset-password-card .password-requirements .req-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #8a9aa8;
    transition: all 0.3s ease;
}

.reset-password-card .password-requirements .req-item i {
    font-size: 0.7rem;
    width: 16px;
    color: #ccc;
    transition: all 0.3s ease;
}

.reset-password-card .password-requirements .req-item.met {
    color: #22c55e;
}

.reset-password-card .password-requirements .req-item.met i {
    color: #22c55e;
}

.reset-password-card .password-requirements .req-item.failed {
    color: #dc2626;
}

.reset-password-card .password-requirements .req-item.failed i {
    color: #dc2626;
}

.reset-password-card .form-error {
    display: none;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 10px 14px;
    margin-top: 8px;
    color: #991b1b;
    font-size: 0.85rem;
    animation: slideDown 0.3s ease;
}

.reset-password-card .form-error.show {
    display: block;
}

.reset-password-card .form-error i {
    margin-right: 8px;
    color: #dc2626;
}

#resetInfo {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    color: #166534;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

#resetInfo i {
    color: #22c55e;
    font-size: 1.1rem;
}

#resetError {
    display: none;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    color: #991b1b;
    font-size: 0.85rem;
    animation: slideDown 0.3s ease;
}

#resetError.show {
    display: block;
}

#resetError i {
    color: #dc2626;
    margin-right: 8px;
}

/* ============================================================ */
/* PASSWORD INPUT - Success/Error States */
/* ============================================================ */
.input-wrapper.error input,
.input-wrapper.error select {
    border-color: #dc2626 !important;
    background: #fef2f2 !important;
}

.input-wrapper.error i {
    color: #dc2626 !important;
}

.input-wrapper.success input,
.input-wrapper.success select {
    border-color: #22c55e !important;
    background: #f0fdf4 !important;
}

.input-wrapper.success i {
    color: #22c55e !important;
}

/* ============================================================ */
/* PASSWORD REQUIREMENTS - Animation */
/* ============================================================ */
.password-requirements .req-item {
    transition: all 0.3s ease;
}

.password-requirements .req-item i {
    transition: all 0.3s ease;
}

.password-requirements .req-item.met {
    animation: checkPop 0.3s ease;
}

@keyframes checkPop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* ============================================================ */
/* RESPONSIVE - Password Requirements */
/* ============================================================ */
@media (max-width: 480px) {
    .password-requirements {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 10px 12px;
    }
    
    .password-requirements .req-item {
        font-size: 0.7rem;
    }
}

/* Responsive */
@media (max-width: 480px) {
    .reset-password-card {
        padding: 25px 20px;
    }
    
    .reset-password-card .password-requirements {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* ============================================================ */
/* PARTNER LIST */
/* ============================================================ */
.partner-list-section {
    padding: 70px 0;
    background: #f4f6f9;
}

.partner-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.partner-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid #eee;
}

.partner-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
    border-color: #f47a20;
}

.partner-card-image {
    padding: 40px 20px;
    text-align: center;
    background: linear-gradient(135deg, #f8f9fc, #fff);
    border-bottom: 1px solid #eee;
    position: relative;
}

.partner-logo-large {
    width: 100px;
    height: 100px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 3rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.partner-card:hover .partner-logo-large {
    background: #f47a20;
    color: #fff;
    transform: scale(1.05);
}

.partner-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(244, 122, 32, 0.1);
    color: #f47a20;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.partner-card-body {
    padding: 25px;
}

.partner-card-body h3 {
    font-size: 1.3rem;
    color: #0f1a2b;
    font-weight: 700;
}

.partner-tagline {
    color: #f47a20;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 12px;
}

.partner-description {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 18px;
}

.partner-details {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.partner-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #666;
}

.partner-detail i {
    color: #f47a20;
    font-size: 0.8rem;
}

.partner-card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.partner-card-actions .btn {
    flex: 1;
    justify-content: center;
}

/* ============================================================ */
/* WHY PARTNER WITH US */
/* ============================================================ */
.why-partner-section {
    padding: 70px 0;
    background: #fff;
}

.why-partner-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.why-partner-card {
    padding: 30px 25px;
    background: #f8f9fc;
    border-radius: 16px;
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid #eee;
}

.why-partner-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.06);
    border-color: #f47a20;
}

.why-partner-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.why-partner-card:hover .why-partner-icon {
    background: #f47a20;
    color: #fff;
    transform: scale(1.05);
}

.why-partner-card h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 8px;
}

.why-partner-card p {
    color: #666;
    font-size: 0.9rem;
}

/* ============================================================ */
/* BECOME A PARTNER */
/* ============================================================ */
.become-partner-section {
    padding: 70px 0;
    background: #f4f6f9;
}

.become-partner-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.become-partner-text .become-partner-badge {
    display: inline-block;
    background: rgba(244, 122, 32, 0.1);
    color: #f47a20;
    padding: 4px 18px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.become-partner-text h2 {
    font-size: 2.4rem;
    color: #0f1a2b;
    margin-bottom: 15px;
    font-weight: 800;
}

.become-partner-text h2 span {
    color: #f47a20;
}

.become-partner-text p {
    color: #555;
    font-size: 0.95rem;
    margin-bottom: 25px;
    max-width: 480px;
}

.become-partner-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 30px;
}

.become-partner-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #444;
    font-size: 0.9rem;
}

.become-partner-features li i {
    color: #f47a20;
    font-size: 1rem;
}

.become-partner-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.become-partner-buttons .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.become-partner-image img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

/* ============================================================ */
/* PARTNER TESTIMONIALS */
/* ============================================================ */
.partner-testimonials {
    padding: 70px 0;
    background: #fff;
}

.partner-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.partner-testimonial-card {
    background: #f8f9fc;
    padding: 30px;
    border-radius: 16px;
    transition: all 0.4s ease;
    border: 1px solid #eee;
}

.partner-testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    border-color: #f47a20;
}

.partner-testimonial-stars {
    color: #f47a20;
    margin-bottom: 15px;
}

.partner-testimonial-stars i {
    margin-right: 3px;
}

.partner-testimonial-card p {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.7;
    margin-bottom: 20px;
}

.partner-testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.partner-testimonial-author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.partner-testimonial-author h4 {
    font-size: 1rem;
    color: #0f1a2b;
}

.partner-testimonial-author span {
    font-size: 0.82rem;
    color: #888;
}

/* ============================================================ */
/* CREATE ACCOUNT PAGE — Unique Styles */
/* ============================================================ */
.account-hero .page-hero-bg img {
    object-position: center 50%;
}

/* ============================================================ */
/* REGISTRATION SECTION */
/* ============================================================ */
.registration-section {
    padding: 60px 0 80px;
    background: #f4f6f9;
}

.registration-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: start;
}

/* Registration Info */
.registration-info {
    background: #fff;
    border-radius: 16px;
    padding: 35px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid #eee;
    position: sticky;
    top: 100px;
}

.registration-info-content .section-tag {
    margin-bottom: 12px;
}

.registration-info-content h2 {
    font-size: 1.8rem;
    color: #0f1a2b;
    margin-bottom: 15px;
    font-weight: 800;
}

.registration-info-content h2 span {
    color: #f47a20;
}

.registration-info-content > p {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 25px;
}

.registration-benefits {
    display: grid;
    gap: 16px;
    margin-bottom: 30px;
}

.registration-benefit {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 16px;
    background: #f8f9fc;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.registration-benefit:hover {
    background: rgba(244, 122, 32, 0.05);
    transform: translateX(4px);
}

.registration-benefit-icon {
    width: 40px;
    height: 40px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f47a20;
    flex-shrink: 0;
}

.registration-benefit h4 {
    font-size: 0.95rem;
    color: #0f1a2b;
    margin-bottom: 2px;
}

.registration-benefit p {
    font-size: 0.85rem;
    color: #666;
}

/* Registration Testimonial */
.registration-testimonial {
    background: #f8f9fc;
    padding: 20px 25px;
    border-radius: 12px;
    border-left: 4px solid #f47a20;
}

.registration-testimonial-stars {
    color: #f47a20;
    margin-bottom: 8px;
}

.registration-testimonial-stars i {
    margin-right: 2px;
    font-size: 0.85rem;
}

.registration-testimonial p {
    font-size: 0.9rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 12px;
}

.registration-testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.registration-testimonial-author img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.registration-testimonial-author h4 {
    font-size: 0.9rem;
    color: #0f1a2b;
}

.registration-testimonial-author span {
    font-size: 0.78rem;
    color: #888;
}

/* ============================================================ */
/* REGISTRATION FORM */
/* ============================================================ */
.registration-form-wrapper {
    background: #fff;
    border-radius: 16px;
    padding: 35px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid #eee;
}

.registration-form-header {
    text-align: center;
    margin-bottom: 30px;
}

.registration-form-header h3 {
    font-size: 1.5rem;
    color: #0f1a2b;
    font-weight: 700;
}

.registration-form-header p {
    color: #666;
    font-size: 0.9rem;
}

/* Form Progress */
.form-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 30px;
}

.form-progress-step {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.form-progress-step .step-number {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #e8ecf0;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    transition: all 0.4s ease;
}

.form-progress-step.active .step-number {
    background: #f47a20;
    color: #fff;
}

.form-progress-step.completed .step-number {
    background: #28a745;
    color: #fff;
}

.form-progress-step .step-label {
    font-size: 0.8rem;
    color: #999;
    font-weight: 500;
    transition: color 0.3s ease;
}

.form-progress-step.active .step-label {
    color: #0f1a2b;
}

.form-progress-line {
    flex: 1;
    height: 2px;
    background: #e8ecf0;
    margin: 0 10px;
    max-width: 60px;
}

/* Form Steps */
.form-step {
    display: none;
    animation: fadeIn 0.4s ease;
}

.form-step.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form Groups */
.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: #333;
    margin-bottom: 5px;
}

.form-group .required {
    color: #dc3545;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper i {
    position: absolute;
    left: 14px;
    color: #999;
    font-size: 0.9rem;
}

.input-wrapper input,
.input-wrapper select {
    width: 100%;
    padding: 12px 14px 12px 42px;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
    background: #f8f9fc;
    color: #333;
}

.input-wrapper input:focus,
.input-wrapper select:focus {
    outline: none;
    border-color: #f47a20;
    box-shadow: 0 0 0 3px rgba(244, 122, 32, 0.1);
    background: #fff;
}

.input-wrapper input.error {
    border-color: #dc3545;
}

.input-wrapper .toggle-password {
    position: absolute;
    right: 14px;
    left: auto;
    color: #999;
    cursor: pointer;
    transition: color 0.3s ease;
}

.input-wrapper .toggle-password:hover {
    color: #f47a20;
}

/* File Upload */
.file-upload-wrapper {
    position: relative;
    cursor: pointer;
}

.file-upload-wrapper input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.file-upload-wrapper .file-name {
    padding-left: 14px;
    color: #999;
    font-size: 0.85rem;
}

/* Password Strength */
.password-strength {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.password-strength .strength-bar {
    flex: 1;
    height: 4px;
    background: #e8ecf0;
    border-radius: 3px;
    overflow: hidden;
}

.password-strength .strength-bar::after {
    content: '';
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.password-strength .strength-text {
    font-size: 0.75rem;
    color: #999;
    font-weight: 500;
    min-width: 40px;
}

/* Checkbox */
.checkbox-group {
    margin-bottom: 12px;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #444;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #f47a20;
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-label a {
    color: #f47a20;
    font-weight: 500;
}

.checkbox-label a:hover {
    text-decoration: underline;
}

/* Form Navigation */
.form-navigation {
    display: flex;
    gap: 15px;
    justify-content: space-between;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.form-navigation .btn {
    min-width: 120px;
    justify-content: center;
}

/* Form Footer */
.registration-form-footer {
    text-align: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.registration-form-footer p {
    font-size: 0.9rem;
    color: #666;
}

.registration-form-footer p a {
    color: #f47a20;
    font-weight: 600;
}

.registration-form-footer p a:hover {
    text-decoration: underline;
}

.registration-form-footer .form-note {
    font-size: 0.78rem;
    color: #999;
    margin-top: 8px;
}

/* Form Hints */
.form-hint {
    font-size: 0.75rem;
    color: #999;
    margin-top: 4px;
}

/* ============================================================ */
/* SUCCESS MODAL */
/* ============================================================ */
.success-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.success-modal.show {
    display: flex;
}

.success-modal-content {
    background: #fff;
    border-radius: 20px;
    padding: 50px 40px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    animation: modalIn 0.5s ease;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.success-modal-icon {
    width: 80px;
    height: 80px;
    background: rgba(40, 167, 69, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 3rem;
    color: #28a745;
}

.success-modal-content h2 {
    font-size: 1.5rem;
    color: #0f1a2b;
    margin-bottom: 10px;
}

.success-modal-content p {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 25px;
}

.success-modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.success-modal-buttons .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.success-modal-note {
    font-size: 0.8rem;
    color: #999;
    margin-top: 20px !important;
    margin-bottom: 0 !important;
}

/* ============================================================ */
/* ERROR MESSAGES */
/* ============================================================ */
.form-error {
    display: none;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 8px;
    color: #991b1b;
    font-size: 0.85rem;
    line-height: 1.5;
    animation: slideDown 0.3s ease;
}

.form-error.show {
    display: block;
}

.form-error i {
    color: #dc2626;
    margin-right: 8px;
}

.form-error ul {
    list-style: none;
    padding: 0;
    margin: 5px 0 0 0;
}

.form-error ul li {
    padding: 3px 0 3px 24px;
    position: relative;
    font-size: 0.82rem;
}

.form-error ul li::before {
    content: '•';
    position: absolute;
    left: 4px;
    color: #dc2626;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================ */
/* SUCCESS MESSAGE */
/* ============================================================ */
.form-success {
    display: none;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 14px 18px;
    margin-top: 8px;
    color: #166534;
    font-size: 0.85rem;
    animation: slideDown 0.3s ease;
}

.form-success.show {
    display: block;
}

.form-success i {
    color: #22c55e;
    margin-right: 8px;
}

/* ============================================================ */
/* INPUT ERROR STATE */
/* ============================================================ */
.input-wrapper.error input,
.input-wrapper.error select {
    border-color: #dc2626;
    background: #fef2f2;
}

.input-wrapper.error i {
    color: #dc2626;
}

.input-wrapper.success input,
.input-wrapper.success select {
    border-color: #22c55e;
    background: #f0fdf4;
}

.input-wrapper.success i {
    color: #22c55e;
}

/* ============================================================ */
/* PASSWORD REQUIREMENTS */
/* ============================================================ */
.password-requirements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 20px;
    margin-top: 10px;
    padding: 12px 16px;
    background: #f8f9fc;
    border-radius: 10px;
    border: 1px solid #e8ecf0;
}

.password-requirements .req-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #8a9aa8;
    transition: all 0.3s ease;
}

.password-requirements .req-item i {
    font-size: 0.7rem;
    width: 16px;
    color: #ccc;
    transition: all 0.3s ease;
}

.password-requirements .req-item.met {
    color: #22c55e;
}

.password-requirements .req-item.met i {
    color: #22c55e;
}

.password-requirements .req-item.failed {
    color: #dc2626;
}

.password-requirements .req-item.failed i {
    color: #dc2626;
}

/* ============================================================ */
/* FILE UPLOAD — Enhanced */
/* ============================================================ */
.file-upload-area {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    background: #fafafa;
    position: relative;
}

.file-upload-area:hover {
    border-color: #f47a20;
    background: #fefaf5;
}

.file-upload-area.dragover {
    border-color: #f47a20;
    background: #fefaf5;
}

.file-upload-area .upload-icon {
    font-size: 2.5rem;
    color: #f47a20;
    margin-bottom: 10px;
}

.file-upload-area .upload-text {
    font-size: 0.95rem;
    color: #4a5a6a;
}

.file-upload-area .upload-subtext {
    font-size: 0.8rem;
    color: #8a9aa8;
    margin-top: 4px;
}

.file-upload-area .file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-upload-area.has-file {
    border-color: #22c55e;
    background: #f0fdf4;
}

.file-upload-area .file-info {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e8ecf0;
    margin-top: 15px;
}

.file-upload-area.has-file .file-info {
    display: flex;
}

.file-upload-area.has-file .upload-icon,
.file-upload-area.has-file .upload-text,
.file-upload-area.has-file .upload-subtext {
    display: none;
}

.file-info .file-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #0f1a2b;
}

.file-info .file-name i {
    color: #22c55e;
    font-size: 1.1rem;
}

.file-info .file-remove {
    background: none;
    border: none;
    color: #dc2626;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 4px 10px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.file-info .file-remove:hover {
    background: #fef2f2;
}

/* ============================================================ */
/* COVER LETTER UPLOAD */
/* ============================================================ */
.cover-letter-area {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    background: #fafafa;
    position: relative;
}

.cover-letter-area:hover {
    border-color: #f47a20;
    background: #fefaf5;
}

.cover-letter-area .cover-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.cover-letter-area.has-file {
    border-color: #22c55e;
    background: #f0fdf4;
}

.cover-letter-area .cover-info {
    display: none;
    align-items: center;
    justify-content: space-between;
}

.cover-letter-area.has-file .cover-info {
    display: flex;
}

.cover-letter-area.has-file .upload-text {
    display: none;
}

.cover-info .file-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #0f1a2b;
}

.cover-info .file-name i {
    color: #22c55e;
}

.cover-info .file-remove {
    background: none;
    border: none;
    color: #dc2626;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 4px 10px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.cover-info .file-remove:hover {
    background: #fef2f2;
}

/* ============================================================ */
/* RELEVANT DOCUMENTS UPLOAD */
/* ============================================================ */
.document-letter-area {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    background: #fafafa;
    position: relative;
}

.document-letter-area:hover {
    border-color: #f47a20;
    background: #fefaf5;
}

.document-letter-area .upload-icon {
    font-size: 2.5rem;
    color: #f47a20;
    margin-bottom: 10px;
}

.document-letter-area .upload-text {
    font-size: 0.95rem;
    color: #4a5a6a;
}

.document-letter-area .upload-subtext {
    font-size: 0.8rem;
    color: #8a9aa8;
    margin-top: 4px;
}

.document-letter-area .file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

.document-letter-area.has-file {
    border-color: #22c55e;
    background: #f0fdf4;
}

.document-letter-area .file-info {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e8ecf0;
    margin-top: 15px;
}

.document-letter-area.has-file .file-info {
    display: flex;
}

.document-letter-area.has-file .upload-icon,
.document-letter-area.has-file .upload-text,
.document-letter-area.has-file .upload-subtext {
    display: none;
}

.file-info .file-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #0f1a2b;
}

.file-info .file-name i {
    color: #22c55e;
    font-size: 1.1rem;
}

.file-info .file-remove {
    background: none;
    border: none;
    color: #dc2626;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 4px 10px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.file-info .file-remove:hover {
    background: #fef2f2;
}

.file-error {
    display: none;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 10px 14px;
    margin-top: 8px;
    color: #991b1b;
    font-size: 0.85rem;
}

.file-error.show {
    display: block;
}

.file-error i {
    margin-right: 8px;
    color: #dc2626;
}

/* ============================================================ */
/* SUCCESS MODAL — Hand-Crafted */
/* ============================================================ */
.success-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 26, 43, 0.6);
    backdrop-filter: blur(12px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.success-modal.show {
    display: flex;
}

.success-modal-content {
    background: #fff;
    border-radius: 24px;
    padding: 50px 45px 40px;
    max-width: 480px;
    width: 100%;
    text-align: center;
    animation: modalPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
}

@keyframes modalPop {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.success-modal-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    font-size: 2.8rem;
    color: #22c55e;
}

.success-modal-content h2 {
    font-size: 1.6rem;
    color: #0f1a2b;
    margin-bottom: 10px;
    font-weight: 700;
}

.success-modal-content p {
    color: #6b7a8a;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 28px;
}

.success-modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.success-modal-buttons .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    justify-content: center;
}

.success-modal-note {
    font-size: 0.8rem;
    color: #8a9aa8;
    margin-top: 20px !important;
    margin-bottom: 0 !important;
    padding-top: 16px;
    border-top: 1px solid #f0f2f5;
}

.success-modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    font-size: 1.4rem;
    color: #8a9aa8;
    cursor: pointer;
    transition: color 0.3s ease;
}

.success-modal-close:hover {
    color: #0f1a2b;
}

/* ============================================================ */
/* REGISTER PAGE — Styles */
/* ============================================================ */
.register-hero .page-hero-bg img {
    object-position: center 30%;
}

/* ============================================================ */
/* CONTACT PAGE — Styles */
/* ============================================================ */
.contact-hero .page-hero-bg img {
    object-position: center 40%;
}

/* ============================================================ */
/* CONTACT DETAILS */
/* ============================================================ */
.contact-details {
    padding: 70px 0;
    background: #f4f6f9;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.contact-card {
    background: #fff;
    padding: 35px 25px;
    border-radius: 16px;
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid #eee;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03);
}

.contact-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.contact-card-icon {
    width: 70px;
    height: 70px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 1.8rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.contact-card:hover .contact-card-icon {
    background: #f47a20;
    color: #fff;
}

.contact-card h3 {
    font-size: 1.2rem;
    color: #0f1a2b;
    margin-bottom: 12px;
    font-weight: 700;
}

.contact-card p {
    color: #6b7a8a;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 8px;
}

.contact-card .contact-address {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #4a5a6a;
}

.contact-card .contact-phone a,
.contact-card .contact-email a {
    color: #0f1a2b;
    font-weight: 600;
    font-size: 1.05rem;
    transition: color 0.3s ease;
}

.contact-card .contact-phone a:hover,
.contact-card .contact-email a:hover {
    color: #f47a20;
}

.contact-card .contact-hours,
.contact-card .contact-response,
.contact-card .contact-social-text {
    font-size: 0.85rem;
    color: #8a9aa8;
    margin-top: 4px;
}

.contact-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: #f47a20;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.contact-card-link:hover {
    gap: 14px;
    color: #d96a18;
}

/* Social Links */
.contact-social {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 15px 0 10px;
    flex-wrap: wrap;
}

.contact-social-link {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.contact-social-link:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* ============================================================ */
/* MAP SECTION */
/* ============================================================ */
.map-section {
    padding: 70px 0 60px;
    background: #fff;
}

.map-wrapper {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid #eee;
}

.map-wrapper iframe {
    width: 100%;
    height: 400px;
    border: none;
    display: block;
}

.map-overlay {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 26, 43, 0.9);
    backdrop-filter: blur(10px);
    padding: 14px 28px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.map-overlay-content {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.map-overlay-content i {
    color: #f47a20;
    font-size: 1.3rem;
}

.map-overlay-content p {
    font-weight: 600;
    font-size: 0.95rem;
}

.map-overlay-content span {
    font-size: 0.8rem;
    color: #b0c0d0;
}

/* Location Info */
.location-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.location-info-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: #f8f9fc;
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.location-info-item:hover {
    border-color: #f47a20;
    background: #fff;
}

.location-info-item i {
    font-size: 1.4rem;
    color: #f47a20;
    width: 30px;
}

.location-info-item h4 {
    font-size: 0.9rem;
    color: #0f1a2b;
    font-weight: 600;
}

.location-info-item p {
    font-size: 0.82rem;
    color: #6b7a8a;
}

/* ============================================================ */
/* ABOUT PAGE — Complete Styles */
/* ============================================================ */
.about-hero .page-hero-bg img {
    object-position: center 40%;
}

/* ============================================================ */
/* ABOUT STATS */
/* ============================================================ */
.about-stats {
    padding: 50px 0;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

.about-stat-item .about-stat-number {
    font-size: 1.5rem;
    font-weight: 900;
    color: #f47a20;
    line-height: 1;
}

.about-stat-item p {
    color: #555;
    font-weight: 500;
    margin-top: 8px;
}

.about-stat-item p i {
    color: #f47a20;
    margin-right: 6px;
}

/* ============================================================ */
/* OUR STORY */
/* ============================================================ */
.our-story {
    padding: 70px 0;
    background: #f4f6f9;
}

.our-story-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.our-story-text .section-tag {
    margin-bottom: 12px;
}

.our-story-text h2 {
    font-size: 2.4rem;
    color: #0f1a2b;
    margin-bottom: 18px;
    font-weight: 800;
}

.our-story-text h2 span {
    color: #f47a20;
}

.our-story-text p {
    color: #4a5a6a;
    line-height: 1.8;
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.our-story-highlights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 20px;
}

.highlight-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 16px;
    background: #fff;
    border-radius: 10px;
    border-left: 3px solid #f47a20;
}

.highlight-item i {
    color: #f47a20;
    font-size: 1.2rem;
    margin-top: 2px;
}

.highlight-item h4 {
    font-size: 0.9rem;
    color: #0f1a2b;
    font-weight: 600;
}

.highlight-item p {
    font-size: 0.8rem;
    color: #6b7a8a;
    margin-bottom: 0;
}

.our-story-image {
    position: relative;
}

.our-story-image img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.story-experience-badge {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(15, 26, 43, 0.9);
    backdrop-filter: blur(10px);
    padding: 18px 24px;
    border-radius: 14px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.story-experience-badge span {
    display: block;
    font-size: 2.5rem;
    font-weight: 900;
    color: #f47a20;
    line-height: 1;
}

.story-experience-badge p {
    color: #fff;
    font-size: 0.8rem;
    margin-top: 4px;
    line-height: 1.3;
}

/* ============================================================ */
/* MISSION & VISION */
/* ============================================================ */
.mission-vision-section {
    padding: 70px 0;
    background: #fff;
}

.mission-vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.mission-card,
.vision-card {
    padding: 40px 35px;
    border-radius: 16px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.mission-card {
    background: linear-gradient(135deg, #f8f9fc, #fff);
    border: 1px solid #eee;
}

.mission-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.06);
    border-color: #f47a20;
}

.vision-card {
    background: linear-gradient(135deg, #0f1a2b, #1a2a3a);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.vision-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}

.mission-icon,
.vision-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 1.6rem;
}

.mission-icon {
    background: rgba(244, 122, 32, 0.1);
    color: #f47a20;
}

.vision-icon {
    background: rgba(244, 122, 32, 0.15);
    color: #f47a20;
}

.mission-tag,
.vision-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 4px 16px;
    border-radius: 50px;
    margin-bottom: 12px;
}

.mission-tag {
    background: rgba(244, 122, 32, 0.1);
    color: #f47a20;
}

.vision-tag {
    background: rgba(244, 122, 32, 0.15);
    color: #f47a20;
}

.mission-card h2,
.vision-card h2 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 15px;
}

.mission-card h2 {
    color: #0f1a2b;
}

.vision-card h2 {
    color: #fff;
}

.mission-card p,
.vision-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.mission-card p {
    color: #4a5a6a;
}

.vision-card p {
    color: #b0c0d0;
}

.mission-list,
.vision-list {
    list-style: none;
    padding: 0;
}

.mission-list li,
.vision-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 0.9rem;
}

.mission-list li {
    color: #4a5a6a;
}

.vision-list li {
    color: #b0c0d0;
}

.mission-list li i,
.vision-list li i {
    color: #f47a20;
}

/* ============================================================ */
/* CORE VALUES */
/* ============================================================ */
.core-values {
    padding: 70px 0;
    background: #f4f6f9;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.value-card {
    background: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid #eee;
    position: relative;
    overflow: hidden;
}

.value-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #f47a20, #d96a18);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.value-card:hover::before {
    transform: scaleX(1);
}

.value-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.value-number {
    font-size: 2.8rem;
    font-weight: 900;
    color: rgba(244, 122, 32, 0.06);
    position: absolute;
    top: 5px;
    right: 15px;
}

.value-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.6rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.value-card:hover .value-icon {
    background: #f47a20;
    color: #fff;
}

.value-card h3 {
    font-size: 1.1rem;
    color: #0f1a2b;
    margin-bottom: 10px;
}

.value-card p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ============================================================ */
/* WHAT WE DO — SERVICES */
/* ============================================================ */
.what-we-do {
    padding: 70px 0;
    background: #fff;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.service-card {
    padding: 30px 25px;
    background: #f8f9fc;
    border-radius: 16px;
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid #eee;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.06);
    border-color: #f47a20;
}

.service-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.6rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.service-card:hover .service-icon {
    background: #f47a20;
    color: #fff;
}

.service-card h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 10px;
}

.service-card p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.service-link {
    color: #f47a20;
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.service-link:hover {
    gap: 12px;
    color: #d96a18;
}

/* ============================================================ */
/* TEAM SECTION */
/* ============================================================ */
.team-section {
    padding: 70px 0;
    background: #f4f6f9;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.team-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s ease;
    border: 1px solid #eee;
}

.team-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.team-image {
    position: relative;
    overflow: hidden;
    height: 220px;
}

.team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.team-card:hover .team-image img {
    transform: scale(1.05);
}

.team-social {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: linear-gradient(transparent, rgba(15, 26, 43, 0.7));
    display: flex;
    gap: 10px;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.team-card:hover .team-social {
    opacity: 1;
}

.team-social a {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all 0.3s ease;
}

.team-social a:hover {
    background: #f47a20;
    transform: translateY(-2px);
}

.team-info {
    padding: 20px 22px;
    text-align: center;
}

.team-info h4 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 2px;
}

.team-info span {
    font-size: 0.85rem;
    color: #f47a20;
    font-weight: 600;
}

.team-info p {
    font-size: 0.85rem;
    color: #6b7a8a;
    margin-top: 8px;
    line-height: 1.5;
}

/* ============================================================ */
/* ABOUT TESTIMONIALS */
/* ============================================================ */
.about-testimonials {
    padding: 70px 0;
    background: #fff;
}

.about-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.about-testimonial-card {
    background: #f8f9fc;
    padding: 30px;
    border-radius: 16px;
    transition: all 0.4s ease;
    border: 1px solid #eee;
}

.about-testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    border-color: #f47a20;
}

.about-testimonial-stars {
    color: #f47a20;
    margin-bottom: 15px;
}

.about-testimonial-stars i {
    margin-right: 2px;
}

.about-testimonial-card p {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.7;
    margin-bottom: 20px;
}

.about-testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.about-testimonial-author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.about-testimonial-author h4 {
    font-size: 1rem;
    color: #0f1a2b;
}

.about-testimonial-author span {
    font-size: 0.82rem;
    color: #888;
}

/* ============================================================ */
/* JOB DETAIL PAGE — Styles */
/* ============================================================ */
.job-detail-section {
    padding: 120px 0 70px;
    background: #f4f6f9;
}

.job-detail-wrapper {
    max-width: 850px;
    margin: 0 auto;
}

/* Back Button */
.back-to-jobs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6b7a8a;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    margin-bottom: 25px;
}

.back-to-jobs:hover {
    color: #f47a20;
    gap: 12px;
}

/* Job Detail Content */
.job-detail-content {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid #eee;
}

.job-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f2f5;
}

.job-detail-company {
    display: flex;
    align-items: center;
    gap: 18px;
}

.job-detail-company img {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    object-fit: cover;
    background: #f8f9fc;
    border: 1px solid #eee;
}

.job-detail-company h2 {
    font-size: 1.5rem;
    color: #0f1a2b;
    margin-bottom: 2px;
    font-weight: 700;
}

.job-detail-company p {
    color: #6b7a8a;
    font-size: 0.9rem;
}

.job-detail-company p i {
    color: #f47a20;
    margin-right: 4px;
}

.job-detail-apply-btn {
    flex-shrink: 0;
}

.job-detail-apply-btn .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Job Detail Meta */
.job-detail-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: 18px 0;
    border-bottom: 2px solid #f0f2f5;
}

.job-detail-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #4a5a6a;
}

.job-detail-meta span i {
    color: #f47a20;
    width: 16px;
    font-size: 0.85rem;
}

/* Job Detail Body */
.job-detail-body {
    padding-top: 25px;
}

.job-detail-section {
    margin-bottom: 30px;
}

.job-detail-section h3 {
    font-size: 1.1rem;
    color: #0f1a2b;
    margin-bottom: 12px;
    position: relative;
    padding-bottom: 10px;
    font-weight: 700;
}

.job-detail-section h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #f47a20, #d96a18);
    border-radius: 3px;
}

.job-detail-section p {
    color: #4a5a6a;
    line-height: 1.8;
    font-size: 0.95rem;
}

.job-detail-section ul {
    list-style: none;
    padding: 0;
}

.job-detail-section ul li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    color: #4a5a6a;
    font-size: 0.9rem;
    border-bottom: 1px solid #f4f6f9;
}

.job-detail-section ul li:last-child {
    border-bottom: none;
}

.job-detail-section ul li i {
    color: #f47a20;
    margin-top: 3px;
    flex-shrink: 0;
    font-size: 0.85rem;
}

/* Job Detail Actions */
.job-detail-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 25px;
    border-top: 2px solid #f0f2f5;
    margin-top: 5px;
}

.job-detail-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

/* Job Tags */
.job-tag-detail {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(244, 122, 32, 0.1);
    color: #f47a20;
    margin-bottom: 10px;
}

.job-tag-detail.urgent {
    background: #fef2f2;
    color: #dc2626;
}

.job-tag-detail.hot {
    background: #fef0e6;
    color: #f47a20;
}

.job-tag-detail.new {
    background: #e6f7e6;
    color: #2d7a2d;
}

.job-tag-detail.featured {
    background: #e8f0fe;
    color: #1a5a9e;
}

/* ============================================================ */
/* RELATED JOBS */
/* ============================================================ */
.related-jobs {
    margin-top: 40px;
}

.related-jobs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.related-job-card {
    background: #fff;
    padding: 20px 22px;
    border-radius: 12px;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

.related-job-card:hover {
    border-color: #f47a20;
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.related-job-card h4 {
    font-size: 1rem;
    color: #0f1a2b;
    margin-bottom: 4px;
}

.related-job-card .company {
    color: #6b7a8a;
    font-size: 0.85rem;
}

.related-job-card .company i {
    color: #f47a20;
    margin-right: 4px;
}

.related-job-card .location {
    color: #8a9aa8;
    font-size: 0.8rem;
    margin: 4px 0 10px;
}

.related-job-card .location i {
    color: #f47a20;
    margin-right: 4px;
}

.related-job-card .btn {
    width: 100%;
    text-align: center;
    font-size: 0.8rem;
    padding: 6px 12px;
}

/* ============================================================ */
/* ADMIN DASHBOARD — Styles */
/* ============================================================ */
.admin-dashboard {
    padding: 120px 0 60px;
    background: #f4f6f9;
    min-height: 100vh;
}

.admin-dashboard .container {
    max-width: 1200px;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #eee;
}

.admin-header h1 {
    font-size: 2rem;
    color: #0f1a2b;
}

.admin-header h1 span {
    color: #f47a20;
}

.admin-header .admin-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    padding: 8px 20px;
    border-radius: 50px;
    border: 1px solid #eee;
    font-size: 0.85rem;
    color: #4a5a6a;
}

.admin-header .admin-badge i {
    color: #22c55e;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.admin-stat-card {
    background: #fff;
    padding: 20px 25px;
    border-radius: 12px;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 16px;
}

.admin-stat-card .stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.admin-stat-card .stat-icon.pending {
    background: #fef3c7;
    color: #d97706;
}

.admin-stat-card .stat-icon.approved {
    background: #d1fae5;
    color: #059669;
}

.admin-stat-card .stat-icon.rejected {
    background: #fee2e2;
    color: #dc2626;
}

.admin-stat-card .stat-icon.total {
    background: #e0e7ff;
    color: #4f46e5;
}

.admin-stat-card .stat-info h3 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #0f1a2b;
    line-height: 1;
}

.admin-stat-card .stat-info p {
    font-size: 0.85rem;
    color: #6b7a8a;
    margin-top: 2px;
}

.admin-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.admin-tab {
    padding: 10px 24px;
    border-radius: 50px;
    border: 1px solid #ddd;
    background: #fff;
    color: #6b7a8a;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.admin-tab:hover {
    border-color: #f47a20;
    color: #f47a20;
}

.admin-tab.active {
    background: #f47a20;
    color: #fff;
    border-color: #f47a20;
}

.admin-tab i {
    margin-right: 6px;
}

.admin-table-wrapper {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #eee;
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

.admin-table th {
    text-align: left;
    padding: 12px 15px;
    background: #f8f9fc;
    font-weight: 600;
    color: #0f1a2b;
    border-bottom: 2px solid #eee;
    font-size: 0.85rem;
}

.admin-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f2f5;
    vertical-align: middle;
    font-size: 0.9rem;
    color: #4a5a6a;
}

.admin-table .status-badge {
    display: inline-block;
    padding: 3px 14px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
}

.admin-table .status-badge.pending {
    background: #fef3c7;
    color: #d97706;
}

.admin-table .status-badge.approved {
    background: #d1fae5;
    color: #059669;
}

.admin-table .status-badge.rejected {
    background: #fee2e2;
    color: #dc2626;
}

.admin-table .actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.admin-table .actions .btn {
    padding: 4px 12px;
    font-size: 0.7rem;
}

.admin-table .actions .btn-success {
    background: #22c55e;
    color: #fff;
}

.admin-table .actions .btn-success:hover {
    background: #16a34a;
}

.admin-table .actions .btn-danger {
    background: #ef4444;
    color: #fff;
}

.admin-table .actions .btn-danger:hover {
    background: #dc2626;
}

.admin-table .no-data {
    text-align: center;
    padding: 40px;
    color: #8a9aa8;
}

.admin-table .no-data i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 15px;
    color: #d1d5db;
}

.admin-login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 26, 43, 0.8);
    backdrop-filter: blur(12px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.admin-login-overlay.hidden {
    display: none;
}

.admin-login-box {
    background: #fff;
    padding: 40px 45px;
    border-radius: 20px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    animation: modalPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.admin-login-box .login-icon {
    width: 70px;
    height: 70px;
    background: rgba(244, 122, 32, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 2rem;
    color: #f47a20;
}

.admin-login-box h2 {
    font-size: 1.4rem;
    color: #0f1a2b;
    margin-bottom: 6px;
}

.admin-login-box p {
    color: #6b7a8a;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.admin-login-box .form-group {
    margin-bottom: 16px;
    text-align: left;
}

.admin-login-box .form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: #333;
    margin-bottom: 5px;
}

.admin-login-box .form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
}

.admin-login-box .form-group input:focus {
    outline: none;
    border-color: #f47a20;
    box-shadow: 0 0 0 3px rgba(244, 122, 32, 0.1);
}

.admin-login-box .btn {
    width: 100%;
    justify-content: center;
    padding: 12px;
}

.admin-login-box .login-error {
    color: #dc2626;
    font-size: 0.85rem;
    margin-top: 10px;
    display: none;
}

.admin-login-box .login-error.show {
    display: block;
}

@keyframes modalPop {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ============================================================ */
/* EMPLOYER LOGIN — Styles */
/* ============================================================ */
.employer-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 20px 60px;
    background: #f4f6f9;
}

.employer-login .container {
    max-width: 480px;
    width: 100%;
}

.login-card {
    background: #fff;
    border-radius: 20px;
    padding: 45px 40px 40px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.08);
    border: 1px solid #eee;
}

.login-card .login-logo {
    text-align: center;
    margin-bottom: 25px;
}

.login-card .login-logo .logo-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #f47a20, #d96a18);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 2rem;
    color: #fff;
    box-shadow: 0 8px 30px rgba(244, 122, 32, 0.3);
}

.login-card .login-logo h2 {
    font-size: 1.5rem;
    color: #0f1a2b;
    font-weight: 700;
}

.login-card .login-logo p {
    color: #6b7a8a;
    font-size: 0.9rem;
}

.login-card .form-group {
    margin-bottom: 18px;
}

.login-card .form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: #333;
    margin-bottom: 5px;
}

.login-card .form-group .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.login-card .form-group .input-wrapper i {
    position: absolute;
    left: 14px;
    color: #999;
    font-size: 0.9rem;
}

.login-card .form-group .input-wrapper input {
    width: 100%;
    padding: 12px 14px 12px 42px;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
    background: #f8f9fc;
    color: #333;
}

.login-card .form-group .input-wrapper input:focus {
    outline: none;
    border-color: #f47a20;
    box-shadow: 0 0 0 3px rgba(244, 122, 32, 0.1);
    background: #fff;
}

.login-card .form-group .input-wrapper input.error {
    border-color: #dc2626;
    background: #fef2f2;
}

.login-card .form-group .input-wrapper input.success {
    border-color: #22c55e;
    background: #f0fdf4;
}

.login-card .form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.login-card .form-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #555;
    cursor: pointer;
}

.login-card .form-options label input[type="checkbox"] {
    accent-color: #f47a20;
    width: 16px;
    height: 16px;
}

.login-card .form-options a {
    color: #f47a20;
    font-size: 0.85rem;
    font-weight: 500;
}

.login-card .form-options a:hover {
    text-decoration: underline;
}

.login-card .btn {
    width: 100%;
    justify-content: center;
    padding: 14px;
    font-size: 1rem;
}

.login-card .login-error {
    display: none;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 15px;
    color: #991b1b;
    font-size: 0.85rem;
    animation: slideDown 0.3s ease;
}

.login-card .login-error.show {
    display: block;
}

.login-card .login-error i {
    margin-right: 8px;
    color: #dc2626;
}

.login-card .login-footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.login-card .login-footer p {
    font-size: 0.9rem;
    color: #6b7a8a;
}

.login-card .login-footer a {
    color: #f47a20;
    font-weight: 600;
}

.login-card .login-footer a:hover {
    text-decoration: underline;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================ */
/* SUCCESS OVERLAY — Loading Animation */
/* ============================================================ */
.success-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 26, 43, 0.85);
    backdrop-filter: blur(12px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.success-overlay.show {
    display: flex;
}

.success-overlay-content {
    text-align: center;
    animation: modalPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.success-overlay-content .success-icon {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 3.5rem;
    color: #22c55e;
    animation: pulse 1.5s infinite;
}

.success-overlay-content h2 {
    font-size: 2rem;
    color: #fff;
    font-weight: 700;
    margin-bottom: 10px;
}

.success-overlay-content p {
    color: #b0c0d0;
    font-size: 1.05rem;
}

.success-overlay-content .loading-bar {
    width: 300px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    margin: 25px auto 0;
    overflow: hidden;
}

.success-overlay-content .loading-bar .loading-progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #f47a20, #22c55e);
    border-radius: 3px;
    animation: loading 2s ease-in-out forwards;
}

@keyframes loading {
    0% { width: 0%; }
    100% { width: 100%; }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ============================================================ */
/* POST JOB — Styles */
/* ============================================================ */
.post-job-dashboard {
    padding: 120px 0 60px;
    background: #f4f6f9;
    min-height: 100vh;
}

.post-job-dashboard .container {
    max-width: 900px;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #eee;
}

.dashboard-header h1 {
    font-size: 1.8rem;
    color: #0f1a2b;
}

.dashboard-header h1 span {
    color: #f47a20;
}

.dashboard-header .employer-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    padding: 8px 20px;
    border-radius: 50px;
    border: 1px solid #eee;
}

.dashboard-header .employer-badge i {
    color: #22c55e;
}

.dashboard-header .employer-badge .company-name {
    font-weight: 600;
    color: #0f1a2b;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.dashboard-stat {
    background: #fff;
    padding: 20px 25px;
    border-radius: 12px;
    border: 1px solid #eee;
    text-align: center;
}

.dashboard-stat .number {
    font-size: 1.5rem;
    font-weight: 800;
    color: #f47a20;
}

.dashboard-stat p {
    color: #6b7a8a;
    font-size: 0.85rem;
    margin-top: 4px;
}

/* ============================================================ */
/* APPLICATIONS SECTION - Employer Dashboard */
/* ============================================================ */
.applications-section {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 2px solid #f0f2f5;
}

.application-card {
    background: #f8f9fc;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

.application-card:hover {
    border-color: #f47a20;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.application-card .applicant-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

.application-card .applicant-info h4 {
    margin: 0 0 4px 0;
    color: #0f1a2b;
    font-size: 1.05rem;
}

.application-card .applicant-info h4 i {
    color: #f47a20;
    margin-right: 6px;
}

.application-card .applicant-info p {
    margin: 0 0 2px 0;
    color: #6b7a8a;
    font-size: 0.85rem;
}

.application-card .applicant-info p i {
    color: #f47a20;
    width: 16px;
}

.application-card .applicant-info .app-date {
    color: #8a9aa8;
    font-size: 0.78rem;
    margin-top: 4px;
}

.status-badge {
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
}

.status-badge.pending {
    background: #fef3c7;
    color: #d97706;
}

.status-badge.shortlisted {
    background: #dbeafe;
    color: #2563eb;
}

.status-badge.hired {
    background: #d1fae5;
    color: #059669;
}

.status-badge.rejected {
    background: #fee2e2;
    color: #dc2626;
}

.applicant-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.applicant-actions .btn-action {
    padding: 4px 12px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
}

.applicant-actions .btn-action:hover {
    transform: translateY(-2px);
}

.btn-shortlist {
    background: #2563eb;
    color: #fff;
}

.btn-shortlist:hover {
    background: #1d4ed8;
}

.btn-hire {
    background: #22c55e;
    color: #fff;
}

.btn-hire:hover {
    background: #16a34a;
}

.btn-reject {
    background: #dc2626;
    color: #fff;
}

.btn-reject:hover {
    background: #b91c1c;
}

.btn-view {
    background: #f47a20;
    color: #fff;
}

.btn-view:hover {
    background: #d96a18;
}

.documents-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e8ecf0;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.document-item {
    background: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #e8ecf0;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.document-item:hover {
    border-color: #f47a20;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.document-item .doc-icon {
    font-size: 1.1rem;
}

.document-item .doc-icon.cv {
    color: #dc2626;
}

.document-item .doc-icon.cover {
    color: #2563eb;
}

.document-item .doc-icon.document {
    color: #7c3aed;
}

.document-item .file-name {
    font-size: 0.82rem;
    color: #0f1a2b;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-item .btn-download {
    background: #f47a20;
    color: #fff;
    border: none;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.7rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
}

.document-item .btn-download:hover {
    background: #d96a18;
    transform: scale(1.05);
}

.filter-applications {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-applications select {
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid #ddd;
    font-family: 'Inter', sans-serif;
    width: 100%;
    max-width: 350px;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-applications select:focus {
    outline: none;
    border-color: #f47a20;
    box-shadow: 0 0 0 3px rgba(244, 122, 32, 0.1);
}

.no-applications {
    text-align: center;
    padding: 60px 20px;
    color: #8a9aa8;
}

.no-applications i {
    font-size: 3rem;
    display: block;
    margin-bottom: 15px;
    color: #d1d5db;
}

.no-applications h4 {
    color: #0f1a2b;
    margin-bottom: 5px;
}

.no-applications p {
    font-size: 0.9rem;
}

#newApplicationsBadge {
    background: #fff;
    color: #f47a20;
    padding: 0 6px;
    border-radius: 50%;
    font-weight: 700;
}

/* ============================================================ */
/* APPLY PAGE — Styles */
/* ============================================================ */
.apply-page {
    padding: 120px 0 60px;
    background: #f4f6f9;
    min-height: 100vh;
}

.apply-page .container {
    max-width: 850px;
}

.apply-job-header {
    background: #fff;
    border-radius: 16px;
    padding: 30px 35px;
    margin-bottom: 30px;
    border: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
}

.apply-job-header .job-info h2 {
    font-size: 1.4rem;
    color: #0f1a2b;
    margin-bottom: 4px;
}

.apply-job-header .job-info p {
    color: #6b7a8a;
    font-size: 0.95rem;
}

.apply-job-header .job-info p i {
    color: #f47a20;
    margin-right: 6px;
}

.apply-job-header .job-badge {
    display: inline-block;
    padding: 4px 16px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(244, 122, 32, 0.1);
    color: #f47a20;
}

.apply-form-wrapper {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    border: 1px solid #eee;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
}

.apply-form-wrapper .form-header {
    text-align: center;
    margin-bottom: 30px;
}

.apply-form-wrapper .form-header h2 {
    font-size: 1.5rem;
    color: #0f1a2b;
    font-weight: 700;
}

.apply-form-wrapper .form-header p {
    color: #6b7a8a;
    font-size: 0.95rem;
}

/* ============================================================ */
/* LOGIN PAGE — Styles */
/* ============================================================ */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 20px 60px;
    background: #f4f6f9;
}

.login-page .container {
    max-width: 480px;
    width: 100%;
}

/* ============================================================ */
/* DASHBOARD — Styles */
/* ============================================================ */
.dashboard-page {
    padding: 120px 0 60px;
    background: #f4f6f9;
    min-height: 100vh;
}

.dashboard-page .container {
    max-width: 1100px;
}

.dashboard-header {
    background: #fff;
    border-radius: 16px;
    padding: 30px 35px;
    margin-bottom: 30px;
    border: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
}

.dashboard-header .user-info {
    display: flex;
    align-items: center;
    gap: 18px;
}

.dashboard-header .user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f47a20, #d96a18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
}

.dashboard-header .user-details h1 {
    font-size: 1.4rem;
    color: #0f1a2b;
    margin-bottom: 2px;
}

.dashboard-header .user-details p {
    color: #6b7a8a;
    font-size: 0.9rem;
}

.dashboard-header .user-details p i {
    color: #22c55e;
    margin-right: 4px;
}

.dashboard-header .user-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.dashboard-stat-card {
    background: #fff;
    padding: 22px 25px;
    border-radius: 12px;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.dashboard-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    border-color: #f47a20;
}

.dashboard-stat-card .stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.dashboard-stat-card .stat-icon.purple {
    background: #ede9fe;
    color: #7c3aed;
}

.dashboard-stat-card .stat-icon.blue {
    background: #dbeafe;
    color: #2563eb;
}

.dashboard-stat-card .stat-icon.green {
    background: #d1fae5;
    color: #059669;
}

.dashboard-stat-card .stat-icon.orange {
    background: #fef3c7;
    color: #d97706;
}

.dashboard-stat-card .stat-info h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #0f1a2b;
    line-height: 1;
}

.dashboard-stat-card .stat-info p {
    font-size: 0.85rem;
    color: #6b7a8a;
    margin-top: 2px;
}

.dashboard-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}

.dashboard-applications {
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    border: 1px solid #eee;
}

.dashboard-applications .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f2f5;
}

.dashboard-applications .section-title h3 {
    font-size: 1.1rem;
    color: #0f1a2b;
    font-weight: 700;
}

.dashboard-applications .section-title a {
    color: #f47a20;
    font-size: 0.85rem;
    font-weight: 500;
}

.dashboard-applications .section-title a:hover {
    text-decoration: underline;
}

.application-list {
    display: grid;
    gap: 12px;
}

.application-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: #f8f9fc;
    border-radius: 10px;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    flex-wrap: wrap;
    gap: 10px;
}

.application-item:hover {
    border-color: #f47a20;
}

.application-item .app-info h4 {
    font-size: 0.95rem;
    color: #0f1a2b;
    margin-bottom: 2px;
}

.application-item .app-info .company {
    font-size: 0.85rem;
    color: #6b7a8a;
}

.application-item .app-info .company i {
    color: #f47a20;
    margin-right: 4px;
}

.application-item .app-status {
    display: flex;
    align-items: center;
    gap: 12px;
}

.application-item .app-status .status-badge {
    padding: 3px 14px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
}

.application-item .app-status .status-badge.pending {
    background: #fef3c7;
    color: #d97706;
}

.application-item .app-status .status-badge.shortlisted {
    background: #dbeafe;
    color: #2563eb;
}

.application-item .app-status .status-badge.rejected {
    background: #fee2e2;
    color: #dc2626;
}

.application-item .app-status .status-badge.hired {
    background: #d1fae5;
    color: #059669;
}

.application-item .app-status .app-date {
    font-size: 0.75rem;
    color: #8a9aa8;
}

.dashboard-sidebar {
    display: grid;
    gap: 25px;
}

.dashboard-card {
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    border: 1px solid #eee;
}

.dashboard-card .card-title {
    font-size: 1rem;
    color: #0f1a2b;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f2f5;
}

.dashboard-card .profile-info {
    display: grid;
    gap: 12px;
}

.dashboard-card .profile-info .info-item {
    display: flex;
    gap: 12px;
    padding: 6px 0;
}

.dashboard-card .profile-info .info-item i {
    width: 20px;
    color: #f47a20;
    margin-top: 3px;
}

.dashboard-card .profile-info .info-item .label {
    color: #6b7a8a;
    font-size: 0.8rem;
}

.dashboard-card .profile-info .info-item .value {
    color: #0f1a2b;
    font-size: 0.9rem;
    font-weight: 500;
}

.dashboard-card .profile-actions {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dashboard-card .profile-actions .btn {
    font-size: 0.8rem;
    padding: 6px 16px;
}

.no-saved {
    text-align: center;
    padding: 20px;
    color: #8a9aa8;
    font-size: 0.9rem;
}

.no-saved i {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 10px;
    color: #d1d5db;
}

/* ============================================================ */
/* EDIT PROFILE — Styles */
/* ============================================================ */
.edit-profile-page {
    padding: 120px 0 60px;
    background: #f4f6f9;
    min-height: 100vh;
}

.edit-profile-page .container {
    max-width: 750px;
}

.edit-profile-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    border: 1px solid #eee;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
}

.edit-profile-card .card-header {
    text-align: center;
    margin-bottom: 30px;
}

.edit-profile-card .card-header h2 {
    font-size: 1.5rem;
    color: #0f1a2b;
    font-weight: 700;
}

.edit-profile-card .card-header p {
    color: #6b7a8a;
    font-size: 0.95rem;
}

.profile-photo-section {
    text-align: center;
    margin-bottom: 30px;
}

.profile-photo-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}

.profile-photo-wrapper .profile-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #f47a20;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background: #f8f9fc;
}

.profile-photo-wrapper .photo-upload-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f47a20;
    color: #fff;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.profile-photo-wrapper .photo-upload-btn:hover {
    background: #d96a18;
    transform: scale(1.05);
}

.profile-photo-wrapper .photo-upload-btn input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.photo-hint {
    font-size: 0.75rem;
    color: #8a9aa8;
    margin-top: 8px;
}

/* ============================================================ */
/* POST JOB FORM */
/* ============================================================ */
.post-job-form {
    background: #fff;
    padding: 35px;
    border-radius: 16px;
    border: 1px solid #eee;
}

.post-job-form h2 {
    font-size: 1.3rem;
    color: #0f1a2b;
    margin-bottom: 8px;
}

.post-job-form p {
    color: #6b7a8a;
    font-size: 0.9rem;
    margin-bottom: 25px;
}

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

.form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: #333;
    margin-bottom: 5px;
}

.form-group .required {
    color: #dc2626;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper i {
    position: absolute;
    left: 14px;
    color: #999;
    font-size: 0.9rem;
}

.input-wrapper input,
.input-wrapper select,
.input-wrapper textarea {
    width: 100%;
    padding: 12px 14px 12px 42px;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
    background: #f8f9fc;
    color: #333;
}

.input-wrapper textarea {
    min-height: 100px;
    resize: vertical;
    padding-top: 12px;
}

.input-wrapper input:focus,
.input-wrapper select:focus,
.input-wrapper textarea:focus {
    outline: none;
    border-color: #f47a20;
    box-shadow: 0 0 0 3px rgba(244, 122, 32, 0.1);
    background: #fff;
}

.input-wrapper input.error,
.input-wrapper select.error,
.input-wrapper textarea.error {
    border-color: #dc2626;
    background: #fef2f2;
}

.form-error {
    display: none;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 10px 14px;
    margin-top: 8px;
    color: #991b1b;
    font-size: 0.85rem;
    animation: slideDown 0.3s ease;
}

.form-error.show {
    display: block;
}

.form-error i {
    margin-right: 8px;
    color: #dc2626;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.form-actions {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.form-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.post-success {
    display: none;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    color: #166534;
    animation: slideDown 0.3s ease;
}

.post-success.show {
    display: block;
}

.post-success i {
    color: #22c55e;
    margin-right: 8px;
}

/* ============================================================ */
/* FLYER PREVIEW ON JOB CARD */
/* ============================================================ */
.flyer-preview {
    position: relative;
    width: 100%;
    max-width: 80px;
    height: 70px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    margin-top: 6px;
    border: 2px solid #e8edf5;
    transition: all 0.3s ease;
    background: #f8fafc;
    flex-shrink: 0;
}

.flyer-preview:hover {
    border-color: #f47a20;
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.flyer-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flyer-preview .flyer-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    background: #f1f5f9;
}

.flyer-preview .flyer-placeholder i {
    font-size: 1rem;
    margin-bottom: 2px;
    color: #cbd5e1;
}

.flyer-preview .flyer-placeholder span {
    font-size: 0.5rem;
}

.flyer-preview .flyer-preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
    gap: 2px;
}

.flyer-preview:hover .flyer-preview-overlay {
    opacity: 1;
}

.flyer-preview .flyer-preview-overlay i {
    font-size: 1rem;
}

.flyer-preview .flyer-preview-overlay span {
    font-size: 0.5rem;
    font-weight: 500;
}

.flyer-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #f47a20, #d96a18);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.flyer-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 10px rgba(244, 122, 32, 0.4);
}

.reference-badge {
    display: inline-block;
    background: #e8edf5;
    color: #475569;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
}

.job-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.job-content-wrapper {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.job-details {
    flex: 1;
}

.job-card.has-flyer .job-content-wrapper {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}
/* ============================================================ */
/* STORY EXPERIENCE BADGE - GLOBAL SOLUTIONS */
/* ============================================================ */

.story-experience-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(244, 122, 32, 0.12);
    border: 1px solid rgba(244, 122, 32, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 12px 20px;
    border-radius: 50px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 5;
}

.story-experience-badge i {
    color: #f47a20;
    font-size: 1.3rem;
}

.story-experience-badge span {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.3px;
}

/* ============================================================ */
/* RESPONSIVE - Tablet */
/* ============================================================ */
@media (max-width: 991px) {
    .story-experience-badge {
        bottom: 15px;
        right: 15px;
        padding: 10px 16px;
        gap: 8px;
        border-radius: 40px;
    }
    
    .story-experience-badge i {
        font-size: 1.1rem;
    }
    
    .story-experience-badge span {
        font-size: 0.85rem;
    }
}

/* ============================================================ */
/* RESPONSIVE - Mobile (matches your image) */
/* ============================================================ */
@media (max-width: 767px) {
    .story-experience-badge {
        bottom: 50px;
        right: 15px;
        padding: 8px 14px;
        gap: 6px;
        border-radius: 30px;
        background: rgba(15, 26, 43, 0.92);
        border: 1px solid rgba(244, 122, 32, 0.12);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    }
    
    .story-experience-badge i {
        font-size: 0.9rem;
        color: #f47a20;
    }
    
    .story-experience-badge span {
        font-size: 0.7rem;
        font-weight: 600;
        color: #fff;
    }
}

/* ============================================================ */
/* RESPONSIVE - Very Small (480px and below) */
/* ============================================================ */
@media (max-width: 480px) {
    .story-experience-badge {
        bottom: 40px;
        right: 10px;
        padding: 6px 12px;
        gap: 5px;
        border-radius: 20px;
    }
    
    .story-experience-badge i {
        font-size: 0.75rem;
    }
    
    .story-experience-badge span {
        font-size: 0.6rem;
    }
}

/* ============================================================ */
/* FLYER MODAL */
/* ============================================================ */
.flyer-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.flyer-modal.show {
    display: flex !important;
    animation: flyerModalIn 0.3s ease;
}

@keyframes flyerModalIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.flyer-modal-content {
    background: #fff;
    border-radius: 20px;
    max-width: 650px;
    width: 100%;
    padding: 30px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

.flyer-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    cursor: pointer;
    color: #6b7a8a;
    transition: color 0.3s ease;
    line-height: 1;
    z-index: 10;
}

.flyer-modal-close:hover {
    color: #f47a20;
}

.flyer-modal-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0b1a2f;
    margin-bottom: 16px;
    padding-right: 40px;
}

.flyer-modal-image-container {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid #e8edf5;
}

.flyer-modal-image-container img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 500px;
    object-fit: contain;
}

.flyer-modal-info {
    margin: 16px 0;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 10px;
}

.flyer-modal-info p {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #475569;
    margin: 4px 0;
}

.flyer-modal-info p i {
    color: #f47a20;
    width: 18px;
}

.flyer-modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    justify-content: flex-end;
}

.flyer-modal-actions .btn {
    padding: 10px 24px;
}

/* ============================================================ */
/* TALENT ACQUISITION PAGE — Styles */
/* ============================================================ */
.service-hero .page-hero-bg img {
    object-position: center 40%;
}

.service-stats {
    padding: 50px 0;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.service-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

.service-stat-item {
    text-align: center;
    padding: 15px;
}

.service-stat-item .service-stat-number {
    font-size: 2.5rem;
    font-weight: 900;
    color: #f47a20;
    line-height: 1;
    margin-bottom: 8px;
}

.service-stat-item p {
    color: #555;
    font-weight: 500;
    margin-top: 4px;
    font-size: 0.9rem;
}

.service-stat-item p i {
    color: #f47a20;
    margin-right: 6px;
}

.our-approach {
    padding: 70px 0;
    background: #f4f6f9;
}

.approach-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.approach-card {
    background: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    text-align: center;
    position: relative;
    transition: all 0.4s ease;
    border: 1px solid #eee;
}

.approach-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.approach-number {
    font-size: 3rem;
    font-weight: 900;
    color: rgba(244, 122, 32, 0.06);
    position: absolute;
    top: 5px;
    right: 15px;
}

.approach-icon {
    width: 65px;
    height: 65px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.6rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.approach-card:hover .approach-icon {
    background: #f47a20;
    color: #fff;
}

.approach-card h3 {
    font-size: 1.1rem;
    color: #0f1a2b;
    margin-bottom: 10px;
}

.approach-card p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.6;
}

.why-choose-service {
    padding: 70px 0;
    background: #fff;
}

.why-choose-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.why-choose-card {
    padding: 30px 25px;
    background: #f8f9fc;
    border-radius: 16px;
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid #eee;
}

.why-choose-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.06);
    border-color: #f47a20;
}

.why-choose-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.why-choose-card:hover .why-choose-icon {
    background: #f47a20;
    color: #fff;
}

.why-choose-card h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 8px;
}

.why-choose-card p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.6;
}

.industries-served {
    padding: 70px 0;
    background: #f4f6f9;
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.industry-card {
    background: #fff;
    padding: 25px 20px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #eee;
    cursor: pointer;
}

.industry-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.industry-icon {
    width: 55px;
    height: 55px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 1.4rem;
    color: #f47a20;
}

.industry-card h4 {
    font-size: 0.9rem;
    color: #0f1a2b;
    font-weight: 600;
}

.service-testimonials {
    padding: 70px 0;
    background: #fff;
}

.service-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.service-testimonial-card {
    background: #f8f9fc;
    padding: 30px;
    border-radius: 16px;
    transition: all 0.4s ease;
    border: 1px solid #eee;
}

.service-testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    border-color: #f47a20;
}

.service-testimonial-stars {
    color: #f47a20;
    margin-bottom: 15px;
}

.service-testimonial-stars i {
    margin-right: 2px;
}

.service-testimonial-card p {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.7;
    margin-bottom: 20px;
}

.service-testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.service-testimonial-author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.service-testimonial-author h4 {
    font-size: 1rem;
    color: #0f1a2b;
}

.service-testimonial-author span {
    font-size: 0.82rem;
    color: #888;
}

/* ============================================================ */
/* PROCESS OUTSOURCING PAGE — Additional Styles */
/* ============================================================ */
.process-hero .page-hero-bg img {
    object-position: center 30%;
}

.process-hero .hero-floating-badge.badge-left {
    bottom: 80px;
    right: auto;
    left: 20px;
}

.what-we-outsource {
    padding: 70px 0;
    background: #f4f6f9;
}

.outsource-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.outsource-card {
    background: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    border: 1px solid #eee;
    transition: all 0.4s ease;
}

.outsource-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.outsource-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.outsource-card:hover .outsource-icon {
    background: #f47a20;
    color: #fff;
}

.outsource-card h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 10px;
    text-align: center;
}

.outsource-card p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 15px;
}

.outsource-list {
    list-style: none;
    padding: 0;
}

.outsource-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    color: #4a5a6a;
    font-size: 0.85rem;
}

.outsource-list li i {
    color: #f47a20;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.outsource-process {
    padding: 70px 0;
    background: #fff;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.process-step {
    text-align: center;
    padding: 30px 20px;
    background: #f8f9fc;
    border-radius: 16px;
    transition: all 0.4s ease;
    border: 1px solid #eee;
    position: relative;
}

.process-step:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.process-number {
    font-size: 2.8rem;
    font-weight: 900;
    color: rgba(244, 122, 32, 0.08);
    position: absolute;
    top: 5px;
    right: 15px;
}

.process-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.process-step:hover .process-icon {
    background: #f47a20;
    color: #fff;
}

.process-step h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 8px;
}

.process-step p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.6;
}

.outsource-benefits {
    padding: 70px 0;
    background: #f4f6f9;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.benefit-card {
    background: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid #eee;
}

.benefit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.benefit-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.benefit-card:hover .benefit-icon {
    background: #f47a20;
    color: #fff;
}

.benefit-card h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 8px;
}

.benefit-card p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ============================================================ */
/* BUSINESS GROWTH PAGE — Additional Styles */
/* ============================================================ */
.growth-hero .page-hero-bg img {
    object-position: center 50%;
}

.growth-solutions {
    padding: 70px 0;
    background: #f4f6f9;
}

.growth-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.growth-card {
    background: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    border: 1px solid #eee;
    transition: all 0.4s ease;
}

.growth-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.growth-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.growth-card:hover .growth-icon {
    background: #f47a20;
    color: #fff;
}

.growth-card h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 10px;
    text-align: center;
}

.growth-card p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 15px;
}

.growth-list {
    list-style: none;
    padding: 0;
}

.growth-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    color: #4a5a6a;
    font-size: 0.85rem;
}

.growth-list li i {
    color: #f47a20;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.growth-process {
    padding: 70px 0;
    background: #fff;
}

.growth-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.growth-step {
    text-align: center;
    padding: 30px 20px;
    background: #f8f9fc;
    border-radius: 16px;
    transition: all 0.4s ease;
    border: 1px solid #eee;
    position: relative;
}

.growth-step:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.growth-step-number {
    font-size: 2.8rem;
    font-weight: 900;
    color: rgba(244, 122, 32, 0.08);
    position: absolute;
    top: 5px;
    right: 15px;
}

.growth-step-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.growth-step:hover .growth-step-icon {
    background: #f47a20;
    color: #fff;
}

.growth-step h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 8px;
}

.growth-step p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.6;
}

.growth-benefits {
    padding: 70px 0;
    background: #f4f6f9;
}

.growth-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.growth-benefit-card {
    background: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid #eee;
}

.growth-benefit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.growth-benefit-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.growth-benefit-card:hover .growth-benefit-icon {
    background: #f47a20;
    color: #fff;
}

.growth-benefit-card h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 8px;
}

.growth-benefit-card p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.6;
}

.success-stories {
    padding: 70px 0;
    background: #fff;
}

.stories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.story-card {
    background: #f8f9fc;
    padding: 30px;
    border-radius: 16px;
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid #eee;
}

.story-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.story-number {
    font-size: 2.8rem;
    font-weight: 900;
    color: #f47a20;
    margin-bottom: 10px;
}

.story-card h3 {
    font-size: 1.1rem;
    color: #0f1a2b;
    margin-bottom: 10px;
}

.story-card p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.story-tag {
    display: inline-block;
    padding: 4px 16px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(244, 122, 32, 0.1);
    color: #f47a20;
}

/* ============================================================ */
/* STRATEGIC CONSULTING PAGE — Additional Styles */
/* ============================================================ */
.consulting-hero .page-hero-bg img {
    object-position: center 40%;
}

.consulting-areas {
    padding: 70px 0;
    background: #f4f6f9;
}

.consulting-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.consulting-card {
    background: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    border: 1px solid #eee;
    transition: all 0.4s ease;
}

.consulting-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.consulting-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.consulting-card:hover .consulting-icon {
    background: #f47a20;
    color: #fff;
}

.consulting-card h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 10px;
    text-align: center;
}

.consulting-card p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 15px;
}

.consulting-list {
    list-style: none;
    padding: 0;
}

.consulting-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    color: #4a5a6a;
    font-size: 0.85rem;
}

.consulting-list li i {
    color: #f47a20;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.consulting-approach {
    padding: 70px 0;
    background: #fff;
}

.approach-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.approach-step {
    text-align: center;
    padding: 30px 20px;
    background: #f8f9fc;
    border-radius: 16px;
    transition: all 0.4s ease;
    border: 1px solid #eee;
    position: relative;
}

.approach-step:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.approach-step-number {
    font-size: 2.8rem;
    font-weight: 900;
    color: rgba(244, 122, 32, 0.08);
    position: absolute;
    top: 5px;
    right: 15px;
}

.approach-step-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.approach-step:hover .approach-step-icon {
    background: #f47a20;
    color: #fff;
}

.approach-step h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 8px;
}

.approach-step p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.6;
}

.consulting-benefits {
    padding: 70px 0;
    background: #f4f6f9;
}

.consulting-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.consulting-benefit-card {
    background: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid #eee;
}

.consulting-benefit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.consulting-benefit-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.consulting-benefit-card:hover .consulting-benefit-icon {
    background: #f47a20;
    color: #fff;
}

.consulting-benefit-card h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 8px;
}

.consulting-benefit-card p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.6;
}

.consulting-testimonials {
    padding: 70px 0;
    background: #fff;
}

.consulting-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.consulting-testimonial-card {
    background: #f8f9fc;
    padding: 30px;
    border-radius: 16px;
    transition: all 0.4s ease;
    border: 1px solid #eee;
}

.consulting-testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    border-color: #f47a20;
}

.consulting-testimonial-stars {
    color: #f47a20;
    margin-bottom: 15px;
}

.consulting-testimonial-stars i {
    margin-right: 2px;
}

.consulting-testimonial-card p {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.7;
    margin-bottom: 20px;
}

.consulting-testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.consulting-testimonial-author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.consulting-testimonial-author h4 {
    font-size: 1rem;
    color: #0f1a2b;
}

.consulting-testimonial-author span {
    font-size: 0.82rem;
    color: #888;
}

/* ============================================================ */
/* PRE-SCREENED CANDIDATES PAGE — Styles */
/* ============================================================ */
.candidates-hero .page-hero-bg img {
    object-position: center 40%;
}

.candidates-stats {
    padding: 50px 0;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.candidates-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

.candidates-stat-item .candidates-stat-number {
    font-size: 3rem;
    font-weight: 900;
    color: #f47a20;
    line-height: 1;
}

.candidates-stat-item p {
    color: #555;
    font-weight: 500;
    margin-top: 8px;
}

.candidates-stat-item p i {
    color: #f47a20;
    margin-right: 6px;
}

.screening-process {
    padding: 70px 0;
    background: #f4f6f9;
}

.screening-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.screening-card {
    background: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    text-align: center;
    position: relative;
    transition: all 0.4s ease;
    border: 1px solid #eee;
}

.screening-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.screening-number {
    font-size: 3rem;
    font-weight: 900;
    color: rgba(244, 122, 32, 0.06);
    position: absolute;
    top: 5px;
    right: 15px;
}

.screening-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.screening-card:hover .screening-icon {
    background: #f47a20;
    color: #fff;
}

.screening-card h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 10px;
}

.screening-card p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.6;
}

.why-pre-screened {
    padding: 70px 0;
    background: #fff;
}

.pre-screened-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.pre-screened-card {
    padding: 30px 25px;
    background: #f8f9fc;
    border-radius: 16px;
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid #eee;
}

.pre-screened-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.06);
    border-color: #f47a20;
}

.pre-screened-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.pre-screened-card:hover .pre-screened-icon {
    background: #f47a20;
    color: #fff;
}

.pre-screened-card h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 8px;
}

.pre-screened-card p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.6;
}

.candidates-cta .btn-secondary {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.candidates-cta .btn-secondary:hover {
    background: #fff;
    color: #0f1a2b;
}

/* ============================================================ */
/* QUICK & EASY HIRING PAGE — Styles */
/* ============================================================ */
.quick-hero .page-hero-bg img {
    object-position: center 30%;
}

.quick-stats {
    padding: 50px 0;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.quick-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

.quick-stat-item .quick-stat-number {
    font-size: 3rem;
    font-weight: 900;
    color: #f47a20;
    line-height: 1;
}

.quick-stat-item p {
    color: #555;
    font-weight: 500;
    margin-top: 8px;
}

.quick-stat-item p i {
    color: #f47a20;
    margin-right: 6px;
}

.hiring-process {
    padding: 70px 0;
    background: #f4f6f9;
}

.hiring-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.hiring-step {
    background: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    text-align: center;
    position: relative;
    transition: all 0.4s ease;
    border: 1px solid #eee;
}

.hiring-step:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.hiring-step-number {
    font-size: 3rem;
    font-weight: 900;
    color: rgba(244, 122, 32, 0.06);
    position: absolute;
    top: 5px;
    right: 15px;
}

.hiring-step-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.hiring-step:hover .hiring-step-icon {
    background: #f47a20;
    color: #fff;
}

.hiring-step h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 8px;
}

.hiring-step p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 12px;
}

.hiring-step-time {
    display: inline-block;
    background: rgba(244, 122, 32, 0.08);
    color: #f47a20;
    padding: 4px 16px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
}

.hiring-step-time i {
    margin-right: 6px;
}

.quick-features {
    padding: 70px 0;
    background: #fff;
}

.quick-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.quick-feature-card {
    padding: 30px 25px;
    background: #f8f9fc;
    border-radius: 16px;
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid #eee;
}

.quick-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.06);
    border-color: #f47a20;
}

.quick-feature-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.quick-feature-card:hover .quick-feature-icon {
    background: #f47a20;
    color: #fff;
}

.quick-feature-card h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 8px;
}

.quick-feature-card p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.6;
}

.comparison-section {
    padding: 70px 0;
    background: #f4f6f9;
}

.comparison-table-wrapper {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #eee;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);
}

.comparison-table {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr;
    width: 100%;
}

.comparison-row {
    display: contents;
}

.comparison-col {
    padding: 15px 20px;
    border-bottom: 1px solid #f0f2f5;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    color: #4a5a6a;
}

.comparison-row:last-child .comparison-col {
    border-bottom: none;
}

.comparison-header .comparison-col {
    background: #0f1a2b;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    border-bottom: none;
}

.comparison-col.traditional {
    color: #dc2626;
}

.comparison-col.quick {
    color: #22c55e;
    font-weight: 600;
}

.comparison-row:hover .comparison-col {
    background: #f8f9fc;
}

.comparison-row:hover .comparison-header .comparison-col {
    background: #0f1a2b;
}

.quick-cta .btn-secondary {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.quick-cta .btn-secondary:hover {
    background: #fff;
    color: #0f1a2b;
}

/* ============================================================ */
/* DATA-DRIVEN INSIGHTS PAGE — Styles */
/* ============================================================ */
.insights-hero .page-hero-bg img {
    object-position: center 40%;
}

.insights-stats {
    padding: 50px 0;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.insights-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

.insights-stat-item .insights-stat-number {
    font-size: 3rem;
    font-weight: 900;
    color: #f47a20;
    line-height: 1;
}

.insights-stat-item p {
    color: #555;
    font-weight: 500;
    margin-top: 8px;
}

.insights-stat-item p i {
    color: #f47a20;
    margin-right: 6px;
}

.insights-features {
    padding: 70px 0;
    background: #f4f6f9;
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.insights-card {
    background: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    border: 1px solid #eee;
    transition: all 0.4s ease;
}

.insights-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.insights-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.insights-card:hover .insights-icon {
    background: #f47a20;
    color: #fff;
}

.insights-card h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 10px;
    text-align: center;
}

.insights-card p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 15px;
}

.insights-list {
    list-style: none;
    padding: 0;
}

.insights-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    color: #4a5a6a;
    font-size: 0.85rem;
}

.insights-list li i {
    color: #f47a20;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.insights-process {
    padding: 70px 0;
    background: #fff;
}

.insights-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.insights-step {
    text-align: center;
    padding: 30px 20px;
    background: #f8f9fc;
    border-radius: 16px;
    transition: all 0.4s ease;
    border: 1px solid #eee;
    position: relative;
}

.insights-step:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.insights-step-number {
    font-size: 2.8rem;
    font-weight: 900;
    color: rgba(244, 122, 32, 0.08);
    position: absolute;
    top: 5px;
    right: 15px;
}

.insights-step-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.insights-step:hover .insights-step-icon {
    background: #f47a20;
    color: #fff;
}

.insights-step h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 8px;
}

.insights-step p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.6;
}

.sample-dashboard {
    padding: 70px 0;
    background: #f4f6f9;
}

.dashboard-preview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.dashboard-card {
    background: #fff;
    padding: 25px 20px;
    border-radius: 12px;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

.dashboard-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    border-color: #f47a20;
}

.dashboard-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.dashboard-card-title {
    font-size: 0.85rem;
    color: #6b7a8a;
    font-weight: 500;
}

.dashboard-card-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f1a2b;
}

.dashboard-progress {
    height: 6px;
    background: #e8ecf0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.dashboard-progress-bar {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #f47a20, #d96a18);
    transition: width 1s ease;
}

.dashboard-card-note {
    font-size: 0.75rem;
    color: #8a9aa8;
    margin: 0;
}

.insights-testimonials {
    padding: 70px 0;
    background: #fff;
}

.insights-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.insights-testimonial-card {
    background: #f8f9fc;
    padding: 30px;
    border-radius: 16px;
    transition: all 0.4s ease;
    border: 1px solid #eee;
}

.insights-testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    border-color: #f47a20;
}

.insights-testimonial-stars {
    color: #f47a20;
    margin-bottom: 15px;
}

.insights-testimonial-stars i {
    margin-right: 2px;
}

.insights-testimonial-card p {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.7;
    margin-bottom: 20px;
}

.insights-testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.insights-testimonial-author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.insights-testimonial-author h4 {
    font-size: 1rem;
    color: #0f1a2b;
}

.insights-testimonial-author span {
    font-size: 0.82rem;
    color: #888;
}

.insights-cta .btn-secondary {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.insights-cta .btn-secondary:hover {
    background: #fff;
    color: #0f1a2b;
}

/* ============================================================ */
/* DEDICATED SUPPORT PAGE — Styles */
/* ============================================================ */
.support-hero .page-hero-bg img {
    object-position: center 40%;
}

.support-stats {
    padding: 50px 0;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.support-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

.support-stat-item .support-stat-number {
    font-size: 3rem;
    font-weight: 900;
    color: #f47a20;
    line-height: 1;
}

.support-stat-item p {
    color: #555;
    font-weight: 500;
    margin-top: 8px;
}

.support-stat-item p i {
    color: #f47a20;
    margin-right: 6px;
}

.support-features {
    padding: 70px 0;
    background: #f4f6f9;
}

.support-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.support-card {
    background: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    border: 1px solid #eee;
    transition: all 0.4s ease;
}

.support-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.support-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.support-card:hover .support-icon {
    background: #f47a20;
    color: #fff;
}

.support-card h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 10px;
    text-align: center;
}

.support-card p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 15px;
}

.support-list {
    list-style: none;
    padding: 0;
}

.support-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    color: #4a5a6a;
    font-size: 0.85rem;
}

.support-list li i {
    color: #f47a20;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.support-process {
    padding: 70px 0;
    background: #fff;
}

.support-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.support-step {
    text-align: center;
    padding: 30px 20px;
    background: #f8f9fc;
    border-radius: 16px;
    transition: all 0.4s ease;
    border: 1px solid #eee;
    position: relative;
}

.support-step:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.support-step-number {
    font-size: 2.8rem;
    font-weight: 900;
    color: rgba(244, 122, 32, 0.08);
    position: absolute;
    top: 5px;
    right: 15px;
}

.support-step-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.support-step:hover .support-step-icon {
    background: #f47a20;
    color: #fff;
}

.support-step h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 8px;
}

.support-step p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 10px;
}

.support-step-time {
    display: inline-block;
    background: rgba(244, 122, 32, 0.08);
    color: #f47a20;
    padding: 4px 16px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
}

.support-step-time i {
    margin-right: 6px;
}

.support-channels {
    padding: 70px 0;
    background: #f4f6f9;
}

.channels-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
}

.channel-card {
    background: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid #eee;
}

.channel-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.channel-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.channel-card:hover .channel-icon {
    background: #f47a20;
    color: #fff;
}

.channel-card h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 6px;
}

.channel-card p {
    color: #6b7a8a;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.channel-info {
    display: block;
    font-weight: 600;
    color: #0f1a2b;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.channel-time {
    display: block;
    font-size: 0.8rem;
    color: #8a9aa8;
}

.support-testimonials {
    padding: 70px 0;
    background: #fff;
}

.support-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.support-testimonial-card {
    background: #f8f9fc;
    padding: 30px;
    border-radius: 16px;
    transition: all 0.4s ease;
    border: 1px solid #eee;
}

.support-testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    border-color: #f47a20;
}

.support-testimonial-stars {
    color: #f47a20;
    margin-bottom: 15px;
}

.support-testimonial-stars i {
    margin-right: 2px;
}

.support-testimonial-card p {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.7;
    margin-bottom: 20px;
}

.support-testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.support-testimonial-author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.support-testimonial-author h4 {
    font-size: 1rem;
    color: #0f1a2b;
}

.support-testimonial-author span {
    font-size: 0.82rem;
    color: #888;
}

.support-cta .btn-secondary {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.support-cta .btn-secondary:hover {
    background: #fff;
    color: #0f1a2b;
}

/* ============================================================ */
/* INTERVIEW TIPS PAGE — Styles */
/* ============================================================ */
.tips-hero .page-hero-bg img {
    object-position: center 40%;
}

.tips-list {
    padding: 70px 0;
    background: #f4f6f9;
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.tip-card {
    background: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    border: 1px solid #eee;
    transition: all 0.4s ease;
    position: relative;
}

.tip-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.tip-number {
    font-size: 3rem;
    font-weight: 900;
    color: rgba(244, 122, 32, 0.06);
    position: absolute;
    top: 5px;
    right: 15px;
}

.tip-icon {
    width: 55px;
    height: 55px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    font-size: 1.3rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.tip-card:hover .tip-icon {
    background: #f47a20;
    color: #fff;
}

.tip-card h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 10px;
}

.tip-card p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 12px;
}

.tip-sub-list {
    list-style: none;
    padding: 0;
}

.tip-sub-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    color: #4a5a6a;
    font-size: 0.85rem;
}

.tip-sub-list li i {
    color: #22c55e;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.bonus-tips {
    padding: 70px 0;
    background: #fff;
}

.bonus-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.bonus-tag {
    display: inline-block;
    background: rgba(244, 122, 32, 0.1);
    color: #f47a20;
    padding: 4px 18px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.bonus-text h2 {
    font-size: 2rem;
    color: #0f1a2b;
    margin-bottom: 15px;
    font-weight: 800;
}

.bonus-text h2 span {
    color: #f47a20;
}

.bonus-text p {
    color: #6b7a8a;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.bonus-list {
    list-style: none;
    padding: 0;
}

.bonus-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    color: #4a5a6a;
    font-size: 0.9rem;
}

.bonus-list li i {
    color: #22c55e;
    font-size: 1rem;
    flex-shrink: 0;
}

.bonus-image img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.tips-cta .btn-secondary {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.tips-cta .btn-secondary:hover {
    background: #fff;
    color: #0f1a2b;
}

/* ============================================================ */
/* CV WRITING TIPS PAGE — Styles */
/* ============================================================ */
.cv-hero .page-hero-bg img {
    object-position: center 40%;
}

.cv-tips-list {
    padding: 70px 0;
    background: #f4f6f9;
}

.cv-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.cv-tip-card {
    background: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    border: 1px solid #eee;
    transition: all 0.4s ease;
    position: relative;
}

.cv-tip-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.cv-tip-number {
    font-size: 3rem;
    font-weight: 900;
    color: rgba(244, 122, 32, 0.06);
    position: absolute;
    top: 5px;
    right: 15px;
}

.cv-tip-icon {
    width: 55px;
    height: 55px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    font-size: 1.3rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.cv-tip-card:hover .cv-tip-icon {
    background: #f47a20;
    color: #fff;
}

.cv-tip-card h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 8px;
}

.cv-tip-card p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 12px;
}

.cv-tip-example {
    background: #f8f9fc;
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 3px solid #f47a20;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.cv-tip-example i {
    color: #f47a20;
    font-size: 0.9rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.cv-tip-example span {
    font-size: 0.85rem;
    color: #4a5a6a;
    line-height: 1.6;
}

.cv-template {
    padding: 70px 0;
    background: #fff;
}

.template-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.template-tag {
    display: inline-block;
    background: rgba(244, 122, 32, 0.1);
    color: #f47a20;
    padding: 4px 18px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.template-text h2 {
    font-size: 2rem;
    color: #0f1a2b;
    margin-bottom: 15px;
    font-weight: 800;
}

.template-text h2 span {
    color: #f47a20;
}

.template-text p {
    color: #6b7a8a;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.template-list {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

.template-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    color: #4a5a6a;
    font-size: 0.9rem;
}

.template-list li i {
    color: #22c55e;
    font-size: 1rem;
    flex-shrink: 0;
}

.template-image img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.cv-cta .btn-secondary {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.cv-cta .btn-secondary:hover {
    background: #fff;
    color: #0f1a2b;
}

/* ============================================================ */
/* CAREER GROWTH PAGE — Styles */
/* ============================================================ */
.growth-hero .page-hero-bg img {
    object-position: center 40%;
}

.growth-strategies {
    padding: 70px 0;
    background: #f4f6f9;
}

.strategy-block {
    display: flex;
    gap: 25px;
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    margin-bottom: 20px;
    border: 1px solid #eee;
    transition: all 0.4s ease;
    position: relative;
}

.strategy-block:last-child {
    margin-bottom: 0;
}

.strategy-block:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.strategy-number {
    font-size: 3.5rem;
    font-weight: 900;
    color: rgba(244, 122, 32, 0.06);
    line-height: 1;
    flex-shrink: 0;
    min-width: 60px;
}

.strategy-content {
    display: flex;
    gap: 20px;
    flex: 1;
}

.strategy-icon {
    width: 55px;
    height: 55px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #f47a20;
    flex-shrink: 0;
    transition: all 0.4s ease;
}

.strategy-block:hover .strategy-icon {
    background: #f47a20;
    color: #fff;
}

.strategy-text h3 {
    font-size: 1.1rem;
    color: #0f1a2b;
    margin-bottom: 8px;
}

.strategy-text p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 10px;
}

.strategy-list {
    list-style: none;
    padding: 0;
}

.strategy-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
    color: #4a5a6a;
    font-size: 0.85rem;
}

.strategy-list li i {
    color: #22c55e;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.growth-stats {
    padding: 50px 0;
    background: #fff;
}

.growth-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

.growth-stat-item .growth-stat-number {
    font-size: 3rem;
    font-weight: 900;
    color: #f47a20;
    line-height: 1;
}

.growth-stat-item p {
    color: #555;
    font-weight: 500;
    margin-top: 8px;
}

.growth-stat-item p i {
    color: #f47a20;
    margin-right: 6px;
}

.growth-bonus {
    padding: 70px 0;
    background: #fff;
}

.bonus-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.bonus-tag {
    display: inline-block;
    background: rgba(244, 122, 32, 0.1);
    color: #f47a20;
    padding: 4px 18px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.bonus-text h2 {
    font-size: 2rem;
    color: #0f1a2b;
    margin-bottom: 15px;
    font-weight: 800;
}

.bonus-text h2 span {
    color: #f47a20;
}

.bonus-text p {
    color: #6b7a8a;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.bonus-quote {
    background: #f8f9fc;
    padding: 20px 25px;
    border-radius: 12px;
    border-left: 4px solid #f47a20;
    margin-bottom: 20px;
}

.bonus-quote i {
    color: #f47a20;
    font-size: 1.2rem;
    margin-bottom: 8px;
    display: block;
}

.bonus-quote blockquote {
    font-size: 1rem;
    color: #0f1a2b;
    font-style: italic;
    line-height: 1.7;
    margin-bottom: 8px;
}

.bonus-quote cite {
    font-size: 0.85rem;
    color: #6b7a8a;
    font-style: normal;
}

.bonus-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.bonus-image img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.related-articles {
    padding: 70px 0;
    background: #f4f6f9;
}

.related-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.related-article-card {
    background: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid #eee;
}

.related-article-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.related-article-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.related-article-card:hover .related-article-icon {
    background: #f47a20;
    color: #fff;
}

.related-article-card h3 {
    font-size: 1rem;
    color: #0f1a2b;
    margin-bottom: 8px;
}

.related-article-card p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.related-article-link {
    color: #f47a20;
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.related-article-link:hover {
    gap: 12px;
    color: #d96a18;
}

.growth-cta .btn-secondary {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.growth-cta .btn-secondary:hover {
    background: #fff;
    color: #0f1a2b;
}

/* ============================================================ */
/* PROFESSIONAL NETWORK PAGE — Styles */
/* ============================================================ */
.network-hero .page-hero-bg img {
    object-position: center 40%;
}

.network-tips {
    padding: 70px 0;
    background: #f4f6f9;
}

.network-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.network-card {
    background: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    border: 1px solid #eee;
    transition: all 0.4s ease;
    position: relative;
}

.network-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border-color: #f47a20;
}

.network-number {
    font-size: 3rem;
    font-weight: 900;
    color: rgba(244, 122, 32, 0.06);
    position: absolute;
    top: 5px;
    right: 15px;
}

.network-icon {
    width: 55px;
    height: 55px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    font-size: 1.3rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.network-card:hover .network-icon {
    background: #f47a20;
    color: #fff;
}

.network-card h3 {
    font-size: 1.05rem;
    color: #0f1a2b;
    margin-bottom: 8px;
}

.network-card p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 12px;
}

.network-list {
    list-style: none;
    padding: 0;
}

.network-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    color: #4a5a6a;
    font-size: 0.85rem;
}

.network-list li i {
    color: #22c55e;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.networking-platforms {
    padding: 70px 0;
    background: #fff;
}

.platforms-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.platform-card {
    padding: 30px 25px;
    background: #f8f9fc;
    border-radius: 16px;
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid #eee;
}

.platform-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.06);
    border-color: #f47a20;
}

.platform-icon {
    width: 60px;
    height: 60px;
    background: rgba(244, 122, 32, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: #f47a20;
    transition: all 0.4s ease;
}

.platform-card:hover .platform-icon {
    background: #f47a20;
    color: #fff;
}

.platform-card h3 {
    font-size: 1rem;
    color: #0f1a2b;
    margin-bottom: 8px;
}

.platform-card p {
    color: #6b7a8a;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.platform-link {
    color: #f47a20;
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.platform-link:hover {
    gap: 12px;
    color: #d96a18;
}

.network-stats {
    padding: 50px 0;
    background: #f4f6f9;
}

.network-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

.network-stat-item .network-stat-number {
    font-size: 3rem;
    font-weight: 900;
    color: #f47a20;
    line-height: 1;
}

.network-stat-item p {
    color: #555;
    font-weight: 500;
    margin-top: 8px;
}

.network-stat-item p i {
    color: #f47a20;
    margin-right: 6px;
}

.network-bonus {
    padding: 70px 0;
    background: #fff;
}

.bonus-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.bonus-tag {
    display: inline-block;
    background: rgba(244, 122, 32, 0.1);
    color: #f47a20;
    padding: 4px 18px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.bonus-text h2 {
    font-size: 2rem;
    color: #0f1a2b;
    margin-bottom: 15px;
    font-weight: 800;
}

.bonus-text h2 span {
    color: #f47a20;
}

.bonus-text p {
    color: #6b7a8a;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.bonus-quote {
    background: #f8f9fc;
    padding: 20px 25px;
    border-radius: 12px;
    border-left: 4px solid #f47a20;
    margin-bottom: 20px;
}

.bonus-quote i {
    color: #f47a20;
    font-size: 1.2rem;
    margin-bottom: 8px;
    display: block;
}

.bonus-quote blockquote {
    font-size: 1rem;
    color: #0f1a2b;
    font-style: italic;
    line-height: 1.7;
}

.bonus-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.bonus-image img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.network-cta .btn-secondary {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.network-cta .btn-secondary:hover {
    background: #fff;
    color: #0f1a2b;
}

/* ============================================================ */
/* FORM PROGRESS - Additional Styles */
/* ============================================================ */
.form-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 30px;
}

.form-progress-step {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.form-progress-step .step-number {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #e8ecf0;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    transition: all 0.4s ease;
}

.form-progress-step.active .step-number {
    background: #f47a20;
    color: #fff;
}

.form-progress-step.completed .step-number {
    background: #28a745;
    color: #fff;
}

.form-progress-step .step-label {
    font-size: 0.8rem;
    color: #999;
    font-weight: 500;
    transition: color 0.3s ease;
}

.form-progress-step.active .step-label {
    color: #0f1a2b;
}

.form-progress-line {
    flex: 1;
    height: 2px;
    background: #e8ecf0;
    margin: 0 10px;
    max-width: 60px;
    transition: background 0.4s ease;
}

.form-step {
    display: none;
    animation: fadeIn 0.4s ease;
}

.form-step.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================ */
/* ADMIN DASHBOARD - Enhanced Styles */
/* ============================================================ */

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.admin-stat-card {
    background: #fff;
    padding: 20px 25px;
    border-radius: 12px;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.admin-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    border-color: #f47a20;
}

.admin-stat-card .stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.admin-stat-card .stat-icon.total {
    background: #e0e7ff;
    color: #4f46e5;
}

.admin-stat-card .stat-icon.pending {
    background: #fef3c7;
    color: #d97706;
}

.admin-stat-card .stat-icon.approved {
    background: #d1fae5;
    color: #059669;
}

.admin-stat-card .stat-icon.rejected {
    background: #fee2e2;
    color: #dc2626;
}

.admin-stat-card .stat-icon.green {
    background: #d1fae5;
    color: #059669;
}

.admin-stat-card .stat-icon.blue {
    background: #dbeafe;
    color: #2563eb;
}

.admin-stat-card .stat-icon.orange {
    background: #fef3c7;
    color: #d97706;
}

.admin-stat-card .stat-icon.purple {
    background: #ede9fe;
    color: #7c3aed;
}

.admin-stat-card .stat-icon.red {
    background: #fee2e2;
    color: #dc2626;
}

.admin-stat-card .stat-info h3 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #0f1a2b;
    line-height: 1;
}

.admin-stat-card .stat-info p {
    font-size: 0.85rem;
    color: #6b7a8a;
    margin-top: 2px;
}

/* Admin Table */
.admin-table-wrapper {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #eee;
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

.admin-table th {
    text-align: left;
    padding: 12px 15px;
    background: #f8f9fc;
    font-weight: 600;
    color: #0f1a2b;
    border-bottom: 2px solid #eee;
    font-size: 0.85rem;
}

.admin-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f2f5;
    vertical-align: middle;
    font-size: 0.9rem;
    color: #4a5a6a;
}

.admin-table .status-badge {
    display: inline-block;
    padding: 3px 14px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
}

.admin-table .status-badge.pending {
    background: #fef3c7;
    color: #d97706;
}

.admin-table .status-badge.approved {
    background: #d1fae5;
    color: #059669;
}

.admin-table .status-badge.rejected {
    background: #fee2e2;
    color: #dc2626;
}

.admin-table .actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.admin-table .actions .btn {
    padding: 4px 12px;
    font-size: 0.7rem;
}

.admin-table .actions .btn-success {
    background: #22c55e;
    color: #fff;
}

.admin-table .actions .btn-success:hover {
    background: #16a34a;
}

.admin-table .actions .btn-danger {
    background: #ef4444;
    color: #fff;
}

.admin-table .actions .btn-danger:hover {
    background: #dc2626;
}

.admin-table .actions .btn-warning {
    background: #f59e0b;
    color: #fff;
}

.admin-table .actions .btn-warning:hover {
    background: #d97706;
}

.admin-table .actions .btn-outline-primary {
    background: transparent;
    color: #f47a20;
    border: 1px solid #f47a20;
}

.admin-table .actions .btn-outline-primary:hover {
    background: #f47a20;
    color: #fff;
}

.admin-table .actions .btn-outline-info {
    background: transparent;
    color: #2563eb;
    border: 1px solid #2563eb;
}

.admin-table .actions .btn-outline-info:hover {
    background: #2563eb;
    color: #fff;
}

.admin-table .no-data {
    text-align: center;
    padding: 40px;
    color: #8a9aa8;
}

.admin-table .no-data i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 15px;
    color: #d1d5db;
}

/* Admin Tabs */
.admin-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.admin-tab {
    padding: 10px 24px;
    border-radius: 50px;
    border: 1px solid #ddd;
    background: #fff;
    color: #6b7a8a;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.admin-tab:hover {
    border-color: #f47a20;
    color: #f47a20;
}

.admin-tab.active {
    background: #f47a20;
    color: #fff;
    border-color: #f47a20;
}

.admin-tab i {
    margin-right: 6px;
}

/* ============================================================ */
/* RESPONSIVE — CORRECTED MOBILE STYLES */
/* ============================================================ */

/* Large screens - Desktop */
@media (min-width: 992px) {
    .flyer-carousel {
        max-width: 420px;
        aspect-ratio: 3 / 4;
        border-radius: 16px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    }
    
    .hero-image {
        display: flex !important;
        justify-content: center;
        align-items: center;
    }
    
    .hero-content {
        gap: 30px !important;
    }
    
    .hero-text h1 {
        font-size: 2.2rem !important;
    }
    
    .flyer-slide-overlay {
        padding: 20px 20px 18px;
    }
    
    .flyer-slide-overlay h3 {
        font-size: 0.95rem;
    }
    
    .flyer-slide-overlay p {
        font-size: 0.75rem;
    }
}

/* Mobile & Tablet - Up to 991px */
@media (max-width: 991px) {
    /* ========================================================== */
    /* HERO - HOME PAGE: Side by side on ALL screens */
    /* ========================================================== */
    
     .hero-content {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
        align-items: center !important;
    }
    
     .hero-image {
        order: 0 !important;
        grid-column: 1 / 2 !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    .hero-image img {
        max-width: 200px !important;
        width: 100% !important;
    }
    
    .hero-text {
        order: 1 !important;
        grid-column: 2 / 3 !important;
        text-align: left !important;
        margin-left: 0 !important;
    }
    
     .hero-text h1 {
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
        margin-top: 100px !important;
    }
    
    .hero-text p {
        font-size: 0.5rem !important;
        max-width: 70% !important;
        margin-bottom: 10px !important;
    }
    
     .hero-buttons .btn {
        font-size: 0.6rem !important;
        padding: 5px 12px !important;
    }
    
     .hero-buttons {
        gap: 6px !important;
        flex-wrap: wrap !important;
    }
    
    .hero-badge {
        font-size: 0.55rem !important;
        padding: 3px 10px !important;
        margin-bottom: 8px !important;
        position: absolute !important;
        top: 20px !important;
    }
    
     .flyer-carousel {
        max-width: 160px !important;
        aspect-ratio: 3 / 4 !important;
        margin: 0 !important;
    }
    
     .flyer-slide-overlay {
        padding: 6px 8px !important;
    }
    
    .flyer-slide-overlay h3 {
        font-size: 0.55rem !important;
        margin-bottom: 2px !important;
    }
    
     .flyer-slide-overlay p {
        font-size: 0.45rem !important;
        margin-bottom: 4px !important;
    }
    
    .flyer-slide-overlay .flyer-tag {
        font-size: 0.4rem !important;
        padding: 1px 6px !important;
    }
    
     .flyer-slide-overlay .flyer-ref {
        font-size: 0.4rem !important;
        margin-left: 4px !important;
    }
     .carousel-control {
        width: 18px !important;
        height: 18px !important;
        font-size: 0.45rem !important;
    }
    
     .carousel-control.prev {
        left: 3px !important;
    }
    
     .carousel-control.next {
        right: 3px !important;
    }
    
    .carousel-indicators {
        bottom: 6px !important;
        gap: 4px !important;
    }
    
     .carousel-indicators .indicator {
        width: 4px !important;
        height: 4px !important;
    }
    
     .carousel-indicators .indicator.active {
        width: 10px !important;
    }
    
     .hero-floating-badge {
        display: none !important;
    }
    
     .scroll-indicator {
        display: none !important;
    }
    
     .search-box {
        display: none !important;
    }
    
    /* ========================================================== */
    /* HERO - OTHER PAGES: No image, centered text */
    /* ========================================================== */
    
    .page-hero-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    .page-hero-image {
        display: none !important;
    }
    
    .page-hero-text {
        text-align: center !important;
        padding: 0 15px !important;
        width: 100% !important;
    }
    
    .page-hero-text h1 {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
    }
    
    .page-hero-text p {
        font-size: 0.95rem !important;
        max-width: 100% !important;
        margin: 0 auto 15px !important;
    }
    
    .page-hero-badge {
        font-size: 0.7rem !important;
        padding: 4px 14px !important;
        margin-bottom: 12px !important;
        display: inline-block !important;
        position: relative !important;
        top: auto !important;
    }
    
    .page-hero-buttons {
        justify-content: center !important;
        gap: 10px !important;
    }
    
    .page-hero-buttons .btn {
        font-size: 0.8rem !important;
        padding: 8px 18px !important;
    }
    
    .page-hero {
        min-height: auto !important;
        padding: 80px 0 40px !important;
    }
    
    /* ========================================================== */
    /* NAVBAR - Mobile */
    /* ========================================================== */
    .unique-hamburger {
        display: flex !important;
    }

    header nav {
        display: none !important;
        width: 100% !important;
        flex-basis: 100% !important;
        order: 3 !important;
    }

    header nav.active {
        display: block !important;
    }

    header nav ul {
        flex-direction: column !important;
        padding: 10px 0 !important;
        gap: 0 !important;
    }

    header nav ul li a {
        display: block !important;
        padding: 10px 16px !important;
    }

    header nav ul li a::after {
        display: none !important;
    }

    .nav-actions .btn {
        padding: 6px 14px !important;
        font-size: 0.75rem !important;
    }

    header .logo .logo-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
    }

    header .logo span {
        font-size: 1rem !important;
    }

    /* ========================================================== */
    /* STATS GRIDS */
    /* ========================================================== */
    .stats .container,
    .page-stats-grid,
    .about-stats-grid,
    .careers-stats-grid,
    .partner-stats-grid,
    .candidates-stats-grid,
    .quick-stats-grid,
    .insights-stats-grid,
    .support-stats-grid,
    .service-stats-grid,
    .network-stats-grid,
    .growth-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .stat-item .stat-number,
    .page-stat-number,
    .about-stat-number,
    .careers-stat-number,
    .partner-stat-number,
    .candidates-stat-number,
    .quick-stat-number,
    .insights-stat-number,
    .support-stat-number,
    .service-stat-number,
    .network-stat-number,
    .growth-stat-number {
        font-size: 1.3rem !important;
    }

    .stat-item p,
    .page-stat-item p,
    .about-stat-item p,
    .careers-stat-item p,
    .partner-stat-item p,
    .candidates-stat-item p,
    .quick-stat-item p,
    .insights-stat-item p,
    .support-stat-item p,
    .service-stat-item p,
    .network-stat-item p,
    .growth-stat-item p {
        font-size: 0.8rem !important;
    }

    /* ========================================================== */
    /* CATEGORY GRID */
    /* ========================================================== */
    .category-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }

    .category-card {
        padding: 15px 10px !important;
    }

    .category-card .category-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.1rem !important;
    }

    .category-card h3 {
        font-size: 0.75rem !important;
    }

    /* ========================================================== */
    /* EXPERIENCE GRID */
    /* ========================================================== */
    .experience-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px !important;
    }

    .experience-card {
        padding: 20px 15px !important;
    }

    .experience-card .experience-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.3rem !important;
    }

    .experience-card h3 {
        font-size: 0.9rem !important;
    }

    .experience-card p {
        font-size: 0.8rem !important;
    }

    .experience-card .job-count {
        font-size: 1rem !important;
    }

    /* ========================================================== */
    /* STEPS */
    /* ========================================================== */
    .steps,
    .steps-detailed,
    .employer-steps-grid,
    .approach-grid,
    .growth-solutions .growth-grid,
    .consulting-grid,
    .screening-grid,
    .insights-grid,
    .support-grid,
    .outsource-grid,
    .growth-steps,
    .process-steps,
    .consulting-approach .approach-steps,
    .insights-steps {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    /* ========================================================== */
    /* TESTIMONIALS */
    /* ========================================================== */
    .testimonials-grid,
    .testimonials-simple-grid,
    .employer-testimonials-grid,
    .partner-testimonials-grid,
    .about-testimonials-grid,
    .service-testimonials-grid,
    .consulting-testimonials-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .testimonial-card,
    .testimonial-simple-card,
    .employer-testimonial-card,
    .partner-testimonial-card,
    .about-testimonial-card,
    .service-testimonial-card,
    .consulting-testimonial-card {
        padding: 20px !important;
    }

    /* ========================================================== */
    /* EMPLOYER SECTION */
    /* ========================================================== */
    .employer-content,
    .post-job-content,
    .become-partner-content,
    .bonus-content,
    .template-content {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        text-align: center !important;
    }

    .employer-text p,
    .post-job-text > p,
    .become-partner-text p {
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .employer-benefits,
    .post-job-features,
    .become-partner-features {
        justify-items: center !important;
    }

    .employer-benefits li {
        justify-content: center !important;
    }

    .post-job-feature {
        justify-content: center !important;
    }

    .become-partner-features li {
        justify-content: center !important;
    }

    .employer-buttons,
    .post-job-buttons,
    .become-partner-buttons {
        justify-content: center !important;
    }

    .employer-image,
    .post-job-image,
    .become-partner-image,
    .bonus-image,
    .template-image {
        order: -1 !important;
    }

    /* ========================================================== */
    /* TEAM GRID */
    /* ========================================================== */
    .team-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .team-image {
        height: 190px !important;
    }

    .team-info h4 {
        font-size: 0.95rem !important;
    }

    /* ========================================================== */
    /* VALUES / BENEFITS / WHY PARTNER */
    /* ========================================================== */
    .values-grid,
    .benefits-grid,
    .employer-benefits-grid,
    .why-partner-grid,
    .pre-screened-grid,
    .quick-features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    /* ========================================================== */
    /* SERVICES / INDUSTRIES */
    /* ========================================================== */
    .services-grid,
    .why-choose-grid,
    .industries-grid,
    .outsource-benefits .benefits-grid,
    .growth-benefits-grid,
    .consulting-benefits-grid,
    .channels-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .service-card,
    .why-choose-card,
    .industry-card,
    .benefit-card,
    .growth-benefit-card,
    .consulting-benefit-card,
    .channel-card {
        padding: 20px 15px !important;
    }

    /* ========================================================== */
    /* JOB LISTINGS */
    /* ========================================================== */
    .job-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
        gap: 20px !important;
    }

    .job-listings-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important;
    }

    .job-listings-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .search-box-mini {
        width: 100% !important;
    }

    .search-box-mini input {
        width: 100% !important;
    }

    .sort-box {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .sort-box select {
        flex: 1 !important;
    }

    .filter-tabs {
        justify-content: center !important;
    }

    .filter-tab {
        font-size: 0.75rem !important;
        padding: 6px 14px !important;
    }

    .job-listings-grid .job-card {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 18px !important;
    }

    .job-listings-grid .job-card .job-actions {
        width: 100% !important;
    }

    .job-listings-grid .job-card .job-actions .btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    .job-listings-title h2 {
        font-size: 1.8rem !important;
    }

    /* ========================================================== */
    /* CAREER TIPS */
    /* ========================================================== */
    .career-tips-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    /* ========================================================== */
    /* PARTNER LIST */
    /* ========================================================== */
    .partner-list-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .partner-details {
        grid-template-columns: 1fr 1fr !important;
    }

    .partner-logo-large {
        width: 80px !important;
        height: 80px !important;
        font-size: 2.2rem !important;
    }

    /* ========================================================== */
    /* CONTACT */
    /* ========================================================== */
    .contact-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .location-info {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .contact-card {
        padding: 25px 20px !important;
    }

    .map-wrapper iframe {
        height: 300px !important;
    }

    .map-overlay {
        bottom: 15px !important;
        padding: 10px 16px !important;
        border-radius: 30px !important;
    }

    .map-overlay-content p {
        font-size: 0.8rem !important;
    }

    .map-overlay-content span {
        display: none !important;
    }

    /* ========================================================== */
    /* REGISTRATION */
    /* ========================================================== */
    .registration-wrapper {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .registration-info {
        position: relative !important;
        top: 0 !important;
    }

    .registration-info-content h2 {
        font-size: 1.5rem !important;
    }

    .registration-form-wrapper {
        padding: 25px !important;
    }

    .registration-form-header h3 {
        font-size: 1.2rem !important;
    }

    .form-progress {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .form-progress-step .step-label {
        display: none !important;
    }

    .form-progress-line {
        max-width: 30px !important;
    }

    /* ========================================================== */
    /* DASHBOARD */
    /* ========================================================== */
    .dashboard-layout {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .dashboard-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    .admin-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    .dashboard-header {
        flex-direction: column !important;
        text-align: center !important;
        padding: 20px !important;
    }

    .dashboard-header .user-info {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .dashboard-header .user-details h1 {
        font-size: 1.2rem !important;
    }

    .dashboard-header .user-actions {
        width: 100% !important;
        justify-content: center !important;
    }

    .dashboard-header .user-actions .btn {
        flex: 1 !important;
        justify-content: center !important;
        min-width: 100px !important;
    }

    .dashboard-applications {
        padding: 18px !important;
    }

    .application-item {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px 14px !important;
    }

    .application-item .app-status {
        justify-content: space-between !important;
    }

    .dashboard-card {
        padding: 18px !important;
    }

    .saved-job-item {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 10px 0 !important;
    }

    .saved-job-item .saved-actions {
        justify-content: flex-start !important;
        gap: 6px !important;
    }

    .saved-job-item .saved-actions .btn {
        font-size: 0.65rem !important;
        padding: 3px 10px !important;
    }

    /* ========================================================== */
    /* ADMIN DASHBOARD */
    /* ========================================================== */
    .admin-header {
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
    }

    .admin-header h1 {
        font-size: 1.5rem !important;
    }

    .admin-tabs {
        justify-content: center !important;
    }

    .admin-tab {
        font-size: 0.75rem !important;
        padding: 6px 14px !important;
    }

    .admin-table-wrapper {
        padding: 12px !important;
    }

    .admin-table {
        min-width: 500px !important;
        font-size: 0.8rem !important;
    }

    .admin-table th,
    .admin-table td {
        padding: 8px 10px !important;
        font-size: 0.75rem !important;
    }

    .admin-table .actions .btn {
        font-size: 0.6rem !important;
        padding: 2px 8px !important;
    }

    .admin-stat-card {
        padding: 15px !important;
        flex-direction: column !important;
        text-align: center !important;
    }

    .admin-stat-card .stat-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }

    .admin-stat-card .stat-info h3 {
        font-size: 1.4rem !important;
    }

    /* ========================================================== */
    /* JOB DETAIL */
    /* ========================================================== */
    .job-detail-content {
        padding: 25px !important;
    }

    .job-detail-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important;
    }

    .job-detail-apply-btn {
        width: 100% !important;
    }

    .job-detail-apply-btn .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .job-detail-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .job-detail-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .job-detail-company {
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
    }

    .job-detail-company img {
        width: 50px !important;
        height: 50px !important;
    }

    .job-detail-company h2 {
        font-size: 1.2rem !important;
    }

    .job-detail-meta {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .job-detail-meta span {
        font-size: 0.8rem !important;
    }

    .related-jobs-grid,
    .related-articles-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    /* ========================================================== */
    /* APPLY PAGE */
    /* ========================================================== */
    .apply-job-header {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: center !important;
        padding: 20px !important;
    }

    .apply-form-wrapper {
        padding: 25px !important;
    }

    .form-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .form-actions .btn {
        min-width: 100% !important;
    }

    /* ========================================================== */
    /* LOGIN PAGES */
    /* ========================================================== */
    .login-card {
        padding: 30px 25px !important;
    }

    .admin-login-box {
        padding: 30px 25px !important;
    }

    .reset-password-card {
        padding: 30px 25px !important;
    }

    .reset-password-card .password-requirements {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    /* ========================================================== */
    /* POST JOB */
    /* ========================================================== */
    .post-job-form {
        padding: 25px !important;
    }

    .form-row {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* ========================================================== */
    /* EDIT PROFILE */
    /* ========================================================== */
    .edit-profile-card {
        padding: 25px 20px !important;
    }

    .profile-photo-wrapper {
        width: 100px !important;
        height: 100px !important;
    }

    .profile-photo-wrapper .profile-photo {
        width: 100px !important;
        height: 100px !important;
    }

    .profile-photo-wrapper .photo-upload-btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.75rem !important;
    }

    /* ========================================================== */
    /* APPLICATIONS SECTION */
    /* ========================================================== */
    .application-card .applicant-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .applicant-actions {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 6px !important;
    }

    .documents-section {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .document-item {
        width: 100% !important;
        justify-content: space-between !important;
        padding: 6px 12px !important;
    }

    .document-item .file-name {
        max-width: 100px !important;
        font-size: 0.75rem !important;
    }

    .filter-applications {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .filter-applications select {
        max-width: 100% !important;
    }

    /* ========================================================== */
    /* FOOTER */
    /* ========================================================== */
    .footer-top {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .footer-links {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .footer-brand p {
        max-width: 100% !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
    }

    .footer-bottom-right {
        justify-content: center !important;
    }

    /* ========================================================== */
    /* CTA SECTIONS */
    /* ========================================================== */
    .cta-buttons {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .cta-buttons .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .cta-simple-buttons {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .cta-simple-buttons .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .cta-content h2 {
        font-size: 2rem !important;
    }

    .cta-simple-content h2 {
        font-size: 2rem !important;
    }

    /* ========================================================== */
    /* SECTION HEADERS */
    /* ========================================================== */
    .section-header h2 {
        font-size: 2rem !important;
    }

    .section-header p {
        font-size: 0.9rem !important;
    }

    /* ========================================================== */
    /* BUTTONS */
    /* ========================================================== */
    .btn-lg {
        padding: 12px 28px !important;
        font-size: 0.9rem !important;
    }

    .btn {
        font-size: 0.82rem !important;
        padding: 8px 20px !important;
    }

    /* ========================================================== */
    /* STORIES GRID */
    /* ========================================================== */
    .stories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    /* ========================================================== */
    /* COMPARISON TABLE */
    /* ========================================================== */
    .comparison-table {
        grid-template-columns: 1.5fr 1fr 1fr !important;
        font-size: 0.85rem !important;
    }

    .comparison-col {
        padding: 12px 15px !important;
        font-size: 0.85rem !important;
    }

    /* ========================================================== */
    /* DASHBOARD PREVIEW */
    /* ========================================================== */
    .dashboard-preview {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    .dashboard-card {
        padding: 20px !important;
    }

    /* ========================================================== */
    /* TIPS GRIDS */
    /* ========================================================== */
    .tips-grid,
    .cv-grid,
    .network-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* ========================================================== */
    /* STRATEGY BLOCK */
    /* ========================================================== */
    .strategy-block {
        flex-direction: column !important;
        gap: 15px !important;
        padding: 20px !important;
    }

    .strategy-content {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .strategy-number {
        font-size: 2.5rem !important;
        min-width: auto !important;
    }

    /* ========================================================== */
    /* SUCCESS MODAL */
    /* ========================================================== */
    .success-modal-content {
        padding: 30px 25px 25px !important;
    }

    .success-modal-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 2rem !important;
    }

    .success-modal-content h2 {
        font-size: 1.3rem !important;
    }

    .success-modal-content p {
        font-size: 0.9rem !important;
    }

    .success-modal-buttons {
        flex-direction: column !important;
    }

    .success-modal-buttons .btn {
        min-width: 100% !important;
    }

    .success-overlay-content .success-icon {
        width: 70px !important;
        height: 70px !important;
        font-size: 2.5rem !important;
    }

    .success-overlay-content h2 {
        font-size: 1.5rem !important;
    }

    .success-overlay-content p {
        font-size: 0.9rem !important;
    }

    .success-overlay-content .loading-bar {
        width: 200px !important;
    }

    /* ========================================================== */
    /* BACK TO TOP */
    /* ========================================================== */
    #backToTop {
        width: 38px !important;
        height: 38px !important;
        font-size: 0.9rem !important;
        bottom: 15px !important;
        right: 15px !important;
    }

    /* ========================================================== */
    /* CONTAINERS */
    /* ========================================================== */
    .container {
        padding: 0 15px !important;
    }

    /* ========================================================== */
    /* PASSWORD REQUIREMENTS */
    /* ========================================================== */
    .password-requirements {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        padding: 10px 14px !important;
    }

    .password-requirements .req-item {
        font-size: 0.72rem !important;
    }
}

/* Extra small screens - Mobile phones (767px and below) */
@media (max-width: 767px) {
    /* Home page - keep side by side */
     .hero-content {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        align-items: center !important;
    }
    
    .hero-image img {
        max-width: 140px !important;
        margin-left: 20px;
    }
    
     .hero-text h1 {
        font-size: 0.5rem !important;
    }
    
     .hero-text p {
        font-size: 0.3rem !important;
    }
    
     .hero-buttons .btn {
        font-size: 0.55rem !important;
        padding: 4px 10px !important;
    }
    
     .flyer-carousel {
        max-width: 130px !important;
    }
    
    .flyer-slide-overlay h3 {
        font-size: 0.45rem !important;
    }
    
     .flyer-slide-overlay p {
        font-size: 0.4rem !important;
    }
    
     .flyer-slide-overlay .flyer-tag {
        font-size: 0.35rem !important;
        padding: 0 4px !important;
    }
    
    .carousel-control {
        width: 14px !important;
        height: 14px !important;
        font-size: 0.35rem !important;
    }
    
    /* Other pages - centered text, no image */
    .page-hero-text h1 {
        font-size: 1.5rem !important;
    }
    
    .page-hero-text p {
        font-size: 0.85rem !important;
    }
    
    .page-hero {
        padding: 70px 0 30px !important;
    }
    
    .page-hero-buttons .btn {
        font-size: 0.75rem !important;
        padding: 6px 14px !important;
    }
    
    .page-hero-buttons {
        gap: 8px !important;
    }

    /* ========================================================== */
    /* NAVBAR - Small Mobile */
    /* ========================================================== */
    header .logo .logo-icon {
        width: 35px !important;
        height: 3px !important;
       
    }

    header .logo span {
        font-size: 0.95rem !important;
    }

    .nav-actions .btn {
        padding: 4px 10px !important;
        font-size: 0.65rem !important;
    }

    .unique-hamburger {
        width: 28px !important;
        height: 28px !important;
    }

    .unique-hamburger .dot {
        width: 5px !important;
        height: 5px !important;
    }

    .unique-hamburger.active .dot:nth-child(1),
    .unique-hamburger.active .dot:nth-child(3) {
        width: 16px !important;
        height: 2.5px !important;
    }

    /* ========================================================== */
    /* STATS GRIDS */
    /* ========================================================== */
    .stats .container,
    .page-stats-grid,
    .about-stats-grid,
    .careers-stats-grid,
    .partner-stats-grid,
    .candidates-stats-grid,
    .quick-stats-grid,
    .insights-stats-grid,
    .support-stats-grid,
    .service-stats-grid,
    .network-stats-grid,
    .growth-stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
    }

    .stat-item .stat-number,
    .page-stat-number,
    .about-stat-number,
    .careers-stat-number,
    .partner-stat-number,
    .candidates-stat-number,
    .quick-stat-number,
    .insights-stat-number,
    .support-stat-number,
    .service-stat-number,
    .network-stat-number,
    .growth-stat-number {
        font-size: 1.3rem !important;
    }

    .stat-item p,
    .page-stat-item p,
    .about-stat-item p,
    .careers-stat-item p,
    .partner-stat-item p,
    .candidates-stat-item p,
    .quick-stat-item p,
    .insights-stat-item p,
    .support-stat-item p,
    .service-stat-item p,
    .network-stat-item p,
    .growth-stat-item p {
        font-size: 0.8rem !important;
    }

    /* ========================================================== */
    /* CATEGORY GRID */
    /* ========================================================== */
    .category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .category-card {
        padding: 12px 8px !important;
    }

    .category-card .category-icon {
        width: 35px !important;
        height: 35px !important;
        font-size: 0.9rem !important;
    }

    .category-card h3 {
        font-size: 0.7rem !important;
    }

    /* ========================================================== */
    /* EXPERIENCE GRID */
    /* ========================================================== */
    .experience-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .experience-card {
        padding: 15px 12px !important;
    }

    .experience-card .experience-icon {
        width: 45px !important;
        height: 45px !important;
        font-size: 1.2rem !important;
    }

    .experience-card h3 {
        font-size: 0.85rem !important;
    }

    .experience-card p {
        font-size: 0.75rem !important;
    }

    .experience-card .job-count {
        font-size: 0.95rem !important;
    }

    /* ========================================================== */
    /* STEPS - Single column */
    /* ========================================================== */
    .steps,
    .steps-detailed,
    .employer-steps-grid,
    .approach-grid,
    .growth-solutions .growth-grid,
    .consulting-grid,
    .screening-grid,
    .insights-grid,
    .support-grid,
    .outsource-grid,
    .growth-steps,
    .process-steps,
    .consulting-approach .approach-steps,
    .insights-steps {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* ========================================================== */
    /* TESTIMONIALS - Single column */
    /* ========================================================== */
    .testimonials-grid,
    .testimonials-simple-grid,
    .employer-testimonials-grid,
    .partner-testimonials-grid,
    .about-testimonials-grid,
    .service-testimonials-grid,
    .consulting-testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .testimonial-card,
    .testimonial-simple-card,
    .employer-testimonial-card,
    .partner-testimonial-card,
    .about-testimonial-card,
    .service-testimonial-card,
    .consulting-testimonial-card {
        padding: 20px !important;
    }

    /* ========================================================== */
    /* TEAM GRID */
    /* ========================================================== */
    .team-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
    }

    .team-image {
        height: 180px !important;
    }

    .team-info {
        padding: 15px !important;
    }

    .team-info h4 {
        font-size: 0.9rem !important;
    }

    /* ========================================================== */
    /* VALUES / BENEFITS / WHY PARTNER - Single column */
    /* ========================================================== */
    .values-grid,
    .benefits-grid,
    .employer-benefits-grid,
    .why-partner-grid,
    .pre-screened-grid,
    .quick-features-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* ========================================================== */
    /* SERVICES / INDUSTRIES */
    /* ========================================================== */
    .services-grid,
    .why-choose-grid,
    .industries-grid,
    .outsource-benefits .benefits-grid,
    .growth-benefits-grid,
    .consulting-benefits-grid,
    .channels-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
    }

    .service-card,
    .why-choose-card,
    .industry-card,
    .benefit-card,
    .growth-benefit-card,
    .consulting-benefit-card,
    .channel-card {
        padding: 20px 15px !important;
    }

    /* ========================================================== */
    /* JOB LISTINGS */
    /* ========================================================== */
    .job-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .job-card {
        padding: 18px !important;
    }

    .job-listings-grid .job-card {
        padding: 15px !important;
    }

    .job-listings-grid .job-card h3 {
        font-size: 0.95rem !important;
    }

    .job-listings-title h2 {
        font-size: 1.5rem !important;
    }

    .filter-tabs {
        gap: 6px !important;
    }

    .filter-tab {
        font-size: 0.7rem !important;
        padding: 4px 12px !important;
    }

    /* ========================================================== */
    /* CAREER TIPS */
    /* ========================================================== */
    .career-tips-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .career-tip-image {
        height: 150px !important;
    }

    /* ========================================================== */
    /* PARTNER LIST */
    /* ========================================================== */
    .partner-card-image {
        padding: 30px 15px !important;
    }

    .partner-logo-large {
        width: 80px !important;
        height: 80px !important;
        font-size: 2.2rem !important;
    }

    .partner-card-body {
        padding: 18px !important;
    }

    .partner-details {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .partner-card-actions {
        flex-direction: column !important;
    }

    .partner-card-actions .btn {
        flex: none !important;
        width: 100% !important;
    }

    /* ========================================================== */
    /* CONTACT */
    /* ========================================================== */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .contact-card {
        padding: 25px 20px !important;
    }

    .location-info {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .map-wrapper iframe {
        height: 250px !important;
    }

    .map-overlay {
        bottom: 15px !important;
        padding: 10px 16px !important;
        border-radius: 30px !important;
    }

    .map-overlay-content p {
        font-size: 0.8rem !important;
    }

    .map-overlay-content span {
        display: none !important;
    }

    /* ========================================================== */
    /* REGISTRATION */
    /* ========================================================== */
    .registration-wrapper {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .registration-info {
        padding: 25px 20px !important;
    }

    .registration-info-content h2 {
        font-size: 1.4rem !important;
    }

    .registration-benefit {
        padding: 10px 14px !important;
    }

    .registration-form-wrapper {
        padding: 25px 20px !important;
    }

    .registration-form-header h3 {
        font-size: 1.2rem !important;
    }

    .form-progress {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .form-progress-step .step-label {
        display: none !important;
    }

    .form-progress-line {
        max-width: 30px !important;
    }

    .form-progress-step .step-number {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.75rem !important;
    }

    .form-group label {
        font-size: 0.8rem !important;
    }

    .input-wrapper input,
    .input-wrapper select {
        padding: 10px 12px 10px 38px !important;
        font-size: 0.9rem !important;
    }

    .input-wrapper i {
        left: 12px !important;
        font-size: 0.8rem !important;
    }

    .form-navigation {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .form-navigation .btn {
        min-width: 100% !important;
    }

    .checkbox-label {
        font-size: 0.8rem !important;
    }

    .checkbox-label input[type="checkbox"] {
        width: 16px !important;
        height: 16px !important;
    }

    .file-upload-area {
        padding: 20px 15px !important;
    }

    .file-upload-area .upload-icon {
        font-size: 2rem !important;
    }

    .file-upload-area .upload-text {
        font-size: 0.85rem !important;
    }

    .file-upload-area .upload-subtext {
        font-size: 0.75rem !important;
    }

    /* ========================================================== */
    /* DASHBOARD */
    /* ========================================================== */
    .dashboard-stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .dashboard-stat-card {
        padding: 15px 18px !important;
    }

    .dashboard-stat-card .stat-info h3 {
        font-size: 1.3rem !important;
    }

    .dashboard-stat-card .stat-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }

    .dashboard-header {
        padding: 20px !important;
        flex-direction: column !important;
        text-align: center !important;
    }

    .dashboard-header .user-info {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .dashboard-header .user-details h1 {
        font-size: 1.2rem !important;
    }

    .dashboard-header .user-actions {
        width: 100% !important;
        justify-content: center !important;
    }

    .dashboard-header .user-actions .btn {
        flex: 1 !important;
        justify-content: center !important;
        min-width: 100px !important;
    }

    .dashboard-applications {
        padding: 18px !important;
    }

    .application-item {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px 14px !important;
    }

    .application-item .app-status {
        justify-content: space-between !important;
    }

    .dashboard-card {
        padding: 18px !important;
    }

    .saved-job-item {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 10px 0 !important;
    }

    .saved-job-item .saved-actions {
        justify-content: flex-start !important;
        gap: 6px !important;
    }

    .saved-job-item .saved-actions .btn {
        font-size: 0.65rem !important;
        padding: 3px 10px !important;
    }

    .dashboard-stats {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* ========================================================== */
    /* ADMIN DASHBOARD */
    /* ========================================================== */
    .admin-stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .admin-stat-card {
        padding: 15px !important;
        flex-direction: column !important;
        text-align: center !important;
    }

    .admin-stat-card .stat-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }

    .admin-stat-card .stat-info h3 {
        font-size: 1.4rem !important;
    }

    .admin-header h1 {
        font-size: 1.5rem !important;
    }

    .admin-tabs {
        justify-content: center !important;
    }

    .admin-tab {
        font-size: 0.75rem !important;
        padding: 6px 14px !important;
    }

    .admin-table-wrapper {
        padding: 12px !important;
    }

    .admin-table {
        min-width: 500px !important;
        font-size: 0.8rem !important;
    }

    .admin-table th,
    .admin-table td {
        padding: 8px 10px !important;
        font-size: 0.75rem !important;
    }

    .admin-table .actions .btn {
        font-size: 0.6rem !important;
        padding: 2px 8px !important;
    }

    /* ========================================================== */
    /* JOB DETAIL */
    /* ========================================================== */
    .job-detail-section {
        padding: 100px 0 50px !important;
    }

    .job-detail-content {
        padding: 20px !important;
    }

    .job-detail-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .job-detail-company {
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
    }

    .job-detail-company img {
        width: 50px !important;
        height: 50px !important;
    }

    .job-detail-company h2 {
        font-size: 1.2rem !important;
    }

    .job-detail-meta {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .job-detail-meta span {
        font-size: 0.8rem !important;
    }

    .job-detail-section h3 {
        font-size: 1rem !important;
    }

    .job-detail-section p,
    .job-detail-section ul li {
        font-size: 0.85rem !important;
    }

    .job-detail-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .job-detail-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ========================================================== */
    /* RELATED JOBS */
    /* ========================================================== */
    .related-jobs-grid,
    .related-articles-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .related-job-card {
        padding: 15px !important;
    }

    /* ========================================================== */
    /* APPLY PAGE */
    /* ========================================================== */
    .apply-job-header {
        padding: 15px !important;
        text-align: center !important;
    }

    .apply-job-header .job-info h2 {
        font-size: 1.2rem !important;
    }

    .apply-form-wrapper {
        padding: 20px !important;
    }

    .apply-form-wrapper .form-header h2 {
        font-size: 1.2rem !important;
    }

    .file-upload-area {
        padding: 20px 15px !important;
    }

    .file-upload-area .upload-icon {
        font-size: 2rem !important;
    }

    .file-upload-area .upload-text {
        font-size: 0.85rem !important;
    }

    .cover-letter-area {
        padding: 20px 15px !important;
    }

    .form-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .form-actions .btn {
        min-width: 100% !important;
    }

    /* ========================================================== */
    /* LOGIN PAGES */
    /* ========================================================== */
    .login-card {
        padding: 25px 20px !important;
    }

    .login-card .login-logo .logo-icon {
        width: 55px !important;
        height: 55px !important;
        font-size: 1.6rem !important;
    }

    .login-card .login-logo h2 {
        font-size: 1.2rem !important;
    }

    .login-card .form-options {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .login-card .btn {
        padding: 12px !important;
        font-size: 0.9rem !important;
    }

    .admin-login-box {
        padding: 25px 20px !important;
    }

    .admin-login-box .login-icon {
        width: 55px !important;
        height: 55px !important;
        font-size: 1.5rem !important;
    }

    .admin-login-box h2 {
        font-size: 1.2rem !important;
    }

    /* ========================================================== */
    /* RESET PASSWORD */
    /* ========================================================== */
    .reset-password-page {
        padding: 100px 0 40px !important;
    }

    .reset-password-card {
        padding: 25px 20px !important;
    }

    .reset-password-card .password-requirements {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    #resetInfo {
        font-size: 0.85rem !important;
        padding: 10px 14px !important;
    }

    /* ========================================================== */
    /* EDIT PROFILE */
    /* ========================================================== */
    .edit-profile-card {
        padding: 25px 20px !important;
    }

    .profile-photo-wrapper {
        width: 100px !important;
        height: 100px !important;
    }

    .profile-photo-wrapper .profile-photo {
        width: 100px !important;
        height: 100px !important;
    }

    .profile-photo-wrapper .photo-upload-btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.75rem !important;
    }

    /* ========================================================== */
    /* POST JOB */
    /* ========================================================== */
    .post-job-form {
        padding: 20px !important;
    }

    .post-job-form h2 {
        font-size: 1.1rem !important;
    }

    .post-job-dashboard .container {
        padding: 0 15px !important;
    }

    .dashboard-header {
        flex-direction: column !important;
        text-align: center !important;
        padding: 15px !important;
    }

    .dashboard-header h1 {
        font-size: 1.3rem !important;
    }

    .dashboard-header .employer-badge {
        width: 100% !important;
        justify-content: center !important;
    }

    .form-row {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* ========================================================== */
    /* APPLICATIONS SECTION */
    /* ========================================================== */
    .application-card {
        padding: 15px !important;
    }

    .application-card .applicant-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .applicant-actions {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 6px !important;
    }

    .applicant-actions .btn-action {
        font-size: 0.65rem !important;
        padding: 3px 10px !important;
    }

    .documents-section {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .document-item {
        width: 100% !important;
        justify-content: space-between !important;
        padding: 6px 12px !important;
    }

    .document-item .file-name {
        max-width: 100px !important;
        font-size: 0.75rem !important;
    }

    .filter-applications {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .filter-applications select {
        max-width: 100% !important;
    }

    /* ========================================================== */
    /* FOOTER */
    /* ========================================================== */
    .footer-links {
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
    }

    .footer-bottom-right {
        justify-content: center !important;
    }

    /* ========================================================== */
    /* CTA SECTIONS */
    /* ========================================================== */
    .cta-content h2 {
        font-size: 1.8rem !important;
    }

    .cta-content p {
        font-size: 0.95rem !important;
    }

    .cta-buttons {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .cta-buttons .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .cta-simple-content h2 {
        font-size: 1.6rem !important;
    }

    .cta-simple-buttons {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .cta-simple-buttons .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ========================================================== */
    /* SECTION HEADERS */
    /* ========================================================== */
    .section-header h2 {
        font-size: 1.6rem !important;
    }

    .section-header p {
        font-size: 0.85rem !important;
    }

    .section-tag {
        font-size: 0.6rem !important;
        padding: 3px 14px !important;
    }

    /* ========================================================== */
    /* BUTTONS */
    /* ========================================================== */
    .btn {
        font-size: 0.82rem !important;
        padding: 8px 20px !important;
    }

    .btn-lg {
        padding: 12px 28px !important;
        font-size: 0.9rem !important;
    }

    /* ========================================================== */
    /* CONTAINERS */
    /* ========================================================== */
    .container {
        padding: 0 15px !important;
    }

    /* ========================================================== */
    /* PASSWORD REQUIREMENTS */
    /* ========================================================== */
    .password-requirements {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        padding: 10px 14px !important;
    }

    .password-requirements .req-item {
        font-size: 0.72rem !important;
    }

    /* ========================================================== */
    /* SUCCESS MODAL */
    /* ========================================================== */
    .success-modal-content {
        padding: 30px 25px 25px !important;
    }

    .success-modal-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 2rem !important;
    }

    .success-modal-content h2 {
        font-size: 1.3rem !important;
    }

    .success-modal-content p {
        font-size: 0.9rem !important;
    }

    .success-modal-buttons {
        flex-direction: column !important;
    }

    .success-modal-buttons .btn {
        min-width: 100% !important;
    }

    .success-overlay-content .success-icon {
        width: 70px !important;
        height: 70px !important;
        font-size: 2.5rem !important;
    }

    .success-overlay-content h2 {
        font-size: 1.5rem !important;
    }

    .success-overlay-content p {
        font-size: 0.9rem !important;
    }

    .success-overlay-content .loading-bar {
        width: 200px !important;
    }

    /* ========================================================== */
    /* BACK TO TOP */
    /* ========================================================== */
    #backToTop {
        width: 38px !important;
        height: 38px !important;
        font-size: 0.9rem !important;
        bottom: 15px !important;
        right: 15px !important;
    }

    /* ========================================================== */
    /* NO DATA */
    /* ========================================================== */
    .no-applications i {
        font-size: 2rem !important;
    }

    .no-applications h4 {
        font-size: 1rem !important;
    }

    .no-applications p {
        font-size: 0.85rem !important;
    }

    .admin-table .no-data i {
        font-size: 2rem !important;
    }

    /* ========================================================== */
    /* CAREERS HERO */
    /* ========================================================== */
    .careers-hero {
        padding: 60px 0 15px !important;
        min-height: 280px !important;
    }

    .careers-hero .page-hero-content {
        min-height: 200px !important;
        gap: 15px !important;
    }

    .careers-hero .page-hero-image img {
        max-width: 200px !important;
        max-height: 180px !important;
    }

    .careers-hero .page-hero-text h1 {
        font-size: 1.6rem !important;
    }

    /* ========================================================== */
    /* STORIES GRID */
    /* ========================================================== */
    .stories-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* ========================================================== */
    /* COMPARISON TABLE */
    /* ========================================================== */
    .comparison-table {
        grid-template-columns: 1fr 1fr 1fr !important;
        font-size: 0.75rem !important;
    }

    .comparison-col {
        padding: 8px 10px !important;
        font-size: 0.75rem !important;
    }

    .comparison-header .comparison-col {
        font-size: 0.8rem !important;
    }

    /* ========================================================== */
    /* DASHBOARD PREVIEW */
    /* ========================================================== */
    .dashboard-preview {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .dashboard-card {
        padding: 15px !important;
    }

    .dashboard-card-value {
        font-size: 1.1rem !important;
    }

    .dashboard-card-title {
        font-size: 0.75rem !important;
    }
}

/* Extra small screens - Very small mobile phones (480px and below) */
@media (max-width: 480px) {
    /* Home page - keep side by side but smaller */
    .hero-content {
        gap: 10px !important;
    }
    
     .hero-image img {
        max-width: 110px !important;
    }
    
    .hero-text h1 {
        font-size: 0.85rem !important;
        margin-bottom: 6px !important;
    }
    
     .hero-text p {
        font-size: 0.55rem !important;
        margin-bottom: 6px !important;
    }
    
     .hero-buttons .btn {
        font-size: 0.45rem !important;
        padding: 3px 8px !important;
    }
    
    .hero-badge {
        font-size: 0.45rem !important;
        padding: 2px 8px !important;
        margin-bottom: 4px !important;
    }
    
     .flyer-carousel {
        max-width: 100px !important;
    }
    
     .flyer-slide-overlay h3 {
        font-size: 0.4rem !important;
    }
    
     .flyer-slide-overlay p {
        font-size: 0.35rem !important;
        margin-bottom: 2px !important;
    }
    
     .flyer-slide-overlay .flyer-tag {
        font-size: 0.3rem !important;
        padding: 0 3px !important;
    }
    
     .flyer-slide-overlay .flyer-ref {
        display: none !important;
    }
    
     .carousel-control {
        width: 12px !important;
        height: 12px !important;
        font-size: 0.3rem !important;
    }
    
     .carousel-indicators {
        bottom: 4px !important;
        gap: 3px !important;
    }
    
     .carousel-indicators .indicator {
        width: 4px !important;
        height: 4px !important;
    }
    
     .carousel-indicators .indicator.active {
        width: 8px !important;
    }
    
    /* Other pages - centered text */
    .page-hero-text h1 {
        font-size: 1.3rem !important;
    }
    
    .page-hero-text p {
        font-size: 0.8rem !important;
    }
    
    .page-hero {
        padding: 60px 0 25px !important;
    }
    
    .page-hero-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    .page-hero-buttons .btn {
        width: 100% !important;
        max-width: 220px !important;
        justify-content: center !important;
        font-size: 0.7rem !important;
        padding: 6px 14px !important;
    }
    
    .page-hero-badge {
        font-size: 0.6rem !important;
        padding: 3px 12px !important;
        margin-bottom: 8px !important;
    }

    /* ========================================================== */
    /* STATS - 2 columns on very small */
    /* ========================================================== */
    .stats .container,
    .page-stats-grid,
    .about-stats-grid,
    .careers-stats-grid,
    .partner-stats-grid,
    .candidates-stats-grid,
    .quick-stats-grid,
    .insights-stats-grid,
    .support-stats-grid,
    .service-stats-grid,
    .network-stats-grid,
    .growth-stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .stat-item .stat-number,
    .page-stat-number,
    .about-stat-number,
    .careers-stat-number,
    .partner-stat-number,
    .candidates-stat-number,
    .quick-stat-number,
    .insights-stat-number,
    .support-stat-number,
    .service-stat-number,
    .network-stat-number,
    .growth-stat-number {
        font-size: 1.1rem !important;
    }

    .stat-item p,
    .page-stat-item p,
    .about-stat-item p,
    .careers-stat-item p,
    .partner-stat-item p,
    .candidates-stat-item p,
    .quick-stat-item p,
    .insights-stat-item p,
    .support-stat-item p,
    .service-stat-item p,
    .network-stat-item p,
    .growth-stat-item p {
        font-size: 0.7rem !important;
    }

    /* ========================================================== */
    /* CATEGORY */
    /* ========================================================== */
    .category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .category-card {
        padding: 12px 8px !important;
    }

    .category-card .category-icon {
        width: 35px !important;
        height: 35px !important;
        font-size: 0.9rem !important;
    }

    .category-card h3 {
        font-size: 0.65rem !important;
    }

    /* ========================================================== */
    /* EXPERIENCE */
    /* ========================================================== */
    .experience-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .experience-card {
        padding: 12px 10px !important;
    }

    .experience-card .experience-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 1rem !important;
    }

    .experience-card h3 {
        font-size: 0.75rem !important;
    }

    .experience-card p {
        font-size: 0.65rem !important;
    }

    .experience-card .job-count {
        font-size: 0.85rem !important;
    }

    .experience-card .btn {
        font-size: 0.65rem !important;
        padding: 4px 10px !important;
    }

    /* ========================================================== */
    /* SERVICES / INDUSTRIES */
    /* ========================================================== */
    .services-grid,
    .why-choose-grid,
    .industries-grid,
    .outsource-benefits .benefits-grid,
    .growth-benefits-grid,
    .consulting-benefits-grid,
    .channels-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .service-card,
    .why-choose-card,
    .industry-card,
    .benefit-card,
    .growth-benefit-card,
    .consulting-benefit-card,
    .channel-card {
        padding: 15px 12px !important;
    }

    .service-icon,
    .why-choose-icon,
    .industry-icon,
    .benefit-icon,
    .growth-benefit-icon,
    .consulting-benefit-icon,
    .channel-icon {
        width: 45px !important;
        height: 45px !important;
        font-size: 1.1rem !important;
    }

    .service-card h3,
    .why-choose-card h3,
    .industry-card h4,
    .benefit-card h3,
    .growth-benefit-card h3,
    .consulting-benefit-card h3,
    .channel-card h3 {
        font-size: 0.85rem !important;
    }

    .service-card p,
    .why-choose-card p,
    .industry-card p,
    .benefit-card p,
    .growth-benefit-card p,
    .consulting-benefit-card p,
    .channel-card p {
        font-size: 0.75rem !important;
    }

    /* ========================================================== */
    /* TEAM */
    /* ========================================================== */
    .team-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .team-image {
        height: 150px !important;
    }

    .team-info {
        padding: 12px !important;
    }

    .team-info h4 {
        font-size: 0.85rem !important;
    }

    .team-info span {
        font-size: 0.75rem !important;
    }

    .team-info p {
        font-size: 0.75rem !important;
        margin-top: 4px !important;
    }

    /* ========================================================== */
    /* FOOTER */
    /* ========================================================== */
    .footer-links {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .footer-col h4 {
        font-size: 0.85rem !important;
    }

    .footer-col ul li a {
        font-size: 0.78rem !important;
    }

    .social-links a {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.75rem !important;
    }

    /* ========================================================== */
    /* SECTION HEADERS */
    /* ========================================================== */
    .section-header h2 {
        font-size: 1.4rem !important;
    }

    .section-header p {
        font-size: 0.8rem !important;
    }

    .section-tag {
        font-size: 0.6rem !important;
        padding: 3px 14px !important;
    }

    /* ========================================================== */
    /* CTAs */
    /* ========================================================== */
    .cta-content h2 {
        font-size: 1.5rem !important;
    }

    .cta-content p {
        font-size: 0.85rem !important;
    }

    .cta-simple-content h2 {
        font-size: 1.4rem !important;
    }

    .cta-simple-content p {
        font-size: 0.85rem !important;
    }

    /* ========================================================== */
    /* BUTTONS */
    /* ========================================================== */
    .btn {
        font-size: 0.75rem !important;
        padding: 6px 16px !important;
    }

    .btn-lg {
        padding: 10px 20px !important;
        font-size: 0.85rem !important;
    }

    .btn-sm {
        font-size: 0.65rem !important;
        padding: 4px 10px !important;
    }

    /* ========================================================== */
    /* JOB LISTINGS */
    /* ========================================================== */
    .job-listings-grid .job-card {
        padding: 12px !important;
    }

    .job-listings-grid .job-card h3 {
        font-size: 0.85rem !important;
    }

    .job-listings-grid .job-card .company {
        font-size: 0.8rem !important;
    }

    .job-listings-grid .job-card .location {
        font-size: 0.75rem !important;
    }

    .job-listings-grid .job-card .job-meta .job-posted {
        font-size: 0.65rem !important;
    }

    .job-listings-grid .job-card .job-meta .job-experience {
        font-size: 0.65rem !important;
    }

    .job-listings-grid .job-card .job-actions .btn {
        font-size: 0.7rem !important;
        padding: 4px 12px !important;
    }

    .job-listings-title h2 {
        font-size: 1.2rem !important;
    }

    .job-listings-title p {
        font-size: 0.8rem !important;
    }

    .filter-tab {
        font-size: 0.6rem !important;
        padding: 3px 10px !important;
    }

    .search-box-mini input {
        width: 80px !important;
        font-size: 0.8rem !important;
    }

    .search-box-mini {
        padding: 5px 12px !important;
    }

    .sort-box {
        padding: 5px 12px !important;
        font-size: 0.8rem !important;
    }

    .sort-box select {
        font-size: 0.8rem !important;
    }

    /* ========================================================== */
    /* DASHBOARD */
    /* ========================================================== */
    .dashboard-stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .dashboard-stat-card {
        padding: 12px 14px !important;
        gap: 10px !important;
    }

    .dashboard-stat-card .stat-icon {
        width: 35px !important;
        height: 35px !important;
        font-size: 0.9rem !important;
    }

    .dashboard-stat-card .stat-info h3 {
        font-size: 1.1rem !important;
    }

    .dashboard-stat-card .stat-info p {
        font-size: 0.7rem !important;
    }

    .dashboard-header {
        padding: 15px !important;
    }

    .dashboard-header .user-avatar {
        width: 45px !important;
        height: 45px !important;
        font-size: 1.1rem !important;
    }

    .dashboard-header .user-details h1 {
        font-size: 1rem !important;
    }

    .dashboard-header .user-details p {
        font-size: 0.8rem !important;
    }

    .dashboard-header .user-actions .btn {
        font-size: 0.7rem !important;
        padding: 4px 12px !important;
        min-width: 70px !important;
    }

    .dashboard-applications {
        padding: 15px !important;
    }

    .dashboard-applications .section-title h3 {
        font-size: 0.95rem !important;
    }

    .application-item {
        padding: 10px 12px !important;
    }

    .application-item .app-info h4 {
        font-size: 0.85rem !important;
    }

    .application-item .app-info .company {
        font-size: 0.75rem !important;
    }

    .application-item .app-status .status-badge {
        font-size: 0.6rem !important;
        padding: 2px 10px !important;
    }

    .application-item .app-status .app-date {
        font-size: 0.65rem !important;
    }

    .dashboard-card {
        padding: 15px !important;
    }

    .dashboard-card .card-title {
        font-size: 0.9rem !important;
    }

    .dashboard-card .profile-info .info-item .label {
        font-size: 0.7rem !important;
    }

    .dashboard-card .profile-info .info-item .value {
        font-size: 0.8rem !important;
    }

    .saved-job-item .job-title {
        font-size: 0.8rem !important;
    }

    .saved-job-item .job-title small {
        font-size: 0.7rem !important;
    }

    .saved-job-item .saved-actions .btn {
        font-size: 0.6rem !important;
        padding: 2px 8px !important;
    }

    .dashboard-stats {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .dashboard-stat .number {
        font-size: 1.2rem !important;
    }

    .dashboard-stat p {
        font-size: 0.75rem !important;
    }

    /* ========================================================== */
    /* ADMIN DASHBOARD */
    /* ========================================================== */
    .admin-stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .admin-stat-card {
        padding: 12px 14px !important;
        gap: 10px !important;
    }

    .admin-stat-card .stat-icon {
        width: 35px !important;
        height: 35px !important;
        font-size: 0.9rem !important;
    }

    .admin-stat-card .stat-info h3 {
        font-size: 1.1rem !important;
    }

    .admin-stat-card .stat-info p {
        font-size: 0.7rem !important;
    }

    .admin-header h1 {
        font-size: 1.2rem !important;
    }

    .admin-header .admin-badge {
        font-size: 0.75rem !important;
        padding: 4px 14px !important;
    }

    .admin-tab {
        font-size: 0.65rem !important;
        padding: 4px 10px !important;
    }

    .admin-table {
        min-width: 400px !important;
        font-size: 0.7rem !important;
    }

    .admin-table th,
    .admin-table td {
        padding: 6px 8px !important;
        font-size: 0.65rem !important;
    }

    .admin-table .status-badge {
        font-size: 0.55rem !important;
        padding: 2px 8px !important;
    }

    .admin-table .actions .btn {
        font-size: 0.55rem !important;
        padding: 2px 6px !important;
    }

    /* ========================================================== */
    /* EDIT PROFILE */
    /* ========================================================== */
    .edit-profile-card {
        padding: 20px 15px !important;
    }

    .edit-profile-card .card-header h2 {
        font-size: 1.2rem !important;
    }

    .edit-profile-card .card-header p {
        font-size: 0.8rem !important;
    }

    .profile-photo-wrapper {
        width: 80px !important;
        height: 80px !important;
    }

    .profile-photo-wrapper .profile-photo {
        width: 80px !important;
        height: 80px !important;
    }

    .profile-photo-wrapper .photo-upload-btn {
        width: 25px !important;
        height: 25px !important;
        font-size: 0.6rem !important;
    }

    /* ========================================================== */
    /* APPLICATIONS SECTION */
    /* ========================================================== */
    .application-card {
        padding: 12px !important;
    }

    .application-card .applicant-info h4 {
        font-size: 0.9rem !important;
    }

    .application-card .applicant-info p {
        font-size: 0.75rem !important;
    }

    .application-card .applicant-info .app-date {
        font-size: 0.65rem !important;
    }

    .applicant-actions .btn-action {
        font-size: 0.6rem !important;
        padding: 2px 8px !important;
    }

    .document-item {
        padding: 4px 10px !important;
    }

    .document-item .file-name {
        max-width: 70px !important;
        font-size: 0.7rem !important;
    }

    .document-item .btn-download {
        font-size: 0.6rem !important;
        padding: 2px 8px !important;
    }

    .status-badge {
        font-size: 0.6rem !important;
        padding: 2px 10px !important;
    }

    /* ========================================================== */
    /* JOB DETAIL */
    /* ========================================================== */
    .job-detail-content {
        padding: 15px !important;
    }

    .job-detail-company h2 {
        font-size: 1rem !important;
    }

    .job-detail-company p {
        font-size: 0.8rem !important;
    }

    .job-detail-meta span {
        font-size: 0.75rem !important;
    }

    .job-detail-section h3 {
        font-size: 0.95rem !important;
    }

    .job-detail-section p,
    .job-detail-section ul li {
        font-size: 0.8rem !important;
    }

    .job-detail-actions .btn {
        font-size: 0.8rem !important;
        padding: 6px 14px !important;
    }

    .job-tag-detail {
        font-size: 0.6rem !important;
        padding: 2px 10px !important;
    }

    .back-to-jobs {
        font-size: 0.8rem !important;
    }

    /* ========================================================== */
    /* APPLY PAGE */
    /* ========================================================== */
    .apply-job-header .job-info h2 {
        font-size: 1rem !important;
    }

    .apply-job-header .job-info p {
        font-size: 0.8rem !important;
    }

    .apply-form-wrapper .form-header h2 {
        font-size: 1rem !important;
    }

    .apply-form-wrapper .form-header p {
        font-size: 0.8rem !important;
    }

    /* ========================================================== */
    /* LOGIN PAGES */
    /* ========================================================== */
    .login-card {
        padding: 20px 15px !important;
    }

    .login-card .login-logo .logo-icon {
        width: 45px !important;
        height: 45px !important;
        font-size: 1.3rem !important;
    }

    .login-card .login-logo h2 {
        font-size: 1rem !important;
    }

    .login-card .login-logo p {
        font-size: 0.8rem !important;
    }

    .login-card .form-group label {
        font-size: 0.75rem !important;
    }

    .login-card .form-group .input-wrapper input {
        padding: 10px 12px 10px 38px !important;
        font-size: 0.85rem !important;
    }

    .login-card .form-options label {
        font-size: 0.75rem !important;
    }

    .login-card .form-options a {
        font-size: 0.75rem !important;
    }

    .login-card .btn {
        padding: 10px !important;
        font-size: 0.85rem !important;
    }

    .login-card .login-footer p {
        font-size: 0.8rem !important;
    }

    .admin-login-box {
        padding: 20px 15px !important;
    }

    .admin-login-box .login-icon {
        width: 45px !important;
        height: 45px !important;
        font-size: 1.3rem !important;
    }

    .admin-login-box h2 {
        font-size: 1rem !important;
    }

    .admin-login-box p {
        font-size: 0.8rem !important;
    }

    .admin-login-box .form-group label {
        font-size: 0.75rem !important;
    }

    .admin-login-box .form-group input {
        padding: 10px 14px !important;
        font-size: 0.85rem !important;
    }

    /* ========================================================== */
    /* RESET PASSWORD */
    /* ========================================================== */
    .reset-password-card {
        padding: 20px 15px !important;
    }

    .reset-password-card .form-group label {
        font-size: 0.75rem !important;
    }

    .reset-password-card .form-group .input-wrapper input {
        padding: 10px 12px 10px 38px !important;
        font-size: 0.85rem !important;
    }

    #resetInfo {
        font-size: 0.8rem !important;
        padding: 8px 12px !important;
    }

    #resetError {
        font-size: 0.8rem !important;
        padding: 8px 12px !important;
    }

    /* ========================================================== */
    /* POST JOB */
    /* ========================================================== */
    .post-job-form {
        padding: 15px !important;
    }

    .post-job-form h2 {
        font-size: 1rem !important;
    }

    .post-job-form p {
        font-size: 0.8rem !important;
    }

    .dashboard-header h1 {
        font-size: 1.1rem !important;
    }

    .dashboard-header .employer-badge {
        font-size: 0.75rem !important;
        padding: 4px 14px !important;
    }

    .form-group label {
        font-size: 0.75rem !important;
    }

    .input-wrapper input,
    .input-wrapper select,
    .input-wrapper textarea {
        padding: 8px 10px 8px 34px !important;
        font-size: 0.85rem !important;
    }

    .input-wrapper textarea {
        min-height: 80px !important;
    }

    .input-wrapper i {
        left: 10px !important;
        font-size: 0.75rem !important;
    }

    .form-actions .btn {
        font-size: 0.8rem !important;
        padding: 6px 14px !important;
    }

    .post-success {
        padding: 12px 16px !important;
        font-size: 0.8rem !important;
    }

    /* ========================================================== */
    /* REGISTER PAGE */
    /* ========================================================== */
    .registration-info-content h2 {
        font-size: 1.2rem !important;
    }

    .registration-info-content > p {
        font-size: 0.85rem !important;
    }

    .registration-benefit-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.8rem !important;
    }

    .registration-benefit h4 {
        font-size: 0.8rem !important;
    }

    .registration-benefit p {
        font-size: 0.75rem !important;
    }

    .registration-form-header h3 {
        font-size: 1rem !important;
    }

    .registration-form-header p {
        font-size: 0.8rem !important;
    }

    .form-progress-step .step-number {
        width: 25px !important;
        height: 25px !important;
        font-size: 0.65rem !important;
    }

    .form-progress-line {
        max-width: 15px !important;
    }

    .checkbox-label {
        font-size: 0.75rem !important;
    }

    .checkbox-label input[type="checkbox"] {
        width: 14px !important;
        height: 14px !important;
    }

    .form-hint {
        font-size: 0.65rem !important;
    }

    .file-upload-area .upload-icon {
        font-size: 1.6rem !important;
    }

    .file-upload-area .upload-text {
        font-size: 0.8rem !important;
    }

    .file-upload-area .upload-subtext {
        font-size: 0.65rem !important;
    }

    .registration-testimonial {
        padding: 15px 18px !important;
    }

    .registration-testimonial p {
        font-size: 0.8rem !important;
    }

    .registration-testimonial-author h4 {
        font-size: 0.8rem !important;
    }

    .registration-testimonial-author span {
        font-size: 0.7rem !important;
    }

    .password-requirements .req-item {
        font-size: 0.65rem !important;
    }

    .file-error {
        font-size: 0.75rem !important;
        padding: 8px 12px !important;
    }

    .form-error {
        font-size: 0.75rem !important;
        padding: 8px 12px !important;
    }

    .form-error ul li {
        font-size: 0.7rem !important;
    }

    /* ========================================================== */
    /* CAREERS HERO */
    /* ========================================================== */
    .careers-hero {
        padding: 50px 0 10px !important;
        min-height: 220px !important;
    }

    .careers-hero .page-hero-content {
        min-height: 160px !important;
        gap: 10px !important;
    }

    .careers-hero .page-hero-image img {
        max-width: 150px !important;
        max-height: 140px !important;
    }

    .careers-hero .page-hero-text h1 {
        font-size: 1.3rem !important;
    }

    /* ========================================================== */
    /* NO DATA */
    /* ========================================================== */
    .no-applications i {
        font-size: 1.6rem !important;
    }

    .no-applications h4 {
        font-size: 0.9rem !important;
    }

    .no-applications p {
        font-size: 0.8rem !important;
    }

    .no-saved i {
        font-size: 1.2rem !important;
    }

    .no-saved {
        font-size: 0.8rem !important;
    }

    /* ========================================================== */
    /* MAP */
    /* ========================================================== */
    .map-wrapper iframe {
        height: 200px !important;
    }

    .map-overlay {
        bottom: 10px !important;
        padding: 8px 14px !important;
        border-radius: 20px !important;
        gap: 8px !important;
    }

    .map-overlay-content i {
        font-size: 0.9rem !important;
    }

    .map-overlay-content p {
        font-size: 0.7rem !important;
    }

    .map-overlay-content span {
        display: none !important;
    }

    /* ========================================================== */
    /* COMPARISON TABLE */
    /* ========================================================== */
    .comparison-table {
        grid-template-columns: 1fr 1fr 1fr !important;
        font-size: 0.65rem !important;
    }

    .comparison-col {
        padding: 6px 8px !important;
        font-size: 0.65rem !important;
    }

    .comparison-header .comparison-col {
        font-size: 0.7rem !important;
    }

    /* ========================================================== */
    /* BACK TO TOP */
    /* ========================================================== */
    #backToTop {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.75rem !important;
        bottom: 12px !important;
        right: 12px !important;
    }

    /* ========================================================== */
    /* PULSE DOT */
    /* ========================================================== */
    .post-job-pulse {
        padding: 8px 16px !important;
        font-size: 0.75rem !important;
        gap: 8px !important;
        bottom: 12px !important;
    }

    .pulse-dot {
        width: 8px !important;
        height: 8px !important;
    }

    /* ========================================================== */
    /* FLOATING BADGE */
    /* ========================================================== */
    .hero-floating-badge.badge-left {
        bottom: 60px !important;
        left: 10px !important;
        right: auto !important;
        padding: 8px 12px !important;
    }

    .hero-floating-badge.badge-left i {
        font-size: 0.8rem !important;
    }

    .hero-floating-badge.badge-left span {
        font-size: 0.65rem !important;
    }

    /* ========================================================== */
    /* CONTAINER */
    /* ========================================================== */
    .container {
        padding: 0 12px !important;
    }

    /* ========================================================== */
    /* SUCCESS OVERLAY */
    /* ========================================================== */
    .success-overlay-content .success-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 2rem !important;
    }

    .success-overlay-content h2 {
        font-size: 1.2rem !important;
    }

    .success-overlay-content p {
        font-size: 0.85rem !important;
    }

    .success-overlay-content .loading-bar {
        width: 160px !important;
    }
}


/* About page hero - tablet */
@media (max-width: 991px) {
    .about-hero .page-hero-content {
        min-height: 300px !important;
        padding: 20px 0 !important;
    }
    
    .about-hero .page-hero-text h1 {
        font-size: 2rem !important;
    }
    
    .about-hero .page-hero-text p {
        font-size: 1rem !important;
    }
}

/* About page hero - mobile */
@media (max-width: 767px) {
    .about-hero .page-hero-content {
        min-height: 250px !important;
        padding: 15px 0 !important;
    }
    
    .about-hero .page-hero-text h1 {
        font-size: 1.6rem !important;
    }
    
    .about-hero .page-hero-text p {
        font-size: 0.9rem !important;
        padding: 0 10px !important;
    }
    
    .about-hero .page-hero-badge {
        font-size: 0.65rem !important;
        padding: 4px 14px !important;
    }
    
    .about-hero .page-hero-buttons .btn {
        font-size: 0.75rem !important;
        padding: 6px 14px !important;
    }
}

@media (max-width: 480px) {
    .about-hero .page-hero-content {
        min-height: 200px !important;
        padding: 10px 0 !important;
    }
    
    .about-hero .page-hero-text h1 {
        font-size: 1.3rem !important;
    }
    
    .about-hero .page-hero-text p {
        font-size: 0.8rem !important;
    }
    
    .about-hero .page-hero-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    .about-hero .page-hero-buttons .btn {
        width: 100% !important;
        max-width: 220px !important;
        justify-content: center !important;
        font-size: 0.7rem !important;
        padding: 6px 14px !important;
    }
}

/* ============================================================ */
/* ABOUT PAGE - ALL SECTIONS VERTICAL STACKING ON MOBILE */
/* ============================================================ */

/* 1. Our Story - stack vertically */
@media (max-width: 767px) {
    .our-story-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 20px !important;
    }

    .our-story-text {
        order: 1 !important;
        width: 100% !important;
    }

    .our-story-text h2 {
        font-size: 1.6rem !important;
    }

    .our-story-text p {
        text-align: center !important;
        font-size: 0.9rem !important;
    }

    .our-story-image {
        order: 0 !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }

    .our-story-image img {
        width: 100% !important;
        max-height: 220px !important;
        object-fit: cover !important;
        border-radius: 12px !important;
    }

    .story-experience-badge {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        margin-top: -30px !important;
        display: inline-flex !important;
        padding: 10px 16px !important;
        border-radius: 10px !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .story-experience-badge span {
        font-size: 1.6rem !important;
        display: inline !important;
    }

    .story-experience-badge p {
        font-size: 0.7rem !important;
        display: inline !important;
        margin-top: 0 !important;
    }

    .our-story-highlights {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .highlight-item {
        text-align: left !important;
        padding: 10px 14px !important;
    }
}

/* 2. Mission & Vision - stack vertically */
@media (max-width: 767px) {
    .mission-vision-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .mission-card,
    .vision-card {
        width: 100% !important;
        padding: 25px 20px !important;
        text-align: center !important;
    }

    .mission-card h2,
    .vision-card h2 {
        font-size: 1.4rem !important;
    }

    .mission-card p,
    .vision-card p {
        font-size: 0.9rem !important;
    }

    .mission-list li,
    .vision-list li {
        justify-content: center !important;
        font-size: 0.85rem !important;
    }

    .mission-icon,
    .vision-icon {
        margin: 0 auto 15px !important;
    }

    .mission-tag,
    .vision-tag {
        display: inline-block !important;
        margin: 0 auto 10px !important;
    }
}

/* 3. Core Values - stack vertically */
@media (max-width: 767px) {
    .values-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        align-items: center !important;
    }

    .value-card {
        width: 100% !important;
        max-width: 400px !important;
        padding: 20px 18px !important;
        text-align: center !important;
    }

    .value-card h3 {
        font-size: 1rem !important;
    }

    .value-card p {
        font-size: 0.85rem !important;
    }

    .value-icon {
        margin: 0 auto 15px !important;
    }

    .value-number {
        font-size: 2rem !important;
        right: 10px !important;
        top: 5px !important;
    }
}

/* 4. Services (What We Do) - stack vertically */
@media (max-width: 767px) {
    .services-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        align-items: center !important;
    }

    .service-card {
        width: 100% !important;
        max-width: 400px !important;
        padding: 20px 18px !important;
        text-align: center !important;
    }

    .service-card h3 {
        font-size: 1rem !important;
    }

    .service-card p {
        font-size: 0.85rem !important;
    }

    .service-icon {
        margin: 0 auto 15px !important;
    }
}

/* 5. Testimonials - stack vertically */
@media (max-width: 767px) {
    .about-testimonials-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        align-items: center !important;
    }

    .about-testimonial-card {
        width: 100% !important;
        max-width: 400px !important;
        padding: 20px !important;
        text-align: center !important;
    }

    .about-testimonial-card p {
        font-size: 0.9rem !important;
    }

    .about-testimonial-author {
        justify-content: center !important;
    }

    .about-testimonial-stars {
        text-align: center !important;
    }
}

/* 6. Stats - stack vertically on small */
@media (max-width: 480px) {
    .about-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .about-stat-item .about-stat-number {
        font-size: 1.3rem !important;
    }

    .about-stat-item p {
        font-size: 0.75rem !important;
    }
}

/* 7. Section Headers - center properly */
@media (max-width: 767px) {
    .section-header h2 {
        font-size: 1.5rem !important;
    }

    .section-header p {
        font-size: 0.85rem !important;
        padding: 0 15px !important;
    }

    .section-tag {
        font-size: 0.6rem !important;
        padding: 3px 14px !important;
    }
}

/* 8. CTA Section - stack buttons */
@media (max-width: 767px) {
    .cta-simple-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .cta-simple-buttons .btn {
        width: 100% !important;
        max-width: 280px !important;
        justify-content: center !important;
    }

    .cta-simple-content h2 {
        font-size: 1.5rem !important;
    }

    .cta-simple-content p {
        font-size: 0.9rem !important;
        padding: 0 15px !important;
    }
}

/* 9. Team Section - stack */
@media (max-width: 767px) {
    .team-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        align-items: center !important;
    }

    .team-card {
        width: 100% !important;
        max-width: 320px !important;
    }

    .team-image {
        height: 200px !important;
    }

    .team-info h4 {
        font-size: 0.95rem !important;
    }

    .team-info span {
        font-size: 0.8rem !important;
    }

    .team-info p {
        font-size: 0.8rem !important;
    }
}






/* Desktop / normal screens */
@media (min-width: 992px) {

     .hero {
        min-height: 520px !important;
        padding: 90px 0 40px !important;
    }

     .hero-content {
        display: grid !important;
        grid-template-columns: 1.2fr 0.8fr !important;
        gap: 50px !important;
        align-items: center !important;
        margin-bottom: 40px !important;
    }

    .hero-text {
        width: 100% !important;
        min-height: 300px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;

        text-align: left !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /*
       Keep the typing animation from changing
       the height of the hero.
    */
     .hero-text h1 {
        min-height: 80px !important;
        margin: 0 0 10px 0 !important;
    }

     .hero-image {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

     .flyer-carousel {
        width: 100% !important;
        max-width: 330px !important;
    }
}


/* ============================================================ */
/* RESPONSIVE - Tablet */
/* ============================================================ */
@media (max-width: 991px) {
     .hero {
        padding: 60px 0 25px !important;
    }
    
     .hero-content {
        gap: 15px !important;
    }
    
     .hero-text {
        min-height: 180px !important;
        max-height: 180px !important;
    }
    
     .hero-text h1 {
        font-size: 1.1rem !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
    }
    
     .hero-text h1 .typing-wrapper {
        font-size: 1.1rem !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        line-height: 32px !important;
    }
    
     .hero-text h1 .typing-wrapper::after {
        font-size: 0.9rem !important;
        line-height: 32px !important;
    }
    
     .hero-text p {
        font-size: 0.6rem !important;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
    }
    
     .hero-badge {
        font-size: 0.45rem !important;
        padding: 2px 10px !important;
        height: 22px !important;
        margin-bottom: 6px !important;
    }
    
     .hero-buttons {
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
    }
    
     .hero-buttons .btn {
        font-size: 0.5rem !important;
        padding: 3px 10px !important;
    }
    
     .hero-image {
        min-height: 250px !important;
        max-height: 250px !important;
        height: 250px !important;
    }
    
     .flyer-carousel {
        max-width: 200px !important;
        height: 230px !important;
        min-height: 230px !important;
        max-height: 230px !important;
    }
}

/* ============================================================ */
/* RESPONSIVE - Mobile */
/* ============================================================ */
@media (max-width: 767px) {
     .hero {
        padding: 50px 0 20px !important;
    }
    
     .hero-content {
        gap: 10px !important;
        grid-template-columns: 1fr 1fr !important;
    }
    
     .hero-text {
        min-height: 140px !important;
        max-height: 140px !important;
    }
    
    .hero-text h1 {
        font-size: 0.85rem !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        margin-bottom: 3px !important;
    }
    
    .hero-text h1 .typing-wrapper {
        font-size: 0.85rem !important;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        line-height: 24px !important;
    }
    
     .hero-text h1 .typing-wrapper::after {
        font-size: 0.7rem !important;
        line-height: 24px !important;
    }
    
     .hero-text p {
        font-size: 0.5rem !important;
        height: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
        margin-bottom: 4px !important;
        line-height: 1.2 !important;
    }
    
     .hero-badge {
        font-size: 0.4rem !important;
        padding: 2px 8px !important;
        height: 18px !important;
        margin-bottom: 4px !important;
    }
    
     .hero-buttons {
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        gap: 5px !important;
    }
    
    .hero-buttons .btn {
        font-size: 0.4rem !important;
        padding: 2px 8px !important;
    }
    
     .hero-image {
        min-height: 180px !important;
        max-height: 180px !important;
        height: 180px !important;
    }
    
     .flyer-carousel {
        max-width: 130px !important;
        height: 165px !important;
        min-height: 165px !important;
        max-height: 165px !important;
    }
}

/* ============================================================ */
/* RESPONSIVE - Very Small */
/* ============================================================ */
@media (max-width: 480px) {
     .hero {
        padding: 40px 0 15px !important;
    }
    
     .hero-content {
        gap: 6px !important;
    }
    
     .hero-text {
        min-height: 110px !important;
        max-height: 110px !important;
    }
    
     .hero-text h1 {
        font-size: 0.7rem !important;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        margin-bottom: 2px !important;
    }
    
     .hero-text h1 .typing-wrapper {
        font-size: 0.7rem !important;
        height: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
        line-height: 20px !important;
    }
    
     .hero-text h1 .typing-wrapper::after {
        font-size: 0.6rem !important;
        line-height: 20px !important;
    }
    
     .hero-text p {
        font-size: 0.4rem !important;
        height: 16px !important;
        min-height: 16px !important;
        max-height: 16px !important;
        margin-bottom: 3px !important;
        line-height: 1.2 !important;
    }
    
     .hero-badge {
        font-size: 0.35rem !important;
        padding: 1px 6px !important;
        height: 16px !important;
        margin-bottom: 3px !important;
    }
    
     .hero-buttons {
        height: 22px !important;
        min-height: 22px !important;
        max-height: 22px !important;
        gap: 4px !important;
    }
    
     .hero-buttons .btn {
        font-size: 0.35rem !important;
        padding: 2px 6px !important;
    }
    
     .hero-image {
        min-height: 130px !important;
        max-height: 130px !important;
        height: 130px !important;
    }
    
     .flyer-carousel {
        max-width: 90px !important;
        height: 120px !important;
        min-height: 120px !important;
        max-height: 120px !important;
    }
}
/* ============================================================
   HOMEPAGE HERO - CLEAN RESPONSIVE FIX
   Paste this at the VERY BOTTOM of your CSS
   ============================================================ */

/* ---------- DESKTOP ---------- */
.home-page .hero-content {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    gap: 40px !important;
}

.home-page .hero-text {
    width: 100% !important;
    min-height: 300px !important;
    max-height: none !important;
    height: auto !important;
    justify-content: center !important;
}

.home-page .hero-image {
    width: 100% !important;
    height: auto !important;
    min-height: 350px !important;
    max-height: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.home-page .flyer-carousel {
    width: 100% !important;
    max-width: 280px !important;
    height: 350px !important;
    min-height: 350px !important;
    max-height: 350px !important;
}


/* ============================================================
   TABLET - 768px to 991px
   ============================================================ */

@media (max-width: 991px) {

    .home-page .hero {
        padding: 70px 20px 30px !important;
    }

    .home-page .hero-content {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) !important;
        gap: 25px !important;
    }

    .home-page .hero-text {
        min-height: 280px !important;
        height: auto !important;
    }

    .home-page .hero-text h1 {
        font-size: 2rem !important;
        line-height: 1.15 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .home-page .hero-text h1 .typing-wrapper {
        font-size: 2rem !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        line-height: 1.15 !important;
    }

    .home-page .hero-text p {
        font-size: 0.9rem !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        line-height: 1.5 !important;
    }

    .home-page .hero-buttons {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        gap: 10px !important;
    }

    .home-page .hero-buttons .btn {
        font-size: 0.8rem !important;
        padding: 9px 16px !important;
    }

    .home-page .hero-image {
        min-height: 300px !important;
        height: auto !important;
    }

    .home-page .flyer-carousel {
        max-width: 230px !important;
        height: 290px !important;
        min-height: 290px !important;
        max-height: 290px !important;
    }
}


/* ============================================================
   MOBILE - 481px to 767px
   ============================================================ */

@media (max-width: 767px) {

    .home-page .hero {
        padding: 55px 15px 25px !important;
    }

    /*
       Keep text + flyer SIDE BY SIDE,
       but give the text more room.
    */
    .home-page .hero-content {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .home-page .hero-text {
        min-height: 260px !important;
        height: auto !important;
        max-height: none !important;
        justify-content: center !important;
    }

    /* Badge */
    .home-page .hero-badge {
        position: static !important;
        width: fit-content !important;
        max-width: 100% !important;
        height: auto !important;
        font-size: 0.58rem !important;
        padding: 5px 9px !important;
        margin: 0 0 10px 0 !important;
        white-space: nowrap !important;
    }

    /* Heading */
    .home-page .hero-text h1 {
        font-size: 1.65rem !important;
        line-height: 1.15 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 0 10px 0 !important;
        display: block !important;
        overflow: visible !important;
    }

    .home-page .hero-text h1 .typing-wrapper {
        font-size: 1.65rem !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        line-height: 1.15 !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    .home-page .hero-text h1 .typing-wrapper::after {
        font-size: 1.4rem !important;
        line-height: 1 !important;
    }

    /* Description */
    .home-page .hero-text p {
        font-size: 0.78rem !important;
        line-height: 1.45 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 0 14px 0 !important;
    }

    /* Buttons */
    .home-page .hero-buttons {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .home-page .hero-buttons .btn {
        font-size: 0.7rem !important;
        padding: 8px 13px !important;
        width: auto !important;
        white-space: nowrap !important;
    }

    /* Flyer */
    .home-page .hero-image {
        min-height: 260px !important;
        max-height: none !important;
        height: auto !important;
        width: 100% !important;
    }

    .home-page .flyer-carousel {
        width: 100% !important;
        max-width: 175px !important;
        height: 235px !important;
        min-height: 235px !important;
        max-height: 235px !important;
        border-radius: 14px !important;
    }

    /* Carousel arrows */
    .home-page .flyer-carousel .carousel-control {
        width: 38px !important;
        height: 38px !important;
        font-size: 0.8rem !important;
    }

    /* Indicators */
    .home-page .flyer-carousel .carousel-indicators {
        bottom: 7px !important;
    }

    .home-page .flyer-carousel .carousel-indicators span,
    .home-page .flyer-carousel .carousel-indicators button {
        width: 8px !important;
        height: 8px !important;
    }
}


/* ============================================================
   SMALL PHONES - 376px to 480px
   ============================================================ */

@media (max-width: 480px) {

    .home-page .hero {
        padding: 48px 12px 20px !important;
    }

    .home-page .hero-content {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
        gap: 8px !important;
    }

    .home-page .hero-text {
        min-height: 240px !important;
    }

    .home-page .hero-badge {
        font-size: 0.5rem !important;
        padding: 4px 7px !important;
        margin-bottom: 8px !important;
    }

    .home-page .hero-text h1 {
        font-size: 1.35rem !important;
        line-height: 1.15 !important;
        margin-bottom: 8px !important;
    }

    .home-page .hero-text h1 .typing-wrapper {
        font-size: 1.35rem !important;
        line-height: 1.15 !important;
    }

    .home-page .hero-text h1 .typing-wrapper::after {
        font-size: 1.15rem !important;
    }

    .home-page .hero-text p {
        font-size: 0.68rem !important;
        line-height: 1.4 !important;
        margin-bottom: 12px !important;
    }

    .home-page .hero-buttons {
        gap: 7px !important;
    }

    .home-page .hero-buttons .btn {
        font-size: 0.62rem !important;
        padding: 7px 11px !important;
    }

    .home-page .hero-image {
        min-height: 235px !important;
    }

    .home-page .flyer-carousel {
        max-width: 150px !important;
        height: 205px !important;
        min-height: 205px !important;
        max-height: 205px !important;
        border-radius: 12px !important;
    }

    .home-page .flyer-carousel .carousel-control {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.7rem !important;
    }
}


/* ============================================================
   VERY SMALL PHONES - 320px to 375px
   ============================================================ */

@media (max-width: 375px) {

    .home-page .hero {
        padding: 45px 10px 18px !important;
    }

    .home-page .hero-content {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
        gap: 6px !important;
    }

    .home-page .hero-text {
        min-height: 220px !important;
    }

    .home-page .hero-badge {
        font-size: 0.44rem !important;
        padding: 3px 6px !important;
    }

    .home-page .hero-text h1 {
        font-size: 1.15rem !important;
    }

    .home-page .hero-text h1 .typing-wrapper {
        font-size: 1.15rem !important;
    }

    .home-page .hero-text h1 .typing-wrapper::after {
        font-size: 1rem !important;
    }

    .home-page .hero-text p {
        font-size: 0.6rem !important;
        line-height: 1.35 !important;
    }

    .home-page .hero-buttons .btn {
        font-size: 0.55rem !important;
        padding: 6px 9px !important;
    }

    .home-page .hero-image {
        min-height: 215px !important;
    }

    .home-page .flyer-carousel {
        max-width: 130px !important;
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;
    }

    .home-page .flyer-carousel .carousel-control {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.6rem !important;
    }
}
/* ============================================================
   HOMEPAGE HERO - ACTUAL FIX
   ============================================================ */

.home-page .hero-content {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    align-items: start !important;
    gap: 15px !important;
}

/* Keep the text column fixed */
.home-page .hero-text {
    display: block !important;
    width: 100% !important;
    height: 260px !important;
    min-height: 260px !important;
    max-height: 260px !important;
    margin: 0 !important;
    padding: 15px 0 0 !important;
}

/* Keep heading in a fixed box */
.home-page .hero-text h1 {
    display: block !important;
    width: 100% !important;
    height: 55px !important;
    min-height: 55px !important;
    max-height: 55px !important;
    margin: 0 0 10px !important;
    overflow: hidden !important;
    line-height: 1.15 !important;
}

/* FIX THE TYPING AREA */
.home-page .typing-wrapper {
    display: inline-block !important;

    width: 150px !important;
    height: 35px !important;
    min-width: 150px !important;
    max-width: 150px !important;

    line-height: 35px !important;

    overflow: hidden !important;
    white-space: nowrap !important;

    vertical-align: top !important;
}

/* Paragraph gets its own permanent space */
.home-page .hero-text p {
    display: block !important;

    width: 100% !important;
    height: 55px !important;
    min-height: 55px !important;
    max-height: 55px !important;

    margin: 0 0 10px !important;

    line-height: 1.45 !important;
    overflow: hidden !important;
}

/* Buttons don't participate in typing layout */
.home-page .hero-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;

    height: auto !important;
}

/* ============================================================
   FLYER - COMPLETELY FIXED POSITION
   ============================================================ */

.home-page .hero-image {
    display: flex !important;

    align-items: flex-start !important;
    justify-content: center !important;

    width: 100% !important;

    height: 260px !important;
    min-height: 260px !important;
    max-height: 260px !important;

    padding-top: 15px !important;
    margin: 0 !important;
}

.home-page .flyer-carousel {
    position: relative !important;

    width: 150px !important;
    max-width: 150px !important;

    height: 205px !important;
    min-height: 205px !important;
    max-height: 205px !important;

    margin: 0 !important;
}


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

@media (max-width: 480px) {

    .home-page .hero-content {
        grid-template-columns: 1.15fr 0.85fr !important;
        align-items: start !important;
        gap: 8px !important;
    }

    .home-page .hero-text {
        height: 240px !important;
        min-height: 240px !important;
        max-height: 240px !important;
        padding-top: 10px !important;
    }

    .home-page .hero-text h1 {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        font-size: 1.3rem !important;
    }

    .home-page .typing-wrapper {
        width: 135px !important;
        min-width: 135px !important;
        max-width: 135px !important;

        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;

        line-height: 30px !important;
        font-size: 1.3rem !important;
    }

    .home-page .hero-text p {
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;

        font-size: 0.67rem !important;
        line-height: 1.4 !important;
    }

    .home-page .hero-image {
        height: 240px !important;
        min-height: 240px !important;
        max-height: 240px !important;

        padding-top: 10px !important;
    }

    .home-page .flyer-carousel {
        width: 145px !important;
        max-width: 145px !important;

        height: 195px !important;
        min-height: 195px !important;
        max-height: 195px !important;
    }
}
/* ============================================================
   AWARDS RECRUITMENT - FINAL MOBILE HERO/CAROUSEL POSITION
   ============================================================ */

/* ------------------------------------------------------------
   HERO LAYOUT
   Text LEFT | Flyer RIGHT
   ------------------------------------------------------------ */

.home-page .hero-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
    align-items: start !important;
    gap: 15px !important;
}


/* ------------------------------------------------------------
   TEXT SIDE
   ------------------------------------------------------------ */

.home-page .hero-text {
    order: 1 !important;
    grid-column: 1 / 2 !important;

    width: 100% !important;
    margin: 0 !important;

    align-self: start !important;
}


/* ------------------------------------------------------------
   FLYER SIDE
   ------------------------------------------------------------ */

.home-page .hero-image {
    order: 2 !important;
    grid-column: 2 / 3 !important;

    width: 100% !important;

    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;

    margin: 0 !important;
    padding: 0 !important;

    align-self: start !important;
}


/* ------------------------------------------------------------
   CAROUSEL CONTAINER
   ------------------------------------------------------------ */

.home-page .flyer-carousel {
    position: relative !important;

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

    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;

    margin: 0 !important;

    padding: 0 !important;

    border-radius: 16px !important;

    overflow: hidden !important;

    background: #0f1a2b !important;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.35) !important;
}


/* ------------------------------------------------------------
   CAROUSEL INTERNAL CONTAINER
   ------------------------------------------------------------ */

.home-page .flyer-carousel-container {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}


/* ------------------------------------------------------------
   SLIDE
   ------------------------------------------------------------ */

.home-page .flyer-slide {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}


/* ------------------------------------------------------------
   FLYER IMAGE
   FORCE IMAGE TO STAY INSIDE THE CARD
   ------------------------------------------------------------ */

.home-page .flyer-slide img {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;

    transform: none !important;
}


/* ------------------------------------------------------------
   CAROUSEL INFORMATION
   ------------------------------------------------------------ */

.home-page .flyer-slide-overlay {
    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;

    box-sizing: border-box !important;

    padding: 28px 8px 20px !important;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(15, 26, 43, 0.2) 20%,
            rgba(15, 26, 43, 0.92) 75%,
            rgba(15, 26, 43, 0.98) 100%
        ) !important;

    z-index: 5 !important;
}


/* Job title */
.home-page .flyer-slide-overlay h3 {
    font-size: 0.65rem !important;
    line-height: 1.15 !important;

    margin: 0 0 3px !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* Company/location */
.home-page .flyer-slide-overlay p {
    font-size: 0.45rem !important;
    line-height: 1.25 !important;

    margin: 0 0 5px !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* Tag */
.home-page .flyer-slide-overlay .flyer-tag {
    font-size: 0.38rem !important;

    padding: 2px 6px !important;

    line-height: 1.2 !important;
}


/* Reference */
.home-page .flyer-slide-overlay .flyer-ref {
    font-size: 0.38rem !important;

    margin-left: 4px !important;
}


/* ------------------------------------------------------------
   PREVIOUS / NEXT
   ------------------------------------------------------------ */

.home-page .carousel-control {
    width: 26px !important;
    height: 26px !important;

    padding: 0 !important;

    font-size: 0.6rem !important;

    z-index: 20 !important;
}

.home-page .carousel-control.prev {
    left: 5px !important;
}

.home-page .carousel-control.next {
    right: 5px !important;
}


/* ------------------------------------------------------------
   INDICATORS
   ------------------------------------------------------------ */

.home-page .carousel-indicators {
    bottom: 5px !important;

    gap: 4px !important;

    z-index: 25 !important;
}

.home-page .carousel-indicators .indicator {
    width: 5px !important;
    height: 5px !important;
}

.home-page .carousel-indicators .indicator.active {
    width: 13px !important;
    height: 5px !important;
}


/* ============================================================
   SMALL PHONES
   ============================================================ */

@media (max-width: 480px) {

    .home-page .hero-content {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
        gap: 8px !important;
        align-items: start !important;
    }

    .home-page .hero-text {
        grid-column: 1 / 2 !important;
        order: 1 !important;
    }

    .home-page .hero-image {
        grid-column: 2 / 3 !important;
        order: 2 !important;
    }

    .home-page .flyer-carousel {
        width: 100% !important;
        max-width: 150px !important;

        height: 200px !important;
        min-height: 200px !important;
        max-height: 200px !important;

        border-radius: 14px !important;
    }

    .home-page .carousel-control {
        width: 25px !important;
        height: 25px !important;
    }
}


/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media (max-width: 375px) {

    .home-page .hero-content {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
        gap: 6px !important;
    }

    .home-page .flyer-carousel {
        max-width: 140px !important;

        height: 188px !important;
        min-height: 188px !important;
        max-height: 188px !important;
    }

    .home-page .carousel-control {
        width: 23px !important;
        height: 23px !important;

        font-size: 0.55rem !important;
    }
}

/* ============================================================
   HOMEPAGE HERO - FINAL LAYOUT FIX
   Only affects the home page hero. Existing colors/design remain.
   Desktop: flyer 50% + content 50%
   Mobile: clean vertical stacking
   ============================================================ */

/* Desktop and larger screens */
@media (min-width: 992px) {
    .home-page .hero {
        min-height: auto !important;
        padding: 105px 0 45px !important;
    }

    .home-page .hero .container {
        width: 100% !important;
    }

    .home-page .hero-content {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 40px !important;
        align-items: center !important;
        margin: 0 0 35px 0 !important;
    }

    .home-page .hero-text {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        text-align: left !important;
        margin: 0 !important;
        padding: 15px 20px !important;
        box-sizing: border-box !important;
    }

    .home-page .hero-text .hero-badge {
        position: static !important;
        width: fit-content !important;
        font-size: 0.85rem !important;
        padding: 7px 18px !important;
        margin: 0 0 18px 0 !important;
    }

    .home-page .hero-text h1 {
        font-size: clamp(2.6rem, 4vw, 4.2rem) !important;
        line-height: 1.08 !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 0 18px 0 !important;
        letter-spacing: -1.5px !important;
    }

    .home-page .hero-text h1 .typing-wrapper {
        font-size: inherit !important;
        line-height: inherit !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .home-page .hero-text p {
        font-size: clamp(1rem, 1.3vw, 1.2rem) !important;
        line-height: 1.6 !important;
        max-width: 600px !important;
        margin: 0 0 25px 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .home-page .hero-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .home-page .hero-buttons .btn {
        font-size: 0.95rem !important;
        padding: 11px 20px !important;
    }

    .home-page .hero-image {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    .home-page .flyer-carousel {
        width: 100% !important;
        max-width: none !important;
        height: min(62vh, 560px) !important;
        min-height: 430px !important;
        aspect-ratio: auto !important;
        border-radius: 20px !important;
    }

    .home-page .flyer-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .home-page .search-box {
        max-width: 650px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 991px) {
    .home-page .hero {
        padding: 90px 20px 35px !important;
    }

    .home-page .hero-content {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 25px !important;
        align-items: center !important;
    }

    .home-page .hero-text {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: 10px !important;
    }

    .home-page .hero-text .hero-badge {
        position: static !important;
        font-size: 0.72rem !important;
        padding: 6px 12px !important;
        margin-bottom: 12px !important;
    }

    .home-page .hero-text h1 {
        font-size: clamp(2rem, 4vw, 2.8rem) !important;
        line-height: 1.1 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 0 14px 0 !important;
    }

    .home-page .hero-text h1 .typing-wrapper {
        font-size: inherit !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .home-page .hero-text p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        margin: 0 0 18px 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .home-page .hero-buttons .btn {
        font-size: 0.78rem !important;
        padding: 8px 13px !important;
    }

    .home-page .hero-image {
        min-height: 0 !important;
        height: auto !important;
    }

    .home-page .flyer-carousel {
        width: 100% !important;
        max-width: none !important;
        height: 430px !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
    }

    .home-page .search-box {
        max-width: 600px !important;
        width: 100% !important;
        margin: 25px auto 0 !important;
    }
}

/* Mobile - stack the two hero parts vertically */
@media (max-width: 767px) {
    .home-page .hero {
        padding: 80px 15px 30px !important;
        min-height: auto !important;
    }

    .home-page .hero-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
        align-items: stretch !important;
        margin-bottom: 25px !important;
    }

    .home-page .hero-text {
        order: 1 !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        padding: 5px 5px 0 !important;
        margin: 0 !important;
    }

    .home-page .hero-text .hero-badge {
        position: static !important;
        width: fit-content !important;
        max-width: 100% !important;
        font-size: 0.68rem !important;
        line-height: 1.3 !important;
        padding: 6px 12px !important;
        margin: 0 0 14px 0 !important;
        white-space: normal !important;
    }

    .home-page .hero-text h1 {
        width: 100% !important;
        font-size: clamp(2rem, 9vw, 2.8rem) !important;
        line-height: 1.1 !important;
        letter-spacing: -0.8px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 0 14px 0 !important;
    }

    .home-page .hero-text h1 .typing-wrapper {
        font-size: inherit !important;
        line-height: inherit !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .home-page .hero-text p {
        width: 100% !important;
        max-width: 520px !important;
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
        margin: 0 0 18px 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .home-page .hero-buttons {
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 9px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .home-page .hero-buttons .btn {
        font-size: 0.78rem !important;
        padding: 9px 14px !important;
    }

    .home-page .hero-image {
        order: 2 !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .home-page .flyer-carousel {
        width: 100% !important;
        max-width: 420px !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 5 !important;
        border-radius: 16px !important;
    }

    .home-page .flyer-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .home-page .carousel-control {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.8rem !important;
    }

    .home-page .carousel-control.prev {
        left: 9px !important;
    }

    .home-page .carousel-control.next {
        right: 9px !important;
    }

    .home-page .search-box {
        width: 100% !important;
        max-width: 520px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .home-page .search-box input {
        min-width: 0 !important;
        font-size: 0.82rem !important;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .home-page .hero {
        padding: 75px 12px 25px !important;
    }

    .home-page .hero-content {
        gap: 24px !important;
    }

    .home-page .hero-text .hero-badge {
        font-size: 0.62rem !important;
        padding: 5px 10px !important;
    }

    .home-page .hero-text h1 {
        font-size: clamp(1.8rem, 9vw, 2.35rem) !important;
    }

    .home-page .hero-text p {
        font-size: 0.88rem !important;
    }

    .home-page .hero-buttons {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 280px !important;
    }

    .home-page .hero-buttons .btn {
        width: 100% !important;
        justify-content: center !important;
        font-size: 0.78rem !important;
    }

    .home-page .flyer-carousel {
        max-width: 360px !important;
        aspect-ratio: 4 / 5 !important;
    }

    .home-page .search-box {
        border-radius: 18px !important;
        padding: 5px !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .home-page .search-box input {
        flex: 1 1 150px !important;
        padding: 8px 5px !important;
    }

    .home-page .search-box .btn {
        padding: 8px 14px !important;
    }
}

/* ============================================================
   LEGAL / PRIVACY PAGES
   Covers privacy-policy.html and terms.html, including the
   standalone privacy layout used by the Privacy Policy page.
   ============================================================ */
.privacy-hero,
.page-hero.privacy-hero {
    position: relative;
}

.privacy-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.privacy-hero {
    min-height: 620px;
    padding: 120px 0 70px;
    overflow: hidden;
    color: #fff;
    background: #0f1a2b;
}

.privacy-hero-bg,
.privacy-hero-overlay {
    position: absolute;
    inset: 0;
}

.privacy-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.privacy-hero-overlay {
    background: linear-gradient(90deg, rgba(15,26,43,.94), rgba(15,26,43,.72));
    z-index: 1;
}

.privacy-hero-content {
    position: relative;
    z-index: 2;
    min-height: 430px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    align-items: center;
    gap: 50px;
    margin-top: -100px;
}

.privacy-hero-text h1 {
    font-size: clamp(2.7rem, 5vw, 4.5rem);
    line-height: 1.05;
    margin: 14px 0 18px;
    font-weight: 800;
}

.privacy-hero-text h1 span {
    color: #f47a20;
}

.privacy-hero-text p {
    max-width: 620px;
    color: rgba(255,255,255,.82);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 28px;
}

.privacy-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(244,122,32,.16);
    border: 1px solid rgba(244,122,32,.35);
    color: #fff;
    padding: 7px 15px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
}

.privacy-hero-buttons,
.privacy-cta-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.privacy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 700;
    transition: .3s ease;
}

.privacy-btn-primary {
    background: #f47a20;
    color: #fff;
}

.privacy-btn-primary:hover {
    background: #d96a18;
    color: #fff;
    transform: translateY(-2px);
}

.privacy-btn-secondary {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
}

.privacy-btn-secondary:hover {
    background: #fff;
    color: #0f1a2b;
}

.privacy-hero-image {
    position: relative;
    max-width: 460px;
    width: 100%;
    justify-self: end;
}

.privacy-hero-image > img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 25px 70px rgba(0,0,0,.3);
}

.privacy-hero-floating-badge,
.hero-floating-badge {
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(15,26,43,.92);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

.privacy-content,
.legal-content {
    padding: 75px 0;
    background: #f4f6f9;
}

.privacy-wrapper,
.legal-wrapper {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

.privacy-sidebar,
.legal-sidebar {
    position: sticky;
    top: 95px;
    background: #fff;
    border: 1px solid #e5e9ee;
    border-radius: 16px;
    padding: 24px 18px;
    box-shadow: 0 10px 35px rgba(15,26,43,.06);
}

.privacy-sidebar h3,
.legal-sidebar h3 {
    color: #0f1a2b;
    font-size: 1.05rem;
    margin: 0 0 15px;
    padding: 0 8px 12px;
    border-bottom: 1px solid #e8edf2;
}

.privacy-sidebar ul,
.legal-sidebar ul {
    display: grid;
    gap: 3px;
}

.privacy-sidebar li a,
.legal-sidebar li a {
    display: block;
    padding: 9px 10px;
    border-radius: 7px;
    color: #607080;
    font-size: .82rem;
    line-height: 1.35;
}

.privacy-sidebar li a:hover,
.legal-sidebar li a:hover {
    color: #f47a20;
    background: rgba(244,122,32,.07);
    padding-left: 14px;
}

.privacy-main,
.legal-main {
    min-width: 0;
    background: #fff;
    border: 1px solid #e5e9ee;
    border-radius: 18px;
    padding: 12px 35px 35px;
    box-shadow: 0 10px 35px rgba(15,26,43,.05);
}

.privacy-section,
.legal-section {
    padding: 30px 0;
    border-bottom: 1px solid #edf0f3;
    scroll-margin-top: 100px;
}

.privacy-section:last-of-type,
.legal-section:last-of-type {
    border-bottom: 0;
}

.privacy-section h2,
.legal-section h2 {
    color: #0f1a2b;
    font-size: 1.35rem;
    line-height: 1.3;
    margin-bottom: 12px;
}

.privacy-section h2::after,
.legal-section h2::after {
    content: '';
    display: block;
    width: 42px;
    height: 3px;
    margin-top: 9px;
    border-radius: 4px;
    background: #f47a20;
}

.privacy-section p,
.legal-section p {
    color: #5f6d7a;
    font-size: .94rem;
    line-height: 1.8;
    margin-bottom: 12px;
}

.privacy-section ul,
.legal-section ul {
    display: grid;
    gap: 9px;
    margin: 15px 0 0;
}

.privacy-section li,
.legal-section li {
    color: #5f6d7a;
    font-size: .9rem;
    line-height: 1.65;
    padding-left: 2px;
}

.privacy-section li i,
.legal-section li i {
    color: #f47a20;
    margin-right: 8px;
}

.privacy-contact,
.legal-contact {
    margin-top: 18px;
    padding: 18px 20px;
    border-radius: 12px;
    background: #f7f9fb;
    border-left: 4px solid #f47a20;
}

.privacy-contact p,
.legal-contact p {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 9px;
}

.privacy-contact p:last-child,
.legal-contact p:last-child {
    margin-bottom: 0;
}

.privacy-contact i,
.legal-contact i {
    width: 18px;
    color: #f47a20;
    margin-top: 4px;
}

.privacy-updated,
.legal-updated {
    margin-top: 22px;
    padding: 14px 16px;
    border-radius: 9px;
    background: #f7f9fb;
    color: #6b7a8a;
    font-size: .82rem;
}

.privacy-updated p,
.legal-updated p {
    margin: 0;
    font-size: inherit;
}

.privacy-cta {
    padding: 65px 0;
    background: linear-gradient(135deg, #0f1a2b 0%, #1a2a3a 100%);
    color: #fff;
    text-align: center;
}

.privacy-cta-content {
    max-width: 760px;
    margin: 0 auto;
}

.privacy-cta-content h2 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.2;
    margin-bottom: 12px;
}

.privacy-cta-content h2 span {
    color: #f47a20;
}

.privacy-cta-content p {
    color: rgba(255,255,255,.78);
    font-size: .98rem;
    margin-bottom: 25px;
}

.privacy-cta-buttons {
    justify-content: center;
}

#privacyBackToTop {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #f47a20;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(0,0,0,.18);
    z-index: 999;
    transition: .3s ease;
}

#privacyBackToTop:hover {
    transform: translateY(-3px);
    background: #d96a18;
}

/* Make the custom legal page match the shared site hero when it uses
   the standard page-hero markup (terms.html). */
.page-hero.privacy-hero .page-hero-text h1,
.page-hero.privacy-hero .page-hero-text p,
.page-hero.privacy-hero .page-hero-image {
    position: relative;
}

@media (max-width: 900px) {
    .privacy-hero-content {
        grid-template-columns: 1fr;
        gap: 35px;
        text-align: center;
    }

    .privacy-hero-text p {
        margin-left: auto;
        margin-right: auto;
    }

    .privacy-hero-buttons,
    .privacy-cta-buttons {
        justify-content: center;
    }

    .privacy-hero-image {
        justify-self: center;
        max-width: 500px;
    }

    .privacy-wrapper,
    .legal-wrapper {
        grid-template-columns: 1fr;
    }

    .privacy-sidebar,
    .legal-sidebar {
        position: static;
    }

    .privacy-sidebar ul,
    .legal-sidebar ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }
}

@media (max-width: 600px) {
    .privacy-hero {
        min-height: auto;
        padding: 95px 0 45px;
    }

    .privacy-hero-content {
        min-height: auto;
        gap: 28px;
    }

    .privacy-hero-text h1 {
        font-size: clamp(2.2rem, 11vw, 3rem);
    }

    .privacy-hero-text p {
        font-size: .9rem;
    }

    .privacy-hero-buttons,
    .privacy-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .privacy-btn {
        width: 100%;
    }

    .privacy-hero-image > img {
        height: 270px;
    }

    .privacy-content,
    .legal-content {
        padding: 40px 0;
    }

    .privacy-container {
        padding: 0 14px;
    }

    .privacy-main,
    .legal-main {
        padding: 5px 18px 20px;
        border-radius: 13px;
    }

    .privacy-sidebar,
    .legal-sidebar {
        padding: 16px 12px;
    }

    .privacy-sidebar ul,
    .legal-sidebar ul {
        grid-template-columns: 1fr;
    }

    .privacy-sidebar li a,
    .legal-sidebar li a {
        font-size: .78rem;
    }

    .privacy-section,
    .legal-section {
        padding: 23px 0;
    }

    .privacy-section h2,
    .legal-section h2 {
        font-size: 1.12rem;
    }

    .privacy-section p,
    .legal-section p,
    .privacy-section li,
    .legal-section li {
        font-size: .86rem;
    }

    .privacy-cta {
        padding: 45px 14px;
    }
}

/* ============================================================
   SMALL / SPECIAL PAGE SAFETY NETS
   These classes are used as page-specific modifiers/components
   and now have sensible styling even where the base stylesheet
   only supplied the shared parent styles.
   ============================================================ */
.service-cta,
.employer-cta,
.contact-cta,
.partner-cta,
.careers-cta,
.job-detail-cta {
    position: relative;
}

.card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(244,122,32,.1);
    color: #f47a20;
    font-size: .72rem;
    font-weight: 700;
}

.job-listings-footer {
    margin-top: 25px;
}

.update-success {
    border-radius: 10px;
    padding: 12px 15px;
}

.registration-form {
    width: 100%;
}

.recommendation-subtitle {
    color: #6b7a8a;
    font-size: .82rem;
    line-height: 1.5;
}

.industry-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.profile-completion,
.profile-full {
    min-width: 0;
}

.recommendation-card,
.talent-recommendations {
    min-width: 0;
}

@media (max-width: 600px) {
    .privacy-hero .page-hero-content {
        gap: 25px;
    }

    .privacy-hero .page-hero-text h1 {
        font-size: clamp(2.1rem, 10vw, 2.8rem);
    }
}


/* ============================================================
   HOMEPAGE HERO - TRUE 50/50 DESKTOP LAYOUT
   Left: text/content | Right: flyer + search
   Scroll indicator remains independently at the bottom.
   ============================================================ */
@media (min-width: 992px) {
    body.home-page .hero {
        min-height: calc(100vh - 68px) !important;
        height: calc(100vh - 68px) !important;
        padding: 88px 0 55px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body.home-page .hero > .container {
        width: 100% !important;
        max-width: none !important;
        padding: 0 5.2vw !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    body.home-page .hero-content {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        column-gap: 34px !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* LEFT HALF */
    body.home-page .hero-text {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        text-align: left !important;
        padding: 0 20px 0 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    body.home-page .hero-text .hero-badge {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        width: fit-content !important;
        height: auto !important;
        margin: 0 0 20px !important;
        padding: 9px 18px !important;
        font-size: 0.9rem !important;
        white-space: nowrap !important;
    }

    body.home-page .hero-text h1 {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 0 20px !important;
        overflow: visible !important;
        font-size: clamp(3rem, 4.4vw, 4.5rem) !important;
        line-height: 1.05 !important;
        letter-spacing: -2px !important;
        white-space: normal !important;
    }

    /* Never clip the animated word. Reserve enough room for the longest word. */
    body.home-page .hero-text h1 .typing-wrapper,
    body.home-page .typing-wrapper {
        display: inline-block !important;
        width: 15ch !important;
        min-width: 15ch !important;
        max-width: none !important;
        height: auto !important;
        min-height: 1.05em !important;
        max-height: none !important;
        line-height: 1.05 !important;
        overflow: visible !important;
        white-space: nowrap !important;
        vertical-align: baseline !important;
    }

    body.home-page #typing-text {
        display: inline !important;
        white-space: nowrap !important;
    }

    body.home-page .hero-text h1 .typing-wrapper::after {
        display: inline-block !important;
        position: static !important;
        font-size: 0.75em !important;
    }

    body.home-page .hero-text p {
        width: 100% !important;
        max-width: 650px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 0 0 28px !important;
        font-size: clamp(1rem, 1.35vw, 1.2rem) !important;
        line-height: 1.55 !important;
    }

    body.home-page .hero-buttons {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 14px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    body.home-page .hero-buttons .btn {
        width: auto !important;
        min-width: 145px !important;
        font-size: 0.95rem !important;
        padding: 12px 20px !important;
    }

    /* RIGHT HALF: flyer and search share this column */
    body.home-page .hero-image {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 18px !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    body.home-page .flyer-carousel {
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        height: min(52vh, 400px) !important;
        min-height: 330px !important;
        max-height: 400px !important;
        aspect-ratio: auto !important;
        margin: 0 !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.home-page .flyer-carousel-container,
    body.home-page .flyer-slide {
        width: 100% !important;
        height: 100% !important;
    }

    body.home-page .flyer-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Keep flyer text visible; don't let the carousel crop the overlay content. */
    body.home-page .flyer-slide-overlay {
        top: auto !important;
        bottom: 0 !important;
        height: auto !important;
        min-height: 100px !important;
        max-height: 48% !important;
        overflow: hidden !important;
        padding: 22px 18px 14px !important;
        box-sizing: border-box !important;
    }

    body.home-page .flyer-slide-overlay h3 {
        font-size: 0.95rem !important;
        line-height: 1.2 !important;
        margin: 0 0 5px !important;
    }

    body.home-page .flyer-slide-overlay p {
        font-size: 0.7rem !important;
        line-height: 1.3 !important;
        margin: 0 0 7px !important;
    }

    /* Search belongs to the right half, directly below the flyer. */
    body.home-page .hero-image .search-box {
        position: static !important;
        order: 2 !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 52px !important;
        height: 52px !important;
        margin: 0 !important;
        padding: 4px 5px 4px 14px !important;
        box-sizing: border-box !important;
        border-radius: 30px !important;
    }

    body.home-page .hero-image .search-box input {
        min-width: 0 !important;
        width: auto !important;
        height: 100% !important;
        padding: 5px 8px !important;
        font-size: 0.9rem !important;
    }

    body.home-page .hero-image .search-box .btn {
        flex: 0 0 auto !important;
        padding: 9px 20px !important;
        font-size: 0.88rem !important;
        white-space: nowrap !important;
    }
}

/* ============================================================
   HOMEPAGE HERO - MOBILE STACK
   Text -> flyer -> search. Scroll indicator stays at bottom.
   ============================================================ */
@media (max-width: 991px) {
    body.home-page .hero {
        height: auto !important;
        min-height: calc(100vh - 65px) !important;
        padding: 82px 15px 65px !important;
        overflow: visible !important;
    }

    body.home-page .hero > .container {
        width: 100% !important;
        max-width: 720px !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    body.home-page .hero-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body.home-page .hero-text {
        order: 1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0 !important;
    }

    body.home-page .hero-text h1 {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        font-size: clamp(2.2rem, 9vw, 3.4rem) !important;
        line-height: 1.08 !important;
        margin-bottom: 15px !important;
    }

    body.home-page .hero-text h1 .typing-wrapper,
    body.home-page .typing-wrapper {
        width: auto !important;
        min-width: 15ch !important;
        max-width: none !important;
        height: auto !important;
        min-height: 1.08em !important;
        max-height: none !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }

    body.home-page .hero-text p {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
        margin-bottom: 18px !important;
    }

    body.home-page .hero-buttons {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    body.home-page .hero-image {
        order: 2 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        gap: 16px !important;
        align-items: center !important;
    }

    body.home-page .flyer-carousel {
        width: min(100%, 520px) !important;
        max-width: 520px !important;
        height: min(72vw, 520px) !important;
        min-height: 300px !important;
        max-height: 520px !important;
        aspect-ratio: 4 / 5 !important;
    }

    body.home-page .hero-image .search-box {
        width: min(100%, 520px) !important;
        max-width: 520px !important;
        height: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
    }
}

@media (max-width: 480px) {
    body.home-page .hero {
        padding: 75px 12px 60px !important;
    }

    body.home-page .hero-text h1 {
        font-size: clamp(1.9rem, 10vw, 2.7rem) !important;
        letter-spacing: -1px !important;
    }

    body.home-page .hero-text p {
        font-size: 0.88rem !important;
    }

    body.home-page .hero-buttons {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 290px !important;
    }

    body.home-page .hero-buttons .btn {
        width: 100% !important;
    }

    body.home-page .flyer-carousel {
        width: 100% !important;
        height: min(110vw, 460px) !important;
        min-height: 280px !important;
    }

    body.home-page .hero-image .search-box {
        height: auto !important;
        min-height: 50px !important;
    }
}

/* ============================================================
   HOMEPAGE FLYER - SLIGHTLY LARGER DESKTOP SIZE
   Keeps the 50/50 layout and search bar placement unchanged.
   ============================================================ */
@media (min-width: 1200px) {
    body.home-page .hero-image {
        gap: 18px !important;
    }

    body.home-page .flyer-carousel {
        flex: 0 0 auto !important;
        height: min(58vh, 460px) !important;
        min-height: 380px !important;
        max-height: 460px !important;
    }

    body.home-page .flyer-slide-overlay {
        max-height: 52% !important;
        padding: 24px 20px 15px !important;
    }

    body.home-page .flyer-slide-overlay h3 {
        font-size: 1rem !important;
        line-height: 1.25 !important;
    }

    body.home-page .flyer-slide-overlay p {
        font-size: 0.74rem !important;
        line-height: 1.35 !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    body.home-page .flyer-carousel {
        flex: 0 0 auto !important;
        height: min(55vh, 420px) !important;
        min-height: 350px !important;
        max-height: 420px !important;
    }
}

/* ============================================================
   FINAL MOBILE NAVIGATION / HAMBURGER FIX
   Keeps desktop navigation unchanged.
   Mobile: logo + hamburger, with links revealed by hamburger.
   ============================================================ */
@media (max-width: 767px) {
    header.glass-nav {
        padding: 9px 0 !important;
        min-height: 58px !important;
    }

    header.glass-nav .container {
        position: relative !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
        padding: 0 14px !important;
    }

    header .logo {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    header .logo a {
        gap: 9px !important;
    }

    header .logo .logo-icon,
    header .logo .logo-icon img {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    header .logo span {
        font-size: 0.98rem !important;
        white-space: nowrap !important;
    }

    /* Hide desktop action buttons on phones; they remain available in the menu links. */
    header .nav-actions {
        display: none !important;
    }

    /* Always show the hamburger on mobile. */
    header .unique-hamburger {
        display: flex !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        margin-left: auto !important;
        padding: 4px !important;
        border: 1px solid rgba(244, 122, 32, 0.45) !important;
        border-radius: 10px !important;
        background: rgba(15, 26, 43, 0.75) !important;
        box-sizing: border-box !important;
    }

    header .unique-hamburger .dot {
        width: 6px !important;
        height: 6px !important;
    }

    header .unique-hamburger .dot:nth-child(1) {
        top: 8px !important;
    }

    header .unique-hamburger .dot:nth-child(2) {
        top: 50% !important;
    }

    header .unique-hamburger .dot:nth-child(3) {
        bottom: 8px !important;
    }

    header .unique-hamburger.active .dot:nth-child(1),
    header .unique-hamburger.active .dot:nth-child(3) {
        width: 20px !important;
        height: 3px !important;
    }

    /* Collapsed mobile navigation. */
    header nav {
        display: none !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        order: 10 !important;
        margin-top: 9px !important;
        padding: 6px 0 8px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    header nav.active {
        display: block !important;
    }

    header nav ul {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 2px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    header nav ul li {
        width: 100% !important;
    }

    header nav ul li a {
        display: block !important;
        width: 100% !important;
        padding: 11px 14px !important;
        font-size: 0.9rem !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    header nav ul li a:hover,
    header nav ul li a.active {
        background: rgba(244, 122, 32, 0.10) !important;
    }

    header nav ul li a::after {
        display: none !important;
    }
}

/* Very small phones: keep the hamburger and logo usable. */
@media (max-width: 480px) {
    header .logo .logo-icon,
    header .logo .logo-icon img {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }

    header .logo span {
        font-size: 0.88rem !important;
    }

    header .unique-hamburger {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }
}


/* ============================================================
   HOMEPAGE DESKTOP VERTICAL POSITION ADJUSTMENT
   Moves the desktop hero content slightly lower so it does not
   sit too close to the navigation/header.
   Mobile/tablet layouts are intentionally unchanged.
   ============================================================ */
@media (min-width: 1200px) {
    body.home-page .hero-content {
        transform: translateY(24px) !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    body.home-page .hero-content {
        transform: translateY(18px) !important;
    }
}


/* ============================================================
   FINAL SITE-WIDE VISUAL POLISH
   - Home hero: flyer marquee replaces the photo background.
   - Other page heroes: consistent solid navy background.
   - Search bar removed from Home hero.
   - Consistent buttons, spacing, cards and form controls.
   - Responsive and mobile-friendly.
   ============================================================ */

/* ---------------- HOME HERO: FULL-SCREEN FLYER BACKGROUND ---------------- */
.home-page .hero {
    min-height: calc(100vh - 70px) !important;
    height: calc(100vh - 70px) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    background: #0f1a2b !important;
}

.home-page .hero-bg {
    display: none !important;
}

.home-page .hero-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    z-index: 0 !important;
}

.home-page .flyer-carousel {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: #111d2f !important;
}

.home-page .flyer-carousel-container.hero-flyer-marquee {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    display: flex !important;
    align-items: stretch !important;
    width: max-content !important;
    height: 100% !important;
    min-width: max-content !important;
    overflow: visible !important;
    animation: awardsFlyerMarquee 55s linear infinite !important;
    will-change: transform !important;
}

.home-page .flyer-slide {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 clamp(230px, 25vw, 390px) !important;
    width: clamp(230px, 25vw, 390px) !important;
    height: 100% !important;
    min-height: 0 !important;
    opacity: 1 !important;
    z-index: auto !important;
    transition: none !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    border-right: 1px solid rgba(255,255,255,.13) !important;
}

.home-page .flyer-slide img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: saturate(.92) brightness(.74) !important;
}

.home-page .flyer-slide-overlay {
    display: none !important;
}

.home-page .hero-overlay {
    z-index: 1 !important;
    background: linear-gradient(90deg,
        rgba(10,20,34,.94) 0%,
        rgba(10,20,34,.82) 28%,
        rgba(10,20,34,.54) 54%,
        rgba(10,20,34,.28) 100%) !important;
    pointer-events: none !important;
}

.home-page .hero .container {
    z-index: 3 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

.home-page .hero-content {
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
    transform: none !important;
}

.home-page .hero-text {
    position: relative !important;
    z-index: 4 !important;
    width: min(620px, 54vw) !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    text-align: left !important;
}

.home-page .hero-text .hero-badge {
    position: static !important;
    width: fit-content !important;
    margin: 0 0 20px 0 !important;
}

.home-page .hero-text h1 {
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
    font-size: clamp(3rem, 5.3vw, 5.2rem) !important;
    line-height: 1.04 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    letter-spacing: -2px !important;
}

.home-page .hero-text h1 .typing-wrapper {
    display: inline !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

.home-page .hero-text p {
    margin: 0 0 26px 0 !important;
    max-width: 580px !important;
    font-size: clamp(1rem, 1.35vw, 1.2rem) !important;
    line-height: 1.6 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.home-page .hero-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* Search bar is intentionally removed from the Home hero. */
.home-page .search-box {
    display: none !important;
}

.home-page .carousel-control,
.home-page .carousel-indicators {
    display: none !important;
}

@keyframes awardsFlyerMarquee {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

/* Keep the bottom scroll cue fixed over the moving flyers. */
.home-page .scroll-indicator {
    z-index: 5 !important;
    bottom: 18px !important;
}

/* Pause only while the pointer is over the hero for accessibility/control. */
.home-page .flyer-carousel:hover .hero-flyer-marquee {
    animation-play-state: paused !important;
}

/* ---------------- ALL OTHER PAGE HEROES: ONE CONSISTENT COLOR ---------------- */
.page-hero,
.privacy-hero {
    background: #0f1a2b !important;
}

.page-hero-bg,
.privacy-hero-bg {
    display: none !important;
}

.page-hero-overlay,
.privacy-hero-overlay {
    background: linear-gradient(135deg, #0f1a2b 0%, #14243a 100%) !important;
    opacity: 1 !important;
}

.page-hero-content,
.privacy-hero-content {
    position: relative !important;
    z-index: 2 !important;
}

/* Preserve useful foreground/content images on pages; only background hero photos are removed. */
.page-hero-image,
.privacy-hero-image {
    display: none !important;
}

/* ---------------- CONSISTENT BUTTON SYSTEM ---------------- */
.btn {
    min-height: 44px !important;
    padding: 10px 22px !important;
    border-radius: 10px !important;
    font-size: .9rem !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}

.btn-lg {
    min-height: 48px !important;
    padding: 12px 24px !important;
    font-size: .95rem !important;
}

.btn-sm {
    min-height: 38px !important;
    padding: 8px 16px !important;
    font-size: .8rem !important;
}

.privacy-btn,
.privacy-btn-primary,
.privacy-btn-secondary {
    min-height: 44px !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
}

/* Keep button groups visually balanced. */
.hero-buttons,
.page-hero-buttons,
.privacy-hero-buttons,
.privacy-cta-buttons,
.cta-buttons {
    align-items: center !important;
    gap: 12px !important;
}

/* ---------------- CONSISTENT CONTENT SPACING ---------------- */
section:not(.hero):not(.page-hero):not(.privacy-hero) {
    scroll-margin-top: 85px;
}

.section-header,
.page-section-header {
    margin-bottom: 36px !important;
}

.section-header h2,
.page-section-header h2 {
    line-height: 1.15 !important;
}

/* Common cards: cleaner edges and consistent rhythm without changing their content. */
.card,
.info-card,
.service-card,
.job-card,
.feature-card,
.testimonial-card,
.stat-card,
.blog-card,
.process-card,
.contact-card {
    border-radius: 14px !important;
}

/* Forms: consistent control height and typography. */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    font-family: 'Inter', sans-serif !important;
}

/* ---------------- RESPONSIVE HOME HERO ---------------- */
@media (max-width: 991px) {
    .home-page .hero {
        min-height: calc(100vh - 64px) !important;
        height: calc(100vh - 64px) !important;
    }

    .home-page .hero-text {
        width: min(620px, 72vw) !important;
    }

    .home-page .hero-text h1 {
        font-size: clamp(2.5rem, 7vw, 4rem) !important;
    }

    .home-page .flyer-slide {
        flex-basis: clamp(210px, 31vw, 300px) !important;
        width: clamp(210px, 31vw, 300px) !important;
    }
}

@media (max-width: 767px) {
    .home-page .hero {
        min-height: calc(100svh - 60px) !important;
        height: calc(100svh - 60px) !important;
    }

    .home-page .hero .container {
        align-items: center !important;
    }

    .home-page .hero-text {
        width: 100% !important;
        max-width: 520px !important;
        padding: 0 4px !important;
        align-items: center !important;
        text-align: center !important;
    }

    .home-page .hero-text .hero-badge {
        font-size: .68rem !important;
        padding: 6px 12px !important;
        margin-bottom: 15px !important;
    }

    .home-page .hero-text h1 {
        font-size: clamp(2.1rem, 10vw, 3rem) !important;
        line-height: 1.06 !important;
        letter-spacing: -1px !important;
        margin-bottom: 14px !important;
    }

    .home-page .hero-text p {
        font-size: .9rem !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
        max-width: 430px !important;
    }

    .home-page .hero-buttons {
        justify-content: center !important;
        width: 100% !important;
    }

    .home-page .hero-buttons .btn {
        min-height: 42px !important;
        padding: 9px 16px !important;
        font-size: .8rem !important;
    }

    .home-page .flyer-slide {
        flex-basis: 52vw !important;
        width: 52vw !important;
    }

    .home-page .hero-overlay {
        background: linear-gradient(180deg,
            rgba(10,20,34,.78) 0%,
            rgba(10,20,34,.70) 45%,
            rgba(10,20,34,.86) 100%) !important;
    }

    .home-page .scroll-indicator {
        bottom: 10px !important;
        font-size: .68rem !important;
    }

    .page-hero,
    .privacy-hero {
        min-height: 440px !important;
        padding: 100px 0 55px !important;
    }

    .page-hero-text h1,
    .privacy-hero-text h1 {
        font-size: clamp(2rem, 9vw, 3rem) !important;
    }

    .page-hero-text p,
    .privacy-hero-text p {
        font-size: .92rem !important;
        line-height: 1.6 !important;
    }

    .page-hero-buttons,
    .privacy-hero-buttons {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    .btn-lg {
        min-height: 44px !important;
        padding: 10px 18px !important;
        font-size: .86rem !important;
    }
}

@media (max-width: 480px) {
    .home-page .hero-text h1 {
        font-size: clamp(1.85rem, 10vw, 2.45rem) !important;
    }

    .home-page .hero-text p {
        font-size: .84rem !important;
    }

    .home-page .hero-buttons {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        max-width: 330px !important;
    }

    .home-page .hero-buttons .btn {
        flex: 1 1 auto !important;
        min-width: 135px !important;
    }

    .home-page .flyer-slide {
        flex-basis: 68vw !important;
        width: 68vw !important;
    }

    .page-hero,
    .privacy-hero {
        min-height: 400px !important;
        padding-top: 88px !important;
    }
}


/* ============================================================
   FINAL NEAT LAYOUT PASS - 25 AUG 2026
   Home: one full-screen flyer at a time, pauses, then slides to next.
   Other pages: shorter, cleaner page headers.
   Navbar: single professional row on desktop.
   ============================================================ */

/* ---------- PROFESSIONAL DESKTOP NAVBAR ---------- */
@media (min-width: 768px) {
    header.glass-nav {
        padding: 8px 0 !important;
        min-height: 68px !important;
    }

    header.glass-nav .container {
        max-width: 1320px !important;
        min-height: 52px !important;
        padding: 0 20px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 18px !important;
        align-items: center !important;
    }

    header .logo {
        flex: 0 0 auto !important;
        min-width: 210px !important;
    }

    header .logo a {
        gap: 10px !important;
    }

    header .logo .logo-icon,
    header .logo .logo-icon img {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }

    header .logo span {
        font-size: 1.08rem !important;
        white-space: nowrap !important;
    }

    header nav {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    header nav ul {
        width: 100% !important;
        justify-content: center !important;
        gap: 0 !important;
        flex-wrap: nowrap !important;
    }

    header nav ul li {
        flex: 0 0 auto !important;
    }

    header nav ul li a {
        padding: 8px 12px !important;
        font-size: .82rem !important;
        white-space: nowrap !important;
    }

    .nav-actions {
        flex: 0 0 auto !important;
        gap: 8px !important;
        white-space: nowrap !important;
    }

    .nav-actions .btn {
        min-height: 40px !important;
        padding: 8px 15px !important;
        font-size: .76rem !important;
        white-space: nowrap !important;
    }
}

/* ---------- HOME: TRUE FULL-HERO SINGLE-FLYER SLIDER ---------- */
.home-page .hero {
    min-height: calc(100vh - 68px) !important;
    height: calc(100vh - 68px) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #0f1a2b !important;
}

.home-page .hero-bg {
    display: none !important;
}

.home-page .hero .container {
    max-width: 1320px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    z-index: 4 !important;
    pointer-events: none !important;
}

.home-page .hero-content {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    transform: none !important;
    pointer-events: none !important;
}

.home-page .hero-text {
    width: min(650px, 52vw) !important;
    padding: 0 10px !important;
    margin-top: 20px !important;
    pointer-events: auto !important;
    z-index: 8 !important;
}

.home-page .hero-text .hero-badge {
    margin-bottom: 18px !important;
}

.home-page .hero-text h1 {
    font-size: clamp(3rem, 5vw, 5rem) !important;
    line-height: 1.04 !important;
    margin: 0 0 16px 0 !important;
    overflow: visible !important;
}

.home-page .hero-text p {
    margin: 0 0 24px 0 !important;
    font-size: clamp(1rem, 1.3vw, 1.18rem) !important;
    color: #e4edf6 !important;
}

.home-page .hero-buttons .btn {
    min-height: 48px !important;
    padding: 12px 22px !important;
    font-size: .92rem !important;
}

/* The flyer layer covers every pixel of the hero, just like a background image. */
.home-page .hero-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100% !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    display: block !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.home-page .flyer-carousel {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: #0f1a2b !important;
}

.home-page .flyer-carousel-container.hero-flyer-sequence {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.home-page .flyer-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    flex: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(100%, 0, 0) !important;
    transition: transform 1.25s cubic-bezier(.65,0,.35,1) !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

.home-page .flyer-slide.active {
    transform: translate3d(0, 0, 0) !important;
    z-index: 2 !important;
}

.home-page .flyer-slide.previous {
    transform: translate3d(-100%, 0, 0) !important;
    z-index: 2 !important;
}

.home-page .flyer-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    filter: brightness(.62) saturate(.88) !important;
}

.home-page .flyer-slide-overlay {
    display: none !important;
}

/* Strong, consistent overlay keeps the fixed hero text readable. */
.home-page .hero-overlay {
    z-index: 3 !important;
    background: linear-gradient(90deg,
        rgba(8,18,32,.88) 0%,
        rgba(8,18,32,.70) 34%,
        rgba(8,18,32,.38) 62%,
        rgba(8,18,32,.48) 100%) !important;
    pointer-events: none !important;
}

.home-page .carousel-control,
.home-page .carousel-indicators {
    display: none !important;
}

.home-page .scroll-indicator {
    z-index: 10 !important;
    bottom: 16px !important;
    pointer-events: none !important;
}

/* No hover pause: the flyer sequence continues automatically. */
.home-page .flyer-carousel:hover .hero-flyer-sequence {
    animation: none !important;
}

/* ---------- SMALLER, CONSISTENT HERO HEADERS ON ALL OTHER PAGES ---------- */
.page-hero,
.privacy-hero {
    min-height: 315px !important;
    height: 315px !important;
    padding: 82px 0 34px !important;
    background: #0f1a2b !important;
}

.page-hero-bg,
.privacy-hero-bg {
    display: none !important;
}

.page-hero-overlay,
.privacy-hero-overlay {
    background: #0f1a2b !important;
    opacity: 1 !important;
}

.page-hero-content,
.privacy-hero-content {
    margin-bottom: 0 !important;
}

.page-hero-text h1,
.privacy-hero-text h1 {
    font-size: clamp(2rem, 3.8vw, 3rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 12px !important;
}

.page-hero-text p,
.privacy-hero-text p {
    font-size: .98rem !important;
    line-height: 1.55 !important;
    margin-bottom: 16px !important;
}

.page-hero-badge,
.privacy-hero-badge {
    font-size: .74rem !important;
    padding: 6px 17px !important;
    margin-bottom: 13px !important;
}

.page-hero-buttons,
.privacy-hero-buttons {
    gap: 10px !important;
}

.page-hero-buttons .btn,
.privacy-hero-buttons .btn {
    min-height: 42px !important;
    padding: 9px 18px !important;
    font-size: .84rem !important;
}

/* ---------- MOBILE: KEEP FLYER FULL-SCREEN + HAMBURGER ---------- */
@media (max-width: 767px) {
    .home-page .hero {
        min-height: calc(100svh - 58px) !important;
        height: calc(100svh - 58px) !important;
    }

    .home-page .hero .container {
        padding: 0 18px !important;
        align-items: center !important;
    }

    .home-page .hero-text {
        width: 100% !important;
        max-width: 560px !important;
        margin-top: 20px !important;
        padding: 0 !important;
        align-items: center !important;
        text-align: center !important;
    }

    .home-page .hero-text h1 {
        font-size: clamp(2.25rem, 10vw, 3.4rem) !important;
        line-height: 1.06 !important;
    }

    .home-page .hero-text p {
        font-size: .92rem !important;
        max-width: 440px !important;
    }

    .home-page .hero-buttons {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    .home-page .hero-buttons .btn {
        min-height: 44px !important;
        padding: 10px 16px !important;
        font-size: .8rem !important;
    }

    .home-page .hero-overlay {
        background: linear-gradient(180deg,
            rgba(8,18,32,.66) 0%,
            rgba(8,18,32,.72) 45%,
            rgba(8,18,32,.84) 100%) !important;
    }

    .page-hero,
    .privacy-hero {
        min-height: 255px !important;
        height: 255px !important;
        padding: 78px 18px 28px !important;
    }

    .page-hero-text h1,
    .privacy-hero-text h1 {
        font-size: clamp(1.75rem, 8vw, 2.35rem) !important;
    }

    .page-hero-text p,
    .privacy-hero-text p {
        font-size: .86rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-page .flyer-slide {
        transition-duration: 0.01ms !important;
    }
}


/* ============================================================
   FINAL CLIENT UPDATE — TEXT-ONLY NAVBAR + FULLSCREEN HOME FLYERS
   ============================================================ */
header.glass-nav .container { flex-wrap: nowrap !important; gap: 18px !important; min-height: 54px !important; }
header.glass-nav .logo { flex: 0 0 auto !important; min-width: max-content !important; gap: 0 !important; }
header.glass-nav .logo-icon { display: none !important; }
header.glass-nav .brand-text-link { display: inline-flex !important; align-items: center !important; text-decoration: none !important; white-space: nowrap !important; }
header.glass-nav .brand-name { color: #fff !important; font-size: 1.12rem !important; font-weight: 800 !important; letter-spacing: -.45px !important; line-height: 1 !important; }
header.glass-nav .brand-name > span { color: #f47a20 !important; }
header.glass-nav nav { flex: 1 1 auto !important; min-width: 0 !important; }
header.glass-nav nav ul { justify-content: center !important; gap: 0 !important; }
header.glass-nav nav ul li a { padding: 8px 13px !important; font-size: .82rem !important; white-space: nowrap !important; }
header.glass-nav .nav-actions { display: flex !important; align-items: center !important; gap: 8px !important; flex: 0 0 auto !important; }
header.glass-nav .nav-actions .btn { min-height: 40px !important; padding: 9px 15px !important; font-size: .78rem !important; white-space: nowrap !important; }

.home-page .hero.home-flyer-hero { position: relative !important; width: 100% !important; height: 100svh !important; min-height: 100svh !important; padding: 0 !important; margin: 0 !important; display: block !important; overflow: hidden !important; background: #0f1a2b !important; }
.home-page .home-flyer-hero > .hero-bg, .home-page .home-flyer-hero > .hero-overlay, .home-page .home-flyer-hero > .container { display: none !important; }
.home-page .home-flyer-background { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; transform: none !important; display: block !important; z-index: 1 !important; }
.home-page .home-flyer-background .flyer-carousel { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; aspect-ratio: auto !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden !important; background: #0f1a2b !important; }
.home-page .home-flyer-background .flyer-carousel-container { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; }
.home-page .home-flyer-background .flyer-slide { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 1 !important; visibility: visible !important; transform: translate3d(100%,0,0) !important; transition: transform 1.25s cubic-bezier(.65,0,.35,1) !important; z-index: 1 !important; border: 0 !important; border-radius: 0 !important; }
.home-page .home-flyer-background .flyer-slide.active { transform: translate3d(0,0,0) !important; z-index: 2 !important; }
.home-page .home-flyer-background .flyer-slide.previous { transform: translate3d(-100%,0,0) !important; z-index: 2 !important; }
.home-page .home-flyer-background .flyer-slide img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; filter: none !important; }
.home-page .home-flyer-background .flyer-slide-overlay, .home-page .home-flyer-background .carousel-control, .home-page .home-flyer-background .carousel-indicators { display: none !important; }
.home-page .home-flyer-hero > .hero-overlay { display: block !important; position: absolute !important; inset: 0 !important; z-index: 3 !important; background: rgba(8,18,32,.06) !important; pointer-events: none !important; }
.home-page .home-flyer-hero .scroll-indicator { position: absolute !important; left: 50% !important; bottom: 18px !important; transform: translateX(-50%) !important; z-index: 20 !important; color: rgba(255,255,255,.9) !important; text-shadow: 0 2px 8px rgba(0,0,0,.65) !important; }

body:not(.home-page) .page-hero, body:not(.home-page) .privacy-hero { min-height: 255px !important; height: 255px !important; padding: 76px 0 28px !important; }
body:not(.home-page) .page-hero-text h1, body:not(.home-page) .privacy-hero-text h1 { font-size: clamp(1.85rem,3.3vw,2.55rem) !important; margin-bottom: 10px !important; }
body:not(.home-page) .page-hero-text p, body:not(.home-page) .privacy-hero-text p { font-size: .9rem !important; line-height: 1.45 !important; margin-bottom: 12px !important; }
body:not(.home-page) .page-hero-badge, body:not(.home-page) .privacy-hero-badge { font-size: .7rem !important; padding: 5px 14px !important; margin-bottom: 10px !important; }

@media (max-width: 991px) {
  header.glass-nav .container { flex-wrap: nowrap !important; min-height: 52px !important; }
  header.glass-nav .brand-name { font-size: 1rem !important; }
  header.glass-nav nav, header.glass-nav .nav-actions { display: none !important; }
  header.glass-nav nav.active { display: block !important; }
  header.glass-nav .unique-hamburger { display: flex !important; margin-left: auto !important; }
  .home-page .home-flyer-hero { height: 100svh !important; min-height: 100svh !important; }
  body:not(.home-page) .page-hero, body:not(.home-page) .privacy-hero { min-height: 220px !important; height: 220px !important; padding: 70px 18px 24px !important; }
}
@media (max-width: 480px) {
  header.glass-nav .brand-name { font-size: .92rem !important; }
}

/* ============================================================
   FINAL FLYER FIT FIX
   Keep every flyer fully visible inside the Home hero section.
   The flyer must never be cropped or extend beyond the hero.
   ============================================================ */
@media (min-width: 992px) {
    .home-page .hero.home-flyer-hero {
        margin-top: 68px !important;
        height: calc(100svh - 68px) !important;
        min-height: calc(100svh - 68px) !important;
        max-height: calc(100svh - 68px) !important;
    }

    .home-page .home-flyer-background,
    .home-page .home-flyer-background .flyer-carousel,
    .home-page .home-flyer-background .flyer-carousel-container,
    .home-page .home-flyer-background .flyer-slide {
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    .home-page .home-flyer-background .flyer-slide {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #0f1a2b !important;
    }

    .home-page .home-flyer-background .flyer-slide img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}

@media (max-width: 991px) {
    .home-page .hero.home-flyer-hero {
        margin-top: 52px !important;
        height: calc(100svh - 52px) !important;
        min-height: calc(100svh - 52px) !important;
        max-height: calc(100svh - 52px) !important;
    }

    .home-page .home-flyer-background,
    .home-page .home-flyer-background .flyer-carousel,
    .home-page .home-flyer-background .flyer-carousel-container,
    .home-page .home-flyer-background .flyer-slide {
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    .home-page .home-flyer-background .flyer-slide {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #0f1a2b !important;
    }

    .home-page .home-flyer-background .flyer-slide img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}


/* ============================================================
   FINAL PAGE HEADER CONSISTENCY
   Non-home pages: restore a comfortable, consistent navy
   header/hero height without affecting the full-screen Home
   flyer carousel.
   ============================================================ */

@media (min-width: 992px) {
    /* Common page hero/header containers */
    body:not(.home-page) .page-hero,
    body:not(.home-page) .inner-hero,
    body:not(.home-page) .page-header,
    body:not(.home-page) .hero:not(.home-hero) {
        min-height: 300px !important;
        height: auto !important;
        padding: 95px 20px 55px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* Keep headings comfortably sized */
    body:not(.home-page) .page-hero h1,
    body:not(.home-page) .inner-hero h1,
    body:not(.home-page) .page-header h1,
    body:not(.home-page) .hero:not(.home-hero) h1 {
        margin-top: 0 !important;
        margin-bottom: 18px !important;
        line-height: 1.12 !important;
    }

    body:not(.home-page) .page-hero p,
    body:not(.home-page) .inner-hero p,
    body:not(.home-page) .page-header p,
    body:not(.home-page) .hero:not(.home-hero) p {
        margin-bottom: 0 !important;
        line-height: 1.55 !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    body:not(.home-page) .page-hero,
    body:not(.home-page) .inner-hero,
    body:not(.home-page) .page-header,
    body:not(.home-page) .hero:not(.home-hero) {
        min-height: 270px !important;
        height: auto !important;
        padding: 85px 20px 45px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 767px) {
    body:not(.home-page) .page-hero,
    body:not(.home-page) .inner-hero,
    body:not(.home-page) .page-header,
    body:not(.home-page) .hero:not(.home-hero) {
        min-height: 230px !important;
        height: auto !important;
        padding: 78px 16px 38px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   FINAL HOME CAROUSEL VISIBILITY + PAGE HERO BALANCE
   ============================================================ */

/* HOME: keep the flyer carousel fully visible and contained. */
.home-page .hero.home-flyer-hero {
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    background: #0f1a2b !important;
}

.home-page .home-flyer-background,
.home-page .home-flyer-background .flyer-carousel,
.home-page .home-flyer-background .flyer-carousel-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.home-page .home-flyer-background .flyer-carousel-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.home-page .home-flyer-background .flyer-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 0 !important;
    background: #0f1a2b !important;
    overflow: hidden !important;
}

.home-page .home-flyer-background .flyer-slide.active {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 5 !important;
    transform: translate3d(0, 0, 0) !important;
}

.home-page .home-flyer-background .flyer-slide.previous {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 4 !important;
    transform: translate3d(-100%, 0, 0) !important;
}

.home-page .home-flyer-background .flyer-slide img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Desktop: Home hero fills the viewport below the fixed navbar. */
@media (min-width: 992px) {
    .home-page .hero.home-flyer-hero {
        margin-top: 68px !important;
        height: calc(100svh - 68px) !important;
        min-height: calc(100svh - 68px) !important;
        max-height: calc(100svh - 68px) !important;
    }

    /* Slightly taller, but still compact and consistent page headers. */
    body:not(.home-page) .page-hero,
    body:not(.home-page) .privacy-hero {
        min-height: 340px !important;
        height: 340px !important;
        padding: 96px 24px 52px !important;
        box-sizing: border-box !important;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .home-page .hero.home-flyer-hero {
        margin-top: 52px !important;
        height: calc(100svh - 52px) !important;
        min-height: calc(100svh - 52px) !important;
        max-height: calc(100svh - 52px) !important;
    }

    body:not(.home-page) .page-hero,
    body:not(.home-page) .privacy-hero {
        min-height: 300px !important;
        height: 300px !important;
        padding: 84px 20px 44px !important;
        box-sizing: border-box !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .home-page .hero.home-flyer-hero {
        margin-top: 52px !important;
        height: calc(100svh - 52px) !important;
        min-height: calc(100svh - 52px) !important;
        max-height: calc(100svh - 52px) !important;
    }

    body:not(.home-page) .page-hero,
    body:not(.home-page) .privacy-hero {
        min-height: 260px !important;
        height: 260px !important;
        padding: 76px 18px 36px !important;
        box-sizing: border-box !important;
    }
}


/* ============================================================
   FINAL HOME FLYER CAROUSEL - ROBUST FALLBACK
   One complete flyer at a time, pause, slide, pause.
   The flyer stays fully inside the Home hero.
   ============================================================ */

body.home-page,
body.home {
    overflow-x: hidden !important;
}

body.home-page .hero,
body.home .hero {
    position: relative !important;
    overflow: hidden !important;
    min-height: calc(100vh - 76px) !important;
    height: calc(100vh - 76px) !important;
}

body.home-page .hero-flyer-background,
body.home .hero-flyer-background {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    overflow: hidden !important;
    background: #071827 !important;
}

body.home-page .hero-flyer-track,
body.home .hero-flyer-track {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    animation: homeFlyerSlide 28s infinite !important;
    will-change: transform !important;
}

body.home-page .hero-flyer-slide,
body.home .hero-flyer-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #071827 !important;
}

body.home-page .hero-flyer-slide img,
body.home .hero-flyer-slide img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

body.home-page .hero-flyer-overlay,
body.home .hero-flyer-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: rgba(0, 0, 0, 0.18) !important;
}

/* Keep any existing hero foreground elements above the flyers. */
body.home-page .hero > .container,
body.home-page .hero .hero-content,
body.home-page .hero .scroll-indicator,
body.home-page .hero .scroll-to-explore,
body.home .hero > .container,
body.home .hero .hero-content,
body.home .hero .scroll-indicator,
body.home .hero .scroll-to-explore {
    position: relative !important;
    z-index: 3 !important;
}

/* 5 flyers: each stays visible for a few seconds, then slides. */
@keyframes homeFlyerSlide {
    0%, 16% { transform: translateX(0); }
    20%, 36% { transform: translateX(-100%); }
    40%, 56% { transform: translateX(-200%); }
    60%, 76% { transform: translateX(-300%); }
    80%, 96% { transform: translateX(-400%); }
    100% { transform: translateX(0); }
}

@media (max-width: 767px) {
    body.home-page .hero,
    body.home .hero {
        min-height: calc(100vh - 64px) !important;
        height: calc(100vh - 64px) !important;
    }

    body.home-page .hero-flyer-slide img,
    body.home .hero-flyer-slide img {
        object-fit: contain !important;
    }
}


/* ============================================================
   FINAL CAROUSEL VISIBILITY OVERRIDE
   The Home carousel uses real HTML slides so it is visible even
   before JavaScript finishes loading. JavaScript then changes
   the active slide every 6.5 seconds.
   ============================================================ */
.home-page .home-flyer-hero .home-flyer-background,
.home-page .home-flyer-hero .flyer-carousel,
.home-page .home-flyer-hero #flyerCarousel {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.home-page .home-flyer-hero #flyerCarousel .flyer-slide {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: translate3d(100%,0,0) !important;
    transition: transform 1.15s cubic-bezier(.65,0,.35,1) !important;
    background: #0f1a2b !important;
    z-index: 1 !important;
}

.home-page .home-flyer-hero #flyerCarousel .flyer-slide.active {
    transform: translate3d(0,0,0) !important;
    z-index: 2 !important;
}

.home-page .home-flyer-hero #flyerCarousel .flyer-slide.previous {
    transform: translate3d(-100%,0,0) !important;
    z-index: 2 !important;
}

.home-page .home-flyer-hero #flyerCarousel .flyer-slide img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
}