.hero-stats-main .stat-card .stat-icon-wrapper.icon-total {
    background: #e8f1ff;
    color: #1d4ed8
}

.hero-stats-main .stat-card .stat-icon-wrapper.icon-companies {
    background: #eaf8ff;
    color: #0ea5e9
}

.hero-stats-main .stat-card .stat-icon-wrapper.icon-countries {
    background: #f2efff;
    color: #4338ca
}

.job-details-modern .job-hero-header.has-warning {
    margin-bottom: 0
}

.job-details-modern .hero-warning-overlay {
    position: static;
    padding: 0;
    margin: 0
}

.job-details-modern .hero-warning-glass {
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 0;
    border-top: 1px solid #FDE68A;
    border-bottom: 1px solid #FDE68A;
    background: rgb(255 251 235 / .98);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .6)
}

.job-details-modern .hero-warning-glass i {
    color: #D97706;
    font-size: 18px
}

.job-details-modern .hero-warning-glass .warning-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center
}

.job-details-modern .hero-warning-glass .warning-text strong {
    color: #7C2D12;
    font-weight: 700;
    font-size: 14px
}

.job-details-modern .hero-warning-glass .warning-text span {
    color: #9A3412;
    font-size: 12px
}

@media (max-width: 768px) {
    .job-details-modern .hero-warning-overlay {
        padding: 0
    }

    .job-details-modern .hero-warning-glass {
        padding: 12px 14px;
        gap: 10px
    }

    .job-details-modern .hero-warning-glass i {
        font-size: 16px
    }

    .job-details-modern .hero-warning-glass .warning-text strong {
        font-size: 13px
    }

    .job-details-modern .hero-warning-glass .warning-text span {
        font-size: 12px
    }
}

.modern-navbar {
    background: #fff;
    border-bottom: 1px solid #E0E9FF;
    padding: 0;
    position: relative;
    z-index: 1000
}

.navbar-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 16px 0
}

.navbar-logo {
    flex-shrink: 0
}

.logo-link {
    display: flex;
    align-items: center;
    transition: opacity 0.3s ease
}

.logo-link:hover {
    opacity: .8
}

.logo-link img {
    height: auto;
    max-height: 35px
}

.navbar-menu {
    flex: 1;
    display: flex;
    justify-content: center
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0
}

.nav-item {
    position: relative
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    color: #4F5E64;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
    position: relative
}

.nav-link i {
    font-size: 16px;
    transition: all 0.3s ease
}

.nav-link:hover {
    background: #F8FAFF;
    color: #3C65F5
}

.nav-link:hover i {
    transform: scale(1.1)
}

.nav-link.active {
    background: linear-gradient(135deg, #EFF4FF 0%, #E0E9FF 100%);
    color: #3C65F5;
    font-weight: 600
}

.nav-link.active i {
    color: #3C65F5
}

.navbar-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0
}

.btn-navbar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
    cursor: pointer;
    border: 2px solid #fff0;
    white-space: nowrap
}

.btn-navbar i {
    font-size: 12px;
    transition: transform 0.3s ease
}

.btn-navbar:hover i {
    transform: scale(1.15)
}

.btn-post {
    background: linear-gradient(135deg, #3C65F5 0%, #2563EB 100%);
    color: #fff;
    box-shadow: 0 2px 12px rgb(60 101 245 / .25)
}

.btn-post:hover {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgb(60 101 245 / .35)
}

.btn-post:hover span {
    color: white !important
}

.btn-login {
    background: #fff;
    color: #3C65F5;
    border-color: #E0E9FF
}

.btn-login:hover {
    background: #F8FAFF;
    border-color: #3C65F5;
    color: #3C65F5;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgb(60 101 245 / .12)
}

.btn-user {
    background: #fff;
    color: #4F5E64;
    border-color: #E0E9FF
}

.btn-user:hover {
    background: #F8FAFF;
    border-color: #3C65F5;
    color: #3C65F5;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgb(60 101 245 / .12)
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s ease
}

.burger-line {
    width: 24px;
    height: 2.5px;
    background: #3C65F5;
    border-radius: 2px;
    transition: all 0.3s ease
}

.mobile-menu-toggle:hover .burger-line {
    background: #2563EB
}

.mobile-menu-toggle.active .burger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px)
}

.mobile-menu-toggle.active .burger-line:nth-child(2) {
    opacity: 0
}

.mobile-menu-toggle.active .burger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px)
}

.mobile-menu-modern {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease
}

.mobile-menu-modern.active {
    visibility: visible;
    opacity: 1
}

.mobile-menu-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0 0 0 / .5);
    backdrop-filter: blur(4px)
}

.mobile-menu-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 85%;
    height: 100%;
    background: #fff;
    box-shadow: -4px 0 30px rgb(0 0 0 / .15);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto
}

.mobile-menu-modern.active .mobile-menu-content {
    transform: translateX(0)
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 2px solid #E0E9FF
}

.mobile-menu-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F8FAFF;
    border: 2px solid #E0E9FF;
    border-radius: 50%;
    color: #4F5E64;
    cursor: pointer;
    transition: all 0.3s ease
}

.mobile-menu-close:hover {
    background: #3C65F5;
    border-color: #3C65F5;
    color: #fff;
    transform: rotate(90deg)
}

.mobile-menu-close i {
    font-size: 18px
}

.mobile-nav {
    padding: 16px
}

.mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: #fff;
    border: 2px solid #E0E9FF;
    border-radius: 12px;
    color: #4F5E64;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease
}

.mobile-nav-link i:first-child {
    font-size: 18px;
    width: 24px;
    color: #66789C;
    transition: all 0.3s ease
}

.mobile-nav-link span {
    flex: 1
}

.mobile-nav-link .arrow {
    font-size: 14px;
    color: #B4C0E0;
    transition: all 0.3s ease
}

.mobile-nav-link:hover, .mobile-nav-link.active {
    background: linear-gradient(135deg, #F8FAFF 0%, #EFF4FF 100%);
    border-color: #3C65F5;
    color: #3C65F5;
    transform: translateX(4px)
}

.mobile-nav-link:hover i, .mobile-nav-link.active i {
    color: #3C65F5
}

.mobile-nav-link:hover .arrow, .mobile-nav-link.active .arrow {
    transform: translateX(4px);
    color: #3C65F5
}

.mobile-menu-actions {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.mobile-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid #fff0;
    width: 100%
}

.mobile-action-btn i {
    font-size: 16px
}

.mobile-action-btn.primary {
    background: linear-gradient(135deg, #3C65F5 0%, #2563EB 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgb(60 101 245 / .25)
}

.mobile-action-btn.primary:hover {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgb(60 101 245 / .35)
}

.mobile-action-btn.secondary {
    background: #fff;
    color: #4F5E64;
    border-color: #E0E9FF
}

.mobile-action-btn.secondary:hover {
    background: #F8FAFF;
    border-color: #3C65F5;
    color: #3C65F5
}

.mobile-action-btn.danger {
    background: #fff;
    color: #EF4444;
    border-color: #FEE2E2
}

.mobile-action-btn.danger:hover {
    background: #FEF2F2;
    border-color: #EF4444;
    color: #DC2626
}

@media (max-width: 992px) {
    .navbar-wrapper {
        gap: 20px
    }

    .navbar-menu {
        display: none
    }

    .navbar-actions .btn-navbar span {
        display: none
    }

    .btn-navbar {
        padding: 6px 10px;
        min-width: 44px;
        justify-content: center;
        font-size: 12px
    }

    .mobile-menu-toggle {
        display: flex
    }
}

@media (max-width: 576px) {
    .navbar-wrapper {
        padding: 12px 0
    }

    .logo-link img {
        max-height: 30px;
        width: auto
    }

    .navbar-actions {
        gap: 8px
    }

    .btn-navbar {
        padding: 6px 10px;
        min-width: 40px;
        font-size: 11px
    }

    .btn-navbar i {
        font-size: 12px
    }

    .mobile-menu-content {
        width: 100%;
        max-width: 100%
    }
}

.job-search-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: visible;
    position: relative
}

.job-search-form {
    display: flex;
    flex-direction: column;
    gap: 0
}

.recent-searches-section {
    margin-top: 20px;
    padding: 16px 0;
    border-top: 1px solid rgb(226 232 240 / .8)
}

.recent-searches-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #64748B
}

.recent-searches-label i {
    font-size: 14px;
    color: #94A3B8
}

.recent-searches-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.recent-search-item-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease
}

.recent-search-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
    border: 1.5px solid rgb(226 232 240 / .8);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    transition: all 0.2s ease;
    white-space: nowrap;
    width: 100%
}

.recent-search-item i:first-child {
    font-size: 12px;
    color: #94A3B8;
    opacity: .7
}

.recent-search-item .recent-search-text {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis
}

.recent-search-item i:last-child {
    font-size: 10px;
    color: #94A3B8;
    opacity: .5;
    transition: all 0.2s ease
}

.recent-search-item-wrapper:hover .recent-search-item {
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border-color: rgb(59 130 246 / .3);
    color: #3B82F6;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgb(59 130 246 / .1)
}

.recent-search-item-wrapper:hover .recent-search-item i:first-child {
    color: #3B82F6;
    opacity: 1
}

.recent-search-item-wrapper:hover .recent-search-item i:last-child {
    color: #3B82F6;
    opacity: 1;
    transform: translateX(2px)
}

.recent-search-delete {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #94A3B8;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: 10px;
    cursor: pointer;
    opacity: 1;
    visibility: visible;
    transition: all 0.2s ease;
    z-index: 10;
    padding: 0;
    line-height: 1;
    box-shadow: 0 2px 6px rgb(148 163 184 / .3)
}

.recent-search-delete:hover {
    background: #EF4444;
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgb(239 68 68 / .3)
}

.recent-search-delete:active {
    transform: scale(.95)
}

.recent-search-delete:disabled {
    opacity: 1;
    cursor: not-allowed;
    background: #94A3B8
}

.recent-search-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 280px;
    max-width: 400px;
    background: #FFF;
    border: 1.5px solid rgb(59 130 246 / .2);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgb(0 0 0 / .12), 0 8px 32px rgb(59 130 246 / .08);
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 1000;
    margin-bottom: 4px
}

.recent-search-tooltip:hover {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(-4px) !important;
    pointer-events: auto !important;
    transition-delay: 0s !important
}

.recent-search-item-wrapper:not(:hover) .recent-search-tooltip {
    transition-delay: 0.2s
}

.recent-search-item-wrapper {
    position: relative
}

.recent-search-item-wrapper::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: -40px;
    right: -40px;
    height: 30px;
    background: #fff0;
    pointer-events: none;
    z-index: 999
}

.recent-search-item-wrapper:hover::after {
    pointer-events: auto
}

.recent-search-item-wrapper:hover .recent-search-tooltip {
    pointer-events: auto
}

.recent-search-tooltip::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid #fff0;
    border-right: 8px solid #fff0;
    border-top: 8px solid #FFF
}

.recent-search-tooltip::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid #fff0;
    border-right: 9px solid #fff0;
    border-top: 9px solid rgb(59 130 246 / .2)
}

.recent-search-item-wrapper:hover .recent-search-tooltip, .recent-search-tooltip:hover {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
    pointer-events: auto;
    transition-delay: 0s !important
}

.tooltip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    color: #fff;
    border-radius: 12px 12px 0 0;
    font-size: 13px;
    font-weight: 600
}

.tooltip-header i {
    font-size: 14px
}

.tooltip-content {
    padding: 12px 16px;
    max-height: 300px;
    overflow-y: auto
}

.tooltip-filter-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgb(226 232 240 / .6);
    font-size: 12px
}

.tooltip-filter-item:last-child {
    border-bottom: none
}

.tooltip-filter-item i {
    width: 16px;
    color: #64748B;
    font-size: 13px;
    flex-shrink: 0
}

.tooltip-filter-label {
    color: #64748B;
    font-weight: 500;
    min-width: 90px;
    flex-shrink: 0
}

.tooltip-filter-value {
    color: #1E293B;
    font-weight: 600;
    flex: 1;
    word-break: break-word
}

@media (max-width: 768px) {
    .recent-search-tooltip {
        min-width: 240px;
        max-width: 320px;
        font-size: 11px
    }

    .tooltip-header {
        padding: 10px 14px;
        font-size: 12px
    }

    .tooltip-content {
        padding: 10px 14px
    }

    .tooltip-filter-item {
        font-size: 11px;
        gap: 8px
    }

    .tooltip-filter-label {
        min-width: 75px
    }
}

@media (max-width: 768px) {
    .recent-searches-section {
        margin-top: 16px;
        padding: 12px 0
    }

    .recent-searches-label {
        font-size: 12px;
        margin-bottom: 10px
    }

    .recent-searches-list {
        gap: 6px;
        flex-wrap: wrap
    }

    .recent-search-item {
        padding: 6px 12px;
        font-size: 12px;
        gap: 6px;
        max-width: 100%
    }

    .recent-search-item .recent-search-text {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .recent-search-item-wrapper {
        max-width: 100%;
        flex: 0 0 auto
    }

    .recent-search-tooltip {
        max-width: 90vw;
        left: 50% !important;
        transform: translateX(-50%) translateY(-4px) !important
    }
}

.quick-filters-top {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 8px;
    margin-bottom: 16px
}

.search-main-bar {
    display: grid;
    grid-template-columns:1.9fr 1.4fr 1.4fr auto auto;
    gap: 0;
    background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgb(0 0 0 / .05), 0 10px 40px rgb(0 0 0 / .06);
    overflow: visible;
    border: 1.5px solid rgb(59 130 246 / .1);
    transition: all 0.3s ease;
    position: relative
}

.search-main-bar.filters-open {
    border-radius: 16px 16px 0 0;
    border-bottom-color: #fff0
}

.search-main-bar:hover {
    box-shadow: 0 1px 3px rgb(0 0 0 / .05), 0 20px 50px rgb(59 130 246 / .08);
    border-color: rgb(59 130 246 / .2)
}

.search-input-group, .search-category-group, .search-location-group {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 15px;
    transition: background 0.2s ease;
    border-right: 1.5px solid rgb(226 232 240 / .8);
    overflow: visible;
    cursor: text
}

.search-input-group {
    cursor: text
}

.search-input-group {
    border-radius: 16px 0 0 0
}

.search-location-group {
    border-radius: 0
}

.search-input-group:hover, .search-category-group:hover, .search-location-group:hover {
    background: rgb(59 130 246 / .02)
}

.search-icon {
    color: #64748B;
    font-size: 21px;
    margin-right: 14px;
    transition: all 0.3s ease;
    opacity: .7;
    pointer-events: none;
    flex-shrink: 0
}

.search-input-group:focus-within .search-icon, .search-location-group:focus-within .search-icon {
    color: #3B82F6;
    transform: scale(1.15);
    opacity: 1
}

.search-main-input, .search-main-select {
    flex: 1;
    border: none;
    outline: none;
    background: #fff0;
    font-size: 17px;
    color: #0F172A;
    font-weight: 600;
    height: 68px;
    letter-spacing: -.02em;
    cursor: text;
    pointer-events: auto;
    z-index: 1;
    position: relative
}

.search-main-input::placeholder {
    color: #94A3B8;
    font-weight: 500
}

.search-main-input:focus, .search-main-select:focus {
    color: #0F172A
}

.search-main-select {
    cursor: pointer;
    appearance: none;
    padding-right: 22px;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L8 8.5L15 1.5' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center
}

.search-category-group .search-main-select {
    height: 72px;
    font-size: 15px
}

.search-submit-btn {
    padding: 0;
    width: 70px;
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    color: #fff;
    border: none;
    border-right: 1.5px solid rgb(226 232 240 / .8);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center
}

.search-submit-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%)
}

.search-submit-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    background: #E0E6F6;
    pointer-events: none
}

.search-submit-btn:disabled:hover {
    background: #E0E6F6;
    transform: none
}

.search-submit-btn i {
    font-size: 22px;
    transition: transform 0.3s ease
}

.search-submit-btn:hover:not(:disabled) i {
    transform: scale(1.15)
}

.more-filters-toggle {
    padding: 0 24px;
    background: #fff0;
    color: #64748B;
    border: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap
}

.more-filters-toggle:hover {
    background: rgb(59 130 246 / .05);
    color: #3B82F6
}

.more-filters-toggle .toggle-icon {
    font-size: 12px;
    transition: transform 0.3s ease
}

.filter-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    background: #3B82F6;
    color: #fff;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 700;
    animation: badgePop 0.3s cubic-bezier(.68, -.55, .265, 1.55)
}

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

.more-filters-toggle.active {
    color: #3B82F6;
    background: rgb(59 130 246 / .08)
}

.more-filters-toggle.active .toggle-icon {
    transform: rotate(180deg)
}

.quick-filter-chip {
    display: inline-flex;
    cursor: pointer;
    position: relative
}

.quick-filter-chip input[type="checkbox"] {
    display: none
}

.quick-filter-chip .filter-chip-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: #FFF;
    border: 2px solid #fff0;
    border-radius: 50px;
    color: #475569;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(.4, 0, .2, 1);
    user-select: none;
    box-shadow: 0 1px 3px rgb(0 0 0 / .06), 0 4px 12px rgb(0 0 0 / .04);
    position: relative;
    overflow: hidden
}

.quick-filter-chip .filter-chip-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / .3), transparent);
    transition: left 0.6s ease
}

.quick-filter-chip .filter-chip-content i {
    font-size: 19px;
    transition: all 0.3s ease
}

.filter-text-short {
    display: none
}

.filter-text-full {
    display: inline
}

.quick-filter-chip:hover .filter-chip-content {
    border-color: rgb(59 130 246 / .3);
    color: #3B82F6;
    box-shadow: 0 4px 12px rgb(59 130 246 / .15), 0 8px 24px rgb(59 130 246 / .08)
}

.quick-filter-chip:hover .filter-chip-content::before {
    left: 100%
}

.quick-filter-chip input[type="checkbox"]:checked + .filter-chip-content {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    border-color: #3B82F6;
    color: #fff;
    box-shadow: 0 6px 20px rgb(59 130 246 / .35), 0 2px 8px rgb(59 130 246 / .2)
}

.quick-filter-chip input[type="checkbox"]:checked + .filter-chip-content i {
    animation: iconBounce 0.5s cubic-bezier(.68, -.55, .265, 1.55)
}

@keyframes iconBounce {
    0%, 100% {
        transform: scale(1) rotate(0deg)
    }
    30% {
        transform: scale(1.3) rotate(-5deg)
    }
    60% {
        transform: scale(.9) rotate(5deg)
    }
}

.benefit-group {
    transition: all 0.3s ease
}

#visaChip .filter-chip-content, #relocationChip .filter-chip-content {
    border: none !important
}

#visaChip:hover .filter-chip-content, #relocationChip:hover .filter-chip-content {
    border: none !important
}

#visaChip input[type="checkbox"]:checked + .filter-chip-content, #relocationChip input[type="checkbox"]:checked + .filter-chip-content {
    border: none !important
}

.filters-panel {
    background: #fff;
    border-radius: 0 0 16px 16px;
    padding: 20px;
    box-shadow: 0 1px 3px rgb(0 0 0 / .05), 0 8px 24px rgb(0 0 0 / .06);
    border: 1.5px solid rgb(59 130 246 / .1);
    border-top: none;
    margin-top: -1.5px;
    animation: slideDown 0.3s ease
}

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

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

.filter-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed rgb(226 232 240 / .8);
    min-height: 40px
}

.active-filters {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    flex: 1;
    row-gap: 5px
}

.filter-action-buttons {
    display: flex;
    align-items: center;
    gap: 10px
}

.active-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border: 1px solid #93C5FD;
    border-radius: 12px;
    color: #1E40AF;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.3s ease;
    animation: filterSlideIn 0.3s ease;
    white-space: nowrap;
    line-height: 1.3
}

.active-filter-tag:hover {
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
    border-color: #60A5FA;
    transform: translateY(-1px)
}

.active-filter-tag .filter-label {
    color: #60A5FA;
    font-weight: 500;
    font-size: 10px;
    line-height: 1.3
}

.active-filter-tag .filter-value {
    color: #1E40AF;
    font-size: 10px;
    line-height: 1.3;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis
}

.active-filter-tag .remove-filter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    background: #3B82F6;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 8px;
    transition: all 0.2s ease;
    margin-left: 1px;
    flex-shrink: 0
}

.active-filter-tag .remove-filter:hover {
    background: #1D4ED8;
    transform: scale(1.1)
}

@keyframes filterSlideIn {
    from {
        opacity: 0;
        transform: translateX(-10px) scale(.9)
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1)
    }
}

.filter-group {
    display: flex;
    flex-direction: column
}

.filter-select {
    padding: 14px 18px;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    background: #F8FAFC;
    color: #334155;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer
}

.filter-checkbox-label {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    background: #F8FAFC;
    cursor: pointer;
    transition: all 0.2s ease
}

.filter-checkbox-label:hover {
    background: #F1F5F9;
    border-color: #CBD5E1
}

.filter-checkbox-label input[type="checkbox"] {
    margin-right: 12px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3B82F6
}

.filter-checkbox-content {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #334155;
    font-size: 14px;
    font-weight: 500;
    flex: 1
}

.filter-checkbox-content i {
    color: #64748B;
    font-size: 16px
}

.filter-checkbox-label:has(input:checked) {
    background: #EFF6FF;
    border-color: #3B82F6
}

.filter-checkbox-label:has(input:checked) .filter-checkbox-content {
    color: #1E40AF
}

.filter-checkbox-label:has(input:checked) .filter-checkbox-content i {
    color: #3B82F6
}

.filter-select:hover {
    border-color: #CBD5E1;
    background: #FFF
}

.filter-select:focus {
    border-color: #3B82F6;
    background: #FFF;
    outline: none;
    box-shadow: 0 0 0 3px rgb(59 130 246 / .08)
}

.filter-clear-group {
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.filter-clear-btn {
    padding: 11px 20px;
    background: #FFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    color: #64748B;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 44px;
    white-space: nowrap
}

.filter-clear-btn span {
    font-size: 13px
}

.filter-clear-btn:hover {
    background: #FEF2F2;
    border-color: #FCA5A5;
    color: #DC2626
}

.filter-clear-btn:active {
    transform: scale(.98)
}

.filter-clear-btn i {
    font-size: 14px;
    transition: transform 0.2s ease
}

.filter-clear-btn:hover i {
    transform: rotate(90deg)
}

.filter-search-btn {
    padding: 11px 24px;
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    border: 1.5px solid #3B82F6;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    white-space: nowrap
}

.filter-search-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    border-color: #2563EB;
    box-shadow: 0 4px 12px rgb(59 130 246 / .3)
}

.filter-search-btn:active:not(:disabled) {
    transform: scale(.98)
}

.filter-search-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    background: #E0E6F6;
    border-color: #E0E6F6;
    color: #9CA3AF;
    pointer-events: none
}

.filter-search-btn:disabled:hover {
    background: #E0E6F6;
    border-color: #E0E6F6;
    box-shadow: none;
    transform: none
}

.filter-search-btn i {
    font-size: 14px
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(.9) translateY(-5px)
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
}

.location-multiselect-wrapper {
    position: relative;
    width: 100%;
    overflow: visible;
    z-index: 100
}

.location-multiselect-trigger {
    width: 100%;
    height: 68px;
    background: #fff0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 17px;
    color: #0F172A;
    font-weight: 600;
    padding-right: 10px;
    transition: all 0.2s ease
}

.location-multiselect-trigger:hover {
    color: #3B82F6
}

.location-placeholder {
    flex: 1;
    text-align: left;
    color: #94A3B8;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.location-placeholder.has-selection {
    color: #0F172A;
    font-weight: 600;
    font-size: 15px
}

.location-multiselect-trigger i.fa-chevron-down {
    font-size: 12px;
    color: #64748B;
    transition: transform 0.3s ease
}

.location-multiselect-trigger.active i.fa-chevron-down {
    transform: rotate(180deg)
}

.location-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgb(0 0 0 / .12);
    z-index: 9999;
    max-width: 400px;
    animation: dropdownSlide 0.2s ease;
    min-width: 300px
}

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

.location-search-box {
    padding: 12px;
    border-bottom: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    gap: 10px
}

.location-search-box i {
    color: #94A3B8;
    font-size: 14px
}

.location-search-box input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: #0F172A;
    background: #fff0
}

.location-search-box input::placeholder {
    color: #CBD5E1
}

.location-actions {
    padding: 10px 12px;
    display: flex;
    gap: 8px;
    border-bottom: 1px solid #E2E8F0
}

.location-action-btn {
    flex: 1;
    padding: 8px 12px;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px
}

.location-action-btn:hover {
    background: #3B82F6;
    color: #fff;
    border-color: #3B82F6
}

.location-action-btn i {
    font-size: 11px
}

.location-counter {
    padding: 8px 12px;
    border-bottom: 1px solid #E2E8F0;
    text-align: center
}

.counter-text {
    font-size: 13px;
    color: #64748B;
    font-weight: 600
}

.location-counter #selectedCount {
    color: #3B82F6;
    font-weight: 700;
    font-size: 14px
}

.location-counter.has-selection #selectedCount {
    color: #3B82F6
}

.location-counter.at-max {
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    border-bottom-color: #FCA5A5
}

.location-counter.at-max .counter-text {
    color: #DC2626
}

.location-counter.at-max #selectedCount {
    color: #DC2626;
    animation: pulse 0.5s ease-in-out
}

.counter-limit {
    font-size: 11px;
    color: #94A3B8;
    font-weight: 500;
    margin-left: 4px
}

.location-counter.at-max .counter-limit {
    color: #DC2626
}

.location-counter.all-selected {
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    border-bottom-color: #6EE7B7
}

.location-counter.all-selected .counter-text {
    color: #059669
}

.location-counter.all-selected #selectedCount {
    color: #059669
}

.location-counter.all-selected .counter-limit {
    color: #059669
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1)
    }
    50% {
        transform: scale(1.1)
    }
}

.location-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 8px
}

.location-list::-webkit-scrollbar {
    width: 6px
}

.location-list::-webkit-scrollbar-track {
    background: #F1F5F9;
    border-radius: 3px
}

.location-list::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 3px
}

.location-list::-webkit-scrollbar-thumb:hover {
    background: #94A3B8
}

.location-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    margin-bottom: 4px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none
}

.location-item:hover {
    background: #F1F5F9
}

.location-item:active {
    transform: scale(.98)
}

.location-item input[type="checkbox"] {
    display: none
}

.location-flag {
    font-size: 20px;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
    line-height: 1
}

.location-name {
    flex: 1;
    font-size: 14px;
    color: #334155;
    font-weight: 500;
    pointer-events: none
}

.location-check-icon {
    font-size: 14px;
    color: #3B82F6;
    opacity: 0;
    transition: all 0.2s ease;
    pointer-events: none;
    flex-shrink: 0
}

.location-item.selected .location-check-icon {
    opacity: 1
}

.location-item.selected .location-name {
    color: #3B82F6;
    font-weight: 600
}

.location-item.selected {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border: 1px solid #93C5FD
}

.location-item.disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none
}

.location-item.disabled .location-name {
    color: #94A3B8
}

.location-item.max-reached {
    animation: shake 0.3s ease-in-out;
    background: #FEE2E2;
    border: 1px solid #FCA5A5
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0)
    }
    25% {
        transform: translateX(-5px)
    }
    75% {
        transform: translateX(5px)
    }
}

.location-item.hidden {
    display: none
}

@media (max-width: 1024px) {
    .search-main-bar {
        grid-template-columns:1fr 1fr;
        gap: 0
    }

    .search-input-group {
        grid-column: 1 / -1;
        border-right: none;
        border-bottom: 1.5px solid rgb(226 232 240 / .8)
    }

    .search-category-group {
        border-right: 1.5px solid rgb(226 232 240 / .8);
        border-bottom: 1.5px solid rgb(226 232 240 / .8)
    }

    .search-location-group {
        border-right: 1.5px solid rgb(226 232 240 / .8);
        border-bottom: 1.5px solid rgb(226 232 240 / .8)
    }

    .search-submit-btn {
        border-bottom: 1.5px solid rgb(226 232 240 / .8);
        border-right: 1.5px solid rgb(226 232 240 / .8)
    }

    .more-filters-toggle {
        grid-column: 1 / -1;
        border-right: none;
        justify-content: center
    }
}

@media (max-width: 768px) {
    .search-main-bar {
        grid-template-columns:1fr;
        border-radius: 12px
    }

    .search-main-bar.filters-open {
        border-radius: 12px 12px 0 0
    }

    .search-input-group, .search-category-group, .search-location-group {
        padding: 0 20px;
        border-right: none
    }

    .search-category-group, .search-location-group {
        border-bottom: 1.5px solid rgb(226 232 240 / .8)
    }

    .search-submit-btn {
        height: 56px;
        width: 100%;
        border-radius: 0;
        border-right: none;
        border-bottom: 1.5px solid rgb(226 232 240 / .8)
    }

    .more-filters-toggle {
        padding: 16px 20px;
        height: 56px
    }

    .search-main-input, .search-main-select {
        height: 56px;
        font-size: 15px
    }

    .quick-filters-top {
        gap: 8px;
        padding: 6px;
        margin-bottom: 12px;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center
    }

    .benefit-group {
        padding: 8px 14px;
        gap: 10px
    }

    .benefit-group::before {
        height: 24px;
        width: 1.5px
    }

    .quick-filter-chip .filter-chip-content {
        padding: 10px 16px;
        font-size: 13px;
        gap: 7px;
        flex: 1 1 0%;
        min-width: 0
    }

    .quick-filter-chip .filter-chip-content i {
        font-size: 15px;
        flex-shrink: 0
    }

    .filter-text-full {
        display: none
    }

    .filter-text-short {
        display: inline
    }

    .filters-grid {
        grid-template-columns:1fr;
        gap: 12px
    }

    .filter-select {
        height: 52px;
        font-size: 15px;
        padding: 14px 18px
    }

    .filter-actions-row {
        flex-direction: column;
        gap: 12px;
        align-items: stretch
    }

    .active-filters {
        width: 100%;
        justify-content: center
    }

    .filter-action-buttons {
        width: 100%;
        flex-direction: row;
        gap: 8px
    }

    .filter-clear-btn, .filter-search-btn {
        flex: 1;
        padding: 12px 16px;
        height: 46px
    }

    .location-dropdown {
        max-width: 100%;
        left: -20px;
        right: -20px
    }

    .location-multiselect-trigger {
        height: 56px;
        font-size: 15px
    }
}

@media (max-width: 480px) {
    .job-search-wrapper {
        padding: 0 10px
    }

    .quick-filters-top {
        padding: 4px;
        margin-bottom: 10px;
        gap: 6px;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center
    }

    .benefit-group {
        width: 100%;
        justify-content: center;
        padding: 6px 12px;
        gap: 8px
    }

    .benefit-group::before {
        height: 20px;
        width: 1.5px
    }

    .quick-filter-chip .filter-chip-content {
        padding: 8px 12px;
        font-size: 12px;
        gap: 6px;
        border-radius: 40px;
        flex: 1 1 0%;
        min-width: 0
    }

    .quick-filter-chip .filter-chip-content i {
        font-size: 14px;
        flex-shrink: 0
    }

    .search-main-bar {
        border-radius: 10px
    }

    .search-main-bar.filters-open {
        border-radius: 10px 10px 0 0
    }

    .search-input-group, .search-location-group {
        padding: 0 16px
    }

    .search-main-input, .search-main-select {
        height: 52px;
        font-size: 14px
    }

    .search-icon {
        font-size: 18px;
        margin-right: 10px
    }

    .search-submit-btn {
        height: 52px;
        font-size: 18px
    }

    .more-filters-toggle {
        height: 52px;
        padding: 14px 16px;
        font-size: 14px;
        gap: 6px
    }

    .more-filters-toggle span {
        display: none
    }

    .filters-panel {
        padding: 16px;
        border-radius: 0 0 10px 10px
    }

    .filter-select {
        height: 48px;
        font-size: 14px;
        padding: 12px 16px;
        border-radius: 8px
    }

    .filter-actions-row {
        padding-top: 12px;
        margin-top: 12px
    }

    .filter-action-buttons {
        width: 100%
    }

    .recent-searches-section {
        margin-top: 14px;
        padding: 10px 0
    }

    .recent-searches-label {
        font-size: 11px;
        margin-bottom: 8px
    }

    .recent-searches-list {
        gap: 5px;
        flex-wrap: wrap
    }

    .recent-search-item {
        padding: 5px 10px;
        font-size: 11px;
        gap: 5px;
        max-width: 100%
    }

    .recent-search-item .recent-search-text {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .recent-search-item-wrapper {
        max-width: 100%;
        flex: 0 0 auto
    }

    .recent-search-delete {
        width: 18px;
        height: 18px;
        font-size: 9px;
        top: -5px;
        right: -5px
    }

    .recent-search-tooltip {
        max-width: 95vw;
        left: 50% !important;
        transform: translateX(-50%) translateY(-4px) !important;
        font-size: 11px
    }

    .tooltip-header {
        padding: 10px 12px;
        font-size: 11px
    }

    .tooltip-content {
        padding: 10px 12px
    }

    .tooltip-filter-item {
        font-size: 10px;
        gap: 6px
    }

    .filter-clear-btn, .filter-search-btn {
        flex: 1;
        padding: 11px 14px;
        font-size: 13px;
        height: 44px
    }

    .active-filter-tag {
        padding: 2px 7px;
        font-size: 10px;
        gap: 3px
    }

    .active-filter-tag .filter-label, .active-filter-tag .filter-value {
        font-size: 9px
    }

    .active-filter-tag .remove-filter {
        width: 13px;
        height: 13px;
        font-size: 7px
    }

    .active-filters {
        gap: 4px;
        row-gap: 4px
    }

    .location-dropdown {
        left: -16px;
        right: -16px
    }

    .location-multiselect-trigger {
        height: 52px;
        font-size: 14px
    }
}

.articles-section {
    padding: 5px 0;
    position: relative;
    overflow: hidden
}

.articles-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 400px;
    pointer-events: none
}

.articles-header {
    text-align: center;
    margin-bottom: 70px;
    position: relative;
    z-index: 1
}

.articles-header-content {
    max-width: 700px;
    margin: 0 auto
}

.articles-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 50px;
    margin-bottom: 20px;
    box-shadow: 0 4px 16px rgb(59 130 246 / .25)
}

.articles-title {
    font-size: 48px;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 20px;
    line-height: 1.2;
    letter-spacing: -.02em
}

.articles-description {
    font-size: 19px;
    color: #64748B;
    line-height: 1.7;
    margin: 0;
    font-weight: 400
}

.articles-grid {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 28px;
    position: relative;
    z-index: 1
}

.article-card-modern {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgb(0 0 0 / .04), 0 8px 32px rgb(0 0 0 / .06);
    border: 2px solid #fff0;
    transition: all 0.4s cubic-bezier(.4, 0, .2, 1);
    height: 100%
}

.article-card-modern:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 24px rgb(59 130 246 / .12), 0 20px 60px rgb(0 0 0 / .1);
    border-color: rgb(59 130 246 / .3)
}

.article-card-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 65%;
    overflow: hidden;
    background: linear-gradient(135deg, #1E293B 0%, #475569 100%)
}

.article-card-image-modern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.6s cubic-bezier(.4, 0, .2, 1)
}

.article-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #fff0 0%, rgb(0 0 0 / .4) 100%);
    opacity: .5;
    transition: all 0.4s ease
}

.article-card-modern:hover .article-card-image-modern {
    transform: scale(1.12)
}

.article-card-modern:hover .article-image-overlay {
    opacity: .2
}

.article-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.article-meta-modern {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #64748B
}

.meta-date, .meta-reading {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600
}

.meta-date i, .meta-reading i {
    color: #3B82F6;
    font-size: 12px
}

.meta-divider {
    color: #CBD5E1;
    font-weight: 700
}

.article-card-title-modern {
    font-size: 19px;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 12px;
    line-height: 1.4;
    letter-spacing: -.02em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.article-card-title-modern a {
    color: #0F172A;
    text-decoration: none;
    transition: all 0.3s ease
}

.article-card-title-modern a:hover {
    color: #3B82F6
}

.article-card-excerpt-modern {
    font-size: 15px;
    color: #64748B;
    line-height: 1.7;
    margin-bottom: 18px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.article-read-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #3B82F6;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    width: fit-content;
    margin-top: auto
}

.article-read-link:hover {
    color: #2563EB;
    gap: 12px
}

.article-read-link i {
    font-size: 14px;
    transition: transform 0.3s ease
}

.article-read-link:hover i {
    transform: translateX(5px)
}

.articles-empty {
    text-align: center;
    padding: 80px 20px;
    color: #94A3B8
}

.articles-empty i {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: .3
}

.articles-empty p {
    font-size: 18px;
    font-weight: 500;
    margin: 0
}

@media (max-width: 1200px) {
    .articles-grid {
        grid-template-columns:repeat(2, 1fr);
        gap: 24px
    }
}

@media (max-width: 992px) {
    .articles-section {
        padding: 80px 0
    }

    .articles-title {
        font-size: 40px
    }

    .articles-grid {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media (max-width: 768px) {
    .articles-section {
        padding: 60px 0
    }

    .articles-header {
        margin-bottom: 50px
    }

    .articles-title {
        font-size: 36px
    }

    .articles-description {
        font-size: 17px
    }

    .articles-grid {
        grid-template-columns:1fr;
        gap: 20px
    }

    .article-card-body {
        padding: 20px
    }

    .article-card-title-modern {
        font-size: 18px
    }

    .article-card-excerpt-modern {
        font-size: 14px;
        -webkit-line-clamp: 2
    }
}

@media (max-width: 480px) {
    .articles-section {
        padding: 40px 0
    }

    .articles-title {
        font-size: 28px
    }

    .article-card-body {
        padding: 16px
    }

    .article-card-title-modern {
        font-size: 17px
    }
}

.sticky-social-links {
    position: fixed;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0;
    z-index: 999;
    background: #fff;
    padding: 14px 10px;
    border-radius: 50px;
    box-shadow: 0 8px 30px rgb(60 101 245 / .15);
    border: 2px solid #E0E9FF;
    transition: all 0.3s ease;
    overflow: visible;
    width: auto;
    min-width: 64px
}

.sticky-social-links:hover {
    box-shadow: 0 12px 40px rgb(60 101 245 / .25);
    border-color: #C7D7FE
}

.social-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    min-width: 0
}

.social-links-label, .contact-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 10px;
    font-weight: 700;
    color: #66789C !important;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding-bottom: 8px;
    margin-bottom: 8px;
    text-align: center;
    pointer-events: none
}

.sticky-divider {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #E0E9FF 50%, transparent 100%);
    margin: 10px 0
}

.contact-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    min-width: 0
}

.sticky-social-item {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F8FAFF;
    border-radius: 50%;
    color: #4F5E64;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
    position: relative
}

.sticky-social-item i {
    font-size: 16px;
    transition: transform 0.3s ease
}

.sticky-social-item:hover i {
    transform: scale(1.2)
}

.sticky-social-item.telegram {
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%)
}

.sticky-social-item.telegram:hover {
    background: linear-gradient(135deg, #0088cc 0%, #006699 100%);
    color: white !important;
    transform: translateX(5px);
    box-shadow: 0 8px 25px rgb(0 136 204 / .4)
}

.sticky-social-item.telegram:hover i {
    color: white !important
}

.sticky-social-item.twitter {
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%)
}

.sticky-social-item.twitter:hover {
    background: linear-gradient(135deg, #1da1f2 0%, #0d8bd9 100%);
    color: white !important;
    transform: translateX(5px);
    box-shadow: 0 8px 25px rgb(29 161 242 / .4)
}

.sticky-social-item.twitter:hover i {
    color: white !important
}

.sticky-social-item.linkedin {
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%)
}

.sticky-social-item.linkedin:hover {
    background: linear-gradient(135deg, #0077b5 0%, #005885 100%);
    color: white !important;
    transform: translateX(5px);
    box-shadow: 0 8px 25px rgb(0 119 181 / .4)
}

.sticky-social-item.linkedin:hover i {
    color: white !important
}

.sticky-contact-item {
    width: auto;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #3C65F5 0%, #2563EB 100%);
    border-radius: 22px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
    position: relative;
    box-shadow: 0 4px 20px rgb(60 101 245 / .3);
    overflow: hidden
}

.contact-item-label {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    max-width: 0;
    transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
    position: absolute;
    left: 100%;
    margin-left: 8px;
    padding: 0 12px;
    border-radius: 12px;
    line-height: 44px;
    height: 44px;
    pointer-events: none;
    z-index: 10
}

.sticky-contact-item.telegram-contact:hover .contact-item-label {
    opacity: 1;
    max-width: 200px;
    background: linear-gradient(135deg, #0066aa 0%, #005588 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgb(0 136 204 / .4)
}

.sticky-contact-item.email-contact:hover .contact-item-label {
    opacity: 1;
    max-width: 200px;
    background: linear-gradient(135deg, #C5221F 0%, #A01C19 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgb(234 67 53 / .4)
}

.sticky-contact-item::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #3C65F5, #6366F1, #3C65F5);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    animation: rotateBorder 3s linear infinite
}

@keyframes rotateBorder {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

.sticky-contact-item:hover::before {
    opacity: .6
}

.sticky-contact-item i {
    font-size: 18px;
    transition: transform 0.3s ease;
    animation: pulse 2s ease-in-out infinite
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1)
    }
    50% {
        transform: scale(1.1)
    }
}

.sticky-contact-item.telegram-contact {
    background: linear-gradient(135deg, #0088cc 0%, #0066aa 100%) !important;
    box-shadow: 0 4px 20px rgb(0 136 204 / .4) !important;
    border-radius: 22px !important
}

.sticky-contact-item.telegram-contact::before {
    background: linear-gradient(135deg, #0088cc, #00a8e8, #0088cc) !important
}

.sticky-contact-item.telegram-contact:hover {
    background: linear-gradient(135deg, #0066aa 0%, #005588 100%) !important;
    transform: translateX(8px);
    box-shadow: 0 8px 30px rgb(0 136 204 / .6) !important;
    color: #fff;
    border-radius: 22px !important
}

.sticky-contact-item.telegram-contact:hover i {
    transform: scale(1.2) rotate(15deg);
    animation: none;
    color: #FFFFFF !important;
    text-shadow: 0 2px 4px rgb(0 0 0 / .2)
}

.sticky-contact-item.email-contact {
    background: linear-gradient(135deg, #EA4335 0%, #C5221F 100%) !important;
    box-shadow: 0 4px 20px rgb(234 67 53 / .4) !important;
    border-radius: 22px !important
}

.sticky-contact-item.email-contact::before {
    background: linear-gradient(135deg, #EA4335, #FF6B5A, #EA4335) !important
}

.sticky-contact-item.email-contact:hover {
    background: linear-gradient(135deg, #C5221F 0%, #A01C19 100%) !important;
    transform: translateX(8px);
    box-shadow: 0 8px 30px rgb(234 67 53 / .6) !important;
    color: #fff;
    border-radius: 22px !important
}

.sticky-contact-item.email-contact:hover i {
    transform: scale(1.2) rotate(15deg);
    animation: none;
    color: #FFFFFF !important;
    text-shadow: 0 2px 4px rgb(0 0 0 / .2)
}

@media (max-width: 992px) {
    .sticky-social-links {
        left: 10px;
        padding: 14px 10px
    }

    .social-section {
        gap: 10px
    }

    .sticky-social-item {
        width: 40px;
        height: 40px
    }

    .sticky-social-item i {
        font-size: 16px
    }

    .sticky-contact-item {
        min-width: 40px;
        width: auto;
        height: 40px;
        padding: 0 10px
    }

    .sticky-contact-item i {
        font-size: 16px
    }

    .contact-item-label {
        font-size: 11px;
        line-height: 40px;
        height: 40px
    }

    .sticky-contact-item.telegram-contact:hover .contact-item-label, .sticky-contact-item.email-contact:hover .contact-item-label {
        padding: 0 10px
    }
}

@media (max-width: 768px) {
    .sticky-social-links {
        left: 8px;
        padding: 12px 8px
    }

    .social-section {
        gap: 8px
    }

    .social-links-label, .contact-label {
        font-size: 9px;
        margin-bottom: 6px
    }

    .sticky-divider {
        margin: 10px 0
    }

    .sticky-social-item {
        width: 38px;
        height: 38px
    }

    .sticky-social-item i {
        font-size: 15px
    }

    .sticky-contact-item {
        min-width: 36px;
        width: auto;
        height: 36px;
        padding: 0 8px
    }

    .sticky-contact-item i {
        font-size: 14px
    }

    .contact-item-label {
        font-size: 10px;
        line-height: 36px;
        height: 36px
    }

    .sticky-contact-item.telegram-contact:hover .contact-item-label, .sticky-contact-item.email-contact:hover .contact-item-label {
        padding: 0 8px
    }
}

@media (max-width: 576px) {
    body {
        padding-bottom: 65px
    }

    .sticky-social-links {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        transform: none;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 8px 4px;
        border-radius: 0;
        border: none;
        border-top: 2px solid #E0E9FF;
        z-index: 9999;
        background: rgb(255 255 255 / .98);
        backdrop-filter: blur(10px);
        gap: 4px;
        flex-wrap: nowrap
    }

    .social-section {
        flex-direction: row;
        gap: 4px;
        align-items: center;
        flex-shrink: 0
    }

    .contact-section {
        flex-direction: row;
        gap: 4px;
        align-items: center;
        flex-shrink: 0
    }

    .sticky-divider {
        width: 1px;
        height: 32px;
        background: #E0E9FF;
        margin: 0 2px;
        flex-shrink: 0
    }

    .social-links-label, .contact-label {
        writing-mode: horizontal-tb;
        transform: none;
        margin-bottom: 0;
        padding-bottom: 0;
        margin-right: 2px;
        font-size: 8px;
        letter-spacing: .3px;
        white-space: nowrap;
        flex-shrink: 0;
        color: #66789C;
        font-weight: 600;
        text-transform: uppercase;
        line-height: 1
    }

    .sticky-social-item {
        width: 36px;
        height: 36px;
        flex-shrink: 0
    }

    .sticky-social-item i {
        font-size: 14px
    }

    .sticky-social-item:hover, .sticky-social-item.telegram:hover, .sticky-social-item.twitter:hover, .sticky-social-item.linkedin:hover {
        transform: translateY(-3px) scale(1.05)
    }

    .sticky-contact-item {
        width: 36px;
        height: 36px;
        flex-shrink: 0
    }

    .sticky-contact-item i {
        font-size: 14px
    }

    .sticky-contact-item.telegram-contact:hover, .sticky-contact-item.email-contact:hover {
        transform: translateY(-3px) scale(1.05)
    }
}

.homepage .header.sticky-bar {
    background: transparent !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgb(224 233 255 / .3) !important;
    box-shadow: none !important
}

.homepage .sticky-bar.stick {
    background: rgb(255 255 255 / .98) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid #E0E6F7 !important;
    box-shadow: 0 2px 20px rgb(60 101 245 / .08) !important
}

.homepage-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 20px 0 60px;
    position: relative;
    overflow: hidden
}

@media (max-width: 768px) {
    .homepage-hero {
        min-height: auto;
        padding-top: 0 !important;
        padding-bottom: 30px
    }
}

.homepage-hero::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    height: 95%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .5;
    pointer-events: none;
    z-index: 0
}

.homepage-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 100% 100%;
    pointer-events: none;
    opacity: .4;
    z-index: 0
}

.hero-content-wrapper {
    position: relative;
    z-index: 2
}

@media (max-width: 768px) {
    .homepage-hero .container {
        padding-top: 0 !important
    }

    .homepage-hero .container .hero-content-wrapper {
        padding-top: 0 !important;
        margin-top: 0 !important
    }
}

.hero-content-wrapper::before {
    content: '';
    position: absolute;
    top: 8%;
    right: 5%;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #F59E0B 0%, #EA580C 100%);
    border-radius: 50%;
    opacity: .12;
    animation: heroFloat1 6s ease-in-out infinite;
    pointer-events: none
}

@keyframes heroFloat1 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg)
    }
    50% {
        transform: translate(-20px, -25px) rotate(180deg)
    }
}

.hero-content-wrapper::after {
    content: '';
    position: absolute;
    bottom: 10%;
    left: 3%;
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    opacity: .11;
    animation: heroFloat2 7s ease-in-out infinite;
    pointer-events: none
}

@keyframes heroFloat2 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg)
    }
    50% {
        transform: translate(15px, 20px) rotate(-180deg)
    }
}

.homepage-hero .hero-text-section::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -80px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    opacity: .13;
    animation: heroFloat3 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0
}

@keyframes heroFloat3 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg)
    }
    50% {
        transform: translate(25px, -15px) rotate(90deg)
    }
}

.homepage-hero .hero-text-section::after {
    display: none
}

.hero-stats-main::before {
    content: '';
    position: absolute;
    bottom: -40px;
    right: -60px;
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%);
    border-radius: 8px;
    opacity: .14;
    animation: heroFloat5 6.5s ease-in-out infinite;
    pointer-events: none;
    z-index: -1
}

@keyframes heroFloat5 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg)
    }
    50% {
        transform: translate(20px, -25px) rotate(45deg)
    }
}

.hero-stats-main::after {
    content: '';
    position: absolute;
    top: -30px;
    left: -50px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    opacity: .12;
    animation: heroFloat10 8.5s ease-in-out infinite;
    pointer-events: none;
    z-index: -1
}

@keyframes heroFloat10 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg)
    }
    50% {
        transform: translate(20px, 15px) rotate(90deg)
    }
}

.hero-text-section {
    text-align: center;
    margin-bottom: 50px;
    position: relative
}

@media (max-width: 768px) {
    .hero-text-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 30px
    }
}

.hero-badge::before {
    content: '';
    position: absolute;
    top: -60px;
    left: -70px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    opacity: .12;
    animation: heroFloat6 7s ease-in-out infinite;
    pointer-events: none
}

@keyframes heroFloat6 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg)
    }
    50% {
        transform: translate(15px, -20px) rotate(45deg)
    }
}

.hero-badge::after {
    content: '';
    position: absolute;
    top: -50px;
    right: -80px;
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    opacity: .1;
    animation: heroFloat7 8s ease-in-out infinite;
    pointer-events: none
}

@keyframes heroFloat7 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg) scale(1)
    }
    50% {
        transform: translate(-15px, -15px) rotate(180deg) scale(1.1)
    }
}

.homepage-hero-title::before {
    content: '';
    position: absolute;
    left: -90px;
    top: 50%;
    transform: translateY(-50%);
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    opacity: .09;
    animation: heroFloat8 9s ease-in-out infinite;
    pointer-events: none
}

@keyframes heroFloat8 {
    0%, 100% {
        transform: translateY(-50%) rotate(0deg)
    }
    50% {
        transform: translateY(-70%) rotate(36deg)
    }
}

.homepage-hero-subtitle::after {
    display: none
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #3C65F5 0%, #2563EB 100%);
    color: #fff;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgb(60 101 245 / .25)
}

.hero-badge i {
    font-size: 18px
}

.homepage-hero-title {
    font-size: 56px;
    font-weight: 900;
    color: #05264E;
    margin-bottom: 20px;
    line-height: 1.2;
    letter-spacing: -.03em;
    position: relative
}

.homepage-hero-title::after {
    display: none
}

.gradient-text {
    background: linear-gradient(135deg, #3C65F5 0%, #6366F1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0;
    background-clip: text
}

.homepage-hero-subtitle {
    font-size: 20px;
    color: #4F5E64;
    margin-bottom: 40px;
    line-height: 1.6;
    font-weight: 500;
    position: relative
}

.hero-badge {
    position: relative
}

.hero-stats-main {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 40px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    position: relative
}

.stat-card {
    background: #fff;
    border: 2px solid #E0E9FF;
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 4px 20px rgb(60 101 245 / .08);
    position: relative;
    overflow: hidden
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #3C65F5 0%, #2563EB 100%);
    transform: scaleY(0);
    transition: transform 0.3s ease
}

.stat-card:hover::before {
    transform: scaleY(1)
}

.stat-card:hover {
    background: #F8FAFF;
    border-color: #3C65F5;
    transform: translateY(-6px);
    box-shadow: 0 16px 50px rgb(60 101 245 / .18)
}

.stat-icon-wrapper {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #3C65F5 0%, #2563EB 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgb(60 101 245 / .3);
    transition: all 0.3s ease
}

.stat-card:hover .stat-icon-wrapper {
    transform: rotate(10deg) scale(1.1);
    box-shadow: 0 12px 32px rgb(60 101 245 / .4)
}

.stat-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1
}

.stat-number {
    font-size: 32px;
    font-weight: 900;
    color: #05264E;
    line-height: 1;
    letter-spacing: -.02em
}

.stat-label {
    font-size: 14px;
    color: #66789C;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px
}

.hero-feature-highlights::before {
    content: '';
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #84CC16 0%, #65A30D 100%);
    border-radius: 50%;
    opacity: .11;
    animation: heroFloat11 7.5s ease-in-out infinite;
    pointer-events: none;
    z-index: -1
}

@keyframes heroFloat11 {
    0%, 100% {
        transform: translateX(-50%) translateY(0) rotate(0deg)
    }
    50% {
        transform: translateX(-50%) translateY(-20px) rotate(180deg)
    }
}

.hero-feature-highlights::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -40px;
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #F43F5E 0%, #E11D48 100%);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    opacity: .13;
    animation: heroFloat12 9s ease-in-out infinite;
    pointer-events: none;
    z-index: -1
}

@keyframes heroFloat12 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg)
    }
    50% {
        transform: translate(-25px, 20px) rotate(60deg)
    }
}

.hero-feature-highlights {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 16px;
    margin-top: 36px;
    position: relative;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto
}

.feature-highlight {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(.4, 0, .2, 1);
    cursor: pointer;
    text-decoration: none;
    color: inherit
}

.feature-highlight:hover {
    text-decoration: none;
    color: inherit
}

.highlight-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 0
}

.visa-highlight {
    border: 2px solid rgb(245 158 11 / .2);
    box-shadow: 0 8px 30px rgb(245 158 11 / .08)
}

.visa-highlight .highlight-glow {
    background: radial-gradient(circle, rgb(245 158 11 / .15) 0%, transparent 70%)
}

.visa-highlight:hover {
    border-color: #F59E0B;
    box-shadow: 0 20px 60px rgb(245 158 11 / .25);
    transform: translateY(-8px)
}

.visa-highlight:hover .highlight-glow {
    opacity: 1
}

.visa-highlight .highlight-badge {
    background: linear-gradient(135deg, #F59E0B 0%, #EA580C 100%);
    box-shadow: 0 8px 30px rgb(245 158 11 / .4)
}

.visa-highlight:hover .highlight-badge {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 12px 40px rgb(245 158 11 / .5)
}

.visa-highlight .highlight-number {
    background: linear-gradient(135deg, #F59E0B 0%, #EA580C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0;
    background-clip: text
}

.relocation-highlight {
    border: 2px solid rgb(99 102 241 / .2);
    box-shadow: 0 8px 30px rgb(99 102 241 / .08)
}

.relocation-highlight .highlight-glow {
    background: radial-gradient(circle, rgb(99 102 241 / .15) 0%, transparent 70%)
}

.relocation-highlight:hover {
    border-color: #6366F1;
    box-shadow: 0 20px 60px rgb(99 102 241 / .25);
    transform: translateY(-8px)
}

.relocation-highlight:hover .highlight-glow {
    opacity: 1
}

.relocation-highlight .highlight-badge {
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    box-shadow: 0 8px 30px rgb(99 102 241 / .4)
}

.relocation-highlight:hover .highlight-badge {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 12px 40px rgb(99 102 241 / .5)
}

.relocation-highlight .highlight-number {
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0;
    background-clip: text
}

.remote-highlight {
    border: 2px solid rgb(34 197 94 / .2);
    box-shadow: 0 8px 30px rgb(34 197 94 / .08)
}

.remote-highlight .highlight-glow {
    background: radial-gradient(circle, rgb(34 197 94 / .15) 0%, transparent 70%)
}

.remote-highlight:hover {
    border-color: #22C55E;
    box-shadow: 0 20px 60px rgb(34 197 94 / .25);
    transform: translateY(-8px)
}

.remote-highlight:hover .highlight-glow {
    opacity: 1
}

.remote-highlight .highlight-badge {
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
    box-shadow: 0 8px 30px rgb(34 197 94 / .4)
}

.remote-highlight:hover .highlight-badge {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 12px 40px rgb(34 197 94 / .5)
}

.remote-highlight .highlight-number {
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0;
    background-clip: text
}

.highlight-badge {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    margin-bottom: 16px;
    transition: all 0.4s cubic-bezier(.4, 0, .2, 1);
    position: relative;
    z-index: 1
}

.highlight-content {
    position: relative;
    z-index: 1
}

.highlight-number {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 6px;
    letter-spacing: -.02em
}

.highlight-label {
    font-size: 11px;
    font-weight: 700;
    color: #66789C;
    text-transform: uppercase;
    letter-spacing: .8px
}

.search-section-standalone {
    padding: 60px 0 100px;
    margin-top: -40px;
    position: relative;
    z-index: 10
}

.search-section-standalone .container {
    max-width: 1200px
}

.search-section-header {
    text-align: center;
    margin-bottom: 40px;
    margin-top: 40px
}

.search-title {
    font-size: 32px;
    font-weight: 800;
    color: #05264E;
    margin-bottom: 12px;
    line-height: 1.3;
    letter-spacing: -.02em
}

.search-subtitle {
    font-size: 16px;
    color: #66789C;
    font-weight: 500;
    margin: 0
}

.latest-jobs-section {
    padding: 0 0 60px;
    background: #F8FAFF
}

.section-header-simple {
    text-align: center;
    margin-bottom: 48px;
    padding-top: 60px
}

.section-title-simple {
    font-size: 28px;
    font-weight: 700;
    color: #05264E;
    margin: 0;
    line-height: 1.3;
    letter-spacing: -.01em;
    position: relative;
    display: inline-block
}

.section-title-simple::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #3C65F5 0%, #6366F1 100%);
    border-radius: 2px
}

.section-header-modern {
    text-align: center;
    margin-bottom: 60px
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: linear-gradient(135deg, #3C65F5 0%, #2563EB 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 50px;
    margin-bottom: 20px;
    box-shadow: 0 4px 16px rgb(59 130 246 / .25)
}

.section-badge i {
    font-size: 15px
}

.section-title-modern {
    font-size: 42px;
    font-weight: 800;
    color: #05264E;
    margin-bottom: 16px;
    line-height: 1.2;
    letter-spacing: -.02em
}

.section-description-modern {
    font-size: 18px;
    color: #66789C;
    margin: 0;
    line-height: 1.6
}

.jobs-grid-homepage {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 50px
}

.load-more-section {
    text-align: center;
    padding-top: 20px
}

.btn-load-more {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 40px;
    background: linear-gradient(135deg, #3C65F5 0%, #05264E 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgb(60 101 245 / .3)
}

.btn-load-more:hover {
    background: linear-gradient(135deg, #05264E 0%, #3C65F5 100%);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgb(60 101 245 / .4)
}

.btn-load-more i {
    font-size: 15px;
    transition: transform 0.3s ease
}

.btn-load-more:hover i {
    transform: translateX(5px)
}

.articles-section-wrapper {
    padding: 70px 0;
    background: #fff0
}

.value-proposition-section {
    padding: 80px 0;
    background: linear-gradient(180deg, #F8FAFF 0%, #FFFFFF 50%, #F0F4FF 100%);
    position: relative;
    overflow: hidden
}

.value-proposition-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Cdefs%3E%3Cpattern id='grid' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%233C65F5' stroke-width='0.5' opacity='0.1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='1200' height='600' fill='url(%23grid)'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .6;
    pointer-events: none;
    z-index: 0
}

.value-proposition-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .3;
    pointer-events: none;
    z-index: 0
}

.value-prop-header::before {
    content: '🌍';
    position: absolute;
    top: -40px;
    right: 10%;
    font-size: 60px;
    opacity: .15;
    animation: floatCountry 6s ease-in-out infinite
}

.value-prop-header::after {
    content: '✈️';
    position: absolute;
    top: -30px;
    left: 5%;
    font-size: 50px;
    opacity: .2;
    animation: flyPlane 8s ease-in-out infinite
}

@keyframes floatCountry {
    0%, 100% {
        transform: translateY(0) rotate(0deg)
    }
    50% {
        transform: translateY(-20px) rotate(10deg)
    }
}

@keyframes flyPlane {
    0%, 100% {
        transform: translateX(0) translateY(0) rotate(-10deg)
    }
    50% {
        transform: translateX(20px) translateY(-15px) rotate(5deg)
    }
}

.value-prop-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    position: relative;
    z-index: 1
}

.value-prop-title {
    font-size: 40px;
    font-weight: 900;
    color: #05264E;
    margin-bottom: 16px;
    line-height: 1.2;
    letter-spacing: -.02em
}

.value-prop-subtitle {
    font-size: 18px;
    color: #66789C;
    line-height: 1.6;
    font-weight: 500
}

.value-prop-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 24px;
    position: relative;
    z-index: 1
}

.value-prop-grid::before {
    content: '';
    position: absolute;
    top: 25%;
    left: 10%;
    right: 10%;
    height: 2px;
    background: repeating-linear-gradient(to right, rgb(60 101 245 / .2) 0, rgb(60 101 245 / .2) 10px, transparent 10px, transparent 20px);
    pointer-events: none;
    z-index: 0
}

.value-prop-grid::after {
    content: '';
    position: absolute;
    top: 60%;
    left: 15%;
    right: 15%;
    height: 2px;
    background: repeating-linear-gradient(to right, rgb(99 102 241 / .15) 0, rgb(99 102 241 / .15) 10px, transparent 10px, transparent 20px);
    pointer-events: none;
    z-index: 0
}

.value-prop-card {
    background: #fff;
    border-radius: 24px;
    overflow: visible;
    transition: all 0.4s cubic-bezier(.4, 0, .2, 1);
    border: 2px solid #E0E9FF;
    position: relative
}

.value-prop-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #3C65F5 0%, #6366F1 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    border-radius: 24px 24px 0 0
}

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

.value-prop-card::after {
    content: '';
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    border: 3px dashed rgb(60 101 245 / .15);
    border-radius: 50%;
    pointer-events: none;
    transition: all 0.6s ease
}

.value-prop-card:hover::after {
    transform: rotate(90deg) scale(1.2);
    border-color: rgb(60 101 245 / .25)
}

.value-prop-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 70px rgb(60 101 245 / .2), 0 0 0 1px rgb(60 101 245 / .05);
    border-color: #3C65F5
}

.value-prop-card.featured {
    grid-column: span 2;
    grid-row: span 1;
    background: linear-gradient(135deg, #3C65F5 0%, #2563EB 100%), url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='dots' x='0' y='0' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='2' cy='2' r='1' fill='white' opacity='0.1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23dots)'/%3E%3C/svg%3E");
    border-color: #3C65F5;
    position: relative;
    overflow: hidden
}

.value-prop-card.featured::before {
    content: '✈️';
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 40px;
    opacity: .15;
    animation: planeRotate 10s linear infinite
}

@keyframes planeRotate {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

.value-prop-card.featured::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' opacity='0.1' d='M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0H8.1C38 81.5 101.7 24.7 180 4c-25.5 34.2-45.3 87.7-55.3 151.6zM8.1 320h122.7c10 63.9 29.8 117.4 55.3 151.6C107.7 451.2 44 394.5 14.1 320zM193.5 512c-11.3-10.8-23-27.9-33.5-51.5c-11.6-26-20.9-58.2-27-94.7H344.3c-6.1 36.4-15.5 68.6-27 94.7c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8zm140.3-39.6c25.5-34.2 45.3-87.7 55.3-151.6H503.9c-29.9 74.5-93.6 131.2-171.9 151.6z'/%3E%3C/svg%3E") no-repeat;
    background-size: contain;
    pointer-events: none;
    animation: rotateGlobe 20s linear infinite
}

@keyframes rotateGlobe {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

.value-prop-card.featured .card-title, .value-prop-card.featured .card-description {
    color: #fff
}

.value-prop-card.featured .icon-circle {
    background: rgb(255 255 255 / .25);
    border-color: rgb(255 255 255 / .4);
    box-shadow: 0 8px 32px rgb(0 0 0 / .15)
}

.value-prop-card.featured .icon-circle i {
    color: #fff
}

.card-inner {
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2
}

.value-prop-card .card-inner::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle at center, rgb(60 101 245 / .05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0
}

.value-prop-card .card-inner::after {
    content: '📍';
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 24px;
    opacity: .08;
    pointer-events: none;
    z-index: 0
}

.value-prop-card:nth-child(1) .card-inner::after {
    content: '🛂';
    font-size: 40px;
    opacity: .12
}

.value-prop-card:nth-child(2) .card-inner::after {
    content: '🏢'
}

.value-prop-card:nth-child(3) .card-inner::after {
    content: '💻'
}

.value-prop-card:nth-child(4) .card-inner::after {
    content: '🎯'
}

.value-prop-card:nth-child(5) .card-inner::after {
    content: '🌐'
}

.card-icon-wrapper {
    margin-bottom: 24px;
    position: relative;
    z-index: 1
}

.icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid;
    transition: all 0.4s ease;
    position: relative;
    box-shadow: 0 8px 24px rgb(0 0 0 / .08), inset 0 2px 8px rgb(255 255 255 / .3)
}

.value-prop-card:hover .icon-circle::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 20px;
    border: 2px solid currentColor;
    opacity: .3;
    animation: pulseRing 2s ease-out infinite
}

@keyframes pulseRing {
    0% {
        transform: scale(1);
        opacity: .3
    }
    100% {
        transform: scale(1.3);
        opacity: 0
    }
}

.value-prop-card:hover .icon-circle {
    transform: rotate(10deg) scale(1.15);
    box-shadow: 0 12px 36px rgb(0 0 0 / .15), inset 0 2px 12px rgb(255 255 255 / .4)
}

.icon-circle i {
    font-size: 28px;
    position: relative;
    z-index: 1
}

.visa-circle {
    background: rgb(245 158 11 / .1);
    border-color: rgb(245 158 11 / .3)
}

.visa-circle i {
    color: #F59E0B
}

.relocation-circle {
    background: rgb(99 102 241 / .1);
    border-color: rgb(99 102 241 / .3)
}

.relocation-circle i {
    color: #6366F1
}

.remote-circle {
    background: rgb(34 197 94 / .1);
    border-color: rgb(34 197 94 / .3)
}

.remote-circle i {
    color: #22C55E
}

.experience-circle {
    background: rgb(139 92 246 / .1);
    border-color: rgb(139 92 246 / .3)
}

.experience-circle i {
    color: #8B5CF6
}

.update-circle {
    background: rgb(236 72 153 / .1);
    border-color: rgb(236 72 153 / .3)
}

.update-circle i {
    color: #EC4899
}

.companies-circle {
    background: rgb(59 130 246 / .1);
    border-color: rgb(59 130 246 / .3)
}

.companies-circle i {
    color: #3B82F6
}

.card-title {
    font-size: 18px;
    font-weight: 700;
    color: #05264E;
    margin-bottom: 12px;
    line-height: 1.3
}

.card-title-large {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.3;
    letter-spacing: -.01em
}

.card-description {
    font-size: 14px;
    color: #66789C;
    line-height: 1.7;
    flex: 1
}

.card-description-large {
    font-size: 15px;
    color: rgb(255 255 255 / .95);
    line-height: 1.8;
    flex: 1
}

.card-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgb(255 255 255 / .25);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    border: 1px solid rgb(255 255 255 / .3);
    z-index: 10
}

.card-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 12px 24px;
    background: rgb(255 255 255 / .2);
    color: #fff;
    border: 2px solid rgb(255 255 255 / .4);
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px)
}

.card-link-btn:hover {
    background: rgb(255 255 255 / .3);
    color: #fff;
    border-color: rgb(255 255 255 / .6);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgb(0 0 0 / .2);
    text-decoration: none
}

.card-link-btn i {
    color: #fff;
    transition: transform 0.3s ease
}

.card-link-btn:hover i {
    transform: translateX(4px)
}

.value-prop-card:not(.featured) .card-link-btn {
    background: #F8FAFF;
    color: #3C65F5;
    border: 2px solid #E0E9FF
}

.value-prop-card:not(.featured) .card-link-btn:hover {
    background: #3C65F5;
    color: #fff;
    border-color: #3C65F5
}

.value-prop-card:not(.featured) .card-link-btn i {
    color: #3C65F5
}

.value-prop-card:not(.featured) .card-link-btn:hover i {
    color: #fff
}

.value-prop-grid .value-prop-card:nth-child(2)::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 30%;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    opacity: .12;
    animation: floatShape2 6s ease-in-out infinite;
    z-index: 1
}

@keyframes floatShape2 {
    0%, 100% {
        transform: translateY(0) rotate(0deg)
    }
    50% {
        transform: translateY(-10px) rotate(90deg)
    }
}

.value-prop-grid .value-prop-card:nth-child(3)::before {
    content: '';
    position: absolute;
    top: -12px;
    right: 25%;
    width: 35px;
    height: 35px;
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    opacity: .13;
    animation: floatShape3 5.5s ease-in-out infinite;
    z-index: 1
}

@keyframes floatShape3 {
    0%, 100% {
        transform: translateY(0) rotate(0deg)
    }
    50% {
        transform: translateY(-12px) rotate(-180deg)
    }
}

.value-prop-grid .value-prop-card:nth-child(4)::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 35%;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
    border-radius: 6px;
    opacity: .14;
    animation: floatShape4 6.5s ease-in-out infinite;
    z-index: 1
}

@keyframes floatShape4 {
    0%, 100% {
        transform: translateY(0) rotate(0deg)
    }
    50% {
        transform: translateY(-14px) rotate(45deg)
    }
}

.value-prop-grid .value-prop-card:nth-child(5)::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 28%;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    opacity: .13;
    animation: floatShape5 6.8s ease-in-out infinite;
    z-index: 1
}

@keyframes floatShape5 {
    0%, 100% {
        transform: translateY(0) rotate(0deg)
    }
    50% {
        transform: translateY(-18px) rotate(-45deg)
    }
}

.homepage-hub-links-section {
    padding: 80px 0;
    background: linear-gradient(135deg, rgb(248 250 252 / .5), rgb(255 255 255 / .8));
    position: relative
}

.homepage-hub-links-section .hub-links-header {
    text-align: center;
    margin-bottom: 48px
}

.homepage-hub-links-section .section-description-modern {
    max-width: 700px;
    margin: 0 auto
}

.homepage-hub-link-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 32px;
    border: 2px solid rgb(226 232 240 / .8);
    border-radius: 24px;
    background: rgb(255 255 255 / .95);
    text-decoration: none;
    color: #0f172a;
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
    overflow: hidden
}

.homepage-hub-link-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgb(59 130 246 / .03), rgb(99 102 241 / .03));
    opacity: 0;
    transition: opacity 0.3s ease
}

.homepage-hub-link-card:hover::before {
    opacity: 1
}

.homepage-hub-link-card:hover {
    border-color: #3b82f6;
    background: rgb(255 255 255);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -12px rgb(59 130 246 / .25);
    text-decoration: none;
    color: #0f172a
}

.homepage-hub-link-card .hub-link-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease
}

.homepage-hub-link-card:hover .hub-link-icon {
    transform: scale(1.1)
}

.homepage-hub-link-card .hub-link-icon.visa-icon {
    background: linear-gradient(135deg, rgb(245 158 11 / .15), rgb(234 88 12 / .1));
    color: #F59E0B
}

.homepage-hub-link-card .hub-link-icon.relocation-icon {
    background: linear-gradient(135deg, rgb(99 102 241 / .15), rgb(79 70 229 / .1));
    color: #6366F1
}

.homepage-hub-link-card .hub-link-icon.remote-icon {
    background: linear-gradient(135deg, rgb(34 197 94 / .15), rgb(22 163 74 / .1));
    color: #22C55E
}

.homepage-hub-link-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: #0f172a;
    position: relative;
    z-index: 1
}

.homepage-hub-link-card p {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 24px;
    flex-grow: 1;
    position: relative;
    z-index: 1
}

.homepage-hub-link-card p strong {
    color: #0f172a;
    font-weight: 600
}

.homepage-hub-link-card .hub-link-cta {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: #3b82f6;
    font-size: 1rem;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease
}

.homepage-hub-link-card:hover .hub-link-cta {
    color: #2563eb
}

.homepage-hub-link-card .hub-link-cta i {
    transition: transform 0.3s ease
}

.homepage-hub-link-card:hover .hub-link-cta i {
    transform: translateX(4px)
}

@media (max-width: 768px) {
    .homepage-hub-links-section {
        padding: 60px 0
    }

    .homepage-hub-link-card {
        padding: 32px 24px
    }

    .homepage-hub-link-card .hub-link-icon {
        width: 64px;
        height: 64px;
        font-size: 1.5rem
    }

    .homepage-hub-link-card h3 {
        font-size: 1.25rem
    }
}

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

.faq-wrapper {
    max-width: 900px;
    margin: 0 auto
}

.accordion-modern {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.accordion-item-modern {
    background: #fff;
    border: 2px solid #E0E6F7;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease
}

.accordion-item-modern:hover {
    border-color: #B4C0E0;
    box-shadow: 0 4px 20px rgb(10 42 105 / .08)
}

.accordion-header-modern {
    margin: 0
}

.accordion-button-modern {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    background: #fff;
    border: none;
    font-size: 17px;
    font-weight: 700;
    color: #05264E;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease
}

.accordion-button-modern:not(.collapsed) {
    background: linear-gradient(135deg, #F8FAFF 0%, #EFF2FB 100%);
    color: #3C65F5
}

.accordion-button-modern i:first-child {
    font-size: 20px;
    color: #3C65F5;
    flex-shrink: 0
}

.accordion-button-modern span {
    flex: 1
}

.accordion-button-modern .toggle-icon {
    font-size: 14px;
    color: #66789C;
    transition: transform 0.3s ease;
    flex-shrink: 0
}

.accordion-button-modern:not(.collapsed) .toggle-icon {
    transform: rotate(180deg);
    color: #3C65F5
}

.accordion-body-modern {
    padding: 0 24px 24px 58px;
    font-size: 15px;
    line-height: 1.8;
    color: #4F5E64
}

.accordion-body-modern strong {
    color: #05264E;
    font-weight: 700
}

@media (max-width: 1200px) {
    .jobs-grid-homepage {
        grid-template-columns:repeat(2, 1fr);
        gap: 20px
    }

    .value-prop-grid {
        grid-template-columns:repeat(2, 1fr);
        gap: 20px
    }

    .value-prop-card.featured {
        grid-column: span 2;
        grid-row: span 1
    }

    .card-title-large {
        font-size: 22px
    }

    .card-description-large {
        font-size: 14px
    }

    .hero-stats-main {
        grid-template-columns:repeat(3, 1fr);
        gap: 16px
    }

    .stat-card {
        padding: 20px 16px
    }

    .stat-number {
        font-size: 26px
    }
}

@media (max-width: 992px) {
    .homepage-hero {
        min-height: auto;
        padding: 0 0 40px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .hero-content-wrapper {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 0;
        margin-top: 0
    }

    .hero-text-section {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 0;
        padding-top: 0
    }

    .homepage-hero-title {
        font-size: 38px
    }

    .homepage-hero-subtitle {
        font-size: 17px;
        margin-bottom: 32px
    }

    .hero-badge {
        font-size: 13px;
        padding: 10px 20px
    }

    .search-section-standalone {
        padding: 50px 0 60px
    }

    .search-title {
        font-size: 26px
    }

    .search-subtitle {
        font-size: 15px
    }

    .latest-jobs-section {
        padding: 0 0 55px
    }

    .section-header-simple {
        padding-top: 50px;
        margin-bottom: 40px
    }

    .section-title-simple {
        font-size: 24px
    }

    .articles-section-wrapper {
        padding: 60px 0
    }

    .value-proposition-section {
        padding: 60px 0
    }

    .value-prop-title {
        font-size: 32px
    }

    .value-prop-subtitle {
        font-size: 16px
    }

    .value-prop-grid {
        grid-template-columns:1fr;
        gap: 18px
    }

    .value-prop-card.featured {
        grid-column: span 1;
        grid-row: span 1
    }

    .card-inner {
        padding: 28px
    }

    .card-title {
        font-size: 17px
    }

    .card-title-large {
        font-size: 20px
    }

    .card-description {
        font-size: 13px
    }

    .card-description-large {
        font-size: 13px
    }

    .faq-section {
        padding: 60px 0
    }

    .section-title-modern {
        font-size: 36px
    }

    .hero-stats-main {
        grid-template-columns:1fr;
        max-width: 480px;
        gap: 14px
    }

    .stat-card {
        padding: 18px;
        flex-direction: row;
        gap: 14px
    }

    .stat-icon-wrapper {
        width: 50px;
        height: 50px;
        font-size: 22px
    }

    .stat-label {
        font-size: 13px
    }

    .hero-feature-highlights {
        grid-template-columns:repeat(3, 1fr);
        gap: 12px;
        max-width: 100%;
        margin-top: 28px
    }

    .feature-highlight {
        padding: 18px 14px
    }

    .highlight-badge {
        width: 48px;
        height: 48px;
        font-size: 20px;
        margin-bottom: 12px
    }

    .highlight-number {
        font-size: 22px
    }

    .highlight-label {
        font-size: 10px
    }
}

@media (max-width: 768px) {
    .search-section-standalone {
        padding: 35px 0 45px;
        margin-top: -20px
    }

    .latest-jobs-section {
        padding: 0 0 50px
    }

    .articles-section-wrapper {
        padding: 50px 0
    }

    .value-proposition-section {
        padding: 50px 0
    }

    .value-prop-header {
        margin-bottom: 40px
    }

    .value-prop-title {
        font-size: 26px
    }

    .value-prop-subtitle {
        font-size: 15px
    }

    .value-prop-grid {
        grid-template-columns:1fr;
        gap: 16px
    }

    .value-prop-card.featured {
        grid-column: span 1;
        grid-row: span 1
    }

    .card-inner {
        padding: 24px
    }

    .icon-circle {
        width: 56px;
        height: 56px;
        border-radius: 14px
    }

    .icon-circle i {
        font-size: 24px
    }

    .card-title {
        font-size: 16px
    }

    .card-badge {
        font-size: 10px;
        padding: 5px 12px
    }

    .faq-section {
        padding: 50px 0
    }

    .homepage-hero {
        min-height: auto;
        padding: 0 0 30px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .hero-content-wrapper {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 0;
        margin-top: 0
    }

    .hero-text-section {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
        margin-top: 0;
        padding-top: 0
    }

    .homepage-hero-title {
        font-size: 26px
    }

    .homepage-hero-subtitle {
        font-size: 14px;
        margin-bottom: 24px
    }

    .hero-badge {
        font-size: 11px;
        padding: 7px 14px;
        margin-bottom: 16px
    }

    .search-section-standalone {
        padding: 30px 0 40px;
        margin-top: -18px
    }

    .search-section-header {
        margin-bottom: 20px
    }

    .search-title {
        font-size: 18px
    }

    .search-subtitle {
        font-size: 12px
    }

    .latest-jobs-section {
        padding: 0 0 40px
    }

    .section-header-simple {
        padding-top: 25px;
        margin-bottom: 20px
    }

    .section-title-simple {
        font-size: 17px
    }

    .articles-section-wrapper {
        padding: 40px 0
    }

    .value-proposition-section {
        padding: 40px 0
    }

    .value-prop-header {
        margin-bottom: 32px
    }

    .value-prop-title {
        font-size: 22px
    }

    .value-prop-subtitle {
        font-size: 13px
    }

    .value-prop-grid {
        grid-template-columns:1fr;
        gap: 12px
    }

    .card-inner {
        padding: 20px
    }

    .icon-circle {
        width: 48px;
        height: 48px;
        border-radius: 12px
    }

    .icon-circle i {
        font-size: 20px
    }

    .card-title {
        font-size: 15px;
        margin-bottom: 10px
    }

    .card-title-large {
        font-size: 17px;
        margin-bottom: 14px
    }

    .card-description {
        font-size: 12px;
        line-height: 1.6
    }

    .card-description-large {
        font-size: 12px;
        line-height: 1.6
    }

    .card-badge {
        font-size: 9px;
        padding: 4px 10px;
        top: 16px;
        right: 16px
    }

    .faq-section {
        padding: 40px 0
    }

    .hero-stats-main {
        grid-template-columns:repeat(3, 1fr);
        max-width: 100%;
        gap: 8px;
        margin-top: 24px
    }

    .stat-card {
        padding: 12px;
        flex-direction: column;
        gap: 8px;
        text-align: center
    }

    .stat-icon-wrapper {
        width: 36px;
        height: 36px;
        font-size: 16px;
        border-radius: 10px;
        margin: 0 auto
    }

    .stat-content {
        gap: 3px
    }

    .stat-number {
        font-size: 18px
    }

    .stat-label {
        font-size: 9px
    }

    .hero-feature-highlights {
        grid-template-columns:repeat(3, 1fr);
        gap: 8px;
        margin-top: 18px;
        max-width: 100%
    }

    .feature-highlight {
        padding: 10px 6px
    }

    .highlight-badge {
        width: 36px;
        height: 36px;
        font-size: 15px;
        margin-bottom: 6px;
        border-radius: 10px
    }

    .highlight-number {
        font-size: 16px
    }

    .highlight-label {
        font-size: 7px;
        letter-spacing: .3px
    }

    .jobs-grid-homepage {
        grid-template-columns:1fr;
        gap: 16px
    }

    .features-grid {
        grid-template-columns:1fr;
        gap: 20px
    }

    .feature-card {
        padding: 24px
    }

    .section-title-modern {
        font-size: 30px
    }

    .section-description-modern {
        font-size: 16px
    }

    .accordion-button-modern {
        padding: 16px 20px;
        font-size: 15px;
        gap: 12px
    }

    .accordion-body-modern {
        padding: 0 20px 20px 52px;
        font-size: 14px
    }
}

@media (max-width: 576px) {
    .homepage-hero {
        min-height: auto;
        padding: 40px 0 25px !important;
        align-items: flex-start;
    }

    .homepage-hero .container {
        padding-top: 0 !important;
    }

    .homepage-hero .container .hero-content-wrapper {
        padding-top: 0 !important;
        margin-top: 20px !important;
    }

    .hero-text-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .homepage-hero-title {
        font-size: 23px;
        margin-top: 0;
    }

    .homepage-hero-subtitle {
        font-size: 13px;
        margin-bottom: 20px
    }

    .hero-badge {
        font-size: 10px;
        padding: 6px 12px;
        margin-bottom: 14px
    }

    .hero-badge i {
        font-size: 12px
    }

    .hero-stats-main {
        grid-template-columns:repeat(3, 1fr);
        gap: 7px;
        margin-top: 20px
    }

    .stat-card {
        padding: 10px 8px;
        flex-direction: column;
        gap: 6px;
        text-align: center
    }

    .stat-icon-wrapper {
        width: 32px;
        height: 32px;
        font-size: 14px;
        border-radius: 9px;
        margin: 0 auto
    }

    .stat-content {
        gap: 2px
    }

    .stat-number {
        font-size: 16px
    }

    .stat-label {
        font-size: 8px
    }

    .hero-feature-highlights {
        grid-template-columns:repeat(3, 1fr);
        gap: 6px;
        margin-top: 16px
    }

    .feature-highlight {
        padding: 9px 5px
    }

    .highlight-badge {
        width: 32px;
        height: 32px;
        font-size: 14px;
        margin-bottom: 5px;
        border-radius: 8px
    }

    .highlight-number {
        font-size: 14px
    }

    .highlight-label {
        font-size: 6px
    }

    .section-title-modern {
        font-size: 26px
    }

    .section-description-modern {
        font-size: 15px
    }

    .feature-icon {
        width: 60px;
        height: 60px;
        font-size: 28px
    }

    .feature-title {
        font-size: 18px
    }

    .feature-description {
        font-size: 14px
    }

    .accordion-button-modern {
        padding: 14px 16px;
        font-size: 14px;
        gap: 10px
    }

    .accordion-button-modern i:first-child {
        font-size: 18px
    }

    .accordion-body-modern {
        padding: 0 16px 16px 44px;
        font-size: 13px
    }
}

.job-card-professional {
    background: #fff;
    border: 1px solid #E0E6F7;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
    transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
    position: relative;
    height: auto;
    min-height: 200px;
    overflow: visible
}

.job-card-professional[data-job-url] {
    cursor: pointer
}

.job-card-professional::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #3C65F5;
    border-radius: 8px 0 0 8px;
    opacity: 0;
    transition: opacity 0.3s ease
}

.job-card-professional:hover::before {
    opacity: 1
}

.job-card-professional.benefit-visa::before {
    background: linear-gradient(135deg, #F58A3C 0%, #EA580C 100%)
}

.job-card-professional.benefit-visa:hover {
    border-color: #F58A3C;
    box-shadow: 0 10px 20px -5px rgb(245 138 60 / .15)
}

.job-card-professional.benefit-relocation::before {
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%)
}

.job-card-professional.benefit-relocation:hover {
    border-color: #6366F1;
    box-shadow: 0 10px 20px -5px rgb(99 102 241 / .15)
}

.job-card-professional.benefit-remote::before {
    background: linear-gradient(135deg, #3AAB67 0%, #2e8b54 100%)
}

.job-card-professional.benefit-remote:hover {
    border-color: #3AAB67;
    box-shadow: 0 10px 20px -5px rgb(58 171 103 / .15)
}

.job-card-professional:hover {
    border-color: #B4C0E0;
    box-shadow: 0 10px 20px -5px rgb(10 42 105 / .06);
    transform: translateY(-2px)
}

.job-card-professional.premium-locked {
    position: relative;
    overflow: hidden;
    cursor: default
}

.job-card-professional.premium-locked[data-job-url] {
    cursor: default
}

.job-card-professional.premium-locked > *:not(.premium-fade-overlay):not(.premium-lock-message) {
    filter: blur(.1px);
    opacity: 2
}

.job-card-professional.premium-locked::before {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    opacity: 1
}

.job-card-professional.applied {
    border-color: #10B981;
    background: linear-gradient(to bottom, #ffffff 0%, #F0FDF4 100%);
    margin-top: 8px
}

.job-card-professional.applied::before {
    background: #10B981;
    opacity: 1
}

.job-card-professional.applied:hover {
    border-color: #059669;
    box-shadow: 0 10px 20px -5px rgb(16 185 129 / .15)
}

.job-card-professional.applied.benefit-visa::before {
    background: #10B981
}

.job-card-professional.applied.benefit-relocation::before {
    background: #10B981
}

.job-card-professional.applied.benefit-remote::before {
    background: #10B981
}

.premium-fade-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(255 255 255 / .5);
    backdrop-filter: blur(3px);
    z-index: 8;
    pointer-events: none
}

.premium-lock-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 28px 24px;
    background: #fff0;
    z-index: 10;
    text-align: center;
    border-radius: 12px;
    max-width: 90%;
    width: 280px;
    font-weight: 500
}

.premium-lock-content {
    text-align: center
}

.premium-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    box-shadow: 0 4px 16px rgb(245 158 11 / .35)
}

.premium-icon i {
    font-size: 26px;
    color: #fff
}

.premium-lock-content h4 {
    font-size: 17px;
    font-weight: 700;
    color: #05264E;
    margin-bottom: 8px;
    line-height: 1.3
}

.premium-lock-content p {
    font-size: 14px;
    color: #4F5E64;
    margin-bottom: 16px;
    line-height: 1.5
}

.btn-premium-unlock {
    padding: 10px 24px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgb(245 158 11 / .3)
}

.btn-premium-unlock:hover {
    background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgb(245 158 11 / .4)
}

.premium-hidden {
    position: relative;
    filter: blur(2px);
    opacity: .5;
    pointer-events: none;
    user-select: none
}

.disabled-link {
    pointer-events: none;
    cursor: not-allowed !important;
    opacity: .4
}

.bookmark-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #fff0;
    border: none;
    color: #94A3B8;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 5;
    padding: 0;
    margin: 0;
    font-size: 18px;
    line-height: 1
}

.bookmark-icon i {
    display: block;
    line-height: 1;
    transition: transform 0.25s ease, color 0.25s ease, text-shadow 0.25s ease
}

.bookmark-icon:hover {
    color: #6366f1;
    transform: scale(1.2);
    text-shadow: 0 0 8px rgb(99 102 241 / .5)
}

.bookmark-icon.active {
    color: #fbbf24;
    text-shadow: 0 0 10px rgb(251 191 36 / .6);
    transform: scale(1.1)
}

.bookmark-icon.active i {
    animation: pulseGlow 1.8s infinite ease-in-out
}

@keyframes pulseGlow {
    0%, 100% {
        text-shadow: 0 0 8px rgb(251 191 36 / .4);
        transform: scale(1)
    }
    50% {
        text-shadow: 0 0 12px rgb(251 191 36 / .8);
        transform: scale(1.05)
    }
}

.job-title-section {
    margin-bottom: 14px
}

.applied-badge-outside {
    position: absolute;
    top: -15px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #fff;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 2px 8px rgb(16 185 129 / .3);
    transition: all 0.2s ease;
    border: 1.5px solid #fff
}

.applied-badge-outside i {
    font-size: 10px;
    color: #fff
}

.applied-badge-outside:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgb(16 185 129 / .45)
}

.company-section {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid #E0E6F7
}

.company-logo {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid #e1e5e9
}

.company-logo-placeholder {
    width: 48px;
    height: 48px;
    background: #3C65F5;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase
}

.company-details {
    flex: 1;
    min-width: 0
}

.company-name {
    font-size: 16px;
    font-weight: 600;
    color: #05264E;
    margin: 0 0 4px 0;
    line-height: 1.3
}

.job-location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #66789C
}

.job-location i {
    font-size: 12px;
    color: #3C65F5
}

.job-title-link {
    text-decoration: none;
    display: block;
    flex: 1
}

.job-title {
    font-size: 18px;
    font-weight: 700;
    color: #05264E;
    margin: 0;
    line-height: 1.4;
    cursor: pointer;
    transition: all 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.job-title-link:hover .job-title {
    color: #3C65F5;
    text-decoration: none
}

.job-meta-tags {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px
}

.job-category-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #4F5E64;
    font-weight: 500;
    transition: color 0.2s ease
}

.job-category-tag:hover {
    color: #3C65F5
}

.job-category-tag i {
    font-size: 12px;
    color: #3C65F5
}

.meta-separator {
    color: #E0E6F7;
    font-size: 12px;
    line-height: 1;
    user-select: none
}

.job-posted-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #A0ABB8;
    font-weight: 400
}

.job-posted-time i {
    font-size: 12px;
    color: #A0ABB8
}

.job-details-full {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px
}

.detail-full-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: #F8FAFF;
    border: 1px solid #E0E6F7;
    border-radius: 4px;
    transition: all 0.3s ease
}

.detail-full-item:hover {
    border-color: #B4C0E0;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -5px rgb(10 42 105 / .06)
}

.detail-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    color: #66789C;
    text-transform: uppercase;
    letter-spacing: .5px
}

.detail-label i {
    font-size: 10px;
    color: #3C65F5
}

.detail-value {
    font-size: 13px;
    font-weight: 600;
    color: #05264E;
    line-height: 1.3
}

.benefits-section {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px
}

.benefit-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid;
    transition: all 0.3s ease;
    cursor: default;
    white-space: nowrap;
    position: relative
}

.benefit-tag span {
    line-height: 1
}

.benefit-tag i {
    font-size: 11px
}

.benefit-check-icon {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 10px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgb(59 130 246 / .15);
    z-index: 1;
    animation: checkPop 0.3s ease;
    border: 1px solid rgb(59 130 246 / .2)
}

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

.benefit-tag.active:nth-child(3) {
    background: #3AAB67;
    border-color: #3AAB67;
    color: #fff
}

.benefit-tag.active:nth-child(3):hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgb(58 171 103 / .3);
    background: #2e8b54
}

.benefit-tag.active:nth-child(2) {
    background: #6366F1;
    border-color: #6366F1;
    color: #fff
}

.benefit-tag.active:nth-child(2):hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgb(60 101 245 / .3);
    background: #05264E
}

.benefit-tag.active:nth-child(1) {
    background: #F58A3C;
    border-color: #F58A3C;
    color: #fff
}

.benefit-tag.active:nth-child(1):hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgb(245 138 60 / .3);
    background: #d77530
}

.benefit-tag.inactive {
    background: #F8FAFF;
    border-color: #E0E6F7;
    color: #A0ABB8;
    border-style: dashed
}

.dropdown-menu {
    border: 1px solid #E0E6F7;
    border-radius: 10px;
    box-shadow: 0 10px 20px -5px rgb(10 42 105 / .06);
    padding: 10px 0;
    min-width: 160px
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    font-size: 14px;
    color: #4F5E64;
    transition: all 0.2s ease
}

.dropdown-item:hover {
    background: #EFF2FB;
    color: #3C65F5
}

.dropdown-item i {
    font-size: 14px;
    width: 16px;
    text-align: center
}

.dropdown-divider {
    margin: 8px 0;
    border-color: #E0E6F7
}

@media (max-width: 768px) {
    .job-card-professional {
        padding: 16px
    }

    .company-section {
        width: 100%
    }

    .job-details-full {
        grid-template-columns:1fr;
        gap: 8px
    }

    .benefits-section {
        gap: 8px
    }

    .benefit-tag {
        font-size: 11px;
        padding: 7px 10px
    }

    .benefit-check-icon {
        font-size: 11px !important;
        width: 14px;
        height: 14px;
        top: -3px;
        right: -3px
    }
}

@media (max-width: 576px) {
    .job-card-professional {
        padding: 14px
    }

    .bookmark-icon {
        top: 6px;
        right: 6px;
        font-size: 16px
    }

    .job-title {
        font-size: 15px;
        line-height: 1.3
    }

    .company-name {
        font-size: 14px
    }

    .company-logo, .company-logo-placeholder {
        width: 40px;
        height: 40px;
        min-width: 40px
    }

    .company-logo-placeholder span {
        font-size: 14px
    }

    .job-location {
        font-size: 11px
    }

    .company-section {
        flex: 1
    }

    .job-title-section {
        margin-bottom: 10px
    }

    .applied-badge-outside {
        top: -8px;
        left: 8px;
        font-size: 9px;
        padding: 2px 6px;
        border-width: 1.5px;
        gap: 3px
    }

    .applied-badge-outside i {
        font-size: 9px
    }

    .job-meta-tags {
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 6px
    }

    .job-category-tag, .job-posted-time {
        font-size: 11px
    }

    .job-posted-time i, .job-category-tag i {
        font-size: 10px
    }

    .meta-separator {
        font-size: 10px
    }

    .benefits-section {
        gap: 6px;
        margin-bottom: 10px;
        grid-template-columns:repeat(3, 1fr)
    }

    .benefit-tag {
        font-size: 9px;
        padding: 6px 6px;
        gap: 3px
    }

    .benefit-tag i {
        font-size: 9px
    }

    .benefit-check-icon {
        font-size: 8px !important;
        width: 9px;
        height: 9px;
        top: 0;
        right: 1px
    }

    .job-details-full {
        grid-template-columns:repeat(2, 1fr);
        gap: 6px;
        margin-bottom: 10px
    }

    .detail-full-item {
        padding: 7px 8px;
        flex-direction: column;
        gap: 3px;
        text-align: center
    }

    .detail-label {
        font-size: 8px;
        letter-spacing: .3px
    }

    .detail-label i {
        font-size: 10px;
        margin-right: 2px
    }

    .detail-value {
        font-size: 11px;
        font-weight: 600
    }
}

.breadcrumb-section {
    background: #fff;
    padding: 16px 0;
    margin-top: 20px;
    border-radius: 8px;
    border: 1px solid #E0E6F7
}

.breadcrumb-modern {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px
}

.breadcrumb-item {
    display: flex;
    align-items: center
}

.breadcrumb-item + .breadcrumb-item {
    padding-left: .5rem
}

:root {
    --bs-breadcrumb-divider: '/'
}

.breadcrumb-item + .breadcrumb-item::before {
    content: var(--bs-breadcrumb-divider, '/') !important;
    color: #B4C0E0;
    font-weight: 500;
    margin-right: 8px
}

.breadcrumb-item a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #66789C;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-weight: 500
}

.breadcrumb-item a i {
    font-size: 12px;
    color: #3C65F5
}

.breadcrumb-item a:hover {
    background: #F8FAFF;
    color: #3C65F5
}

.breadcrumb-item.active {
    color: #05264E;
    font-weight: 600
}

.jobs-hero-header {
    background: linear-gradient(135deg, #F8FAFF 0%, #EFF2FB 100%);
    padding: 28px 0 32px;
    margin-bottom: 32px;
    border-bottom: 1px solid #E0E6F7
}

.jobs-hero-content {
    text-align: center;
    max-width: 900px;
    margin: 0 auto
}

.jobs-hero-title {
    font-size: 32px;
    font-weight: 800;
    color: #05264E;
    margin-bottom: 10px;
    line-height: 1.25;
    letter-spacing: -.02em
}

.jobs-hero-description {
    font-size: 15px;
    color: #66789C;
    line-height: 1.5;
    margin: 0;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto
}

.jobs-search-section {
    margin-bottom: 36px
}

.jobs-listing-section {
    padding: 32px 0 60px;
    background: #FAFBFC
}

.jobs-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 16px 24px;
    background: #fff;
    border: 1px solid #E0E6F7;
    border-radius: 12px
}

.results-count {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #4F5E64
}

.results-count i {
    font-size: 16px;
    color: #3C65F5
}

.results-count strong {
    color: #05264E;
    font-weight: 700
}

.jobs-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px
}

.jobs-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    background: #fff;
    border: 2px dashed #E0E6F7;
    border-radius: 16px
}

.empty-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #EFF2FB 0%, #E0E6F7 100%);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px
}

.empty-icon i {
    font-size: 36px;
    color: #3C65F5
}

.jobs-empty-state h3 {
    font-size: 24px;
    font-weight: 700;
    color: #05264E;
    margin-bottom: 12px
}

.jobs-empty-state p {
    font-size: 16px;
    color: #66789C;
    margin: 0
}

.similar-jobs-section {
    grid-column: 1 / -1;
    margin-top: 40px
}

.similar-jobs-title {
    font-size: 20px;
    font-weight: 700;
    color: #05264E;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px
}

.similar-jobs-title::before {
    content: '';
    width: 4px;
    height: 24px;
    background: linear-gradient(135deg, #3C65F5 0%, #05264E 100%);
    border-radius: 2px
}

.jobs-pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    width: 100%;
    overflow: hidden
}

.pagination-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #E0E6F7 #fff0;
    padding: 10px 0
}

.pagination-wrapper::-webkit-scrollbar {
    height: 6px
}

.pagination-wrapper::-webkit-scrollbar-track {
    background: #fff0
}

.pagination-wrapper::-webkit-scrollbar-thumb {
    background: #E0E6F7;
    border-radius: 3px
}

.pagination-wrapper::-webkit-scrollbar-thumb:hover {
    background: #B4C0E0
}

.pagination-nav {
    width: 100%;
    display: flex;
    justify-content: center
}

.pagination {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: fit-content
}

.page-item {
    margin: 0;
    flex-shrink: 0
}

.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: #4F5E64;
    background: #fff;
    border: 1px solid #E0E6F7;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap
}

.page-link:hover:not(:disabled) {
    background: #F8FAFF;
    border-color: #3C65F5;
    color: #3C65F5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(60 101 245 / .15)
}

.page-link i {
    font-size: 12px
}

.page-item.active .page-link {
    background: linear-gradient(135deg, #3C65F5 0%, #05264E 100%);
    border-color: #3C65F5;
    color: #fff;
    box-shadow: 0 2px 8px rgb(60 101 245 / .3)
}

.page-item.active .page-link:hover {
    background: linear-gradient(135deg, #05264E 0%, #3C65F5 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(60 101 245 / .4)
}

.page-item.disabled .page-link {
    background: #F8FAFF;
    border-color: #E0E6F7;
    color: #A0ABB8;
    cursor: not-allowed;
    opacity: .6;
    pointer-events: none
}

.page-item.disabled .page-link:hover {
    background: #F8FAFF;
    border-color: #E0E6F7;
    color: #A0ABB8;
    transform: none;
    box-shadow: none
}

.category-description-section {
    margin-top: 60px;
    padding-top: 60px;
    border-top: 2px solid #E0E6F7
}

.category-description-card {
    background: #fff;
    border: 1px solid #E0E6F7;
    border-radius: 16px;
    padding: 40px
}

.category-description-title {
    font-size: 28px;
    font-weight: 700;
    color: #05264E;
    margin-bottom: 24px;
    display: flex;
    align-items: center
}

.category-description-title i {
    color: #3C65F5
}

.category-description-content {
    font-size: 16px;
    line-height: 1.8;
    color: #4F5E64
}

.category-description-content h1, .category-description-content h2, .category-description-content h3, .category-description-content h4 {
    color: #05264E;
    font-weight: 700;
    margin: 24px 0 16px
}

.category-description-content p {
    margin-bottom: 16px
}

.category-description-content ul, .category-description-content ol {
    padding-left: 24px;
    margin: 16px 0
}

.category-description-content li {
    margin-bottom: 8px
}

.category-description-content strong {
    color: #05264E;
    font-weight: 600
}

.category-intro-section {
    margin: 40px 0;
    padding: 0
}

.category-intro-content {
    background: #F8FAFF;
    border: 1px solid #E0E6F7;
    border-radius: 16px;
    padding: 32px 40px;
    font-size: 16px;
    line-height: 1.8;
    color: #4F5E64
}

.category-intro-content h1, .category-intro-content h2, .category-intro-content h3, .category-intro-content h4 {
    color: #05264E;
    font-weight: 700;
    margin: 0 0 16px
}

.category-intro-content p {
    margin-bottom: 16px
}

.category-intro-content p:last-child {
    margin-bottom: 0
}

.category-intro-content ul, .category-intro-content ol {
    padding-left: 24px;
    margin: 16px 0
}

.category-intro-content li {
    margin-bottom: 8px
}

.category-intro-content strong {
    color: #05264E;
    font-weight: 600
}

.category-faq-section {
    margin-top: 60px;
    padding-top: 60px;
    border-top: 2px solid #E0E6F7
}

.category-faq-section .container {
    max-width: 900px;
    margin: 0 auto
}

.category-faq-header {
    margin-bottom: 32px;
    text-align: center
}

.category-faq-title {
    font-size: 28px;
    font-weight: 700;
    color: #05264E;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.category-faq-title i {
    color: #3C65F5
}

.category-faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 100%
}

.faq-item {
    background: #fff;
    border: 1px solid #E0E6F7;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    max-width: 100%
}

.faq-item:hover {
    border-color: #3C65F5;
    box-shadow: 0 4px 12px rgb(60 101 245 / .1)
}

.faq-question {
    display: block;
    padding: 20px 24px;
    padding-right: 50px;
    font-size: 18px;
    font-weight: 600;
    color: #05264E;
    cursor: pointer;
    list-style: none;
    position: relative;
    user-select: none;
    line-height: 1.5
}

.faq-question::marker {
    display: none
}

.faq-question::after {
    content: '+';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 300;
    color: #3C65F5;
    transition: transform 0.3s ease;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F0F4FF;
    border-radius: 50%;
    font-size: 18px
}

.faq-item[open] .faq-question::after {
    content: '−';
    transform: translateY(-50%) rotate(0deg);
    background: #3C65F5;
    color: #fff
}

.faq-answer {
    padding: 0 24px 24px;
    font-size: 16px;
    line-height: 1.8;
    color: #4F5E64;
    max-width: 100%
}

.faq-answer p {
    margin-bottom: 12px
}

.faq-answer p:last-child {
    margin-bottom: 0
}

.faq-answer ul, .faq-answer ol {
    padding-left: 24px;
    margin: 12px 0
}

.faq-answer li {
    margin-bottom: 8px
}

.faq-answer strong {
    color: #05264E;
    font-weight: 600
}

@media (max-width: 1200px) {
    .jobs-grid {
        grid-template-columns:repeat(2, 1fr);
        gap: 20px
    }
}

@media (max-width: 992px) {
    .jobs-hero-header {
        padding: 24px 0 28px;
        margin-bottom: 28px
    }

    .jobs-hero-title {
        font-size: 28px;
        margin-bottom: 8px
    }

    .jobs-hero-description {
        font-size: 14px
    }

    .jobs-pagination {
        margin-top: 32px
    }

    .pagination-wrapper {
        padding: 8px 0
    }

    .pagination {
        gap: 5px
    }

    .page-link {
        min-width: 38px;
        height: 38px;
        padding: 0 11px;
        font-size: 13px
    }

    .page-link i {
        font-size: 11px
    }

    .category-intro-content {
        padding: 24px
    }

    .category-faq-section {
        margin-top: 40px;
        padding-top: 40px
    }

    .category-faq-section .container {
        max-width: 100%
    }

    .category-faq-title {
        font-size: 22px
    }

    .faq-question {
        padding: 16px 20px;
        padding-right: 45px;
        font-size: 16px
    }

    .faq-question::after {
        right: 20px;
        width: 20px;
        height: 20px;
        font-size: 16px
    }

    .faq-answer {
        padding: 0 20px 20px;
        font-size: 14px
    }
}

@media (max-width: 768px) {
    .breadcrumb-section {
        padding: 2px 0;
        margin-top: 4px;
        border-radius: 4px
    }

    .breadcrumb-modern {
        font-size: 12px;
        gap: 0;
        margin: 0;
        padding: 0
    }

    .breadcrumb-item {
        gap: 0
    }

    .breadcrumb-item + .breadcrumb-item {
        padding-left: .25rem
    }

    .breadcrumb-item a {
        padding: 0;
        gap: 0;
        font-size: 11px
    }

    .breadcrumb-item a i {
        font-size: 10px;
        margin-right: 2px
    }

    .breadcrumb-item.active {
        font-size: 11px;
        padding: 0
    }

    .breadcrumb-item + .breadcrumb-item::before {
        margin-right: .25rem;
        font-size: 10px
    }

    .jobs-hero-header {
        padding: 20px 0 24px;
        margin-bottom: 24px
    }

    .jobs-hero-title {
        font-size: 24px;
        margin-bottom: 8px
    }

    .jobs-hero-description {
        font-size: 14px;
        line-height: 1.4
    }

    .jobs-grid {
        grid-template-columns:1fr;
        gap: 16px
    }

    .jobs-results-header {
        padding: 12px 16px;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start
    }

    .results-count {
        font-size: 14px
    }

    .category-description-card {
        padding: 24px
    }

    .category-description-title {
        font-size: 22px
    }

    .category-intro-content {
        padding: 20px;
        font-size: 14px
    }

    .category-faq-section {
        margin-top: 32px;
        padding-top: 32px
    }

    .category-faq-section .container {
        max-width: 100%;
        padding: 0 15px
    }

    .category-faq-title {
        font-size: 20px;
        flex-direction: column;
        gap: 4px
    }

    .faq-question {
        padding: 14px 16px;
        padding-right: 40px;
        font-size: 15px
    }

    .faq-question::after {
        right: 16px;
        width: 20px;
        height: 20px;
        font-size: 14px
    }

    .faq-answer {
        padding: 0 16px 16px;
        font-size: 14px
    }

    .jobs-pagination {
        margin-top: 30px
    }

    .pagination-wrapper {
        padding: 8px 5px
    }

    .pagination {
        gap: 4px
    }

    .page-link {
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        font-size: 13px
    }

    .page-link i {
        font-size: 11px
    }
}

@media (max-width: 576px) {
    .breadcrumb-section {
        padding: 2px 0;
        margin-top: 4px;
        border-radius: 4px
    }

    .breadcrumb-modern {
        font-size: 11px;
        gap: 0;
        margin: 0;
        padding: 0
    }

    .breadcrumb-item + .breadcrumb-item {
        padding-left: .2rem
    }

    .breadcrumb-item a {
        padding: 0;
        gap: 0;
        font-size: 10px
    }

    .breadcrumb-item a i {
        font-size: 9px;
        margin-right: 2px
    }

    .breadcrumb-item.active {
        font-size: 10px;
        padding: 0
    }

    .breadcrumb-item + .breadcrumb-item::before {
        margin-right: .2rem;
        font-size: 9px
    }

    .jobs-hero-header {
        padding: 18px 0 20px;
        margin-bottom: 20px
    }

    .jobs-hero-title {
        font-size: 22px;
        margin-bottom: 6px;
        line-height: 1.3
    }

    .jobs-hero-description {
        font-size: 13px;
        line-height: 1.4
    }

    .jobs-results-header {
        padding: 10px 14px
    }

    .results-count {
        font-size: 13px
    }

    .empty-icon {
        width: 60px;
        height: 60px
    }

    .empty-icon i {
        font-size: 28px
    }

    .jobs-empty-state h3 {
        font-size: 20px
    }

    .jobs-empty-state p {
        font-size: 14px
    }

    .category-description-card {
        padding: 20px
    }

    .category-description-title {
        font-size: 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }

    .category-description-content {
        font-size: 15px
    }

    .jobs-pagination {
        margin-top: 24px
    }

    .pagination-wrapper {
        padding: 6px 5px
    }

    .pagination-nav {
        padding: 0 5px
    }

    .pagination {
        gap: 3px;
        flex-wrap: wrap;
        justify-content: center
    }

    .page-link {
        min-width: 30px;
        height: 30px;
        padding: 0 5px;
        font-size: 11px;
        border-radius: 6px
    }

    .page-link i {
        font-size: 10px
    }

    .page-item.disabled .page-link {
        min-width: 30px;
        height: 30px;
        padding: 0 5px
    }
}

.job-details-modern {
    background: #F8FAFF
}

.job-details-modern .ai-summary-card {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 2px solid #3B82F6;
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px rgb(59 130 246 / .12)
}

.job-details-modern .ai-summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3B82F6 0%, #2563EB 50%, #1D4ED8 100%)
}

.job-details-modern .ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgb(59 130 246 / .3)
}

.job-details-modern .ai-badge i {
    font-size: 14px;
    animation: sparkle 2s ease-in-out infinite
}

@keyframes sparkle {
    0%, 100% {
        opacity: 1;
        transform: scale(1)
    }
    50% {
        opacity: .7;
        transform: scale(1.1)
    }
}

.job-details-modern .ai-summary-text {
    background: #fff;
    border-left: 4px solid #3B82F6;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 20px;
    position: relative;
    box-shadow: 0 2px 8px rgb(59 130 246 / .08)
}

.job-details-modern .ai-summary-text .quote-icon {
    position: absolute;
    top: 16px;
    left: -12px;
    font-size: 24px;
    color: #3B82F6;
    opacity: .3
}

.job-details-modern .ai-summary-text p {
    font-size: 16px;
    line-height: 1.8;
    color: #1E293B;
    margin: 0;
    font-weight: 500;
    padding-left: 20px
}

.job-details-modern .ai-key-points {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgb(59 130 246 / .08)
}

.job-details-modern .key-points-title {
    font-size: 15px;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 16px;
    display: flex;
    align-items: center
}

.job-details-modern .key-points-title i {
    color: #F59E0B
}

.job-details-modern .key-points-grid {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px
}

.job-details-modern .key-point-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(135deg, #F0F9FF 0%, #EFF6FF 100%);
    border: 1px solid #BFDBFE;
    border-radius: 8px;
    transition: all 0.3s ease
}

.job-details-modern .key-point-item:hover {
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
    border-color: #3B82F6;
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgb(59 130 246 / .15)
}

.job-details-modern .key-point-item i {
    color: #3B82F6;
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0
}

.job-details-modern .key-point-item span {
    font-size: 14px;
    color: #334155;
    font-weight: 500;
    line-height: 1.6
}

.job-details-modern .ai-footer {
    margin-top: 16px;
    text-align: center;
    padding-top: 16px;
    border-top: 1px solid #BFDBFE
}

.job-details-modern .ai-footer small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748B;
    font-size: 12px;
    font-weight: 600
}

.job-details-modern .ai-footer i {
    color: #3B82F6;
    font-size: 13px
}

.job-details-modern .ai-hard-skills {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 2px 8px rgb(59 130 246 / .08)
}

.job-details-modern .section-title {
    font-size: 15px;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 16px;
    display: flex;
    align-items: center
}

.job-details-modern .section-title i {
    color: #8B5CF6
}

.job-details-modern .ai-benefits .section-title i {
    color: #10B981
}

.job-details-modern .skills-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.job-details-modern .skill-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
    border: 1px solid #C4B5FD;
    border-radius: 8px;
    color: #6B21A8;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease
}

.job-details-modern .skill-tag i {
    font-size: 12px;
    color: #8B5CF6
}

.job-details-modern .skill-tag:hover {
    background: linear-gradient(135deg, #DDD6FE 0%, #C4B5FD 100%);
    border-color: #8B5CF6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(139 92 246 / .2)
}

.job-details-modern .ai-benefits {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 2px 8px rgb(59 130 246 / .08)
}

.job-details-modern .benefits-list {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px
}

.job-details-modern .benefit-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    border: 1px solid #86EFAC;
    border-radius: 8px;
    transition: all 0.3s ease
}

.job-details-modern .benefit-item:hover {
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
    border-color: #10B981;
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgb(16 185 129 / .2)
}

.job-details-modern .benefit-item i {
    color: #10B981;
    font-size: 14px;
    flex-shrink: 0
}

.job-details-modern .benefit-item span {
    font-size: 14px;
    color: #065F46;
    font-weight: 600;
    line-height: 1.5
}

.notification-bar-email-verify {
    display: none;
    width: 100%;
    background: #fff0;
    color: #0F172A;
    font-size: 13px;
    padding: 10px 0
}

.notification-bar-email-verify .notification-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-radius: 0;
    background: #FEF2F2;
    box-shadow: none;
    border: 1px solid #FCA5A5;
    margin: 0;
    max-width: 100%
}

.notification-bar-email-verify .notification-bar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #FEE2E2;
    color: #DC2626;
    flex-shrink: 0;
    margin-inline-end: 8px
}

.notification-bar-email-verify .notification-bar-icon i {
    font-size: 16px
}

.notification-bar-email-verify .notification-bar-text {
    flex: 1;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.notification-bar-email-verify .notification-bar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0
}

.notification-bar-email-verify .btn-primary.btn-sm {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background-color: #EF4444;
    border-color: #EF4444
}

.notification-bar-email-verify .btn-primary.btn-sm:hover {
    background-color: #DC2626;
    border-color: #DC2626
}

.notification-bar-email-verify .notification-bar-close {
    font-size: 12px;
    color: #4B5563;
    padding: 0;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff0;
    border: none
}

.notification-bar-email-verify .notification-bar-close:hover {
    color: #111827;
    background: #F3F4F6;
    text-decoration: none
}

@media (max-width: 576px) {
    .notification-bar-email-verify .notification-bar-inner {
        flex-direction: row;
        align-items: center;
        border-radius: 0;
        padding: 8px 10px
    }

    .notification-bar-email-verify .notification-bar-actions {
        width: auto;
        justify-content: flex-end;
        flex-wrap: nowrap
    }
}

/* Google Search Notification Bar */
.notification-bar-google-search {
    display: none; /* Hidden by default, shown via JavaScript */
    width: 100%;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    color: #1E40AF;
    font-size: 13px;
    padding: 10px 0;
    border-bottom: 1px solid #BFDBFE;
    position: relative;
    z-index: 1;
    animation: slideDown 0.3s ease-out;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

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

.notification-bar-google-search .notification-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    border: none;
    margin: 0;
    max-width: 100%;
}

.notification-bar-google-search .notification-bar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #DBEAFE;
    color: #1E40AF;
    flex-shrink: 0;
    margin-inline-end: 8px;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2);
    animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

.notification-bar-google-search .notification-bar-icon i {
    font-size: 16px;
}

.notification-bar-google-search .notification-bar-text {
    flex: 1;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    font-size: 13px;
}

.notification-bar-google-search .notification-bar-text strong {
    color: #1E40AF;
    font-weight: 700;
    font-size: 14px;
}

.notification-bar-google-search .highlight-brand {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
    display: inline-block;
    margin: 0 2px;
    animation: brandPulse 2s ease-in-out infinite;
}

@keyframes brandPulse {
    0%, 100% {
        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
    }
    50% {
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.5);
    }
}

.notification-bar-google-search .heart-emoji {
    display: inline-block;
    animation: heartPulse 2s ease-in-out infinite;
    margin-inline-end: 2px;
}

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

.notification-bar-google-search .notification-bar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.notification-bar-google-search .notification-bar-close {
    font-size: 12px;
    color: #4B5563;
    padding: 0;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notification-bar-google-search .notification-bar-close:hover {
    color: #111827;
    background: #E0E7FF;
    transform: scale(1.1);
    text-decoration: none;
}

.notification-bar-google-search .btn-google-search {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: linear-gradient(135deg, #4285F4 0%, #34A853 50%, #FBBC05 100%);
    color: #fff;
    border: none;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(66, 133, 244, 0.3);
}

.notification-bar-google-search .btn-google-search:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(66, 133, 244, 0.4);
    color: #fff;
    text-decoration: none;
}

.notification-bar-google-search .btn-google-search:active {
    transform: translateY(0);
}

.notification-bar-google-search .btn-google-search i {
    font-size: 13px;
}

.notification-bar-google-search .btn-google-search span {
    white-space: nowrap;
}

@media (max-width: 576px) {
    .notification-bar-google-search .notification-bar-inner {
        flex-direction: row;
        align-items: center;
        border-radius: 0;
        padding: 8px 10px;
    }

    .notification-bar-google-search .notification-bar-text {
        font-size: 12px;
        white-space: normal;
        line-height: 1.5;
    }

    .notification-bar-google-search .notification-bar-text strong {
        font-size: 13px;
    }

    .notification-bar-google-search .highlight-brand {
        font-size: 12px;
        padding: 2px 6px;
    }

    .notification-bar-google-search .notification-bar-actions {
        width: auto;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 4px;
    }

    .notification-bar-google-search .btn-google-search {
        padding: 5px 10px;
        font-size: 11px;
    }

    .notification-bar-google-search .btn-google-search span {
        display: none;
    }

    .notification-bar-google-search .btn-google-search i {
        margin: 0;
    }
}

@media (max-width: 768px) {
    .job-details-modern .ai-summary-card {
        padding: 20px;
        margin-bottom: 20px
    }

    .job-details-modern .ai-summary-text p {
        font-size: 14px;
        padding-left: 0
    }

    .job-details-modern .ai-summary-text .quote-icon {
        display: none
    }

    .job-details-modern .key-points-grid {
        grid-template-columns:1fr;
        gap: 10px
    }

    .job-details-modern .key-point-item {
        padding: 10px
    }

    .job-details-modern .key-point-item span {
        font-size: 13px
    }

    .job-details-modern .skills-tags-wrap {
        gap: 8px
    }

    .job-details-modern .skill-tag {
        padding: 8px 12px;
        font-size: 12px
    }

    .job-details-modern .benefits-list {
        grid-template-columns:1fr;
        gap: 10px
    }

    .job-details-modern .benefit-item {
        padding: 10px 12px
    }

    .job-details-modern .benefit-item span {
        font-size: 13px
    }
}

.job-details-modern .job-hero-header {
    background: linear-gradient(135deg, #F8FAFF 0%, #EFF2FB 100%);
    border-bottom: 2px solid #E0E6F7;
    padding: 40px 0 0;
    margin-bottom: 40px
}

.job-details-modern .hero-content {
    max-width: 1000px
}

.job-details-modern .hero-layout {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px
}

.job-details-modern .hero-info {
    flex: 1
}

.job-details-modern .hero-title {
    font-size: 32px;
    font-weight: 700;
    color: #05264E;
    margin-bottom: 12px;
    line-height: 1.3
}

.job-details-modern .hero-company-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 15px
}

.job-details-modern .hero-actions {
    display: none
}

@media (min-width: 769px) {
    .job-actions-sticky-bar {
        position: fixed;
        top: 87px;
        left: 0;
        right: 0;
        z-index: 998;
        background: rgb(255 255 255 / .98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 8px 0;
        margin: 0;
        border-bottom: 2px solid #E5E7EB;
        box-shadow: 0 4px 20px rgb(60 101 245 / .1)
    }

    .job-actions-sticky-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px
    }

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

    .btn-sticky-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 14px;
        border: 1px solid #E5E7EB;
        border-radius: 8px;
        background: #fff;
        color: #66789C;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s ease;
        cursor: pointer;
        white-space: nowrap
    }

    .btn-sticky-action:hover {
        background: #F8FAFF;
        border-color: #3C65F5;
        color: #3C65F5;
        transform: translateY(-1px)
    }

    .btn-sticky-action i {
        font-size: 14px
    }

    .btn-sticky-action .btn-label {
        font-size: 12px
    }

    .btn-sticky-action.btn-apply-action {
        background: #3C65F5;
        color: #fff;
        border-color: #3C65F5
    }

    .btn-sticky-action.btn-apply-action:hover {
        background: #2563EB;
        border-color: #2563EB;
        color: #fff
    }

    .btn-sticky-action.bookmark-toggle:hover {
        background: #FEF3C7;
        border-color: #FCD34D;
        color: #D97706
    }

    .btn-sticky-action.bookmark-toggle.active {
        background: #F59E0B;
        color: #fff;
        border-color: #F59E0B
    }

    .btn-sticky-action.bookmark-toggle.active i, .btn-sticky-action.bookmark-toggle.active .btn-label {
        color: #fff
    }

    .btn-sticky-action.applied-toggle:hover {
        background: #D1FAE5;
        border-color: #6EE7B7;
        color: #059669
    }

    .btn-sticky-action.applied-toggle.active {
        background: #3AAB67;
        color: #fff;
        border-color: #3AAB67
    }

    .btn-sticky-action.applied-toggle.active i, .btn-sticky-action.applied-toggle.active .btn-label {
        color: #fff
    }

    .btn-sticky-action.report-btn {
        border-color: #DC2626;
        color: #DC2626
    }

    .btn-sticky-action.report-btn:hover {
        background: #DC2626;
        color: #fff;
        border-color: #DC2626
    }

    .btn-sticky-action.share-btn {
        border-color: #3C65F5;
        color: #3C65F5
    }

    .btn-sticky-action.share-btn:hover {
        background: #3C65F5;
        color: #fff;
        border-color: #3C65F5
    }
}

@media (max-width: 768px) {
    .job-details-modern .hero-actions {
        display: inline-flex
    }

    .job-actions-sticky-bar {
        display: none !important
    }
}

.job-details-modern .btn-hero-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: #fff0;
    border-radius: 6px;
    color: #66789C;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600
}

.job-details-modern .btn-hero-action i {
    font-size: 15px
}

.job-details-modern .btn-hero-action .btn-label {
    font-size: 13px
}

.job-details-modern .btn-hero-action:hover {
    background: #F8FAFF
}

.job-details-modern .btn-hero-action.bookmark-toggle:hover {
    background: #FEF3C7;
    color: #F59E0B
}

.job-details-modern .btn-hero-action.bookmark-toggle.active {
    background: #F59E0B;
    color: #fff
}

.job-details-modern .btn-hero-action.bookmark-toggle.active i, .job-details-modern .btn-hero-action.bookmark-toggle.active .btn-label {
    color: #fff
}

.job-details-modern .btn-hero-action.bookmark-toggle.active:hover {
    background: #D97706
}

.job-details-modern .btn-hero-action.applied-toggle:hover {
    background: #D1FAE5;
    color: #3AAB67
}

.job-details-modern .btn-hero-action.applied-toggle.active {
    background: #3AAB67;
    color: #fff
}

.job-details-modern .btn-hero-action.applied-toggle.active i, .job-details-modern .btn-hero-action.applied-toggle.active .btn-label {
    color: #fff
}

.job-details-modern .btn-hero-action.report-btn {
    background: #fff;
    border: 2px solid #DC2626;
    color: #DC2626
}

.job-details-modern .btn-hero-action.report-btn i, .job-details-modern .btn-hero-action.report-btn .btn-label {
    color: #DC2626
}

.job-details-modern .btn-hero-action.report-btn:hover {
    background: #DC2626;
    color: #fff;
    box-shadow: 0 4px 12px rgb(220 38 38 / .4)
}

.job-details-modern .btn-hero-action.report-btn:hover i, .job-details-modern .btn-hero-action.report-btn:hover .btn-label {
    color: #fff
}

.job-details-modern .btn-hero-action.share-btn {
    border-color: #3C65F5;
    color: #3C65F5
}

.job-details-modern .btn-hero-action.share-btn:hover {
    background: #3C65F5;
    color: #fff;
    border-color: #3C65F5
}

.job-details-modern .btn-hero-action.share-btn:hover i, .job-details-modern .btn-hero-action.share-btn:hover .btn-label {
    color: #fff
}

.job-details-modern .btn-hero-action.btn-apply-action {
    background: linear-gradient(135deg, #3C65F5 0%, #2563EB 100%);
    color: #fff;
    font-weight: 700
}

.job-details-modern .btn-hero-action.btn-apply-action:hover {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: #fff;
    transform: scale(1.05)
}

.job-details-modern .hero-company-logo {
    width: 115px;
    height: 115px;
    border-radius: 16px;
    object-fit: cover;
    background: #fff;
    border: 2px solid #E0E6F7;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgb(0 0 0 / .08)
}

.job-details-modern .hero-company-placeholder {
    width: 115px;
    height: 115px;
    background: linear-gradient(135deg, #3C65F5 0%, #05264E 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 52px;
    font-weight: 700;
    text-transform: uppercase;
    border: 2px solid #E0E6F7;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgb(60 101 245 / .2)
}

.job-details-modern .hero-company-name {
    font-size: 18px;
    font-weight: 700;
    color: #05264E;
    text-decoration: none
}

.job-details-modern .hero-company-name:hover {
    color: #3C65F5
}

.job-details-modern .hero-location-text, .job-details-modern .hero-time-text {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #66789C;
    font-size: 14px
}

.job-details-modern .hero-location-text i, .job-details-modern .hero-time-text i {
    font-size: 12px;
    color: #3C65F5
}

.job-details-modern .hero-company-line .separator {
    color: #E0E6F7;
    font-weight: 700
}

.job-details-modern .hero-benefits-line {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    flex-wrap: wrap
}

.job-details-modern .hero-benefit-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 0;
    transition: all 0.3s ease
}

.job-details-modern .hero-benefit-inline i {
    font-size: 15px
}

.job-details-modern .hero-benefit-inline.visa-inline {
    color: #3B82F6
}

.job-details-modern .hero-benefit-inline.relocation-inline {
    color: #F59E0B
}

.job-details-modern .hero-benefit-inline.remote-inline {
    color: #10B981
}

.job-details-modern .job-expired-alert {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    border: 2px solid #EF4444;
    border-left: 6px solid #EF4444;
    border-radius: 12px;
    padding: 20px 24px;
    margin: 24px auto;
    box-shadow: 0 4px 16px rgb(239 68 68 / .15)
}

.job-details-modern .job-expired-alert .alert-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: #EF4444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.job-details-modern .job-expired-alert .alert-icon i {
    font-size: 24px;
    color: #fff
}

.job-details-modern .job-expired-alert .alert-content {
    flex: 1
}

.job-details-modern .job-expired-alert .alert-title {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #991B1B;
    margin-bottom: 6px;
    line-height: 1.3
}

.job-details-modern .job-expired-alert .alert-message {
    font-size: 14px;
    color: #DC2626;
    margin: 0;
    line-height: 1.5
}

.job-details-modern .action-buttons-card {
    padding: 20px !important;
    background: linear-gradient(135deg, #3C65F5 0%, #05264E 100%) !important;
    border: none !important
}

.job-details-modern .btn-apply-sidebar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    background: #fff;
    border: none;
    border-radius: 8px;
    color: #3C65F5;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(.4, 0, .2, 1);
    margin-bottom: 12px;
    position: relative;
    overflow: hidden
}

.job-details-modern .btn-apply-sidebar::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgb(60 101 245 / .1);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s
}

.job-details-modern .btn-apply-sidebar:hover::before {
    width: 300px;
    height: 300px
}

.job-details-modern .btn-apply-sidebar:hover {
    background: #fff;
    color: #05264E;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgb(60 101 245 / .25), 0 4px 12px rgb(60 101 245 / .15), inset 0 0 0 2px rgb(60 101 245 / .2)
}

.job-details-modern .btn-apply-sidebar i {
    font-size: 16px;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease
}

.job-details-modern .btn-apply-sidebar:hover i {
    transform: translateX(3px)
}

.job-details-modern .sidebar-actions-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 8px
}

.job-details-modern .btn-sidebar-action {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer
}

.job-details-modern .btn-sidebar-action i {
    font-size: 16px;
    flex-shrink: 0;
    line-height: 1
}

.job-details-modern .btn-sidebar-action span {
    font-size: 11px;
    text-align: left;
    line-height: 1.3;
    flex: 1
}

.job-details-modern .btn-sidebar-action:hover {
    background: #F9FAFB;
    border-color: #E5E7EB
}

.job-details-modern .btn-sidebar-action.bookmark-toggle {
    color: #6B7280;
    border: 1px solid #E5E7EB
}

.job-details-modern .btn-sidebar-action.bookmark-toggle:hover {
    color: #D97706;
    background: #FEF3C7;
    border-color: #FCD34D
}

.job-details-modern .btn-sidebar-action.bookmark-toggle.active {
    background: #F59E0B;
    color: #fff;
    border-color: #F59E0B
}

.job-details-modern .btn-sidebar-action.bookmark-toggle.active i, .job-details-modern .btn-sidebar-action.bookmark-toggle.active span {
    color: #fff
}

.job-details-modern .btn-sidebar-action.applied-toggle {
    color: #6B7280;

}

.job-details-modern .btn-sidebar-action.applied-toggle:hover {
    color: #059669;
    background: #D1FAE5;
    border-color: #6EE7B7
}

.job-details-modern .btn-sidebar-action.applied-toggle.active {
    background: #3AAB67;
    color: #fff
}

.job-details-modern .btn-sidebar-action.applied-toggle.active i, .job-details-modern .btn-sidebar-action.applied-toggle.active span {
    color: #fff
}

.job-details-modern .btn-sidebar-action.report-btn {
    background: #fff;
    border: 2px solid #DC2626;
    color: #DC2626
}

.job-details-modern .btn-sidebar-action.report-btn i, .job-details-modern .btn-sidebar-action.report-btn span {
    color: #DC2626
}

.job-details-modern .btn-sidebar-action.report-btn:hover {
    background: #DC2626;
    color: #fff;
    box-shadow: 0 4px 12px rgb(220 38 38 / .4)
}

.job-details-modern .btn-sidebar-action.report-btn:hover i, .job-details-modern .btn-sidebar-action.report-btn:hover span {
    color: #fff
}

.job-details-modern .actions-card-compact {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 16px !important
}

.job-details-modern .btn-action-compact {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
    border: 1px solid #E0E6F7;
    background: #fff;
    border-radius: 8px;
    color: #66789C;
    transition: all 0.3s ease;
    cursor: pointer
}

.job-details-modern .btn-action-compact i {
    font-size: 20px
}

.job-details-modern .btn-action-compact .btn-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px
}

.job-details-modern .btn-action-compact:hover {
    border-color: #3C65F5;
    background: #EFF2FB;
    color: #3C65F5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(60 101 245 / .15)
}

.job-details-modern .btn-action-compact.bookmark-toggle:hover {
    border-color: #F59E0B;
    background: #FEF3C7;
    color: #F59E0B
}

.job-details-modern .btn-action-compact.bookmark-toggle.active {
    border-color: #F59E0B;
    background: #F59E0B;
    color: #fff
}

.job-details-modern .btn-action-compact.applied-toggle:hover {
    border-color: #3AAB67;
    background: #D1FAE5;
    color: #3AAB67
}

.job-details-modern .btn-action-compact.applied-toggle.active {
    border-color: #3AAB67;
    background: #3AAB67;
    color: #fff
}

.job-details-modern .btn-action-compact.report-btn:hover {
    border-color: #EF4444;
    background: #FEF2F2;
    color: #EF4444
}

.job-details-modern .share-bottom-section {
    background: #fff;
    border: 1px solid #E0E6F7;
    border-radius: 12px;
    padding: 24px;
    margin-top: 30px
}

.job-details-modern .share-label-large {
    font-size: 16px;
    font-weight: 700;
    color: #05264E;
    margin-bottom: 16px
}

.job-details-modern .share-buttons-large {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.job-details-modern .share-btn-large {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: 1px solid #E0E6F7;
    background: #fff;
    border-radius: 8px;
    color: #66789C;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer
}

.job-details-modern .share-btn-large i {
    font-size: 16px
}

.job-details-modern .share-btn-large span {
    color: inherit
}

.job-details-modern .share-btn-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(0 0 0 / .1);
    text-decoration: none
}

.job-details-modern .share-btn-large.facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
    color: white !important
}

.job-details-modern .share-btn-large.facebook:hover span {
    color: white !important
}

.job-details-modern .share-btn-large.twitter:hover {
    background: #1da1f2;
    border-color: #1da1f2;
    color: white !important
}

.job-details-modern .share-btn-large.twitter:hover span {
    color: white !important
}

.job-details-modern .share-btn-large.telegram:hover {
    background: #08c;
    border-color: #08c;
    color: white !important
}

.job-details-modern .share-btn-large.telegram:hover span {
    color: white !important
}

.job-details-modern .share-btn-large.linkedin:hover {
    background: #0077b5;
    border-color: #0077b5;
    color: white !important
}

.job-details-modern .share-btn-large.linkedin:hover span {
    color: white !important
}

.job-details-modern .share-btn-large.copy:hover {
    background: #3C65F5;
    border-color: #3C65F5;
    color: white !important
}

.job-details-modern .share-btn-large.copy:hover span {
    color: white !important
}

.job-details-modern .share-btn-large.native-share {
    background: linear-gradient(135deg, #3C65F5 0%, #2563EB 100%);
    border-color: #3C65F5;
    color: #fff
}

.job-details-modern .share-btn-large.native-share i, .job-details-modern .share-btn-large.native-share span {
    color: #fff
}

.job-details-modern .share-btn-large.native-share:hover {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    border-color: #1D4ED8;
    color: white !important;
    box-shadow: 0 6px 20px rgb(60 101 245 / .4)
}

.job-details-modern .share-btn-large.native-share:hover span {
    color: white !important
}

.job-details-modern .toast-notification {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #3C65F5;
    color: #fff;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgb(0 0 0 / .2);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    z-index: 9999;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease
}

.job-details-modern .toast-notification.show {
    opacity: 1;
    transform: translateY(0)
}

.job-details-modern .toast-notification i {
    font-size: 18px
}

.job-details-modern .content-card {
    background: #fff;
    border: 1px solid #E0E6F7;
    border-radius: 12px;
    padding: 28px;
    margin-bottom: 24px
}

.job-details-modern .content-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #05264E;
    margin-bottom: 20px;
    display: flex;
    align-items: center
}

.job-details-modern .content-card-title i {
    color: #3C65F5
}

.job-details-modern .content-single {
    font-size: 15px;
    line-height: 1.8;
    color: #4F5E64
}

.job-details-modern .content-single h3, .job-details-modern .content-single h4, .job-details-modern .content-single h5 {
    color: #05264E;
    font-weight: 700;
    margin: 24px 0 12px
}

.job-details-modern .content-single ul, .job-details-modern .content-single ol {
    padding-left: 24px;
    margin: 16px 0
}

.job-details-modern .content-single li {
    margin-bottom: 8px
}

.job-details-modern .content-single p {
    margin-bottom: 16px
}

.job-details-modern .content-single strong {
    color: #05264E;
    font-weight: 600
}

.job-details-modern .highlight {
    background: #FEF3C7;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600
}

.job-details-modern .skills-modern-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.job-details-modern .skill-modern-badge {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    background: #F8FAFF;
    border: 1px solid #E0E6F7;
    border-radius: 6px;
    color: #4F5E64;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease
}

.job-details-modern .skill-modern-badge:hover {
    background: #3C65F5;
    border-color: #3C65F5;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(60 101 245 / .25)
}

.job-details-modern .apply-card {
    background: linear-gradient(135deg, #3C65F5 0%, #05264E 100%);
    border-radius: 12px;
    padding: 28px;
    margin-top: 30px
}

.job-details-modern .apply-card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px
}

.job-details-modern .apply-text h4 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px
}

.job-details-modern .apply-text p {
    font-size: 14px;
    color: rgb(255 255 255 / .8);
    margin: 0
}

.job-details-modern .btn-apply-large {
    background: #fff;
    color: #3C65F5;
    border: none;
    padding: 14px 28px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    transition: all 0.4s cubic-bezier(.4, 0, .2, 1);
    position: relative;
    overflow: hidden
}

.job-details-modern .btn-apply-large::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgb(60 101 245 / .1);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s
}

.job-details-modern .btn-apply-large:hover::before {
    width: 300px;
    height: 300px
}

.job-details-modern .btn-apply-large:hover {
    background: #fff;
    color: #05264E;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgb(60 101 245 / .25), 0 4px 12px rgb(60 101 245 / .15), inset 0 0 0 2px rgb(60 101 245 / .2)
}

.job-details-modern .btn-apply-large i {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease
}

.job-details-modern .btn-apply-large:hover i {
    transform: translateX(3px)
}

.job-details-modern .sidebar-card-modern {
    background: #fff;
    border: 1px solid #E0E6F7;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px
}

.job-details-modern .sidebar-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #05264E;
    margin-bottom: 18px;
    display: flex;
    align-items: center
}

.job-details-modern .sidebar-card-title i {
    color: #3C65F5
}

.job-details-modern .overview-list-simple {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.job-details-modern .overview-item-simple {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #F2F6FD
}

.job-details-modern .overview-item-simple:last-child {
    border-bottom: none
}

.job-details-modern .overview-label-simple {
    font-size: 13px;
    color: #66789C;
    font-weight: 500
}

.job-details-modern .overview-value-simple {
    font-size: 14px;
    color: #05264E;
    font-weight: 700;
    text-align: right
}

.job-details-modern .overview-value-simple a {
    color: #3C65F5;
    text-decoration: none
}

.job-details-modern .overview-value-simple a:hover {
    text-decoration: underline
}

.job-details-modern .benefits-card {
    background: linear-gradient(135deg, #F8FAFF 0%, #EFF2FB 100%);
    border: 2px solid #3C65F5
}

.job-details-modern .benefits-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.job-details-modern .benefit-sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #E0E6F7
}

.job-details-modern .benefit-icon {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    flex-shrink: 0
}

.job-details-modern .benefit-icon.remote {
    background: linear-gradient(135deg, #3AAB67 0%, #2e8b54 100%)
}

.job-details-modern .benefit-icon.visa {
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%)
}

.job-details-modern .benefit-icon.relocation {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%)
}

.job-details-modern .benefit-sidebar-item span {
    font-size: 14px;
    font-weight: 600;
    color: #05264E
}

.job-details-modern .skills-sidebar-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.job-details-modern .skill-sidebar-tag {
    display: inline-block;
    padding: 8px 14px;
    background: #F8FAFF;
    border: 1px solid #E0E6F7;
    border-radius: 6px;
    color: #4F5E64;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease
}

.job-details-modern .skill-sidebar-tag:hover {
    background: #3C65F5;
    border-color: #3C65F5;
    color: #fff;
    transform: translateY(-1px)
}

.job-details-modern .industries-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.job-details-modern .industry-sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #F8FAFF;
    border-radius: 6px;
    color: #4F5E64;
    font-size: 14px;
    font-weight: 500
}

.job-details-modern .industry-sidebar-item i {
    font-size: 10px;
    color: #3C65F5
}

@media (max-width: 991px) {
    .job-details-modern .hero-title {
        font-size: 26px
    }

    .job-details-modern .hero-company-name {
        font-size: 18px
    }

    .job-details-modern .hero-actions {
        flex-wrap: wrap
    }

    .job-details-modern .apply-card-content {
        flex-direction: column;
        text-align: center
    }

    .job-details-modern .btn-apply-large {
        width: 100%;
        justify-content: center
    }

    .job-details-modern .share-buttons-large {
        justify-content: center
    }
}

@media (max-width: 768px) {
    .job-details-modern .job-hero-header {
        padding: 24px 0
    }

    .job-details-modern .hero-layout {
        gap: 12px
    }

    .job-details-modern .hero-title {
        font-size: 20px;
        margin-bottom: 10px
    }

    .job-details-modern .hero-company-line {
        font-size: 13px;
        gap: 6px
    }

    .job-details-modern .hero-benefits-line {
        gap: 10px;
        margin-top: 8px
    }

    .job-details-modern .hero-benefit-inline {
        font-size: 13px;
        padding: 3px 0;
        gap: 5px
    }

    .job-details-modern .hero-benefit-inline i {
        font-size: 13px
    }

    .job-details-modern .hero-actions {
        margin-top: 14px
    }

    .job-details-modern .btn-hero-action {
        padding: 7px 12px;
        font-size: 12px;
        gap: 5px
    }

    .job-details-modern .btn-hero-action i {
        font-size: 13px
    }

    .job-details-modern .btn-hero-action .btn-label {
        font-size: 11px
    }

    .job-details-modern .hero-company-logo, .job-details-modern .hero-company-placeholder {
        width: 72px;
        height: 72px;
        font-size: 28px
    }

    .job-details-modern .hero-company-name {
        font-size: 16px
    }

    .job-details-modern .hero-location-text, .job-details-modern .hero-time-text {
        font-size: 13px
    }

    .job-details-modern .content-card {
        padding: 20px
    }

    .job-details-modern .share-btn-large {
        flex: 1;
        min-width: 140px;
        justify-content: center
    }

    .job-details-modern .job-expired-alert {
        padding: 16px 20px;
        gap: 12px;
        margin: 20px auto
    }

    .job-details-modern .job-expired-alert .alert-icon {
        width: 40px;
        height: 40px;
        min-width: 40px
    }

    .job-details-modern .job-expired-alert .alert-icon i {
        font-size: 20px
    }

    .job-details-modern .job-expired-alert .alert-title {
        font-size: 16px
    }

    .job-details-modern .job-expired-alert .alert-message {
        font-size: 13px
    }

    .job-details-modern .hero-actions {
        position: fixed;
        top: 71px;
        left: 0;
        right: 0;
        z-index: 998;
        background: rgb(255 255 255 / .98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 8px 12px;
        margin: 0;
        border-radius: 0;
        border: none;
        border-bottom: 2px solid #E0E6F7;
        box-shadow: 0 4px 20px rgb(60 101 245 / .1);
        justify-content: center;
        gap: 6px;
        transform: translateY(-150%);
        transition: transform 0.3s ease, opacity 0.3s ease;
        opacity: 0;
        visibility: hidden
    }

    .job-details-modern .hero-actions.sticky-visible {
        transform: translateY(0);
        opacity: 1;
        visibility: visible
    }

    .job-details-modern .btn-hero-action {
        display: inline-flex !important;
        justify-content: center;
        padding: 6px 7px !important;
        font-size: 11px !important;
        gap: 4px !important;
        white-space: nowrap;
        border: 1px solid #E5E7EB !important;
        border-radius: 8px !important;
        background: #fff !important;
        color: #66789C !important;
        font-weight: 600 !important;
        transition: all 0.2s ease !important
    }

    .job-details-modern .btn-hero-action:hover {
        background: #F8FAFF !important;
        border-color: #3C65F5 !important;
        color: #3C65F5 !important;
        transform: translateY(-1px)
    }

    .job-details-modern .btn-hero-action i {
        font-size: 12px !important
    }

    .job-details-modern .btn-hero-action .btn-label {
        font-size: 10px !important
    }

    .job-details-modern .btn-hero-action.btn-apply-action {
        background: #3C65F5 !important;
        color: #fff !important;
        border-color: #3C65F5 !important
    }

    .job-details-modern .btn-hero-action.btn-apply-action:hover {
        background: #2563EB !important;
        border-color: #2563EB !important;
        color: #fff !important
    }

    .job-details-modern .btn-hero-action.bookmark-toggle:hover {
        background: #FEF3C7 !important;
        border-color: #FCD34D !important;
        color: #D97706 !important
    }

    .job-details-modern .btn-hero-action.bookmark-toggle.active {
        background: #F59E0B !important;
        color: #fff !important;
        border-color: #F59E0B !important
    }

    .job-details-modern .btn-hero-action.bookmark-toggle.active i,
    .job-details-modern .btn-hero-action.bookmark-toggle.active .btn-label {
        color: #fff !important
    }

    .job-details-modern .btn-hero-action.applied-toggle:hover {
        background: #D1FAE5 !important;
        border-color: #6EE7B7 !important;
        color: #059669 !important
    }

    .job-details-modern .btn-hero-action.applied-toggle.active {
        background: #3AAB67 !important;
        color: #fff !important;
        border-color: #3AAB67 !important
    }

    .job-details-modern .btn-hero-action.applied-toggle.active i,
    .job-details-modern .btn-hero-action.applied-toggle.active .btn-label {
        color: #fff !important
    }

    .job-details-modern .btn-hero-action.report-btn {
        border-color: #DC2626 !important;
        color: #DC2626 !important
    }

    .job-details-modern .btn-hero-action.report-btn:hover {
        background: #DC2626 !important;
        color: #fff !important;
        border-color: #DC2626 !important
    }

    .job-details-modern .btn-hero-action.share-btn {
        border-color: #3C65F5 !important;
        color: #3C65F5 !important
    }

    .job-details-modern .btn-hero-action.share-btn:hover {
        background: #3C65F5 !important;
        color: #fff !important;
        border-color: #3C65F5 !important
    }

    .job-details-modern .action-buttons-card {
        display: none
    }

    .job-details-modern .sidebar-actions-grid {
        display: none
    }
}

.company-card-modern {
    background: #fff;
    border: 2px solid #E0E6F7;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
    height: 100%
}

.company-card-modern:hover {
    border-color: #3C65F5;
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgb(60 101 245 / .15)
}

.company-card-link {
    display: flex;
    flex-direction: column;
    padding: 24px;
    text-decoration: none;
    color: inherit;
    height: 100%
}

.company-logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    min-height: 80px
}

.company-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 12px;
    transition: transform 0.3s ease
}

.company-card-modern:hover .company-logo {
    transform: scale(1.1)
}

.company-logo-placeholder {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3C65F5 0%, #6366F1 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    text-transform: uppercase
}

.company-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1
}

.company-card-name {
    font-size: 18px;
    font-weight: 700;
    color: #05264E;
    margin: 0;
    text-align: center;
    line-height: 1.3
}

.company-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid #E0E9FF;
    border-bottom: 1px solid #E0E9FF
}

.company-location, .company-size, .company-industry {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #66789C
}

.company-location i, .company-size i, .company-industry i {
    font-size: 12px;
    color: #3C65F5;
    width: 14px
}

.company-jobs-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #EFF4FF 0%, #E0E9FF 100%);
    border-radius: 10px;
    margin-top: auto;
    transition: all 0.3s ease
}

.company-card-modern:hover .company-jobs-badge {
    background: linear-gradient(135deg, #3C65F5 0%, #2563EB 100%);
    color: #fff
}

.company-jobs-badge i {
    font-size: 14px;
    color: #3C65F5;
    transition: color 0.3s ease
}

.company-card-modern:hover .company-jobs-badge i {
    color: #fff
}

.company-jobs-badge strong {
    font-size: 20px;
    font-weight: 800;
    color: #3C65F5;
    transition: color 0.3s ease
}

.company-card-modern:hover .company-jobs-badge strong {
    color: #fff
}

.company-jobs-badge span {
    font-size: 13px;
    font-weight: 600;
    color: #66789C;
    transition: color 0.3s ease
}

.company-card-modern:hover .company-jobs-badge span {
    color: #fff
}

@media (max-width: 768px) {
    .company-card-link {
        padding: 20px
    }

    .company-logo-wrapper {
        min-height: 70px
    }

    .company-logo, .company-logo-placeholder {
        width: 70px;
        height: 70px
    }

    .company-logo-placeholder {
        font-size: 24px
    }

    .company-card-name {
        font-size: 16px
    }

    .company-meta {
        gap: 6px;
        padding: 10px 0
    }

    .company-location, .company-size, .company-industry {
        font-size: 12px
    }

    .company-jobs-badge {
        padding: 10px 14px
    }

    .company-jobs-badge strong {
        font-size: 18px
    }

    .company-jobs-badge span {
        font-size: 12px
    }
}

.company-job-card-link {
    text-decoration: none;
    color: inherit;
    display: block
}

.company-job-card-modern {
    background: #fff;
    border: 1px solid #E0E6F7;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: all 0.3s ease
}

.company-job-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #3C65F5 0%, #2563EB 100%);
    border-radius: 8px 0 0 8px;
    opacity: 0;
    transition: opacity 0.3s ease
}

.company-job-card-link:hover .company-job-card-modern {
    border-color: #B4C0E0;
    box-shadow: 0 10px 20px -5px rgb(10 42 105 / .06);
    transform: translateY(-2px)
}

.company-job-card-link:hover .company-job-card-modern::before {
    opacity: 1
}

.company-job-card-link:hover .job-title-modern {
    color: #3C65F5
}

.applied-status-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #fff;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgb(16 185 129 / .3);
    z-index: 2
}

.applied-status-badge i {
    font-size: 9px
}

.job-header-modern {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.job-title-modern {
    font-size: 18px;
    font-weight: 700;
    color: #05264E;
    margin: 0;
    line-height: 1.4;
    cursor: pointer;
    transition: all 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.job-meta-modern {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #66789C;
    font-weight: 500
}

.meta-item i {
    font-size: 12px;
    color: #A0ABB8
}

.job-info-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: #F8FAFF;
    border: 1px solid #E0E6F7;
    border-radius: 4px;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 120px
}

.info-item:hover {
    border-color: #B4C0E0;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -5px rgb(10 42 105 / .06)
}

.info-icon {
    display: none
}

.info-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0
}

.info-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    color: #66789C;
    text-transform: uppercase;
    letter-spacing: .5px
}

.info-label i {
    font-size: 10px;
    color: #3C65F5
}

.info-value {
    font-size: 13px;
    font-weight: 600;
    color: #05264E;
    line-height: 1.3
}

.benefits-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.benefit-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid;
    transition: all 0.3s ease;
    cursor: default;
    white-space: nowrap;
    flex: 1;
    min-width: 0
}

.benefit-pill i {
    font-size: 11px
}

.benefit-pill.remote.active {
    background: #3AAB67;
    border-color: #3AAB67;
    color: #fff
}

.benefit-pill.remote.active:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgb(58 171 103 / .3);
    background: #2e8b54
}

.benefit-pill.visa.active {
    background: #3C65F5;
    border-color: #3C65F5;
    color: #fff
}

.benefit-pill.visa.active:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgb(60 101 245 / .3);
    background: #05264E
}

.benefit-pill.relocation.active {
    background: #F58A3C;
    border-color: #F58A3C;
    color: #fff
}

.benefit-pill.relocation.active:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgb(245 138 60 / .3);
    background: #d77530
}

.benefit-pill.inactive {
    background: #F8FAFF;
    border-color: #E0E6F7;
    color: #A0ABB8;
    border-style: dashed
}

@media (max-width: 768px) {
    .company-job-card-modern {
        padding: 16px;
        gap: 12px
    }

    .job-title-modern {
        font-size: 16px
    }

    .job-info-grid {
        display: flex;
        flex-direction: row;
        gap: 8px;
        flex-wrap: wrap
    }

    .info-item {
        flex: 1;
        min-width: calc(50% - 4px)
    }

    .benefits-pills {
        gap: 8px
    }

    .benefit-pill {
        font-size: 11px;
        padding: 7px 10px;
        flex: 1
    }
}

@media (max-width: 576px) {
    .company-job-card-modern {
        padding: 14px;
        gap: 10px
    }

    .job-title-modern {
        font-size: 15px
    }

    .job-info-grid {
        display: flex;
        flex-direction: row;
        gap: 6px;
        flex-wrap: wrap
    }

    .info-item {
        flex: 1;
        min-width: calc(50% - 3px);
        padding: 7px 8px;
        gap: 3px
    }

    .info-label {
        font-size: 8px;
        letter-spacing: .3px
    }

    .info-label i {
        font-size: 10px
    }

    .info-value {
        font-size: 11px
    }

    .benefits-pills {
        gap: 6px;
        flex-wrap: wrap
    }

    .benefit-pill {
        font-size: 9px;
        padding: 6px 6px;
        gap: 3px;
        flex: 1;
        min-width: calc(33.333% - 4px)
    }

    .benefit-pill i {
        font-size: 9px
    }

    .applied-status-badge {
        top: 12px;
        right: 12px;
        padding: 3px 8px;
        font-size: 9px
    }

    .applied-status-badge i {
        font-size: 8px
    }
}

.companies-hero-header {
    background: linear-gradient(135deg, #F8FAFF 0%, #EFF2FB 100%);
    padding: 28px 0 32px;
    margin-bottom: 32px;
    border-bottom: 1px solid #E0E6F7
}

.companies-hero-content {
    text-align: center;
    max-width: 750px;
    margin: 0 auto
}

.companies-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: linear-gradient(135deg, #3C65F5 0%, #05264E 100%);
    color: #fff;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgb(60 101 245 / .2)
}

.companies-hero-badge i {
    font-size: 13px
}

.companies-hero-title {
    font-size: 32px;
    font-weight: 800;
    color: #05264E;
    margin-bottom: 10px;
    line-height: 1.25;
    letter-spacing: -.02em
}

.companies-hero-description {
    font-size: 15px;
    color: #66789C;
    line-height: 1.5;
    margin: 0;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto
}

.companies-search-section {
    padding: 0 50px;
    background: #fff;
    position: relative;
    z-index: 10
}

.companies-search-wrapper {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 10
}

.companies-search-form {
    width: 100%
}

.search-bar-modern {
    display: grid;
    grid-template-columns:1.8fr 1fr auto;
    gap: 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgb(0 0 0 / .05), 0 10px 40px rgb(60 101 245 / .08);
    border: 2px solid #E0E9FF;
    overflow: visible;
    transition: all 0.3s ease;
    position: relative
}

.search-bar-modern:hover {
    border-color: #C7D7FE;
    box-shadow: 0 4px 12px rgb(60 101 245 / .12), 0 15px 50px rgb(60 101 245 / .1)
}

.search-input-group-modern {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 24px;
    border-right: 2px solid #E0E9FF;
    z-index: 1
}

.search-location-group-modern {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 24px;
    border-right: 2px solid #E0E9FF;
    z-index: 100
}

.search-icon-modern {
    color: #66789C;
    font-size: 20px;
    margin-right: 14px;
    transition: all 0.3s ease;
    flex-shrink: 0
}

.search-input-group-modern:focus-within .search-icon-modern, .search-location-group-modern:focus-within .search-icon-modern {
    color: #3C65F5;
    transform: scale(1.15)
}

.search-input-modern {
    flex: 1;
    border: none;
    outline: none;
    background: #fff0;
    font-size: 17px;
    color: #05264E;
    font-weight: 600;
    height: 72px;
    padding-right: 40px
}

.search-input-modern::placeholder {
    color: #94A3B8;
    font-weight: 500
}

.search-select-modern {
    flex: 1;
    border: none;
    outline: none;
    background: #fff0;
    font-size: 17px;
    color: #05264E;
    font-weight: 600;
    height: 72px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L8 8.5L15 1.5' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    padding-right: 30px
}

.search-select-modern option {
    font-weight: 500
}

.clear-btn-modern {
    position: absolute;
    right: 20px;
    width: 30px;
    height: 30px;
    background: #F1F5F9;
    border: none;
    border-radius: 50%;
    color: #64748B;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease
}

.clear-btn-modern:hover {
    background: #EF4444;
    color: #fff;
    transform: rotate(90deg) scale(1.1)
}

.clear-btn-modern i {
    font-size: 13px
}

.search-submit-modern {
    padding: 0 36px;
    background: linear-gradient(135deg, #3C65F5 0%, #2563EB 100%);
    color: #fff;
    border: none;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    position: relative;
    z-index: 1
}

.search-submit-modern:hover {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%)
}

.search-submit-modern i {
    font-size: 17px;
    transition: transform 0.3s ease
}

.search-submit-modern:hover i {
    transform: scale(1.15)
}

.companies-listing-section {
    padding: 40px 0 80px;
    background: #FAFBFC;
    margin-top: 40px
}

.companies-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 16px 24px;
    background: #fff;
    border: 1px solid #E0E6F7;
    border-radius: 12px
}

.results-count i {
    font-size: 16px;
    color: #3C65F5
}

.results-count strong {
    color: #05264E;
    font-weight: 700
}

.companies-grid {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 40px
}

.companies-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    background: #fff;
    border: 2px dashed #E0E6F7;
    border-radius: 16px
}

.empty-icon i {
    font-size: 36px;
    color: #3C65F5
}

.companies-empty-state h3 {
    font-size: 24px;
    font-weight: 700;
    color: #05264E;
    margin-bottom: 12px
}

.companies-empty-state p {
    font-size: 16px;
    color: #66789C;
    margin: 0
}

.companies-pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px
}

.location-select-wrapper {
    position: relative;
    width: 100%
}

.location-select-trigger {
    width: 100%;
    border: none;
    outline: none;
    background: #fff0;
    font-size: 17px;
    color: #05264E;
    font-weight: 600;
    height: 72px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    transition: all 0.3s ease
}

.location-select-trigger i {
    color: #64748B;
    font-size: 12px;
    transition: transform 0.3s ease
}

.location-select-trigger.active i {
    transform: rotate(180deg)
}

.location-select-value {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.location-select-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border: 2px solid #E0E9FF;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgb(60 101 245 / .15);
    z-index: 10000;
    max-height: 400px;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.location-select-search {
    position: relative;
    padding: 16px;
    border-bottom: 2px solid #E0E9FF
}

.location-select-search i {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    color: #66789C;
    font-size: 16px;
    pointer-events: none
}

.location-select-search input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 2px solid #E0E9FF;
    border-radius: 8px;
    font-size: 15px;
    color: #05264E;
    outline: none;
    transition: all 0.3s ease
}

.location-select-search input:focus {
    border-color: #3C65F5
}

.location-select-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 8px
}

.location-select-item {
    padding: 12px 16px;
    cursor: pointer;
    border-radius: 8px;
    font-size: 15px;
    color: #05264E;
    transition: all 0.3s ease;
    margin-bottom: 4px
}

.location-select-item:hover {
    background: #F8FAFF
}

.location-select-item.selected {
    background: linear-gradient(135deg, #EFF4FF 0%, #E0E9FF 100%);
    color: #3C65F5;
    font-weight: 600
}

.location-select-item.hidden {
    display: none
}

@media (max-width: 1200px) {
    .companies-grid {
        grid-template-columns:repeat(3, 1fr)
    }
}

@media (max-width: 992px) {
    .companies-hero-title {
        font-size: 36px
    }

    .companies-hero-description {
        font-size: 16px
    }

    .companies-grid {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media (max-width: 768px) {
    .companies-hero-header {
        padding: 20px 0 24px;
        margin-bottom: 24px
    }

    .companies-hero-badge {
        font-size: 11px;
        padding: 5px 13px;
        gap: 5px;
        margin-bottom: 8px
    }

    .companies-hero-badge i {
        font-size: 12px
    }

    .companies-hero-title {
        font-size: 24px;
        margin-bottom: 8px
    }

    .companies-hero-description {
        font-size: 14px;
        line-height: 1.4
    }

    .search-bar-modern {
        grid-template-columns:1fr;
        border-radius: 12px
    }

    .search-input-group-modern, .search-location-group-modern {
        border-right: none;
        border-bottom: 2px solid #E0E9FF;
        padding: 0 20px
    }

    .search-input-modern, .search-select-modern {
        height: 60px;
        font-size: 16px
    }

    .search-submit-modern {
        height: 60px;
        justify-content: center;
        padding: 0 24px
    }

    .companies-grid {
        grid-template-columns:repeat(2, 1fr);
        gap: 20px
    }

    .companies-results-header {
        padding: 12px 16px
    }

    .location-select-trigger {
        height: 60px;
        font-size: 16px
    }

    .location-select-dropdown {
        max-height: 350px
    }

    .location-select-list {
        max-height: 250px
    }
}

@media (max-width: 576px) {
    .companies-hero-header {
        padding: 18px 0 20px;
        margin-bottom: 20px
    }

    .companies-hero-badge {
        font-size: 10px;
        padding: 4px 12px;
        gap: 4px;
        margin-bottom: 8px
    }

    .companies-hero-badge i {
        font-size: 11px
    }

    .companies-hero-title {
        font-size: 22px;
        margin-bottom: 6px;
        line-height: 1.3
    }

    .companies-hero-description {
        font-size: 13px;
        line-height: 1.4
    }

    .search-bar-modern {
        border-radius: 10px
    }

    .search-input-group-modern, .search-location-group-modern {
        padding: 0 18px
    }

    .search-icon-modern {
        font-size: 18px;
        margin-right: 12px
    }

    .search-input-modern, .search-select-modern {
        height: 56px;
        font-size: 15px;
        padding-right: 35px
    }

    .clear-btn-modern {
        width: 26px;
        height: 26px;
        right: 16px
    }

    .clear-btn-modern i {
        font-size: 11px
    }

    .search-submit-modern {
        height: 56px;
        padding: 0 20px;
        font-size: 15px
    }

    .search-submit-modern span {
        display: none
    }

    .companies-grid {
        grid-template-columns:1fr;
        gap: 16px
    }

    .companies-results-header {
        padding: 10px 14px
    }

    .location-select-trigger {
        height: 56px;
        font-size: 15px
    }

    .location-select-search {
        padding: 12px
    }

    .location-select-search input {
        padding: 10px 14px 10px 40px;
        font-size: 14px
    }

    .location-select-item {
        padding: 10px 14px;
        font-size: 14px
    }
}

.company-hero-header-simple {
    background: #fff;
    padding: 40px 0;
    border-bottom: 1px solid #E2E8F0
}

.company-hero-content-wrapper {
    display: flex;
    gap: 32px;
    align-items: flex-start
}

.company-logo-minimal {
    flex-shrink: 0
}

.company-logo-minimal .logo-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid #E2E8F0;
    padding: 8px;
    background: #fff
}

.company-logo-minimal .logo-placeholder {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 36px;
    font-weight: 800
}

.company-info-minimal {
    flex: 1
}

.company-name-simple {
    font-size: 32px;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 16px;
    line-height: 1.2
}

.meta-info-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 16px
}

.meta-item-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #64748B;
    font-weight: 500
}

.meta-item-inline i {
    font-size: 13px;
    color: #94A3B8
}

.meta-item-inline.highlight {
    color: #3B82F6;
    font-weight: 600
}

.meta-item-inline.highlight i {
    color: #3B82F6
}

.company-description-inline {
    font-size: 15px;
    line-height: 1.7;
    color: #475569;
    margin-bottom: 16px
}

.specialties-inline {
    font-size: 14px;
    color: #64748B
}

.specialties-label {
    font-weight: 600;
    color: #475569;
    margin-right: 6px
}

.specialties-value {
    color: #64748B
}

.company-jobs-section {
    padding: 60px 0;
    background: #FAFBFC
}

.similar-jobs-section {
    padding: 60px 0;
    background: #fff
}

.company-section-header-modern {
    text-align: center;
    margin-bottom: 50px
}

.company-section-title-modern {
    font-size: 32px;
    font-weight: 800;
    color: #05264E;
    margin-bottom: 12px
}

.company-section-description-modern {
    font-size: 16px;
    color: #66789C
}

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

.company-jobs-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    background: #fff;
    border: 2px dashed #E0E6F7;
    border-radius: 16px
}

.company-empty-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #EFF2FB 0%, #E0E6F7 100%);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px
}

.company-empty-icon i {
    font-size: 36px;
    color: #3C65F5
}

.company-jobs-empty-state h3 {
    font-size: 24px;
    font-weight: 700;
    color: #05264E;
    margin-bottom: 12px
}

.company-jobs-empty-state p {
    font-size: 16px;
    color: #66789C;
    margin: 0
}

.btn-view-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: linear-gradient(135deg, #3C65F5 0%, #2563EB 100%);
    color: #fff;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease
}

.btn-view-all:hover {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgb(60 101 245 / .35)
}

.btn-view-all i {
    transition: transform 0.3s ease
}

.btn-view-all:hover i {
    transform: translateX(5px)
}

@media (max-width: 992px) {
    .company-jobs-grid {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media (max-width: 768px) {
    .company-hero-header-simple {
        padding: 30px 0
    }

    .company-hero-content-wrapper {
        flex-direction: column;
        gap: 20px
    }

    .company-logo-minimal .logo-img, .company-logo-minimal .logo-placeholder {
        width: 80px;
        height: 80px
    }

    .company-name-simple {
        font-size: 26px;
        margin-bottom: 12px
    }

    .meta-info-bar {
        gap: 10px 16px
    }

    .meta-item-inline {
        font-size: 13px
    }

    .company-description-inline {
        font-size: 14px;
        margin-bottom: 12px
    }

    .specialties-inline {
        font-size: 13px
    }

    .company-section-title-modern {
        font-size: 26px
    }

    .company-jobs-grid {
        grid-template-columns:1fr;
        gap: 16px
    }

    .pagination-wrapper {
        margin-top: 40px
    }

    .pagination-wrapper .pagination {
        gap: 6px
    }

    .pagination-wrapper .page-link {
        min-width: 40px;
        height: 40px;
        padding: 0 12px;
        font-size: 14px;
        border-width: 1.5px
    }

    .pagination-wrapper .page-link i {
        font-size: 11px
    }
}

@media (max-width: 576px) {
    .company-hero-header-simple {
        padding: 24px 0
    }

    .company-hero-content-wrapper {
        gap: 16px
    }

    .company-logo-minimal .logo-img, .company-logo-minimal .logo-placeholder {
        width: 70px;
        height: 70px;
        font-size: 28px
    }

    .company-name-simple {
        font-size: 22px
    }

    .meta-info-bar {
        gap: 8px 12px
    }

    .meta-item-inline {
        font-size: 12px
    }

    .company-description-inline {
        font-size: 13px
    }

    .company-section-title-modern {
        font-size: 22px
    }

    .pagination-wrapper {
        margin-top: 35px
    }

    .pagination-wrapper .pagination {
        gap: 5px;
        flex-wrap: wrap;
        justify-content: center
    }

    .pagination-wrapper .page-link {
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        font-size: 13px;
        border-width: 1.5px
    }

    .pagination-wrapper .page-link i {
        font-size: 10px
    }
}

.footer-primary-links .footer-links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 12px 22px
}

.footer-primary-links .footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none
}

.footer-primary-links .footer-links a i {
    font-size: .95rem
}

@keyframes gentle-float {
    0%, 100% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-3px)
    }
}

.homepage-hero-subtitle .highlight-visa, .homepage-hero-subtitle .highlight-relocation, .homepage-hero-subtitle .highlight-remote {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    margin: 0 6px;
    border-radius: 12px;
    font-weight: 600;
    font-size: .95em;
    letter-spacing: .2px;
    position: relative;
    transition: all 0.25s cubic-bezier(.4, 0, .2, 1);
    text-decoration: none;
    border: 1.5px solid #fff0;
    background-clip: padding-box
}

.homepage-hero-subtitle .highlight-visa {
    background: none;
    color: #7c3aed;
    border: none;
    padding: 0;
    margin: 0 2px
}

.homepage-hero-subtitle .highlight-relocation {
    background: linear-gradient(135deg, rgb(59 130 246 / .1) 0%, rgb(37 99 235 / .15) 100%);
    color: #2563eb;
    border-color: rgb(59 130 246 / .2);
    animation: gentle-float 3s ease-in-out infinite;
    animation-delay: 0s
}

.homepage-hero-subtitle .highlight-remote {
    background: linear-gradient(135deg, rgb(16 185 129 / .1) 0%, rgb(5 150 105 / .15) 100%);
    color: #059669;
    border-color: rgb(16 185 129 / .2);
    animation: gentle-float 3s ease-in-out infinite;
    animation-delay: 1.5s
}

.homepage-hero-subtitle .highlight-visa:hover {
    color: #6d28d9;
    transform: none;
    box-shadow: none
}

.homepage-hero-subtitle .highlight-relocation:hover {
    background: linear-gradient(135deg, rgb(59 130 246 / .15) 0%, rgb(37 99 235 / .2) 100%);
    border-color: rgb(59 130 246 / .35);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(59 130 246 / .15);
    animation-play-state: paused
}

.homepage-hero-subtitle .highlight-remote:hover {
    background: linear-gradient(135deg, rgb(16 185 129 / .15) 0%, rgb(5 150 105 / .2) 100%);
    border-color: rgb(16 185 129 / .35);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(16 185 129 / .15);
    animation-play-state: paused
}

@media (max-width: 768px) {
    .homepage-hero-subtitle .highlight-visa, .homepage-hero-subtitle .highlight-relocation, .homepage-hero-subtitle .highlight-remote {
        padding: 3px 10px;
        margin: 0 4px;
        font-size: .9em
    }
}

@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-brands-400.woff2) format('woff2')
}

@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-regular-400.woff2) format('woff2')
}

@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-solid-900.woff2) format('woff2')
}

.company-logo, .hero-company-logo {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges
}

img[loading="lazy"] {
    content-visibility: auto
}

.navbar-logo img, .mobile-menu-logo img {
    max-width: 120px;
    height: auto;
    image-rendering: -webkit-optimize-contrast
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important
}

.navbar-actions .btn-navbar.btn-found-job, .btn-navbar.btn-found-job {
    background-color: #E0E6F7 !important;
    color: #4F5E64 !important;
    border: 2px solid #E0E6F7 !important;
    padding: 6px 12px !important;
    border-radius: 5px !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    transition: all 0.3s ease !important;
    margin-right: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
    gap: 4px !important
}

.navbar-actions .btn-navbar.btn-found-job:hover, .btn-navbar.btn-found-job:hover {
    background-color: #F8FAFF !important;
    border-color: #3C65F5 !important;
    color: #3C65F5 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgb(60 101 245 / .12) !important
}

.navbar-actions .btn-navbar.btn-found-job i, .btn-navbar.btn-found-job i {
    font-size: 12px !important
}

@media (max-width: 991.98px) {
    .navbar-actions .btn-navbar.btn-found-job, .btn-navbar.btn-found-job {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important
    }
}

.navbar-actions .btn-navbar {
    padding: 6px 12px !important;
    font-size: 12px !important;
    margin-right: 6px;
    gap: 4px
}

.navbar-actions .btn-navbar i {
    font-size: 12px !important
}

.navbar-actions .btn-navbar:last-child {
    margin-right: 0
}

.celebration-icon {
    animation: celebration-bounce 1.5s ease-in-out infinite;
    display: inline-block;
    font-size: 1em;
    filter: drop-shadow(0 2px 4px rgb(255 215 0 / .5))
}

@keyframes celebration-bounce {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1)
    }
    25% {
        transform: translateY(-3px) rotate(-8deg) scale(1.1)
    }
    50% {
        transform: translateY(-5px) rotate(8deg) scale(1.15)
    }
    75% {
        transform: translateY(-3px) rotate(-8deg) scale(1.1)
    }
}

.mobile-menu-btn.btn-found-job-mobile {
    background-color: #3C65F5;
    color: #fff;
    border: none;
    width: 100%;
    margin-top: 8px
}

.mobile-menu-btn.btn-found-job-mobile:hover {
    background-color: #2d4fd4;
    color: #fff
}

.mobile-menu-btn.btn-found-job-mobile .celebration-icon {
    margin-right: 8px
}

.modal {
    z-index: 10000 !important
}

.modal-backdrop {
    z-index: 9999 !important
}

.sticky-social-links {
    z-index: 998 !important
}

@media (min-width: 992px) {
    #foundJobModalDialog {
        max-width: 90% !important;
        width: 1200px !important
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    #foundJobModalDialog {
        max-width: 90% !important;
        width: auto !important
    }
}

@media (max-width: 767.98px) {
    #foundJobModal .modal-dialog {
        margin: .5rem auto;
        max-width: calc(100% - 1rem);
        display: flex;
        align-items: center;
        min-height: calc(100% - 1rem)
    }

    #foundJobModal .modal-content {
        border-radius: 10px
    }

    #foundJobModal .modal-header {
        padding: 1rem 1rem .5rem
    }

    #foundJobModal .modal-body {
        padding: 1rem
    }

    #foundJobModal .modal-title {
        font-size: 1.1rem
    }

    #foundJobModal .form-label {
        font-size: .9rem
    }

    #foundJobModal input, #foundJobModal textarea {
        font-size: .875rem
    }
}

@media (max-width: 575.98px) {
    #foundJobModal .modal-dialog {
        margin: .25rem auto;
        max-width: calc(100% - 0.5rem);
        display: flex;
        align-items: center;
        min-height: calc(100% - 0.5rem)
    }

    #foundJobModal .modal-header {
        padding: .75rem .75rem .5rem
    }

    #foundJobModal .modal-body {
        padding: .75rem
    }
}

.card-grid-6 {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgb(0 0 0 / .08);
    transition: all 0.3s ease;
    height: 100%
}

.card-grid-6:hover {
    box-shadow: 0 8px 25px rgb(0 0 0 / .12);
    transform: translateY(-5px)
}

.swiper-group-testimonials {
    padding: 20px 0
}

.swiper-pagination-testimonials {
    bottom: 0 !important
}

.bookmark-icon {
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.job-title-link {
    min-height: 48px !important;
    padding: 8px 0 !important;
    display: block !important;
    margin-bottom: 8px !important;
}

.job-title {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    padding: 8px 0 !important;
}

.job-card-professional .bookmark-icon {
    margin-top: 8px !important;
    margin-right: 8px !important;
}

.job-title-section {
    margin-bottom: 12px !important;
    padding-right: 56px !important;
}

@media (max-width: 768px) {
    .bookmark-icon {
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 14px !important;
    }

    .job-title-link {
        min-height: 48px !important;
        padding: 10px 0 !important;
    }

    .job-title {
        min-height: 48px !important;
        padding: 10px 0 !important;
    }
}

.social-links-label, .contact-label {
    color: #1E293B !important;
    font-weight: 600 !important
}

.sticky-social-links {
    background: #fff !important;
    border: 2px solid #E0E6F7 !important
}

.search-subtitle {
    color: #334155 !important;
    font-weight: 500 !important
}

.latest-jobs-section {
    background: #fff !important
}

.job-location {
    color: #475569 !important;
    font-weight: 500 !important
}

.job-card-professional.benefit-visa .job-location {
    color: #475569 !important
}

.job-card-professional.benefit-relocation .job-location {
    color: #475569 !important
}

.job-card-professional.benefit-remote .job-location {
    color: #475569 !important
}

.article-card-modern span {
    color: #1E293B !important;
    font-weight: 500 !important
}

.section-description-modern {
    color: #334155 !important;
    font-weight: 400 !important
}

.faq-section {
    background: #fff !important
}

.recent-search-tooltip {
    bottom: calc(100% + 8px) !important;
    top: auto !important;
    position: absolute !important
}

.recent-search-delete {
    z-index: 1000 !important
}


/* AI Responsibilities Styles */
.ai-responsibilities {
    margin-top: 24px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid #E0E6F7;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgb(0 0 0 / .04);
}

.responsibilities-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.responsibility-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #F8FAFF;
    border: 1px solid #E0E6F7;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.responsibility-item:hover {
    border-color: #B4C0E0;
    background: #EFF2FB;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(60 101 245 / .08);
}

.responsibility-item i {
    color: #3C65F5;
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

.responsibility-item span {
    color: #05264E;
    font-size: 14px;
    line-height: 1.6;
    flex: 1;
}

/* AI Nice to Have Styles */
.ai-nice-to-have {
    margin-top: 24px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid #E0E6F7;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgb(0 0 0 / .04);
}

.nice-to-have-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.nice-to-have-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #FFFBF0;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.nice-to-have-item:hover {
    border-color: #FCD34D;
    background: #FEF3C7;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(245 158 11 / .12);
}

.nice-to-have-item i {
    color: #F59E0B;
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

.nice-to-have-item span {
    color: #05264E;
    font-size: 14px;
    line-height: 1.6;
    flex: 1;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .ai-responsibilities,
    .ai-nice-to-have {
        padding: 16px 20px;
    }

    .responsibilities-list,
    .nice-to-have-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .responsibility-item,
    .nice-to-have-item {
        padding: 12px 14px;
        gap: 10px;
    }

    .responsibility-item i,
    .nice-to-have-item i {
        font-size: 14px;
    }

    .responsibility-item span,
    .nice-to-have-item span {
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .ai-responsibilities,
    .ai-nice-to-have {
        margin-top: 20px;
        padding: 14px 16px;
    }

    .responsibilities-list,
    .nice-to-have-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .responsibility-item,
    .nice-to-have-item {
        padding: 10px 12px;
        gap: 8px;
    }

    .responsibility-item i,
    .nice-to-have-item i {
        font-size: 13px;
    }

    .responsibility-item span,
    .nice-to-have-item span {
        font-size: 12px;
        line-height: 1.5;
    }
}

/* Share button in sidebar */
.btn-apply-sidebar.native-share {
    flex-shrink: 0;
    min-width: auto;
    width: auto;
}